perf: ⚡ Ottimizzato caricamento moduli

package.json

@@ -50,6 +50,7 @@
     "@types/ziggy-js": "^1.3.2",
     "chokidar": "^3.5.3",
     "csstype": "^3.1.2",
+    "fast-glob": "^3.2.12",
     "inertia-plugin": "^0.6.0",
     "laravel-vite-plugin": "^0.7.4",
     "postcss": "^8.4.23",

pnpm-lock.yaml

@@ -99,6 +99,9 @@ devDependencies:
   csstype:
     specifier: ^3.1.2
     version: 3.1.2
+  fast-glob:
+    specifier: ^3.2.12
+    version: 3.2.12
   inertia-plugin:
     specifier: ^0.6.0
     version: 0.6.0

resources/ts/app.ts

@@ -1,16 +1,11 @@
+import {createInertiaApp} from '@maicol07/inertia-mithril';
+import Mithril from 'mithril';
+import {registerSW} from 'virtual:pwa-register';
 import '~/../scss/app.scss';
 
-import {createInertiaApp} from '@maicol07/inertia-mithril';
-import Mithril, {ClassComponent} from 'mithril';
-import {registerSW} from 'virtual:pwa-register';
-
 import {showSnackbar} from '~/utils/misc';
-import {
-  resolvePage,
-  resolvePluginPage
-} from '~inertia';
+import {resolvePage} from '~inertia';
 
