@checkstack/ui 1.13.1 → 1.14.0

package/.storybook/main.ts

@@ -1,31 +1,19 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { mergeConfig } from "vite";
+import { monacoViteConfig } from "../src/vite-monaco";
 
 const storybookDir = path.dirname(fileURLToPath(import.meta.url));
 const uiRoot = path.resolve(storybookDir, "..");
-const localRequire = createRequire(import.meta.url);
 
-// Resolve the `vscode` npm-alias (= @codingame/monaco-vscode-extension-api) to
-// an absolute path so Vite/Rolldown can alias it. This mirrors the same fix in
-// core/frontend/vite.config.ts.
-//
-// `CodeEditor` (via @typefox/monaco-editor-react + monaco-languageclient) pulls
-// in the @codingame/monaco-vscode-* stack, whose runtime package does
-// `require("vscode")`. Under bun's isolated node_modules the `"vscode":
-// "npm:@codingame/monaco-vscode-extension-api"` alias only exists inside the
-// typefox / monaco-languageclient scopes, so the Storybook build can't resolve
-// a bare `vscode` import and fails with "Rolldown failed to resolve import
-// 'vscode'". We resolve the alias *through* @typefox so the path follows bun's
-// store layout on any machine/CI rather than being hardcoded.
-const typefoxDir = path.dirname(
-  localRequire.resolve("@typefox/monaco-editor-react", { paths: [uiRoot] }),
-);
-const vscodeApiDir = path.dirname(
-  localRequire.resolve("vscode", { paths: [typefoxDir] }),
-);
+// Shared Monaco editor Vite settings (ES-module workers + the `vscode` alias),
+// from @checkstack/ui's monacoViteConfig helper — the SAME settings the app's
+// vite.config.ts and @checkstack/dev-server use, so the three configs never
+// drift. `CodeEditor` (via @typefox/monaco-editor-react + monaco-languageclient)
+// pulls in the @codingame/monaco-vscode-* stack whose runtime does
+// `require("vscode")`; the alias resolves it under bun's isolated store.
+const monaco = monacoViteConfig({ resolveFrom: [uiRoot] });
 
 const config: StorybookConfig = {
   stories: [
@@ -46,19 +34,8 @@ const config: StorybookConfig = {
   },
   viteFinal: (viteConfig) =>
     mergeConfig(viteConfig, {
-      // The @typefox/monaco-editor-react + @codingame/monaco-vscode-* stack
-      // loads its language services in ES module workers.
-      worker: {
-        format: "es",
-      },
-      resolve: {
-        alias: {
-          // Alias the `vscode` npm-alias to its real package dir so @codingame's
-          // CJS `require("vscode")` resolves under bun's isolated store instead
-          // of failing the build.
-          vscode: vscodeApiDir,
-        },
-      },
+      worker: monaco.worker,
+      resolve: { alias: { ...monaco.resolve.alias } },
     }),
 };
 

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @checkstack/ui
 
+## 1.14.0
+
+### Minor Changes
+
+- ed251b6: Make `@checkstack/ui`'s Monaco `CodeEditor` render in standalone `bun run dev`, and consolidate the Monaco editor Vite settings into one shared helper so they can't drift.
+
+  - **Shared config (now in `@checkstack/ui`).** `@checkstack/ui` exports a `monacoViteConfig` helper (`@checkstack/ui/src/vite-monaco`) with the editor's Vite settings - `worker.format: "es"` and the `vscode` resolve alias (so `require("vscode")` doesn't leak into the browser). `@checkstack/ui` owns `CodeEditor` and the editor dependencies, so all three consumers now share one source: the app's `vite.config.ts`, `@checkstack/dev-server`, and `@checkstack/ui`'s own Storybook config (each previously hand-rolled its own copy).
+  - **Pre-built workers (dev server).** In a standalone plugin, `@checkstack/ui` is a _pre-bundled npm dependency_, and Vite's dependency optimizer can't process the Monaco language workers it imports via `?worker&url` - the dev server used to crash (and serving `@checkstack/ui` as source instead broke the CJS/ESM interop of its other deps). The dev server now pre-builds the three Monaco workers (editor / TypeScript / JSON) into static ES-module bundles, serves them, and redirects the `?worker&url` imports to them via `resolve.alias` (which applies during pre-bundling). `@checkstack/ui` stays pre-bundled and the workers resolve, so the editor renders. Builds are content-addressed and cached under `node_modules/.cache/checkstack-dev-monaco` (concurrency-safe atomic promotion), so only the first run after a dependency change pays the build cost. React is deduped so the editor's hooks share the dev shell's React instance.
+
+- 968c12f: Make installed (runtime) frontend plugins actually load, via Module Federation 2.0. Previously a packed external plugin's frontend could not run: the host only shared React/router with runtime plugins, and there was no working way to share the framework/UI singletons (hand-rolled import-map externalisation hit an unsolvable rolldown CJS-interop wall).
+
+  - **Host (`@checkstack/frontend`)** now uses `@module-federation/vite` as an MF host and loads runtime plugins through the MF runtime (`registerRemotes` + `loadRemote`) instead of a raw `import()`. The shared set (react, react-dom, react-router-dom, @tanstack/react-query, @checkstack/frontend-api) is owned by the host; plugins reuse those exact instances via the share scope. The old hand-rolled vendor build + import map are removed.
+  - **`@checkstack/ui`** is bundled per consumer (tree-shaken); its Theme / Toast / Performance React contexts are unified across the host and bundled-in-plugin copies via a registered (globalThis-keyed) context, so a plugin's `useTheme`/`useToast`/`usePerformance` resolve to the host's providers. The ONE exception is the Monaco / VS Code **CodeEditor**, now exposed as the `@checkstack/ui/code-editor` subpath and shared as an MF singleton: the host owns the single editor instance (and builds its `?worker&url` workers), and plugins reuse it. A plugin can now render `<CodeEditor>` (directly or via `ScriptTestPanel` / template/JSON fields) without bundling Monaco.
+  - **Scaffold + pack (`@checkstack/scripts`)** build frontend plugins as MF remotes (`vite build` with the federation plugin, exposing `./plugin`, manifest enabled, DTS disabled). The CodeEditor is shared with `import: false` so the plugin is a consume-only participant - it never bundles a local fallback of the editor, keeping the heavy `@codingame/*` / `monaco-languageclient` / `vscode` subtree out of the plugin entirely (so no `vscode` alias or ES-worker config is needed in the plugin build). `plugin-pack` builds frontend packages with `NODE_ENV=production` (the MF plugin skips the remote under `NODE_ENV=test`) and ships only `dist/`. The scaffolded route now declares a `nav` entry so it appears in the sidebar.
+  - **Backend (`@checkstack/backend`)** serves a plugin's MF assets under its (possibly scoped) package name (`/assets/plugins/@scope/name/*`), with correct content types, and the SPA catch-all defers those paths so the federation manifest/remoteEntry are not shadowed by `index.html`.
+
+  Verified end-to-end by the external-plugin install E2E (scaffold → pack → install via the Plugin Manager UI → frontend + backend + co-loaded core plugins all work).
+
+### Patch Changes
+
+- @checkstack/common@0.14.1
+- @checkstack/frontend-api@0.7.2
+- @checkstack/template-engine@0.4.2
+
+## 1.13.2
+
+### Patch Changes
+
+- Updated dependencies [1fee9da]
+  - @checkstack/common@0.14.1
+  - @checkstack/frontend-api@0.7.2
+  - @checkstack/template-engine@0.4.2
+
 ## 1.13.1
 
 ### Patch Changes

