composite-monaco-diff 1.0.2

package/dist/types/urlchange/ChildSection.d.ts

@@ -0,0 +1,41 @@
+export declare const radioOptions: readonly ["radio1", "radio2", "radio3"];
+export type RadioOptionType = (typeof radioOptions)[number];
+export declare const defaultRadioOption: RadioOptionType;
+export declare const selectOptions: readonly ["item1", "item2", "item3", "item4"];
+export type SingleOptionType = (typeof selectOptions)[number];
+export type MultiSelectOptionsArray = SingleOptionType[];
+/**
+ * ChildSection encapsulates all aspects of DOM manipulation for a single
+ * index/instance of the test components, keeping DOM queries and mutations
+ * isolated from the URL-handling business logic.
+ */
+export declare class ChildSection {
+    readonly index: number;
+    readonly root: HTMLElement;
+    private readonly textInput;
+    private readonly multiSelect;
+    private readonly checkboxA;
+    private readonly checkboxB;
+    private readonly dumpPre;
+    private readonly radioInputs;
+    constructor(container: HTMLElement, index: number);
+    getText(): string;
+    setText(value: string): void;
+    getRadio(): RadioOptionType;
+    setRadio(value: RadioOptionType): void;
+    getMultiSelect(): MultiSelectOptionsArray;
+    setMultiSelect(values: MultiSelectOptionsArray): void;
+    getCheckboxA(): boolean;
+    setCheckboxA(value: boolean): void;
+    getCheckboxB(): boolean;
+    setCheckboxB(value: boolean): void;
+    setDump(data: any): void;
+    onText(callback: (index: number, value: string) => void): void;
+    onRadio(callback: (index: number, value: RadioOptionType) => void): void;
+    onMultiSelect(callback: (index: number, values: MultiSelectOptionsArray) => void): void;
+    onCheckboxA(callback: (index: number, value: boolean) => void): void;
+    onCheckboxB(callback: (index: number, value: boolean) => void): void;
+    onDelete(callback: (index: number) => void): void;
+    onReconfigure(callback: (index: number) => void): void;
+    destroy(): void;
+}

package/dist/types/urlchange/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/urlchange/toolsURLSearchParams.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Merges multiple URLSearchParams instances. The first parameter acts as the base.
+ * Subsequent parameters overwrite existing keys. If a string array is provided,
+ * it acts as an allowlist, meaning only those keys will be merged from subsequent instances.
+ * The final result is sorted alphabetically.
+ */
+export declare function mergeURLSearchParams(...args: (URLSearchParams | string[])[]): URLSearchParams;
+/**
+ * Creates a deep, distinct copy of a URLSearchParams instance, preserving its data
+ * but decoupling its object reference so mutations don't affect the original.
+ */
+export declare function cloneSearchParams(params: URLSearchParams): URLSearchParams;
+/**
+ * Returns a new URLSearchParams instance with all keys sorted alphabetically.
+ * Useful for ensuring consistent parameter ordering before serialization.
+ */
+export declare function normalizeSearchParams(params: URLSearchParams): URLSearchParams;
+/**
+ * Compares two URLSearchParams instances for equality by normalizing and sorting them.
+ * Returns true if they contain the exact same keys and values regardless of original order.
+ */
+export declare function compareNormalizedSearchParams(a: URLSearchParams, b: URLSearchParams): boolean;
+/**
+ * Returns a new URLSearchParams instance sorted primarily by keys,
+ * and secondarily by values if the keys are identical.
+ */
+export declare function sortSearchParamsByKeyThenValue(params: URLSearchParams): URLSearchParams;
+/**
+ * Merges consecutive source URLSearchParams into a base URLSearchParams, but strictly
+ * limits updates and deletions to a specific list of governed keys.
+ * Sources are applied in sequence. For each key in governedKeys and each source:
+ *  - If the key is present in the source, it overwrites the value in result.
+ *  - If the key is absent from the source, it is deleted from the result.
+ */
+export declare function syncURLSearchParams(base: URLSearchParams, governedKeys: string[] | Set<string>, ...sources: URLSearchParams[]): URLSearchParams;
+/**
+ * Updates a URL string with new search parameters, preserving origin, pathname, and hash.
+ * Handles both absolute and relative locations.
+ */
+export declare function buildUrlWithSearchParams(location: string, nextParams: URLSearchParams | string): string;

