npm - @aprovan/mcp-app-server - Versions diffs - 0.1.0-dev.c1ac1dc - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/.turbo/turbo-build.log +20 -0
package/E2E_TESTING.md +198 -0
package/LICENSE +373 -0
package/README.md +134 -0
package/dist/index.d.ts +108 -0
package/dist/index.js +1592 -0
package/dist/index.js.map +1 -0
package/dist/server.d.ts +2 -0
package/dist/server.js +1841 -0
package/dist/server.js.map +1 -0
package/package.json +52 -0
package/src/__tests__/cache.test.ts +119 -0
package/src/__tests__/cdn-plugin.test.ts +86 -0
package/src/__tests__/compile.test.ts +93 -0
package/src/__tests__/e2e-pipeline.test.ts +417 -0
package/src/__tests__/live-update.test.ts +158 -0
package/src/__tests__/local-backend.test.ts +100 -0
package/src/__tests__/memory-backend.ts +144 -0
package/src/__tests__/registry-backend.test.ts +256 -0
package/src/__tests__/services.test.ts +153 -0
package/src/__tests__/shim.test.ts +132 -0
package/src/__tests__/widget-store.test.ts +183 -0
package/src/compiler/cache.ts +68 -0
package/src/compiler/cdn-plugin.ts +197 -0
package/src/compiler/compile.ts +306 -0
package/src/compiler/index.ts +3 -0
package/src/hello-world.html +79 -0
package/src/html.d.ts +4 -0
package/src/index.ts +641 -0
package/src/live-update.ts +149 -0
package/src/reference-widgets/live-dashboard.ts +162 -0
package/src/registry-backend.ts +304 -0
package/src/server.ts +178 -0
package/src/services.ts +251 -0
package/src/shim.ts +247 -0
package/src/widget-store/index.ts +10 -0
package/src/widget-store/local-backend.ts +77 -0
package/src/widget-store/store.ts +198 -0
package/src/widget-store/types.ts +50 -0
package/tsconfig.json +10 -0
package/tsup.config.ts +14 -0

package/src/compiler/compile.ts ADDED Viewed

