├── server └── server.lua ├── web ├── src │ ├── vite-env.d.ts │ ├── main.ts │ ├── utils │ │ ├── misc.ts │ │ ├── fetchNui.ts │ │ ├── debugData.ts │ │ └── useNuiEvent.ts │ ├── store │ │ └── stores.ts │ ├── App.svelte │ ├── providers │ │ └── VisibilityProvider.svelte │ └── components │ │ └── HelloWorld.svelte ├── tsconfig.node.json ├── svelte.config.js ├── vite.config.ts ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json └── pnpm-lock.yaml ├── .github └── dependabot.yml ├── fxmanifest.lua ├── client └── client.lua ├── LICENSE └── README.md /server/server.lua: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | updates: 4 | - package-ecosystem: "npm" 5 | directory: /web 6 | schedule: 7 | interval: "daily" 8 | -------------------------------------------------------------------------------- /web/src/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.getElementById('app')!, 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /web/src/utils/misc.ts: -------------------------------------------------------------------------------- 1 | /** Returns a boolean value if the resource is shown in a browser window */ 2 | export const isEnvBrowser = (): boolean => !(window as any).invokeNative; 3 | -------------------------------------------------------------------------------- /web/src/store/stores.ts: -------------------------------------------------------------------------------- 1 | import { writable } from "svelte/store"; 2 | 3 | /** Returns boolean value of if the resource is visible or not */ 4 | export const visibility = writable(false); 5 | -------------------------------------------------------------------------------- /web/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /web/svelte.config.js: -------------------------------------------------------------------------------- 1 | import sveltePreprocess from 'svelte-preprocess' 2 | 3 | export default { 4 | // Consult https://github.com/sveltejs/svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: sveltePreprocess() 7 | } 8 | -------------------------------------------------------------------------------- /web/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | base: './', 8 | build: { 9 | outDir: 'build', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /fxmanifest.lua: -------------------------------------------------------------------------------- 1 | fx_version 'cerulean' 2 | 3 | games {"gta5", "rdr3"} 4 | 5 | author "Project Error" 6 | version '1.0.0' 7 | 8 | lua54 'yes' 9 | 10 | ui_page 'web/build/index.html' 11 | 12 | client_script "client/**/*" 13 | server_script "server/**/*" 14 | 15 | files { 16 | 'web/build/index.html', 17 | 'web/build/**/*' 18 | } 19 | -------------------------------------------------------------------------------- /web/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | build 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Svelte + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/src/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 | 16 | 17 | 18 |
19 | -------------------------------------------------------------------------------- /client/client.lua: -------------------------------------------------------------------------------- 1 | RegisterCommand('svelte:show', function() 2 | SendNUIMessage({ 3 | action = 'setVisible', 4 | data = true 5 | }) 6 | SetNuiFocus(true, true) 7 | end) 8 | 9 | RegisterNUICallback('getClientData', function(_, cb) 10 | local playerCoords = GetEntityCoords(PlayerPedId()) 11 | cb({ 12 | x = math.ceil(playerCoords.x), 13 | y = math.ceil(playerCoords.y), 14 | z = math.ceil(playerCoords.z) 15 | }) 16 | end) 17 | 18 | RegisterNUICallback('hideUI', function(_, cb) 19 | cb({}) 20 | SetNuiFocus(false, false) 21 | end) -------------------------------------------------------------------------------- /web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "dev:game": "vite build --watch", 9 | "build": "vite build", 10 | "preview": "vite preview", 11 | "check": "svelte-check --tsconfig ./tsconfig.json" 12 | }, 13 | "devDependencies": { 14 | "@sveltejs/vite-plugin-svelte": "^2.4.3", 15 | "@tsconfig/svelte": "^5.0.0", 16 | "svelte": "^4.1.1", 17 | "svelte-check": "^3.4.6", 18 | "svelte-preprocess": "^5.0.4", 19 | "tslib": "^2.6.1", 20 | "typescript": "^5.1.6", 21 | "vite": "^4.4.7" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /web/src/utils/fetchNui.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @param eventName - The endpoint eventname to target 3 | * @param data - Data you wish to send in the NUI Callback 4 | * 5 | * @return returnData - A promise for the data sent back by the NuiCallbacks CB argument 6 | */ 7 | 8 | export async function fetchNui( 9 | eventName: string, 10 | data: unknown = {} 11 | ): Promise { 12 | const options = { 13 | method: "post", 14 | headers: { 15 | "Content-Type": "application/json; charset=UTF-8", 16 | }, 17 | body: JSON.stringify(data), 18 | }; 19 | 20 | const resourceName = (window as any).GetParentResourceName 21 | ? (window as any).GetParentResourceName() 22 | : "nui-frame-app"; 23 | 24 | const resp = await fetch(`https://${resourceName}/${eventName}`, options); 25 | 26 | return await resp.json(); 27 | } 28 | -------------------------------------------------------------------------------- /web/src/utils/debugData.ts: -------------------------------------------------------------------------------- 1 | import {isEnvBrowser} from "./misc"; 2 | 3 | interface DebugEvent { 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 (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/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "strict": true, 8 | "resolveJsonModule": true, 9 | "allowSyntheticDefaultImports": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "baseUrl": ".", 12 | /** 13 | * Typecheck JS in `.svelte` and `.js` files by default. 14 | * Disable checkJs if you'd like to use dynamic types in JS. 15 | * Note that setting allowJs false does not prevent the use 16 | * of JS in `.svelte` files. 17 | */ 18 | "allowJs": true, 19 | "checkJs": true, 20 | "isolatedModules": true 21 | }, 22 | "include": ["src/**/*"], 23 | "exclude": ["node_modules/*", "public/*"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /web/src/providers/VisibilityProvider.svelte: -------------------------------------------------------------------------------- 1 | 30 | 31 |

32 | {#if isVisible} 33 | 34 | {/if} 35 |
36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Project Error 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /web/src/utils/useNuiEvent.ts: -------------------------------------------------------------------------------- 1 | import { onDestroy } from "svelte"; 2 | 3 | interface NuiMessage { 4 | action: string; 5 | data: T; 6 | } 7 | 8 | type NuiEventHandler = (data: T) => void; 9 | 10 | const eventListeners = new Map(); 11 | 12 | const eventListener = (event: MessageEvent) => { 13 | const { action, data } = event.data; 14 | const handlers = eventListeners.get(action); 15 | 16 | if (handlers) { 17 | handlers.forEach((handler) => handler(data)); 18 | } 19 | }; 20 | 21 | window.addEventListener("message", eventListener); 22 | 23 | /** 24 | * A function that manage events listeners for receiving data from the client scripts 25 | * @param action The specific `action` that should be listened for. 26 | * @param handler The callback function that will handle data relayed by this function 27 | * 28 | * @example 29 | * useNuiEvent<{visibility: true, wasVisible: 'something'}>('setVisible', (data) => { 30 | * // whatever logic you want 31 | * }) 32 | * 33 | **/ 34 | export function useNuiEvent( 35 | action: string, 36 | handler: NuiEventHandler 37 | ) { 38 | const handlers = eventListeners.get(action) || []; 39 | handlers.push(handler); 40 | eventListeners.set(action, handlers); 41 | 42 | onDestroy(() => { 43 | const handlers = eventListeners.get(action) || []; 44 | 45 | eventListeners.set( 46 | action, 47 | handlers.filter((h) => h !== handler) 48 | ); 49 | }); 50 | } 51 | -------------------------------------------------------------------------------- /web/src/components/HelloWorld.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 |
30 |

Svelte NUI Popup!

31 |
Player coords: {JSON.stringify(clientData) || ''}
32 |
33 | 34 | 35 |
36 | Or press the escape key! 37 |
38 | 39 | 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | Material-UI logo 3 |
4 |

Svelte & Lua Boilerplate

5 | 6 | This repository is a basic boilerplate for getting started 7 | with Svelte in NUI. It can be used for both in browser and 8 | in game development. 9 | 10 | Utilizing `Vite` allows us to have hot builds while developing in game 11 | by restarting the resource, instead of having to make a production build. 12 | 13 | This version of the boilerplate is meant for the CfxLua runtime. 14 | 15 | ## Requirements 16 | * [Node > v10.6](https://nodejs.org/en/) 17 | * [pnpm](https://pnpm.io/installation) (Highly recommended over yarn or npm) 18 | 19 | *A basic understanding of the modern web development workflow. If you don't 20 | know this yet, Svelte might not be for you just yet.* 21 | 22 | ## Getting Started 23 | 24 | First clone the repository or use the template option and place 25 | it within your `resources` folder 26 | 27 | ### Installation 28 | 29 | Install dependencies by navigating to the `web` folder within 30 | a terminal of your choice and type `pnpm i`. 31 | 32 | ## Features 33 | 34 | This boilerplate comes with some utilities and examples to work off of. 35 | 36 | ### Svelte Utils 37 | 38 | Signatures are not included for these utilities as the type definitions 39 | are sufficient enough. 40 | 41 | **Toggling main frame visibility** 42 | 43 | You can exit the UI frame using the `ESC` key, if you need to forcefully 44 | hide it you can use `visibility.set()`, visibility being an exported writable 45 | from the Svelte store. 46 | 47 | Before being able to use the writable you must first import it from `store/stores.ts` 48 | ```svelte 49 | 52 | ``` 53 | 54 | **useNuiEvent** 55 | 56 | This is a custom function that is designed to intercept and handle 57 | messages dispatched by the game scripts. This is the primary 58 | way of creating passive listeners. 59 | 60 | 61 | *Note: For now handlers can only be registered a single time. I haven't 62 | come across a personal usecase for a cascading event system* 63 | 64 | **Usage** 65 | ```svelte 66 | 77 | 78 |
{characterName}
79 | ``` 80 | 81 | **fetchNui** 82 | 83 | This is a simple NUI focused wrapper around the standard `fetch` API. 84 | This is the main way to accomplish active NUI data fetching 85 | or to trigger NUI callbacks in the game scripts. 86 | 87 | When using this, you must always at least callback using `{}` 88 | in the gamescripts. 89 | 90 | *This can be heavily customized to your use case* 91 | 92 | **Usage** 93 | ```svelte 94 | 105 | 106 |
{clientCoords}
107 | ``` 108 | 109 | **debugData** 110 | 111 | This is a function allowing for mocking dispatched game script 112 | actions in a browser environment. It will trigger `useNuiEvent` handlers 113 | as if they were dispatched by the game scripts. **It will only fire if the current 114 | environment is a regular browser and not CEF** 115 | 116 | **Usage** 117 | ```ts 118 | // This will target the useNuiEvent function registered with `setVisible` 119 | // and pass them the data of `true` 120 |