@codemoreira/esad 1.4.6-1 → 1.4.6-11

package/bin/esad.js

@@ -16,7 +16,7 @@ program
   .version(pkg.version)
   .description('esad - Easy Super App Development Toolkit');
 
-// --- COMMMAND: esad init ---
+// --- COMMAND: esad init ---
 program
   .command('init <project-name>')
   .description('Scaffold a new ESAD workspace containing the Host App')
@@ -34,15 +34,52 @@ program
      process.exit(0);
   });
 
-// --- COMMAND: esad host ---
+// --- COMMAND: esad dev ---
+program
+  .command('dev [platform]')
+  .description('Start the development environment for the Host App (platform: android, ios)')
+  .action(async (platform) => {
+     await hostCommand(platform);
+     process.exit(0);
+  });
+
+// --- COMMAND: esad android ---
 program
-  .command('host <subcommand>')
-  .description('Manage the Host App (Auto-Syncs config, runs android/ios)')
-  .action(async (sub) => {
-     await hostCommand(sub);
+  .command('android')
+  .description('Run Host on Android (alias for esad dev android)')
+  .action(async () => {
+     await hostCommand('android');
      process.exit(0);
   });
 
+// --- COMMAND: esad ios ---
+program
+  .command('ios')
+  .description('Run Host on iOS (alias for esad dev ios)')
+  .action(async () => {
+     await hostCommand('ios');
+     process.exit(0);
+  });
+
+// --- COMMAND: esad start ---
+program
+  .command('start')
+  .description('Alias for esad dev')
+  .action(async () => {
+     await hostCommand('dev');
+     process.exit(0);
+  });
+
+// --- COMMAND: esad push ---
+program
+  .command('push')
+  .option('-i, --id <moduleId>', 'The Module ID to sync to Dev-Cloud')
+  .option('-p, --platform <platform>', 'Platform (android, ios)', 'android')
+  .description('Build and Push the module bundle to the Dev-Cloud for global previewing')
+  .action(async (options) => {
+     await devCommand(options);
+  });
+
 // --- COMMAND: esad create-module ---
 program
   .command('create-module <module-name>')
@@ -75,15 +112,4 @@ program
      process.exit(0);
   });
 
-// --- COMMAND: esad dev ---
-program
-  .command('dev')
-  .option('-i, --id <moduleId>', 'The Module ID to sync to Dev-Cloud')
-  .option('-p, --platform <platform>', 'Platform (android, ios)', 'android')
-  .description('Build and Push the module bundle to the Dev-Cloud for global previewing')
-  .action(async (options) => {
-     await devCommand(options);
-     // Note: dev command has its own shutdown logic with SIGINT/SIGTERM
-  });
-
 program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemoreira/esad",
-  "version": "1.4.6-1",
+  "version": "1.4.6-11",
   "description": "Easy Super App Development - Zero-Config CLI and DevTools for React Native Module Federation",
   "main": "src/plugin/index.js",
   "types": "./src/plugin/index.d.ts",
@@ -16,7 +16,8 @@
     "./client": {
       "types": "./src/client/index.d.ts",
       "default": "./src/client/index.js"
-    }
+    },
+    "./config-plugin": "./src/plugin/config-plugin.js"
   },
   "bin": {
     "esad": "./bin/esad.js"
@@ -46,7 +47,11 @@
     "react-native-reanimated": "~3.16.1",
     "form-data": "^4.0.0",
     "fs-extra": "^11.2.0",
-    "node-fetch": "^2.7.0"
+    "node-fetch": "^2.7.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.20.0",
+    "@babel/plugin-transform-private-methods": "^7.20.0",
+    "@babel/plugin-transform-private-property-in-object": "^7.20.0",
+    "@babel/plugin-transform-class-properties": "^7.20.0"
   },
   "devDependencies": {
     "@rspack/core": "^1.7.9",

package/src/cli/commands/build.js

@@ -52,7 +52,8 @@ module.exports = async (options) => {
       '--platform', platform, 
       '--dev', 'false',
       '--bundle-output', bundleOutput,
-      '--assets-dest', path.dirname(bundleOutput)
+      '--assets-dest', path.dirname(bundleOutput),
+      '--reset-cache'
     ], cwd);
     
     console.log(chalk.green(`\n✅ Build complete! Assets generated in build/ directory.`));

