@granite-js/micro-frontend 2.0.0

package/src/session/MicroFrontendSessionContext.tsx

@@ -0,0 +1,45 @@
+import { VisibilityChangedProvider } from '@granite-js/react-native';
+import { createContext, useContext, useMemo, type ReactElement, type ReactNode } from 'react';
+
+export interface MicroFrontendSession {
+  readonly sessionId: string;
+}
+
+export interface MicroFrontendSessionProviderProps extends MicroFrontendSession {
+  readonly children: ReactNode;
+  readonly presentationVisibility: boolean;
+}
+
+const MicroFrontendSessionContext = createContext<MicroFrontendSession | null>(null);
+
+export class MissingMicroFrontendSessionError extends Error {
+  constructor() {
+    super('useMicroFrontendSession must be used inside MicroFrontendSessionProvider');
+    this.name = 'MissingMicroFrontendSessionError';
+  }
+}
+
+export function MicroFrontendSessionProvider(props: MicroFrontendSessionProviderProps): ReactElement {
+  const value = useMemo<MicroFrontendSession>(
+    () => ({
+      sessionId: props.sessionId,
+    }),
+    [props.sessionId]
+  );
+
+  return (
+    <MicroFrontendSessionContext.Provider value={value}>
+      <VisibilityChangedProvider isVisible={props.presentationVisibility}>
+        {props.children}
+      </VisibilityChangedProvider>
+    </MicroFrontendSessionContext.Provider>
+  );
+}
+
+export function useMicroFrontendSession(): MicroFrontendSession {
+  const session = useContext(MicroFrontendSessionContext);
+  if (session == null) {
+    throw new MissingMicroFrontendSessionError();
+  }
+  return session;
+}

package/src/session/useMicroFrontendSessions.ts

@@ -0,0 +1,73 @@
+import { useLayoutEffect, useReducer } from 'react';
+import {
+  installPendingHostComponentBridge,
+  resetPendingHostComponent,
+} from '../host/pendingHostComponentStore';
+import type {
+  MicroFrontendRuntimeApi,
+  MicroFrontendSessionEvent,
+} from '../types';
+
+export interface MicroFrontendSessionState {
+  readonly appName: string;
+  readonly sessionId: string;
+  readonly scheme: string;
+  readonly isVisible: boolean;
+}
+
+const INITIAL_SESSIONS: readonly MicroFrontendSessionState[] = [];
+
+function reduceMicroFrontendSessions(
+  sessions: readonly MicroFrontendSessionState[],
+  event: MicroFrontendSessionEvent
+): readonly MicroFrontendSessionState[] {
+  switch (event.name) {
+    case 'openApp':
+      return sessions.some(({ sessionId }) => sessionId === event.params.sessionId)
+        ? sessions
+        : [
+            ...sessions,
+            {
+              appName: event.params.appName,
+              sessionId: event.params.sessionId,
+              scheme: event.params.scheme,
+              isVisible: false,
+            },
+          ];
+    case 'closeApp':
+      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
+      );
+    default: {
+      const exhaustiveEvent: never = event;
+      return exhaustiveEvent;
+    }
+  }
+}
+
+export function useMicroFrontendSessions(
+  runtime: Pick<MicroFrontendRuntimeApi, 'onEvent'>
+): readonly MicroFrontendSessionState[] {
+  const [sessions, dispatch] = useReducer(
+    reduceMicroFrontendSessions,
+    INITIAL_SESSIONS
+  );
+
+  useLayoutEffect(() => {
+    installPendingHostComponentBridge();
+    const subscription = runtime.onEvent((event) => {
+      if (event.name === 'openApp') {
+        resetPendingHostComponent();
+      }
+      dispatch(event);
+    });
+
+    return () => subscription.remove();
+  }, [runtime]);
+
+  return sessions;
+}

package/src/specs/NativeGraniteMicroFrontendRuntime.ts

