@aprovan/mcp-app-server 0.1.0-dev.c1ac1dc

package/src/__tests__/shim.test.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect } from "vitest";
+import { generateServiceShim, generateLiveUpdateShim } from "../shim.js";
+
+describe("generateServiceShim", () => {
+  it("returns empty string when namespaces is empty", () => {
+    const result = generateServiceShim({ namespaces: [] });
+    expect(result).toBe("");
+  });
+
+  it("generates shim code that imports App from esm.sh", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain("import { App } from");
+    expect(result).toContain("esm.sh/@modelcontextprotocol/ext-apps");
+  });
+
+  it("uses default ext-apps version when not specified", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain("^1.7.3");
+  });
+
+  it("uses custom ext-apps version when specified", () => {
+    const result = generateServiceShim({
+      namespaces: ["weather"],
+      extAppsVersion: "2.0.0",
+    });
+    expect(result).toContain("@modelcontextprotocol/ext-apps@2.0.0");
+  });
+
+  it("creates App instance and calls connect", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain("new App(");
+    expect(result).toContain(".connect()");
+  });
+
+  it("creates namespace proxies for each service", () => {
+    const result = generateServiceShim({
+      namespaces: ["weather", "stripe"],
+    });
+    expect(result).toContain('"weather"');
+    expect(result).toContain('"stripe"');
+    expect(result).toContain("__patchwork_createNamespaceProxy");
+  });
+
+  it("sets namespace proxies on window", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain("window[__ns]");
+  });
+
+  it("proxy uses __ separator for tool names", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain("namespace + '__' + prop");
+  });
+
+  it("proxy calls callServerTool", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain("callServerTool");
+  });
+
+  it("handles isError responses by throwing", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain("result.isError");
+    expect(result).toContain("throw new Error");
+  });
+
+  it("parses JSON text content from results", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain("JSON.parse(textContent.text)");
+  });
+
+  it("waits for app connection before making calls", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain("__patchwork_ready.then");
+  });
+
+  it("handles connection failure gracefully", () => {
+    const result = generateServiceShim({ namespaces: ["weather"] });
+    expect(result).toContain(".catch");
+    expect(result).toContain("Failed to connect");
+  });
+});
+
+describe("generateLiveUpdateShim", () => {
+  it("imports App from esm.sh ext-apps", () => {
+    const shim = generateLiveUpdateShim();
+    expect(shim).toContain("import { App } from");
+    expect(shim).toContain("esm.sh/@modelcontextprotocol/ext-apps");
+  });
+
+  it("uses default ext-apps version when not specified", () => {
+    const shim = generateLiveUpdateShim();
+    expect(shim).toContain("^1.7.3");
+  });
+
+  it("uses custom ext-apps version when specified", () => {
+    const shim = generateLiveUpdateShim({ extAppsVersion: "2.0.0" });
+    expect(shim).toContain("@modelcontextprotocol/ext-apps@2.0.0");
+  });
+
+  it("guards against double App initialisation", () => {
+    const shim = generateLiveUpdateShim();
+    expect(shim).toContain("if (!window.__patchwork_app)");
+  });
+
+  it("exposes window.patchwork.subscribe", () => {
+    const shim = generateLiveUpdateShim();
+    expect(shim).toContain("subscribe:");
+    expect(shim).toContain("subscribe_stream");
+  });
+
+  it("exposes window.patchwork.updateContext", () => {
+    const shim = generateLiveUpdateShim();
+    expect(shim).toContain("updateContext:");
+    expect(shim).toContain("ui/update-model-context");
+  });
+
+  it("exposes window.patchwork.fireEvent", () => {
+    const shim = generateLiveUpdateShim();
+    expect(shim).toContain("fireEvent:");
+    expect(shim).toContain("callServerTool");
+  });
+
+  it("registers a notifications/tools/list_changed handler for polling", () => {
+    const shim = generateLiveUpdateShim();
+    expect(shim).toContain("notifications/tools/list_changed");
+    expect(shim).toContain("poll_updates");
+  });
+
+  it("poll_updates passes after_seq to avoid duplicates", () => {
+    const shim = generateLiveUpdateShim();
+    expect(shim).toContain("after_seq");
+  });
+});

package/src/__tests__/widget-store.test.ts

