@sanity/workbench 0.0.1-alpha.0 → 0.1.0-alpha.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sanity.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/_internal.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Workbench configuration.
+ *
+ * @public
+ */
+export declare type Config = undefined;
+
+/**
+ * Creates a Module Federation instance, loads a remote workbench
+ * application, and renders it into the provided root element.
+ *
+ * @param rootElement - The DOM element to render into
+ * @param config - Workbench configuration (reserved for future use)
+ * @param options - Rendering options forwarded to the remote
+ * @returns A cleanup function that unmounts the remote application
+ *
+ * @public
+ */
+export declare function renderWorkbench(
+  rootElement: HTMLElement,
+  config?: Config,
+  options?: RenderWorkbenchOptions,
+): Promise<() => void>;
+
+/**
+ * Options for rendering the workbench.
+ *
+ * @public
+ */
+export declare interface RenderWorkbenchOptions {
+  reactStrictMode?: boolean;
+}
+
+export {};

package/dist/_internal.js

@@ -0,0 +1,38 @@
+import { createInstance } from "@sanity/federation/runtime";
+const REMOTE_NAME = "workbench-remote", REMOTE_MODULE = "App";
+async function renderWorkbench(rootElement, config, options) {
+  if (!rootElement)
+    throw new Error("Missing root element to mount application into");
+  const remoteUrl = import.meta.env.SANITY_INTERNAL_WORKBENCH_REMOTE_URL;
+  if (!remoteUrl)
+    throw new Error("SANITY_INTERNAL_WORKBENCH_REMOTE_URL is not set");
+  const mf = createInstance({
+    name: "sanity-workbench"
+  });
+  mf.registerRemotes([
+    {
+      name: REMOTE_NAME,
+      entry: remoteUrl
+    }
+  ]);
+  let remoteModule;
+  try {
+    remoteModule = await mf.loadRemote(
+      `${REMOTE_NAME}/${REMOTE_MODULE}`
+    );
+  } catch (error) {
+    throw new Error(
+      `Failed to load remote workbench module from "${remoteUrl}"`,
+      { cause: error }
+    );
+  }
+  if (!remoteModule || typeof remoteModule.render != "function")
+    throw new Error(
+      `Remote module from "${remoteUrl}" did not expose a render function`
+    );
+  return remoteModule.render(rootElement, config, options);
+}
+export {
+  renderWorkbench
+};
+//# sourceMappingURL=_internal.js.map

