@powerhousedao/builder-tools 0.2.0

package/dist/connect-studio/vite-plugins/external-packages.js

@@ -0,0 +1,74 @@
+import { getConfig } from "@powerhousedao/config/powerhouse";
+import fs from "node:fs";
+import { dirname, join } from "node:path";
+import { normalizePath } from "vite";
+import { viteIgnoreStaticImport, viteReplaceImports } from "./base.js";
+// TODO use config path?
+const __dirname = join(process.cwd(), ".ph/");
+// import.meta.dirname || dirname(fileURLToPath(import.meta.url));
+export const EXTERNAL_PACKAGES_IMPORT = "PH:EXTERNAL_PACKAGES";
+export const IMPORT_SCRIPT_FILE = normalizePath(join(__dirname, "external-packages.js"));
+export function generateImportScript(packages) {
+    const targetDir = dirname(IMPORT_SCRIPT_FILE);
+    // create file if it doesn't exist, also create path if it doesn't exist (recursive)
+    if (!fs.existsSync(targetDir)) {
+        fs.mkdirSync(targetDir, { recursive: true });
+    }
+    const imports = [];
+    const moduleNames = [];
+    let counter = 0;
+    for (const packageName of packages) {
+        const moduleName = `module${counter}`;
+        moduleNames.push(moduleName);
+        imports.push(`import * as ${moduleName} from '${packageName}';`);
+        counter++;
+    }
+    const exportStatement = `export default [
+        ${moduleNames
+        .map((name, index) => `{
+            id: "${packages[index]}",
+            ...${name},
+        }`)
+        .join(",\n")}
+    ];`;
+    const fileContent = `${imports.join("\n")}\n\n${exportStatement}`;
+    fs.writeFileSync(IMPORT_SCRIPT_FILE, fileContent);
+    return IMPORT_SCRIPT_FILE;
+}
+export const viteLoadExternalPackages = (packages, hmr = false) => {
+    if (!packages?.length && !hmr) {
+        return viteIgnoreStaticImport([EXTERNAL_PACKAGES_IMPORT]);
+    }
+    generateImportScript(packages ?? []);
+    process.env.LOAD_EXTERNAL_PACKAGES = "true";
+    return [
+        viteReplaceImports({ [EXTERNAL_PACKAGES_IMPORT]: IMPORT_SCRIPT_FILE }),
+        hmr && {
+            name: "vite-plugin-studio-external-packages",
+            handleHotUpdate({ file, server, modules }) {
+                if (file.endsWith("powerhouse.config.json")) {
+                    const config = getConfig(file);
+                    generateImportScript(config.packages?.map((p) => p.packageName) ?? []);
+                    config.packages?.forEach((pkg) => console.log("-> Loading package:", pkg.packageName));
+                    const module = server.moduleGraph.getModuleById(IMPORT_SCRIPT_FILE);
+                    if (module) {
+                        server.moduleGraph.invalidateModule(module);
+                        return [module].concat(...module.importers.values());
+                    }
+                }
+                else if (file === IMPORT_SCRIPT_FILE) {
+                    modules
+                        .filter((module) => module.id === IMPORT_SCRIPT_FILE)
+                        .forEach((module) => {
+                        server.ws.send("studio:external-packages-updated", {
+                            url: module.url,
+                            timestamp: module.lastHMRTimestamp,
+                        });
+                    });
+                    return modules;
+                }
+                return modules;
+            },
+        },
+    ];
+};

package/dist/connect-studio/vite-plugins/hmr.d.ts

@@ -0,0 +1,3 @@
+import { PluginOption } from "vite";
+export declare const viteLoadHMRModule: (connectPath: string) => PluginOption;
+//# sourceMappingURL=hmr.d.ts.map

package/dist/connect-studio/vite-plugins/hmr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hmr.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/hmr.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,YAAY,EAAiB,MAAM,MAAM,CAAC;AAGlE,eAAO,MAAM,iBAAiB,gBAAiB,MAAM,KAAG,YAYvD,CAAC"}