@@ -0,0 +1,44 @@
+import { type CodegenTypes, type TurboModule, TurboModuleRegistry } from 'react-native';
+
+export interface NativeMicroFrontendRuntimeEventParams {
+  readonly appName?: string;
+  readonly sessionId?: string;
+  readonly scheme?: string;
+  readonly isVisible?: boolean;
+}
+
+export interface NativeMicroFrontendRuntimeEvent {
+  readonly name: string;
+  readonly params: NativeMicroFrontendRuntimeEventParams;
+}
+
+export type EvaluateScriptRequest = Readonly<{
+  filePath: string;
+}>;
+
+export interface Spec extends TurboModule {
+  evaluateScript(request: EvaluateScriptRequest): Promise<void>;
+  startEventDelivery(): void;
+  readonly onEvent: CodegenTypes.EventEmitter<NativeMicroFrontendRuntimeEvent>;
+}
+
+let nativeModule: Spec | null = null;
+
+function getNativeModule() {
+  nativeModule ??= TurboModuleRegistry.getEnforcing<Spec>('GraniteMicroFrontendRuntime');
+  return nativeModule;
+}
+
+const NativeGraniteMicroFrontendRuntime: Spec = {
+  evaluateScript(request) {
+    return getNativeModule().evaluateScript(request);
+  },
+  startEventDelivery() {
+    getNativeModule().startEventDelivery();
+  },
+  onEvent(listener) {
+    return getNativeModule().onEvent(listener);
+  },
+};
+
+export default NativeGraniteMicroFrontendRuntime;

package/src/specs/PortalHostViewNativeComponent.ts

@@ -0,0 +1,9 @@
+import { codegenNativeComponent, type ViewProps } from "react-native";
+
+interface NativeProps extends ViewProps {
+  readonly name?: string;
+}
+
+export default codegenNativeComponent<NativeProps>("PortalHostView", {
+  interfaceOnly: true,
+});

package/src/specs/PortalViewNativeComponent.ts

@@ -0,0 +1,9 @@
+import { codegenNativeComponent, type ViewProps } from "react-native";
+
+interface NativeProps extends ViewProps {
+  readonly hostName: string;
+}
+
+export default codegenNativeComponent<NativeProps>("PortalView", {
+  interfaceOnly: true,
+});

package/src/types.ts

@@ -0,0 +1,55 @@
+export type AppRequest = `${string}/${string}`;
+
+export interface MicroFrontendBundleRequest {
+  readonly appName: string;
+}
+
+export interface MicroFrontendBundle {
+  readonly filePath: string;
+}
+
+export interface MicroFrontendAppProps {
+  readonly scheme: string;
+}
+
+export interface MicroFrontendAdapter {
+  readonly loadBundle: (request: MicroFrontendBundleRequest) => Promise<MicroFrontendBundle>;
+}
+
+export type MicroFrontendRuntimeEvent =
+  | {
+      readonly name: 'preloadApp';
+      readonly params: { readonly appName: string };
+    }
+  | {
+      readonly name: 'openApp';
+      readonly params: {
+        readonly sessionId: string;
+        readonly appName: string;
+        readonly scheme: string;
+      };
+    }
+  | {
+      readonly name: 'closeApp';
+      readonly params: { readonly sessionId: string };
+    }
+  | {
+      readonly name: 'sessionVisibilityChanged';
+      readonly params: {
+        readonly sessionId: string;
+        readonly isVisible: boolean;
+      };
+    };
+
+export type MicroFrontendSessionEvent = Exclude<MicroFrontendRuntimeEvent, { readonly name: 'preloadApp' }>;
+
+export interface MicroFrontendRuntimeEventSubscription {
+  readonly remove: () => void;
+}
+
+export interface MicroFrontendRuntimeApi {
+  readonly evaluateScript: (filePath: string) => Promise<void>;
+  readonly preloadApp: (appName: string) => Promise<void>;
+  readonly importApp: <TModule>(request: AppRequest) => Promise<TModule>;
+  readonly onEvent: (listener: (event: MicroFrontendSessionEvent) => void) => MicroFrontendRuntimeEventSubscription;
+}