package/package.json

@@ -1,13 +1,21 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./code-editor": "./src/components/CodeEditor/index.ts",
+    "./package.json": "./package.json",
+    "./src/vite-monaco": "./src/vite-monaco.ts",
+    "./src/components/CodeEditor/generateTypeDefinitions": "./src/components/CodeEditor/generateTypeDefinitions.ts",
+    "./src/*": "./src/*"
+  },
   "dependencies": {
-    "@checkstack/common": "0.13.0",
-    "@checkstack/frontend-api": "0.7.0",
-    "@checkstack/template-engine": "0.4.0",
+    "@checkstack/common": "0.14.1",
+    "@checkstack/frontend-api": "0.7.2",
+    "@checkstack/template-engine": "0.4.2",
     "@codingame/monaco-vscode-editor-api": "25.1.2",
     "@codingame/monaco-vscode-languages-service-override": "25.1.2",
     "@codingame/monaco-vscode-standalone-json-language-features": "25.1.2",
@@ -43,7 +51,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.4.0",
+    "@checkstack/scripts": "0.5.0",
     "@checkstack/test-utils-frontend": "0.1.0",
     "@checkstack/tsconfig": "0.0.7",
     "@storybook/addon-a11y": "^10.4.1",

package/src/components/DynamicForm/JsonField.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import Ajv from "ajv";
 import addFormats from "ajv-formats";
 
-import { CodeEditor } from "../CodeEditor";
+// Deep package specifier (not "../CodeEditor"): routes through the Module
+// Federation shared singleton so this never bundles its own Monaco copy.
+import { CodeEditor } from "@checkstack/ui/code-editor";
 import type { JsonFieldProps } from "./types";
 
 const ajv = new Ajv({ allErrors: true, strict: false });

package/src/components/DynamicForm/MultiTypeEditorField.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import { Label } from "../Label";
 import { Textarea } from "../Textarea";
+// Deep package specifier (not "../CodeEditor"): routes the CodeEditor value
+// through the Module Federation shared singleton (see core/ui/src/index.ts).
 import {
   CodeEditor,
   type TemplateProperty,
   type AcquireTypes,
   type AcquiredTypeFile,
-} from "../CodeEditor";
+} from "@checkstack/ui/code-editor";
 import {
   Select,
   SelectContent,

package/src/components/PerformanceProvider.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useToast } from "./ToastProvider";
+import { createRegisteredContext } from "../utils/registered-context";
 
 const STORAGE_KEY = "checkstack-low-power";
 
