breaking(app): move nui build to vite

apps/game/scripts/build.js

@@ -29,13 +29,15 @@ build({
   write: true,
   platform: 'browser',
   target: 'es2016',
+  minify: true,
   plugins: [
     copy({
       resolveFrom: 'cwd',
       verbose: true,
+      copyOnStart: true,
       assets: {
         from: ['client/cl_controls.lua'],
-        to: ['../../dist/game/client/cl_controls.lua'],
+        to: ['../../dist/game/client/'],
       },
     }),
   ],

apps/game/scripts/watch.js

@@ -1,8 +1,9 @@
 const { build } = require('esbuild');
+const { copy } = require('esbuild-plugin-copy');
 
 build({
   entryPoints: ['server/server.ts'],
-  outfile: 'dist/server/server.js',
+  outfile: '../../dist/game/server/server.js',
   bundle: true,
   loader: {
     '.ts': 'ts',
@@ -25,7 +26,7 @@ build({
 
 build({
   entryPoints: ['client/client.ts'],
-  outfile: 'dist/client/client.js',
+  outfile: '../../dist/game/client/client.js',
   bundle: true,
   loader: {
     '.ts': 'ts',
@@ -40,6 +41,16 @@ build({
   write: true,
   platform: 'browser',
   target: 'es2016',
+  plugins: [
+    copy({
+      resolveFrom: 'cwd',
+      verbose: true,
+      assets: {
+        from: ['client/cl_controls.lua'],
+        to: ['../../dist/game/client/cl_controls.lua'],
+      },
+    }),
+  ],
 })
   .then(() => {
     console.log('Client built successfully');

apps/phone/package.json

@@ -39,6 +39,7 @@
     "recoil": "^0.7.7",
     "tailwind-merge": "^1.10.0",
     "uuid": "^8.3.2",
+    "vite-plugin-top-level-await": "^1.3.1",
     "xss": "^1.0.13"
   },
   "devDependencies": {
@@ -83,10 +84,10 @@
   },
   "scripts": {
     "i18n:missing": "node --experimental-json-modules i18n.missingKeys.js",
-    "dev:old": "cross-env IS_BROWSER_DEV=1 webpack serve --config config/webpack.dev.js --mode development",
-    "dev": "cross-env IS_BROWSER_DEV=1 vite",
-    "build": "webpack --config config/webpack.production.js --mode production --progress --color",
-    "dev:game": "cross-env REACT_APP_IN_GAME=1 BROWSER=none webpack --config config/webpack.dev.js --mode development --watch --progress"
+    "dev": "vite --mode dev",
+    "dev:game": "BROWSER=none build:watch",
+    "build": "vite build --mode game",
+    "build:watch": "vite build --watch --mode game"
   },
   "eslintConfig": {
     "extends": "react-app"

apps/phone/src/common/hooks/useExternalApps.tsx

@@ -11,6 +11,8 @@ import {
   __federation_method_unwrapDefault,
   // @ts-ignore - This is Vite federation magic
 } from '__federation__';
+import { EnvMode } from '@utils/config';
+import { NuiProvider } from 'fivem-nui-react-lib';
 
 const useExternalAppsAction = () => {
   const loadScript = async (url: string) => {
@@ -36,7 +38,7 @@ const useExternalAppsAction = () => {
 
   const generateAppConfig = async (appName: string): Promise<IApp> => {
     try {
-      const IN_GAME = import.meta.env.PROD || import.meta.env.REACT_APP_IN_GAME;
+      const IN_GAME = import.meta.env.PROD || import.meta.env.MODE === EnvMode.GAME;
       const url = IN_GAME
         ? `https://cfx-nui-${appName}/web/dist/remoteEntry.js`
         : 'http://localhost:4173/assets/remoteEntry.js';
@@ -57,7 +59,7 @@ const useExternalAppsAction = () => {
 
       const appConfig = m();
       const config = appConfig;
-      config.Component = (props: object) => React.createElement(config.app, props);
+      config.Component = (props: object) => React.createElement(config.app);
 
       const Provider = createExternalAppProvider(config);
 

apps/phone/src/os/apps/hooks/useApps.tsx

@@ -20,12 +20,12 @@ export const useApps = () => {
   const apps: IApp[] = useMemo(() => {
     return APPS.map((app) => {
       const SvgIcon = React.lazy<SvgIconComponent>(() =>
-        import(`../icons/${curIconSet.name}/svg/${app.id}`).catch(
+        import(`../icons/${curIconSet.name}/svg/${app.id}.tsx`).catch(
           () => 'Was not able to find a dynamic import for icon from this icon set',
         ),
       );
       const AppIcon = React.lazy<SvgIconComponent>(() =>
-        import(`../icons/${curIconSet.name}/app/${app.id}`).catch(
+        import(`../icons/${curIconSet.name}/app/${app.id}.tsx`).catch(
           () => 'Was not able to find a dynamic import for icon from this icon set',
         ),
       );

apps/phone/src/utils/config.ts

@@ -15,3 +15,9 @@ export const fetchConfig = async (): Promise<ResourceConfig> => {
 
   return deepMergeObjects({}, defaultConfig, config);
 };
+
+export enum EnvMode {
+  GAME = 'game',
+  DEV = 'dev',
+  PROD = 'production',
+}

apps/phone/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
-
+import topLevelAwait from 'vite-plugin-top-level-await';
 import federation from '@originjs/vite-plugin-federation';
 
 // https://vitejs.dev/config/
@@ -10,7 +10,13 @@ export default defineConfig({
     react(),
     federation({
       remotes: { dummyRemote: 'dummyRemote.js' },
-      shared: ['react', 'react-dom', '@emotion/react', 'react-router-dom'],
+      shared: ['react', 'react-dom', '@emotion/react', 'react-router-dom', 'fivem-nui-react-lib'],
+    }),
+    topLevelAwait({
+      // The export name of top-level await promise for each chunk module
+      promiseExportName: '__tla',
+      // The function to generate import names of top-level await promise in each chunk module
+      promiseImportName: (i) => `__tla_${i}`,
     }),
   ],
   server: {
@@ -30,4 +36,9 @@ export default defineConfig({
   define: {
     'process.env': {},
   },
+  base: './',
+  build: {
+    emptyOutDir: true,
+    outDir: '../../dist/html',
+  },
 });

config.default.json

@@ -93,7 +93,7 @@
   },
   "defaultContacts": [],
   "disabledApps": [],
-  "apps": ["mockapp"],
+  "apps": [],
   "voiceMessage": {
     "enabled": false,
     "authorizationHeader": "Authorization",

config.json

@@ -34,7 +34,7 @@
   },
   "defaultContacts": [],
   "disabledApps": [],
-  "apps": ["mockapp"],
+  "apps": [],
   "voiceMessage": {
     "enabled": false,
     "authorizationHeader": "PE-Secret",