@granite-js/micro-frontend 2.0.2 → 2.1.1

package/src/runtime/nativeComponentRegistryCompatibility.ts

@@ -0,0 +1,60 @@
+import { getMicroFrontendGlobalContext } from './globalContext';
+
+const NATIVE_COMPONENT_REGISTRY_MODULE = 'react-native/Libraries/NativeComponent/NativeComponentRegistry';
+const COMPATIBILITY_MARKER = Symbol.for('granite.microFrontend.nativeComponentRegistryCompatibility');
+
+export function installNativeComponentRegistryCompatibility(): void {
+  const sharedModules = getMicroFrontendGlobalContext().__SHARED__;
+  const sharedEntry = sharedModules[NATIVE_COMPONENT_REGISTRY_MODULE];
+  if (sharedEntry == null || Reflect.get(sharedEntry, COMPATIBILITY_MARKER) === true) {
+    return;
+  }
+
+  const nativeComponentRegistry = sharedEntry.get();
+  if (!isNativeComponentRegistry(nativeComponentRegistry)) {
+    return;
+  }
+
+  const compatibleRegistry = new Proxy(nativeComponentRegistry, {
+    get(target, property, receiver) {
+      if (property !== 'get') {
+        return Reflect.get(target, property, receiver);
+      }
+
+      return (...args: readonly unknown[]) => {
+        try {
+          return Reflect.apply(target.get, target, args);
+        } catch (error) {
+          const componentName = args[0];
+          if (typeof componentName === 'string' && isDuplicateNativeViewRegistration(error, componentName)) {
+            return componentName;
+          }
+          throw error;
+        }
+      };
+    },
+  });
+  const compatibleEntry = {
+    get: () => compatibleRegistry,
+    loaded: sharedEntry.loaded,
+  };
+  Reflect.defineProperty(compatibleEntry, COMPATIBILITY_MARKER, { value: true });
+  sharedModules[NATIVE_COMPONENT_REGISTRY_MODULE] = compatibleEntry;
+}
+
+function isNativeComponentRegistry(
+  value: unknown
+): value is { readonly get: (...args: readonly unknown[]) => unknown } {
+  return typeof value === 'object' && value != null && typeof Reflect.get(value, 'get') === 'function';
+}
+
+function isDuplicateNativeViewRegistration(error: unknown, componentName: string): boolean {
+  if (typeof error !== 'object' || error == null) {
+    return false;
+  }
+
+  const message = Reflect.get(error, 'message');
+  return (
+    typeof message === 'string' && message.endsWith(`Tried to register two views with the same name ${componentName}`)
+  );
+}

package/src/runtime/registry.ts

@@ -1,12 +1,10 @@
 import type { AppRequest } from '../types';
+import { createContainer, exposeModule, getContainer, getExposedModule, removeContainer } from './containerRegistry';
 import type { MicroFrontendModuleRegistry } from './createMicroFrontendRuntime';
-import {
-  AppContainerAlreadyRegisteredError,
-  ExposedModuleAlreadyRegisteredError,
-  ExposedModuleNotFoundError,
-  SharedModuleAlreadyRegisteredError,
-} from './errors';
+import { ExposedModuleNotFoundError, SharedModuleAlreadyRegisteredError } from './errors';
+import { getMicroFrontendGlobalContext, type MicroFrontendGlobalContext } from './globalContext';
 import { parseAppRequest } from './parseAppRequest';
