{
4 | action: string;
5 | data: T;
6 | }
7 |
8 | /**
9 | * Emulates dispatching an event using SendNuiMessage in the lua scripts.
10 | * This is used when developing in browser
11 | *
12 | * @param events - The event you want to cover
13 | * @param timer - How long until it should trigger (ms)
14 | */
15 | export const debugData = (events: DebugEvent
[], timer = 1000): void => {
16 | if (process.env.NODE_ENV === "development" && isEnvBrowser()) {
17 | for (const event of events) {
18 | setTimeout(() => {
19 | window.dispatchEvent(
20 | new MessageEvent("message", {
21 | data: {
22 | action: event.action,
23 | data: event.data,
24 | },
25 | })
26 | );
27 | }, timer);
28 | }
29 | }
30 | };
--------------------------------------------------------------------------------
/web/src/utils/fetchNui.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Simple wrapper around fetch API tailored for CEF/NUI use. This abstraction
3 | * can be extended to include AbortController if needed or if the response isn't
4 | * JSON. Tailor it to your needs.
5 | *
6 | * @param eventName - The endpoint eventname to target
7 | * @param data - Data you wish to send in the NUI Callback
8 | *
9 | * @return returnData - A promise for the data sent back by the NuiCallbacks CB argument
10 | */
11 |
12 | import { isEnvBrowser } from "./misc";
13 |
14 | export async function fetchNui(eventName: string, data?: any, devEnv?: any): Promise {
15 | if (process.env.NODE_ENV === "development" && isEnvBrowser()) {
16 | console.log(`fetchNui: ${eventName} =>`, JSON.stringify(data)); return Promise.resolve(devEnv || {} as T)
17 | };
18 |
19 | const options = {
20 | method: 'post',
21 | headers: {
22 | 'Content-Type': 'application/json; charset=UTF-8',
23 | },
24 | body: JSON.stringify(data),
25 | };
26 |
27 | const resourceName = (window as any).GetParentResourceName ? (window as any).GetParentResourceName() : 'nui-frame-app';
28 |
29 | const resp = await fetch(`https://${resourceName}/${eventName}`, options);
30 |
31 | const respFormatted = await resp.json()
32 |
33 | return respFormatted
34 | }
35 |
--------------------------------------------------------------------------------
/web/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './debugData'
2 | export * from './misc'
3 | export * from './fetchNui'
4 | export * from './markdown'
5 | export * from '../hooks/useNuiEvent';
--------------------------------------------------------------------------------
/web/src/utils/markdown.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentPropsWithoutRef } from "react";
2 | import { Components } from "react-markdown";
3 | import { Title } from "@mantine/core";
4 |
5 | export const MarkdownComponents: Components = {
6 | h1: ({ node, ...props }) => (
7 | )} />
8 | ),
9 | h2: ({ node, ...props }) => (
10 | <Title order={2} {...(props as ComponentPropsWithoutRef<typeof Title>)} />
11 | ),
12 | h3: ({ node, ...props }) => (
13 | <Title order={3} {...(props as ComponentPropsWithoutRef<typeof Title>)} />
14 | ),
15 | };
--------------------------------------------------------------------------------
/web/src/utils/misc.ts:
--------------------------------------------------------------------------------
1 | // Will return whether the current environment is in a regular browser
2 | // and not CEF
3 | export const isEnvBrowser = (): boolean => !(window as any).invokeNative;
4 |
5 | // Basic no operation function
6 | export const noop = () => {};
7 |
8 | // Math Random
9 | export const MathRandom = (min?: number, max?: number) => {
10 | min = min || 0
11 | max = max || 100
12 | return Math.floor(Math.random() * (max - min + 1) + min)
13 | };
14 |
15 | // Math Round
16 | export const MathRound = (value: number, precision: number) => {
17 | const multiplier = Math.pow(10, precision || 0);
18 | return Math.round(value * multiplier) / multiplier;
19 | };
20 |
21 | // Math Digits
22 | export const MathDigits = (value: number) => {
23 | return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
24 | };
--------------------------------------------------------------------------------
/web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------