package/dist/_internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_internal.js","sources":["../src/_internal/render.ts"],"sourcesContent":["import { createInstance } from \"@sanity/federation/runtime\";\n\n/**\n * Workbench configuration.\n *\n * @public\n */\nexport type Config = undefined;\n\n/**\n * Options for rendering the workbench.\n *\n * @public\n */\nexport interface RenderWorkbenchOptions {\n  reactStrictMode?: boolean;\n}\n\ndeclare global {\n  interface ImportMetaEnv {\n    readonly SANITY_INTERNAL_WORKBENCH_REMOTE_URL: string;\n  }\n  interface ImportMeta {\n    readonly env: ImportMetaEnv;\n  }\n}\n\nconst REMOTE_NAME = \"workbench-remote\";\nconst REMOTE_MODULE = \"App\";\n\ninterface RemoteModule {\n  render(\n    rootElement: HTMLElement,\n    config?: Config,\n    options?: RenderWorkbenchOptions,\n  ): () => void;\n}\n\n/**\n * Creates a Module Federation instance, loads a remote workbench\n * application, and renders it into the provided root element.\n *\n * @param rootElement - The DOM element to render into\n * @param config - Workbench configuration (reserved for future use)\n * @param options - Rendering options forwarded to the remote\n * @returns A cleanup function that unmounts the remote application\n *\n * @public\n */\nexport async function renderWorkbench(\n  rootElement: HTMLElement,\n  config?: Config,\n  options?: RenderWorkbenchOptions,\n): Promise<() => void> {\n  if (!rootElement) {\n    throw new Error(\"Missing root element to mount application into\");\n  }\n\n  const remoteUrl = import.meta.env.SANITY_INTERNAL_WORKBENCH_REMOTE_URL;\n\n  if (!remoteUrl) {\n    throw new Error(\"SANITY_INTERNAL_WORKBENCH_REMOTE_URL is not set\");\n  }\n\n  const mf = createInstance({\n    name: \"sanity-workbench\",\n  });\n\n  mf.registerRemotes([\n    {\n      name: REMOTE_NAME,\n      entry: remoteUrl,\n    },\n  ]);\n\n  let remoteModule: RemoteModule | null;\n  try {\n    remoteModule = await mf.loadRemote<RemoteModule>(\n      `${REMOTE_NAME}/${REMOTE_MODULE}`,\n    );\n  } catch (error) {\n    throw new Error(\n      `Failed to load remote workbench module from \"${remoteUrl}\"`,\n      { cause: error },\n    );\n  }\n\n  if (!remoteModule || typeof remoteModule.render !== \"function\") {\n    throw new Error(\n      `Remote module from \"${remoteUrl}\" did not expose a render function`,\n    );\n  }\n\n  return remoteModule.render(rootElement, config, options);\n}\n"],"names":[],"mappings":";AA2BA,MAAM,cAAc,oBACd,gBAAgB;AAqBtB,eAAsB,gBACpB,aACA,QACA,SACqB;AACrB,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,gDAAgD;AAGlE,QAAM,YAAY,YAAY,IAAI;AAElC,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,iDAAiD;AAGnE,QAAM,KAAK,eAAe;AAAA,IACxB,MAAM;AAAA,EAAA,CACP;AAED,KAAG,gBAAgB;AAAA,IACjB;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT,CACD;AAED,MAAI;AACJ,MAAI;AACF,mBAAe,MAAM,GAAG;AAAA,MACtB,GAAG,WAAW,IAAI,aAAa;AAAA,IAAA;AAAA,EAEnC,SAAS,OAAO;AACd,UAAM,IAAI;AAAA,MACR,gDAAgD,SAAS;AAAA,MACzD,EAAE,OAAO,MAAA;AAAA,IAAM;AAAA,EAEnB;AAEA,MAAI,CAAC,gBAAgB,OAAO,aAAa,UAAW;AAClD,UAAM,IAAI;AAAA,MACR,uBAAuB,SAAS;AAAA,IAAA;AAIpC,SAAO,aAAa,OAAO,aAAa,QAAQ,OAAO;AACzD;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/workbench",
-  "version": "0.0.1-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Workbench component for the Sanity Content Operating System",
   "keywords": [],
   "homepage": "https://github.com/sanity-io/workbench/packages/@sanity/workbench#readme",
@@ -20,36 +20,30 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
-    ".": {
-      "source": "./src/index.tsx",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
+    "./_internal": {
+      "source": "./src/_exports/_internal.ts",
+      "default": "./dist/_internal.js"
     },
     "./package.json": "./package.json"
   },
-  "scripts": {
-    "build": "pkg build --strict --clean --check",
-    "check:lint": "oxlint",
-    "check:lint:fix": "oxlint --fix",
-    "check:types": "tsc --noEmit",
-    "dev": "pkg watch"
+  "dependencies": {
+    "@sanity/federation": "0.1.0-alpha.2"
   },
   "devDependencies": {
-    "@repo/oxc-config": "workspace:*",
-    "@repo/tsconfig": "workspace:*",
     "@sanity/pkg-utils": "^9.2.3",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "typescript": "catalog:"
-  },
-  "peerDependencies": {
-    "react": "catalog:",
-    "react-dom": "catalog:"
+    "typescript": "^5.9.2",
+    "@repo/oxc-config": "0.0.0",
+    "@repo/tsconfig": "0.0.1"
   },
   "browserslist": "extends @sanity/browserslist-config",
   "engines": {
     "node": ">=20.19.1 <22 || >=22.12"
+  },
+  "scripts": {
+    "build": "pkg build --strict --clean --check",
+    "check:lint": "oxlint",
+    "check:lint:fix": "oxlint --fix",
+    "check:types": "tsc --noEmit",
+    "dev": "pkg watch"
   }
-}
+}

package/src/_exports/_internal.ts

@@ -0,0 +1 @@
+export * from "../_internal";

package/src/_internal/index.ts

@@ -0,0 +1,2 @@
+export { renderWorkbench } from "./render";
+export type { Config, RenderWorkbenchOptions } from "./render";

