composite-monaco-diff 1.0.2

package/dist/cjs/urlchange/toolsURLSearchParams.cjs

@@ -0,0 +1,111 @@
+/**
+ * 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 function mergeURLSearchParams(...args) {
+    const result = new URLSearchParams();
+    if (args.length === 0)
+        return result;
+    // Find the filter array if it exists
+    const filterIndex = args.findIndex((arg) => Array.isArray(arg));
+    const filterKeys = filterIndex !== -1 ? args[filterIndex] : null;
+    const filterSet = filterKeys ? new Set(filterKeys) : null;
+    for (let i = 0; i < args.length; i++) {
+        const params = args[i];
+        if (params instanceof URLSearchParams) {
+            // The first URLSearchParams contributes all its keys.
+            // Subsequent ones only contribute keys in the filterSet (if defined).
+            const isFirstParams = i === args.findIndex((arg) => arg instanceof URLSearchParams);
+            const uniqueKeys = new Set();
+            params.forEach((_, key) => uniqueKeys.add(key));
+            const keys = Array.from(uniqueKeys);
+            const keysToProcess = !isFirstParams && filterSet ? keys.filter((k) => filterSet.has(k)) : keys;
+            for (const key of keysToProcess) {
+                result.delete(key);
+                params.getAll(key).forEach((value) => {
+                    result.append(key, value);
+                });
+            }
+        }
+    }
+    result.sort();
+    return result;
+}
+/**
+ * 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 function cloneSearchParams(params) {
+    return new URLSearchParams(params);
+}
+/**
+ * Returns a new URLSearchParams instance with all keys sorted alphabetically.
+ * Useful for ensuring consistent parameter ordering before serialization.
+ */
+export function normalizeSearchParams(params) {
+    const result = new URLSearchParams(params);
+    result.sort();
+    return result;
+}
+/**
+ * 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 function compareNormalizedSearchParams(a, b) {
+    const na = normalizeSearchParams(a);
+    const nb = normalizeSearchParams(b);
+    return na.toString() === nb.toString();
+}
+/**
+ * Returns a new URLSearchParams instance sorted primarily by keys,
+ * and secondarily by values if the keys are identical.
+ */
+export function sortSearchParamsByKeyThenValue(params) {
+    const entries = [];
+    params.forEach((value, key) => {
+        entries.push([key, value]);
+    });
+    return new URLSearchParams(entries.sort(([k1, v1], [k2, v2]) => {
+        if (k1 === k2)
+            return v1.localeCompare(v2);
+        return k1.localeCompare(k2);
+    }));
+}
+/**
+ * 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 function syncURLSearchParams(base, governedKeys, ...sources) {
+    const result = new URLSearchParams(base);
+    const keys = Array.isArray(governedKeys) ? governedKeys : Array.from(governedKeys);
+    for (const source of sources) {
+        for (const key of keys) {
+            if (source.has(key)) {
+                result.delete(key);
+                source.getAll(key).forEach((value) => {
+                    result.append(key, value);
+                });
+            }
+            else {
+                result.delete(key);
+            }
+        }
+    }
+    result.sort();
+    return result;
+}
+/**
+ * Updates a URL string with new search parameters, preserving origin, pathname, and hash.
+ * Handles both absolute and relative locations.
+ */
+export function buildUrlWithSearchParams(location, nextParams) {
+    const search = typeof nextParams === "string" ? nextParams : nextParams.toString();
+    const url = new URL(location, "http://dummy");
+    url.search = search ? `?${search}` : "";
+    return url.origin === "http://dummy" ? `${url.pathname}${url.search}${url.hash}` : url.toString();
+}

package/dist/cjs/urlchange/urlchange.cjs

