@codemoreira/esad 1.2.4 → 1.2.6

package/bin/esad.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { program } = require('commander');
 const pkg = require('../package.json');

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "@codemoreira/esad",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "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/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;

package/src/plugin/index.js

@@ -1,41 +1,126 @@
+const path = require('node:path');
+const fs = require('node:fs');
 const Repack = require('@callstack/repack');
+const { ExpoModulesPlugin } = require('@callstack/repack-plugin-expo-modules');
+const { ProvidePlugin, DefinePlugin } = require('@rspack/core');
 
 /**
  * ESAD Re.Pack Plugin Wrapper
- * Abstracts away the boilerplate of Module Federation for SuperApps.
+ * Abstracts away the boilerplate of Module Federation and SDK integration for SuperApps.
  * 
+ * @param {Object} env Rspack environment
  * @param {Object} options 
  * @param {string} options.type 'host' | 'module'
  * @param {string} options.id Unique module or host ID
+ * @param {string} options.dirname Base directory (__dirname)
+ * @param {Object} [options.shared] Additional shared dependencies
+ * @param {Object} [options.exposes] Modules to expose (for modules)
+ * @param {Object} [options.remotes] Remote modules (for host)
  */
-function withESAD(options) {
-  return (env) => {
-    // In a real scenario, we merge heavily with Repack.getTemplateConfig here
-    console.log(`[ESAD Plugin] Applying Zero-Config Re.Pack profile for ${options.type.toUpperCase()}: ${options.id}`);
-    
-    // Ensure the esad state library is ALWAYS shared
-    const sharedConfig = {
-      react: { singleton: true, eager: options.type === 'host' },
-      'react-native': { singleton: true, eager: options.type === 'host' },
-      'esad/client': { singleton: true, eager: true } // Crucial for Global State
-    };
+function withESAD(env, options) {
+  const isDev = env.dev !== false;
+  const dirname = options.dirname;
+  const pkgPath = path.resolve(dirname, 'package.json');
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  const id = options.id.replace(/-/g, '_');
 
-    return {
-      // Configuration abstraction
-      plugins: [
-        new Repack.plugins.ModuleFederationPlugin({
-          name: options.id.replace(/-/g, '_'),
-          shared: sharedConfig,
-          // If type is module, also configure exposes
-          ...(options.type === 'module' && {
-            exposes: {
-              './App': './src/App'
-            }
-          })
-        })
-      ]
-    };
+  console.log(`[ESAD] Applying Mega-Zero-Config profile for ${options.type.toUpperCase()}: ${id}`);
+
+  const config = {
+    context: dirname,
+    entry: options.entry || './index.js',
+    resolve: {
+      ...Repack.getResolveOptions(),
+      alias: {
+        '@': 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'),
+        '@module-federation/sdk': path.resolve(dirname, 'node_modules/@module-federation/sdk'),
+        
+        // ESAD SDK Aliases (Zero-Config)
+        '@codemoreira/esad/client': path.resolve(dirname, 'node_modules/@codemoreira/esad/src/client/index.js'),
+        
+        ...Repack.getResolveOptions().alias,
+        ...options.alias,
+      }
+    },
+    module: {
+      rules: [
+        {
+          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.getAssetTransformRules(),
+      ],
+    },
+    plugins: [
+      new ProvidePlugin({
+        process: 'process/browser',
+      }),
+      new DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
+        '__DEV__': JSON.stringify(isDev),
+      }),
+      new ExpoModulesPlugin(),
+      new Repack.RepackPlugin(),
+      new Repack.plugins.ModuleFederationPluginV2({
+        name: id,
+        filename: `${id}.container.js.bundle`,
+        remotes: options.remotes || {},
+        exposes: options.exposes || {},
+        dts: false,
+        dev: isDev,
+        shared: {
+          'react': { singleton: true, eager: true, requiredVersion: pkg.dependencies.react },
+          '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'] },
+          '@codemoreira/esad': { singleton: true, eager: true },
+          ...options.shared
+        }
+      })
+    ],
   };
+
+  // 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;
 }
 
 module.exports = { withESAD };