@@ -0,0 +1,306 @@
+import { randomUUID } from "node:crypto";
+import { mkdir, writeFile, rm, readFile } from "node:fs/promises";
+import { join, resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  createCompiler,
+  loadImage,
+  type Manifest,
+  type VirtualProject,
+  type ImageConfig,
+  type LoadedImage,
+} from "@aprovan/patchwork-compiler";
+import react from "@vitejs/plugin-react";
+import { build, type InlineConfig } from "vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
+import { generateServiceShim, generateLiveUpdateShim } from "../shim.js";
+import {
+  computeCacheKey,
+  set as cacheSet,
+  has as cacheHas,
+  get as cacheGet,
+  type CachedWidget,
+} from "./cache.js";
+import { patchworkCdnPlugin, getPreloadScripts } from "./cdn-plugin.js";
+const WIDGET_RESOURCE_PREFIX = "ui://widget/";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const COMPILE_TMP_DIR = resolve(__dirname, "..", ".compile-tmp");
+const FALLBACK_IMAGE_CONFIG: ImageConfig = {
+  platform: "browser",
+  esbuild: { target: "es2020", format: "esm", jsx: "automatic" },
+  framework: {
+    globals: { react: "React", "react-dom": "ReactDOM" },
+    preload: [
+      "https://esm.sh/react@18",
+      "https://esm.sh/react-dom@18/client",
+    ],
+    deps: { react: "18", "react-dom": "18" },
+  },
+};
+let loadedImage: LoadedImage | null = null;
+let imageLoadPromise: Promise<LoadedImage> | null = null;
+async function getImageConfig(): Promise<ImageConfig> {
+  if (loadedImage) return loadedImage.config;
+  if (imageLoadPromise) return imageLoadPromise.then((img) => img.config);
+  imageLoadPromise = (async () => {
+    try {
+      loadedImage = await loadImage("@aprovan/patchwork-image-shadcn");
+      return loadedImage;
+    } catch {
+      const compiler = await createCompiler({
+        image: "@aprovan/patchwork-image-shadcn",
+        proxyUrl: "",
+      });
+      await compiler.preloadImage("@aprovan/patchwork-image-shadcn");
+      const registry = (compiler as unknown as Record<string, unknown>)
+        .registry as Map<string, LoadedImage> | undefined;
+      const img = registry?.get("@aprovan/patchwork-image-shadcn");
+      if (img) {
+        loadedImage = img;
+        return img;
+      }
+      return { config: FALLBACK_IMAGE_CONFIG } as LoadedImage;
+    }
+  })();
+  return imageLoadPromise.then((img) => img.config);
+}
+function generateHtmlEntry(preloads: string[], cssVars: string): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  ${preloads.join("\n  ")}
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    window.tailwind = window.tailwind || {};
+    window.tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          colors: {
+            border: "hsl(var(--border))",
+            input: "hsl(var(--input))",
+            ring: "hsl(var(--ring))",
+            background: "hsl(var(--background))",
+            foreground: "hsl(var(--foreground))",
+            primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
+            secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
+            destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
+            muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
+            accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
+            popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" },
+            card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
+          },
+          borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)" },
+        },
+      },
+    };
+  </script>
+  <style>
+    :root {
+      ${cssVars}
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/_app.tsx"></script>
+</body>
+</html>`;
+}
+const SHADCN_CSS_VARS = `
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+`.trim();
+function generateMainTsx(entryModule: string): string {
+  return `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Widget from './${entryModule}';
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = createRoot(rootEl);
+  root.render(React.createElement(Widget));
+}
+`;
+}
+async function writeProjectFiles(
+  projectDir: string,
+  source: string | VirtualProject,
+): Promise<string> {
+  const srcDir = join(projectDir, "src");
+  await mkdir(srcDir, { recursive: true });
+  if (typeof source === "string") {
+    await writeFile(join(srcDir, "widget.tsx"), source, "utf-8");
+    return "widget";
+  }
+  for (const [filePath, file] of source.files) {
+    const fullPath = filePath.startsWith("src/")
+      ? join(projectDir, filePath)
+      : join(srcDir, filePath);
+    const dir = resolve(fullPath, "..");
+    await mkdir(dir, { recursive: true });
+    await writeFile(fullPath, file.content, "utf-8");
+  }
+  const entry = source.entry;
+  const entryName = entry.replace(/\.(tsx|ts|jsx|js)$/, "");
+  return entryName.startsWith("src/")
+    ? entryName.slice(4)
+    : entryName;
+}
+function injectShimIntoHtml(html: string, shimScript: string): string {
+  const shimTag = `<script type="module">\n${shimScript}\n</script>`;
+  const bodyCloseIndex = html.lastIndexOf("</body>");
+  if (bodyCloseIndex === -1) return html;
+  return html.slice(0, bodyCloseIndex) + shimTag + "\n" + html.slice(bodyCloseIndex);
+}
+export interface CompileWidgetResult {
+  html: string;
+  hash: string;
+  resourceUri: string;
+}
+export interface CompileWidgetOptions {
+  services?: string[];
+  /** Inject the live-update shim (window.patchwork) into the compiled widget. Defaults to true. */
+  liveUpdates?: boolean;
+}
+export async function compileWidget(
+  source: string | VirtualProject,
+  manifest: Manifest,
+  options: CompileWidgetOptions = {},
+): Promise<CompileWidgetResult> {
+  const liveUpdates = options.liveUpdates ?? true;
+  const baseCacheKey = computeCacheKey(source, manifest);
+  let cacheKey = baseCacheKey;
+  if (options.services?.length) {
+    cacheKey += `:svc:${options.services.sort().join(",")}`;
+  }
+  if (liveUpdates) {
+    cacheKey += `:live`;
+  }
+  if (cacheHas(cacheKey)) {
+    const cached = cacheGet(cacheKey)!;
+    return {
+      html: cached.html,
+      hash: cacheKey,
+      resourceUri: cached.resourceUri,
+    };
+  }
+  const imageConfig = await getImageConfig();
+  await mkdir(COMPILE_TMP_DIR, { recursive: true });
+  const projectDir = join(COMPILE_TMP_DIR, `build-${randomUUID()}`);
+  try {
+    await mkdir(projectDir, { recursive: true });
+    const entryModule = await writeProjectFiles(projectDir, source);
+    await writeFile(
+      join(projectDir, "src", "_app.tsx"),
+      generateMainTsx(entryModule),
+      "utf-8",
+    );
+    const preloads = getPreloadScripts(imageConfig);
+    const htmlContent = generateHtmlEntry(preloads, SHADCN_CSS_VARS);
+    await writeFile(join(projectDir, "index.html"), htmlContent, "utf-8");
+    const viteConfig: InlineConfig = {
+      root: projectDir,
+      base: "./",
+      plugins: [
+        patchworkCdnPlugin({ imageConfig }),
+        react({
+          jsxRuntime: "classic",
+        }),
+        viteSingleFile({ useRecommendedBuildConfig: true }),
+      ],
+      build: {
+        outDir: "dist",
+        emptyOutDir: true,
+        minify: false,
+        rollupOptions: {
+          input: resolve(projectDir, "index.html"),
+        },
+      },
+      logLevel: "silent",
+    };
+    await build(viteConfig);
+    const outputHtml = await readFile(
+      join(projectDir, "dist", "index.html"),
+      "utf-8",
+    );
+    // Build up the shim scripts. The live-update shim is injected first so
+    // __patchwork_app is available when the service shim runs. If both are
+    // present the live-update shim guards against double-initialisation.
+    const shimParts: string[] = [];
+    if (liveUpdates) {
+      shimParts.push(generateLiveUpdateShim());
+    }
+    if (options.services?.length) {
+      shimParts.push(generateServiceShim({ namespaces: options.services }));
+    }
+    let finalHtml = outputHtml;
+    for (const script of shimParts) {
+      finalHtml = injectShimIntoHtml(finalHtml, script);
+    }
+    const resourceUri = `${WIDGET_RESOURCE_PREFIX}${cacheKey}/view.html`;
+    const cacheEntry: CachedWidget = {
+      html: finalHtml,
+      manifest,
+      resourceUri,
+      createdAt: Date.now(),
+    };
+    cacheSet(cacheKey, cacheEntry);
+    return { html: finalHtml, hash: cacheKey, resourceUri };
+  } finally {
+    await rm(projectDir, { recursive: true, force: true });
+  }
+}
+export { cacheGet, cacheHas, computeCacheKey };

package/src/compiler/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { compileWidget, cacheGet, cacheHas, type CompileWidgetResult, type CompileWidgetOptions } from "./compile.js";
+export { getPreloadScripts, patchworkCdnPlugin, type CdnPluginOptions } from "./cdn-plugin.js";
+export { computeCacheKey, get, set, has, clear, size, allEntries, type CachedWidget } from "./cache.js";

package/src/hello-world.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Hello World — Patchwork MCP App</title>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        font-family: system-ui, -apple-system, sans-serif;
+        background: #f0f4ff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+      }
+      .card {
+        background: #fff;
+        border-radius: 1rem;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+        padding: 2.5rem 3rem;
+        text-align: center;
+        max-width: 420px;
+        width: 100%;
+      }
+      .wave {
+        font-size: 3rem;
+        line-height: 1;
+        margin-bottom: 1rem;
+      }
+      h1 {
+        margin: 0 0 0.75rem;
+        font-size: 1.75rem;
+        color: #111827;
+      }
+      p {
+        margin: 0;
+        color: #6b7280;
+        font-size: 0.95rem;
+        line-height: 1.6;
+      }
+      .badge {
+        display: inline-block;
+        margin-top: 1.5rem;
+        background: #eff6ff;
+        color: #3b82f6;
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        padding: 0.25rem 0.75rem;
+        border-radius: 999px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <div class="wave">👋</div>
+      <h1>Hello, world!</h1>
+      <p>
+        This widget is served by the <strong>Patchwork MCP App Server</strong>.
+        It renders inline inside Claude Desktop and Claude web via a
+        <code>StreamableHTTPServerTransport</code>.
+      </p>
+      <span class="badge">MCP App</span>
+    </div>
+  </body>
+</html>

package/src/html.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+declare module '*.html' {
+  const content: string;
+  export default content;
+}