composite-monaco-diff 1.0.2

package/dist/cjs/manager/index.cjs

@@ -0,0 +1,177 @@
+import { CenterAndHeightResizer } from "../CenterAndHeightResizer.js";
+import modURLSearchParams from "../urlchange/urlchange.js";
+import { syncURLSearchParams, buildUrlWithSearchParams } from "../urlchange/toolsURLSearchParams.js";
+import { MonacoDiffManager } from "../MonacoDiffManager.js";
+import { isMonacoTheme } from "../composite-monaco-diff.js";
+await customElements.whenDefined(CenterAndHeightResizer.tagName);
+const container = document.getElementById("container");
+if (!container) {
+    throw new Error("Missing #container element");
+}
+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);
+  });
+`;
+const mgr = new MonacoDiffManager(container, {
+    original,
+    modified,
+    language: "javascript",
+});
+/**
+ * This is actually important for mgr to
+ * be ready before continuing with trackUrl()
+ */
+await mgr.whenReady();
+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 config = {
+    left: {
+        default: "100px",
+        getParam: "l",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+    center: {
+        default: "1200px",
+        getParam: "c",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+    height: {
+        default: "100px",
+        getParam: "h",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+    theme: {
+        default: "",
+        getParam: "theme",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+};
+document.querySelectorAll(CenterAndHeightResizer.tagName).forEach((el, index) => {
+    const resizer = el;
+    const { trackUrl } = modURLSearchParams(config, (key, i) => {
+        let t;
+        const cond = /^\d+$/.test(String(i));
+        if (cond) {
+            t = `${key}-${i}`;
+        }
+        else {
+            t = key;
+        }
+        // console.log("instanceKeyFn", { cond, key, i }, "t: ", t);
+        return t;
+    });
+    const { setParams } = trackUrl((params, updatedURLSearchParams, governedKeys) => {
+        // console.log("trackUrl", index, JSON.stringify(params));
+        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 = () => {
+        // console.log("syncToUrl: ", index);
+        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(theme) {
+    console.log("applyThemeAttribute", theme);
+    mgr.getMonaco()?.editor.setTheme(theme || "vs");
+}
+function applyLanguageAttribute(language) {
+    console.log("applyLanguageAttribute", language);
+    mgr.setLanguage(language || undefined);
+}
+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) => {
+    console.log("trackUrlNoIndex", params);
+    themeSelect.value = params.theme;
+    applyThemeAttribute(params.theme);
+    languageSelect.value = params.language;
+    applyLanguageAttribute(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", () => {
+    console.log("themeSelect.value", themeSelect.value);
+    setParam("theme", themeSelect.value);
+});
+languageSelect.addEventListener("change", () => {
+    console.log("languageSelect.value", languageSelect.value);
+    setParam("language", languageSelect.value);
+});

package/dist/cjs/react.cjs

@@ -0,0 +1,64 @@
+// @ts-ignore
+import * as React from "react";
+import "./composite-monaco-diff.js";
+export const MonacoDiff = React.forwardRef((props, ref) => {
+    const { theme, language, original, modified, originalLanguage, modifiedLanguage, children, ...rest } = props;
+    const internalRef = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    React.useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (el && el.getManager) {
+            let active = true;
+            (async () => {
+                try {
+                    await el.whenReady();
+                    if (!active)
+                        return;
+                    const mgr = el.getManager();
+                    const editor = mgr.getEditor();
+                    if (editor) {
+                        const model = editor.getModel();
+                        if (model) {
+                            if (original !== undefined && model.original.getValue() !== original) {
+                                model.original.setValue(original);
+                            }
+                            if (modified !== undefined && model.modified.getValue() !== modified) {
+                                model.modified.setValue(modified);
+                            }
+                            const monaco = mgr.getMonaco();
+                            if (monaco) {
+                                if (originalLanguage !== undefined) {
+                                    monaco.editor.setModelLanguage(model.original, originalLanguage);
+                                }
+                                if (modifiedLanguage !== undefined) {
+                                    monaco.editor.setModelLanguage(model.modified, modifiedLanguage);
+                                }
+                            }
+                        }
+                    }
+                }
+                catch (err) {
+                    console.error("MonacoDiff wrapper error:", err);
+                }
+            })();
+            return () => {
+                active = false;
+            };
+        }
+    }, [original, modified, originalLanguage, modifiedLanguage]);
+    const wcProps = { ...rest, ref: setRef };
+    if (theme !== undefined)
+        wcProps["theme"] = theme;
+    if (language !== undefined)
+        wcProps["language"] = language;
+    return React.createElement("composite-monaco-diff", wcProps, children);
+});
+export default MonacoDiff;

package/dist/cjs/trimLeft.cjs

@@ -0,0 +1,28 @@
+export default 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}`);
+    }
+    // Auto-detect indentation
+    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");
+}