package/dist/types/urlchange/urlchange.d.ts

@@ -0,0 +1,107 @@
+import { compareNormalizedSearchParams, mergeURLSearchParams } from "./toolsURLSearchParams.js";
+/**
+ * Definition for a single URL parameter.
+ * Used to specify the default value, the query string key, and functions to encode/decode the value.
+ */
+export type ParamDef<T> = {
+    /** The default value used when the parameter is not present in the URL. */
+    default: T;
+    /** The actual query parameter key in the URL (e.g. "t" for text). */
+    getParam: string;
+    /** Function to serialize the value of type T to a string for the URL. */
+    encode: (value: T) => string;
+    /** Function to parse the parameter string from the URL back to type T. */
+    decode: (value: string) => T;
+};
+type ParamValues<C> = C;
+/**
+ * Param value types inferred from a config object's `default` fields.
+ * Extracts the types of default values to create a strongly-typed parameter object.
+ */
+export type InferParamsFromConfig<T extends Record<string, {
+    default: unknown;
+}>> = {
+    [K in keyof T]: T[K]["default"];
+};
+/**
+ * Options for tracking the URL.
+ */
+export type TrackUrlOptions<Ctx = unknown> = {
+    /** Optional function to customize or namespace the URL key depending on a context/index. */
+    keyFn?: (key: string, ctx?: Ctx) => string;
+    /** Optional context value (like an index or ID) passed to keyFn. */
+    ctx?: Ctx;
+    /** When false, use history.pushState instead of replaceState. Default: true */
+    replace?: boolean;
+    /** When false, skip the initial onChange call. Default: true */
+    fireOnMount?: boolean;
+};
+/**
+ * Handle returned by `trackUrl` for managing URL parameters of a component instance.
+ */
+export type TrackUrlHandle<C extends Record<string, unknown>> = {
+    /** Update a single parameter value. */
+    setParam: <K extends keyof C>(key: K, value: C[K]) => void;
+    /** Update multiple parameter values at once. */
+    setParams: (updates: Partial<ParamValues<C>>) => void;
+    /** Get the current decoded parameter values. */
+    getParams: () => ParamValues<C>;
+    /** Get the current updated URLSearchParams representing only governed keys. */
+    getUpdatedURLSearchParams: () => URLSearchParams;
+    /** Re-read the URL and invoke onChange (same as the initial mount sync). */
+    refresh: () => void;
+    /** Unsubscribe from URL changes. */
+    disconnect: () => void;
+    /** List of query parameter keys governed by this instance. */
+    governedKeys: string[];
+};
+/** Callback type for URL changes. */
+type UrlChangeListener = () => void;
+/**
+ * Internal factory that creates trackers for a specific configuration of URL parameters.
+ * Encapsulates the logic of reading, writing, and separating parameter sets.
+ */
+declare function createURLParamTracker<C extends Record<string, unknown>, Ctx = unknown>(config: {
+    [K in keyof C]: ParamDef<C[K]>;
+}, keyFn?: (key: string, ctx?: Ctx) => string): {
+    separateIndexedSearchParams: (search: string | URLSearchParams, ctx?: Ctx) => URLSearchParams;
+    trackUrl: (onChange: (params: ParamValues<C>, updatedURLSearchParams: URLSearchParams, governedKeys: string[]) => void, options?: TrackUrlOptions<Ctx>) => TrackUrlHandle<C>;
+    readState: (search: string | URLSearchParams, ctx?: Ctx) => {
+        params: ParamValues<C>;
+        updatedURLSearchParams: URLSearchParams;
+    };
+};
+/**
+ * Vanilla counterpart to React `modURLSearchParams`. Define params once, then call
+ * `trackUrl(onChange)` or use the standalone `trackUrl(config, onChange)` helper.
+ */
+export default function modURLSearchParams<C extends Record<string, unknown>, Ctx = unknown>(config: {
+    [K in keyof C]: ParamDef<C[K]>;
+}, keyFn?: (key: string, ctx?: Ctx) => string): {
+    separateIndexedSearchParams: (search: string | URLSearchParams, ctx?: Ctx | undefined) => URLSearchParams;
+    trackUrl: (onChange: (params: C, updatedURLSearchParams: URLSearchParams, governedKeys: string[]) => void, options?: TrackUrlOptions<Ctx> | undefined) => TrackUrlHandle<C>;
+    readState: (search: string | URLSearchParams, ctx?: Ctx | undefined) => {
+        params: C;
+        updatedURLSearchParams: URLSearchParams;
+    };
+};
+/**
+ * Subscribe to URL changes for a fixed param schema. The callback runs only when
+ * tracked keys (per config) change — other query/hash navigation is ignored.
+ *
+ * @example
+ * const { setParam, setParams } = trackUrl(
+ *   {
+ *     emptyList: { default: false, getParam: "emp", encode: (v) => (v ? "1" : "0"), decode: (v) => v === "1" },
+ *   },
+ *   (params, updatedURLSearchParams) => { ... },
+ * );
+ */
+export declare function trackUrl<C extends Record<string, unknown>, Ctx = unknown>(config: {
+    [K in keyof C]: ParamDef<C[K]>;
+}, onChange: (params: ParamValues<C>, updatedURLSearchParams: URLSearchParams, governedKeys: string[]) => void, options?: TrackUrlOptions<Ctx> & {
+    keyFn?: (key: string, ctx?: Ctx) => string;
+}): TrackUrlHandle<C>;
+/** Subscribe to query-string updates (history push/replace/popstate). */
+export declare function onUrlChange(listener: UrlChangeListener): () => void;
+export { mergeURLSearchParams, createURLParamTracker, compareNormalizedSearchParams };