+export { createContainer, exposeModule, getContainer, removeContainer };
 
 export interface SharedModuleConfig {
   readonly eager?: boolean;
@@ -24,6 +22,13 @@ export interface AppContainer {
   readonly exposedModules: Record<string, unknown>;
 }
 
+export type AppDisposeCallback = () => void | Promise<void>;
+
+export interface RegisterAppDispose {
+  (callback: AppDisposeCallback): () => void;
+  (appName: string, callback: AppDisposeCallback): () => void;
+}
+
 interface SharedModule {
   readonly get: () => unknown;
   readonly loaded: boolean;
@@ -31,55 +36,22 @@ interface SharedModule {
 
 export interface MicroFrontendRuntimeContext {
   readonly containers: Record<string, AppContainer>;
+  readonly dispose: RegisterAppDispose;
+  readonly disposeCallbacksByApp: Record<string, Set<AppDisposeCallback>>;
   readonly sharedModules: Record<string, SharedModule>;
 }
 
-declare global {
-  var _graniteMicroFrontend: MicroFrontendRuntimeContext | undefined;
-}
-
 export function getMicroFrontendRuntimeContext(): MicroFrontendRuntimeContext {
-  const existingContext = globalThis._graniteMicroFrontend;
-  if (existingContext != null) {
-    return existingContext;
-  }
-
-  const context: MicroFrontendRuntimeContext = {
-    containers: {},
-    sharedModules: {},
-  };
-  globalThis._graniteMicroFrontend = context;
+  const context = getMicroFrontendGlobalContext();
+  ensureRuntimeContext(context);
   return context;
 }
 
-export function createContainer(appName: string, config: AppContainerConfig = {}): AppContainer {
-  const containers = getMicroFrontendRuntimeContext().containers;
-  if (containers[appName] != null) {
-    throw new AppContainerAlreadyRegisteredError(appName);
-  }
-
-  const container: AppContainer = {
-    appName,
-    config,
-    exposedModules: {},
-  };
-  containers[appName] = container;
-  return container;
-}
-
-export function exposeModule(container: AppContainer, exposedModule: string, module: unknown): void {
-  const normalizedModule = normalizeExposedModule(exposedModule);
-  if (container.exposedModules[normalizedModule] != null) {
-    throw new ExposedModuleAlreadyRegisteredError(container.appName, normalizedModule);
-  }
-  container.exposedModules[normalizedModule] = module;
-}
-
 export function registerShared(moduleName: string, module: unknown): void {
-  const sharedModules = getMicroFrontendRuntimeContext().sharedModules;
+  const sharedModules = getMicroFrontendGlobalContext().__SHARED__;
   const existingModule = sharedModules[moduleName];
   if (existingModule != null) {
-    if (Object.is(existingModule.get(), module)) {
+    if (isSharedModule(existingModule) && Object.is(existingModule.get(), module)) {
       return;
     }
     throw new SharedModuleAlreadyRegisteredError(moduleName);
@@ -90,21 +62,22 @@ export function registerShared(moduleName: string, module: unknown): void {
   };
 }
 
-export function getContainer(appName: string): AppContainer | null {
-  return getMicroFrontendRuntimeContext().containers[appName] ?? null;
+function isSharedModule(value: unknown): value is SharedModule {
+  return (
+    typeof value === 'object' &&
+    value != null &&
+    typeof Reflect.get(value, 'get') === 'function' &&
+    typeof Reflect.get(value, 'loaded') === 'boolean'
+  );
 }
 
-export function removeContainer(appName: string): void {
-  const containers = getMicroFrontendRuntimeContext().containers;
-  const container = containers[appName];
-  if (container == null) {
+export async function disposeAppResources(appName: string): Promise<void> {
+  const disposeCallbacks = getMicroFrontendRuntimeContext().disposeCallbacksByApp[appName];
+  if (disposeCallbacks == null) {
     return;
   }
 
-  for (const exposedModule of Object.keys(container.exposedModules)) {
-    Reflect.deleteProperty(container.exposedModules, exposedModule);
-  }
-  Reflect.deleteProperty(containers, appName);
+  await runAppDisposeCallbacks(disposeCallbacks);
 }
 
 export function hasContainer(appName: string): boolean {
@@ -113,15 +86,135 @@ export function hasContainer(appName: string): boolean {
 
 export function importModule<TModule>(request: AppRequest): TModule {
   const { appName, exposedModule } = parseAppRequest(request);
-  const module = getContainer(appName)?.exposedModules[exposedModule];
+  const container = getContainer(appName);
+  const module = container == null ? null : getExposedModule(container, exposedModule);
   if (module == null) {
     throw new ExposedModuleNotFoundError(appName, exposedModule);
   }
   return module as TModule;
 }
 
-function normalizeExposedModule(exposedModule: string): string {
-  return exposedModule.startsWith('./') ? exposedModule : `./${exposedModule}`;
+function ensureRuntimeContext(
+  context: MicroFrontendGlobalContext
+): asserts context is MicroFrontendGlobalContext & MicroFrontendRuntimeContext {
+  const containers = context.__CONTAINERS__;
+  const sharedModules = context.__SHARED__;
+  const propertyDescriptors = new Map<PropertyKey, PropertyDescriptor | undefined>();
+  const runtimeProperties = {
+    containers,
+    dispose: isRegisterAppDispose(Reflect.get(context, 'dispose'))
+      ? Reflect.get(context, 'dispose')
+      : createRegisterAppDispose(),
+    disposeCallbacksByApp: isDisposeCallbackRegistry(Reflect.get(context, 'disposeCallbacksByApp'))
+      ? Reflect.get(context, 'disposeCallbacksByApp')
+      : {},
+    sharedModules,
+  } satisfies MicroFrontendRuntimeContext;
+
+  try {
+    for (const property of Reflect.ownKeys(runtimeProperties)) {
+      propertyDescriptors.set(property, Reflect.getOwnPropertyDescriptor(context, property));
+      const value = Reflect.get(runtimeProperties, property);
+      if (
+        !Reflect.defineProperty(context, property, {
+          configurable: true,
+          enumerable: false,
+          value,
+          writable: true,
+        })
+      ) {
+        throw new Error(`Cannot install micro-frontend runtime property '${String(property)}'`);
+      }
+    }
+  } catch (error) {
+    for (const [property, descriptor] of Array.from(propertyDescriptors).reverse()) {
+      if (descriptor == null) {
+        Reflect.deleteProperty(context, property);
+      } else {
+        Reflect.defineProperty(context, property, descriptor);
+      }
+    }
+    throw error;
+  }
+}
+
+function isObjectRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value != null && !Array.isArray(value);
+}
+
+function isRegisterAppDispose(value: unknown): value is RegisterAppDispose {
+  return typeof value === 'function';
+}
+
+function isDisposeCallbackRegistry(value: unknown): value is Record<string, Set<AppDisposeCallback>> {
+  return isObjectRecord(value) && Object.values(value).every(isDisposeCallbackSet);
+}
+
+function isDisposeCallbackSet(value: unknown): value is Set<AppDisposeCallback> {
+  return (
+    typeof value === 'object' &&
+    value != null &&
+    typeof Reflect.get(value, 'add') === 'function' &&
+    typeof Reflect.get(value, 'delete') === 'function' &&
+    typeof Reflect.get(value, 'has') === 'function' &&
+    typeof Reflect.get(value, Symbol.iterator) === 'function'
+  );
+}
+
+function createRegisterAppDispose(): RegisterAppDispose {
+  function dispose(callback: AppDisposeCallback): () => void;
+  function dispose(appName: string, callback: AppDisposeCallback): () => void;
+  function dispose(appNameOrCallback: string | AppDisposeCallback, callback?: AppDisposeCallback): () => void {
+    if (typeof appNameOrCallback !== 'string' || callback == null) {
+      throw new Error('dispose() must be compiled with the microFrontend plugin');
+    }
+    return registerAppDisposeCallback(getMicroFrontendRuntimeContext(), appNameOrCallback, callback);
+  }
+
+  return dispose;
+}
+
+function registerAppDisposeCallback(
+  context: MicroFrontendRuntimeContext,
+  appName: string,
+  callback: AppDisposeCallback
+): () => void {
+  if (typeof appName !== 'string' || typeof callback !== 'function') {
+    throw new Error('dispose() must be compiled with the microFrontend plugin');
+  }
+
+  const disposeCallbacks = (context.disposeCallbacksByApp[appName] ??= new Set());
+  disposeCallbacks.add(callback);
+  let isRegistered = true;
+
+  return () => {
+    if (!isRegistered) {
+      return;
+    }
+    isRegistered = false;
+    disposeCallbacks.delete(callback);
+  };
+}
+
+async function runAppDisposeCallbacks(disposeCallbacks: Set<AppDisposeCallback>): Promise<void> {
+  const callbacks = Array.from(disposeCallbacks).reverse();
+  let firstDisposeError: unknown;
+  let didDisposeFail = false;
+
+  for (const dispose of callbacks) {
+    try {
+      await dispose();
+    } catch (error) {
+      if (!didDisposeFail) {
+        firstDisposeError = error;
+        didDisposeFail = true;
+      }
+    }
+  }
+
+  if (didDisposeFail) {
+    throw firstDisposeError;
+  }
 }
 
 export const microFrontendModuleRegistry: MicroFrontendModuleRegistry = {

package/src/session/useMicroFrontendSessions.ts

@@ -1,12 +1,7 @@
-import { useLayoutEffect, useReducer } from 'react';
-import {
-  installPendingHostComponentBridge,
-  resetPendingHostComponent,
-} from '../host/pendingHostComponentStore';
-import type {
-  MicroFrontendRuntimeApi,
-  MicroFrontendSessionEvent,
-} from '../types';
+import { useEffect, useLayoutEffect, useReducer, useRef } from 'react';
+import { installPendingHostComponentBridge, resetPendingHostComponent } from '../host/pendingHostComponentStore';
+import { disposeAppResources } from '../runtime/registry';
+import type { MicroFrontendRuntimeApi, MicroFrontendSessionEvent } from '../types';
 
 export interface MicroFrontendSessionState {
   readonly appName: string;
@@ -38,9 +33,7 @@ function reduceMicroFrontendSessions(
       return sessions.filter(({ sessionId }) => sessionId !== event.params.sessionId);
     case 'sessionVisibilityChanged':
       return sessions.map((session) =>
-        session.sessionId === event.params.sessionId
-          ? { ...session, isVisible: event.params.isVisible }
-          : session
+        session.sessionId === event.params.sessionId ? { ...session, isVisible: event.params.isVisible } : session
       );
     default: {
       const exhaustiveEvent: never = event;
@@ -52,10 +45,27 @@ function reduceMicroFrontendSessions(
 export function useMicroFrontendSessions(
   runtime: Pick<MicroFrontendRuntimeApi, 'onEvent'>
 ): readonly MicroFrontendSessionState[] {
-  const [sessions, dispatch] = useReducer(
-    reduceMicroFrontendSessions,
-    INITIAL_SESSIONS
-  );
+  const [sessions, dispatch] = useReducer(reduceMicroFrontendSessions, INITIAL_SESSIONS);
+  const previousSessionsRef = useRef(sessions);
+
+  useEffect(() => {
+    const previousSessions = previousSessionsRef.current;
+    previousSessionsRef.current = sessions;
+    const activeSessionIds = new Set(sessions.map(({ sessionId }) => sessionId));
+    const activeAppNames = new Set(sessions.map(({ appName }) => appName));
+    const inactiveAppNames = new Set(
+      previousSessions
+        .filter(({ sessionId }) => !activeSessionIds.has(sessionId))
+        .map(({ appName }) => appName)
+        .filter((appName) => !activeAppNames.has(appName))
+    );
+
+    inactiveAppNames.forEach((appName) => {
+      void disposeAppResources(appName).catch((error) => {
+        console.error(`Failed to dispose micro-frontend app resources for '${appName}'`, error);
+      });
+    });
+  }, [sessions]);
 
   useLayoutEffect(() => {
     installPendingHostComponentBridge();