@@ -0,0 +1,183 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { WidgetStore, resetWidgetStore } from "../widget-store/store.js";
+import { MemoryBackend } from "./memory-backend.js";
+import type { Manifest } from "@aprovan/patchwork-compiler";
+
+const TEST_MANIFEST: Manifest = {
+  name: "test-widget",
+  version: "0.1.0",
+  platform: "browser",
+  image: "@aprovan/patchwork-image-shadcn",
+};
+
+function createStore(): WidgetStore {
+  resetWidgetStore();
+  return new WidgetStore({ backend: new MemoryBackend() });
+}
+
+describe("WidgetStore", () => {
+  let store: WidgetStore;
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
+  describe("saveWidget", () => {
+    it("persists a widget and returns stored metadata", async () => {
+      const result = await store.saveWidget("abc123", "<html>test</html>", TEST_MANIFEST);
+
+      expect(result.path).toBe("widgets/test-widget/abc123/view.html");
+      expect(result.resourceUri).toBe("ui://widgets/test-widget/abc123/view.html");
+      expect(result.html).toBe("<html>test</html>");
+      expect(result.manifest.name).toBe("test-widget");
+      expect(result.createdAt).toBeTypeOf("number");
+    });
+
+    it("stores manifest with entry for multi-file projects", async () => {
+      const result = await store.saveWidget(
+        "def456",
+        "<html>multi</html>",
+        { ...TEST_MANIFEST, name: "multi-widget" },
+        "main.tsx",
+      );
+
+      expect(result.entry).toBe("main.tsx");
+    });
+
+    it("stores manifest with services metadata", async () => {
+      const manifest: Manifest = {
+        ...TEST_MANIFEST,
+        services: ["weather", "github"],
+      };
+      const result = await store.saveWidget("svc123", "<html>svc</html>", manifest);
+
+      expect(result.manifest.services).toEqual(["weather", "github"]);
+    });
+  });
+
+  describe("getWidget", () => {
+    it("retrieves a stored widget by name and hash", async () => {
+      await store.saveWidget("abc123", "<html>test</html>", TEST_MANIFEST);
+      const widget = await store.getWidget("test-widget", "abc123");
+
+      expect(widget).not.toBeNull();
+      expect(widget!.html).toBe("<html>test</html>");
+      expect(widget!.manifest.name).toBe("test-widget");
+      expect(widget!.resourceUri).toBe("ui://widgets/test-widget/abc123/view.html");
+    });
+
+    it("returns null for non-existent widget", async () => {
+      const widget = await store.getWidget("nonexistent", "nothash");
+      expect(widget).toBeNull();
+    });
+
+    it("retrieves entry point from manifest", async () => {
+      await store.saveWidget("ent123", "<html>entry</html>", TEST_MANIFEST, "app.tsx");
+      const widget = await store.getWidget("test-widget", "ent123");
+
+      expect(widget!.entry).toBe("app.tsx");
+    });
+  });
+
+  describe("listWidgets", () => {
+    it("returns empty list when no widgets stored", async () => {
+      const widgets = await store.listWidgets();
+      expect(widgets).toEqual([]);
+    });
+
+    it("lists all stored widgets with metadata", async () => {
+      await store.saveWidget("abc123", "<html>a</html>", TEST_MANIFEST);
+      await store.saveWidget(
+        "def456",
+        "<html>b</html>",
+        { ...TEST_MANIFEST, name: "other-widget", description: "Another widget" },
+      );
+
+      const widgets = await store.listWidgets();
+      expect(widgets).toHaveLength(2);
+      expect(widgets.map((w) => w.name)).toContain("test-widget");
+      expect(widgets.map((w) => w.name)).toContain("other-widget");
+    });
+
+    it("includes services and entry in listing", async () => {
+      await store.saveWidget(
+        "svc123",
+        "<html>svc</html>",
+        { ...TEST_MANIFEST, services: ["stripe"] },
+        "main.tsx",
+      );
+
+      const widgets = await store.listWidgets();
+      const entry = widgets.find((w) => w.name === "test-widget");
+      expect(entry!.services).toEqual(["stripe"]);
+      expect(entry!.entry).toBe("main.tsx");
+    });
+
+    it("returns widgets sorted by most recent first", async () => {
+      const store = createStore();
+      await store.saveWidget("old", "<html>old</html>", { ...TEST_MANIFEST, name: "old-widget" });
+
+      await new Promise((r) => setTimeout(r, 10));
+
+      await store.saveWidget("new", "<html>new</html>", { ...TEST_MANIFEST, name: "new-widget" });
+
+      const widgets = await store.listWidgets();
+      expect(widgets[0]!.name).toBe("new-widget");
+    });
+  });
+
+  describe("deleteWidget", () => {
+    it("deletes a stored widget", async () => {
+      await store.saveWidget("del123", "<html>del</html>", TEST_MANIFEST);
+      const deleted = await store.deleteWidget("test-widget", "del123");
+      expect(deleted).toBe(true);
+
+      const widget = await store.getWidget("test-widget", "del123");
+      expect(widget).toBeNull();
+    });
+
+    it("returns false for non-existent widget", async () => {
+      const deleted = await store.deleteWidget("nonexistent", "nothash");
+      expect(deleted).toBe(false);
+    });
+  });
+
+  describe("hasWidget", () => {
+    it("returns true for stored widget", async () => {
+      await store.saveWidget("has123", "<html>has</html>", TEST_MANIFEST);
+      expect(await store.hasWidget("test-widget", "has123")).toBe(true);
+    });
+
+    it("returns false for non-existent widget", async () => {
+      expect(await store.hasWidget("nonexistent", "nothash")).toBe(false);
+    });
+  });
+
+  describe("resourceUriFor", () => {
+    it("generates correct resource URI", () => {
+      const uri = store.resourceUriFor("my-widget", "abc123");
+      expect(uri).toBe("ui://widgets/my-widget/abc123/view.html");
+    });
+  });
+
+  describe("loadAll", () => {
+    it("loads all stored widgets", async () => {
+      await store.saveWidget("abc123", "<html>a</html>", TEST_MANIFEST);
+      await store.saveWidget(
+        "def456",
+        "<html>b</html>",
+        { ...TEST_MANIFEST, name: "other-widget" },
+      );
+
+      const widgets = await store.loadAll();
+      expect(widgets).toHaveLength(2);
+      expect(widgets.map((w) => w.manifest.name)).toContain("test-widget");
+      expect(widgets.map((w) => w.manifest.name)).toContain("other-widget");
+    });
+
+    it("returns empty array when no widgets stored", async () => {
+      const widgets = await store.loadAll();
+      expect(widgets).toEqual([]);
+    });
+  });
+});