package/src/_internal/render.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+
+import { renderWorkbench } from "./render";
+
+describe("renderWorkbench", () => {
+  it("throws when rootElement is missing", async () => {
+    await expect(
+      renderWorkbench(null as unknown as HTMLElement),
+    ).rejects.toThrow("Missing root element to mount application into");
+  });
+
+  it("throws when SANITY_INTERNAL_WORKBENCH_REMOTE_URL is not set", async () => {
+    const el = document.createElement("div");
+    await expect(renderWorkbench(el)).rejects.toThrow(
+      "SANITY_INTERNAL_WORKBENCH_REMOTE_URL is not set",
+    );
+  });
+});

package/src/_internal/render.ts

@@ -0,0 +1,95 @@
+import { createInstance } from "@sanity/federation/runtime";
+
+/**
+ * Workbench configuration.
+ *
+ * @public
+ */
+export type Config = undefined;
+
+/**
+ * Options for rendering the workbench.
+ *
+ * @public
+ */
+export interface RenderWorkbenchOptions {
+  reactStrictMode?: boolean;
+}
+
+declare global {
+  interface ImportMetaEnv {
+    readonly SANITY_INTERNAL_WORKBENCH_REMOTE_URL: string;
+  }
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
+}
+
+const REMOTE_NAME = "workbench-remote";
+const REMOTE_MODULE = "App";
+
+interface RemoteModule {
+  render(
+    rootElement: HTMLElement,
+    config?: Config,
+    options?: RenderWorkbenchOptions,
+  ): () => void;
+}
+
+/**
+ * Creates a Module Federation instance, loads a remote workbench
+ * application, and renders it into the provided root element.
+ *
+ * @param rootElement - The DOM element to render into
+ * @param config - Workbench configuration (reserved for future use)
+ * @param options - Rendering options forwarded to the remote
+ * @returns A cleanup function that unmounts the remote application
+ *
+ * @public
+ */
+export async function renderWorkbench(
+  rootElement: HTMLElement,
+  config?: Config,
+  options?: RenderWorkbenchOptions,
+): Promise<() => void> {
+  if (!rootElement) {
+    throw new Error("Missing root element to mount application into");
+  }
+
+  const remoteUrl = import.meta.env.SANITY_INTERNAL_WORKBENCH_REMOTE_URL;
+
+  if (!remoteUrl) {
+    throw new Error("SANITY_INTERNAL_WORKBENCH_REMOTE_URL is not set");
+  }
+
+  const mf = createInstance({
+    name: "sanity-workbench",
+  });
+
+  mf.registerRemotes([
+    {
+      name: REMOTE_NAME,
+      entry: remoteUrl,
+    },
+  ]);
+
+  let remoteModule: RemoteModule | null;
+  try {
+    remoteModule = await mf.loadRemote<RemoteModule>(
+      `${REMOTE_NAME}/${REMOTE_MODULE}`,
+    );
+  } catch (error) {
+    throw new Error(
+      `Failed to load remote workbench module from "${remoteUrl}"`,
+      { cause: error },
+    );
+  }
+
+  if (!remoteModule || typeof remoteModule.render !== "function") {
+    throw new Error(
+      `Remote module from "${remoteUrl}" did not expose a render function`,
+    );
+  }
+
+  return remoteModule.render(rootElement, config, options);
+}

