@langchain/langgraph-ui 1.1.8 → 1.1.10

package/dist/api.d.mts

@@ -0,0 +1,28 @@
+import { z } from "zod/v3";
+declare const ConfigSchema: z.ZodObject<{
+    shared: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+}, "strip", z.ZodTypeAny, {
+    shared?: string[];
+}, {
+    shared?: string[];
+}>;
+declare const DefsSchema: z.ZodRecord<z.ZodString, z.ZodString>;
+interface BuildEnvType {
+    cwd?: string;
+    defs?: z.infer<typeof DefsSchema>;
+    config?: z.infer<typeof ConfigSchema>;
+}
+interface BuildOptionsType extends BuildEnvType {
+    output: string;
+}
+export declare function build(options: BuildOptionsType): Promise<void>;
+type WatchOptionsType = ({
+    output: string;
+} | {
+    onOutput: (graphId: string, result: {
+        basename: string;
+        contents: Uint8Array;
+    }[]) => void;
+}) & BuildEnvType;
+export declare function watch(options: WatchOptionsType): Promise<void>;
+export {};

package/dist/api.mjs

@@ -0,0 +1,66 @@
+import { z } from "zod/v3";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+import * as bundler from "./bundler.mjs";
+const ConfigSchema = z.object({ shared: z.array(z.string()).optional() });
+const DefsSchema = z.record(z.string(), z.string());
+function getBuildEnv(options) {
+    const cwd = options?.cwd ?? process.cwd();
+    const defs = options?.defs ??
+        DefsSchema.parse(JSON.parse(process.env.LANGGRAPH_UI || "{}"));
+    const config = options?.config ??
+        ConfigSchema.parse(JSON.parse(process.env.LANGGRAPH_UI_CONFIG || "{}"));
+    return { cwd, defs, config };
+}
+export async function build(options) {
+    const { cwd, defs, config } = getBuildEnv(options);
+    const fullPath = path.resolve(cwd, options.output);
+    const publicPath = path.resolve(fullPath, "public");
+    const schemasPath = path.resolve(fullPath, "schemas.json");
+    const schemas = {};
+    await Promise.all(Object.entries(defs).map(async ([graphId, userPath]) => {
+        const folder = path.resolve(publicPath, graphId);
+        await fs.mkdir(folder, { recursive: true });
+        const files = await bundler.build(graphId, { userPath, cwd, config });
+        await Promise.all(files.map(async (item) => {
+            const target = path.resolve(folder, item.basename);
+            await fs.writeFile(target, item.contents);
+            schemas[graphId] ??= { assets: [], name: graphId };
+            schemas[graphId].assets.push(path.relative(folder, target));
+        }));
+    }));
+    await fs.writeFile(schemasPath, JSON.stringify(schemas), {
+        encoding: "utf-8",
+    });
+}
+export async function watch(options) {
+    const { cwd, config, defs } = getBuildEnv(options);
+    if ("onOutput" in options) {
+        await Promise.all(Object.entries(defs).map(async ([graphId, userPath]) => {
+            await bundler.watch(graphId, { cwd, config, userPath }, (files) => options.onOutput(graphId, files));
+        }));
+        return;
+    }
+    const fullPath = path.resolve(cwd, options.output);
+    const publicPath = path.resolve(fullPath, "public");
+    const schemasPath = path.resolve(fullPath, "schemas.json");
+    let promiseSeq = Promise.resolve();
+    const schemas = {};
+    await Promise.all(Object.entries(defs).map(async ([graphId, userPath]) => {
+        const folder = path.resolve(publicPath, graphId);
+        await fs.mkdir(folder, { recursive: true });
+        await bundler.watch(graphId, { cwd, userPath, config }, (files) => {
+            promiseSeq = promiseSeq.then(async () => {
+                await Promise.all(files.map(async ({ basename, contents }) => {
+                    const target = path.resolve(folder, basename);
+                    await fs.writeFile(target, contents);
+                    schemas[graphId] ??= { assets: [], name: graphId };
+                    schemas[graphId].assets.push(path.relative(folder, target));
+                }));
+                await fs.writeFile(schemasPath, JSON.stringify(schemas), {
+                    encoding: "utf-8",
+                });
+            }, (e) => console.error(e));
+        });
+    }));
+}

package/dist/bundler.d.mts

@@ -0,0 +1,21 @@
+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/bundler.mjs

@@ -0,0 +1,86 @@
+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.replace(/[^a-zA-Z0-9]/g, "_")}`,
+    };
+}
+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/cli.mjs

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+import { Command } from "@commander-js/extra-typings";
+import * as api from "./api.mjs";
+const builder = new Command().name("langgraphjs-ui");
+builder
+    .command("build")
+    .requiredOption("-o, --output <string>", "Output directory")
+    .action(api.build);
+builder
+    .command("watch")
+    .requiredOption("-o, --output <string>", "Output directory")
+    .action(api.watch);
+builder.parse();

package/dist/index.d.mts

@@ -0,0 +1 @@
+export { build, watch } from "./api.mjs";

package/dist/index.mjs

@@ -0,0 +1 @@
+export { build, watch } from "./api.mjs";

package/dist/render.template.mts

@@ -0,0 +1,27 @@
+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);
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langchain/langgraph-ui",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "type": "module",
   "engines": {
     "node": "^18.19.0 || >=20.16.0"
@@ -18,15 +18,6 @@
     "url": "git+ssh://git@github.com/langchain-ai/langgraphjs.git",
     "directory": "libs/langgraph-ui"
   },
-  "scripts": {
-    "clean": "rm -rf dist/ .turbo/",
-    "build": "yarn turbo:command build:internal --filter=@langchain/langgraph-ui",
-    "build:internal": "yarn clean && node scripts/build.mjs",
-    "prepublish": "yarn build",
-    "typecheck": "tsc --noEmit",
-    "format": "prettier --write .",
-    "format:check": "prettier --check ."
-  },
   "dependencies": {
     "@commander-js/extra-typings": "^13.0.0",
     "commander": "^13.0.0",
@@ -41,5 +32,14 @@
     "prettier": "^2.8.3",
     "typescript": "^4.9.5 || ^5.4.5",
     "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "clean": "rm -rf dist/ .turbo/",
+    "build": "pnpm turbo build:internal --filter=@langchain/langgraph-ui",
+    "build:internal": "pnpm clean && node scripts/build.mjs",
+    "prepublish": "pnpm build",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   }
-}
+}