From 0f638d2dbfd8f9fb5aa34618b63c2dfa44848d38 Mon Sep 17 00:00:00 2001 From: Justin Martin Date: Thu, 22 Aug 2024 02:09:35 +0200 Subject: [PATCH] update docs --- docs/docs/folder-structure.md | 14 +++--- docs/docs/getting-started.md | 8 ++- docs/docs/nui-client.md | 6 --- docs/docs/nui-utils.md | 87 +++++++++++++++++++++++++++++++++ docs/docs/rollupjs.md | 17 ++----- docs/docs/supported-features.md | 10 ++-- docs/sidebars.ts | 2 +- package.json | 11 ++++- 8 files changed, 118 insertions(+), 37 deletions(-) delete mode 100644 docs/docs/nui-client.md create mode 100644 docs/docs/nui-utils.md diff --git a/docs/docs/folder-structure.md b/docs/docs/folder-structure.md index 43cc66e..5b6e4c4 100644 --- a/docs/docs/folder-structure.md +++ b/docs/docs/folder-structure.md @@ -28,19 +28,19 @@ After creation, your Javascript/Typescript resource should look like this: ``` my-res/ - README.md + README_res.md client/ src/ - client.entry.ts + index.ts package.json - rollup.config.js + rollup.config.mjs server/ src/ - server.entry.ts + index.ts package.json - rollup.config.js + rollup.config.mjs types/ - index.d.ts + exports.d.ts package.json web/ package.json @@ -50,4 +50,4 @@ my-res/ The `web` sub-folder exist only if you choose the Nui option. -For the resource building we use [Rollup](https://rollupjs.org/) to create bundle of `.entry.(ts|js)` files, **these bundles will be stored in `dist` folder and loaded by FiveM using `fxmanifest.lua`**: +For the resource building we use [Rollup](https://rollupjs.org/) to create bundle of `index.(ts|js)` files, **these bundle will be stored in `dist` folder and loaded by FiveM using `fxmanifest.lua`**: diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md index a57b476..171cc76 100644 --- a/docs/docs/getting-started.md +++ b/docs/docs/getting-started.md @@ -9,8 +9,6 @@ Create FiveM Resource is an unofficially supported way to create resource. It of ```sh npx create-fivem-resource -cd my-res -pnpm watch ``` > If you've previously installed `create-fivem-resource` globally via `npm install -g create-fivem-resource`, we recommend you uninstall the package using `npm uninstall -g create-fivem-resource` or `yarn global remove create-fivem-resource` to ensure that `npx` always uses the latest version. @@ -26,7 +24,7 @@ ensure my-res Then start your FXServer, and connect to it using FiveM client

-npm start +npm start

### Get Started Immediately @@ -78,11 +76,11 @@ Exemples of options : ## Output -Running any of these commands will create a directory called `my-res` inside the current folder. Inside that directory, it will generate the initial resource structure: +Running any of these commands will create a folder with the name of your resource. Inside that folder, it will generate the initial resource structure: ``` my-res -├── README.md +├── README_res.md ├── fxmanifest.lua ├── client │ ├── .... diff --git a/docs/docs/nui-client.md b/docs/docs/nui-client.md deleted file mode 100644 index 897be15..0000000 --- a/docs/docs/nui-client.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: nui-client -title: Nui ---- - -## Nui doc WIP diff --git a/docs/docs/nui-utils.md b/docs/docs/nui-utils.md new file mode 100644 index 0000000..63d5a1c --- /dev/null +++ b/docs/docs/nui-utils.md @@ -0,0 +1,87 @@ +--- +id: nui-utils +title: Utils +sidebar_label: Utils +--- + +## Utils + +Our Nui templates includes somes utils methods to communicate with fivem resource client-side. + +### useNuiEvent hook + +`useNuiEvent` is a hook designed to intercept and handle messages dispatched by the game scripts. This is the primary way of creating passive listeners. + +Note: For now handlers can only be registered a single time. I haven't come across a personal usecase for a cascading event system + +```ts +const MyComp: React.FC = () => { + const [state, setState] = useState(""); + + useNuiEvent("myAction", (data) => { + // the first argument to the handler function + // is the data argument sent using SendReactMessage + + // do whatever logic u want here + setState(data); + }); + + return ( +
+

Some component

+

{state}

