@shellui/cli 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shellui/cli",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "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.8"
+    "@shellui/core": "0.0.10"
   },
   "publishConfig": {
     "access": "public"

package/src/commands/build.js

@@ -11,6 +11,7 @@ import {
   createPostCSSConfig,
   createViteDefine,
   resolvePackagePath,
+  inlineLazyImportsPlugin,
 } from '../utils/index.js';
 
 /**
@@ -83,7 +84,7 @@ export async function buildCommand(root = '.') {
     // Build main app
     await build({
       root: coreSrcPath,
-      plugins: [react()],
+      plugins: [react(), inlineLazyImportsPlugin()],
       define: createViteDefine(config),
       resolve: {
         alias: resolveAlias,

package/src/commands/start.js

@@ -10,6 +10,7 @@ import {
   createPostCSSConfig,
   createViteDefine,
   resolvePackagePath,
+  inlineLazyImportsPlugin,
 } from '../utils/index.js';
 import { serviceWorkerDevPlugin } from '../utils/service-worker-plugin.js';
 
@@ -39,7 +40,7 @@ async function startServer(root, cwd, shouldOpen = false) {
 
   const server = await createServer({
     root: coreSrcPath,
-    plugins: [react(), serviceWorkerDevPlugin(corePackagePath, coreSrcPath)],
+    plugins: [react(), inlineLazyImportsPlugin(), serviceWorkerDevPlugin(corePackagePath, coreSrcPath)],
     define: createViteDefine(config),
     resolve: {
       alias: createResolveAlias(),
@@ -53,6 +54,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/index.js

@@ -13,3 +13,4 @@ export {
   createPostCSSConfig,
   createViteDefine,
 } from './vite.js';
+export { inlineLazyImportsPlugin } from './inline-lazy-imports-plugin.js';

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

@@ -0,0 +1,66 @@
+/**
+ * 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',
+    // 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'))) {
+        return null;
+      }
+
+      // Check if code contains lazy() calls - if not, skip
+      if (!code.includes('lazy(') || !code.includes('import(')) return null;
+
+      const imports = [];
+      let transformed = code;
+      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;
+
+      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 '';
+      });
+
+      if (!hasChanges || imports.length === 0) return null;
+
+      // Prepend all imports at the top of the file (after any existing imports)
+      // Find the last import statement
+      const lastImportMatch = transformed.match(/^import\s+.*$/gm);
+      if (lastImportMatch) {
+        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);
+      } else {
+        // No imports found, add at the top
+        transformed = imports.join('\n') + '\n' + transformed;
+      }
+
+      return {
+        code: transformed,
+        map: null,
+      };
+    },
+  };
+}