feat(nui): Initial NUI files

web/src/utils/debugData.ts

@@ -0,0 +1,30 @@
+import {isEnvBrowser} from "./misc";
+
+interface DebugEvent<T = any> {
+  action: string;
+  data: T;
+}
+
+/**
+ * Emulates dispatching an event using SendNuiMessage in the lua scripts.
+ * This is used when developing in browser
+ *
+ * @param events - The event you want to cover
+ * @param timer - How long until it should trigger (ms)
+ */
+export const debugData = <P>(events: DebugEvent<P>[], timer = 1000): void => {
+  if (process.env.NODE_ENV === "development" && isEnvBrowser()) {
+    for (const event of events) {
+      setTimeout(() => {
+        window.dispatchEvent(
+          new MessageEvent("message", {
+            data: {
+              action: event.action,
+              data: event.data,
+            },
+          })
+        );
+      }, timer);
+    }
+  }
+};

web/src/utils/fetchNui.ts

@@ -0,0 +1,28 @@
+/**
+ * Simple wrapper around fetch API tailored for CEF/NUI use. This abstraction
+ * can be extended to include AbortController if needed or if the response isn't
+ * JSON. Tailor it to your needs.
+ *
+ * @param eventName - The endpoint eventname to target
+ * @param data - Data you wish to send in the NUI Callback
+ *
+ * @return returnData - A promise for the data sent back by the NuiCallbacks CB argument
+ */
+
+export async function fetchNui<T = any>(eventName: string, data?: any): Promise<T> {
+  const options = {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8',
+    },
+    body: JSON.stringify(data),
+  };
+
+  const resourceName = (window as any).GetParentResourceName ? (window as any).GetParentResourceName() : 'nui-frame-app';
+
+  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+
+  const respFormatted = await resp.json()
+
+  return respFormatted
+}

web/src/utils/misc.ts

@@ -0,0 +1,6 @@
+// Will return whether the current environment is in a regular browser
+// and not CEF
+export const isEnvBrowser = (): boolean => !(window as any).invokeNative
+
+// Basic no operation function
+export const noop = () => {}