package/dist/connect-studio/vite-plugins/hmr.js

@@ -0,0 +1,57 @@
+import { exec } from "node:child_process";
+import { join } from "node:path";
+import { normalizePath } from "vite";
+import { HMR_MODULE_IMPORT, viteReplaceImports } from "./base.js";
+export const viteLoadHMRModule = (connectPath) => {
+    return [
+        viteReplaceImports({
+            [HMR_MODULE_IMPORT]: normalizePath(join(connectPath, "hmr.js")),
+        }),
+        {
+            name: "vite-plugin-studio-hmr-module",
+            configureServer(server) {
+                handleExternalPackageEvents(server);
+            },
+        },
+    ];
+};
+const handleExternalPackageEvents = (server) => {
+    server.ws.on("studio:add-external-package", (data, client) => {
+        const { name } = data;
+        const installProcess = exec(`ph install ${name}`, {
+            cwd: process.cwd(),
+        }, (error) => {
+            if (error) {
+                console.error(`\t[${name}]: ${error.message}`);
+            }
+            else {
+                server.ws.send("studio:external-package-added", {
+                    name,
+                });
+            }
+        });
+        installProcess.stdout?.on("data", (data) => {
+            console.log(`\t[${name}]: ${data.toString().trim()}`);
+        });
+        console.log("Installing external package:", name);
+    });
+    server.ws.on("studio:remove-external-package", (data, client) => {
+        const { name } = data;
+        const uninstallProcess = exec(`ph uninstall ${name}`, {
+            cwd: process.cwd(),
+        }, (error) => {
+            if (error) {
+                console.error(`\t[${name}]: ${error.message}`);
+            }
+            else {
+                server.ws.send("studio:external-package-removed", {
+                    name,
+                });
+            }
+        });
+        uninstallProcess.stdout?.on("data", (data) => {
+            console.log(`\t[${name}]: ${data.toString().trim()}`);
+        });
+        console.log("Removing external package:", name);
+    });
+};

package/dist/connect-studio/vite-plugins/importmap.d.ts

@@ -0,0 +1,20 @@
+import { PluginOption } from "vite";
+export type Provider = "node_modules" | "esm.sh";
+/**
+ * Vite plugin to bundle or copy dependencies and inject an import map into `index.html`.
+ *
+ * @param {string} outputDir - The directory where the modules should be placed.
+ * @param {(string | { name: string; provider: string })[]} dependencies -
+ *        List of dependencies to process. Can be:
+ *        - A string (dependency is copied as is).
+ *        - An object `{ name, provide }` where:
+ *          - `name` (string): The module name.
+ *          - `provider` (string): Where to retrieve the module bundle. Defaults to node_modules.
+ *
+ * @returns {Plugin} A Vite plugin that processes dependencies and injects an import map.
+ */
+export declare function generateImportMapPlugin(outputDir: string, dependencies: (string | {
+    name: string;
+    provider: Provider;
+})[]): PluginOption;
+//# sourceMappingURL=importmap.d.ts.map

package/dist/connect-studio/vite-plugins/importmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"importmap.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/importmap.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAGpC,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,QAAQ,CAAC;AA+MjD;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,CAAC,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC,EAAE,GAC9D,YAAY,CAUd"}

package/dist/connect-studio/vite-plugins/importmap.js

