@aprovan/patchwork 0.1.0

package/packages/compiler/src/mount/bridge.ts

@@ -0,0 +1,399 @@
+/**
+ * Service bridge - handles communication between widgets and service proxy
+ */
+
+import type {
+  BridgeMessage,
+  ServiceCallPayload,
+  ServiceResultPayload,
+  ServiceProxy,
+} from '../types.js';
+
+/**
+ * Generate a unique message ID
+ */
+function generateMessageId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+}
+
+/**
+ * Create a service proxy that calls the backend via HTTP
+ */
+export function createHttpServiceProxy(proxyUrl: string): ServiceProxy {
+  return {
+    async call(
+      namespace: string,
+      procedure: string,
+      args: unknown[],
+    ): Promise<unknown> {
+      const url = `${proxyUrl}/${namespace}/${procedure}`;
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ args: args[0] ?? {} }),
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          `Service call failed: ${response.status} ${response.statusText}`,
+        );
+      }
+
+      const result = await response.json();
+      return result;
+    },
+  };
+}
+
+/**
+ * Creates a proxy that enables fluent method chaining for dynamic field access.
+ *
+ * This allows arbitrary nested property access that resolves to a callable function,
+ * supporting patterns like `proxy.foo()`, `proxy.foo.bar()`, `proxy.bar.baz.qux()`.
+ *
+ * Used to create global namespace objects that proxy calls to a service backend.
+ */
+export function createFieldAccessProxy<T = unknown>(
+  namespace: string,
+  handler: (
+    namespace: string,
+    methodPath: string,
+    ...args: T[]
+  ) => Promise<unknown>,
+): Record<string, (...args: T[]) => Promise<unknown>> {
+  function createNestedProxy(path: string): (...args: T[]) => Promise<unknown> {
+    const fn = (...args: T[]) => handler(namespace, path, ...args);
+
+    return new Proxy(fn, {
+      get(_, nestedName: string) {
+        if (typeof nestedName === 'symbol') return undefined;
+        const newPath = path ? `${path}.${nestedName}` : nestedName;
+        return createNestedProxy(newPath);
+      },
+    }) as (...args: T[]) => Promise<unknown>;
+  }
+
+  return new Proxy(
+    {},
+    {
+      get(_, fieldName: string) {
+        if (typeof fieldName === 'symbol') return undefined;
+        return createNestedProxy(fieldName);
+      },
+    },
+  );
+}
+
+/**
+ * Create namespace globals that proxy calls to a service proxy
+ *
+ * Creates dynamic proxy objects for each namespace that support arbitrary
+ * nested method calls. This replaces the old static method registration.
+ *
+ * @param services - Array of service names (e.g., ['git', 'github'])
+ * @param proxy - The service proxy to forward calls to
+ * @returns Record of namespace names to proxy objects
+ *
+ * @example
+ * ```typescript
+ * const namespaces = generateNamespaceGlobals(['git', 'github'], proxy);
+ * // namespaces.git.status() calls proxy.call('git', 'status', [])
+ * // namespaces.github.repos.list_for_user({ username: 'x' })
+ * //   calls proxy.call('github', 'repos.list_for_user', [{ username: 'x' }])
+ * ```
+ */
+export function generateNamespaceGlobals(
+  services: string[],
+  proxy: ServiceProxy,
+): Record<string, unknown> {
+  const namespaces: Record<string, unknown> = {};
+  const uniqueNamespaces = extractNamespaces(services);
+
+  for (const namespace of uniqueNamespaces) {
+    namespaces[namespace] = createFieldAccessProxy(
+      namespace,
+      (ns, method, ...args) => proxy.call(ns, method, args),
+    );
+  }
+
+  return namespaces;
+}
+
+/**
+ * Inject namespace globals into a window object
+ */
+export function injectNamespaceGlobals(
+  target: Window | typeof globalThis,
+  namespaces: Record<string, unknown>,
+): void {
+  for (const [name, value] of Object.entries(namespaces)) {
+    (target as Record<string, unknown>)[name] = value;
+  }
+}
+
+/**
+ * Remove namespace globals from a window object
+ */
+export function removeNamespaceGlobals(
+  target: Window | typeof globalThis,
+  namespaceNames: string[],
+): void {
+  for (const name of namespaceNames) {
+    delete (target as Record<string, unknown>)[name];
+  }
+}
+
+/**
+ * Extract unique namespace names from services array
+ */
+export function extractNamespaces(services: string[]): string[] {
+  const namespaces = new Set<string>();
+  for (const service of services) {
+    const parts = service.split('.');
+    if (parts[0]) {
+      namespaces.add(parts[0]);
+    }
+  }
+  return Array.from(namespaces);
+}
+
+/**
+ * Parent-side bridge for iframe communication
+ *
+ * Listens for postMessage events from iframes and proxies service calls.
+ */
+export class ParentBridge {
+  private proxy: ServiceProxy;
+  private pendingCalls = new Map<
+    string,
+    { resolve: (value: unknown) => void; reject: (error: Error) => void }
+  >();
+  private iframes = new Set<HTMLIFrameElement>();
+  private messageHandler: (event: MessageEvent) => void;
+
+  constructor(proxy: ServiceProxy) {
+    this.proxy = proxy;
+    this.messageHandler = this.handleMessage.bind(this);
+    if (typeof window !== 'undefined') {
+      window.addEventListener('message', this.messageHandler);
+    }
+  }
+
+  /**
+   * Register an iframe to receive messages from
+   */
+  registerIframe(iframe: HTMLIFrameElement): void {
+    this.iframes.add(iframe);
+  }
+
+  /**
+   * Unregister an iframe
+   */
+  unregisterIframe(iframe: HTMLIFrameElement): void {
+    this.iframes.delete(iframe);
+  }
+
+  /**
+   * Handle incoming messages from iframes
+   */
+  private async handleMessage(event: MessageEvent): Promise<void> {
+    // Verify source is a registered iframe
+    const sourceIframe = Array.from(this.iframes).find(
+      (iframe) => iframe.contentWindow === event.source,
+    );
+
+    if (!sourceIframe) {
+      return; // Ignore messages from unknown sources
+    }
+
+    const message = event.data as BridgeMessage;
+    if (!message || typeof message !== 'object') return;
+
+    if (message.type === 'service-call') {
+      const payload = message.payload as ServiceCallPayload;
+      try {
+        const result = await this.proxy.call(
+          payload.namespace,
+          payload.procedure,
+          payload.args,
+        );
+
+        const response: BridgeMessage = {
+          type: 'service-result',
+          id: message.id,
+          payload: { result } as ServiceResultPayload,
+        };
+
+        sourceIframe.contentWindow?.postMessage(response, '*');
+      } catch (error) {
+        const response: BridgeMessage = {
+          type: 'service-result',
+          id: message.id,
+          payload: {
+            error: error instanceof Error ? error.message : String(error),
+          } as ServiceResultPayload,
+        };
+
+        sourceIframe.contentWindow?.postMessage(response, '*');
+      }
+    }
+  }
+
+  /**
+   * Dispose the bridge
+   */
+  dispose(): void {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('message', this.messageHandler);
+    }
+    this.iframes.clear();
+    this.pendingCalls.clear();
+  }
+}
+
+/**
+ * Child-side bridge for iframe communication
+ *
+ * Creates a service proxy that sends postMessage to parent.
+ */
+export function createIframeServiceProxy(): ServiceProxy {
+  const pendingCalls = new Map<
+    string,
+    { resolve: (value: unknown) => void; reject: (error: Error) => void }
+  >();
+
+  // Listen for results from parent
+  if (typeof window !== 'undefined') {
+    window.addEventListener('message', (event: MessageEvent) => {
+      const message = event.data as BridgeMessage;
+      if (!message || typeof message !== 'object') return;
+
+      if (message.type === 'service-result') {
+        const pending = pendingCalls.get(message.id);
+        if (pending) {
+          pendingCalls.delete(message.id);
+          const payload = message.payload as ServiceResultPayload;
+          if (payload.error) {
+            pending.reject(new Error(payload.error));
+          } else {
+            pending.resolve(payload.result);
+          }
+        }
+      }
+    });
+  }
+
+  return {
+    call(
+      namespace: string,
+      procedure: string,
+      args: unknown[],
+    ): Promise<unknown> {
+      return new Promise((resolve, reject) => {
+        const id = generateMessageId();
+        pendingCalls.set(id, { resolve, reject });
+
+        const message: BridgeMessage = {
+          type: 'service-call',
+          id,
+          payload: { namespace, procedure, args } as ServiceCallPayload,
+        };
+
+        window.parent.postMessage(message, '*');
+
+        // Timeout after 30 seconds
+        setTimeout(() => {
+          if (pendingCalls.has(id)) {
+            pendingCalls.delete(id);
+            reject(
+              new Error(`Service call timeout: ${namespace}.${procedure}`),
+            );
+          }
+        }, 30000);
+      });
+    },
+  };
+}
+
+/**
+ * Generate the bridge script to inject into iframes
+ *
+ * Creates a self-contained script that sets up:
+ * 1. Message handling for service results from parent
+ * 2. Dynamic proxy objects for each namespace that support arbitrary nested calls
+ */
+export function generateIframeBridgeScript(services: string[]): string {
+  const uniqueNamespaces = extractNamespaces(services);
+  const namespaceAssignments = uniqueNamespaces
+    .map((ns) => `window.${ns} = createNamespaceProxy('${ns}');`)
+    .join('\n  ');
+
+  return `
+(function() {
+  const pendingCalls = new Map();
+
+  window.addEventListener('message', function(event) {
+    const message = event.data;
+    if (!message || typeof message !== 'object') return;
+
+    if (message.type === 'service-result') {
+      const pending = pendingCalls.get(message.id);
+      if (pending) {
+        pendingCalls.delete(message.id);
+        if (message.payload.error) {
+          pending.reject(new Error(message.payload.error));
+        } else {
+          pending.resolve(message.payload.result);
+        }
+      }
+    }
+  });
+
+  function proxyCall(namespace, procedure, args) {
+    return new Promise(function(resolve, reject) {
+      const id = Date.now() + '-' + Math.random().toString(36).slice(2, 11);
+      pendingCalls.set(id, { resolve: resolve, reject: reject });
+
+      window.parent.postMessage({
+        type: 'service-call',
+        id: id,
+        payload: { namespace: namespace, procedure: procedure, args: args }
+      }, '*');
+
+      setTimeout(function() {
+        if (pendingCalls.has(id)) {
+          pendingCalls.delete(id);
+          reject(new Error('Service call timeout: ' + namespace + '.' + procedure));
+        }
+      }, 30000);
+    });
+  }
+
+  // Create a dynamic proxy for a namespace that supports arbitrary nested method calls
+  function createNamespaceProxy(namespace) {
+    function createNestedProxy(path) {
+      var fn = function() {
+        return proxyCall(namespace, path, Array.prototype.slice.call(arguments));
+      };
+
+      return new Proxy(fn, {
+        get: function(_, nestedName) {
+          if (typeof nestedName === 'symbol') return undefined;
+          var newPath = path ? path + '.' + nestedName : nestedName;
+          return createNestedProxy(newPath);
+        }
+      });
+    }
+
+    return new Proxy({}, {
+      get: function(_, fieldName) {
+        if (typeof fieldName === 'symbol') return undefined;
+        return createNestedProxy(fieldName);
+      }
+    });
+  }
+
+  ${namespaceAssignments}
+})();
+`;
+}

