@codemoreira/esad 1.4.6-14 → 1.4.6-16

package/src/cli/utils/scaffold.js

@@ -1,112 +1,96 @@
-const { runProcess } = require('./process');
-const fs = require('fs-extra');
-const path = require('path');
-
-/**
- * Clones a template repository and cleans up the .git folder
- */
-async function cloneTemplate(url, dest) {
-  console.log(`\n📥 Cloning template: ${url}...`);
-  await runProcess('git', ['clone', url, dest]);
-  
-  const gitDir = path.join(dest, '.git');
-  if (fs.existsSync(gitDir)) {
-    await fs.remove(gitDir);
-    console.log(`✅ Detached from template repository.`);
-  }
-}
-
-/**
- * Renames the project in package.json and app.json
- */
-async function renameProject(targetDir, newName) {
-  const pkgPath = path.join(targetDir, 'package.json');
-  const appJsonPath = path.join(targetDir, 'app.json');
-
-  if (fs.existsSync(pkgPath)) {
-    const pkg = await fs.readJson(pkgPath);
-    pkg.name = newName;
-    await fs.writeJson(pkgPath, pkg, { spaces: 2 });
-    console.log(`✅ Updated package.json name: ${newName}`);
-  }
-
-  if (fs.existsSync(appJsonPath)) {
-    const appJson = await fs.readJson(appJsonPath);
-    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/scheme.`);
-  }
-
-  // 3. Update Rspack Config if exists
-  const rspackPath = path.join(targetDir, 'rspack.config.mjs');
-  if (fs.existsSync(rspackPath)) {
-    let content = await fs.readFile(rspackPath, 'utf8');
-    const regex = /id:\s*['"][^'"]+['"]/;
-    if (regex.test(content)) {
-      content = content.replace(regex, `id: '${newName}'`);
-      await fs.writeFile(rspackPath, content);
-      console.log(`✅ Updated rspack.config.mjs id: ${newName}`);
-    }
-  }
-}
-
-/**
- * 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.
-  }
-
-  // 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`;
-    await fs.writeFile(rnConfigPath, content);
-    console.log(`✅ Generated react-native.config.js.`);
-  }
-}
-
-module.exports = {
-  cloneTemplate,
-  renameProject,
-  prepareNative
-};
+const { runProcess } = require('./process');
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Clones a template repository and cleans up the .git folder
+ */
+async function cloneTemplate(url, dest) {
+  console.log(`\n📥 Cloning template: ${url}...`);
+  await runProcess('git', ['clone', url, dest]);
+  
+  const gitDir = path.join(dest, '.git');
+  if (fs.existsSync(gitDir)) {
+    await fs.remove(gitDir);
+    console.log(`✅ Detached from template repository.`);
+  }
+}
+
+/**
+ * Renames the project in package.json and app.json
+ */
+async function renameProject(targetDir, newName) {
+  const pkgPath = path.join(targetDir, 'package.json');
+  const appJsonPath = path.join(targetDir, 'app.json');
+
+  if (fs.existsSync(pkgPath)) {
+    const pkg = await fs.readJson(pkgPath);
+    pkg.name = newName;
+    await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+    console.log(`✅ Updated package.json name: ${newName}`);
+  }
+
+  if (fs.existsSync(appJsonPath)) {
+    const appJson = await fs.readJson(appJsonPath);
+    if (appJson.expo) {
+      appJson.expo.name = newName;
+      appJson.expo.slug = newName;
+      if (appJson.expo.android) {
+        appJson.expo.android.package = `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.`);
+  }
+
+  // 3. Update Rspack Config if exists
+  const rspackPath = path.join(targetDir, 'rspack.config.mjs');
+  if (fs.existsSync(rspackPath)) {
+    let content = await fs.readFile(rspackPath, 'utf8');
+    const regex = /id:\s*['"][^'"]+['"]/;
+    if (regex.test(content)) {
+      content = content.replace(regex, `id: '${newName}'`);
+      await fs.writeFile(rspackPath, content);
+      console.log(`✅ Updated rspack.config.mjs id: ${newName}`);
+    }
+  }
+}
+
+/**
+ * Prepares the native folders and applies Re.Pack patches
+ */
+async function prepareNative(cwd, platform = 'android') {
+  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);
+  }
+
+  // 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
+  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`;
+    await fs.writeFile(rnConfigPath, content);
+    console.log(`✅ Generated react-native.config.js.`);
+  }
+}
+
+module.exports = {
+  cloneTemplate,
+  renameProject,
+  prepareNative
+};

package/src/client/index.js

@@ -1,82 +1,69 @@
-import { useState, useEffect } from 'react';
-
-/**
- * ESAD Global Event Manager
- * This class runs as a true Singleton across the Host and all Federated Modules,
- * allowing instant variable sharing without tight coupling.
- */
-// Unique key to store the global state in the environment (shared across sessions)
-const GLOBAL_STORE_KEY = '__ESAD_GLOBAL_STATE__';
-
-// Initialize the global store if it doesn't already exist.
-// This ensures that even if different chunks/modules have their own copy 
-// of this JS file, they all point to the same memory object in globalThis.
-if (!globalThis[GLOBAL_STORE_KEY]) {
-  globalThis[GLOBAL_STORE_KEY] = {
-    state: {},
-    listeners: {}
-  };
-}
-
-const GlobalStore = globalThis[GLOBAL_STORE_KEY];
-
-class ESADEventEmitter {
-  set(key, value) {
-    GlobalStore.state[key] = value;
-    if (GlobalStore.listeners[key]) {
-      GlobalStore.listeners[key].forEach(callback => callback(value));
-    }
-  }
-
-  get(key) {
-    return GlobalStore.state[key];
-  }
-
-  subscribe(key, callback) {
-    if (!GlobalStore.listeners[key]) {
-      GlobalStore.listeners[key] = [];
-    }
-    GlobalStore.listeners[key].push(callback);
-    
-    // Return unsubscribe function
-    return () => {
-      GlobalStore.listeners[key] = GlobalStore.listeners[key].filter(cb => cb !== callback);
-    };
-  }
-}
-
-// Global instance (acts as a proxy to the globalStore)
-const ESADState = new ESADEventEmitter();
-
-/**
- * React Hook for subscribing to Global State Changes
- * @param {string} key Unique identifier for the state slice (e.g. 'auth_token', 'theme')
- * @param {any} initialValue Optional initial state fallback
- */
-export function useESADState(key, initialValue) {
-  const [val, setVal] = useState(() => {
-    const existing = ESADState.get(key);
-    if (existing !== undefined) return existing;
-    if (initialValue !== undefined) {
-      ESADState.set(key, initialValue);
-      return initialValue;
-    }
-    return undefined;
-  });
-
-  useEffect(() => {
-    // Whenever ESADState.set is called matching this key, this component will re-render
-    const unsubscribe = ESADState.subscribe(key, (newVal) => {
-      setVal(newVal);
-    });
-    return unsubscribe;
-  }, [key]);
-
-  const setter = (newVal) => {
-    ESADState.set(key, newVal);
-  };
-
-  return [val, setter];
-}
-
-export { ESADState };
+import { useState, useEffect } from 'react';
+
+/**
+ * ESAD Global Event Manager
+ * This class runs as a true Singleton across the Host and all Federated Modules,
+ * allowing instant variable sharing without tight coupling.
+ */
+class ESADEventEmitter {
+  constructor() {
+    this.state = {};
+    this.listeners = {};
+  }
+
+  set(key, value) {
+    this.state[key] = value;
+    if (this.listeners[key]) {
+      this.listeners[key].forEach(callback => callback(value));
+    }
+  }
+
+  get(key) {
+    return this.state[key];
+  }
+
+  subscribe(key, callback) {
+    if (!this.listeners[key]) this.listeners[key] = [];
+    this.listeners[key].push(callback);
+    return () => {
+      this.listeners[key] = this.listeners[key].filter(cb => cb !== callback);
+    };
+  }
+}
+
+// Because this package is marked as a ModuleFederation Singleton,
+// this instance will be shared identically across all chunks!
+const ESADState = new ESADEventEmitter();
+
+/**
+ * React Hook for subscribing to Global State Changes
+ * @param {string} key Unique identifier for the state slice (e.g. 'auth_token', 'theme')
+ * @param {any} initialValue Optional initial state fallback
+ */
+export function useESADState(key, initialValue) {
+  const [val, setVal] = useState(() => {
+    const existing = ESADState.get(key);
+    if (existing !== undefined) return existing;
+    if (initialValue !== undefined) {
+      ESADState.set(key, initialValue);
+      return initialValue;
+    }
+    return undefined;
+  });
+
+  useEffect(() => {
+    // Whenever ESADState.set is called matching this key, this component will re-render
+    const unsubscribe = ESADState.subscribe(key, (newVal) => {
+      setVal(newVal);
+    });
+    return unsubscribe;
+  }, [key]);
+
+  const setter = (newVal) => {
+    ESADState.set(key, newVal);
+  };
+
+  return [val, setter];
+}
+
+export { ESADState };

package/src/plugin/index.js

@@ -3,7 +3,6 @@ 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
@@ -32,51 +31,47 @@ function withESAD(env, options) {
   const config = {
     mode: isDev ? 'development' : 'production',
     context: dirname,
-    entry: {
-      index: './index.js',
-    },
+    entry: options.entry || './index.js',
     output: {
       path: path.resolve(dirname, 'build', platform),
       filename: 'index.bundle',
-      chunkFilename: '[name].chunk.bundle',
-      publicPath: Repack.getPublicPath({ platform, dev: isDev }),
+      clean: true,
     },
-    ...((options.type === 'host' && dev !== false) ? {
-      devServer: {
-        hot: true,
-        port: 8081,
-        historyApiFallback: true,
-        proxy: [
-          {
-            context: ['/.expo/.virtual-metro-entry'],
-            pathRewrite: { '^/.expo/.virtual-metro-entry': '/index' },
-          },
-        ],
-      },
-    } : {}),
     resolve: {
-      ...Repack.getResolveOptions(platform),
-      fullySpecified: false,
+      ...Repack.getResolveOptions(),
       alias: {
-        '~': dirname,
-        '@': dirname,
-        '@module-federation/runtime/helpers': path.resolve(dirname, 'node_modules/@module-federation/runtime/dist/helpers.cjs'),
+        '@': path.resolve(dirname, '.'),
+        // Internal MFv2 & Re.Pack Aliases (Magic)
+        '@module-federation/runtime/helpers': path.resolve(dirname, 'node_modules/@module-federation/runtime/dist/helpers.js'),
         '@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-federation/sdk': path.resolve(dirname, 'node_modules/@module-federation/sdk'),
+        
+        ...Repack.getResolveOptions().alias,
+        ...(options.alias || {}),
+      }
     },
     module: {
       rules: [
         {
-          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)[\\/]/
-          ],
+          oneOf: [
+            {
+              test: /\.[cm]?[jt]sx?$/,
+              include: [
+                /node_modules[\\/]react-native/,
+                /node_modules[\\/]@react-native/,
+              ],
+              type: 'javascript/auto',
+              use: {
+                loader: '@callstack/repack/babel-swc-loader',
+                options: {
+                  sourceMaps: true,
+                  parallel: true,
+                },
+              },
+            },
+            ...Repack.getJsTransformRules(),
+          ]
         },
-        ...Repack.getJsTransformRules(),
         ...Repack.getAssetTransformRules(),
       ],
     },
@@ -87,16 +82,9 @@ 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`,
@@ -109,14 +97,10 @@ function withESAD(env, options) {
           'react/jsx-runtime': { singleton: true, eager: true, requiredVersion: pkg.dependencies.react },
           'react-native': { singleton: true, eager: true, requiredVersion: pkg.dependencies['react-native'] },
           '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',
-            import: clientPath
+          '@codemoreira/esad/client': { 
+            singleton: true, 
+            eager: options.type === 'host', // Only eager in host to ensure it's available
+            import: clientPath 
           },
           ...(options.shared || {})
         }
@@ -124,6 +108,27 @@ 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;
+      },
+    };
+  }
+
   return config;
 }
 

package/src/plugin/config-plugin.js

@@ -1,45 +0,0 @@
-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;
-};