@@ -0,0 +1,174 @@
+import { build } from "esbuild";
+import fg from "fast-glob";
+import fs from "node:fs/promises";
+import { builtinModules } from "node:module";
+import path from "node:path";
+import { exports } from "resolve.exports";
+import { findPackageJson } from "./base.js";
+const nodeModules = builtinModules.concat(builtinModules.map((m) => `node:${m}`));
+/**
+ * Resolves glob exports like `"./*": "./dist/*.js"` and `"./utils/*": "./dist/utils/*.js"`
+ * into actual file mappings.
+ *
+ * @param {string} exportName - The export pattern (e.g., `"./*"` or `"./utils/*"`).
+ * @param {string} exportPath - The actual path pattern (e.g., `"./dist/*.js"`).
+ * @param {string} srcPath - The package root directory where the exports are located.
+ * @returns {Promise<Record<string, string>>} - A mapping of export names to resolved paths.
+ */
+async function resolveGlobExport(exportName, exportPath, srcPath) {
+    const resolvedExports = new Map();
+    const hasGloblExport = exportName.endsWith("/*");
+    const globPath = hasGloblExport
+        ? exportPath.replace("*", "**/*")
+        : exportPath;
+    const distPath = exportPath.substring(0, exportPath.lastIndexOf("/*"));
+    const resolvedSrcPath = hasGloblExport
+        ? path.join(srcPath.replace("*", ""), distPath)
+        : srcPath;
+    const files = await fg(path.join(srcPath, globPath));
+    for (const file of files) {
+        const relativeSrcFilePath = path.relative(resolvedSrcPath, file); // Relative to the dist folder
+        const exportFilePath = path.relative(srcPath, file); // Relative to package root
+        const exportKey = relativeSrcFilePath.replace(path.extname(file), ""); // Remove .js extension
+        const mappedExport = exportName.replace("*", exportKey); // Replace glob `*` with actual name
+        resolvedExports.set(mappedExport, {
+            export: `./${relativeSrcFilePath}`,
+            file: exportFilePath,
+        }); // Final mapped entry
+    }
+    return resolvedExports;
+}
+async function addExportToMap(exportName, exportPath, srcPath, map) {
+    if (exportName.includes("*")) {
+        const exports = await resolveGlobExport(exportName, exportPath, srcPath);
+        exports.forEach((value, key) => map.set(key, value));
+    }
+    else {
+        map.set(exportName, { export: exportPath, file: exportPath });
+    }
+}
+async function getPackageExports(name, packageJson, srcPath) {
+    const entries = new Map();
+    const mainExport = exports(packageJson, ".", {
+        browser: true,
+    });
+    if (mainExport) {
+        for (const entry of mainExport) {
+            await addExportToMap(".", entry, srcPath, entries);
+        }
+    }
+    if (!packageJson.exports) {
+        return entries;
+    }
+    if (typeof packageJson.exports === "string") {
+        await addExportToMap(name, packageJson.exports, srcPath, entries);
+        return entries;
+    }
+    for (const [key, entry] of Object.entries(packageJson.exports)) {
+        if (typeof entry === "string") {
+            await addExportToMap(key, entry, srcPath, entries);
+        }
+        else {
+            const exportEntry = exports(packageJson, key, {
+                browser: true,
+            });
+            const exportResult = exportEntry?.at(0);
+            if (exportResult) {
+                await addExportToMap(key, exportResult, srcPath, entries);
+            }
+            else {
+                console.warn(`No browser exports found for ${name}/${key}`);
+            }
+        }
+    }
+    return entries;
+}
+function importFromEsmSh(name) {
+    return {
+        [name]: `https://esm.sh/${name}`,
+        [`${name}/`]: `https://esm.sh/${name}/`,
+    };
+}
+async function importFromNodeModules(name, modulesDir, importMapDeps) {
+    console.log(`Bundling dependency: ${name}`);
+    const importMap = {};
+    const { packageJson, path: srcPath } = await findPackageJson(name);
+    const entries = await getPackageExports(name, packageJson, srcPath);
+    if (!entries.size) {
+        throw new Error(`No browser exports found for ${name}`);
+    }
+    const indexFile = entries.get("")?.export || "index";
+    const fileName = path.basename(entries.get("")?.export || "index", path.extname(indexFile));
+    const outputPath = path.join(modulesDir, name);
+    // Bundle and tree-shake only dependencies (exclude the actual library code)
+    await build({
+        entryPoints: Array.from(entries.values()).map((value) => path.join(srcPath, value.file)),
+        outdir: outputPath,
+        bundle: true,
+        format: "esm",
+        platform: "browser",
+        target: "esnext",
+        splitting: true,
+        external: nodeModules.concat(Array.from(importMapDeps)), // Exclude dependencies already in import map
+        sourcemap: true,
+        minify: false,
+    });
+    // Add entry to import map
+    importMap[name] = `./modules/${name}/${fileName}.js`;
+    entries.forEach((entry, key) => {
+        importMap[path.join(name, key)] =
+            `./modules/${path.join(name, entry.export)}`;
+    });
+    return importMap;
+}
+async function generateImportMap(outputDir, dependencies) {
+    const modulesDir = path.join(outputDir, "/modules");
+    await fs.mkdir(modulesDir, { recursive: true });
+    const importMapDeps = new Set(dependencies.map((dep) => (typeof dep === "string" ? dep : dep.name)));
+    let importMap = {};
+    for (const dependency of dependencies) {
+        const name = typeof dependency === "string" ? dependency : dependency.name;
+        const provider = typeof dependency === "string" ? "node_modules" : dependency.provider;
+        if (provider === "esm.sh") {
+            const imports = importFromEsmSh(name);
+            importMap = { ...importMap, ...imports };
+        }
+        else if (provider.toString() === "node_modules") {
+            const imports = await importFromNodeModules(name, modulesDir, importMapDeps);
+            importMap = { ...importMap, ...imports };
+        }
+        else {
+            throw new Error(`Unsupported provider: ${provider}`);
+        }
+    }
+    const indexPath = path.join(outputDir, "index.html");
+    let html = await fs.readFile(indexPath, "utf-8");
+    const importMapScript = `<script type="importmap">${JSON.stringify({ imports: importMap }, null, 2)}</script>`;
+    html = html.replace("</head>", `${importMapScript}\n</head>`);
+    await fs.writeFile(indexPath, html, "utf-8");
+    console.log("✅ Import map added to index.html");
+}
+/**
+ * Vite plugin to bundle or copy dependencies and inject an import map into `index.html`.
+ *
+ * @param {string} outputDir - The directory where the modules should be placed.
+ * @param {(string | { name: string; provider: string })[]} dependencies -
+ *        List of dependencies to process. Can be:
+ *        - A string (dependency is copied as is).
+ *        - An object `{ name, provide }` where:
+ *          - `name` (string): The module name.
+ *          - `provider` (string): Where to retrieve the module bundle. Defaults to node_modules.
+ *
+ * @returns {Plugin} A Vite plugin that processes dependencies and injects an import map.
+ */
+export function generateImportMapPlugin(outputDir, dependencies) {
+    return {
+        name: "vite-plugin-importmap",
+        async closeBundle() {
+            await generateImportMap(outputDir, dependencies);
+        },
+        async configureServer() {
+            await generateImportMap(outputDir, dependencies);
+        },
+    };
+}

