composite-monaco-diff 1.0.2

package/dist/esm/urlchange/ChildSection.js

@@ -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/esm/urlchange/index.js

@@ -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();

package/dist/esm/urlchange/toolsURLSearchParams.js

@@ -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();
+}