@@ -0,0 +1,197 @@
+import { cloneSearchParams, compareNormalizedSearchParams, mergeURLSearchParams, syncURLSearchParams, } from "./toolsURLSearchParams.js";
+/** Set of active listeners registered for URL/history updates. */
+const urlChangeListeners = new Set();
+/** Flag indicating whether the window.history methods have been monkey-patched. */
+let historyPatched = false;
+let originalPushState = null;
+let originalReplaceState = null;
+/**
+ * Notifies all registered listeners that a URL change has occurred.
+ */
+function notifyUrlChange() {
+    for (const listener of urlChangeListeners) {
+        listener();
+    }
+}
+/**
+ * Monkey-patches history.pushState and history.replaceState to notify our listeners
+ * of programmatic URL changes. Also listens to the window popstate event.
+ */
+function ensureHistoryPatched() {
+    if (historyPatched || typeof window === "undefined")
+        return;
+    historyPatched = true;
+    originalPushState = history.pushState.bind(history);
+    originalReplaceState = history.replaceState.bind(history);
+    history.pushState = function (...args) {
+        originalPushState(...args);
+        notifyUrlChange();
+    };
+    history.replaceState = function (...args) {
+        originalReplaceState(...args);
+        notifyUrlChange();
+    };
+    window.addEventListener("popstate", notifyUrlChange);
+}
+/**
+ * Subscribes a listener callback to URL change events (pushState, replaceState, popstate).
+ * Returns an unsubscribe function.
+ */
+function subscribeUrlChange(listener) {
+    ensureHistoryPatched();
+    urlChangeListeners.add(listener);
+    return () => {
+        urlChangeListeners.delete(listener);
+    };
+}
+// ─── Core factory ────────────────────────────────────────────────────────────
+/**
+ * Internal factory that creates trackers for a specific configuration of URL parameters.
+ * Encapsulates the logic of reading, writing, and separating parameter sets.
+ */
+function createURLParamTracker(config, keyFn) {
+    /** Applies optional keyFn namespace/index mapping to raw config parameter keys. */
+    const applyKey = (baseKey, ctx) => (keyFn ? keyFn(baseKey, ctx) : baseKey);
+    /**
+     * Filters and extracts only the keys governed by this tracker configuration and optional context
+     * from the provided search parameters or string.
+     */
+    function separateIndexedSearchParams(search, ctx) {
+        const keys = Object.values(config).map((def) => applyKey(def.getParam, ctx));
+        const normalized = typeof search === "string" ? new URLSearchParams(search) : search;
+        return mergeURLSearchParams(new URLSearchParams(), keys, normalized);
+    }
+    /**
+     * Reads, decodes, and parses parameter values from search parameters, falling back to defaults.
+     */
+    function readState(search, ctx) {
+        const updatedURLSearchParams = separateIndexedSearchParams(search, ctx);
+        const result = {};
+        for (const [key, def] of Object.entries(config)) {
+            const d = def;
+            const raw = updatedURLSearchParams.get(applyKey(d.getParam, ctx));
+            result[key] = raw !== null ? d.decode(raw) : d.default;
+        }
+        return {
+            params: result,
+            updatedURLSearchParams,
+        };
+    }
+    /** Generates a normalized signature of only the tracked keys for comparison. */
+    function trackedSignature(search, ctx) {
+        return separateIndexedSearchParams(search, ctx).toString();
+    }
+    /**
+     * Starts tracking the URL, invoking the onChange callback when tracked parameters change.
+     * Returns a handle containing functions to read/update the state.
+     */
+    function trackUrl(onChange, options) {
+        const ctx = options?.ctx;
+        const replace = options?.replace !== false;
+        const fireOnMount = options?.fireOnMount !== false;
+        const governedKeys = Object.values(config).map((def) => applyKey(def.getParam, ctx));
+        let lastSignature = "";
+        /** Decodes the current URL parameters and invokes the onChange callback. */
+        const emitCurrentState = (search = window.location.search) => {
+            lastSignature = trackedSignature(search, ctx);
+            const { params, updatedURLSearchParams } = readState(search, ctx);
+            onChange(params, updatedURLSearchParams, governedKeys);
+        };
+        /** Checks if the signature of the tracked parameters changed, and triggers update if so. */
+        const emitIfTrackedChanged = () => {
+            const signature = trackedSignature(window.location.search, ctx);
+            if (signature === lastSignature)
+                return;
+            emitCurrentState();
+        };
+        /** Syncs internal state signature and calls onChange callback after writing updates. */
+        const syncAfterLocalWrite = (next) => {
+            emitCurrentState(next);
+        };
+        /** Commits the new URLSearchParams using standard history methods. */
+        const writeSearch = (next) => {
+            const current = cloneSearchParams(new URLSearchParams(window.location.search));
+            if (compareNormalizedSearchParams(next, current))
+                return;
+            syncAfterLocalWrite(next);
+        };
+        /** Helper to set/update a single parameter value. */
+        const setParam = (key, value) => {
+            const def = config[key];
+            const finalKey = applyKey(def.getParam, ctx);
+            const current = cloneSearchParams(new URLSearchParams(window.location.search));
+            const patch = new URLSearchParams();
+            if (JSON.stringify(value) !== JSON.stringify(def.default)) {
+                patch.set(finalKey, def.encode(value));
+            }
+            writeSearch(syncURLSearchParams(current, [finalKey], patch));
+        };
+        /** Helper to set/update multiple parameter values at once. */
+        const setParams = (updates) => {
+            const current = cloneSearchParams(new URLSearchParams(window.location.search));
+            const governed = [];
+            const patch = new URLSearchParams();
+            for (const [key, value] of Object.entries(updates)) {
+                const def = config[key];
+                if (def && value !== undefined) {
+                    const finalKey = applyKey(def.getParam, ctx);
+                    governed.push(finalKey);
+                    if (JSON.stringify(value) !== JSON.stringify(def.default)) {
+                        patch.set(finalKey, def.encode(value));
+                    }
+                }
+            }
+            writeSearch(syncURLSearchParams(current, governed, patch));
+        };
+        if (fireOnMount) {
+            emitCurrentState();
+        }
+        else {
+            lastSignature = trackedSignature(window.location.search, ctx);
+        }
+        const unsubscribe = subscribeUrlChange(emitIfTrackedChanged);
+        return {
+            setParam,
+            setParams,
+            getParams: () => readState(window.location.search, ctx).params,
+            getUpdatedURLSearchParams: () => separateIndexedSearchParams(window.location.search, ctx),
+            refresh: () => emitCurrentState(),
+            disconnect: unsubscribe,
+            governedKeys,
+        };
+    }
+    return {
+        separateIndexedSearchParams,
+        trackUrl,
+        readState,
+    };
+}
+/**
+ * Vanilla counterpart to React `modURLSearchParams`. Define params once, then call
+ * `trackUrl(onChange)` or use the standalone `trackUrl(config, onChange)` helper.
+ */
+export default function modURLSearchParams(config, keyFn) {
+    return createURLParamTracker(config, keyFn);
+}
+/**
+ * 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 function trackUrl(config, onChange, options) {
+    const { keyFn, ...trackOptions } = options ?? {};
+    const tracker = createURLParamTracker(config, keyFn);
+    return tracker.trackUrl(onChange, trackOptions);
+}
+/** Subscribe to query-string updates (history push/replace/popstate). */
+export function onUrlChange(listener) {
+    return subscribeUrlChange(listener);
+}
+export { mergeURLSearchParams, createURLParamTracker, compareNormalizedSearchParams };