package/dist/connect-studio/vite-plugins/studio.d.ts

@@ -0,0 +1,4 @@
+import { PluginOption, ViteDevServer } from "vite";
+export declare function watchLocalFiles(server: ViteDevServer, documentModelsPath?: string, editorsPath?: string): void;
+export declare function viteConnectDevStudioPlugin(enabled: boolean | undefined, connectPath: string, env?: Record<string, string>): PluginOption[];
+//# sourceMappingURL=studio.d.ts.map

package/dist/connect-studio/vite-plugins/studio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"studio.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/studio.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AAanD,wBAAgB,eAAe,CAC7B,MAAM,EAAE,aAAa,EACrB,kBAAkB,CAAC,EAAE,MAAM,EAC3B,WAAW,CAAC,EAAE,MAAM,QA8DrB;AAED,wBAAgB,0BAA0B,CACxC,OAAO,qBAAQ,EACf,WAAW,EAAE,MAAM,EACnB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,YAAY,EAAE,CAoEhB"}

package/dist/connect-studio/vite-plugins/studio.js

@@ -0,0 +1,112 @@
+import fs from "node:fs";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { externalIds, getStudioConfig, HMR_MODULE_IMPORT, LOCAL_DOCUMENT_EDITORS_IMPORT, LOCAL_DOCUMENT_MODELS_IMPORT, STUDIO_IMPORTS, viteIgnoreStaticImport, viteReplaceImports, } from "./base.js";
+import { viteLoadHMRModule } from "./hmr.js";
+export function watchLocalFiles(server, documentModelsPath, editorsPath) {
+    const debounce = (callback, delay = 100) => {
+        let timeout;
+        return function () {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                callback();
+            }, delay);
+        };
+    };
+    const refreshModelsWithDebounce = debounce(() => {
+        console.log(`Local document models changed, reloading Connect...`);
+        server.ws.send({
+            type: "full-reload",
+            path: "*",
+        });
+    });
+    const refreshEditorsWithDebounce = debounce(() => {
+        console.log(`Local document editors changed, reloading Connect...`);
+        server.ws.send({
+            type: "full-reload",
+            path: "*",
+        });
+    });
+    if (documentModelsPath) {
+        // Use fs to watch the file and trigger a server reload when it changes
+        console.log(`Watching local document models at '${documentModelsPath}'...`);
+        try {
+            fs.watch(documentModelsPath, {
+                recursive: true,
+            }, (event, filename) => {
+                refreshModelsWithDebounce();
+            });
+        }
+        catch (e) {
+            console.error("Error watching local document models", e);
+        }
+    }
+    if (editorsPath) {
+        console.log(`Watching local document editors at '${editorsPath}'...`);
+        try {
+            fs.watch(editorsPath, {
+                recursive: true,
+            }, (event, filename) => {
+                refreshEditorsWithDebounce();
+            });
+        }
+        catch (e) {
+            console.error("Error watching local document models", e);
+        }
+    }
+}
+export function viteConnectDevStudioPlugin(enabled = false, connectPath, env) {
+    const studioConfig = getStudioConfig(env);
+    const localDocumentModelsPath = studioConfig[LOCAL_DOCUMENT_MODELS_IMPORT];
+    const localDocumentEditorsPath = studioConfig[LOCAL_DOCUMENT_EDITORS_IMPORT];
+    return [
+        enabled &&
+            viteIgnoreStaticImport([
+                "react",
+                "react-dom",
+                "@powerhousedao/reactor-browser",
+            ]),
+        localDocumentModelsPath
+            ? viteReplaceImports({
+                [LOCAL_DOCUMENT_MODELS_IMPORT]: localDocumentModelsPath,
+            })
+            : viteIgnoreStaticImport([LOCAL_DOCUMENT_MODELS_IMPORT]),
+        localDocumentEditorsPath
+            ? viteReplaceImports({
+                [LOCAL_DOCUMENT_EDITORS_IMPORT]: localDocumentEditorsPath,
+            })
+            : viteIgnoreStaticImport([LOCAL_DOCUMENT_EDITORS_IMPORT]),
+        enabled
+            ? viteLoadHMRModule(connectPath)
+            : viteIgnoreStaticImport([HMR_MODULE_IMPORT]),
+        {
+            name: "vite-plugin-connect-dev-studio",
+            enforce: "pre",
+            config(config) {
+                if (!config.build) {
+                    config.build = {};
+                }
+                if (!config.build.rollupOptions) {
+                    config.build.rollupOptions = {};
+                }
+                if (!Array.isArray(config.build.rollupOptions.external)) {
+                    config.build.rollupOptions.external = [];
+                }
+                const buildStudioExternals = enabled
+                    ? [...externalIds, ...STUDIO_IMPORTS]
+                    : STUDIO_IMPORTS;
+                config.build.rollupOptions.external.push(...buildStudioExternals);
+            },
+            closeBundle() {
+                if (!enabled) {
+                    fs.copyFileSync(fileURLToPath(import.meta.resolve("../hmr.js")), join(connectPath, "hmr.js"));
+                    // Copy the .env file to the dist folder
+                    fs.copyFileSync(join(connectPath, "../.env"), join(connectPath, ".env"));
+                }
+            },
+            configureServer(server) {
+                watchLocalFiles(server, localDocumentModelsPath, localDocumentEditorsPath);
+            },
+        },
+    ];
+}

