@shellui/cli 0.0.11 → 0.0.14

package/package.json

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

package/src/cli.js

@@ -1,5 +1,6 @@
 import { cac } from 'cac';
 import { startCommand, buildCommand } from './commands/index.js';
+import pkg from '../package.json' with { type: 'json' };
 
 const cli = cac('shellui');
 
@@ -10,5 +11,5 @@ cli.command('build [root]', 'Build the shellui application').action(buildCommand
 
 // Setup CLI metadata
 cli.help();
-cli.version('0.0.1');
+cli.version(pkg.version);
 cli.parse();

package/src/commands/build.js

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

package/src/commands/start.js

@@ -10,7 +10,6 @@ import {
   createPostCSSConfig,
   createViteDefine,
   resolvePackagePath,
-  inlineLazyImportsPlugin,
 } from '../utils/index.js';
 import { serviceWorkerDevPlugin } from '../utils/service-worker-plugin.js';
 
@@ -40,12 +39,7 @@ async function startServer(root, cwd, shouldOpen = false) {
 
   const server = await createServer({
     root: coreSrcPath,
-    // Order matters: inlineLazyImportsPlugin must run before react() to transform lazy imports early
-    plugins: [
-      inlineLazyImportsPlugin(),
-      react(),
-      serviceWorkerDevPlugin(corePackagePath, coreSrcPath),
-    ],
+    plugins: [react(), serviceWorkerDevPlugin(corePackagePath, coreSrcPath)],
     define: createViteDefine(config),
     resolve: {
       alias: createResolveAlias(),
@@ -59,12 +53,6 @@ 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,4 +13,3 @@ export {
   createPostCSSConfig,
   createViteDefine,
 } from './vite.js';
-export { inlineLazyImportsPlugin } from './inline-lazy-imports-plugin.js';

package/src/utils/package-path.js

@@ -8,19 +8,17 @@ const require = createRequire(import.meta.url);
 
 /**
  * Resolve the path to a package in the monorepo or node_modules
+ * Works in both workspace mode (monorepo) and npm-installed mode
  * @param {string} packageName - The name of the package
  * @returns {string} The absolute path to the package
  */
 export function resolvePackagePath(packageName) {
   try {
     // Try to resolve the package using require.resolve
+    // This works for both workspace packages (via pnpm workspace) and npm-installed packages
     const packageJsonPath = require.resolve(`${packageName}/package.json`);
-    return path.dirname(packageJsonPath);
-  } catch (e) {
-    // Fallback: assume workspace structure or pnpm symlinked node_modules
-    // Go up from cli/src/utils/package-path.js -> cli/src/utils -> cli/src -> cli -> packages -> packageName
-    const packagesDir = path.resolve(__dirname, '../../../');
-    const resolved = path.join(packagesDir, packageName.replace('@shellui/', ''));
+    const resolved = path.dirname(packageJsonPath);
+    
     // Resolve symlinks to get the canonical path — pnpm uses symlinks that
     // point to different .pnpm/ directories; Vite resolves real paths so we
     // need to be consistent to avoid mismatched root vs input paths.
@@ -29,6 +27,27 @@ export function resolvePackagePath(packageName) {
     } catch {
       return resolved;
     }
+  } catch (e) {
+    // Fallback: assume workspace structure (for development in monorepo)
+    // Go up from cli/src/utils/package-path.js -> cli/src/utils -> cli/src -> cli -> packages -> packageName
+    const packagesDir = path.resolve(__dirname, '../../../');
+    const resolved = path.join(packagesDir, packageName.replace('@shellui/', ''));
+    
+    // Only use this fallback if the path exists (workspace mode)
+    if (fs.existsSync(resolved)) {
+      try {
+        return fs.realpathSync(resolved);
+      } catch {
+        return resolved;
+      }
+    }
+    
+    // If we get here, the package wasn't found
+    throw new Error(
+      `Package "${packageName}" not found. ` +
+      `Make sure it's installed (npm/pnpm install) or available in the workspace. ` +
+      `Original error: ${e.message}`
+    );
   }
 }
 

package/src/utils/vite.js

@@ -1,15 +1,36 @@
 import path from 'path';
+import fs from 'fs';
 import tailwindcssPlugin from '@tailwindcss/postcss';
 import autoprefixerPlugin from 'autoprefixer';
 import { resolvePackagePath, resolveSdkEntry } from './index.js';
 
 /**
  * Get the path to the core package source directory
+ * Works in both workspace mode (monorepo) and npm-installed mode
  * @returns {string} Absolute path to core package src directory
  */
 export function getCoreSrcPath() {
   const corePackagePath = resolvePackagePath('@shellui/core');
-  return path.join(corePackagePath, 'src');
+  const srcPath = path.join(corePackagePath, 'src');
+  
+  // Verify src directory exists (should always exist since it's in package.json files)
+  if (!fs.existsSync(srcPath)) {
+    throw new Error(
+      `Core package src directory not found at ${srcPath}. ` +
+      `Make sure @shellui/core is properly installed and includes the src directory.`
+    );
+  }
+  
+  // Verify index.html exists (required for dev server)
+  const indexHtmlPath = path.join(srcPath, 'index.html');
+  if (!fs.existsSync(indexHtmlPath)) {
+    throw new Error(
+      `Core package index.html not found at ${indexHtmlPath}. ` +
+      `Make sure @shellui/core is properly installed.`
+    );
+  }
+  
+  return srcPath;
 }
 
 /**

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

@@ -1,104 +0,0 @@
-/**
- * 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 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;
-      }
-
-      // 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 })),);
-      // 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}`);
-          }
-
-          // 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;
-
-      // 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,
-      };
-    },
-  };
-}