package/packages/compiler/src/mount/embedded.ts

@@ -0,0 +1,306 @@
+/**
+ * Embedded mount mode - mounts widgets directly in the DOM
+ *
+ * For trusted widgets that need full window access.
+ */
+
+import type {
+  CompiledWidget,
+  LoadedImage,
+  MountedWidget,
+  MountOptions,
+  ServiceProxy,
+} from '../types.js';
+import {
+  generateNamespaceGlobals,
+  injectNamespaceGlobals,
+  removeNamespaceGlobals,
+  extractNamespaces,
+} from './bridge.js';
+
+let mountCounter = 0;
+let importMapInjected = false;
+
+/**
+ * Inject an import map for bare module specifiers.
+ * Maps package names to their CDN URLs so browsers can resolve them.
+ * Must be called before any ES module imports happen.
+ */
+function injectImportMap(
+  globals: Record<string, string>,
+  preloadUrls: string[],
+  deps?: Record<string, string>,
+): void {
+  // Only inject once per page (browser limitation)
+  if (importMapInjected) return;
+
+  // Check if there's already an import map
+  const existingMap = document.querySelector('script[type="importmap"]');
+  if (existingMap) {
+    // Cannot modify existing import maps in standard browsers
+    importMapInjected = true;
+    return;
+  }
+
+  // Build import map from globals + preload URLs
+  // Convention: globals keys are package names, preload URLs are in matching order
+  const imports: Record<string, string> = {};
+  const packageNames = Object.keys(globals);
+
+  packageNames.forEach((pkgName, index) => {
+    // Use the preload URL if available, otherwise construct CDN URL
+    if (preloadUrls[index]) {
+      imports[pkgName] = preloadUrls[index];
+    } else if (deps?.[pkgName]) {
+      imports[pkgName] = `https://esm.sh/${pkgName}@${deps[pkgName]}`;
+    } else {
+      imports[pkgName] = `https://esm.sh/${pkgName}`;
+    }
+  });
+
+  // Also add common subpaths (e.g., react-dom/client)
+  if (imports['react-dom']) {
+    imports['react-dom/client'] = imports['react-dom'];
+  }
+
+  // Inject new import map
+  const script = document.createElement('script');
+  script.type = 'importmap';
+  script.textContent = JSON.stringify({ imports }, null, 2);
+  document.head.insertBefore(script, document.head.firstChild);
+
+  importMapInjected = true;
+}
+
+/**
+ * Generate a unique mount ID
+ */
+function generateMountId(): string {
+  return `pw-mount-${Date.now()}-${++mountCounter}`;
+}
+
+type CreateElementFn = (...args: unknown[]) => unknown;
+type CreateRootFn = (el: HTMLElement) => {
+  render: (el: unknown) => void;
+  unmount?: () => void;
+};
+type RenderFn = (el: unknown, container: HTMLElement) => void;
+
+type Renderer =
+  | { kind: 'root'; createRoot: CreateRootFn }
+  | { kind: 'render'; render: RenderFn };
+
+function pickCreateElement(
+  globals: Array<Record<string, unknown>>,
+): CreateElementFn | null {
+  for (const obj of globals) {
+    const ce = obj?.createElement;
+    if (typeof ce === 'function') return ce as CreateElementFn;
+    const def = obj?.default as Record<string, unknown> | undefined;
+    if (def && typeof def.createElement === 'function') {
+      return def.createElement as CreateElementFn;
+    }
+  }
+  return null;
+}
+
+function pickRenderer(
+  globals: Array<Record<string, unknown>>,
+): Renderer | null {
+  for (const obj of globals) {
+    if (obj && typeof obj.createRoot === 'function') {
+      return { kind: 'root', createRoot: obj.createRoot as CreateRootFn };
+    }
+    if (obj && typeof obj.render === 'function') {
+      return { kind: 'render', render: obj.render as RenderFn };
+    }
+    const def = obj?.default as Record<string, unknown> | undefined;
+    if (def && typeof def.createRoot === 'function') {
+      return { kind: 'root', createRoot: def.createRoot as CreateRootFn };
+    }
+    if (def && typeof def.render === 'function') {
+      return { kind: 'render', render: def.render as RenderFn };
+    }
+  }
+  return null;
+}
+
+/**
+ * Mount a widget in embedded mode (direct DOM injection)
+ */
+export async function mountEmbedded(
+  widget: CompiledWidget,
+  options: MountOptions,
+  image: LoadedImage | null,
+  proxy: ServiceProxy,
+): Promise<MountedWidget> {
+  const { target, inputs = {} } = options;
+  const mountId = generateMountId();
+
+  // Create container
+  const container = document.createElement('div');
+  container.id = mountId;
+  container.className = 'patchwork-widget patchwork-embedded';
+  target.appendChild(container);
+
+  // Run image setup if available
+  if (image?.setup) {
+    await image.setup(container);
+  }
+
+  // Inject CSS if available
+  if (image?.css) {
+    const style = document.createElement('style');
+    style.id = `${mountId}-style`;
+    style.textContent = image.css;
+    document.head.appendChild(style);
+  }
+
+  // Generate and inject service namespace globals
+  const services = widget.manifest.services || [];
+  const namespaceNames = extractNamespaces(services);
+  const namespaces = generateNamespaceGlobals(services, proxy);
+  injectNamespaceGlobals(window, namespaces);
+
+  // Get framework config from image
+  const frameworkConfig = image?.config?.framework || {};
+  const preloadUrls = frameworkConfig.preload || [];
+  const globalMapping = frameworkConfig.globals || {};
+  const deps = frameworkConfig.deps || {};
+
+  // Inject import map for bare module specifiers (must happen before ES module imports)
+  // This allows the browser to resolve imports like 'react' to CDN URLs
+  injectImportMap(globalMapping, preloadUrls, deps);
+
+  // Pre-load framework modules from image config
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const preloadedModules: any[] = await Promise.all(
+    preloadUrls.map(
+      (url: string) => import(/* webpackIgnore: true */ /* @vite-ignore */ url),
+    ),
+  );
+
+  // Set framework globals on window based on image config
+  const win = window as unknown as Record<string, unknown>;
+  const globalNames = Object.values(globalMapping) as string[];
+
+  // Map preloaded modules to their global names
+  // Convention: preload order matches globals order (react -> React, react-dom -> ReactDOM)
+  preloadedModules.forEach((mod, index) => {
+    if (globalNames[index]) {
+      const name = globalNames[index];
+      win[name] = mod;
+    }
+  });
+
+  // Create a blob with the widget code
+  const blob = new Blob([widget.code], { type: 'application/javascript' });
+  const scriptUrl = URL.createObjectURL(blob);
+
+  // Import the module
+  let moduleCleanup: (() => void) | undefined;
+
+  const globalObjects = globalNames
+    .map((n) => win[n] as unknown)
+    .filter(Boolean) as Array<Record<string, unknown>>;
+
+  try {
+    const module = await import(/* webpackIgnore: true */ scriptUrl);
+
+    // Image-provided mount handler takes priority
+    if (image?.mount) {
+      const result = await image.mount(module, container, inputs);
+      if (typeof result === 'function') {
+        moduleCleanup = result;
+      }
+    } else if (typeof module.mount === 'function') {
+      // Widget exports its own mount function
+      const result = await module.mount(container, inputs);
+      if (typeof result === 'function') {
+        moduleCleanup = result;
+      }
+    } else if (typeof module.render === 'function') {
+      // Custom render function
+      const result = await module.render(container, inputs);
+      if (typeof result === 'function') {
+        moduleCleanup = result;
+      }
+    } else if (typeof module.default === 'function') {
+      // Default export component - render using framework
+      const Component = module.default;
+
+      const createElement = pickCreateElement(globalObjects);
+      const renderer = pickRenderer(globalObjects);
+
+      if (createElement && renderer?.kind === 'root') {
+        const root = renderer.createRoot(container);
+        root.render(createElement(Component, inputs));
+        if (typeof root.unmount === 'function') {
+          moduleCleanup = () => root.unmount!();
+        }
+      } else if (createElement && renderer?.kind === 'render') {
+        renderer.render(createElement(Component, inputs), container);
+      } else {
+        // No framework renderer - try calling as plain function
+        const result = Component(inputs);
+        if (result instanceof HTMLElement) {
+          container.appendChild(result);
+        } else if (typeof result === 'string') {
+          container.innerHTML = result;
+        }
+      }
+    }
+  } finally {
+    URL.revokeObjectURL(scriptUrl);
+  }
+
+  // Create unmount function
+  const unmount = () => {
+    // Call module cleanup if available
+    if (moduleCleanup) {
+      moduleCleanup();
+    }
+
+    // Remove namespace globals
+    removeNamespaceGlobals(window, namespaceNames);
+
+    // Remove style
+    const style = document.getElementById(`${mountId}-style`);
+    if (style) {
+      style.remove();
+    }
+
+    // Remove container
+    container.remove();
+  };
+
+  return {
+    id: mountId,
+    widget,
+    mode: 'embedded',
+    target,
+    inputs,
+    unmount,
+  };
+}
+
+/**
+ * Hot reload an embedded widget
+ */
+export async function reloadEmbedded(
+  mounted: MountedWidget,
+  widget: CompiledWidget,
+  image: LoadedImage | null,
+  proxy: ServiceProxy,
+): Promise<MountedWidget> {
+  // Unmount existing
+  mounted.unmount();
+
+  // Remount with new widget
+  return mountEmbedded(
+    widget,
+    { target: mounted.target, mode: 'embedded', inputs: mounted.inputs },
+    image,
+    proxy,
+  );
+}