package/dist/document-model-editor/components/button.d.ts

@@ -0,0 +1,4 @@
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=button.d.ts.map

package/dist/document-model-editor/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../document-model-editor/components/button.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM;;6DAYjB,CAAC"}

package/dist/document-model-editor/components/button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../utils/style.js";
+export const Button = forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    return (_jsx("button", { ref: ref, ...rest, className: cn("h-10 whitespace-nowrap rounded-md border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-800 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", className) }));
+});

package/dist/document-model-editor/components/code-editors/graphql-editor.d.ts

@@ -0,0 +1,10 @@
+import { Diagnostic } from "@codemirror/lint";
+type Props = {
+    doc: string;
+    readonly?: boolean;
+    updateDocumentInModel?: (newDoc: string) => void;
+    customLinter?: (doc: string) => Diagnostic[];
+};
+export declare const GraphqlEditor: import("react").NamedExoticComponent<Props>;
+export {};
+//# sourceMappingURL=graphql-editor.d.ts.map

package/dist/document-model-editor/components/code-editors/graphql-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql-editor.d.ts","sourceRoot":"","sources":["../../../../document-model-editor/components/code-editors/graphql-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAgB,MAAM,kBAAkB,CAAC;AAqB5D,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,UAAU,EAAE,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,aAAa,6CA0FxB,CAAC"}

