@codemoreira/esad 1.2.3 → 1.2.5

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "@codemoreira/esad",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "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",
   "exports": {
-    ".": "./src/plugin/index.js",
-    "./plugin": "./src/plugin/index.js",
-    "./client": "./src/client/index.js"
+    ".": {
+      "types": "./src/plugin/index.d.ts",
+      "default": "./src/plugin/index.js"
+    },
+    "./plugin": {
+      "types": "./src/plugin/index.d.ts",
+      "default": "./src/plugin/index.js"
+    },
+    "./client": {
+      "types": "./src/client/index.d.ts",
+      "default": "./src/client/index.js"
+    }
   },
   "bin": {
     "esad": "./bin/esad.js"
@@ -26,5 +36,9 @@
     "cross-spawn": "^7.0.3",
     "fs-extra": "^11.2.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@rspack/core": "^1.7.9",
+    "@types/react": "^19.2.14",
+    "@types/react-native": "^0.72.8"
+  }
 }

package/src/cli/commands/createModule.js

@@ -1,47 +1,47 @@
-const fs = require('fs-extra');
-const path = require('path');
-const { runProcess } = require('../utils/process');
-const { getWorkspaceConfig } = require('../utils/config');
-
-module.exports = async (moduleName) => {
-  const configObj = getWorkspaceConfig();
-  if (!configObj) {
-    console.error(`❌ Error: Call this command from inside an ESAD workspace (esad.config.json not found).`);
-    return;
-  }
-
-  const { projectName } = configObj.data;
-  const isPrefixed = moduleName.startsWith(`${projectName}-`);
-  const finalModuleName = isPrefixed ? moduleName : `${projectName}-\${moduleName}`;
-  
-  const workspaceDir = path.dirname(configObj.path);
-  const targetDir = path.join(workspaceDir, finalModuleName);
-
-  console.log(`\n📦 Creating federated mini-app: ${finalModuleName}...\n`);
-  
-  try {
-    await runProcess('npx', ['react-native@latest', 'init', finalModuleName], workspaceDir);
-    console.log(`\n📦 Installing ESAD dependencies...`);
-    // Note: Assuming local link or npm install depends on final workflow
-    await runProcess('npm', ['install', '@codemoreira/esad'], targetDir);
-
-    const rspackContent = `import { withESAD } from '@codemoreira/esad/plugin';\n\nexport default withESAD({\n  type: 'module',\n  id: '${finalModuleName}'\n});\n`
-    fs.writeFileSync(path.join(targetDir, 'rspack.config.mjs'), rspackContent);
-    console.log(`✅ Injected withESAD wrapper into rspack.config.mjs`);
-
-    // Update package.json scripts
-    const modPkgPath = path.join(targetDir, 'package.json');
-    const modPkg = fs.readJsonSync(modPkgPath);
-    modPkg.scripts = {
-      ...modPkg.scripts,
-      "start": "esad dev",
-      "deploy": "esad deploy"
-    };
-    fs.writeJsonSync(modPkgPath, modPkg, { spaces: 2 });
-    console.log(`✅ Abstracted module scripts to use ESAD CLI.`);
-
-    console.log(`\n🎉 Module ${finalModuleName} is ready!`);
-  } catch (err) {
-    console.error(`❌ Failed to scaffold module`, err.message);
-  }
-};
+const fs = require('fs-extra');
+const path = require('path');
+const { runProcess } = require('../utils/process');
+const { getWorkspaceConfig } = require('../utils/config');
+
+module.exports = async (moduleName) => {
+  const configObj = getWorkspaceConfig();
+  if (!configObj) {
+    console.error(`❌ Error: Call this command from inside an ESAD workspace (esad.config.json not found).`);
+    return;
+  }
+
+  const { projectName } = configObj.data;
+  const isPrefixed = moduleName.startsWith(`${projectName}-`);
+  const finalModuleName = isPrefixed ? moduleName : `${projectName}-\${moduleName}`;
+  
+  const workspaceDir = path.dirname(configObj.path);
+  const targetDir = path.join(workspaceDir, finalModuleName);
+
+  console.log(`\n📦 Creating federated mini-app: ${finalModuleName}...\n`);
+  
+  try {
+    await runProcess('npx', ['react-native@latest', 'init', finalModuleName], workspaceDir);
+    console.log(`\n📦 Installing ESAD dependencies...`);
+    // Note: Assuming local link or npm install depends on final workflow
+    await runProcess('npm', ['install', '@codemoreira/esad'], targetDir);
+
+    const rspackContent = `import { withESAD } from '@codemoreira/esad/plugin';\n\nexport default withESAD({\n  type: 'module',\n  id: '${finalModuleName}'\n});\n`
+    fs.writeFileSync(path.join(targetDir, 'rspack.config.mjs'), rspackContent);
+    console.log(`✅ Injected withESAD wrapper into rspack.config.mjs`);
+
+    // Update package.json scripts
+    const modPkgPath = path.join(targetDir, 'package.json');
+    const modPkg = fs.readJsonSync(modPkgPath);
+    modPkg.scripts = {
+      ...modPkg.scripts,
+      "start": "esad dev",
+      "deploy": "esad deploy"
+    };
+    fs.writeJsonSync(modPkgPath, modPkg, { spaces: 2 });
+    console.log(`✅ Abstracted module scripts to use ESAD CLI.`);
+
+    console.log(`\n🎉 Module ${finalModuleName} is ready!`);
+  } catch (err) {
+    console.error(`❌ Failed to scaffold module`, err.message);
+  }
+};