-import type Page from './Components/Page';
 import {OpenSTAManager} from './typings/modules';
 import {
   __ as stringTranslator,
@@ -31,31 +26,15 @@ window._v = vnodeTranslator;
 window.__ = stringTranslator;
 
 // Load modules bootstrap
-for (const [name, module] of Object.entries(app.modules)) {
-  if (module.hasBootstrap) {
-    // eslint-disable-next-line no-await-in-loop
-    await import(`./vendor/${name}/resources/ts/bootstrap.tsx`);
-
-    // const path = moduleURL.replace('{{modulePath}}', `${module.moduleVendor}/${name}`);
-
-    // eslint-disable-next-line no-await-in-loop
-    // importedModules[name] = await import(/* @vite-ignore */ path) as OpenSTAManager.ImportedModule;
-    // importedModules[name].bootstrap?.();
-    // window.InertiaPlugin.addNamespace(name, path);
-  }
-}
+import.meta.glob('../../vendor/**/**/resources/{js,ts}/bootstrap.{tsx,ts,js,jsx}', {eager: true});
 
 await createInertiaApp({
   title: ((title) => `${title} - OpenSTAManager`),
-  resolve: async (name) => {
-    let page: OpenSTAManager.ImportedModule | ClassComponent = await resolvePluginPage(name);
-    if (!page) {
-      const bundledPages = import.meta.glob<OpenSTAManager.ImportedModule>('./Views/**/*.tsx');
-      page = await bundledPages[`./Views/${name}.tsx`]();
-    }
-    page = (page as OpenSTAManager.ImportedModule).default || page;
-    return page;
-  },
+  // This rule is disabled to avoid a bug in Inertia plugin
+  // eslint-disable-next-line arrow-body-style
+  resolve: resolvePage((page) => {
+    return import.meta.glob<OpenSTAManager.ImportedModule>('./Views/**/*.tsx');
+  }),
   setup({el, App, props}) {
     if (!el) {
       throw new Error('No mounting HTMLElement found');

vite.config.ts

@@ -1,109 +1,98 @@
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-extraneous-dependencies,new-cap */
+import FastGlob from 'fast-glob';
 import Inertia from 'inertia-plugin/vite';
 import laravel from 'laravel-vite-plugin';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
 import {defineConfig} from 'vite';
 import laravelTranslations from 'vite-plugin-laravel-translations';
-import progress from 'vite-plugin-progress';
+// import progress from 'vite-plugin-progress';
 import {VitePWA} from 'vite-plugin-pwa';
+
 import installedPackages from './vendor/composer/installed.json';
 
 const modules = installedPackages.packages.filter((packageInfo) => packageInfo.type === 'openstamanager-module');
-const bootstrapFiles = [];
-for (const module of modules) {
-  const basePath = `./vendor/${module.name}/resources/ts/bootstrap`;
-  if (fs.existsSync(`${basePath}.ts`)) {
-    bootstrapFiles.push(`${basePath}.ts`);
-  } else if (fs.existsSync(`${basePath}.tsx`)) {
-    bootstrapFiles.push(`${basePath}.tsx`);
-  }
-}
-
 
 // noinspection JSUnusedGlobalSymbols
-export default defineConfig({
-  assetsInclude: '**/*.xml',
-  build: {
-    minify: false,
-    target: 'esnext'
-  },
-  resolve: {
-    alias: {
-      '~': '/resources/ts',
-      '@osm': '/resources/ts'
-    }
-  },
-  esbuild: {
-    jsx: 'transform',
-    jsxFactory: 'm',
-    jsxFragment: '\'[\'',
-    jsxInject: 'import m from \'mithril\''
-  },
-  plugins: [
-    laravel({
-      input: [
-        'resources/ts/app.ts',
-        ...bootstrapFiles
-      ],
-      refresh: true
-    }),
-    laravelTranslations({
-      namespace: 'osm',
-      includeJson: true
-    }),
-    // eslint-disable-next-line new-cap
-    Inertia({
-      namespaces: ({npm, composer}) => {
-        const namespaces = [];
-        for (const module of modules) {
-          // @ts-ignore
-          namespaces.push(composer(module.name));
-        }
-        return namespaces;
+export default defineConfig(async () => {
+  const bootstrapFiles = await FastGlob('./vendor/*/*/resources/ts/bootstrap.{tsx,ts,jsx,js}');
+  return {
+    assetsInclude: '**/*.xml',
+    build: {
+      sourcemap: true,
+      target: 'esnext'
+    },
+    resolve: {
+      alias: {
+        '~': '/resources/ts',
+        '@osm': '/resources/ts'
       }
-    }),
-    progress({
-      // eslint-disable-next-line unicorn/prefer-module
-      srcDir: path.resolve(__dirname, 'resources/ts')
-    }),
-    // eslint-disable-next-line new-cap
-    VitePWA({
-      // TODO: Check options
-      includeAssets: [
-        'resources/images/favicon/favicon.ico',
-        '../robots.txt',
-        'resources/images/favicon/apple-touch-icon.png',
-        'resources/images/*.png'
-      ],
-      manifest: {
-        name: 'OpenSTAManager',
-        short_name: 'OSM',
-        description: 'Il software gestionale open source per l\'assistenza tecnica e la fatturazione',
-        categories: ['business', 'productivity'],
-        display: 'minimal-ui',
-        theme_color: '#3f3f3f',
-        background_color: '#fffff',
-        icons: [
-          {
-            src: 'android-chrome-192x192.png',
-            sizes: '192x192',
-            type: 'image/png'
-          },
-          {
-            src: 'android-chrome-512x512.png',
-            sizes: '512x512',
-            type: 'image/png'
-          },
-          {
-            src: 'android-chrome-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-            purpose: 'any maskable'
-          }
-        ]
-      },
-      useCredentials: true
-    })
-  ]
+    },
+    esbuild: {
+      jsx: 'transform',
+      jsxFactory: 'm',
+      jsxFragment: '\'[\'',
+      jsxInject: 'import m from \'mithril\'',
+      minifyIdentifiers: false
+    },
+    plugins: [
+      laravel({
+        input: [
+          'resources/ts/app.ts',
+          ...bootstrapFiles
+        ],
+        refresh: true
+      }),
+      laravelTranslations({
+        namespace: 'osm',
+        includeJson: true
+      }),
+      Inertia({
+        namespaces: ({npm, composer}) => modules.map(
+          // @ts-expect-error - Inertia plugins typings are not updated (dir parameter is 'vendor' by default)
+          (module) => composer(module.name)
+        ),
+        extensions: ['tsx', 'ts', 'jsx', 'js']
+      }),
+      // progress({
+      //   // eslint-disable-next-line unicorn/prefer-module
+      //   srcDir: path.resolve(__dirname, 'resources/ts'),
+      // }),
+      VitePWA({
+        // TODO: Check options
+        includeAssets: [
+          'resources/images/favicon/favicon.ico',
+          '../robots.txt',
+          'resources/images/favicon/apple-touch-icon.png',
+          'resources/images/*.png'
+        ],
+        manifest: {
+          name: 'OpenSTAManager',
+          short_name: 'OSM',
+          description: 'Il software gestionale open source per l\'assistenza tecnica e la fatturazione',
+          categories: ['business', 'productivity'],
+          display: 'minimal-ui',
+          theme_color: '#3f3f3f',
+          background_color: '#fffff',
+          icons: [
+            {
+              src: 'android-chrome-192x192.png',
+              sizes: '192x192',
+              type: 'image/png'
+            },
+            {
+              src: 'android-chrome-512x512.png',
+              sizes: '512x512',
+              type: 'image/png'
+            },
+            {
+              src: 'android-chrome-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'any maskable'
+            }
+          ]
+        },
+        useCredentials: true
+      })
+    ]
+  };
 });