package/dist/document-model-editor/components/code-editors/graphql-editor.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forceLinting } from "@codemirror/lint";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { getSchema, graphql } from "cm6-graphql";
+import { buildSchema, printSchema } from "graphql";
+import { memo, useEffect, useRef } from "react";
+import { ayuLight } from "thememirror";
+import { useSchemaContext } from "../../context/schema-context.js";
+import { baseEditorExtensions, baseKeymap, makeFocusHandler, makeLinter, makePasteHandler, makeUpdateHandler, useDocumentSync, useEditorCleanup, useEditorRefs, useHandlerReconfiguration, } from "./utils.js";
+export const GraphqlEditor = memo(function GraphqlEditor(props) {
+    const { doc, readonly = false, updateDocumentInModel, customLinter } = props;
+    const { editorRef, viewRef, updateListenerCompartment, focusHandlerCompartment, pasteHandlerCompartment, timeoutRef, } = useEditorRefs();
+    // GraphQL-specific refs
+    const graphqlCompartment = useRef(new Compartment());
+    const linterCompartment = useRef(new Compartment());
+    const sharedSchema = useSchemaContext();
+    useEffect(() => {
+        if (!viewRef.current) {
+            const schema = buildSchema(sharedSchema);
+            viewRef.current = new EditorView({
+                state: EditorState.create({
+                    doc,
+                    extensions: [
+                        ...baseEditorExtensions,
+                        keymap.of(baseKeymap),
+                        ayuLight,
+                        graphqlCompartment.current.of(graphql(schema)),
+                        linterCompartment.current.of(makeLinter(schema, customLinter)),
+                        updateListenerCompartment.current.of(makeUpdateHandler(readonly, timeoutRef, updateDocumentInModel)),
+                        focusHandlerCompartment.current.of(makeFocusHandler(readonly, timeoutRef, updateDocumentInModel)),
+                        pasteHandlerCompartment.current.of(makePasteHandler(readonly, timeoutRef, updateDocumentInModel)),
+                        EditorState.readOnly.of(readonly),
+                    ],
+                }),
+                parent: editorRef.current,
+            });
+            forceLinting(viewRef.current);
+        }
+    }, []);
+    useEditorCleanup(viewRef);
+    /* GraphQL-specific: Reconfigures the editor when the schema changes */
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view)
+            return;
+        // @ts-expect-error
+        const existingSchema = getSchema(view.state);
+        const existingSchemaString = existingSchema
+            ? printSchema(existingSchema)
+            : null;
+        if (!existingSchema || existingSchemaString !== sharedSchema) {
+            try {
+                const newSchema = buildSchema(sharedSchema);
+                view.dispatch({
+                    effects: [
+                        graphqlCompartment.current.reconfigure(graphql(newSchema)),
+                        linterCompartment.current.reconfigure(makeLinter(newSchema, customLinter)),
+                    ],
+                });
+                forceLinting(view);
+            }
+            catch (error) {
+                console.debug("in schema update", error);
+            }
+        }
+    }, [sharedSchema, customLinter]);
+    useHandlerReconfiguration(viewRef.current, readonly, timeoutRef, updateDocumentInModel, {
+        updateListener: updateListenerCompartment.current,
+        focusHandler: focusHandlerCompartment.current,
+        pasteHandler: pasteHandlerCompartment.current,
+    });
+    useDocumentSync(viewRef.current, doc);
+    return _jsx("div", { ref: editorRef });
+});