package/dist/types/web-component/from-js/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/web-component/from-scripts/index.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "composite-monaco-diff",
+  "version": "1.0.2",
+  "type": "module",
+  "description": "Web component wrapper on top of monaco editor",
+  "scripts": {
+    "start": "node --env-file=.env server.ts",
+    "dev": "node --env-file=.env server.ts",
+    "monaco": "node --experimental-strip-types scripts/sync-monaco-version.ts",
+    "monaco:skip": "node --experimental-strip-types scripts/sync-monaco-version.ts --skip"
+  },
+  "keywords": [
+    "monaco",
+    "web-component",
+    "monaco-editor"
+  ],
+  "author": "Szymon Dzialowski",
+  "license": "GPL-2.0-only",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stopsopa/monaco-editor-webcomponent.git"
+  },
+  "bugs": {
+    "url": "https://github.com/stopsopa/monaco-editor-webcomponent/issues"
+  },
+  "main": "./dist/esm/Module.js",
+  "types": "./dist/types/Module.d.ts",
+  "module": "./dist/esm/Module.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/Module.d.ts",
+      "import": "./dist/esm/Module.js",
+      "require": "./dist/cjs/Module.cjs"
+    },
+    "./package.json": "./package.json",
+    "./web-component/*": "./web-component/*",
+    "./*": {
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "default": "./*"
+    }
+  }
+}

package/web-component/Module.js