package/src/cli/commands/deploy.js

@@ -4,9 +4,36 @@ const AdmZip = require('adm-zip');
 const { getWorkspaceConfig } = require('../utils/config');
 
 module.exports = async (options) => {
-  const pkgPath = path.join(process.cwd(), 'package.json');
+  let cwd = process.cwd();
+  let pkgPath = path.join(cwd, 'package.json');
+  
+  // Try to find workspace config for root-level execution
+  const configObj = getWorkspaceConfig();
+  if (configObj) {
+    const workspaceRoot = path.dirname(configObj.path);
+    const { projectName } = configObj.data;
+    
+    // If ID is provided, try to find that module/host folder
+    if (options.id) {
+       const targetDir = path.join(workspaceRoot, options.id);
+       if (fs.existsSync(targetDir)) {
+         cwd = targetDir;
+         pkgPath = path.join(cwd, 'package.json');
+         console.log(`📂 Auto-detected Project folder: ${path.relative(process.cwd(), targetDir)}`);
+       }
+    } else if (!fs.existsSync(pkgPath)) {
+       // If no ID and no package.json in current dir, assume we want to deploy the host from root
+       const hostDir = path.join(workspaceRoot, `${projectName}-host`);
+       if (fs.existsSync(hostDir)) {
+          cwd = hostDir;
+          pkgPath = path.join(cwd, 'package.json');
+          console.log(`📂 Auto-detected Host App folder: ${path.relative(process.cwd(), hostDir)}`);
+       }
+    }
+  }
+
   if (!fs.existsSync(pkgPath)) {
-    console.error(`❌ Error: package.json not found.`);
+    console.error(`❌ Error: Call this command from inside a Project directory or the Workspace Root.`);
     process.exit(1);
   }
 
@@ -17,14 +44,8 @@ module.exports = async (options) => {
 
   console.log(`\n☁️  Starting ESAD Deploy for ${moduleId} (v${version})\n`);
   
-  const configObj = getWorkspaceConfig();
-  if (!configObj) {
-    console.error(`❌ Error: esad.config.json not found in current directory or parent.`);
-    process.exit(1);
-  }
-
-  const config = configObj.data;
-  if (!config.deployEndpoint) {
+  const config = configObj ? configObj.data : null;
+  if (!config?.deployEndpoint) {
     console.error(`❌ Error: 'deployEndpoint' not configured in esad.config.json.`);
     process.exit(1);
   }
@@ -32,16 +53,16 @@ module.exports = async (options) => {
   const deployUrl = config.deployEndpoint.replace('{{moduleId}}', moduleId);
   console.log(`📡 Deployment Endpoint Resolved: ${deployUrl}`);
   
-  const distPath = path.join(process.cwd(), 'dist');
+  const distPath = path.join(cwd, 'dist');
   if (!fs.existsSync(distPath)) {
-    console.error(`❌ Error: dist/ directory not found. Did you run the build command?`);
+    console.error(`❌ Error: dist/ directory not found in ${cwd}. Did you run the build command?`);
     process.exit(1);
   }
 
   const zip = new AdmZip();
   zip.addLocalFolder(distPath);
   
-  const zipPath = path.join(process.cwd(), `bundle-${moduleId}-${version}.zip`);
+  const zipPath = path.join(cwd, `bundle-${moduleId}-${version}.zip`);
   zip.writeZip(zipPath);
   console.log(`🗜️  Zipped output to ${zipPath}`);
 

package/src/cli/commands/dev.js

@@ -4,12 +4,34 @@ const fs = require('fs-extra');
 const path = require('path');
 
 module.exports = async (options) => {
-  const pkgPath = path.join(process.cwd(), 'package.json');
-  if (!fs.existsSync(pkgPath)) {
-    console.error(`❌ Error: Call this command from inside a Host or Module directory.`);
-    return;
-  }
+  let cwd = process.cwd();
+  let pkgPath = path.join(cwd, 'package.json');
   
+  // Try to find workspace config for root-level execution
+  const configObj = getWorkspaceConfig();
+  if (configObj) {
+    const workspaceRoot = path.dirname(configObj.path);
+    const { projectName } = configObj.data;
+    
+    if (options.id) {
+       // Target a specific module
+       const moduleDir = path.join(workspaceRoot, options.id);
+       if (fs.existsSync(moduleDir)) {
+         cwd = moduleDir;
+         pkgPath = path.join(cwd, 'package.json');
+         console.log(`📂 Auto-detected Module folder: ${path.relative(process.cwd(), moduleDir)}`);
+       }
+    } else {
+       // Target host by default if in root
+       const hostDir = path.join(workspaceRoot, `${projectName}-host`);
+       if (fs.existsSync(hostDir)) {
+          cwd = hostDir;
+          pkgPath = path.join(cwd, 'package.json');
+          console.log(`📂 Auto-detected Host App folder: ${path.relative(process.cwd(), hostDir)}`);
+       }
+    }
+  }
+
   const pkg = fs.readJsonSync(pkgPath);
   const moduleId = options.id || pkg.name;
   const port = options.port || '8081';
@@ -19,13 +41,12 @@ module.exports = async (options) => {
   
   if (isHost && !options.id) {
      console.log(`\n🚀 Starting Host App Dev Server (Re.Pack/Rspack)...\n`);
-     await spawn('npx', ['react-native', 'webpack-start'], { stdio: 'inherit', shell: true });
+     await spawn('npx', ['react-native', 'webpack-start'], { cwd, stdio: 'inherit', shell: true });
      return;
   }
 
   console.log(`\n⚡ Starting ESAD Dev Server for ${moduleId} on port ${port}...\n`);
   
-  const configObj = getWorkspaceConfig();
   const config = configObj ? configObj.data : null;
   let devApiUrl = config?.devModeEndpoint ? config.devModeEndpoint.replace('{{moduleId}}', moduleId) : null;
 
@@ -43,7 +64,7 @@ module.exports = async (options) => {
 
   await setDevMode(true);
 
-  const proc = spawn('npx', ['react-native', 'webpack-start', '--port', port], { stdio: 'inherit', shell: true });
+  const proc = spawn('npx', ['react-native', 'webpack-start', '--port', port], { cwd, stdio: 'inherit', shell: true });
 
   const shutdown = async () => {
     console.log(`\n🛑 Parando ESAD Dev Server e revertendo o registro na CDN...`);

package/src/cli/commands/host.js

@@ -4,6 +4,7 @@ const fs = require('fs-extra');
 const { spawn } = require('cross-spawn');
 const http = require('http');
 const readline = require('readline');
+const { getWorkspaceConfig } = require('../utils/config');
 
 const rl = readline.createInterface({
   input: process.stdin,
@@ -13,11 +14,25 @@ const rl = readline.createInterface({
 const askQuestion = (query) => new Promise((resolve) => rl.question(query, resolve));
 
 module.exports = async (subcommand) => {
-  const cwd = process.cwd();
-  const pkgPath = path.join(cwd, 'package.json');
+  let cwd = process.cwd();
+  let pkgPath = path.join(cwd, 'package.json');
   
+  // Try to find workspace config to resolve host path from root
+  const configObj = getWorkspaceConfig();
+  if (configObj) {
+    const workspaceRoot = path.dirname(configObj.path);
+    const { projectName } = configObj.data;
+    const hostDir = path.join(workspaceRoot, `${projectName}-host`);
+    
+    if (fs.existsSync(hostDir)) {
+      cwd = hostDir;
+      pkgPath = path.join(cwd, 'package.json');
+      console.log(`📂 Auto-detected Host App folder: ${path.relative(process.cwd(), hostDir)}`);
+    }
+  }
+
   if (!fs.existsSync(pkgPath)) {
-    console.error(`❌ Error: Call this command from inside the Host App directory.`);
+    console.error(`❌ Error: Call this command from inside the Host App or the Workspace Root.`);
     return;
   }
 
@@ -85,15 +100,20 @@ module.exports = async (subcommand) => {
     // 4. Start Bundler in a New Window
     console.log(`\n🛠️ Starting Rspack Bundler in a new window...`);
     if (process.platform === 'win32') {
-      // Use CMD /C START to open a new window
-      spawn('cmd', ['/c', 'start', 'npx', 'react-native', 'webpack-start'], { 
+      // Use CMD /C START /D <dir> to open a new window in the correct folder
+      spawn('cmd', ['/c', 'start', '/D', cwd, 'npx', 'react-native', 'webpack-start'], { 
         detached: true, 
         stdio: 'ignore',
         shell: true 
       }).unref();
     } else {
       // For MacOS or Linux
-      spawn('npx', ['react-native', 'webpack-start'], { detached: true, stdio: 'inherit', shell: true }).unref();
+      spawn('npx', ['react-native', 'webpack-start'], { 
+        cwd, 
+        detached: true, 
+        stdio: 'inherit', 
+        shell: true 
+      }).unref();
     }
 
     // 5. Wait for Bundler (Port 8081)

package/src/cli/commands/init.js

@@ -1,113 +1,113 @@
-const fs = require('fs-extra');
-const path = require('path');
-const { runProcess } = require('../utils/process');
-const templates = require('../templates/host');
-
-module.exports = async (projectName) => {
-  const workspaceDir = path.join(process.cwd(), projectName);
-  console.log(`\n🚀 Initializing ESAD Workspace: ${projectName}...\n`);
-  
-  fs.ensureDirSync(workspaceDir);
-
-  const configPath = path.join(workspaceDir, 'esad.config.json');
-  if (!fs.existsSync(configPath)) {
-    const configTemplate = {
-      projectName: projectName,
-      registryUrl: "http://localhost:3000/modules",
-      deployEndpoint: "http://localhost:3000/api/admin/modules/{{moduleId}}/versions",
-      devModeEndpoint: "http://localhost:3000/api/admin/modules/{{moduleId}}"
-    };
-    fs.writeJsonSync(configPath, configTemplate, { spaces: 2 });
-    console.log(`✅ Generated dynamic configuration file: esad.config.json`);
-  }
-
-  const gitignorePath = path.join(workspaceDir, '.gitignore');
-  if (!fs.existsSync(gitignorePath)) {
-    const hostName = `${projectName}-host`;
-    const gitignoreContent = `# ESAD Workspace Git Configuration\n` +
-      `# Ignore everything by default\n` +
-      `/*\n\n` +
-      `# Exceptions: Track only the Host and Configs\n` +
-      `!/${hostName}/\n` +
-      `!/esad.config.json\n` +
-      `!/.gitignore\n` +
-      `\n# Ignore node_modules\n` +
-      `node_modules/\n`;
-    fs.writeFileSync(gitignorePath, gitignoreContent);
-    console.log(`✅ Generated .gitignore`);
-  }
-
-  const hostName = `${projectName}-host`;
-  const hostDir = path.join(workspaceDir, hostName);
-  
-  try {
-    console.log(`\n📦 Scaffolding clean Expo project: ${hostName}...`);
-    await runProcess('npx', ['create-expo-app', hostName, '--template', 'blank'], workspaceDir);
-    
-    console.log(`\n📦 Installing ESAD, Re.Pack and UI dependencies into host...`);
-    const hostPkgPath = path.join(hostDir, 'package.json');
-    const hostPkg = fs.readJsonSync(hostPkgPath);
-    const reactVersion = hostPkg.dependencies.react;
-
-    const deps = [
-      '@codemoreira/esad',
-      '@callstack/repack@^5.2.5',
-      '@rspack/core@^1.7.9',
-      '@rspack/plugin-react-refresh@^1.6.1',
-      '@callstack/repack-plugin-expo-modules',
-      '@react-native-community/cli',
-      'nativewind',
-      'tailwindcss',
-      'postcss',
-      'autoprefixer',
-      'expo-secure-store',
-      'react-native-reanimated',
-      'react-native-safe-area-context',
-      'react-native-screens',
-      'expo-router',
-      `react-dom@${reactVersion}`
-    ];
-    await runProcess('npm', ['install', ...deps], hostDir); 
-
-    // Re-read package.json to get the version after npm install updated it
-    const updatedPkg = fs.readJsonSync(hostPkgPath);
-
-    // Update package.json scripts to delegate to ESAD CLI
-    updatedPkg.scripts = {
-       ...updatedPkg.scripts,
-       "start": "esad host start",
-       "android": "esad host android",
-       "ios": "esad host ios",
-       "dev": "esad host dev"
-    };
-    fs.writeJsonSync(hostPkgPath, updatedPkg, { spaces: 2 });
-    console.log(`✅ Abstracted package.json scripts to use ESAD CLI.`);
-
-    console.log(`\n🎨 Configuring NativeWind & Tailwind...`);
-    fs.writeFileSync(path.join(hostDir, 'tailwind.config.js'), templates.tailwindConfig);
-    fs.writeFileSync(path.join(hostDir, 'babel.config.js'), templates.babelConfig);
-
-    const rspackContent = `import { withESAD } from '@codemoreira/esad/plugin';\n\nexport default withESAD({\n  type: 'host',\n  id: '${hostName}'\n});\n`
-    fs.writeFileSync(path.join(hostDir, 'rspack.config.mjs'), rspackContent);
-
-    console.log(`\n🔐 Scaffolding Auth & Navigation...`);
-    fs.ensureDirSync(path.join(hostDir, 'providers'));
-    fs.ensureDirSync(path.join(hostDir, 'hooks'));
-    fs.ensureDirSync(path.join(hostDir, 'lib'));
-    fs.ensureDirSync(path.join(hostDir, 'app', '(protected)', 'module'));
-
-    fs.writeFileSync(path.join(hostDir, 'providers/auth.tsx'), templates.authProvider);
-    fs.writeFileSync(path.join(hostDir, 'app/_layout.tsx'), templates.rootLayout);
-    fs.writeFileSync(path.join(hostDir, 'app/login.tsx'), templates.loginPage);
-    fs.writeFileSync(path.join(hostDir, 'app/global.css'), templates.globalCss);
-    fs.writeFileSync(path.join(hostDir, 'lib/moduleLoader.ts'), templates.moduleLoader);
-    fs.writeFileSync(path.join(hostDir, 'index.js'), templates.indexJs);
-    fs.writeFileSync(path.join(hostDir, 'app/(protected)/index.tsx'), templates.dashboard);
-    fs.writeFileSync(path.join(hostDir, 'app/(protected)/module/[id].tsx'), templates.modulePage);
-
-    console.log(`\n🎉 ESAD Workpace Initialized!`);
-    console.log(`-> cd ${projectName}\n-> esad dev (to start Host)`);
-  } catch (err) {
-    console.error(`❌ Failed to init Host:`, err.message);
-  }
-};
+const fs = require('fs-extra');
+const path = require('path');
+const { runProcess } = require('../utils/process');
+const templates = require('../templates/host');
+
+module.exports = async (projectName) => {
+  const workspaceDir = path.join(process.cwd(), projectName);
+  console.log(`\n🚀 Initializing ESAD Workspace: ${projectName}...\n`);
+  
+  fs.ensureDirSync(workspaceDir);
+
+  const configPath = path.join(workspaceDir, 'esad.config.json');
+  if (!fs.existsSync(configPath)) {
+    const configTemplate = {
+      projectName: projectName,
+      registryUrl: "http://localhost:3000/modules",
+      deployEndpoint: "http://localhost:3000/api/admin/modules/{{moduleId}}/versions",
+      devModeEndpoint: "http://localhost:3000/api/admin/modules/{{moduleId}}"
+    };
+    fs.writeJsonSync(configPath, configTemplate, { spaces: 2 });
+    console.log(`✅ Generated dynamic configuration file: esad.config.json`);
+  }
+
+  const gitignorePath = path.join(workspaceDir, '.gitignore');
+  if (!fs.existsSync(gitignorePath)) {
+    const hostName = `${projectName}-host`;
+    const gitignoreContent = `# ESAD Workspace Git Configuration\n` +
+      `# Ignore everything by default\n` +
+      `/*\n\n` +
+      `# Exceptions: Track only the Host and Configs\n` +
+      `!/${hostName}/\n` +
+      `!/esad.config.json\n` +
+      `!/.gitignore\n` +
+      `\n# Ignore node_modules\n` +
+      `node_modules/\n`;
+    fs.writeFileSync(gitignorePath, gitignoreContent);
+    console.log(`✅ Generated .gitignore`);
+  }
+
+  const hostName = `${projectName}-host`;
+  const hostDir = path.join(workspaceDir, hostName);
+  
+  try {
+    console.log(`\n📦 Scaffolding clean Expo project: ${hostName}...`);
+    await runProcess('npx', ['create-expo-app', hostName, '--template', 'blank'], workspaceDir);
+    
+    console.log(`\n📦 Installing ESAD, Re.Pack and UI dependencies into host...`);
+    const hostPkgPath = path.join(hostDir, 'package.json');
+    const hostPkg = fs.readJsonSync(hostPkgPath);
+    const reactVersion = hostPkg.dependencies.react;
+
+    const deps = [
+      '@codemoreira/esad',
+      '@callstack/repack@^5.2.5',
+      '@rspack/core@^1.7.9',
+      '@rspack/plugin-react-refresh@^1.6.1',
+      '@callstack/repack-plugin-expo-modules',
+      '@react-native-community/cli',
+      'nativewind',
+      'tailwindcss',
+      'postcss',
+      'autoprefixer',
+      'expo-secure-store',
+      'react-native-reanimated',
+      'react-native-safe-area-context',
+      'react-native-screens',
+      'expo-router',
+      `react-dom@${reactVersion}`
+    ];
+    await runProcess('npm', ['install', ...deps], hostDir); 
+
+    // Re-read package.json to get the version after npm install updated it
+    const updatedPkg = fs.readJsonSync(hostPkgPath);
+
+    // Update package.json scripts to delegate to ESAD CLI
+    updatedPkg.scripts = {
+       ...updatedPkg.scripts,
+       "start": "esad host start",
+       "android": "esad host android",
+       "ios": "esad host ios",
+       "dev": "esad host dev"
+    };
+    fs.writeJsonSync(hostPkgPath, updatedPkg, { spaces: 2 });
+    console.log(`✅ Abstracted package.json scripts to use ESAD CLI.`);
+
+    console.log(`\n🎨 Configuring NativeWind & Tailwind...`);
+    fs.writeFileSync(path.join(hostDir, 'tailwind.config.js'), templates.tailwindConfig);
+    fs.writeFileSync(path.join(hostDir, 'babel.config.js'), templates.babelConfig);
+
+    const rspackContent = `import { withESAD } from '@codemoreira/esad/plugin';\n\nexport default withESAD({\n  type: 'host',\n  id: '${hostName}'\n});\n`
+    fs.writeFileSync(path.join(hostDir, 'rspack.config.mjs'), rspackContent);
+
+    console.log(`\n🔐 Scaffolding Auth & Navigation...`);
+    fs.ensureDirSync(path.join(hostDir, 'providers'));
+    fs.ensureDirSync(path.join(hostDir, 'hooks'));
+    fs.ensureDirSync(path.join(hostDir, 'lib'));
+    fs.ensureDirSync(path.join(hostDir, 'app', '(protected)', 'module'));
+
+    fs.writeFileSync(path.join(hostDir, 'providers/auth.tsx'), templates.authProvider);
+    fs.writeFileSync(path.join(hostDir, 'app/_layout.tsx'), templates.rootLayout);
+    fs.writeFileSync(path.join(hostDir, 'app/login.tsx'), templates.loginPage);
+    fs.writeFileSync(path.join(hostDir, 'app/global.css'), templates.globalCss);
+    fs.writeFileSync(path.join(hostDir, 'lib/moduleLoader.ts'), templates.moduleLoader);
+    fs.writeFileSync(path.join(hostDir, 'index.js'), templates.indexJs);
+    fs.writeFileSync(path.join(hostDir, 'app/(protected)/index.tsx'), templates.dashboard);
+    fs.writeFileSync(path.join(hostDir, 'app/(protected)/module/[id].tsx'), templates.modulePage);
+
+    console.log(`\n🎉 ESAD Workpace Initialized!`);
+    console.log(`-> cd ${projectName}\n-> esad dev (to start Host)`);
+  } catch (err) {
+    console.error(`❌ Failed to init Host:`, err.message);
+  }
+};

package/src/cli/templates/host.js

@@ -1,201 +1,201 @@
-module.exports = {
-  tailwindConfig: `/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", "./lib/**/*.{js,jsx,ts,tsx}"],
-  presets: [require("nativewind/preset")],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};`,
-
-  babelConfig: `module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: [
-      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
-      "nativewind/babel",
-    ],
-  };
-};`,
-
-  authProvider: `import { createContext, useEffect, useState, useContext } from "react";
-import * as SecureStore from "expo-secure-store";
-
-const AuthContext = createContext({});
-
-export function AuthProvider({ children }) {
-    const [token, setToken] = useState(null);
-    const [isInitialized, setIsInitialized] = useState(false);
-
-    useEffect(() => {
-        SecureStore.getItemAsync("token").then((val) => {
-            setToken(val);
-            setIsInitialized(true);
-        });
-    }, []);
-
-    const login = (mockToken = "session_token") => {
-        setToken(mockToken);
-        SecureStore.setItemAsync("token", mockToken);
-    };
-
-    const logout = () => {
-        setToken(null);
-        SecureStore.deleteItemAsync("token");
-    };
-
-    return (
-        <AuthContext.Provider value={{ token, login, logout, isInitialized }}>
-            {children}
-        </AuthContext.Provider>
-    );
-}
-
-export const useAuth = () => useContext(AuthContext);`,
-
-  rootLayout: `import { Stack, router } from "expo-router";
-import { useEffect } from "react";
-import { AuthProvider, useAuth } from "@/providers/auth";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-import "./global.css";
-
-export default function RootLayout() {
-  return (
-    <SafeAreaProvider>
-      <AuthProvider>
-         <RootNavigation />
-      </AuthProvider>\n    </SafeAreaProvider>
-  );
-}
-
-function RootNavigation() {
-  const { token, isInitialized } = useAuth();
-
-  useEffect(() => {
-    if (!isInitialized) return;\n\n    // Global SuperApp Registry
-    globalThis.__SUPERAPP__ = {
-       getToken: () => token,
-       navigate: (route, params) => router.push({ pathname: route, params })
-    };\n  }, [isInitialized, token]);
-
-  if (!isInitialized) return null;
-
-  return (
-    <Stack screenOptions={{ headerShown: false }}>
-       <Stack.Screen name="login" redirect={!!token} />
-       <Stack.Screen name="(protected)" redirect={!token} />
-    </Stack>
-  );
-}`,
-
-  loginPage: `import { View, Text, TouchableOpacity } from "react-native";
-import { useAuth } from "@/providers/auth";
-
-export default function LoginPage() {
-  const { login } = useAuth();
-
-  return (
-    <View className="flex-1 items-center justify-center bg-slate-50 p-6">
-      <View className="w-full max-w-sm bg-white p-8 rounded-3xl shadow-xl border border-slate-100">
-        <Text className="text-3xl font-bold text-slate-900 mb-2">Welcome</Text>
-        <Text className="text-slate-500 mb-8">Sign in to access your SuperApp modules</Text>\n        
-        <TouchableOpacity 
-          onPress={() => login()}
-          className="w-full bg-indigo-600 py-4 rounded-2xl items-center shadow-lg active:bg-indigo-700"
-        >
-          <Text className="text-white font-semibold text-lg">Entrar no App</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-}`,
-
-  globalCss: `@tailwind base;\n@tailwind components;\n@tailwind utilities;`,
-
-  moduleLoader: `import { ScriptManager } from "@callstack/repack/client";
-
-export async function loadModule(config) {
-  await ScriptManager.shared.addScript({
-    id: config.id,
-    url: config.url
-  });
-
-  const container = global[config.scope];
-  if (!container) throw new Error("Module " + config.scope + " not found");
-
-  await container.init(__webpack_share_scopes__.default);
-  const factory = await container.get(config.module);
-  return factory();
-}`,
-
-  dashboard: `import { View, Text, ScrollView, TouchableOpacity } from "react-native";
-import { Link } from "expo-router";
-import { useAuth } from "@/providers/auth";
-
-const MOCK_MODULES = [
-  { id: 'mod1', name: 'Sales Dashboard', icon: '📊' },
-  { id: 'mod2', name: 'Inventory Manager', icon: '📦' },
-];
-
-export default function Dashboard() {
-  const { logout } = useAuth();
-
-  return (
-    <ScrollView className="flex-1 bg-slate-50 p-6 pt-16">
-      <View className="flex-row justify-between items-center mb-8">
-        <View>
-           <Text className="text-sm text-slate-500">Welcome back,</Text>
-           <Text className="text-2xl font-bold text-slate-900">Explorer</Text>
-        </View>
-        <TouchableOpacity onPress={logout} className="p-2">
-           <Text className="text-red-500 font-medium">Logout</Text>
-        </TouchableOpacity>
-      </View>
-
-      <Text className="text-lg font-semibold text-slate-800 mb-4">Your Modules</Text>
-      
-      {MOCK_MODULES.map(m => (
-        <Link key={m.id} href={\`/(protected)/module/\${m.id}\`} asChild>
-          <TouchableOpacity className="bg-white p-6 rounded-2xl mb-4 shadow-sm border border-slate-100 flex-row items-center">
-            <Text className="text-3xl mr-4">{m.icon}</Text>
-            <View className="flex-1">
-              <Text className="text-lg font-bold text-slate-900">{m.name}</Text>
-              <Text className="text-slate-500">Tap to open module</Text>
-            </View>
-          </TouchableOpacity>
-        </Link>
-      ))}
-    </ScrollView>
-  );
-}`,
-
-  modulePage: `import { useLocalSearchParams } from "expo-router";
-import { View, Text, ActivityIndicator } from "react-native";
-import { useEffect, useState } from "react";
-import { loadModule } from "@/lib/moduleLoader";
-
-export default function ModulePage() {
-  const { id } = useLocalSearchParams();
-  const [Module, setModule] = useState(null);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {\n    // In real app, fetch config from registry by id\n    setError("Module dynamic loading requires a running CDN and Build setup.");\n  }, [id]);
-
-  if (error) return (
-    <View className="flex-1 items-center justify-center p-10 bg-white">
-       <Text className="text-red-500 text-center font-medium mb-4">{error}</Text>
-       <Text className="text-slate-400 text-center text-sm">Follow the README to setup your module registry.</Text>
-    </View>
-  );
-
-  return (
-    <View className="flex-1 bg-white items-center justify-center">
-       <ActivityIndicator size="large" color="#4f46e5" />
-       <Text className="mt-4 text-slate-500">Loading federated module...</Text>
-    </View>
-  );
-}`,
-
-  indexJs: `import "expo-router/entry";`
-};
+module.exports = {
+  tailwindConfig: `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", "./lib/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};`,
+
+  babelConfig: `module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};`,
+
+  authProvider: `import { createContext, useEffect, useState, useContext } from "react";
+import * as SecureStore from "expo-secure-store";
+
+const AuthContext = createContext({});
+
+export function AuthProvider({ children }) {
+    const [token, setToken] = useState(null);
+    const [isInitialized, setIsInitialized] = useState(false);
+
+    useEffect(() => {
+        SecureStore.getItemAsync("token").then((val) => {
+            setToken(val);
+            setIsInitialized(true);
+        });
+    }, []);
+
+    const login = (mockToken = "session_token") => {
+        setToken(mockToken);
+        SecureStore.setItemAsync("token", mockToken);
+    };
+
+    const logout = () => {
+        setToken(null);
+        SecureStore.deleteItemAsync("token");
+    };
+
+    return (
+        <AuthContext.Provider value={{ token, login, logout, isInitialized }}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export const useAuth = () => useContext(AuthContext);`,
+
+  rootLayout: `import { Stack, router } from "expo-router";
+import { useEffect } from "react";
+import { AuthProvider, useAuth } from "@/providers/auth";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import "./global.css";
+
+export default function RootLayout() {
+  return (
+    <SafeAreaProvider>
+      <AuthProvider>
+         <RootNavigation />
+      </AuthProvider>\n    </SafeAreaProvider>
+  );
+}
+
+function RootNavigation() {
+  const { token, isInitialized } = useAuth();
+
+  useEffect(() => {
+    if (!isInitialized) return;\n\n    // Global SuperApp Registry
+    globalThis.__SUPERAPP__ = {
+       getToken: () => token,
+       navigate: (route, params) => router.push({ pathname: route, params })
+    };\n  }, [isInitialized, token]);
+
+  if (!isInitialized) return null;
+
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+       <Stack.Screen name="login" redirect={!!token} />
+       <Stack.Screen name="(protected)" redirect={!token} />
+    </Stack>
+  );
+}`,
+
+  loginPage: `import { View, Text, TouchableOpacity } from "react-native";
+import { useAuth } from "@/providers/auth";
+
+export default function LoginPage() {
+  const { login } = useAuth();
+
+  return (
+    <View className="flex-1 items-center justify-center bg-slate-50 p-6">
+      <View className="w-full max-w-sm bg-white p-8 rounded-3xl shadow-xl border border-slate-100">
+        <Text className="text-3xl font-bold text-slate-900 mb-2">Welcome</Text>
+        <Text className="text-slate-500 mb-8">Sign in to access your SuperApp modules</Text>\n        
+        <TouchableOpacity 
+          onPress={() => login()}
+          className="w-full bg-indigo-600 py-4 rounded-2xl items-center shadow-lg active:bg-indigo-700"
+        >
+          <Text className="text-white font-semibold text-lg">Entrar no App</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}`,
+
+  globalCss: `@tailwind base;\n@tailwind components;\n@tailwind utilities;`,
+
+  moduleLoader: `import { ScriptManager } from "@callstack/repack/client";
+
+export async function loadModule(config) {
+  await ScriptManager.shared.addScript({
+    id: config.id,
+    url: config.url
+  });
+
+  const container = global[config.scope];
+  if (!container) throw new Error("Module " + config.scope + " not found");
+
+  await container.init(__webpack_share_scopes__.default);
+  const factory = await container.get(config.module);
+  return factory();
+}`,
+
+  dashboard: `import { View, Text, ScrollView, TouchableOpacity } from "react-native";
+import { Link } from "expo-router";
+import { useAuth } from "@/providers/auth";
+
+const MOCK_MODULES = [
+  { id: 'mod1', name: 'Sales Dashboard', icon: '📊' },
+  { id: 'mod2', name: 'Inventory Manager', icon: '📦' },
+];
+
+export default function Dashboard() {
+  const { logout } = useAuth();
+
+  return (
+    <ScrollView className="flex-1 bg-slate-50 p-6 pt-16">
+      <View className="flex-row justify-between items-center mb-8">
+        <View>
+           <Text className="text-sm text-slate-500">Welcome back,</Text>
+           <Text className="text-2xl font-bold text-slate-900">Explorer</Text>
+        </View>
+        <TouchableOpacity onPress={logout} className="p-2">
+           <Text className="text-red-500 font-medium">Logout</Text>
+        </TouchableOpacity>
+      </View>
+
+      <Text className="text-lg font-semibold text-slate-800 mb-4">Your Modules</Text>
+      
+      {MOCK_MODULES.map(m => (
+        <Link key={m.id} href={\`/(protected)/module/\${m.id}\`} asChild>
+          <TouchableOpacity className="bg-white p-6 rounded-2xl mb-4 shadow-sm border border-slate-100 flex-row items-center">
+            <Text className="text-3xl mr-4">{m.icon}</Text>
+            <View className="flex-1">
+              <Text className="text-lg font-bold text-slate-900">{m.name}</Text>
+              <Text className="text-slate-500">Tap to open module</Text>
+            </View>
+          </TouchableOpacity>
+        </Link>
+      ))}
+    </ScrollView>
+  );
+}`,
+
+  modulePage: `import { useLocalSearchParams } from "expo-router";
+import { View, Text, ActivityIndicator } from "react-native";
+import { useEffect, useState } from "react";
+import { loadModule } from "@/lib/moduleLoader";
+
+export default function ModulePage() {
+  const { id } = useLocalSearchParams();
+  const [Module, setModule] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {\n    // In real app, fetch config from registry by id\n    setError("Module dynamic loading requires a running CDN and Build setup.");\n  }, [id]);
+
+  if (error) return (
+    <View className="flex-1 items-center justify-center p-10 bg-white">
+       <Text className="text-red-500 text-center font-medium mb-4">{error}</Text>
+       <Text className="text-slate-400 text-center text-sm">Follow the README to setup your module registry.</Text>
+    </View>
+  );
+
+  return (
+    <View className="flex-1 bg-white items-center justify-center">
+       <ActivityIndicator size="large" color="#4f46e5" />
+       <Text className="mt-4 text-slate-500">Loading federated module...</Text>
+    </View>
+  );
+}`,
+
+  indexJs: `import "expo-router/entry";`
+};

package/src/client/index.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, SetStateAction } from 'react';
+
+export interface ESADEventEmitter {
+  set(key: string, value: any): void;
+  get(key: string): any;
+  subscribe(key: string, callback: (value: any) => void): () => void;
+}
+
+export const ESADState: ESADEventEmitter;
+
+export function useESADState<T>(key: string, initialValue?: T): [T, Dispatch<SetStateAction<T>>];

package/src/plugin/index.d.ts

@@ -0,0 +1,9 @@
+import * as Rspack from '@rspack/core';
+
+export interface ESADPluginOptions {
+  type: 'host' | 'module';
+  name?: string;
+  cdnUrl?: string;
+}
+
+export function withESAD(config: Rspack.Configuration, options: ESADPluginOptions): Rspack.Configuration;