@miragon/modeler-shell 0.0.0-stage → 0.1.0

package/dist/testing-vscode-stub.js

@@ -0,0 +1,154 @@
+import {
+  connectThemeBridge,
+  currentAppearance,
+  renderWebviewHtml
+} from "./chunk-RJRFR6N3.js";
+import "./chunk-N4QXFF3A.js";
+import "./chunk-5JSZ4VGA.js";
+
+// src/testing/vscode-stub.ts
+var BODY_CLASSES = {
+  1: ["vscode-light"],
+  2: ["vscode-dark"],
+  3: ["vscode-high-contrast"],
+  4: ["vscode-high-contrast-light", "vscode-high-contrast"]
+};
+var ALL_BODY_CLASSES = Object.values(BODY_CLASSES).flat();
+var REDUCE_MOTION_BODY_CLASS = "vscode-reduce-motion";
+var VSCODE_DEFAULT_STYLES = `@layer vscode-default {
+  body { margin: 0; padding: 0 20px; color: currentColor; font-family: serif; font-size: 17px; }
+  kbd { box-shadow: inset 0 -1px 0 currentColor; vertical-align: middle; padding: 1px 3px; border-radius: 3px; font-family: serif; }
+  code { font-family: serif; padding: 1px 3px; border-radius: 4px; }
+  a:focus, input:focus, select:focus, textarea:focus { outline: 1px solid -webkit-focus-ring-color; outline-offset: -1px; }
+}`;
+var STUB_SETTING_KEY = "miragon.modeler.colorTheme";
+function colorThemeKindOf(appearance) {
+  if (appearance.kontrast) return appearance.theme === "dark" ? 3 : 4;
+  return appearance.theme === "dark" ? 2 : 1;
+}
+function stubOptionsFromSearch(search) {
+  const params = new URLSearchParams(search);
+  const theme = params.get("theme") === "dark" ? "dark" : "light";
+  const setting = params.get("colorTheme");
+  return {
+    requested: params.get("kontrast") === "hoch" ? { theme, kontrast: "hoch" } : { theme },
+    colorTheme: setting === "automatic" || setting === "light" || setting === "dark" ? setting : void 0,
+    reduceMotion: params.has("reduceMotion")
+  };
+}
+function installVsCodeWebviewStub(options) {
+  const settingKey = options.settingKey ?? STUB_SETTING_KEY;
+  const scope = window;
+  let kind = colorThemeKindOf(options.requested);
+  let setting = options.colorTheme;
+  const themeListeners = /* @__PURE__ */ new Set();
+  const configurationListeners = /* @__PURE__ */ new Set();
+  const vscode = {
+    window: {
+      get activeColorTheme() {
+        return { kind };
+      },
+      onDidChangeActiveColorTheme(listener) {
+        themeListeners.add(listener);
+        return { dispose: () => themeListeners.delete(listener) };
+      }
+    },
+    workspace: {
+      getConfiguration: (section) => ({
+        get: (key) => (section ? `${section}.${key}` : key) === settingKey ? setting : void 0
+      }),
+      onDidChangeConfiguration(listener) {
+        configurationListeners.add(listener);
+        return { dispose: () => configurationListeners.delete(listener) };
+      }
+    }
+  };
+  const none = { dispose: () => void 0 };
+  let posted = 0;
+  let delivered = 0;
+  window.addEventListener("message", () => delivered++);
+  const panel = {
+    webview: {
+      postMessage(message) {
+        posted++;
+        window.postMessage(message, "*");
+      }
+    },
+    visible: true,
+    onDidChangeViewState: () => none,
+    onDidDispose: () => none
+  };
+  const bridgeOptions = { themes: options.themes, settingKey };
+  const defaults = document.createElement("style");
+  defaults.id = "_defaultStyles";
+  defaults.textContent = VSCODE_DEFAULT_STYLES;
+  document.head.prepend(defaults);
+  const html = new DOMParser().parseFromString(
+    renderWebviewHtml({
+      cspSource: window.location.origin,
+      scriptUri: "webview.js",
+      title: document.title,
+      lang: options.lang ?? "en",
+      appearance: currentAppearance(vscode, bridgeOptions)
+    }),
+    "text/html"
+  ).documentElement;
+  for (const name of html.getAttributeNames()) {
+    if (name === "class") document.documentElement.classList.add(...html.classList);
+    else document.documentElement.setAttribute(name, html.getAttribute(name) ?? "");
+  }
+  const setBodyClasses = (next) => {
+    document.body.classList.remove(...ALL_BODY_CLASSES);
+    document.body.classList.add(...BODY_CLASSES[next]);
+  };
+  setBodyClasses(kind);
+  document.body.classList.toggle(REDUCE_MOTION_BODY_CLASS, options.reduceMotion === true);
+  connectThemeBridge(vscode, panel, bridgeOptions);
+  let state = options.state;
+  const sent = [];
+  let acquired = false;
+  scope.acquireVsCodeApi = () => {
+    if (acquired) throw new Error("An instance of the VS Code API has already been acquired");
+    acquired = true;
+    return {
+      getState: () => state,
+      setState(next) {
+        state = next;
+      },
+      postMessage(message) {
+        sent.push(message);
+      }
+    };
+  };
+  const stub = {
+    get kind() {
+      return kind;
+    },
+    setColorThemeKind(next) {
+      kind = next;
+      setBodyClasses(next);
+      for (const listener of [...themeListeners]) listener({ kind: next });
+    },
+    setColorTheme(next) {
+      setting = next;
+      for (const listener of [...configurationListeners]) {
+        listener({ affectsConfiguration: (section) => settingKey.startsWith(section) });
+      }
+    },
+    setReduceMotion(reduceMotion) {
+      document.body.classList.toggle(REDUCE_MOTION_BODY_CLASS, reduceMotion);
+    },
+    pendingMessages: () => posted - delivered,
+    posted: sent,
+    state: () => state
+  };
+  scope.__modelerShellVsCodeStub = stub;
+  return stub;
+}
+export {
+  STUB_SETTING_KEY,
+  colorThemeKindOf,
+  installVsCodeWebviewStub,
+  stubOptionsFromSearch
+};
+//# sourceMappingURL=testing-vscode-stub.js.map

