feat: open to opportunities

frontend/vite.config.js

@@ -1,70 +1,88 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
-import frappeui from 'frappe-ui/vite'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import { VitePWA } from 'vite-plugin-pwa'
 
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => ({
-	plugins: [
-		frappeui({
-			frappeProxy: true,
-			lucideIcons: true,
-			jinjaBootData: true,
-			frappeTypes: {
-				input: {},
-			},
-			buildConfig: {
-				indexHtmlPath: '../lms/www/lms.html',
-			},
-		}),
-		vue({
-			script: {
-				defineModel: true,
-				propsDestructure: true,
-			},
-		}),
-		VitePWA({
-			registerType: 'autoUpdate',
-			devOptions: {
-				enabled: true,
-			},
-			workbox: {
-				cleanupOutdatedCaches: true,
-				maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
-				globDirectory: '/assets/lms/frontend',
-				globPatterns: ['**/*.{js,ts,css,html,png,svg}'],
-				runtimeCaching: [
-					{
-						urlPattern: ({ request }) =>
-							request.destination === 'document',
-						handler: 'NetworkFirst',
-						options: {
-							cacheName: 'html-cache',
-						},
-					},
-				],
-			},
-			manifest: false,
-		}),
-	],
-	server: {
-		host: '0.0.0.0', // Accept connections from any network interface
-		allowedHosts: ['ps', 'fs', 'home'], // Explicitly allow this host
-	},
-	resolve: {
-		alias: {
-			'@': path.resolve(__dirname, 'src'),
+export default defineConfig(async ({ mode }) => {
+	const isDev = mode === 'development'
+	const frappeui = await importFrappeUIPlugin(isDev)
+
+	const config = {
+		define: {
+			__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
 		},
-	},
-	optimizeDeps: {
-		include: [
-			'feather-icons',
-			'engine.io-client',
-			'interactjs',
-			'highlight.js',
-			'plyr',
+		plugins: [
+			frappeui({
+				frappeProxy: true,
+				lucideIcons: true,
+				jinjaBootData: true,
+				buildConfig: {
+					indexHtmlPath: '../lms/www/lms.html',
+				},
+			}),
+			vue(),
+			vueJsx(),
+			VitePWA({
+				registerType: 'autoUpdate',
+				devOptions: {
+					enabled: false,
+				},
+				workbox: {
+					cleanupOutdatedCaches: true,
+					maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+					globDirectory: '/assets/lms/frontend',
+					globPatterns: ['**/*.{js,ts,css,html,png,svg}'],
+					runtimeCaching: [
+						{
+							urlPattern: ({ request }) =>
+								request.destination === 'document',
+							handler: 'NetworkFirst',
+							options: {
+								cacheName: 'html-cache',
+							},
+						},
+					],
+				},
+				manifest: false,
+			}),
 		],
-		exclude: mode === 'production' ? [] : ['frappe-ui'],
-	},
-}))
+		server: {
+			host: '0.0.0.0', // Accept connections from any network interface
+			allowedHosts: true,
+		},
+		resolve: {
+			alias: {
+				'@': path.resolve(__dirname, 'src'),
+			},
+		},
+		optimizeDeps: {
+			include: [
+				'feather-icons',
+				'tailwind.config.js',
+				'interactjs',
+				'highlight.js',
+				'plyr',
+			],
+			exclude: mode === 'production' ? [] : ['frappe-ui'],
+		},
+	}
+	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
+}