@langchain/langgraph-api 0.0.19 → 0.0.20

package/dist/ui/load.mjs

@@ -2,17 +2,16 @@ import { z } from "zod";
 import { Hono } from "hono";
 import { getMimeType } from "hono/utils/mime";
 import { zValidator } from "@hono/zod-validator";
+import { watch } from "@langchain/langgraph-ui";
 import * as path from "node:path";
-import { watch } from "./bundler.mjs";
 const GRAPH_UI = {};
 export async function registerGraphUi(defs, options) {
-    const result = await Promise.all(Object.entries(defs).map(async ([agentName, userPath]) => {
-        const ctx = await watch(agentName, { cwd: options.cwd, userPath, config: options.config }, (result) => {
-            GRAPH_UI[agentName] = result;
-        });
-        return [agentName, ctx];
-    }));
-    return Object.fromEntries(result);
+    await watch({
+        defs,
+        cwd: options.cwd,
+        config: options.config,
+        onOutput: (graphId, files) => (GRAPH_UI[graphId] = files),
+    });
 }
 export const api = new Hono();
 api.post("/ui/:agent", zValidator("json", z.object({ name: z.string() })), async (c) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langchain/langgraph-api",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "engines": {
     "node": "^18.19.0 || >=20.16.0"
@@ -14,10 +14,6 @@
     ".": {
       "types": "./dist/cli/spawn.d.ts",
       "default": "./dist/cli/spawn.mjs"
-    },
-    "./ui/bundler": {
-      "types": "./dist/ui/bundler.d.ts",
-      "default": "./dist/ui/bundler.mjs"
     }
   },
   "repository": {
@@ -39,12 +35,11 @@
     "stacktrace-parser": "^0.1.10",
     "superjson": "^2.2.2",
     "tsx": "^4.19.3",
-    "esbuild": "^0.25.0",
-    "esbuild-plugin-tailwindcss": "^2.0.1",
     "uuid": "^10.0.0",
     "winston": "^3.17.0",
     "winston-console-format": "^1.0.8",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "@langchain/langgraph-ui": "0.0.20"
   },
   "peerDependencies": {
     "@langchain/core": "^0.3.42",
@@ -66,7 +61,7 @@
   "scripts": {
     "clean": "npx -y bun scripts/clean.mjs",
     "build": "npx -y bun scripts/build.mjs",
-    "dev": "tsx ./tests/utils.server.mts",
+    "dev": "tsx ./tests/utils.server.mts --dev",
     "typecheck": "tsc --noEmit",
     "test": "vitest",
     "test:parser": "vitest run ./tests/parser.test.mts --testTimeout 15000",

package/dist/ui/bundler.d.mts

@@ -1,21 +0,0 @@
-import { type BuildOptions } from "esbuild";
-export declare function build(agentName: string, args: {
-    cwd: string;
-    userPath: string;
-    config?: {
-        shared?: string[];
-    };
-}): Promise<{
-    basename: string;
-    contents: Uint8Array;
-}[]>;
-export declare function watch(agentName: string, args: {
-    cwd: string;
-    userPath: string;
-    config?: {
-        shared?: string[];
-    };
-}, onResult: (result: {
-    basename: string;
-    contents: Uint8Array;
-}[]) => void): Promise<import("esbuild").BuildContext<BuildOptions>>;

package/dist/ui/bundler.mjs

@@ -1,86 +0,0 @@
-import * as path from "node:path";
-import * as url from "node:url";
-import * as fs from "node:fs";
-import { build as runBuild, context as runContext, } from "esbuild";
-import tailwind from "esbuild-plugin-tailwindcss";
-const renderTemplate = await fs.promises.readFile(url.fileURLToPath(new URL("./render.template.mts", import.meta.url)), "utf-8");
-function entrypointPlugin(paths) {
-    const fullPath = path.resolve(paths.cwd, paths.userPath);
-    let relativeUiPath = path
-        .relative(paths.cwd, fullPath)
-        .replaceAll(path.sep, "/");
-    if (relativeUiPath.startsWith("../")) {
-        throw new Error(`UI path must be relative to the project root. Received: "${relativeUiPath}"`);
-    }
-    if (!relativeUiPath.startsWith("./"))
-        relativeUiPath = `./${relativeUiPath}`;
-    return {
-        name: "entrypoint",
-        setup(build) {
-            build.onResolve({ filter: /^entrypoint$/ }, () => ({
-                path: path.resolve(path.dirname(fullPath), "ui.entrypoint.tsx"),
-                namespace: "entrypoint-ns",
-            }));
-            build.onLoad({ filter: /.*/, namespace: "entrypoint-ns" }, () => ({
-                resolveDir: paths.cwd,
-                contents: [
-                    `import ui from "${relativeUiPath}"`,
-                    renderTemplate,
-                    `export const render = createRenderer(ui)`,
-                ].join("\n"),
-                loader: "tsx",
-            }));
-        },
-    };
-}
-function registerPlugin(onEnd) {
-    const textEncoder = new TextEncoder();
-    return {
-        name: "require-transform",
-        setup(build) {
-            build.onEnd(async (result) => {
-                const newResult = [];
-                for (const item of result.outputFiles ?? []) {
-                    let basename = path.basename(item.path);
-                    let contents = item.contents;
-                    if (basename === "entrypoint.js") {
-                        contents = textEncoder.encode(item.text.replaceAll(`typeof require !== "undefined" ? require`, `typeof globalThis[Symbol.for("LGUI_REQUIRE")] !== "undefined" ? globalThis[Symbol.for("LGUI_REQUIRE")]`));
-                    }
-                    newResult.push({ basename, contents });
-                }
-                if (newResult.length > 0)
-                    onEnd(newResult);
-            });
-        },
-    };
-}
-function setup(agentName, args, onResult) {
-    return {
-        write: false,
-        outdir: path.resolve(args.cwd, "dist"),
-        entryPoints: ["entrypoint"],
-        bundle: true,
-        platform: "browser",
-        target: "es2020",
-        jsx: "automatic",
-        external: [
-            "react",
-            "react-dom",
-            "@langchain/langgraph-sdk",
-            "@langchain/langgraph-sdk/react-ui",
-            ...(args.config?.shared ?? []),
-        ],
-        plugins: [tailwind(), entrypointPlugin(args), registerPlugin(onResult)],
-        globalName: `__LGUI_${agentName}`,
-    };
-}
-export async function build(agentName, args) {
-    let results = [];
-    await runBuild(setup(agentName, args, (result) => (results = result)));
-    return results;
-}
-export async function watch(agentName, args, onResult) {
-    const ctx = await runContext(setup(agentName, args, onResult));
-    await ctx.watch();
-    return ctx;
-}

package/dist/ui/render.template.mts

@@ -1,27 +0,0 @@
-import type { ComponentClass, FunctionComponent } from "react";
-
-const STORE_SYMBOL = Symbol.for("LGUI_EXT_STORE");
-
-declare global {
-  interface Window {
-    [STORE_SYMBOL]: {
-      respond: (
-        shadowRootId: string,
-        component: FunctionComponent | ComponentClass,
-        renderEl: HTMLElement,
-      ) => void;
-    };
-  }
-}
-
-// @ts-ignore
-function createRenderer(
-  components: Record<string, FunctionComponent | ComponentClass>,
-) {
-  return (name: string, shadowRootId: string) => {
-    const root = document.getElementById(shadowRootId)!.shadowRoot;
-    const renderEl = document.createElement("div");
-    root!.appendChild(renderEl);
-    window[STORE_SYMBOL].respond(shadowRootId, components[name], renderEl);
-  };
-}