@granite-js/micro-frontend 2.0.1 → 2.1.0

package/src/host/pendingHostComponentStore.ts

@@ -14,6 +14,7 @@ import type {
   ResolvedPendingHostComponent,
   ValidateParams,
 } from './types';
+import { getMicroFrontendGlobalContext, MicroFrontendGlobalContextCompatibilityError } from '../runtime/globalContext';
 
 interface PendingHostComponentRouteEntry {
   readonly id: string;
@@ -40,34 +41,54 @@ interface PendingHostComponentStore {
   version: number;
 }
 
-interface GlobalWithPendingHostComponentStore {
-  __graniteMicroFrontendPendingHostComponentStore?: PendingHostComponentStore;
-  hideSharedPendingHostComponent?: () => void;
-}
-
-function getGlobalObject() {
-  return globalThis as typeof globalThis & GlobalWithPendingHostComponentStore;
-}
+const PENDING_STORE_KEY = 'pendingHostComponentStore';
+const HIDE_SHARED_PENDING_HOST_COMPONENT_KEY = 'hideSharedPendingHostComponent';
 
-function getPendingHostComponentStore() {
-  const globalObject = getGlobalObject();
+function getPendingHostComponentStore(): PendingHostComponentStore {
+  const context = getMicroFrontendGlobalContext();
+  const descriptor = Reflect.getOwnPropertyDescriptor(context, PENDING_STORE_KEY);
+  if (descriptor != null) {
+    if (!isPendingHostComponentStore(descriptor.value)) {
+      throw new MicroFrontendGlobalContextCompatibilityError('canonical-global-is-not-adoptable');
+    }
+    return descriptor.value;
+  }
 
-  if (globalObject.__graniteMicroFrontendPendingHostComponentStore == null) {
-    globalObject.__graniteMicroFrontendPendingHostComponentStore = {
-      entries: [],
-      hidden: false,
-      listeners: new Set(),
-      version: 0,
-    };
+  const store = createPendingHostComponentStore();
+
+  if (
+    !Reflect.defineProperty(context, PENDING_STORE_KEY, {
+      configurable: true,
+      enumerable: false,
+      value: store,
+      writable: true,
+    })
+  ) {
+    throw new MicroFrontendGlobalContextCompatibilityError('canonical-global-is-not-adoptable');
   }
 
-  return globalObject.__graniteMicroFrontendPendingHostComponentStore;
+  return store;
+}
+
+function createPendingHostComponentStore(): PendingHostComponentStore {
+  return { entries: [], hidden: false, listeners: new Set(), version: 0 };
+}
+
+function isPendingHostComponentStore(value: unknown): value is PendingHostComponentStore {
+  return (
+    typeof value === 'object' &&
+    value != null &&
+    Array.isArray(Reflect.get(value, 'entries')) &&
+    typeof Reflect.get(value, 'hidden') === 'boolean' &&
+    Reflect.get(value, 'listeners') instanceof Set &&
+    typeof Reflect.get(value, 'version') === 'number'
+  );
 }
 
 function emitPendingHostComponentStoreChange() {
   const store = getPendingHostComponentStore();
   store.version += 1;
-  store.listeners.forEach(listener => listener());
+  store.listeners.forEach((listener) => listener());
 }
 
 export function subscribePendingHostComponentStore(listener: () => void) {
@@ -99,8 +120,11 @@ function setPendingHostComponentHidden(hidden: boolean) {
 export function hidePendingHostComponent() {
   setPendingHostComponentHidden(true);
 
-  const hideSharedPendingHostComponent = getGlobalObject().hideSharedPendingHostComponent;
-  if (typeof hideSharedPendingHostComponent === 'function' && hideSharedPendingHostComponent !== hidePendingHostComponent) {
+  const hideSharedPendingHostComponent = Reflect.get(globalThis, HIDE_SHARED_PENDING_HOST_COMPONENT_KEY);
+  if (
+    typeof hideSharedPendingHostComponent === 'function' &&
+    hideSharedPendingHostComponent !== hidePendingHostComponent
+  ) {
     hideSharedPendingHostComponent();
   }
 }
@@ -110,12 +134,13 @@ export function resetPendingHostComponent() {
 }
 
 export function installPendingHostComponentBridge() {
-  getGlobalObject().hideSharedPendingHostComponent = hidePendingHostComponent;
+  Reflect.set(globalThis, HIDE_SHARED_PENDING_HOST_COMPONENT_KEY, hidePendingHostComponent);
 }
 
-export function registerPendingHostComponentRoute<
-  TParams extends Readonly<object> | undefined = undefined,
->(routePath: string, options: RegisterPendingHostComponentRouteOptions<TParams>) {
+export function registerPendingHostComponentRoute<TParams extends Readonly<object> | undefined = undefined>(
+  routePath: string,
+  options: RegisterPendingHostComponentRouteOptions<TParams>
+) {
   const store = getPendingHostComponentStore();
   const normalizedRoutePath = normalizeRoutePath(routePath);
   const appName = normalizePendingHostComponentAppName(options.app.name);
@@ -130,7 +155,7 @@ export function registerPendingHostComponentRoute<
     parserParams: options.parserParams,
     validateParams: options.validateParams,
   };
-  const existingIndex = store.entries.findIndex(item => item.id === id);
+  const existingIndex = store.entries.findIndex((item) => item.id === id);
 
   if (existingIndex >= 0) {
     store.entries[existingIndex] = entry;
@@ -144,7 +169,7 @@ export function registerPendingHostComponentRoute<
 export function removePendingHostComponentRoutes(appName: string) {
   const store = getPendingHostComponentStore();
   const normalizedAppName = normalizePendingHostComponentAppName(appName);
-  const remainingEntries = store.entries.filter(entry => entry.appName !== normalizedAppName);
+  const remainingEntries = store.entries.filter((entry) => entry.appName !== normalizedAppName);
 
   if (remainingEntries.length === store.entries.length) {
     return;
@@ -154,13 +179,17 @@ export function removePendingHostComponentRoutes(appName: string) {
   emitPendingHostComponentStoreChange();
 }
 
-export function resolvePendingHostComponent(request: PendingHostComponentRouteRequest | string): ResolvedPendingHostComponent | null {
+export function resolvePendingHostComponent(
+  request: PendingHostComponentRouteRequest | string
+): ResolvedPendingHostComponent | null {
   const matched = typeof request === 'string' ? findRouteByUrl(request) : findRouteByRequest(request);
 
   return resolveMatchedPendingHostComponent(matched);
 }
 
-function resolveMatchedPendingHostComponent(matched: MatchedPendingHostComponentRoute | null): ResolvedPendingHostComponent | null {
+function resolveMatchedPendingHostComponent(
+  matched: MatchedPendingHostComponentRoute | null
+): ResolvedPendingHostComponent | null {
   if (matched == null) {
     return null;
   }

package/src/index.ts

@@ -36,6 +36,7 @@ export {
 export type { MicroFrontendSession, MicroFrontendSessionProviderProps } from './session/MicroFrontendSessionContext';
 export { useMicroFrontendSessions } from './session/useMicroFrontendSessions';
 export type { MicroFrontendSessionState } from './session/useMicroFrontendSessions';
+export type { AppDisposeCallback, MicroFrontendRuntimeContext } from './runtime/registry';
 export { default as Portal } from './specs/PortalViewNativeComponent';
 export type {
   AppRequest,

package/src/plugin/disposeBabelPlugin.ts

@@ -0,0 +1,51 @@
+import type { PluginObj } from '@babel/core';
+import type * as BabelTypes from '@babel/types';
+
+export interface DisposeOwnershipPluginOptions {
+  appName?: string;
+}
+
+export function injectDisposeAppName(
+  { types: babelTypes }: { types: typeof BabelTypes },
+  options: DisposeOwnershipPluginOptions
+): PluginObj {
+  return {
+    name: 'inject-micro-frontend-dispose-app-name',
+    visitor: {
+      CallExpression(path) {
+        if (options.appName == null || path.node.arguments.length !== 1) {
+          return;
+        }
+
+        const runtimeIdentifier = getRuntimeIdentifier(path.node.callee, babelTypes);
+        if (runtimeIdentifier == null || path.scope.getBinding(runtimeIdentifier) != null) {
+          return;
+        }
+
+        path.node.arguments.unshift(babelTypes.stringLiteral(options.appName));
+      },
+    },
+  };
+}
+
+function getRuntimeIdentifier(
+  callee: BabelTypes.Expression | BabelTypes.V8IntrinsicIdentifier,
+  babelTypes: typeof BabelTypes
+): string | null {
+  // - `global.__MICRO_FRONTEND__.dispose()`
+  // - `globalThis.__MICRO_FRONTEND__.dispose()`
+  if (
+    !babelTypes.isMemberExpression(callee) ||
+    callee.computed ||
+    !babelTypes.isIdentifier(callee.property, { name: 'dispose' }) ||
+    !babelTypes.isMemberExpression(callee.object) ||
+    callee.object.computed ||
+    !babelTypes.isIdentifier(callee.object.property, { name: '__MICRO_FRONTEND__' }) ||
+    (!babelTypes.isIdentifier(callee.object.object, { name: 'global' }) &&
+      !babelTypes.isIdentifier(callee.object.object, { name: 'globalThis' }))
+  ) {
+    return null;
+  }
+
+  return callee.object.object.name;
+}

package/src/plugin/disposeTransform.ts

@@ -0,0 +1,43 @@
+import * as babel from '@babel/core';
+import { injectDisposeAppName, type DisposeOwnershipPluginOptions } from './disposeBabelPlugin';
+
+export function shouldTransformDispose(code: string): boolean {
+  return code.includes('globalThis.__MICRO_FRONTEND__.dispose') || code.includes('global.__MICRO_FRONTEND__.dispose');
+}
+
+export function transformDisposeOwnership(id: string, code: string, options: DisposeOwnershipPluginOptions): string {
+  if (options.appName == null || !shouldTransformDispose(code)) {
+    return code;
+  }
+
+  return (
+    babel.transformSync(code, {
+      ast: false,
+      babelrc: false,
+      configFile: false,
+      filename: id,
+      parserOpts: {
+        plugins: getParserPlugins(id),
+        sourceType: 'unambiguous',
+      },
+      plugins: [[injectDisposeAppName, options]],
+      retainLines: true,
+    })?.code ?? code
+  );
+}
+
+function getParserPlugins(id: string): babel.ParserOptions['plugins'] {
+  const plugins: babel.ParserOptions['plugins'] = [];
+
+  if (/\.[cm]?tsx?$/.test(id)) {
+    plugins.push('typescript');
+  } else if (/\.[cm]?jsx?$/.test(id)) {
+    plugins.push('flow');
+  }
+
+  if (/\.[cm]?[jt]sx$/.test(id)) {
+    plugins.push('jsx');
+  }
+
+  return plugins;
+}

package/src/plugin/globalContextScript.ts

@@ -0,0 +1,118 @@
+export const globalContextScript = String.raw`
+(function bootstrapMicroFrontendGlobal(globalObject) {
+  var canonicalKey = '__MICRO_FRONTEND__';
+  var instancesKey = '__INSTANCES__';
+  var sharedKey = '__SHARED__';
+  var containersKey = '__CONTAINERS__';
+
+  function failure(reason) {
+    return new Error('Cannot establish the micro-frontend global context: ' + reason);
+  }
+
+  function isRecord(value) {
+    return typeof value === 'object' && value != null && !Array.isArray(value);
+  }
+
+  function hasKeysInOrder(value, expectedKeys) {
+    var actualKeys = Object.keys(value);
+    return actualKeys.length === expectedKeys.length && actualKeys.every(function (key, index) {
+      return key === expectedKeys[index];
+    });
+  }
+
+  function hasExactKeySet(value, expectedKeys) {
+    var actualKeys = Object.keys(value);
+    return actualKeys.length === expectedKeys.length && expectedKeys.every(function (key) {
+      return actualKeys.indexOf(key) !== -1;
+    });
+  }
+
+  function isCanonicalContext(value) {
+    return isRecord(value) &&
+      hasKeysInOrder(value, [instancesKey, sharedKey, containersKey]) &&
+      Array.isArray(value[instancesKey]) &&
+      isRecord(value[sharedKey]) &&
+      isRecord(value[containersKey]);
+  }
+
+  function isLegacyContext(value) {
+    return isRecord(value) &&
+      hasExactKeySet(value, [instancesKey, sharedKey]) &&
+      Array.isArray(value[instancesKey]) &&
+      isRecord(value[sharedKey]);
+  }
+
+  function restoreProperty(target, key, descriptor) {
+    var current = Object.getOwnPropertyDescriptor(target, key) || {};
+    var previous = descriptor || {};
+    var currentKeys = Object.keys(current);
+    var descriptorsMatch = currentKeys.length === Object.keys(previous).length && currentKeys.every(function (property) {
+      return Object.is(Reflect.get(current, property), Reflect.get(previous, property));
+    });
+    if (descriptorsMatch) {
+      return;
+    }
+    if (!(descriptor == null ? Reflect.deleteProperty(target, key) : Reflect.defineProperty(target, key, descriptor))) {
+      throw failure('canonical-global-is-not-adoptable');
+    }
+  }
+
+  var canonicalValue = globalObject[canonicalKey];
+  if (canonicalValue != null && !isCanonicalContext(canonicalValue) && !isLegacyContext(canonicalValue)) {
+    throw failure('canonical-global-is-not-adoptable');
+  }
+  if (isCanonicalContext(canonicalValue)) {
+    return;
+  }
+
+  var canonicalDescriptor = Object.getOwnPropertyDescriptor(globalObject, canonicalKey);
+  var legacyHasCanonicalOrder = isLegacyContext(canonicalValue) &&
+    hasKeysInOrder(canonicalValue, [instancesKey, sharedKey]);
+  if (canonicalDescriptor == null && !Object.isExtensible(globalObject)) {
+    throw failure('global-object-is-not-extensible');
+  }
+  if (canonicalDescriptor != null && !legacyHasCanonicalOrder && canonicalDescriptor.configurable !== true) {
+    throw failure('canonical-global-is-locked');
+  }
+
+  if (legacyHasCanonicalOrder) {
+    var containersDescriptor = Object.getOwnPropertyDescriptor(canonicalValue, containersKey);
+    if (!Object.isExtensible(canonicalValue)) {
+      throw failure('canonical-global-is-not-adoptable');
+    }
+    try {
+      if (!Reflect.defineProperty(canonicalValue, containersKey, {
+        configurable: true,
+        enumerable: true,
+        value: {},
+        writable: true,
+      }) || !isCanonicalContext(canonicalValue)) {
+        throw failure('canonical-global-is-not-adoptable');
+      }
+      return;
+    } catch (error) {
+      restoreProperty(canonicalValue, containersKey, containersDescriptor);
+      throw error;
+    }
+  }
+
+  var context = {
+    __INSTANCES__: canonicalValue == null ? [] : canonicalValue[instancesKey],
+    __SHARED__: canonicalValue == null ? {} : canonicalValue[sharedKey],
+    __CONTAINERS__: {},
+  };
+  try {
+    if (!Reflect.defineProperty(globalObject, canonicalKey, {
+      configurable: true,
+      enumerable: true,
+      value: context,
+      writable: true,
+    })) {
+      throw failure('canonical-global-is-not-adoptable');
+    }
+  } catch (error) {
+    restoreProperty(globalObject, canonicalKey, canonicalDescriptor);
+    throw error;
+  }
+})(global);
+`;

package/src/plugin/microFrontendPlugin.ts

@@ -2,6 +2,8 @@ import * as fs from 'fs';
 import * as path from 'path';
 import type { GranitePluginCore } from '@granite-js/plugin-core';
 import { prepareLocalDirectory } from '@granite-js/utils';
+import type { DisposeOwnershipPluginOptions } from './disposeBabelPlugin';
+import { transformDisposeOwnership } from './disposeTransform';
 import { intoShared } from './intoShared';
 import { getPreludeConfig } from './prelude';
 import { createSharedResolverConfig } from './resolver';
@@ -15,11 +17,16 @@ export async function microFrontend(options: MicroFrontendPluginOptions = {}): P
   };
   const nonEagerEntries = Object.entries(shared ?? {}).filter(([, config]) => config.eager !== true);
   const localDirectory = prepareLocalDirectory(process.cwd());
-  const preludePath = path.join(localDirectory, 'micro-frontend-runtime.js');
+  // Keep this path distinct from @granite-js/plugin-micro-frontend's generated prelude.
+  // Both plugins can coexist while consumers migrate, and sharing a path makes the
+  // later plugin overwrite the earlier plugin's runtime registrations.
+  const preludePath = path.join(localDirectory, 'granite-micro-frontend-runtime.js');
   const prelude = getPreludeConfig(normalizedOptions);
   const resolver = createSharedResolverConfig(nonEagerEntries);
+  const disposeOwnershipOptions: DisposeOwnershipPluginOptions = {};
 
   function writePrelude(appName?: string) {
+    disposeOwnershipOptions.appName = appName;
     const config = getPreludeConfig(normalizedOptions, appName);
     fs.writeFileSync(preludePath, config.preludeScript, 'utf8');
   }
@@ -48,6 +55,11 @@ export async function microFrontend(options: MicroFrontendPluginOptions = {}): P
           }
         : undefined,
       resolver,
+      transformer: {
+        transformSync(id, code) {
+          return transformDisposeOwnership(id, code, disposeOwnershipOptions);
+        },
+      },
       esbuild: {
         prelude: [preludePath],
         banner: { js: prelude.banner },

package/src/plugin/prelude.ts

@@ -1,15 +1,14 @@
 import path from 'path';
+import { globalContextScript } from './globalContextScript';
 import type { MicroFrontendPluginOptions } from './types';
+import { CONTAINER_PAIRING_KEY } from '../runtime/containerPairing';
 
 export interface MicroFrontendPreludeConfig {
   readonly banner: string;
   readonly preludeScript: string;
 }
 
-export function getPreludeConfig(
-  options: MicroFrontendPluginOptions,
-  appName?: string
-): MicroFrontendPreludeConfig {
+export function getPreludeConfig(options: MicroFrontendPluginOptions, appName?: string): MicroFrontendPreludeConfig {
   const eagerSharedModules = Object.entries(options.shared ?? {}).filter(
     ([, config]) => !Array.isArray(options.shared) && config.eager === true
   );
@@ -32,36 +31,177 @@ export function getPreludeConfig(
 
   return {
     banner: [
-      'global._graniteMicroFrontend = global._graniteMicroFrontend || {',
-      '  containers: {},',
-      '  sharedModules: {},',
-      '};',
+      globalContextScript,
+      '(function installMicroFrontendLifecycle(context) {',
+      '  const callbacksDescriptor = Object.getOwnPropertyDescriptor(context, "disposeCallbacksByApp");',
+      '  const disposeDescriptor = Object.getOwnPropertyDescriptor(context, "dispose");',
+      '  const disposeCallbacksByApp = callbacksDescriptor == null ? {} : callbacksDescriptor.value;',
+      '  if (typeof disposeCallbacksByApp !== "object" || disposeCallbacksByApp == null || Array.isArray(disposeCallbacksByApp)) {',
+      '    throw new Error("Cannot install micro-frontend lifecycle: invalid-dispose-callback-registry");',
+      '  }',
+      '  const dispose = disposeDescriptor == null ? function dispose(appName, callback) {',
+      '  if (typeof appName !== "string" || typeof callback !== "function") {',
+      '    throw new Error("dispose() must be compiled with the microFrontend plugin");',
+      '  }',
+      '  const callbacks = disposeCallbacksByApp[appName] ||= new Set();',
+      '  callbacks.add(callback);',
+      '  let isRegistered = true;',
+      '  return function unregisterDispose() {',
+      '    if (!isRegistered) { return; }',
+      '    isRegistered = false;',
+      '    callbacks.delete(callback);',
+      '  };',
+      '  } : disposeDescriptor.value;',
+      '  if (typeof dispose !== "function") {',
+      '    throw new Error("Cannot install micro-frontend lifecycle: invalid-dispose-registrar");',
+      '  }',
+      '  try {',
+      '    if (!Reflect.defineProperty(context, "disposeCallbacksByApp", {',
+      '      configurable: true, enumerable: false, value: disposeCallbacksByApp, writable: true,',
+      '    }) || !Reflect.defineProperty(context, "dispose", {',
+      '      configurable: true, enumerable: false, value: dispose, writable: true,',
+      '    })) {',
+      '      throw new Error("Cannot install micro-frontend lifecycle: canonical-context-is-locked");',
+      '    }',
+      '  } catch (error) {',
+      '    if (callbacksDescriptor == null) {',
+      '      Reflect.deleteProperty(context, "disposeCallbacksByApp");',
+      '    } else {',
+      '      Reflect.defineProperty(context, "disposeCallbacksByApp", callbacksDescriptor);',
+      '    }',
+      '    if (disposeDescriptor == null) {',
+      '      Reflect.deleteProperty(context, "dispose");',
+      '    } else {',
+      '      Reflect.defineProperty(context, "dispose", disposeDescriptor);',
+      '    }',
+      '    throw error;',
+      '  }',
+      '})(global.__MICRO_FRONTEND__);',
     ].join('\n'),
     preludeScript: [
+      `const __containerPairSymbol = Symbol.for(${JSON.stringify(CONTAINER_PAIRING_KEY)});`,
+      'const __legacyContainers = new WeakMap();',
       'function createContainer(appName, config) {',
-      '  const containers = global._graniteMicroFrontend.containers;',
-      '  if (containers[appName] != null) {',
-      '    throw new Error(`App container \'${appName}\' is already registered`);',
+      '  const context = global.__MICRO_FRONTEND__;',
+      '  const containers = context.__CONTAINERS__;',
+      '  const instances = context.__INSTANCES__;',
+      '  if (containers[appName] != null || typeof instances[appName] === "number") {',
+      "    throw new Error(`App container '${appName}' is already registered`);",
+      '  }',
+      '  if (!Object.isExtensible(containers) || !Object.isExtensible(instances)) {',
+      '    throw new Error("Cannot establish the micro-frontend global context: registry-is-not-extensible");',
+      '  }',
+      '  const modernContainer = { appName, config, exposedModules: {} };',
+      '  const legacyContainer = { name: appName, config, exposeMap: {} };',
+      '  try {',
+      '    if (!Reflect.defineProperty(instances, appName, {',
+      '      configurable: true, enumerable: false, value: instances.length, writable: false,',
+      '    })) {',
+      '      throw new Error("Cannot establish the micro-frontend global context: registry-is-not-extensible");',
+      '    }',
+      '    instances.push(legacyContainer);',
+      '    if (!Reflect.set(containers, appName, modernContainer)) {',
+      '      throw new Error("Cannot establish the micro-frontend global context: registry-is-not-extensible");',
+      '    }',
+      '    if (!Reflect.defineProperty(modernContainer, __containerPairSymbol, {',
+      '      configurable: true, enumerable: false, value: legacyContainer, writable: false,',
+      '    }) || !Reflect.defineProperty(legacyContainer, __containerPairSymbol, {',
+      '      configurable: true, enumerable: false, value: modernContainer, writable: false,',
+      '    })) {',
+      '      throw new Error("Cannot establish the micro-frontend global context: registry-is-not-extensible");',
+      '    }',
+      '  } catch (error) {',
+      '    if (Object.is(instances[instances.length - 1], legacyContainer)) {',
+      '      instances.pop();',
+      '    }',
+      '    Reflect.deleteProperty(instances, appName);',
+      '    Reflect.deleteProperty(containers, appName);',
+      '    Reflect.deleteProperty(modernContainer, __containerPairSymbol);',
+      '    Reflect.deleteProperty(legacyContainer, __containerPairSymbol);',
+      '    throw error;',
       '  }',
-      '  const container = { appName, config, exposedModules: {} };',
-      '  containers[appName] = container;',
-      '  return container;',
+      '  __legacyContainers.set(modernContainer, legacyContainer);',
+      '  return modernContainer;',
       '}',
       'function exposeModule(container, exposedModule, moduleValue) {',
       "  const normalizedModule = exposedModule.startsWith('./') ? exposedModule : `./${exposedModule}`;",
-      '  if (container.exposedModules[normalizedModule] != null) {',
-      '    throw new Error(`Exposed module \'${normalizedModule}\' is already registered in app container \'${container.appName}\'`);',
+      "  const legacyModule = exposedModule.startsWith('./') ? exposedModule.slice(2) : exposedModule;",
+      '  const legacyContainer = __legacyContainers.get(container);',
+      '  if (Reflect.has(container.exposedModules, normalizedModule) ||',
+      '      (legacyContainer != null && Reflect.has(legacyContainer.exposeMap, legacyModule))) {',
+      "    throw new Error(`Exposed module '${normalizedModule}' is already registered in app container '${container.appName}'`);",
+      '  }',
+      '  const ownsModernContainer = Object.is(',
+      '    global.__MICRO_FRONTEND__.__CONTAINERS__[container.appName],',
+      '    container',
+      '  );',
+      '  let legacyModuleValue = moduleValue;',
+      '  if (legacyContainer != null &&',
+      '      ((typeof moduleValue === "object" && moduleValue != null) || typeof moduleValue === "function") &&',
+      '      moduleValue.__esModule !== true) {',
+      '    legacyModuleValue = typeof moduleValue === "function"',
+      '      ? function (...args) { return Reflect.apply(moduleValue, this, args); }',
+      '      : {};',
+      '    for (const exportName of Reflect.ownKeys(moduleValue)) {',
+      '      if (exportName === "__esModule" || exportName === "default") {',
+      '        continue;',
+      '      }',
+      '      const sourceDescriptor = Reflect.getOwnPropertyDescriptor(moduleValue, exportName);',
+      '      const facadeDescriptor = Reflect.getOwnPropertyDescriptor(legacyModuleValue, exportName);',
+      '      if (sourceDescriptor == null || (facadeDescriptor != null && facadeDescriptor.configurable === false)) {',
+      '        // Callable facades keep intrinsic non-configurable slots such as prototype.',
+      '        continue;',
+      '      }',
+      '      if (!Reflect.defineProperty(legacyModuleValue, exportName, {',
+      '        enumerable: sourceDescriptor.enumerable,',
+      '        get: function () { return Reflect.get(moduleValue, exportName); },',
+      '      })) {',
+      '        throw new Error("Cannot establish the micro-frontend global context: registry-is-not-extensible");',
+      '      }',
+      '    }',
+      '    const hasDefaultExport = Reflect.getOwnPropertyDescriptor(moduleValue, "default") != null;',
+      '    Object.defineProperties(legacyModuleValue, {',
+      '      __esModule: { value: true },',
+      '      default: {',
+      '        enumerable: true,',
+      '        get: hasDefaultExport',
+      '          ? function () { return Reflect.get(moduleValue, "default"); }',
+      '          : function () { return moduleValue; },',
+      '      },',
+      '    });',
+      '  }',
+      '  try {',
+      '    if (ownsModernContainer && !Reflect.set(container.exposedModules, normalizedModule, moduleValue)) {',
+      '      throw new Error("Cannot establish the micro-frontend global context: registry-is-not-extensible");',
+      '    }',
+      '    if (legacyContainer != null) {',
+      '      Object.defineProperty(legacyContainer.exposeMap, legacyModule, {',
+      '        configurable: true,',
+      '        enumerable: true,',
+      '        get: function () { return legacyModuleValue; },',
+      '      });',
+      '    }',
+      '  } catch (error) {',
+      '    if (ownsModernContainer) {',
+      '      Reflect.deleteProperty(container.exposedModules, normalizedModule);',
+      '    }',
+      '    if (legacyContainer != null) {',
+      '      Reflect.deleteProperty(legacyContainer.exposeMap, legacyModule);',
+      '    }',
+      '    throw error;',
       '  }',
-      '  container.exposedModules[normalizedModule] = moduleValue;',
       '}',
       'function registerShared(moduleName, moduleValue) {',
-      '  const sharedModules = global._graniteMicroFrontend.sharedModules;',
+      '  const sharedModules = global.__MICRO_FRONTEND__.__SHARED__;',
       '  const existingModule = sharedModules[moduleName];',
       '  if (existingModule != null) {',
-      '    if (Object.is(existingModule.get(), moduleValue)) {',
+      '    if (typeof existingModule === "object" &&',
+      '        typeof existingModule.get === "function" &&',
+      '        typeof existingModule.loaded === "boolean" &&',
+      '        Object.is(existingModule.get(), moduleValue)) {',
       '      return;',
       '    }',
-      '    throw new Error(`Shared module \'${moduleName}\' is already registered`);',
+      "    throw new Error(`Shared module '${moduleName}' is already registered`);",
       '  }',
       '  sharedModules[moduleName] = { get: () => moduleValue, loaded: true };',
       '}',

package/src/plugin/resolver.ts

@@ -24,7 +24,7 @@ export function createSharedResolverConfig(
                 return {
                   loader: 'js',
                   contents: [
-                    `var sharedModule = global._graniteMicroFrontend.sharedModules[${moduleName}];`,
+                    `var sharedModule = global.__MICRO_FRONTEND__.__SHARED__[${moduleName}];`,
                     'if (sharedModule == null) {',
                     `  throw new Error('Shared module ' + ${moduleName} + ' is not registered');`,
                     '}',