package/dist/cjs/urlchange/ChildSection.cjs

@@ -0,0 +1,174 @@
+export const radioOptions = ["radio1", "radio2", "radio3"];
+export const defaultRadioOption = radioOptions[1];
+export const selectOptions = ["item1", "item2", "item3", "item4"];
+/** HTML template for one demo instance (form controls + JSON dump). Injected via `innerHTML`. */
+function generateSectionHtml(index) {
+    const radioOptionsHtml = radioOptions
+        .map((opt) => `
+        <label class="url-ser-label-margin">
+          <input type="radio" name="radio-${index}" value="${opt}" data-role="radio" />
+          ${opt}
+        </label>`)
+        .join("");
+    const selectOptionsHtml = selectOptions.map((opt) => `<option value="${opt}">${opt}</option>`).join("");
+    return `
+    <div class="url-ser-flex">
+      <form class="url-ser-form" data-role="form">
+        <label>
+          <strong>Text Input:</strong>
+          <br />
+          <input type="text" class="url-ser-input" data-role="text" />
+        </label>
+
+        <fieldset>
+          <legend><strong>Radio Group:</strong></legend>
+          ${radioOptionsHtml}
+        </fieldset>
+
+        <label>
+          <strong>Multiple Select:</strong>
+          <br />
+          <select multiple class="url-ser-select" data-role="multi-select">
+            ${selectOptionsHtml}
+          </select>
+        </label>
+
+        <fieldset>
+          <legend><strong>Checkboxes:</strong></legend>
+          <label class="url-ser-label-margin">
+            <input type="checkbox" data-role="checkbox-a" />
+            Checkbox A
+          </label>
+          <label>
+            <input type="checkbox" data-role="checkbox-b" />
+            Checkbox B
+          </label>
+        </fieldset>
+
+        <div class="buttons">
+          <button type="button" class="url-ser-delete-btn red" data-role="delete">
+            Delete Component #${index}
+          </button>
+          <button type="button" class="url-ser-delete-btn" data-role="reconfigure">
+            Reconfigure #${index}
+          </button>
+        </div>
+      </form>
+
+      <div class="url-ser-dump-container">
+        <pre class="url-ser-pre" data-role="dump"></pre>
+      </div>
+    </div>
+  `;
+}
+/**
+ * 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 class ChildSection {
+    index;
+    root;
+    textInput;
+    multiSelect;
+    checkboxA;
+    checkboxB;
+    dumpPre;
+    radioInputs;
+    constructor(container, index) {
+        this.index = index;
+        this.root = document.createElement("div");
+        this.root.className = "url-ser-container";
+        this.root.dataset.index = String(index);
+        this.root.innerHTML = generateSectionHtml(index);
+        container.appendChild(this.root);
+        const form = this.root.querySelector('[data-role="form"]');
+        this.textInput = this.root.querySelector('[data-role="text"]');
+        this.multiSelect = this.root.querySelector('[data-role="multi-select"]');
+        this.checkboxA = this.root.querySelector('[data-role="checkbox-a"]');
+        this.checkboxB = this.root.querySelector('[data-role="checkbox-b"]');
+        this.dumpPre = this.root.querySelector('[data-role="dump"]');
+        this.radioInputs = Array.from(this.root.querySelectorAll('[data-role="radio"]'));
+        form.addEventListener("submit", (e) => e.preventDefault());
+    }
+    // Getters & Setters
+    getText() {
+        return this.textInput.value;
+    }
+    setText(value) {
+        this.textInput.value = value;
+    }
+    getRadio() {
+        const checkedRadio = this.radioInputs.find((input) => input.checked);
+        return (checkedRadio ? checkedRadio.value : defaultRadioOption);
+    }
+    setRadio(value) {
+        for (const input of this.radioInputs) {
+            input.checked = input.value === value;
+        }
+    }
+    getMultiSelect() {
+        return Array.from(this.multiSelect.selectedOptions, (o) => o.value);
+    }
+    setMultiSelect(values) {
+        for (const option of Array.from(this.multiSelect.options)) {
+            option.selected = values.includes(option.value);
+        }
+    }
+    getCheckboxA() {
+        return this.checkboxA.checked;
+    }
+    setCheckboxA(value) {
+        this.checkboxA.checked = value;
+    }
+    getCheckboxB() {
+        return this.checkboxB.checked;
+    }
+    setCheckboxB(value) {
+        this.checkboxB.checked = value;
+    }
+    setDump(data) {
+        this.dumpPre.textContent = JSON.stringify(data, null, 2);
+    }
+    // Event Registrations
+    onText(callback) {
+        this.textInput.addEventListener("input", () => {
+            callback(this.index, this.textInput.value);
+        });
+    }
+    onRadio(callback) {
+        for (const input of this.radioInputs) {
+            input.addEventListener("change", () => {
+                if (input.checked) {
+                    callback(this.index, input.value);
+                }
+            });
+        }
+    }
+    onMultiSelect(callback) {
+        this.multiSelect.addEventListener("change", () => {
+            callback(this.index, this.getMultiSelect());
+        });
+    }
+    onCheckboxA(callback) {
+        this.checkboxA.addEventListener("change", () => {
+            callback(this.index, this.checkboxA.checked);
+        });
+    }
+    onCheckboxB(callback) {
+        this.checkboxB.addEventListener("change", () => {
+            callback(this.index, this.checkboxB.checked);
+        });
+    }
+    onDelete(callback) {
+        const deleteBtn = this.root.querySelector('[data-role="delete"]');
+        deleteBtn.addEventListener("click", () => callback(this.index));
+    }
+    onReconfigure(callback) {
+        const reconfigureBtn = this.root.querySelector('[data-role="reconfigure"]');
+        reconfigureBtn.addEventListener("click", () => callback(this.index));
+    }
+    destroy() {
+        this.root.remove();
+    }
+}

package/dist/cjs/urlchange/index.cjs

@@ -0,0 +1,229 @@
+/**
+ * Demo page for vanilla `trackUrl` / `modURLSearchParams`.
+ * Mirrors ModURLSearchParamsComponent.tsx: multiple indexed instances, each syncing UI ↔ URL.
+ *
+ * All query-string reads/writes go through helpers in `toolsURLSearchParams.ts`.
+ */
+import modURLSearchParams, { onUrlChange } from "./urlchange.js";
+import { cloneSearchParams, compareNormalizedSearchParams, syncURLSearchParams, buildUrlWithSearchParams, } from "./toolsURLSearchParams.js";
+import { ChildSection, selectOptions, defaultRadioOption, } from "./ChildSection.js";
+/** Schema for one instance: local names, short URL keys (`t`, `r`, …), defaults, encode/decode. */
+const urlParamConfig = {
+    text: {
+        default: "default text",
+        getParam: "t",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+    radio: {
+        default: defaultRadioOption,
+        getParam: "r",
+        encode: (value) => value,
+        decode: (value) => value,
+    },
+    multiSelect: {
+        default: ["item1", "item2"],
+        getParam: "m",
+        encode: (value) => value.join("."),
+        decode: (value) => value.split("."),
+    },
+    checkboxA: {
+        default: false,
+        getParam: "c1",
+        encode: (value) => (value ? "1" : "0"),
+        decode: (value) => value === "1",
+    },
+    checkboxB: {
+        default: true,
+        getParam: "c2",
+        encode: (value) => (value ? "1" : "0"),
+        decode: (value) => value === "1",
+    },
+};
+const instanceKeyFn = (key, i) => `${key}-${i}`;
+const { trackUrl, separateIndexedSearchParams } = modURLSearchParams(urlParamConfig, instanceKeyFn);
+/** Parent-only key: lists instance indexes without writing default-valued tracked params. */
+const INSTANCE_IDS_KEY = "ids";
+/**
+ * Attempt to find list of indices to determine how many html formations to render
+ *
+ * Collects all instance indexes present in the query string.
+ * Uses the parent `ids=1,2` list plus any key ending in `-{n}` (e.g. `t-3` from deep links).
+ */
+function parseInstanceIds(params) {
+    const indexes = new Set();
+    const raw = params.get(INSTANCE_IDS_KEY);
+    if (raw) {
+        for (const part of raw.split(",")) {
+            const n = parseInt(part.trim(), 10);
+            if (!isNaN(n))
+                indexes.add(n);
+        }
+    }
+    params.forEach((_, key) => {
+        if (key === INSTANCE_IDS_KEY)
+            return;
+        const match = key.match(/-(\d+)$/);
+        if (match)
+            indexes.add(parseInt(match[1], 10));
+    });
+    return Array.from(indexes).sort((a, b) => a - b);
+}
+/** Reads the current page URL and returns which instance indexes should be rendered. */
+function getInstanceList() {
+    return parseInstanceIds(cloneSearchParams(new URLSearchParams(window.location.search)));
+}
+/**
+ * Returns a patch for `ids` only. Apply with `syncURLSearchParams` so an empty list removes the key.
+ */
+function instanceIdsPatch(ids) {
+    const patch = new URLSearchParams();
+    if (ids.length > 0) {
+        patch.set(INSTANCE_IDS_KEY, ids.join(","));
+    }
+    return patch;
+}
+/** All indexed query keys for one instance (`t-1`, `r-1`, …) — used when removing an instance from the URL. */
+function governedKeysForInstance(i) {
+    return Object.values(urlParamConfig).map((def) => instanceKeyFn(def.getParam, i));
+}
+/**
+ * Commits a full query string to the address bar when it differs from the current location (normalized).
+ */
+function updateUrl(next) {
+    const current = cloneSearchParams(new URLSearchParams(window.location.search));
+    if (compareNormalizedSearchParams(next, current))
+        return;
+    const url = buildUrlWithSearchParams(window.location.href, next);
+    history.replaceState(history.state, "", url);
+}
+/**
+ * Syncs only `governed` keys from `patch` onto `base` (defaults to current location) and commits.
+ * Keys absent from `patch` are removed — required for default elision and instance teardown.
+ */
+function replaceSearchSynced(governed, patch, base) {
+    updateUrl(syncURLSearchParams(base ?? cloneSearchParams(new URLSearchParams(window.location.search)), governed, patch));
+}
+/** "Add Text Param" — registers the next instance index in `ids` and mounts a new section. */
+function addComponent() {
+    const current = cloneSearchParams(new URLSearchParams(window.location.search));
+    const list = getInstanceList();
+    const nextIndex = list.length > 0 ? Math.max(...list) + 1 : 1;
+    replaceSearchSynced([INSTANCE_IDS_KEY], instanceIdsPatch([...list, nextIndex]), current);
+    updateUrlDisplay();
+    reconcileSections();
+}
+/**
+ * Removes one instance: drops all of its indexed tracked keys and removes `i` from `ids`.
+ * Called from each section's Delete button.
+ */
+function deleteItem(i) {
+    const current = cloneSearchParams(new URLSearchParams(window.location.search));
+    const childSlice = separateIndexedSearchParams(current, i);
+    const withoutChild = syncURLSearchParams(current, governedKeysForInstance(i), childSlice);
+    const ids = parseInstanceIds(withoutChild).filter((id) => id !== i);
+    replaceSearchSynced([INSTANCE_IDS_KEY], instanceIdsPatch(ids), withoutChild);
+    updateUrlDisplay();
+    reconcileSections();
+}
+const urlDisplayEl = document.getElementById("url-display");
+/** Keeps the top `<pre id="url-display">` in sync with the full browser URL after every change. */
+const updateUrlDisplay = (url = window.location.href) => {
+    if (urlDisplayEl)
+        urlDisplayEl.textContent = url;
+};
+const sectionsEl = document.getElementById("sections");
+const instanceListEl = document.getElementById("instance-list");
+const addBtn = document.getElementById("add-btn");
+const linkOff = document.getElementById("link-off");
+linkOff.href = window.location.href.split("?")[0];
+const sections = new Map();
+/**
+ * Syncs mounted sections with `getInstanceList()`: create missing, destroy removed, reorder DOM.
+ * Runs on load, on URL changes (back/forward, links), and after add/delete.
+ */
+function reconcileSections() {
+    const list = getInstanceList();
+    instanceListEl.textContent = list.length > 0 ? list.join(", ") : "(none)";
+    for (const i of list) {
+        if (!sections.has(i)) {
+            const section = new ChildSection(sectionsEl, i);
+            const handle = trackUrl((params, updatedURLSearchParams, governedKeys) => {
+                console.log(`RENDER ${i} >${updatedURLSearchParams.toString()}<`, params);
+                section.setText(params.text);
+                section.setRadio(params.radio);
+                section.setMultiSelect(params.multiSelect);
+                section.setCheckboxA(params.checkboxA);
+                section.setCheckboxB(params.checkboxB);
+                section.setDump({ params, path: updatedURLSearchParams.toString() });
+                updateUrlDisplay();
+                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: i, fireOnMount: true });
+            section.onText((idx, val) => {
+                handle.setParam("text", val);
+            });
+            section.onRadio((idx, val) => {
+                handle.setParam("radio", val);
+            });
+            section.onMultiSelect((idx, val) => {
+                handle.setParam("multiSelect", val);
+            });
+            section.onCheckboxA((idx, val) => {
+                handle.setParam("checkboxA", val);
+            });
+            section.onCheckboxB((idx, val) => {
+                handle.setParam("checkboxB", val);
+            });
+            section.onDelete((idx) => {
+                deleteItem(idx);
+            });
+            section.onReconfigure((idx) => {
+                const params = handle.getParams();
+                if (params.radio === "radio2") {
+                    handle.setParams({
+                        text: `text-${idx} second state`,
+                        radio: "radio3",
+                        multiSelect: [selectOptions[1], selectOptions[selectOptions.length - 2]],
+                        checkboxA: true,
+                        checkboxB: false,
+                    });
+                }
+                else {
+                    handle.setParams({
+                        text: `text-${idx}`,
+                        radio: "radio2",
+                        multiSelect: [selectOptions[0], selectOptions[selectOptions.length - 1]],
+                        checkboxA: false,
+                        checkboxB: true,
+                    });
+                }
+            });
+            sections.set(i, { section, handle });
+        }
+    }
+    for (const [i, record] of sections) {
+        if (!list.includes(i)) {
+            record.handle.disconnect();
+            record.section.destroy();
+            sections.delete(i);
+        }
+    }
+    for (const i of list) {
+        const el = sections.get(i).section.root;
+        sectionsEl.appendChild(el);
+    }
+}
+addBtn.addEventListener("click", addComponent);
+// Initial paint + react to back/forward and any URL change that affects instance list or params.
+onUrlChange(() => {
+    console.log("any change");
+    updateUrlDisplay();
+    reconcileSections();
+});
+updateUrlDisplay();
+reconcileSections();