From 129f8a00b66d87529c21ef085e66dc7864a3776e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 17 Sep 2025 12:13:36 +0530
Subject: [PATCH] refactor: update Vite configuration to support dynamic
 loading of frappe-ui in development mode

---
 frontend/vite.config.js | 183 +++++++++++++++++++++++++---------------
 package.json            |   6 +-
 2 files changed, 114 insertions(+), 75 deletions(-)

diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 85e573eb..5f0517b4 100644
--- a/frontend/vite.config.js
+++ b/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({
-  plugins: [
-    frappeui({
-      frappeProxy: true,
-      lucideIcons: true,
-      jinjaBootData: true,
-      buildConfig: {
-        indexHtmlPath: '../crm/www/crm.html',
-        emptyOutDir: true,
-        sourcemap: true,
-      },
-    }),
-    vue(),
-    vueJsx(),
-    VitePWA({
-      registerType: 'autoUpdate',
-      devOptions: {
-        enabled: true,
-      },
-      manifest: {
-        display: 'standalone',
-        name: 'Frappe CRM',
-        short_name: 'Frappe CRM',
-        start_url: '/crm',
-        description:
-          'Modern & 100% Open-source CRM tool to supercharge your sales operations',
-        icons: [
-          {
-            src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
-            sizes: '192x192',
-            type: 'image/png',
-            purpose: 'any',
-          },
-          {
-            src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
-            sizes: '192x192',
-            type: 'image/png',
-            purpose: 'maskable',
-          },
-          {
-            src: '/assets/crm/manifest/manifest-icon-512.maskable.png',
-            sizes: '512x512',
-            type: 'image/png',
-            purpose: 'any',
-          },
-          {
-            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',
+export default defineConfig(async ({ mode }) => {
+  const isDev = mode === 'development'
+  const frappeui = await importFrappeUIPlugin(isDev)
+
+  const config = {
+    plugins: [
+      frappeui({
+        frappeProxy: true,
+        lucideIcons: true,
+        jinjaBootData: true,
+        buildConfig: {
+          indexHtmlPath: '../crm/www/crm.html',
+          emptyOutDir: true,
+          sourcemap: true,
+        },
+      }),
+      vue(),
+      vueJsx(),
+      VitePWA({
+        registerType: 'autoUpdate',
+        devOptions: {
+          enabled: true,
+        },
+        manifest: {
+          display: 'standalone',
+          name: 'Frappe CRM',
+          short_name: 'Frappe CRM',
+          start_url: '/crm',
+          description:
+            'Modern & 100% Open-source CRM tool to supercharge your sales operations',
+          icons: [
+            {
+              src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
+              sizes: '192x192',
+              type: 'image/png',
+              purpose: 'any',
+            },
+            {
+              src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
+              sizes: '192x192',
+              type: 'image/png',
+              purpose: 'maskable',
+            },
+            {
+              src: '/assets/crm/manifest/manifest-icon-512.maskable.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'any',
+            },
+            {
+              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',
+      ],
+    },
+  }
+
+  // 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
+}
diff --git a/package.json b/package.json
index 423a4b8f..135ac9f8 100644
--- a/package.json
+++ b/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",
-		"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"
+		"upgrade-frappeui": "cd frontend && yarn add frappe-ui@latest && cd .."
 	}
 }