@@ -17,12 +18,17 @@ interface PerformanceContextValue {
   toggleManualLowPower: () => void;
 }
 
-const PerformanceContext = createContext<PerformanceContextValue>({
-  isLowPower: false,
-  isLoaded: false,
-  manualLowPower: false,
-  toggleManualLowPower: () => {},
-});
+// Registered (singleton) context: @checkstack/ui is bundled per consumer, but
+// the host's provider and a plugin's usePerformance() must share one context.
+const PerformanceContext = createRegisteredContext<PerformanceContextValue>(
+  "checkstack.ui.performance",
+  {
+    isLowPower: false,
+    isLoaded: false,
+    manualLowPower: false,
+    toggleManualLowPower: () => {},
+  },
+);
 
 /**
  * usePerformance - Hook to access the global hardware performance state.

package/src/components/ScriptTestPanel.tsx

@@ -11,7 +11,9 @@ import { Button } from "./Button";
 import { Badge } from "./Badge";
 import { Input } from "./Input";
 import { Label } from "./Label";
-import { CodeEditor } from "./CodeEditor";
+// Deep package specifier (not "./CodeEditor"): routes through the Module
+// Federation shared singleton so this never bundles its own Monaco copy.
+import { CodeEditor } from "@checkstack/ui/code-editor";
 import { cn } from "../utils";
 import { usePerformance } from "./PerformanceProvider";
 import {

package/src/components/TemplateInput.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { CodeEditor, type TemplateProperty } from "./CodeEditor";
+// Deep package specifier (not "./CodeEditor"): routes the CodeEditor value
+// through the Module Federation shared singleton (see core/ui/src/index.ts).
+import {
+  CodeEditor,
+  type TemplateProperty,
+} from "@checkstack/ui/code-editor";
 import { TemplateValueInput } from "./TemplateValueInput";
 
 /**

package/src/components/ThemeProvider.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
+import { createRegisteredContext } from "../utils/registered-context";
 
 type Theme = "light" | "dark" | "system";
 
@@ -29,7 +30,12 @@ const initialState: ThemeProviderState = {
   },
 };
 
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+// Registered (singleton) context: shared between the host's provider and a
+// plugin's useTheme() even though @checkstack/ui is bundled per consumer.
+const ThemeProviderContext = createRegisteredContext<ThemeProviderState>(
+  "checkstack.ui.theme",
+  initialState,
+);
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   children,

package/src/components/ToastProvider.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useState, useCallback } from "react";
+import React, { useContext, useState, useCallback } from "react";
 import { Toast } from "./Toast";
+import { createRegisteredContext } from "../utils/registered-context";
 
 type ToastVariant = "default" | "success" | "error" | "warning" | "info";
 
@@ -26,7 +27,11 @@ interface ToastContextValue {
   info: (message: string, duration?: number) => void;
 }
 
-const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+// Registered (singleton) context: shared between the host's provider and a
+// plugin's useToast() even though @checkstack/ui is bundled per consumer.
+const ToastContext = createRegisteredContext<ToastContextValue | undefined>(
+  "checkstack.ui.toast",
+);
 
 export const useToast = (): ToastContextValue => {
   const context = useContext(ToastContext);

package/src/index.ts

@@ -60,7 +60,13 @@ export * from "./components/CommandPalette";
 export * from "./components/TerminalFeed";
 export * from "./components/PerformanceProvider";
 export * from "./components/AmbientBackground";
-export * from "./components/CodeEditor";
+// The CodeEditor (Monaco / VS Code) stack is re-exported via the package's own
+// deep specifier - NOT the relative "./components/CodeEditor" - so Module
+// Federation can treat it as a shared singleton. The host owns the one editor
+// instance (and builds its workers); runtime plugins reuse it via the share
+// scope instead of bundling Monaco. The rest of @checkstack/ui stays bundled
+// per consumer. See core/frontend/vite.config.ts `shared`.
+export * from "@checkstack/ui/code-editor";
 export * from "./components/TemplateValueInput";
 export * from "./components/VariablePicker";
 export * from "./components/TemplateInput";

package/src/utils/registered-context.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "bun:test";
+import { createRegisteredContext } from "./registered-context";
+
+describe("createRegisteredContext", () => {
+  it("returns the SAME context instance for a repeated key (singleton)", () => {
+    // Simulates two bundled copies of @checkstack/ui registering the same
+    // context: the second call must reuse the first's instance.
+    const first = createRegisteredContext<number>("test.same", 1);
+    const second = createRegisteredContext<number>("test.same", 999);
+    expect(second).toBe(first);
+  });
+
+  it("returns distinct contexts for distinct keys", () => {
+    const a = createRegisteredContext<number>("test.a", 0);
+    const b = createRegisteredContext<number>("test.b", 0);
+    expect(a).not.toBe(b);
+  });
+
+  it("supports an omitted default for an undefined-capable T", () => {
+    const ctx = createRegisteredContext<string | undefined>("test.optional");
+    expect(ctx).toBeDefined();
+    // Re-registration under the same key still returns the same instance.
+    expect(createRegisteredContext<string | undefined>("test.optional")).toBe(
+      ctx,
+    );
+  });
+});

package/src/utils/registered-context.ts

@@ -0,0 +1,68 @@
+import { createContext, type Context } from "react";
+
+/**
+ * A `React.createContext` replacement whose context object is registered in a
+ * process-global registry keyed by a stable string.
+ *
+ * ## Why this exists
+ *
+ * `@checkstack/ui` is NOT a shared (vendored / import-mapped) singleton — it is
+ * bundled into every consumer (the host app AND each runtime plugin) so it can
+ * be tree-shaken (a plugin using a couple of components ships a couple of KB,
+ * not the whole 2 MB kit incl. Monaco/recharts). See the runtime
+ * frontend-plugin sharing design.
+ *
+ * But a few of its values MUST behave as singletons: the Theme / Toast /
+ * Performance React contexts. The host mounts the providers; a plugin's
+ * components call the matching hooks. With `@checkstack/ui` duplicated per
+ * bundle, a plain `createContext()` would create a DIFFERENT context object in
+ * each copy, so a plugin's `usePerformance()` would read its own empty context
+ * instead of the host's provider value.
+ *
+ * Registering the context on `globalThis` by key fixes that: whichever copy
+ * loads first (always the host, which boots before any plugin) creates and
+ * registers the context; every later copy returns that same instance. React
+ * itself is the shared singleton (resolved via the import map), so the context
+ * object is usable across the bundles. This is the well-established
+ * "singleton context" pattern for shared React context from a bundled-per-MFE
+ * library (cf. `@indeedeng/react-singleton-context`).
+ *
+ * Only contexts that are genuinely shared between host and plugins need this;
+ * purely internal component state should keep using plain `createContext`.
+ */
+
+const REGISTRY_KEY = "__checkstackUiContextRegistry__";
+
+// The registry stores contexts for heterogeneous value types keyed by string,
+// so it cannot be typed per key; values are stored as `Context<unknown>` and
+// narrowed back by the caller's `T` on read. This single, contained cast is
+// the reason the registry is wrapped in this helper instead of inlined.
+type ContextRegistry = Map<string, Context<unknown>>;
+
+function getRegistry(): ContextRegistry {
+  const holder = globalThis as typeof globalThis & {
+    [REGISTRY_KEY]?: ContextRegistry;
+  };
+  holder[REGISTRY_KEY] ??= new Map<string, Context<unknown>>();
+  return holder[REGISTRY_KEY];
+}
+
+export function createRegisteredContext<T>(
+  key: string,
+  // Optional so callers whose `T` includes `undefined` (a context that is
+  // absent until a provider mounts) can omit it rather than pass a literal
+  // `undefined` argument.
+  ...defaultValue: [T] | []
+): Context<T> {
+  const registry = getRegistry();
+  const existing = registry.get(key);
+  if (existing) {
+    // Safe by construction: a given `key` is always created with the same `T`.
+    return existing as Context<T>;
+  }
+  // `defaultValue[0]` is `undefined` only when the caller omitted it, in which
+  // case `T` includes `undefined`; otherwise it is the provided `T`.
+  const context = createContext<T>(defaultValue[0] as T);
+  registry.set(key, context as Context<unknown>);
+  return context;
+}