@@ -0,0 +1,413 @@
+// web-component/trimLeft.js
+function trimLeft(str, offset = 0) {
+  let o = typeof offset === "number" ? offset : parseInt(offset, 10);
+  if (isNaN(o)) {
+    throw new Error(`offset must be a number, ${offset}`);
+  }
+  if (o < 0) {
+    throw new Error(`offset must be a non-negative number, ${offset}`);
+  }
+  const lines = str.split("\n");
+  let diff = Infinity;
+  lines.forEach((line) => {
+    if (!/^\s*$/.test(line)) {
+      const lengthBefore = line.length;
+      const lengthAfter = line.replace(/^\s+/, "").length;
+      const indentation = lengthBefore - lengthAfter;
+      if (indentation < diff) {
+        diff = indentation;
+      }
+    }
+  });
+  let result = lines.map((line) => line.substring(diff));
+  if (o > 0) {
+    const spaces = " ".repeat(o);
+    result = result.map((line) => `${spaces}${line}`);
+  }
+  return result.join("\n");
+}
+
+// web-component/MonacoDiffManager.js
+var MONACO_GENERATED = {
+  "version": "0.55.1",
+  "vs": [
+    "https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs",
+    "https://unpkg.com/monaco-editor@0.55.1/min/vs",
+    "/monaco/vs"
+  ]
+};
+var cachedMonaco = null;
+var cachedVsBase = null;
+var loadingPromise = null;
+var MONACO_VS_STYLESHEET = /\/vs\/(base|editor|platform)/;
+var MONACO_SHADOW_STYLES_ATTR = "data-monaco-shadow-styles";
+function loadStylesheetLink(link) {
+  if (link.sheet) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve, reject) => {
+    link.addEventListener("load", () => resolve(), { once: true });
+    link.addEventListener("error", () => reject(new Error(`Failed to load Monaco stylesheet: ${link.href}`)), {
+      once: true
+    });
+  });
+}
+async function ensureMonacoStylesInShadowRoot(container) {
+  const root = container.getRootNode();
+  if (!(root instanceof ShadowRoot)) {
+    return;
+  }
+  if (root.querySelector(`[${MONACO_SHADOW_STYLES_ATTR}]`)) {
+    return;
+  }
+  const documentLinks = Array.from(document.querySelectorAll("link[rel='stylesheet']")).filter((link) => {
+    const href = link.getAttribute("href") ?? "";
+    return MONACO_VS_STYLESHEET.test(href);
+  });
+  const loads = [];
+  for (const documentLink of documentLinks) {
+    const clone = documentLink.cloneNode(true);
+    clone.setAttribute(MONACO_SHADOW_STYLES_ATTR, "");
+    loads.push(loadStylesheetLink(clone));
+    root.insertBefore(clone, root.firstChild);
+  }
+  if (documentLinks.length === 0 && cachedVsBase) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = `${cachedVsBase}/editor/editor.main.css`;
+    link.setAttribute(MONACO_SHADOW_STYLES_ATTR, "");
+    loads.push(loadStylesheetLink(link));
+    root.insertBefore(link, root.firstChild);
+  }
+  await Promise.all(loads);
+}
+function loadMonaco(vsBase) {
+  return new Promise((resolve, reject) => {
+    const win = window;
+    const finish = () => {
+      win.require?.config({ paths: { vs: vsBase } });
+      win.require?.(["vs/editor/editor.main"], () => {
+        if (win.monaco) {
+          resolve(win.monaco);
+        } else {
+          reject(new Error(`Monaco did not initialize from ${vsBase}`));
+        }
+      }, (err) => {
+        reject(err instanceof Error ? err : new Error(String(err)));
+      });
+    };
+    if (win.monaco) {
+      resolve(win.monaco);
+      return;
+    }
+    if (win.require) {
+      finish();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `${vsBase}/loader.js`;
+    script.async = true;
+    script.onload = () => finish();
+    script.onerror = () => reject(new Error(`Failed to load Monaco loader from ${vsBase}`));
+    document.head.appendChild(script);
+  });
+}
+function hydrateCache(generated = MONACO_GENERATED) {
+  if (cachedMonaco) {
+    return Promise.resolve(cachedMonaco);
+  }
+  if (loadingPromise) {
+    return loadingPromise;
+  }
+  loadingPromise = (async () => {
+    const errors = [];
+    for (const vsBase of generated.vs) {
+      try {
+        cachedMonaco = await loadMonaco(vsBase);
+        cachedVsBase = vsBase;
+        return cachedMonaco;
+      } catch (err) {
+        errors.push(err instanceof Error ? err : new Error(String(err)));
+      }
+    }
+    loadingPromise = null;
+    throw new AggregateError(errors, `Failed to load monaco-editor@${generated.version} from all sources`);
+  })();
+  return loadingPromise;
+}
+var SCRIPT_TYPE_ORIGINAL = "text/original";
+var SCRIPT_TYPE_MODIFIED = "text/modified";
+function readDeclarativeDiffScripts(host) {
+  const scripts = Array.from(host.querySelectorAll(":scope > script"));
+  if (scripts.length === 0) {
+    return null;
+  }
+  if (scripts.length < 2) {
+    throw new Error(`<composite-monaco-diff>: expected exactly at leasttwo <script> elements (type="${SCRIPT_TYPE_ORIGINAL}" and type="${SCRIPT_TYPE_MODIFIED}"), found ${scripts.length}`);
+  }
+  let originalScript;
+  let modifiedScript;
+  for (const script of scripts) {
+    const type = script.getAttribute("type");
+    if (type === SCRIPT_TYPE_ORIGINAL) {
+      if (originalScript) {
+        throw new Error(`<composite-monaco-diff>: duplicate <script type="${SCRIPT_TYPE_ORIGINAL}">`);
+      }
+      originalScript = script;
+    } else if (type === SCRIPT_TYPE_MODIFIED) {
+      if (modifiedScript) {
+        throw new Error(`<composite-monaco-diff>: duplicate <script type="${SCRIPT_TYPE_MODIFIED}">`);
+      }
+      modifiedScript = script;
+    } else {
+      throw new Error(`<composite-monaco-diff>: <script> must have type="${SCRIPT_TYPE_ORIGINAL}" or type="${SCRIPT_TYPE_MODIFIED}"`);
+    }
+  }
+  if (!originalScript || !modifiedScript) {
+    const missing = !originalScript ? SCRIPT_TYPE_ORIGINAL : SCRIPT_TYPE_MODIFIED;
+    throw new Error(`<composite-monaco-diff>: missing <script type="${missing}">`);
+  }
+  let original = originalScript.textContent ?? "";
+  let modified = modifiedScript.textContent ?? "";
+  const originalLanguage = originalScript.getAttribute("lang") ?? void 0;
+  const modifiedLanguage = modifiedScript.getAttribute("lang") ?? void 0;
+  let originalOffset = parseInt(originalScript.getAttribute("data-offset"), 10) ?? 0;
+  let modifiedOffset = parseInt(modifiedScript.getAttribute("data-offset"), 10) ?? 0;
+  if (!(originalOffset > 0)) {
+    throw new Error(`<composite-monaco-diff><script type='text/original'>: data-offset must be a positive integer >${originalOffset}<`);
+  }
+  if (!(modifiedOffset > 0)) {
+    throw new Error(`<composite-monaco-diff><script type='text/modified'>: data-offset must be a positive integer >${modifiedOffset}<`);
+  }
+  original = trimLeft(original, originalOffset);
+  modified = trimLeft(modified, modifiedOffset);
+  originalScript.remove();
+  modifiedScript.remove();
+  return { original, modified, originalLanguage, modifiedLanguage };
+}
+var DEFAULT_LANGUAGE = "javascript";
+function resolveDiffContent(options) {
+  let original = options.original ?? "";
+  let modified = options.modified ?? "";
+  let originalLanguage = options.originalLanguage;
+  let modifiedLanguage = options.modifiedLanguage;
+  if (options.host) {
+    const declarative = readDeclarativeDiffScripts(options.host);
+    if (declarative) {
+      original = declarative.original;
+      modified = declarative.modified;
+      originalLanguage = originalLanguage ?? declarative.originalLanguage;
+      modifiedLanguage = modifiedLanguage ?? declarative.modifiedLanguage;
+    }
+  }
+  const sharedLanguage = options.language;
+  return {
+    original,
+    modified,
+    originalLanguage: originalLanguage ?? sharedLanguage ?? DEFAULT_LANGUAGE,
+    modifiedLanguage: modifiedLanguage ?? sharedLanguage ?? DEFAULT_LANGUAGE
+  };
+}
+var MonacoDiffManager = class {
+  _readyPromise;
+  _editor = null;
+  _resizeObserver = null;
+  _layoutRaf = null;
+  _container;
+  /**
+   * Mounts a side-by-side diff editor into the given element: loads Monaco, applies styles,
+   * fills in original/modified text, and starts watching size changes.
+   */
+  constructor(container, options) {
+    this._container = container;
+    container.style.height = "100%";
+    container.style.width = "100%";
+    const { original, modified, originalLanguage, modifiedLanguage } = resolveDiffContent(options);
+    this._readyPromise = (async () => {
+      const monaco = await hydrateCache(MONACO_GENERATED);
+      await ensureMonacoStylesInShadowRoot(container);
+      this._editor = monaco.editor.createDiffEditor(container, {
+        automaticLayout: false,
+        scrollbar: {
+          vertical: "auto"
+        },
+        scrollBeyondLastLine: false,
+        ...options.editorOptions
+      });
+      this._editor.setModel({
+        original: monaco.editor.createModel(original, originalLanguage),
+        modified: monaco.editor.createModel(modified, modifiedLanguage)
+      });
+      this._scheduleLayout();
+      this._resizeObserver = new ResizeObserver(() => this._scheduleLayout());
+      this._resizeObserver.observe(container);
+    })();
+  }
+  /** Promise that resolves when the editor has finished loading and is safe to use. */
+  whenReady() {
+    return this._readyPromise;
+  }
+  /** Returns the underlying Monaco diff editor instance (or null if not ready yet). */
+  getEditor() {
+    return this._editor;
+  }
+  /** Returns the global Monaco API instance (or null if not loaded yet). */
+  getMonaco() {
+    return cachedMonaco;
+  }
+  /** Tears down the editor, frees memory, and stops listening for resize events. */
+  destroy() {
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
+    if (this._layoutRaf !== null) {
+      cancelAnimationFrame(this._layoutRaf);
+      this._layoutRaf = null;
+    }
+    const model = this._editor?.getModel();
+    this._editor?.dispose();
+    this._editor = null;
+    model?.original.dispose();
+    model?.modified.dispose();
+  }
+  /** Updates the language for both sides of the diff editor. Falls back to the default language when undefined. */
+  setLanguage(language) {
+    const model = this._editor?.getModel();
+    if (!model)
+      return;
+    const lang = language ?? DEFAULT_LANGUAGE;
+    cachedMonaco?.editor.setModelLanguage(model.original, lang);
+    cachedMonaco?.editor.setModelLanguage(model.modified, lang);
+  }
+  /** Resizes the editor to match its container on the next animation frame (avoids jank). */
+  _scheduleLayout() {
+    if (this._layoutRaf !== null)
+      return;
+    this._layoutRaf = requestAnimationFrame(() => {
+      this._layoutRaf = null;
+      if (!this._editor)
+        return;
+      const { width, height } = this._container.getBoundingClientRect();
+      if (width === 0 || height === 0) {
+        return;
+      }
+      this._editor.layout({ width, height });
+    });
+  }
+};
+
+// web-component/composite-monaco-diff.js
+var tagName = "composite-monaco-diff";
+var MONACO_THEMES = ["vs", "vs-dark", "hc-black", "hc-light"];
+function isMonacoTheme(value) {
+  return MONACO_THEMES.includes(value);
+}
+function parseThemeAttribute(value) {
+  if (value && isMonacoTheme(value)) {
+    return value;
+  }
+  return void 0;
+}
+var MonacoDiffElement = class extends HTMLElement {
+  static tagName = tagName;
+  static get observedAttributes() {
+    return ["theme", "language"];
+  }
+  _container;
+  _manager = null;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+          min-height: 200px;
+        }
+        .container {
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+      <div class="container"></div>
+    `;
+    this._container = this.shadowRoot.querySelector(".container");
+  }
+  connectedCallback() {
+    if (this._manager) {
+      return;
+    }
+    const theme = parseThemeAttribute(this.getAttribute("theme"));
+    const language = this.getAttribute("language") ?? void 0;
+    this._manager = new MonacoDiffManager(this._container, {
+      host: this,
+      language,
+      editorOptions: {
+        theme
+      }
+    });
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === "theme") {
+      void this._applyTheme(parseThemeAttribute(newValue));
+    } else if (name === "language") {
+      void this._applyLanguage(newValue ?? void 0);
+    }
+  }
+  disconnectedCallback() {
+    this._manager?.destroy();
+    this._manager = null;
+  }
+  /** Promise that resolves when the editor has finished loading and is safe to use. */
+  whenReady() {
+    if (!this._manager) {
+      throw new Error("<composite-monaco-diff>: not connected");
+    }
+    return this._manager.whenReady();
+  }
+  getManager() {
+    if (!this._manager) {
+      throw new Error("<composite-monaco-diff>: not connected");
+    }
+    return this._manager;
+  }
+  async _applyTheme(theme) {
+    if (!this._manager) {
+      return;
+    }
+    await this.whenReady();
+    const monaco = await hydrateCache();
+    monaco.editor.setTheme(theme ?? "vs");
+  }
+  async _applyLanguage(language) {
+    if (!this._manager) {
+      return;
+    }
+    await this.whenReady();
+    this._manager.setLanguage(language);
+  }
+};
+customElements.define(tagName, MonacoDiffElement);
+
+// web-component/Module.ts
+/** @es.ts 
+{
+   mode: "bundle",
+   extension: ".js",
+   options: {
+   }
+}
+@es.ts */// export * from "./react.js"
+export {
+  MONACO_GENERATED,
+  MONACO_THEMES,
+  MonacoDiffElement,
+  MonacoDiffManager,
+  SCRIPT_TYPE_MODIFIED,
+  SCRIPT_TYPE_ORIGINAL,
+  hydrateCache,
+  isMonacoTheme,
+  readDeclarativeDiffScripts,
+  tagName
+};