+
+ ); +}; +``` + +### fetchNui + +`fetchNui` is a simple NUI focused wrapper around the standard fetch API. This is the main way to accomplish active NUI data fetching or to trigger NUI callbacks in the game scripts. + +When using this, you must always at least callback using {} in the gamescripts. + +This can be heavily customized to your use case + +```ts +// First argument is the callback event name. +fetchNui("getClientData") + .then((retData) => { + console.log("Got return data from client scripts:"); + console.dir(retData); + setClientData(retData); + }) + .catch((e) => { + console.error("Setting mock data due to error", e); + setClientData({ x: 500, y: 300, z: 200 }); + }); +``` + +### Visibility management + +The `react` and `vue` templates include system to manage visibility of Nui frame. + +You can display the frame by sending message to NUI from client-side + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import CodeBlock from '@theme/CodeBlock'; + + + + ```ts + sendReactMessage("setVisible", true) + ``` + + After it will be intercepted in `VisibilityProvider` by `useNuiEvent`. It will set the `iframe` the css property `visibility` to `visible` + + + + ```ts + sendVueMessage("setVisible", true) + ``` + + After it will be intercepted in `VisibilityProvider` by `useNuiEvent`. It will set the `iframe` the css property `visibility` to `visible` + + + diff --git a/docs/docs/rollupjs.md b/docs/docs/rollupjs.md index dca8c2b..d7f3684 100644 --- a/docs/docs/rollupjs.md +++ b/docs/docs/rollupjs.md @@ -9,7 +9,7 @@ We use [Rollup.js](https://rollupjs.org/) to generate bundles supported by FiveM Bundles are comptible with Node 16 (the version embeded in FiveM client), they are fully in CommonJS because the runtime is not compatible with `require` syntax. -The commands `pnpm build` and `pnpm watch` will generate a bundled file for each `*.entry.ts` or `*.entry.js` files. +The commands `pnpm build` and `pnpm watch` will generate some bundled files for `index.ts` or `index.js` files. Theses bundles are stored in `dist` folder and loaded by FiveM with `client_scripts` and `server_scripts` properties inside `fxmanifest.lua`. @@ -23,22 +23,15 @@ Our configuration use `@rollup/plugin-typescript`, `@rollup/plugin-commonjs` and import typescript from "@rollup/plugin-typescript"; import commonjs from "@rollup/plugin-commonjs"; import resolve from "@rollup/plugin-node-resolve"; -import glob from "fast-glob"; -//find all file matching the pattern *.entry.tsc -const entryFiles = glob.sync("src/*.entry.ts"); - -if (entryFiles.length === 0) { - throw new Error("No entry files found"); -} - -export default entryFiles.map((entryFile) => ({ - input: entryFile, +export default { + input: "src/index.ts", output: { dir: "dist", format: "cjs", sourcemap: false, }, plugins: [resolve(), typescript(), commonjs()], -})); +}; + ``` diff --git a/docs/docs/supported-features.md b/docs/docs/supported-features.md index b506196..8f9fa28 100644 --- a/docs/docs/supported-features.md +++ b/docs/docs/supported-features.md @@ -12,13 +12,13 @@ sidebar_label: Supported Features | Runtime | Status | Template | | ---------- | ------ | ---------------------------------------------------------------------------------------------------- | -| Typescript | 🚧 | [template](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/typescript/vanilla) | -| Javascript | 🚧 | [template](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/javascript/vanilla) | -| Lua | 🚧 | [template](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/lua/vanilla) | +| Typescript | ✅ | [template](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/typescript-vanilla) | +| Javascript | ✅ | [template](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/javascript-vanilla) | +| Lua | ✅ | [template](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/lua-vanilla) | ## Supported Nui Framework | Runtime | Status | Template | | ------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| React | 🚧 | [lua](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/lua/nui/react) / [typescript](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/typescript/nui/react) / [javascript](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/javascript/nui/react) | -| Vue | 🚧 | [lua](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/lua/nui/vue) / [typescript](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/typescript/nui/vue) / [javascript](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/javascript/nui/vue) | +| React | ✅ | [lua](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/lua-nui-react) / [typescript](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/typescript-nui-react) / [javascript](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/javascript-nui-react) | +| Vue | ✅ | [lua](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/lua-nui-vue) / [typescript](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/typescript-nui-vue) / [javascript](https://github.com/JustinMartinDev/fivem-resource-templates/tree/main/javascript-nui-vue) | diff --git a/docs/sidebars.ts b/docs/sidebars.ts index 697af3b..c674897 100644 --- a/docs/sidebars.ts +++ b/docs/sidebars.ts @@ -36,7 +36,7 @@ const sidebars: SidebarsConfig = { { type: "category", label: "Nui", - items: ["nui-client"], + items: ["nui-utils"], }, ], diff --git a/package.json b/package.json index 140050f..d71eeaf 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,16 @@ { "name": "create-fivem-resource", - "version": "2.0.3", + "version": "2.0.5", "license": "MIT", + "repository": "https://github.com/JustinMartinDev/create-fivem-resource", + "homepage": "https://create-fivem-resource.dev", + "keywords": [ + "fivem", + "resource", + "nui", + "citizenfx", + "cli" + ], "bin": { "create-fivem-resource": "./dist/src/index.js" },