@shellui/cli 0.0.18 → 0.0.20

package/package.json

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

package/src/commands/build.js

@@ -10,6 +10,7 @@ import {
   createResolveAlias,
   createPostCSSConfig,
   createViteDefine,
+  createViteResolveConfig,
   resolvePackagePath,
 } from '../utils/index.js';
 
@@ -76,6 +77,7 @@ export async function buildCommand(root = '.') {
   // Get core package paths
   const corePackagePath = resolvePackagePath('@shellui/core');
   const coreSrcPath = getCoreSrcPath();
+  const resolveConfig = createViteResolveConfig();
   const resolveAlias = createResolveAlias();
   const postcssConfig = createPostCSSConfig();
 
@@ -86,14 +88,8 @@ export async function buildCommand(root = '.') {
       plugins: [react()],
       define: createViteDefine(config),
       resolve: {
+        ...resolveConfig,
         alias: resolveAlias,
-        // Dedupe React and core package to prevent duplicate module instances
-        // This is critical for React Context to work correctly in micro-frontends
-        dedupe: ['react', 'react-dom', '@shellui/core'],
-        // Ensure consistent module resolution to prevent duplicate instances
-        // when the same module is imported via different paths (relative, alias, with/without extensions)
-        conditions: ['import', 'module', 'browser', 'default'],
-        preserveSymlinks: false,
       },
       css: {
         postcss: postcssConfig,
@@ -131,9 +127,8 @@ export async function buildCommand(root = '.') {
       root: coreSrcPath,
       define: createViteDefine(config),
       resolve: {
+        ...resolveConfig,
         alias: resolveAlias,
-        // Dedupe React and core package to prevent duplicate module instances
-        dedupe: ['react', 'react-dom', '@shellui/core'],
       },
       build: {
         outDir: distPath,

package/src/commands/start.js

@@ -9,6 +9,10 @@ import {
   createResolveAlias,
   createPostCSSConfig,
   createViteDefine,
+  createViteResolveConfig,
+  createViteOptimizeDepsConfig,
+  getDedupeList,
+  getShelluiExcludePackages,
   resolvePackagePath,
 } from '../utils/index.js';
 import { serviceWorkerDevPlugin } from '../utils/service-worker-plugin.js';
@@ -18,6 +22,74 @@ let configWatcher = null;
 let restartTimeout = null;
 let isFirstStart = true;
 
+/**
+ * Plugin to prevent Vite from creating cache files inside @shellui/core
+ * This ensures all cache is created only in the project root's node_modules/.vite
+ */
+function preventNestedCachePlugin(viteCacheDir) {
+  return {
+    name: 'prevent-nested-cache',
+    configResolved(config) {
+      if (config.cacheDir && !path.isAbsolute(config.cacheDir)) {
+        throw new Error(
+          `cacheDir must be absolute path, got: ${config.cacheDir}. This prevents cache creation inside @shellui/core`,
+        );
+      }
+    },
+    buildStart() {
+      // Check if any .vite directories exist inside @shellui/core and warn/remove them
+      const corePackagePath = resolvePackagePath('@shellui/core');
+      const nestedViteCache = path.join(corePackagePath, 'node_modules', '.vite');
+      if (fs.existsSync(nestedViteCache)) {
+        console.warn(
+          pc.yellow(
+            `⚠️  Found nested .vite cache at ${nestedViteCache}. This should not exist. Removing...`,
+          ),
+        );
+        try {
+          fs.rmSync(nestedViteCache, { recursive: true, force: true });
+          console.log(pc.green(`✅ Removed nested cache directory`));
+        } catch (e) {
+          console.error(pc.red(`❌ Failed to remove nested cache: ${e.message}`));
+        }
+      }
+
+      // Also remove any optimized @shellui/core files from .vite/deps
+      const viteDepsDir = path.join(viteCacheDir, 'deps');
+      if (fs.existsSync(viteDepsDir)) {
+        try {
+          const files = fs.readdirSync(viteDepsDir);
+          const shelluiFiles = files.filter(
+            (f) => f.startsWith('@shellui') || f.startsWith('@_features'),
+          );
+          if (shelluiFiles.length > 0) {
+            console.warn(
+              pc.yellow(
+                `⚠️  Found optimized @shellui/core files in .vite/deps. Removing ${shelluiFiles.length} files...`,
+              ),
+            );
+            shelluiFiles.forEach((file) => {
+              const filePath = path.join(viteDepsDir, file);
+              try {
+                fs.unlinkSync(filePath);
+                const mapPath = filePath + '.map';
+                if (fs.existsSync(mapPath)) {
+                  fs.unlinkSync(mapPath);
+                }
+              } catch (e) {
+                // Ignore errors
+              }
+            });
+            console.log(pc.green(`✅ Removed optimized @shellui/core files`));
+          }
+        } catch (e) {
+          // Ignore errors reading directory
+        }
+      }
+    },
+  };
+}
+
 /**
  * Start the Vite server with current configuration
  * @param {string} root - Root directory
@@ -33,25 +105,114 @@ async function startServer(root, cwd, shouldOpen = false) {
   const corePackagePath = resolvePackagePath('@shellui/core');
   const coreSrcPath = getCoreSrcPath();
 
+  // Get project root node_modules path to ensure all modules resolve from root
+  const projectRootNodeModules = path.resolve(cwd, root, 'node_modules');
+  // CRITICAL: Set cacheDir to absolute path in project root to prevent Vite from creating
+  // cache inside @shellui/core/node_modules/.vite/deps
+  const viteCacheDir = path.resolve(cwd, root, 'node_modules', '.vite');
+
   // Check if static folder exists in project root
   const staticPath = path.resolve(cwd, root, 'static');
   const publicDir = fs.existsSync(staticPath) ? staticPath : false;
 
+  const resolveConfig = createViteResolveConfig();
+  const resolveAlias = createResolveAlias();
+
   const server = await createServer({
     root: coreSrcPath,
-    plugins: [react(), serviceWorkerDevPlugin(corePackagePath, coreSrcPath)],
+    // Force cacheDir to project root - this prevents Vite from creating cache
+    // relative to root (which would be inside @shellui/core)
+    cacheDir: viteCacheDir,
+    plugins: [
+      react(),
+      serviceWorkerDevPlugin(corePackagePath, coreSrcPath),
+      preventNestedCachePlugin(viteCacheDir),
+      {
+        name: 'prevent-shellui-optimization',
+        enforce: 'pre',
+        config(config) {
+          if (!config.optimizeDeps) {
+            config.optimizeDeps = {};
+          }
+          const originalExclude = config.optimizeDeps.exclude || [];
+          const excludeArray = Array.isArray(originalExclude)
+            ? [...originalExclude]
+            : [originalExclude].filter(Boolean);
+
+          // Dynamically get all @shellui/* packages that should be excluded
+          const shelluiExcludePackages = getShelluiExcludePackages();
+          shelluiExcludePackages.forEach((pkg) => {
+            if (!excludeArray.includes(pkg)) {
+              excludeArray.push(pkg);
+            }
+          });
+
+          config.optimizeDeps.exclude = excludeArray;
+        },
+        resolveId(id, importer) {
+          if (id && typeof id === 'string') {
+            if (id.includes('@_features') || id.includes('@shellui/core/src/')) {
+              return null;
+            }
+          }
+          return null;
+        },
+        load(id) {
+          if (id && typeof id === 'string' && id.includes('@_features')) {
+            return null;
+          }
+          return null;
+        },
+        transform(code, id) {
+          if (
+            id &&
+            typeof id === 'string' &&
+            (id.includes('@shellui/core/src/') || id.includes('@_features'))
+          ) {
+            return null;
+          }
+          return null;
+        },
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            if (
+              req.url &&
+              (req.url.includes('@_features') || req.url.includes('/.vite/deps/@shellui'))
+            ) {
+              res.writeHead(404, { 'Content-Type': 'text/plain' });
+              res.end(
+                'Optimized @shellui/core files are disabled. Loading from source instead.',
+              );
+              return;
+            }
+            next();
+          });
+        },
+      },
+    ],
     define: createViteDefine(config),
     resolve: {
-      alias: createResolveAlias(),
-      // Dedupe React and core package to prevent duplicate module instances
-      // This is critical for React Context to work correctly in micro-frontends
-      // When React is a peer dependency, dedupe ensures Vite uses a single instance
-      dedupe: ['react', 'react-dom', '@shellui/core'],
-      // Ensure consistent module resolution to prevent duplicate instances
-      // when the same module is imported via different paths (relative, alias, with/without extensions)
-      conditions: ['import', 'module', 'browser', 'default'],
-      // Don't preserve symlinks - ensures consistent resolution in monorepos
+      ...resolveConfig,
+      // Dynamically dedupe React, ReactDOM, @shellui packages, and all @shellui/core dependencies
+      // This ensures all modules resolve from project root to prevent duplicate instances
+      dedupe: getDedupeList(),
       preserveSymlinks: false,
+      alias: {
+        ...resolveAlias,
+        // Force @shellui/core to always resolve from project root to prevent duplicates
+        '@shellui/core': corePackagePath,
+      },
+      conditions: ['import', 'module', 'browser', 'default'],
+      mainFields: ['browser', 'module', 'jsnext:main', 'jsnext', 'main'],
+    },
+    optimizeDeps: {
+      // Dynamically exclude @shellui packages and include all @shellui/core dependencies
+      // This ensures dependencies are optimized from project root, preventing nested resolution
+      ...createViteOptimizeDepsConfig(),
+      force: false,
+      esbuildOptions: {
+        absWorkingDir: path.resolve(cwd, root),
+      },
     },
     css: {
       postcss: createPostCSSConfig(),

package/src/utils/index.js

@@ -12,4 +12,8 @@ export {
   createResolveAlias,
   createPostCSSConfig,
   createViteDefine,
+  createViteResolveConfig,
+  createViteOptimizeDepsConfig,
+  getDedupeList,
+  getShelluiExcludePackages,
 } from './vite.js';

package/src/utils/service-worker-plugin.js

@@ -35,11 +35,6 @@ export function serviceWorkerDevPlugin(corePackagePath, coreSrcPath) {
         plugins: [react()],
         resolve: {
           alias: createResolveAlias(),
-          // Dedupe React and core package to prevent duplicate module instances
-          dedupe: ['react', 'react-dom', '@shellui/core'],
-          // Ensure consistent module resolution to prevent duplicate instances
-          conditions: ['import', 'module', 'browser', 'default'],
-          preserveSymlinks: false,
         },
         build: {
           write: false,

package/src/utils/vite.js

@@ -38,19 +38,14 @@ export function getCoreSrcPath() {
  * Always sets '@' to core/src. Sets '@shellui/sdk' to source entry when in
  * workspace mode; omits the alias when installed from npm so Vite resolves
  * through the package's exports field (dist/index.js).
- * 
- * Also adds specific aliases for config module to ensure all imports
- * (relative, alias, or with extensions) resolve to the same module instance.
- * This prevents React Context duplication issues.
  * @returns {Object} Vite resolve.alias object
  */
 export function createResolveAlias() {
   const corePackagePath = resolvePackagePath('@shellui/core');
-  const coreSrcPath = path.join(corePackagePath, 'src');
   const sdkEntry = resolveSdkEntry();
 
   const alias = {
-    '@': coreSrcPath,
+    '@': path.join(corePackagePath, 'src'),
   };
 
   if (sdkEntry) {
@@ -106,3 +101,127 @@ export function createViteDefine(config) {
     __SHELLUI_SENTRY_RELEASE__: sentry?.release ? JSON.stringify(sentry.release) : 'undefined',
   };
 }
+
+/**
+ * Create Vite resolve configuration with deduplication.
+ * Prevents duplicate React instances and @shellui/core modules when running
+ * from node_modules, which can cause context provider issues in microfrontends.
+ * 
+ * Dynamically includes all @shellui/core dependencies to ensure they resolve
+ * from project root, preventing nested node_modules resolution issues.
+ * @returns {Object} Vite resolve configuration with dedupe
+ */
+export function createViteResolveConfig() {
+  return {
+    dedupe: getDedupeList(),
+  };
+}
+
+/**
+ * Get dependencies from @shellui/core package.json
+ * Reads the package.json and extracts all dependencies (excluding @shellui/* packages)
+ * @returns {string[]} Array of dependency package names
+ */
+function getCoreDependencies() {
+  try {
+    const corePackagePath = resolvePackagePath('@shellui/core');
+    const packageJsonPath = path.join(corePackagePath, 'package.json');
+    
+    if (!fs.existsSync(packageJsonPath)) {
+      console.warn(`Warning: Could not find @shellui/core package.json at ${packageJsonPath}`);
+      return [];
+    }
+
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    const dependencies = packageJson.dependencies || {};
+    
+    // Extract all dependency names, excluding @shellui/* packages
+    return Object.keys(dependencies).filter(
+      (dep) => !dep.startsWith('@shellui/'),
+    );
+  } catch (e) {
+    console.warn(`Warning: Failed to read @shellui/core dependencies: ${e.message}`);
+    return [];
+  }
+}
+
+/**
+ * Get packages that should be excluded from optimization
+ * These are @shellui/* packages that should always load from source
+ * @returns {string[]} Array of package names to exclude
+ */
+export function getShelluiExcludePackages() {
+  try {
+    const corePackagePath = resolvePackagePath('@shellui/core');
+    const packageJsonPath = path.join(corePackagePath, 'package.json');
+    
+    if (!fs.existsSync(packageJsonPath)) {
+      return ['@shellui/core', '@shellui/sdk'];
+    }
+
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    const dependencies = packageJson.dependencies || {};
+    
+    // Extract @shellui/* packages that should be excluded
+    const shelluiPackages = Object.keys(dependencies).filter(
+      (dep) => dep.startsWith('@shellui/'),
+    );
+    
+    // Always include @shellui/core and @shellui/sdk
+    const exclude = ['@shellui/core', '@shellui/sdk'];
+    shelluiPackages.forEach((pkg) => {
+      if (!exclude.includes(pkg)) {
+        exclude.push(pkg);
+      }
+    });
+    
+    return exclude;
+  } catch (e) {
+    console.warn(`Warning: Failed to read @shellui/* packages: ${e.message}`);
+    return ['@shellui/core', '@shellui/sdk'];
+  }
+}
+
+/**
+ * Create Vite optimizeDeps configuration to exclude @shellui/core from pre-bundling.
+ * This prevents Vite from creating duplicate module instances during dependency optimization,
+ * which is critical for React Context to work correctly in microfrontend iframe scenarios.
+ * 
+ * Dynamically reads dependencies from @shellui/core to ensure all new dependencies
+ * are automatically included in optimization.
+ * 
+ * Note: We do NOT exclude React/ReactDOM here because Vite needs to optimize them.
+ * The resolve.dedupe configuration handles ensuring only one React instance is used.
+ * @returns {Object} Vite optimizeDeps configuration
+ */
+export function createViteOptimizeDepsConfig() {
+  const coreDependencies = getCoreDependencies();
+  const excludePackages = getShelluiExcludePackages();
+  
+  return {
+    exclude: excludePackages,
+    include: coreDependencies,
+  };
+}
+
+/**
+ * Get deduplication list for Vite resolve configuration
+ * Includes React, ReactDOM, @shellui packages, and all @shellui/core dependencies
+ * @returns {string[]} Array of package names to dedupe
+ */
+export function getDedupeList() {
+  const coreDependencies = getCoreDependencies();
+  const shelluiPackages = getShelluiExcludePackages();
+  
+  // Base dedupe list: React, ReactDOM, and @shellui packages
+  const dedupe = ['react', 'react-dom', ...shelluiPackages];
+  
+  // Add all core dependencies to ensure they resolve from project root
+  coreDependencies.forEach((dep) => {
+    if (!dedupe.includes(dep)) {
+      dedupe.push(dep);
+    }
+  });
+  
+  return dedupe;
+}