update docs

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`**:

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
 
 <p align='center'>
-<img src='https://cdn.jsdelivr.net/gh/facebook/create-react-app@27b42ac7efa018f2541153ab30d63180f5fa39e0/screencast.svg' width='600' alt='npm start' />
+<img src='/img/demo-cli-2.0.2.gif' width='600' alt='npm start' />
 </p>
 
 ### 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
 │   ├── ....

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<string>("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 (
+    <div>
+      <h1>Some component</h1>
+      <p>{state}</p>
+    </div>
+  );
+};
+```
+
+### 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<ReturnData>("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';
+
+<Tabs>
+  <TabItem value="react" label="react" default>
+    ```ts
+      sendReactMessage("setVisible", true)
+    ```
+
+    After it will be intercepted in `VisibilityProvider` by `useNuiEvent`. It will set the `iframe` the css property `visibility` to `visible`
+
+  </TabItem>
+  <TabItem value="vue" label="vue">
+    ```ts
+      sendVueMessage("setVisible", true)
+    ```
+
+    After it will be intercepted in `VisibilityProvider` by `useNuiEvent`. It will set the `iframe` the css property `visibility` to `visible`
+
+  </TabItem>
+</Tabs>

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()],
-}));
+};
+
 ```

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)       |

docs/sidebars.ts

@@ -36,7 +36,7 @@ const sidebars: SidebarsConfig = {
     {
       type: "category",
       label: "Nui",
-      items: ["nui-client"],
+      items: ["nui-utils"],
     },
   ],
 

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"
   },