package/src/cli/commands/dev.js

@@ -84,7 +84,8 @@ module.exports = async (options) => {
       '--platform', platform, 
       '--dev', 'false',
       '--bundle-output', bundleOutput,
-      '--assets-dest', path.dirname(bundleOutput)
+      '--assets-dest', path.dirname(bundleOutput),
+      '--reset-cache'
     ], cwd);
   } catch (err) {
     console.error(chalk.red(`❌ Build failed.`));

package/src/cli/commands/host.js

@@ -7,12 +7,7 @@ const readline = require('readline');
 const { getWorkspaceConfig } = require('../utils/config');
 const { prepareNative } = require('../utils/scaffold');
 
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-});
-
-const askQuestion = (query) => new Promise((resolve) => rl.question(query, resolve));
+const askQuestion = (query, rl) => new Promise((resolve) => rl.question(query, resolve));
 
 /**
  * Check if a port is in use
@@ -28,6 +23,12 @@ const isPortInUse = (port) => new Promise((resolve) => {
 });
 
 module.exports = async (subcommand) => {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+
+  if (!subcommand) subcommand = 'dev';
   let cwd = process.cwd();
   let pkgPath = path.join(cwd, 'package.json');
   
@@ -64,7 +65,7 @@ module.exports = async (subcommand) => {
     console.log(`[b] Bundler Only`);
     console.log(`[c] Cancel`);
     
-    const choice = (await askQuestion(`\nSelect platform: `)).toLowerCase();
+    const choice = (await askQuestion(`\nSelect platform: `, rl)).toLowerCase();
     
     if (choice === 'c') {
       console.log(`\n❌ Cancelled.`);
@@ -86,13 +87,13 @@ module.exports = async (subcommand) => {
     if (shouldStartBundler && choice !== 'c') {
       console.log(`\n🛠️ Starting Rspack Bundler in a new window...`);
       if (process.platform === 'win32') {
-        spawn('cmd', ['/c', 'start', '/D', cwd, 'npx', 'react-native', 'webpack-start'], { 
+        spawn('cmd', ['/c', 'start', '/D', cwd, 'npx', 'react-native', 'start', '--reset-cache'], { 
           detached: true, 
           stdio: 'ignore',
           shell: true 
         }).unref();
       } else {
-        spawn('npx', ['react-native', 'webpack-start'], { 
+        spawn('npx', ['react-native', 'start', '--reset-cache'], { 
           cwd, 
           detached: true, 
           stdio: 'inherit', 
@@ -139,13 +140,16 @@ module.exports = async (subcommand) => {
     // Other subcommands (android, ios directly)
     try {
       if (subcommand === 'android') {
+        console.log(`🤖 Compiling and launching on Android...`);
         await runProcess('npx', ['expo', 'run:android', '--no-bundler'], cwd);
       } else if (subcommand === 'ios') {
+        console.log(`🍎 Compiling and launching on iOS...`);
         await runProcess('npx', ['expo', 'run:ios', '--no-bundler'], cwd);
       }
     } catch (err) {
       console.error(`❌ Error running host command: ${err.message}`);
+    } finally {
+      rl.close();
     }
-    rl.close();
   }
 };

package/src/cli/utils/process.js

@@ -8,8 +8,9 @@ const { spawn } = require('cross-spawn');
  * @returns {Promise<void>}
  */
 const runProcess = (cmd, args, cwd = process.cwd()) => {
+  const executable = (process.platform === 'win32' && cmd === 'npx') ? 'npx.cmd' : cmd;
   return new Promise((resolve, reject) => {
-    const child = spawn(cmd, args, { stdio: 'inherit', cwd, shell: true });
+    const child = spawn(executable, args, { stdio: 'inherit', cwd, shell: true });
     child.on('close', code => {
       if (code !== 0) reject(new Error(`Command ${cmd} ${args.join(' ')} failed`));
       else resolve();

package/src/cli/utils/scaffold.js

@@ -35,15 +35,21 @@ async function renameProject(targetDir, newName) {
     if (appJson.expo) {
       appJson.expo.name = newName;
       appJson.expo.slug = newName;
+      appJson.expo.scheme = newName.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
+      
       if (appJson.expo.android) {
         appJson.expo.android.package = `com.anonymous.${newName.replace(/[^a-zA-Z0-9]/g, '')}`;
       }
+      
+      if (appJson.expo.ios) {
+        appJson.expo.ios.bundleIdentifier = `com.anonymous.${newName.replace(/[^a-zA-Z0-9]/g, '')}`;
+      }
     } else {
       appJson.name = newName;
       appJson.slug = newName;
     }
     await fs.writeJson(appJsonPath, appJson, { spaces: 2 });
-    console.log(`✅ Updated app.json name/slug/package.`);
+    console.log(`✅ Updated app.json name/slug/package/scheme.`);
   }
 
   // 3. Update Rspack Config if exists
@@ -60,27 +66,37 @@ async function renameProject(targetDir, newName) {
 }
 
 /**
- * Prepares the native folders and applies Re.Pack patches
+ * Prepares the native folders and ensures the ESAD Config Plugin is registered
  */
 async function prepareNative(cwd, platform = 'android') {
+  const appJsonPath = path.join(cwd, 'app.json');
+  
+  // 1. Ensure Config Plugin is in app.json
+  if (fs.existsSync(appJsonPath)) {
+    const appJson = await fs.readJson(appJsonPath);
+    if (appJson.expo) {
+      const plugins = appJson.expo.plugins || [];
+      const pluginName = '@codemoreira/esad/config-plugin';
+      
+      if (!plugins.includes(pluginName) && !plugins.some(p => Array.isArray(p) && p[0] === pluginName)) {
+        appJson.expo.plugins = [...plugins, pluginName];
+        await fs.writeJson(appJsonPath, appJson, { spaces: 2 });
+        console.log(`✅ Added ESAD Config Plugin to app.json.`);
+      }
+    }
+  }
+
+  // 2. Run Prebuild (this will trigger the plugin)
   if (!fs.existsSync(path.join(cwd, 'android')) && (platform === 'android' || platform === 'all')) {
     console.log(`📦 Native folder not found. Running expo prebuild...`);
     await runProcess('npx', ['expo', 'prebuild', '--platform', 'android'], cwd);
+  } else if (platform === 'all' || platform === 'ios' || platform === 'android') {
+    // If folder exists, we still might want to run prebuild to sync changes if forced, 
+    // but ESAD's dev command usually assumes it's managed.
+    // For now, let's just ensure react-native.config.js exists.
   }
 
-  // Apply Gradle Patch (Android)
-  const buildGradlePath = path.join(cwd, 'android/app/build.gradle');
-  if (fs.existsSync(buildGradlePath)) {
-    let content = await fs.readFile(buildGradlePath, 'utf8');
-    if (!content.includes('project.ext.react')) {
-      const patch = `\nproject.ext.react = [\n    bundleCommand: "repack-bundle",\n    bundleConfig: "rspack.config.mjs"\n]\n\n`;
-      content = content.replace(/react \{/, `${patch}react {`);
-      await fs.writeFile(buildGradlePath, content);
-      console.log(`✅ Patched android/app/build.gradle for Re.Pack.`);
-    }
-  }
-
-  // Create react-native.config.js if missing
+  // 3. Create react-native.config.js if missing
   const rnConfigPath = path.join(cwd, 'react-native.config.js');
   if (!fs.existsSync(rnConfigPath)) {
     const content = `module.exports = {\n  commands: require('@callstack/repack/commands/rspack'),\n};\n`;

package/src/plugin/config-plugin.js

@@ -0,0 +1,45 @@
+const { withAppBuildGradle, withXcodeProject } = require('expo/config-plugins');
+
+/**
+ * ESAD Re.Pack Config Plugin
+ * 
+ * Automates the native patching required for Re.Pack/Rspack to work with Expo.
+ * Replaces manual patching in ESAD CLI.
+ */
+module.exports = (config) => {
+  // --- iOS Patching ---
+  config = withXcodeProject(config, (configuration) => {
+    const xcodeProject = configuration.modResults;
+    const bundleReactNativeCodeAndImagesBuildPhase = xcodeProject.buildPhaseObject(
+      'PBXShellScriptBuildPhase',
+      'Bundle React Native code and images'
+    );
+
+    if (bundleReactNativeCodeAndImagesBuildPhase) {
+      const script = JSON.parse(bundleReactNativeCodeAndImagesBuildPhase.shellScript);
+      const patched = script
+        .replace(
+          /if \[\[ -z "\$CLI_PATH" \]\]; then[\s\S]*?fi\n?/g,
+          `export CLI_PATH="$("$NODE_BINARY" --print "require('path').dirname(require.resolve('@react-native-community/cli/package.json')) + '/build/bin.js'")"`
+        )
+        .replace(/if \[\[ -z "\$BUNDLE_COMMAND" \]\]; then[\s\S]*?fi\n?/g, '');
+      
+      bundleReactNativeCodeAndImagesBuildPhase.shellScript = JSON.stringify(patched);
+    }
+    return configuration;
+  });
+
+  // --- Android Patching ---
+  config = withAppBuildGradle(config, (configuration) => {
+    const buildGradle = configuration.modResults.contents;
+    // Ensure Re.Pack bundle command is used
+    const patched = buildGradle
+      .replace(/cliFile.*/, '')
+      .replace(/bundleCommand.*/, 'bundleCommand = "bundle"');
+    
+    configuration.modResults.contents = patched;
+    return configuration;
+  });
+
+  return config;
+};

package/src/plugin/index.js

@@ -3,6 +3,7 @@ const fs = require('node:fs');
 const Repack = require('@callstack/repack');
 const { ExpoModulesPlugin } = require('@callstack/repack-plugin-expo-modules');
 const { ProvidePlugin, DefinePlugin } = require('@rspack/core');
+const { ReanimatedPlugin } = require('@callstack/repack-plugin-reanimated');
 
 /**
  * ESAD Re.Pack Plugin Wrapper
@@ -38,41 +39,30 @@ function withESAD(env, options) {
       clean: true,
     },
     resolve: {
-      ...Repack.getResolveOptions(),
-      extensions: [
-        '.expo.ts', '.expo.tsx', '.expo.js', '.expo.jsx',
-        '.native.ts', '.native.tsx', '.native.js', '.native.jsx',
-        ...Repack.getResolveOptions().extensions,
-      ],
+      ...Repack.getResolveOptions(platform),
       alias: {
+        '~': dirname,
         '@': dirname,
-        'expo-router': path.resolve(dirname, 'node_modules/expo-router'),
-        'react-native': path.resolve(dirname, 'node_modules/react-native'),
-        ...Repack.getResolveOptions().alias,
-      }
+        '@module-federation/runtime/helpers': path.resolve(dirname, 'node_modules/@module-federation/runtime/dist/helpers.cjs'),
+        '@module-federation/error-codes/browser': path.resolve(dirname, 'node_modules/@module-federation/error-codes/dist/browser.cjs'),
+        ...Repack.getResolveOptions(platform).alias,
+      },
+      conditionNames: ['react-native', 'require', 'import', 'default'],
     },
     module: {
       rules: [
         {
-          oneOf: [
-            {
-              test: /\.[jt]sx?$/,
-              include: [
-                path.resolve(dirname, 'app'),
-                path.resolve(dirname, 'index.js'),
-                /[\\/]node_modules[\\/](expo-router|react-native|@react-native|expo-modules-core)[\\/]/
-              ],
-              use: {
-                loader: 'babel-loader',
-                options: {
-                  presets: ['babel-preset-expo'],
-                  plugins: ['react-native-reanimated/plugin'],
-                },
-              },
-            },
-            ...Repack.getJsTransformRules(),
-          ]
+          test: /\.[jt]sx?$/,
+          include: [
+            path.resolve(dirname, 'app'),
+            path.resolve(dirname, 'index.js'),
+            /[\\/]node_modules[\\/](expo-router|react-native|@react-native|expo-modules-core|@module-federation|@react-navigation)[\\/]/
+          ],
+          resolve: {
+            fullySpecified: false,
+          }
         },
+        ...Repack.getJsTransformRules(),
         ...Repack.getAssetTransformRules(),
       ],
     },
@@ -83,9 +73,16 @@ function withESAD(env, options) {
       new DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
         '__DEV__': JSON.stringify(isDev),
+        'process.env.EXPO_BASE_URL': JSON.stringify(''),
+        'process.env.EXPO_OS': JSON.stringify(platform),
+        'process.env.EXPO_PROJECT_ROOT': JSON.stringify(dirname),
+        'process.env.EXPO_ROUTER_ABS_APP_ROOT': JSON.stringify(path.resolve(dirname, 'app')),
+        'process.env.EXPO_ROUTER_APP_ROOT': JSON.stringify('~/app'),
+        'process.env.EXPO_ROUTER_IMPORT_MODE': JSON.stringify('sync'),
       }),
       new ExpoModulesPlugin(),
       new Repack.RepackPlugin(),
+      new ReanimatedPlugin(),
       new Repack.plugins.ModuleFederationPluginV2({
         name: id,
         filename: `${id}.container.js.bundle`,
@@ -100,9 +97,11 @@ function withESAD(env, options) {
           'react-native-safe-area-context': { singleton: true, eager: true, requiredVersion: pkg.dependencies['react-native-safe-area-context'] },
           'expo-router': { singleton: true, eager: true, requiredVersion: pkg.dependencies['expo-router'] },
           'react-native-screens': { singleton: true, eager: true, requiredVersion: pkg.dependencies['react-native-screens'] },
+          '@module-federation/runtime': { singleton: true, eager: true },
+          '@module-federation/sdk': { singleton: true, eager: true },
           '@codemoreira/esad/client': {
             singleton: true,
-            eager: options.type === 'host', // Only eager in host to ensure it's available
+            eager: options.type === 'host',
             import: clientPath
           },
           ...(options.shared || {})
@@ -111,24 +110,14 @@ function withESAD(env, options) {
     ],
   };
 
-  // Add Host-specific DevServer magic for Expo
   if (options.type === 'host') {
     config.devServer = {
-      setupMiddlewares: (middlewares) => {
-        middlewares.unshift((req, res, next) => {
-          if (req.url.startsWith('/.expo/.virtual-metro-entry.bundle')) {
-            const query = req.url.split('?')[1];
-            const isMap = req.url.includes('.map');
-            const target = isMap ? '/index.bundle.map' : '/index.bundle';
-            const location = query ? `${target}?${query}` : target;
-            res.writeHead(302, { Location: location });
-            res.end();
-            return;
-          }
-          next();
-        });
-        return middlewares;
-      },
+      proxy: [
+        {
+          context: ['/.expo/.virtual-metro-entry'],
+          pathRewrite: { '^/.expo/.virtual-metro-entry': '/index' },
+        },
+      ],
     };
   }