@shellui/cli 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shellui/cli",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "ShellUI CLI - Command-line tool for ShellUI",
   "main": "src/cli.js",
   "type": "module",
@@ -30,7 +30,7 @@
     "tsx": "^4.21.0",
     "vite": "7.3.1",
     "workbox-build": "^7.1.0",
-    "@shellui/core": "0.0.9"
+    "@shellui/core": "0.0.11"
   },
   "publishConfig": {
     "access": "public"

package/src/commands/build.js

@@ -84,7 +84,8 @@ export async function buildCommand(root = '.') {
     // Build main app
     await build({
       root: coreSrcPath,
-      plugins: [react(), inlineLazyImportsPlugin()],
+      // Order matters: inlineLazyImportsPlugin must run before react() to transform lazy imports early
+      plugins: [inlineLazyImportsPlugin(), react()],
       define: createViteDefine(config),
       resolve: {
         alias: resolveAlias,

package/src/commands/start.js

@@ -40,7 +40,12 @@ async function startServer(root, cwd, shouldOpen = false) {
 
   const server = await createServer({
     root: coreSrcPath,
-    plugins: [react(), inlineLazyImportsPlugin(), serviceWorkerDevPlugin(corePackagePath, coreSrcPath)],
+    // Order matters: inlineLazyImportsPlugin must run before react() to transform lazy imports early
+    plugins: [
+      inlineLazyImportsPlugin(),
+      react(),
+      serviceWorkerDevPlugin(corePackagePath, coreSrcPath),
+    ],
     define: createViteDefine(config),
     resolve: {
       alias: createResolveAlias(),
@@ -54,6 +59,12 @@ async function startServer(root, cwd, shouldOpen = false) {
     esbuild: {
       sourcemap: false,
     },
+    // Prevent Vite from pre-bundling @shellui/core when it's in node_modules
+    // We want our transform plugin to handle lazy imports, not esbuild's pre-bundler
+    // This ensures consistent behavior between workspace and npm-installed packages
+    optimizeDeps: {
+      exclude: ['@shellui/core'],
+    },
     server: {
       port: config.port || 3000,
       open: shouldOpen,

package/src/utils/inline-lazy-imports-plugin.js

@@ -2,21 +2,35 @@
  * Plugin that converts lazy(() => import(...)) to direct imports.
  * This prevents Rollup/Vite from creating code-split chunks, ensuring all rendering
  * goes through App.tsx where ConfigProvider wraps everything.
- * 
+ *
  * This is critical: when the library is consumed via npm, Vite processes the source files.
  * If there are dynamic imports, it creates separate chunks that load separately, causing
  * duplicate module instances and breaking React context (ConfigContext, SettingsContext, etc.).
- * 
+ *
  * @returns {import('vite').Plugin} Vite plugin
  */
 export function inlineLazyImportsPlugin() {
   return {
     name: 'inline-lazy-imports',
+    // Run before other transforms to ensure lazy imports are inlined early
+    enforce: 'pre',
     // Apply to both dev and build modes
     transform(code, id) {
-      // Only transform source files, not node_modules (except our own src)
-      // Match paths that contain /src/ but exclude node_modules that aren't @shellui/core/src
-      if (!id.includes('/src/') || (id.includes('node_modules') && !id.includes('@shellui/core/src'))) {
+      // Only transform source files from @shellui/core
+      // Match paths that contain @shellui/core/src (works for both workspace and npm-installed)
+      // Also match router/routes files specifically since those contain the lazy imports
+      const isCoreSrc =
+        id.includes('@shellui/core/src') ||
+        id.includes('@shellui/core\\src') || // Windows paths
+        (id.includes('/src/') && id.match(/router[/\\]routes\.tsx?$/)) ||
+        (id.includes('/src/') && id.match(/router[/\\]router\.tsx?$/));
+
+      // Debug logging (remove after fixing)
+      if (id.includes('routes') && code.includes('lazy')) {
+        console.log(`[inline-lazy-imports] Processing: ${id}, isCoreSrc: ${isCoreSrc}`);
+      }
+
+      if (!isCoreSrc) {
         return null;
       }
 
@@ -28,20 +42,38 @@ export function inlineLazyImportsPlugin() {
       let hasChanges = false;
 
       // Match the exact pattern: const Name = lazy(() => import('path').then((m) => ({ default: m.Name })),);
-      // Handles both single-line and multiline patterns
-      // The regex captures: const declaration, lazy call, import path, component name, and trailing punctuation
-      const lazyPattern = /const\s+(\w+)\s*=\s*lazy\s*\(\s*\(\)\s*=>\s*[\s\n]*import\s*\((['"])([^'"]+)\2\)\s*\.then\s*\([\s\S]*?\(?\s*m\s*\)?\s*=>\s*\([\s\S]*?\{\s*default:\s*m\.(\w+)\s*\}[\s\S]*?\)[\s\S]*?\)[\s\n]*\)[\s\n]*,?[\s\n]*;?/g;
+      // Strategy: Match the structure step by step, using non-greedy matching to stop at boundaries
+      // 1. Match: const Name = lazy(() =>
+      // 2. Match: import('path')
+      // 3. Match: .then((m) => ({ default: m.Name }))
+      // 4. Match: ,); or ); on new line
+      const lazyPattern =
+        /const\s+(\w+)\s*=\s*lazy\s*\(\s*\(\)\s*=>\s*[\s\n]*import\s*\((['"])([^'"]+)\2\)\s*\.then\s*\([\s\S]*?\(?\s*m\s*\)?\s*=>\s*\([\s\S]*?\{\s*default:\s*m\.(\w+)\s*\}[\s\S]*?\)[\s\S]*?\)\s*,?\s*[\s\n]*\)\s*;?\s*/g;
+
+      transformed = transformed.replace(
+        lazyPattern,
+        (fullMatch, varName, quote, importPath, componentName) => {
+          hasChanges = true;
+
+          // Debug: log what we're matching
+          if (id.includes('routes')) {
+            console.log(
+              `[inline-lazy-imports] Matched ${varName}:`,
+              fullMatch.replace(/\n/g, '\\n').substring(0, 150),
+            );
+            console.log(`[inline-lazy-imports]   - importPath: ${importPath}`);
+            console.log(`[inline-lazy-imports]   - componentName: ${componentName}`);
+          }
 
-      transformed = transformed.replace(lazyPattern, (fullMatch, varName, quote, importPath, componentName) => {
-        hasChanges = true;
-        // Import with the same name as the variable (they match in the source code)
-        const importStatement = `import { ${componentName} as ${varName} } from ${quote}${importPath}${quote};`;
-        if (!imports.some(imp => imp.includes(`${varName}`))) {
-          imports.push(importStatement);
-        }
-        // Remove the entire const declaration - the import statement replaces it
-        return '';
-      });
+          // Import with the same name as the variable (they match in the source code)
+          const importStatement = `import { ${componentName} as ${varName} } from ${quote}${importPath}${quote};`;
+          if (!imports.some((imp) => imp.includes(`${varName}`))) {
+            imports.push(importStatement);
+          }
+          // Remove the entire const declaration - return empty string to completely remove it
+          return '';
+        },
+      );
 
       if (!hasChanges || imports.length === 0) return null;
 
@@ -49,9 +81,15 @@ export function inlineLazyImportsPlugin() {
       // Find the last import statement
       const lastImportMatch = transformed.match(/^import\s+.*$/gm);
       if (lastImportMatch) {
-        const lastImportIndex = transformed.lastIndexOf(lastImportMatch[lastImportMatch.length - 1]);
+        const lastImportIndex = transformed.lastIndexOf(
+          lastImportMatch[lastImportMatch.length - 1],
+        );
         const insertIndex = transformed.indexOf('\n', lastImportIndex) + 1;
-        transformed = transformed.slice(0, insertIndex) + imports.join('\n') + '\n' + transformed.slice(insertIndex);
+        transformed =
+          transformed.slice(0, insertIndex) +
+          imports.join('\n') +
+          '\n' +
+          transformed.slice(insertIndex);
       } else {
         // No imports found, add at the top
         transformed = imports.join('\n') + '\n' + transformed;