@asteby/metacore-runtime-react 13.0.0 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @asteby/metacore-runtime-react
 
+## 13.1.0
+
+### Minor Changes
+
+- 8d9c602: AddonLoader carga remotes de federación ESM vía `import()` dinámico (fix "Cannot use import statement outside a module").
+
+  Los remotes built con Vite/@originjs `format:"esm"` (el estándar de `metacoreFederationShared`) son módulos ES que hacen `import` top-level y exportan `{ init, get }` — DEBEN cargarse como módulo. El `AddonLoader` los inyectaba como `<script>` clásico → el browser tiraba `Cannot use import statement outside a module` y la UI federada nunca cargaba. Ahora hace `import()` dinámico (vía `new Function` para que ningún bundler reescriba el import del URL externo) y usa el namespace del módulo como container; los remotes legacy "var"/window siguen soportados con fallback a `<script>` + `window[scope]`.
+
 ## 13.0.0
 
 ### Minor Changes

package/dist/addon-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"addon-loader.d.ts","sourceRoot":"","sources":["../src/addon-loader.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAGjE,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;QAClB,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;QAC3D,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KACrD;CACJ;AAED,MAAM,WAAW,gBAAgB;IAC7B,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+DAA+D;IAC/D,GAAG,EAAE,QAAQ,CAAA;IACb,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAC9B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAuCD,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,GAAG,EACH,MAAqB,EACrB,GAAG,EACH,QAAe,EACf,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,GACX,EAAE,gBAAgB,2CAsClB"}
+{"version":3,"file":"addon-loader.d.ts","sourceRoot":"","sources":["../src/addon-loader.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAGjE,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;QAClB,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;QAC3D,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KACrD;CACJ;AAED,MAAM,WAAW,gBAAgB;IAC7B,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+DAA+D;IAC/D,GAAG,EAAE,QAAQ,CAAA;IACb,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAC9B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAqFD,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,GAAG,EACH,MAAqB,EACrB,GAAG,EACH,QAAe,EACf,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,GACX,EAAE,gBAAgB,2CAoClB"}

package/dist/addon-loader.js

@@ -4,6 +4,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // addon's `register(api)` export with the AddonAPI injected by the host.
 import { useEffect, useRef, useState } from 'react';
 import { useDeclareAddonLayout } from './addon-layout-context';
+// Runtime dynamic import of an external URL. Wrapped in `new Function` so no
+// build tool (tsc here, Vite in the consuming host) tries to statically
+// analyse or rewrite the import — it stays a genuine runtime ESM fetch.
+const importModule = new Function('u', 'return import(u)');
 const loadedScripts = new Map();
 function loadScript(url, scope) {
     const key = `${scope}::${url}`;
@@ -22,15 +26,53 @@ function loadScript(url, scope) {
     loadedScripts.set(key, promise);
     return promise;
 }
-async function loadRemote(scope, module) {
+const esmContainers = new Map();
+// Resolve a federation container for the remote. Vite/@originjs remotes built
+// with `format:"esm"` (our standard) are ES modules that top-level `import`
+// their preload helper and export `{ init, get }` — they MUST be loaded as a
+// module (a classic <script> throws "Cannot use import statement outside a
+// module"), so we dynamic-import them and use the module namespace as the
+// container. Legacy "var"/window remotes (which assign `window[scope]`) are
+// still supported via the classic <script> fallback.
+async function resolveContainer(scope, url) {
+    const key = `${scope}::${url}`;
+    const cached = esmContainers.get(key);
+    if (cached)
+        return cached;
+    const p = (async () => {
+        try {
+            const mod = await importModule(url);
+            if (mod && typeof mod.init === 'function' && typeof mod.get === 'function') {
+                return mod;
+            }
+        }
+        catch {
+            // Not an importable module (legacy var-format remote) — fall back.
+        }
+        await loadScript(url, scope);
+        return window[scope];
+    })();
+    esmContainers.set(key, p);
+    p.catch(() => esmContainers.delete(key));
+    return p;
+}
+async function loadRemote(scope, url, module) {
     if (typeof window.__webpack_init_sharing__ === 'function') {
         await window.__webpack_init_sharing__('default');
     }
-    const container = window[scope];
-    if (!container)
-        throw new Error(`Addon container "${scope}" not found on window`);
-    if (typeof container.init === 'function' && window.__webpack_share_scopes__) {
-        await container.init(window.__webpack_share_scopes__.default);
+    const container = await resolveContainer(scope, url);
+    if (!container) {
+        throw new Error(`Addon container "${scope}" not found (neither ESM export nor window[scope])`);
+    }
+    if (typeof container.init === 'function') {
+        const shareScope = window.__webpack_share_scopes__?.default ??
+            (window.__METACORE_SHARE_SCOPE__ ??= {});
+        try {
+            await container.init(shareScope);
+        }
+        catch {
+            // Container already initialized (re-entrant load) — safe to ignore.
+        }
     }
     const factory = await container.get(module);
     return factory();
@@ -48,10 +90,7 @@ export function AddonLoader({ scope, url, module = './register', api, fallback =
         let cancelled = false;
         (async () => {
             try {
-                await loadScript(url, scope);
-                if (cancelled)
-                    return;
-                const mod = await loadRemote(scope, module);
+                const mod = await loadRemote(scope, url, module);
                 if (cancelled)
                     return;
                 if (!didRegister.current && typeof mod?.register === 'function') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "13.0.0",
+  "version": "13.1.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/addon-loader.tsx

@@ -43,6 +43,18 @@ export interface AddonLoaderProps {
     children?: React.ReactNode
 }
 
+interface FederationContainer {
+    init: (shareScope: unknown) => Promise<void>
+    get: (module: string) => Promise<() => any>
+}
+
+// Runtime dynamic import of an external URL. Wrapped in `new Function` so no
+// build tool (tsc here, Vite in the consuming host) tries to statically
+// analyse or rewrite the import — it stays a genuine runtime ESM fetch.
+const importModule = new Function('u', 'return import(u)') as (
+    u: string,
+) => Promise<Record<string, unknown>>
+
 const loadedScripts = new Map<string, Promise<void>>()
 
 function loadScript(url: string, scope: string): Promise<void> {
@@ -62,19 +74,53 @@ function loadScript(url: string, scope: string): Promise<void> {
     return promise
 }
 
-interface FederationContainer {
-    init: (shareScope: unknown) => Promise<void>
-    get: (module: string) => Promise<() => any>
+const esmContainers = new Map<string, Promise<FederationContainer | undefined>>()
+
+// Resolve a federation container for the remote. Vite/@originjs remotes built
+// with `format:"esm"` (our standard) are ES modules that top-level `import`
+// their preload helper and export `{ init, get }` — they MUST be loaded as a
+// module (a classic <script> throws "Cannot use import statement outside a
+// module"), so we dynamic-import them and use the module namespace as the
+// container. Legacy "var"/window remotes (which assign `window[scope]`) are
+// still supported via the classic <script> fallback.
+async function resolveContainer(scope: string, url: string): Promise<FederationContainer | undefined> {
+    const key = `${scope}::${url}`
+    const cached = esmContainers.get(key)
+    if (cached) return cached
+    const p = (async () => {
+        try {
+            const mod = await importModule(url)
+            if (mod && typeof mod.init === 'function' && typeof mod.get === 'function') {
+                return mod as unknown as FederationContainer
+            }
+        } catch {
+            // Not an importable module (legacy var-format remote) — fall back.
+        }
+        await loadScript(url, scope)
+        return (window as any)[scope] as FederationContainer | undefined
+    })()
+    esmContainers.set(key, p)
+    p.catch(() => esmContainers.delete(key))
+    return p
 }
 
-async function loadRemote(scope: string, module: string) {
+async function loadRemote(scope: string, url: string, module: string) {
     if (typeof window.__webpack_init_sharing__ === 'function') {
         await window.__webpack_init_sharing__('default')
     }
-    const container = window[scope] as FederationContainer | undefined
-    if (!container) throw new Error(`Addon container "${scope}" not found on window`)
-    if (typeof container.init === 'function' && window.__webpack_share_scopes__) {
-        await container.init(window.__webpack_share_scopes__.default)
+    const container = await resolveContainer(scope, url)
+    if (!container) {
+        throw new Error(`Addon container "${scope}" not found (neither ESM export nor window[scope])`)
+    }
+    if (typeof container.init === 'function') {
+        const shareScope =
+            window.__webpack_share_scopes__?.default ??
+            ((window as any).__METACORE_SHARE_SCOPE__ ??= {})
+        try {
+            await container.init(shareScope)
+        } catch {
+            // Container already initialized (re-entrant load) — safe to ignore.
+        }
     }
     const factory = await container.get(module)
     return factory()
@@ -105,9 +151,7 @@ export function AddonLoader({
         let cancelled = false
         ;(async () => {
             try {
-                await loadScript(url, scope)
-                if (cancelled) return
-                const mod = await loadRemote(scope, module)
+                const mod = await loadRemote(scope, url, module)
                 if (cancelled) return
                 if (!didRegister.current && typeof mod?.register === 'function') {
                     didRegister.current = true