package/dist/document-model-editor/components/code-editors/json-editor.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    doc: string;
+    readonly?: boolean;
+    updateDocumentInModel?: (newDoc: string) => void;
+};
+export declare const JSONEditor: import("react").NamedExoticComponent<Props>;
+export {};
+//# sourceMappingURL=json-editor.d.ts.map

package/dist/document-model-editor/components/code-editors/json-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-editor.d.ts","sourceRoot":"","sources":["../../../../document-model-editor/components/code-editors/json-editor.tsx"],"names":[],"mappings":"AAkBA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,UAAU,6CA0DrB,CAAC"}

package/dist/document-model-editor/components/code-editors/json-editor.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { linter, forceLinting } from "@codemirror/lint";
+import { EditorState } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { memo, useEffect } from "react";
+import { ayuLight } from "thememirror";
+import { json, jsonLanguage, jsonParseLinter } from "@codemirror/lang-json";
+import { useEditorRefs, baseEditorExtensions, baseKeymap, makeUpdateHandler, makeFocusHandler, makePasteHandler, useEditorCleanup, useHandlerReconfiguration, useDocumentSync, } from "./utils.js";
+export const JSONEditor = memo(function JSONEditor(props) {
+    const { doc, readonly = false, updateDocumentInModel } = props;
+    const { editorRef, viewRef, updateListenerCompartment, focusHandlerCompartment, pasteHandlerCompartment, timeoutRef, } = useEditorRefs();
+    useEffect(() => {
+        if (!viewRef.current) {
+            viewRef.current = new EditorView({
+                state: EditorState.create({
+                    doc,
+                    extensions: [
+                        ...baseEditorExtensions,
+                        keymap.of(baseKeymap),
+                        ayuLight,
+                        jsonLanguage,
+                        json(),
+                        linter(jsonParseLinter()),
+                        updateListenerCompartment.current.of(makeUpdateHandler(readonly, timeoutRef, updateDocumentInModel)),
+                        focusHandlerCompartment.current.of(makeFocusHandler(readonly, timeoutRef, updateDocumentInModel)),
+                        pasteHandlerCompartment.current.of(makePasteHandler(readonly, timeoutRef, updateDocumentInModel)),
+                        EditorState.readOnly.of(readonly),
+                    ],
+                }),
+                parent: editorRef.current,
+            });
+            forceLinting(viewRef.current);
+        }
+    }, []);
+    useEditorCleanup(viewRef);
+    useHandlerReconfiguration(viewRef.current, readonly, timeoutRef, updateDocumentInModel, {
+        updateListener: updateListenerCompartment.current,
+        focusHandler: focusHandlerCompartment.current,
+        pasteHandler: pasteHandlerCompartment.current,
+    });
+    useDocumentSync(viewRef.current, doc);
+    return _jsx("div", { ref: editorRef });
+});