package/src/vite-monaco.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from "bun:test";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { monacoViteConfig } from "./vite-monaco";
+
+// `@typefox/monaco-editor-react` + the `vscode` npm-alias live in
+// `@checkstack/ui`'s dependencies (this package's root).
+const UI_DIR = path.resolve(import.meta.dir, "..");
+
+describe("monacoViteConfig", () => {
+  it("returns the ES-module worker format the @codingame workers require", () => {
+    const config = monacoViteConfig({ resolveFrom: [UI_DIR] });
+    expect(config.worker.format).toBe("es");
+  });
+
+  it("resolves the `vscode` alias to the real @codingame package dir", () => {
+    const config = monacoViteConfig({ resolveFrom: [UI_DIR] });
+    const vscodeDir = config.resolve.alias.vscode;
+    // The alias must point at @codingame/monaco-vscode-extension-api on disk
+    // (the package `require("vscode")` actually resolves to), not the bare
+    // `vscode` specifier that leaks a runtime require into the browser.
+    expect(vscodeDir).toContain("monaco-vscode");
+    expect(path.isAbsolute(vscodeDir)).toBe(true);
+    expect(existsSync(vscodeDir)).toBe(true);
+  });
+});

package/src/vite-monaco.ts

@@ -0,0 +1,60 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+
+/**
+ * Shared Vite settings required to bundle the Monaco / VS Code editor stack
+ * that `@checkstack/ui`'s `CodeEditor` pulls in (`@typefox/monaco-editor-react`
+ * + `monaco-languageclient` + `@codingame/monaco-vscode-*`).
+ *
+ * Lives here in `@checkstack/ui` (which owns `CodeEditor` and the editor
+ * dependencies) so every consumer can share one source instead of drifting:
+ * `@checkstack/frontend`'s `vite.config.ts`, `@checkstack/dev-server`'s
+ * standalone-plugin dev config, and `@checkstack/ui`'s own Storybook config.
+ *
+ * Two settings are required:
+ *
+ * - `worker.format: "es"` - the `@codingame` language-feature workers are ES
+ *   modules; the default (iife) worker format cannot bundle them.
+ * - `resolve.alias.vscode` - `@typefox/monaco-editor-react` and
+ *   `monaco-languageclient` declare `"vscode": "npm:@codingame/monaco-vscode-extension-api"`,
+ *   but the package that actually does `require("vscode")` at runtime
+ *   (`@codingame/monaco-vscode-api`) has no `vscode` in its own scope under
+ *   bun's isolated `node_modules`. Aliasing every `vscode` specifier to the
+ *   real package dir resolves it (otherwise a runtime `require` leaks into the
+ *   browser).
+ */
+export interface MonacoViteConfig {
+  worker: { format: "es" };
+  resolve: { alias: { vscode: string } };
+}
+
+/**
+ * Build the Monaco-related Vite settings, resolving the `vscode` npm-alias to
+ * an absolute path so Vite can alias it.
+ *
+ * `resolveFrom` are candidate base dirs from which
+ * `@typefox/monaco-editor-react` (and, through it, the `vscode` alias) can be
+ * resolved: `core/ui` in the monorepo, or the plugin's installed
+ * `@checkstack/ui` location in a standalone scaffold. The path follows bun's
+ * store layout on any machine rather than being hardcoded.
+ *
+ * Throws if the editor stack cannot be resolved (e.g. `@checkstack/ui` is not
+ * installed). Callers that must degrade gracefully should wrap the call.
+ */
+export function monacoViteConfig({
+  resolveFrom,
+}: {
+  resolveFrom: string[];
+}): MonacoViteConfig {
+  const req = createRequire(import.meta.url);
+  const typefoxDir = path.dirname(
+    req.resolve("@typefox/monaco-editor-react", { paths: resolveFrom }),
+  );
+  const vscodeApiDir = path.dirname(
+    req.resolve("vscode", { paths: [typefoxDir] }),
+  );
+  return {
+    worker: { format: "es" },
+    resolve: { alias: { vscode: vscodeApiDir } },
+  };
+}