package/dist/index.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: !0 });
-var jsxRuntime = require("react/jsx-runtime"), react = require("react"), client = require("react-dom/client");
-function Workbench(_props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "Hello World" });
-}
-function renderWorkbench(rootElement, config, options) {
-  if (!rootElement)
-    throw new Error("Missing root element to mount application into");
-  const root = client.createRoot(rootElement), workbench = /* @__PURE__ */ jsxRuntime.jsx(Workbench, { config });
-  return root.render(
-    options?.reactStrictMode ? /* @__PURE__ */ jsxRuntime.jsx(react.StrictMode, { children: workbench }) : workbench
-  ), () => root.unmount();
-}
-exports.renderWorkbench = renderWorkbench;
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.tsx"],"sourcesContent":["import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\ninterface WorkbenchProps {\n  config: undefined;\n}\n\nfunction Workbench(_props: WorkbenchProps) {\n  return <h1>Hello World</h1>;\n}\n\ninterface RenderWorkbenchOptions {\n  reactStrictMode: boolean;\n}\n\nexport function renderWorkbench(\n  rootElement: HTMLElement,\n  config: Config,\n  options?: RenderWorkbenchOptions,\n): () => void {\n  if (!rootElement) {\n    throw new Error(\"Missing root element to mount application into\");\n  }\n\n  const root = createRoot(rootElement);\n  const workbench = <Workbench config={config} />;\n\n  root.render(\n    options?.reactStrictMode ? <StrictMode>{workbench}</StrictMode> : workbench,\n  );\n\n  return () => root.unmount();\n}\n\nexport type Config = WorkbenchProps[\"config\"];\n"],"names":["jsx","createRoot","StrictMode"],"mappings":";;;AAOA,SAAS,UAAU,QAAwB;AACzC,SAAOA,2BAAAA,IAAC,QAAG,UAAA,cAAA,CAAW;AACxB;AAMO,SAAS,gBACd,aACA,QACA,SACY;AACZ,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,gDAAgD;AAGlE,QAAM,OAAOC,OAAAA,WAAW,WAAW,GAC7B,YAAYD,+BAAC,aAAU,QAAgB;AAE7C,SAAA,KAAK;AAAA,IACH,SAAS,kBAAkBA,+BAACE,MAAAA,YAAA,EAAY,qBAAU,IAAgB;AAAA,EAAA,GAG7D,MAAM,KAAK,QAAA;AACpB;;"}

package/dist/index.js

@@ -1,18 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-function Workbench(_props) {
-  return /* @__PURE__ */ jsx("h1", { children: "Hello World" });
-}
-function renderWorkbench(rootElement, config, options) {
-  if (!rootElement)
-    throw new Error("Missing root element to mount application into");
-  const root = createRoot(rootElement), workbench = /* @__PURE__ */ jsx(Workbench, { config });
-  return root.render(
-    options?.reactStrictMode ? /* @__PURE__ */ jsx(StrictMode, { children: workbench }) : workbench
-  ), () => root.unmount();
-}
-export {
-  renderWorkbench
-};
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\ninterface WorkbenchProps {\n  config: undefined;\n}\n\nfunction Workbench(_props: WorkbenchProps) {\n  return <h1>Hello World</h1>;\n}\n\ninterface RenderWorkbenchOptions {\n  reactStrictMode: boolean;\n}\n\nexport function renderWorkbench(\n  rootElement: HTMLElement,\n  config: Config,\n  options?: RenderWorkbenchOptions,\n): () => void {\n  if (!rootElement) {\n    throw new Error(\"Missing root element to mount application into\");\n  }\n\n  const root = createRoot(rootElement);\n  const workbench = <Workbench config={config} />;\n\n  root.render(\n    options?.reactStrictMode ? <StrictMode>{workbench}</StrictMode> : workbench,\n  );\n\n  return () => root.unmount();\n}\n\nexport type Config = WorkbenchProps[\"config\"];\n"],"names":[],"mappings":";;;AAOA,SAAS,UAAU,QAAwB;AACzC,SAAO,oBAAC,QAAG,UAAA,cAAA,CAAW;AACxB;AAMO,SAAS,gBACd,aACA,QACA,SACY;AACZ,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,gDAAgD;AAGlE,QAAM,OAAO,WAAW,WAAW,GAC7B,YAAY,oBAAC,aAAU,QAAgB;AAE7C,SAAA,KAAK;AAAA,IACH,SAAS,kBAAkB,oBAAC,YAAA,EAAY,qBAAU,IAAgB;AAAA,EAAA,GAG7D,MAAM,KAAK,QAAA;AACpB;"}

package/src/index.tsx

@@ -1,35 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-interface WorkbenchProps {
-  config: undefined;
-}
-
-function Workbench(_props: WorkbenchProps) {
-  return <h1>Hello World</h1>;
-}
-
-interface RenderWorkbenchOptions {
-  reactStrictMode: boolean;
-}
-
-export function renderWorkbench(
-  rootElement: HTMLElement,
-  config: Config,
-  options?: RenderWorkbenchOptions,
-): () => void {
-  if (!rootElement) {
-    throw new Error("Missing root element to mount application into");
-  }
-
-  const root = createRoot(rootElement);
-  const workbench = <Workbench config={config} />;
-
-  root.render(
-    options?.reactStrictMode ? <StrictMode>{workbench}</StrictMode> : workbench,
-  );
-
-  return () => root.unmount();
-}
-
-export type Config = WorkbenchProps["config"];