package/dist/cjs/web-component/from-js/index.cjs

@@ -0,0 +1,160 @@
+import modURLSearchParams from "../../urlchange/urlchange.js";
+import { syncURLSearchParams, buildUrlWithSearchParams } from "../../urlchange/toolsURLSearchParams.js";
+import { MonacoDiffManager } from "../../MonacoDiffManager.js";
+import { isMonacoTheme, MonacoDiffElement } from "../../composite-monaco-diff.js";
+import { CenterAndHeightResizer } from "../../CenterAndHeightResizer.js";
+await customElements.whenDefined(MonacoDiffElement.tagName);
+await customElements.whenDefined(CenterAndHeightResizer.tagName);
+const diffEl = document.querySelector(MonacoDiffElement.tagName);
+if (!(diffEl instanceof MonacoDiffElement)) {
+    throw new Error("Missing <composite-monaco-diff> element");
+}
+await diffEl.whenReady();
+let model;
+let mgr;
+const original = `
+    const loadMonaco = (vsPath = VS_PATH) =>
+      new Promise((resolve, reject) => {
+        const win = window;
+
+        const finish = () => {
+          win.require.config({ paths: { vs: vsPath } });
+          win.require(["vs/editor/editor.main"], () => resolve(win.monaco));
+        };
+
+        if (win.require && win.monaco) return resolve(win.monaco);
+        if (win.require) return finish();
+
+        const script = document.createElement("script");
+        script.src = \`\${vsPath}/loader.js\`;
+        script.async = true;
+        script.onload = () => finish();
+        script.onerror = () => reject(new Error(\`Failed to load Monaco loader from \${vsPath}\`));
+        document.head.appendChild(script);
+      });
+`;
+const modified = `
+const loadMonaco = (vsPath = VS_PATH) =>
+  new Promise((resolve, reject) => {
+    const win = window;
+
+    const finish = () => {
+      win.require.config({ paths: { vs: vsPath } });
+      win.require(["vs/editor/editor.main"], () => resolve(win.monaco));
+    };
+
+    if (win.require && win.moneco) return resolve(win.monaco);
+
+    const script = document.createElement("script");
+    script.src = \`\${vsPath}/loader.js\`;
+    script.async = true;
+    script.onload = () => finish();
+    script.added = 'stuff'
+    script.onerror = () => reject(new Error(\`Failed to load Monaco loader from \${vsPath}\`));
+    document.head.appendChild(script);
+  });
+`;
+function wireResizerUrlSync(resizer, index) {
+    const config = {
+        left: {
+            default: resizer.getAttribute("left") ?? "100px",
+            getParam: "l",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+        center: {
+            default: resizer.getAttribute("center") ?? "1200px",
+            getParam: "c",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+        height: {
+            default: resizer.getAttribute("height") ?? "100px",
+            getParam: "h",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+    };
+    const { trackUrl } = modURLSearchParams(config, (key, i) => `${key}-${i}`);
+    const { setParams } = trackUrl((params, updatedURLSearchParams, governedKeys) => {
+        resizer.setAttribute("left", params.left);
+        resizer.setAttribute("center", params.center);
+        resizer.setAttribute("height", params.height);
+        const current = new URLSearchParams(window.location.search);
+        const next = syncURLSearchParams(current, governedKeys, updatedURLSearchParams);
+        if (next.toString() !== current.toString()) {
+            const url = buildUrlWithSearchParams(window.location.href, next);
+            history.replaceState(history.state, "", url);
+        }
+    }, { ctx: index, fireOnMount: true });
+    const syncToUrl = () => {
+        setParams({
+            left: resizer.getAttribute("left") ?? config.left.default,
+            center: resizer.getAttribute("center") ?? config.center.default,
+            height: resizer.getAttribute("height") ?? config.height.default,
+        });
+    };
+    resizer.addEventListener("onLeft", syncToUrl);
+    resizer.addEventListener("onCenter", syncToUrl);
+    resizer.addEventListener("onHeight", syncToUrl);
+}
+function applyThemeAttribute(mgr, theme) {
+    mgr.getMonaco()?.editor.setTheme(theme || "vs");
+}
+function applyLanguageAttribute(mgr, language) {
+    mgr.setLanguage(language || undefined);
+}
+document.querySelectorAll(CenterAndHeightResizer.tagName).forEach((el, index) => {
+    wireResizerUrlSync(el, index);
+});
+const themeSelect = document.getElementById("theme-select");
+if (!(themeSelect instanceof HTMLSelectElement)) {
+    throw new Error("Missing #theme-select element");
+}
+const languageSelect = document.getElementById("language-select");
+if (!(languageSelect instanceof HTMLSelectElement)) {
+    throw new Error("Missing #language-select element");
+}
+const { trackUrl: trackUrlNoIndex } = modURLSearchParams({
+    theme: {
+        default: "",
+        getParam: "theme",
+        encode: (value) => value,
+        decode: (value) => (isMonacoTheme(value) ? value : ""),
+    },
+    language: {
+        default: "javascript",
+        getParam: "lang",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+});
+const { setParam } = trackUrlNoIndex((params, updatedURLSearchParams, governedKeys) => {
+    themeSelect.value = params.theme;
+    applyThemeAttribute(mgr, params.theme);
+    languageSelect.value = params.language;
+    applyLanguageAttribute(mgr, params.language);
+    const current = new URLSearchParams(window.location.search);
+    const next = syncURLSearchParams(current, governedKeys, updatedURLSearchParams);
+    if (next.toString() !== current.toString()) {
+        const url = buildUrlWithSearchParams(window.location.href, next);
+        history.replaceState(history.state, "", url);
+    }
+}, { fireOnMount: true });
+themeSelect.addEventListener("change", () => {
+    setParam("theme", themeSelect.value);
+});
+languageSelect.addEventListener("change", () => {
+    setParam("language", languageSelect.value);
+});
+mgr = diffEl.getManager();
+const editor = mgr.getEditor();
+if (!editor) {
+    throw new Error("Diff editor not available");
+}
+model = editor.getModel();
+if (!model) {
+    throw new Error("Diff editor has no model");
+}
+model.original.setValue(original);
+model.modified.setValue(modified);

package/dist/cjs/web-component/from-scripts/index.cjs

@@ -0,0 +1,114 @@
+import modURLSearchParams from "../../urlchange/urlchange.js";
+import { syncURLSearchParams, buildUrlWithSearchParams } from "../../urlchange/toolsURLSearchParams.js";
+import { isMonacoTheme, MonacoDiffElement } from "../../composite-monaco-diff.js";
+import { CenterAndHeightResizer } from "../../CenterAndHeightResizer.js";
+await customElements.whenDefined(MonacoDiffElement.tagName);
+await customElements.whenDefined(CenterAndHeightResizer.tagName);
+const diffEl = document.querySelector(MonacoDiffElement.tagName);
+if (!(diffEl instanceof MonacoDiffElement)) {
+    throw new Error("Missing <composite-monaco-diff> element");
+}
+await diffEl.whenReady();
+function wireResizerUrlSync(resizer, index) {
+    const config = {
+        left: {
+            default: resizer.getAttribute("left") ?? "100px",
+            getParam: "l",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+        center: {
+            default: resizer.getAttribute("center") ?? "1200px",
+            getParam: "c",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+        height: {
+            default: resizer.getAttribute("height") ?? "100px",
+            getParam: "h",
+            encode: (value) => value,
+            decode: (value) => value,
+        },
+    };
+    const { trackUrl } = modURLSearchParams(config, (key, i) => `${key}-${i}`);
+    const { setParams } = trackUrl((params, updatedURLSearchParams, governedKeys) => {
+        resizer.setAttribute("left", params.left);
+        resizer.setAttribute("center", params.center);
+        resizer.setAttribute("height", params.height);
+        const current = new URLSearchParams(window.location.search);
+        const next = syncURLSearchParams(current, governedKeys, updatedURLSearchParams);
+        if (next.toString() !== current.toString()) {
+            const url = buildUrlWithSearchParams(window.location.href, next);
+            history.replaceState(history.state, "", url);
+        }
+    }, { ctx: index, fireOnMount: true });
+    const syncToUrl = () => {
+        setParams({
+            left: resizer.getAttribute("left") ?? config.left.default,
+            center: resizer.getAttribute("center") ?? config.center.default,
+            height: resizer.getAttribute("height") ?? config.height.default,
+        });
+    };
+    resizer.addEventListener("onLeft", syncToUrl);
+    resizer.addEventListener("onCenter", syncToUrl);
+    resizer.addEventListener("onHeight", syncToUrl);
+}
+function applyThemeAttribute(diffEl, theme) {
+    if (theme) {
+        diffEl.setAttribute("theme", theme);
+    }
+    else {
+        diffEl.removeAttribute("theme");
+    }
+}
+function applyLanguageAttribute(diffEl, language) {
+    if (language) {
+        diffEl.setAttribute("language", language);
+    }
+    else {
+        diffEl.removeAttribute("language");
+    }
+}
+document.querySelectorAll(CenterAndHeightResizer.tagName).forEach((el, index) => {
+    wireResizerUrlSync(el, index);
+});
+const themeSelect = document.getElementById("theme-select");
+if (!(themeSelect instanceof HTMLSelectElement)) {
+    throw new Error("Missing #theme-select element");
+}
+const languageSelect = document.getElementById("language-select");
+if (!(languageSelect instanceof HTMLSelectElement)) {
+    throw new Error("Missing #language-select element");
+}
+const { trackUrl: trackUrlNoIndex } = modURLSearchParams({
+    theme: {
+        default: "",
+        getParam: "theme",
+        encode: (value) => value,
+        decode: (value) => (isMonacoTheme(value) ? value : ""),
+    },
+    language: {
+        default: "javascript",
+        getParam: "lang",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+});
+const { setParam } = trackUrlNoIndex((params, updatedURLSearchParams, governedKeys) => {
+    themeSelect.value = params.theme;
+    applyThemeAttribute(diffEl, params.theme);
+    languageSelect.value = params.language;
+    applyLanguageAttribute(diffEl, params.language);
+    const current = new URLSearchParams(window.location.search);
+    const next = syncURLSearchParams(current, governedKeys, updatedURLSearchParams);
+    if (next.toString() !== current.toString()) {
+        const url = buildUrlWithSearchParams(window.location.href, next);
+        history.replaceState(history.state, "", url);
+    }
+}, { fireOnMount: true });
+themeSelect.addEventListener("change", () => {
+    setParam("theme", themeSelect.value);
+});
+languageSelect.addEventListener("change", () => {
+    setParam("language", languageSelect.value);
+});