package/src/compiler/cache.ts

@@ -0,0 +1,68 @@
+import { createHash } from "node:crypto";
+import type { Manifest, VirtualProject } from "@aprovan/patchwork-compiler";
+
+export interface CachedWidget {
+  html: string;
+  manifest: Manifest;
+  resourceUri: string;
+  createdAt: number;
+}
+
+const MAX_CACHE_SIZE = 256;
+
+const cache = new Map<string, CachedWidget>();
+
+export function computeCacheKey(
+  source: string | VirtualProject,
+  manifest: Manifest,
+): string {
+  const parts: string[] = [];
+
+  if (typeof source === "string") {
+    parts.push(source);
+  } else {
+    const sortedFiles = Array.from(source.files.entries()).sort(([a], [b]) =>
+      a.localeCompare(b),
+    );
+    for (const [path, file] of sortedFiles) {
+      parts.push(`${path}::${file.content}`);
+    }
+    parts.push(`entry:${source.entry}`);
+  }
+
+  parts.push(JSON.stringify(manifest));
+
+  return createHash("sha256").update(parts.join("\n")).digest("hex").slice(0, 16);
+}
+
+export function get(hash: string): CachedWidget | undefined {
+  return cache.get(hash);
+}
+
+export function set(hash: string, entry: CachedWidget): void {
+  if (cache.size >= MAX_CACHE_SIZE) {
+    const entries = Array.from(cache.entries());
+    entries.sort((a, b) => a[1].createdAt - b[1].createdAt);
+    const toRemove = entries.slice(0, Math.floor(MAX_CACHE_SIZE / 4));
+    for (const [key] of toRemove) {
+      cache.delete(key);
+    }
+  }
+  cache.set(hash, entry);
+}
+
+export function has(hash: string): boolean {
+  return cache.has(hash);
+}
+
+export function clear(): void {
+  cache.clear();
+}
+
+export function size(): number {
+  return cache.size;
+}
+
+export function allEntries(): Array<[string, CachedWidget]> {
+  return Array.from(cache.entries());
+}

package/src/compiler/cdn-plugin.ts

