refactor: update Vite configuration to support dynamic loading of frappe-ui in development mode

frontend/vite.config.js

@@ -6,75 +6,118 @@ import frappeui from 'frappe-ui/vite'
 import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(async ({ mode }) => {
-  plugins: [
+  const isDev = mode === 'development'
-    frappeui({
+  const frappeui = await importFrappeUIPlugin(isDev)
-      frappeProxy: true,
+
-      lucideIcons: true,
+  const config = {
-      jinjaBootData: true,
+    plugins: [
-      buildConfig: {
+      frappeui({
-        indexHtmlPath: '../crm/www/crm.html',
+        frappeProxy: true,
-        emptyOutDir: true,
+        lucideIcons: true,
-        sourcemap: true,
+        jinjaBootData: true,
-      },
+        buildConfig: {
-    }),
+          indexHtmlPath: '../crm/www/crm.html',
-    vue(),
+          emptyOutDir: true,
-    vueJsx(),
+          sourcemap: true,
-    VitePWA({
+        },
-      registerType: 'autoUpdate',
+      }),
-      devOptions: {
+      vue(),
-        enabled: true,
+      vueJsx(),
-      },
+      VitePWA({
-      manifest: {
+        registerType: 'autoUpdate',
-        display: 'standalone',
+        devOptions: {
-        name: 'Frappe CRM',
+          enabled: true,
-        short_name: 'Frappe CRM',
+        },
-        start_url: '/crm',
+        manifest: {
-        description:
+          display: 'standalone',
-          'Modern & 100% Open-source CRM tool to supercharge your sales operations',
+          name: 'Frappe CRM',
-        icons: [
+          short_name: 'Frappe CRM',
-          {
+          start_url: '/crm',
-            src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
+          description:
-            sizes: '192x192',
+            'Modern & 100% Open-source CRM tool to supercharge your sales operations',
-            type: 'image/png',
+          icons: [
-            purpose: 'any',
+            {
-          },
+              src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
-          {
+              sizes: '192x192',
-            src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
+              type: 'image/png',
-            sizes: '192x192',
+              purpose: 'any',
-            type: 'image/png',
+            },
-            purpose: 'maskable',
+            {
-          },
+              src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
-          {
+              sizes: '192x192',
-            src: '/assets/crm/manifest/manifest-icon-512.maskable.png',
+              type: 'image/png',
-            sizes: '512x512',
+              purpose: 'maskable',
-            type: 'image/png',
+            },
-            purpose: 'any',
+            {
-          },
+              src: '/assets/crm/manifest/manifest-icon-512.maskable.png',
-          {
+              sizes: '512x512',
-            src: '/assets/crm/manifest/manifest-icon-512.maskable.png',
+              type: 'image/png',
-            sizes: '512x512',
+              purpose: 'any',
-            type: 'image/png',
+            },
-            purpose: 'maskable',
+            {
-          },
+              src: '/assets/crm/manifest/manifest-icon-512.maskable.png',
-        ],
+              sizes: '512x512',
-      },
+              type: 'image/png',
-    }),
+              purpose: 'maskable',
-  ],
+            },
-  resolve: {
+          ],
-    alias: {
+        },
-      '@': path.resolve(__dirname, 'src'),
+      }),
-    },
-  },
-  optimizeDeps: {
-    include: [
-      'feather-icons',
-      'showdown',
-      'tailwind.config.js',
-      'prosemirror-state',
-      'prosemirror-view',
-      'lowlight',
-      'interactjs',
     ],
-  },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
+    optimizeDeps: {
+      include: [
+        'feather-icons',
+        'showdown',
+        'tailwind.config.js',
+        'prosemirror-state',
+        'prosemirror-view',
+        'lowlight',
+        'interactjs',
+      ],
+    },
+  }
+
+  // Add local frappe-ui alias only in development if the local frappe-ui exists
+  if (isDev) {
+    try {
+      // Check if the local frappe-ui directory exists
+      const fs = await import('node:fs')
+      const localFrappeUIPath = path.resolve(__dirname, '../frappe-ui')
+      if (fs.existsSync(localFrappeUIPath)) {
+        config.resolve.alias['frappe-ui'] = localFrappeUIPath
+      } else {
+        console.warn('Local frappe-ui directory not found, using npm package')
+      }
+    } catch (error) {
+      console.warn(
+        'Error checking for local frappe-ui, using npm package:',
+        error.message,
+      )
+    }
+  }
+
+  return config
 })
+
+async function importFrappeUIPlugin(isDev) {
+  if (isDev) {
+    try {
+      const module = await import('../frappe-ui/vite')
+      return module.default
+    } catch (error) {
+      console.warn(
+        'Local frappe-ui not found, falling back to npm package:',
+        error.message,
+      )
+    }
+  }
+  // Fall back to npm package if local import fails
+  const module = await import('frappe-ui/vite')
+  return module.default
+}

package.json

@@ -1,14 +1,10 @@
 {
 	"private": true,
 	"type": "module",
-	"workspaces": ["frontend", "frappe-ui"],
 	"scripts": {
 		"postinstall": "cd frontend && yarn install",
 		"dev": "cd frontend && yarn dev",
 		"build": "cd frontend && yarn build",
-		"disable-workspaces": "sed -i '' 's/\"workspaces\"/\"aworkspaces\"/g' package.json",
+		"upgrade-frappeui": "cd frontend && yarn add frappe-ui@latest && cd .."
-		"enable-workspaces": "sed -i '' 's/\"aworkspaces\"/\"workspaces\"/g' package.json && rm -rf node_modules ./frontend/node_modules/ frappe-ui/node_modules/ && yarn install",
-		"upgrade-frappeui": "cd frontend && yarn add frappe-ui@latest && cd ..",
-		"disable-workspaces-and-upgrade-frappeui": "yarn disable-workspaces && yarn upgrade-frappeui"
 	}
 }