package/dist/testing-vscode-stub.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/testing/vscode-stub.ts"],"sourcesContent":["import type { Appearance, ColorThemeSetting, Theme } from \"../core/index.js\";\nimport {\n  connectThemeBridge,\n  currentAppearance,\n  renderWebviewHtml,\n  type ColorThemeLike,\n  type DisposableLike,\n  type VsCodeLike,\n  type WebviewPanelLike,\n} from \"../vscode/extension/index.js\";\n\n/*\n * Runs in the page, in front of a modeler's webview bundle: a stand-in for the VS Code around it,\n * so a modeler's e2e suite runs the conformance kit for the `ide` host without VS Code.\n */\n\n/** `vscode.ColorThemeKind`: 1 Light, 2 Dark, 3 High Contrast, 4 High Contrast Light. */\nexport type ColorThemeKind = 1 | 2 | 3 | 4;\n\n/** The body classes VS Code's webview host page sets per color theme (High Contrast Light keeps both). */\nconst BODY_CLASSES: Readonly<Record<ColorThemeKind, readonly string[]>> = {\n  1: [\"vscode-light\"],\n  2: [\"vscode-dark\"],\n  3: [\"vscode-high-contrast\"],\n  4: [\"vscode-high-contrast-light\", \"vscode-high-contrast\"],\n};\nconst ALL_BODY_CLASSES = Object.values(BODY_CLASSES).flat();\nconst REDUCE_MOTION_BODY_CLASS = \"vscode-reduce-motion\";\n\n/**\n * The rules of VS Code's default webview stylesheet the shell's own-document reset must beat\n * (implementation notes, \"VS Code: host hygiene\"), with deliberately foreign values so a leak shows.\n */\nconst VSCODE_DEFAULT_STYLES = `@layer vscode-default {\n  body { margin: 0; padding: 0 20px; color: currentColor; font-family: serif; font-size: 17px; }\n  kbd { box-shadow: inset 0 -1px 0 currentColor; vertical-align: middle; padding: 1px 3px; border-radius: 3px; font-family: serif; }\n  code { font-family: serif; padding: 1px 3px; border-radius: 4px; }\n  a:focus, input:focus, select:focus, textarea:focus { outline: 1px solid -webkit-focus-ring-color; outline-offset: -1px; }\n}`;\n\n/** The default setting key the stub answers when `colorTheme` is given without one. */\nexport const STUB_SETTING_KEY = \"miragon.modeler.colorTheme\";\n\n/** The VS Code color theme that requests `appearance` (guide §13.3). */\nexport function colorThemeKindOf(appearance: Appearance): ColorThemeKind {\n  if (appearance.kontrast) return appearance.theme === \"dark\" ? 3 : 4;\n  return appearance.theme === \"dark\" ? 2 : 1;\n}\n\nexport interface VsCodeWebviewStubOptions {\n  /** What VS Code requests: its color theme, as the appearance the kit asks for. */\n  requested: Appearance;\n  /** The modes the modeler declares (what its extension passes to the theme bridge). */\n  themes: readonly Theme[];\n  /** `<html lang>`; default `\"en\"`. */\n  lang?: string | undefined;\n  /** The value of the modeler's `colorTheme` setting (from its dark-mode release on). */\n  colorTheme?: ColorThemeSetting | undefined;\n  /** The full setting key the stub answers and the bridge listens to; default `STUB_SETTING_KEY`. */\n  settingKey?: string | undefined;\n  /** VS Code's `workbench.reduceMotion` (the body class `vscode-reduce-motion`). */\n  reduceMotion?: boolean | undefined;\n  /** What `getState()` of the stubbed `acquireVsCodeApi()` returns at first. */\n  state?: unknown;\n}\n\n/** The stubbed `acquireVsCodeApi()`. */\nexport interface StubbedVsCodeApi {\n  getState(): unknown;\n  setState(state: unknown): void;\n  postMessage(message: unknown): void;\n}\n\nexport interface VsCodeWebviewStub {\n  readonly kind: ColorThemeKind;\n  /** What VS Code does on a color theme change: body classes first, then the extension's bridge posts. */\n  setColorThemeKind(kind: ColorThemeKind): void;\n  /** Changes the `colorTheme` setting, as the user does in the settings editor. */\n  setColorTheme(setting: ColorThemeSetting | undefined): void;\n  setReduceMotion(reduceMotion: boolean): void;\n  /** Messages the bridge posted that have not reached the window yet. */\n  pendingMessages(): number;\n  /** What the webview posted with `acquireVsCodeApi().postMessage`. */\n  readonly posted: readonly unknown[];\n  /** The webview state as the last `setState` left it. */\n  state(): unknown;\n}\n\n/** The page globals the stub sets. */\nexport type StubWindow = Window & {\n  /** The stub of `installVsCodeWebviewStub`, for a Playwright suite to drive. */\n  __modelerShellVsCodeStub?: VsCodeWebviewStub;\n  acquireVsCodeApi?: () => StubbedVsCodeApi;\n};\n\n/**\n * The stub's options from a query string (`theme`, `kontrast=hoch`, `colorTheme`, `reduceMotion`),\n * the counterpart of `vsCodeStubSearch` of `@miragon/modeler-shell/testing`.\n */\nexport function stubOptionsFromSearch(\n  search: string,\n): Pick<VsCodeWebviewStubOptions, \"requested\" | \"colorTheme\" | \"reduceMotion\"> {\n  const params = new URLSearchParams(search);\n  const theme: Theme = params.get(\"theme\") === \"dark\" ? \"dark\" : \"light\";\n  const setting = params.get(\"colorTheme\");\n  return {\n    requested: params.get(\"kontrast\") === \"hoch\" ? { theme, kontrast: \"hoch\" } : { theme },\n    colorTheme: setting === \"automatic\" || setting === \"light\" || setting === \"dark\" ? setting : undefined,\n    reduceMotion: params.has(\"reduceMotion\"),\n  };\n}\n\n/**\n * Stands in for VS Code around the page: its default stylesheet in `@layer vscode-default`, `<html>`\n * with the attributes `renderWebviewHtml` writes before the first paint, `<body>` with the host\n * page's theme (and reduce-motion) classes, `acquireVsCodeApi()`, and the real `connectThemeBridge`\n * running against a fake `vscode` namespace whose panel posts to this window. Call it before the\n * modeler's webview code runs; also exposed as `window.__modelerShellVsCodeStub`.\n */\nexport function installVsCodeWebviewStub(options: VsCodeWebviewStubOptions): VsCodeWebviewStub {\n  const settingKey = options.settingKey ?? STUB_SETTING_KEY;\n  const scope = window as StubWindow;\n  let kind = colorThemeKindOf(options.requested);\n  let setting = options.colorTheme;\n  const themeListeners = new Set<(theme: ColorThemeLike) => unknown>();\n  const configurationListeners = new Set<\n    (event: { affectsConfiguration(section: string): boolean }) => unknown\n  >();\n  const vscode: VsCodeLike = {\n    window: {\n      get activeColorTheme() {\n        return { kind };\n      },\n      onDidChangeActiveColorTheme(listener) {\n        themeListeners.add(listener);\n        return { dispose: () => themeListeners.delete(listener) };\n      },\n    },\n    workspace: {\n      getConfiguration: (section?: string) => ({\n        get: <T>(key: string): T | undefined =>\n          (section ? `${section}.${key}` : key) === settingKey ? (setting as T | undefined) : undefined,\n      }),\n      onDidChangeConfiguration(listener) {\n        configurationListeners.add(listener);\n        return { dispose: () => configurationListeners.delete(listener) };\n      },\n    },\n  };\n  const none: DisposableLike = { dispose: () => undefined };\n  let posted = 0;\n  let delivered = 0;\n  // Registered before the modeler's listeners, so it counts a message before the shell applies it.\n  window.addEventListener(\"message\", () => delivered++);\n  const panel: WebviewPanelLike = {\n    webview: {\n      postMessage(message) {\n        posted++;\n        window.postMessage(message, \"*\");\n      },\n    },\n    visible: true,\n    onDidChangeViewState: () => none,\n    onDidDispose: () => none,\n  };\n  const bridgeOptions = { themes: options.themes, settingKey };\n\n  const defaults = document.createElement(\"style\");\n  defaults.id = \"_defaultStyles\";\n  defaults.textContent = VSCODE_DEFAULT_STYLES;\n  document.head.prepend(defaults);\n\n  const html = new DOMParser().parseFromString(\n    renderWebviewHtml({\n      cspSource: window.location.origin,\n      scriptUri: \"webview.js\",\n      title: document.title,\n      lang: options.lang ?? \"en\",\n      appearance: currentAppearance(vscode, bridgeOptions),\n    }),\n    \"text/html\",\n  ).documentElement;\n  for (const name of html.getAttributeNames()) {\n    if (name === \"class\") document.documentElement.classList.add(...html.classList);\n    else document.documentElement.setAttribute(name, html.getAttribute(name) ?? \"\");\n  }\n\n  const setBodyClasses = (next: ColorThemeKind): void => {\n    document.body.classList.remove(...ALL_BODY_CLASSES);\n    document.body.classList.add(...BODY_CLASSES[next]);\n  };\n  setBodyClasses(kind);\n  document.body.classList.toggle(REDUCE_MOTION_BODY_CLASS, options.reduceMotion === true);\n  connectThemeBridge(vscode, panel, bridgeOptions);\n\n  let state = options.state;\n  const sent: unknown[] = [];\n  let acquired = false;\n  scope.acquireVsCodeApi = () => {\n    if (acquired) throw new Error(\"An instance of the VS Code API has already been acquired\");\n    acquired = true;\n    return {\n      getState: () => state,\n      setState(next) {\n        state = next;\n      },\n      postMessage(message) {\n        sent.push(message);\n      },\n    };\n  };\n\n  const stub: VsCodeWebviewStub = {\n    get kind() {\n      return kind;\n    },\n    setColorThemeKind(next) {\n      kind = next;\n      setBodyClasses(next);\n      for (const listener of [...themeListeners]) listener({ kind: next });\n    },\n    setColorTheme(next) {\n      setting = next;\n      for (const listener of [...configurationListeners]) {\n        listener({ affectsConfiguration: (section) => settingKey.startsWith(section) });\n      }\n    },\n    setReduceMotion(reduceMotion) {\n      document.body.classList.toggle(REDUCE_MOTION_BODY_CLASS, reduceMotion);\n    },\n    pendingMessages: () => posted - delivered,\n    posted: sent,\n    state: () => state,\n  };\n  scope.__modelerShellVsCodeStub = stub;\n  return stub;\n}\n"],"mappings":"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","names":[]}