@@ -0,0 +1,197 @@
+import type { ImageConfig } from "@aprovan/patchwork-compiler";
+import type { Plugin } from "vite";
+
+const ESM_SH_BASE = "https://esm.sh";
+
+const REACT_EXPORTS = [
+  "useState",
+  "useEffect",
+  "useCallback",
+  "useMemo",
+  "useRef",
+  "useContext",
+  "useReducer",
+  "useLayoutEffect",
+  "useId",
+  "createContext",
+  "createElement",
+  "cloneElement",
+  "createRef",
+  "forwardRef",
+  "lazy",
+  "memo",
+  "Fragment",
+  "Suspense",
+  "StrictMode",
+  "Component",
+  "PureComponent",
+  "Children",
+  "isValidElement",
+];
+
+const REACT_DOM_EXPORTS = [
+  "createPortal",
+  "flushSync",
+  "render",
+  "hydrate",
+  "unmountComponentAtNode",
+];
+
+function toEsmShUrl(
+  packageName: string,
+  version?: string,
+  subpath?: string,
+  deps?: Record<string, string>,
+): string {
+  let url: string = `${ESM_SH_BASE}/${packageName}`;
+  if (version) url += `@${version}`;
+  if (subpath) url += `/${subpath}`;
+  if (deps && Object.keys(deps).length > 0) {
+    const depsStr = Object.entries(deps)
+      .map(([name, ver]) => `${name}@${ver}`)
+      .join(",");
+    url += `?deps=${depsStr}`;
+  }
+  return url;
+}
+
+function parseImportPath(importPath: string): {
+  packageName: string;
+  subpath?: string;
+} {
+  if (importPath.startsWith("@")) {
+    const parts = importPath.split("/");
+    if (parts.length >= 2) {
+      const packageName = `${parts[0]}/${parts[1]}`;
+      const subpath = parts.slice(2).join("/");
+      return { packageName, subpath: subpath || undefined };
+    }
+  }
+  const parts = importPath.split("/");
+  return { packageName: parts[0] ?? "", subpath: parts.slice(1).join("/") || undefined };
+}
+
+function isBareImport(path: string): boolean {
+  return !(
+    path.startsWith(".") ||
+    path.startsWith("/") ||
+    path.startsWith("http://") ||
+    path.startsWith("https://")
+  );
+}
+
+function matchAlias(
+  importPath: string,
+  aliases: Record<string, string>,
+): string | null {
+  for (const [pattern, target] of Object.entries(aliases)) {
+    if (pattern.endsWith("/*")) {
+      const prefix = pattern.slice(0, -2);
+      if (importPath === prefix || importPath.startsWith(prefix + "/")) {
+        return target;
+      }
+    }
+    if (importPath === pattern) {
+      return target;
+    }
+  }
+  return null;
+}
+
+export interface CdnPluginOptions {
+  imageConfig: ImageConfig;
+  packages?: Record<string, string>;
+}
+
+export function patchworkCdnPlugin(options: CdnPluginOptions): Plugin {
+  const { imageConfig } = options;
+  const globals = imageConfig.framework?.globals ?? {};
+  const deps = imageConfig.framework?.deps ?? {};
+  const aliases = imageConfig.aliases ?? {};
+  const packages = options.packages ?? {};
+  const globalsSet = new Set(Object.keys(globals));
+
+  return {
+    name: "patchwork-cdn",
+    enforce: "pre",
+
+    resolveId(source) {
+      if (!isBareImport(source)) return null;
+
+      const aliasTarget = matchAlias(source, aliases);
+      if (aliasTarget) {
+        const { packageName, subpath } = parseImportPath(aliasTarget);
+
+        if (globalsSet.has(packageName)) {
+          return `${packageName}${subpath ? `/${subpath}` : ""}`;
+        }
+
+        const version = packages[packageName];
+        const url = toEsmShUrl(
+          packageName,
+          version,
+          subpath,
+          Object.keys(deps).length > 0 ? deps : undefined,
+        );
+        return { id: url, external: true };
+      }
+
+      const { packageName, subpath } = parseImportPath(source);
+
+      if (globalsSet.has(packageName)) {
+        return source;
+      }
+
+      const version = packages[packageName];
+      const url = toEsmShUrl(
+        packageName,
+        version,
+        subpath,
+        Object.keys(deps).length > 0 ? deps : undefined,
+      );
+      return { id: url, external: true };
+    },
+
+    load(id) {
+      const { packageName, subpath } = parseImportPath(id);
+      const globalName = globals[packageName];
+      if (!globalName) return null;
+
+      if (subpath) {
+        const url = toEsmShUrl(
+          packageName,
+          packages[packageName],
+          subpath,
+          Object.keys(deps).length > 0 ? deps : undefined,
+        );
+        return `export * from '${url}'; export { default } from '${url}';`;
+      }
+
+      const commonExports =
+        packageName === "react"
+          ? REACT_EXPORTS
+          : packageName === "react-dom"
+            ? REACT_DOM_EXPORTS
+            : [];
+
+      const lines = [
+        `const mod = window.${globalName};`,
+        `export default mod;`,
+      ];
+
+      if (commonExports.length > 0) {
+        lines.push(
+          `const { ${commonExports.join(", ")} } = mod;`,
+          `export { ${commonExports.join(", ")} };`,
+        );
+      }
+
+      return lines.join("\n");
+    },
+  };
+}
+
+export function getPreloadScripts(imageConfig: ImageConfig): string[] {
+  const preload = imageConfig.framework?.preload ?? [];
+  return preload.map((url) => `<script src="${url}"></script>`);
+}