@wocart/theme 1.4.0 → 1.6.0

package/dist/preview-bridge.js

@@ -0,0 +1,475 @@
+/// <reference lib="dom" />
+/**
+ * The preview page's side of the preview protocol: a small browser module a
+ * theme loads on its preview route only. It finds the instances the renderer
+ * marked, tells the editor where they are and which one the merchant points
+ * at, and re-renders a draft the editor sends by posting it back to the
+ * storefront and swapping in only the sections that changed — or, when the
+ * page around them changed, the whole page, the way Astro's router swaps one.
+ * A change the editor patches is shown at once, on the page as it stands,
+ * until that render arrives.
+ *
+ * It draws nothing — outlines, toolbars and panels are the editor's. It posts
+ * only to the editor origin it is given and reads only that origin's messages
+ * from the framing window.
+ */
+import { PREVIEW_PROTOCOL_VERSION, THEME_PREVIEW_PATH, parsePreviewMarker, previewEndMarker, previewStartMarker, } from "./preview-protocol.js";
+/**
+ * Dispatched on `document` for each section the bridge swapped in, with the
+ * instance id as `detail.id`: a section with browser behavior binds it again.
+ * When the whole page was replaced instead, the bridge dispatches Astro's own
+ * `astro:page-load`, as Astro's router does after it swaps a page.
+ */
+export const PREVIEW_SECTION_LOAD_EVENT = "wocart:section-load";
+const ASTRO_PAGE_LOAD_EVENT = "astro:page-load";
+const SHOW_COMMENT = 0x80;
+const SHOW_TEXT = 0x4;
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+const COMMENT_NODE = 8;
+/**
+ * Every complete marker pair under `root`, in document order, each with the
+ * pair that encloses it. Pairs nest or are ignored: a start still open when an
+ * enclosing pair closes never pairs.
+ */
+function collect(root) {
+    const pairs = [];
+    const open = [];
+    const walker = (root.ownerDocument ?? root).createTreeWalker(root, SHOW_COMMENT);
+    let position = 0;
+    for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+        const marker = parsePreviewMarker(node.data);
+        if (marker === null)
+            continue;
+        position += 1;
+        if (marker.kind === "start") {
+            open.push({ id: marker.id, type: marker.type, hidden: marker.hidden, start: node, opened: position });
+            continue;
+        }
+        const index = open.map((entry) => entry.id).lastIndexOf(marker.id);
+        if (index === -1)
+            continue;
+        pairs.push({ ...open.splice(index)[0], end: node, closed: position });
+    }
+    pairs.sort((a, b) => a.opened - b.opened);
+    return pairs.map(({ opened, closed, ...entry }) => {
+        const enclosing = pairs.filter((other) => other.opened < opened && closed < other.closed);
+        return { ...entry, parent: enclosing.at(-1)?.id ?? null, depth: enclosing.length };
+    });
+}
+/** The nodes between a pair of markers, or `null` when the pair are not siblings. */
+function between(entry) {
+    const nodes = [];
+    for (let node = entry.start.nextSibling; node !== entry.end; node = node.nextSibling) {
+        if (node === null)
+            return null;
+        nodes.push(node);
+    }
+    return nodes;
+}
+function markup(nodes) {
+    return nodes
+        .map((node) => {
+        if (node.nodeType === ELEMENT_NODE)
+            return node.outerHTML;
+        if (node.nodeType === COMMENT_NODE)
+            return `<!--${node.data}-->`;
+        return node.textContent ?? "";
+    })
+        .join("");
+}
+/** An instance's nodes with its markers: what moves, copies or goes with it. */
+function withMarkers(entry) {
+    const inside = between(entry);
+    return inside === null ? null : [entry.start, ...inside, entry.end];
+}
+/** Text nodes under `nodes` that a merchant reads — never a script's or a style's. */
+function textNodes(nodes) {
+    const found = [];
+    for (const node of nodes) {
+        if (node.nodeType === TEXT_NODE) {
+            found.push(node);
+            continue;
+        }
+        if (node.nodeType !== ELEMENT_NODE)
+            continue;
+        const walker = node.ownerDocument.createTreeWalker(node, SHOW_TEXT);
+        for (let text = walker.nextNode(); text !== null; text = walker.nextNode()) {
+            const tag = text.parentElement?.tagName;
+            if (tag !== "SCRIPT" && tag !== "STYLE" && tag !== "TEMPLATE")
+                found.push(text);
+        }
+    }
+    return found;
+}
+/**
+ * The page with every section's content left out — the root's attributes and
+ * the body around the sections: what must not change for sections to be
+ * swapped alone.
+ */
+function frameOf(doc) {
+    const copy = doc.body.cloneNode(true);
+    for (const entry of collect(copy)) {
+        if (entry.parent !== null)
+            continue;
+        const nodes = between(entry);
+        if (nodes === null)
+            return null;
+        for (const node of nodes)
+            node.parentNode?.removeChild(node);
+    }
+    const root = doc.documentElement;
+    const attributes = root.getAttributeNames().map((name) => `${name}=${JSON.stringify(root.getAttribute(name))}`);
+    return `${attributes.join(" ")}\n${copy.outerHTML}`;
+}
+function stylesOf(doc) {
+    return Array.from(doc.head.querySelectorAll('style, link[rel="stylesheet"]'));
+}
+/**
+ * Starts the bridge on a preview page. It posts `ready` with every marked
+ * instance, `layout` as the page scrolls or resizes, `hover` as the merchant
+ * points, `select` as they click (in `edit` mode, where links and forms do
+ * nothing), and `rendered` after each draft it swaps in.
+ */
+export function startPreviewBridge(options) {
+    const win = (options.window ?? window);
+    const doc = win.document;
+    const endpoint = options.endpoint ?? THEME_PREVIEW_PATH;
+    let token = options.token;
+    let mode = "edit";
+    let marked = collect(doc.body);
+    let hovered = null;
+    let frame = 0;
+    let latest = 0;
+    let stopped = false;
+    const post = (message) => win.parent.postMessage({ source: "wocart-preview", version: PREVIEW_PROTOCOL_VERSION, ...message }, options.editorOrigin);
+    const rangeOf = (entry) => {
+        const range = doc.createRange();
+        range.setStartAfter(entry.start);
+        range.setEndBefore(entry.end);
+        return range;
+    };
+    const instances = () => marked.map((entry) => {
+        const box = rangeOf(entry).getBoundingClientRect();
+        const rect = box.width > 0 || box.height > 0 ? { x: box.x, y: box.y, width: box.width, height: box.height } : null;
+        return { id: entry.id, type: entry.type, parent: entry.parent, hidden: entry.hidden, rect };
+    });
+    const innermostAt = (target) => {
+        if (!(target instanceof win.Node))
+            return null;
+        let best;
+        for (const entry of marked) {
+            if (best !== undefined && entry.depth <= best.depth)
+                continue;
+            if (between(entry)?.some((node) => node.contains(target)))
+                best = entry;
+        }
+        return best?.id ?? null;
+    };
+    const reportLayout = () => {
+        if (frame !== 0)
+            return;
+        frame = win.requestAnimationFrame(() => {
+            frame = 0;
+            post({ type: "layout", instances: instances() });
+        });
+    };
+    const onClick = (event) => {
+        if (mode !== "edit")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const id = innermostAt(event.target);
+        if (id !== null)
+            post({ type: "select", id });
+    };
+    const onSubmit = (event) => {
+        if (mode !== "edit")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const onOver = (event) => {
+        const id = innermostAt(event.target);
+        if (id === hovered)
+            return;
+        hovered = id;
+        post({ type: "hover", id });
+    };
+    const onLeave = () => {
+        if (hovered === null)
+            return;
+        hovered = null;
+        post({ type: "hover", id: null });
+    };
+    const swapHead = (next) => {
+        const current = stylesOf(doc);
+        const wanted = stylesOf(next);
+        if (current.length === wanted.length) {
+            current.forEach((node, index) => {
+                if (node.outerHTML !== wanted[index].outerHTML)
+                    node.replaceWith(doc.importNode(wanted[index], true));
+            });
+        }
+        else {
+            for (const node of current)
+                node.remove();
+            for (const node of wanted)
+                doc.head.appendChild(doc.importNode(node, true));
+        }
+        if (next.title !== doc.title)
+            doc.title = next.title;
+    };
+    const swapPage = (next) => {
+        const root = doc.documentElement;
+        for (const name of root.getAttributeNames())
+            if (!next.documentElement.hasAttribute(name))
+                root.removeAttribute(name);
+        for (const name of next.documentElement.getAttributeNames())
+            root.setAttribute(name, next.documentElement.getAttribute(name));
+        const { scrollX, scrollY } = win;
+        doc.body.replaceWith(doc.importNode(next.body, true));
+        win.scrollTo(scrollX, scrollY);
+    };
+    /** Swaps `next` in; `null` when the whole page was replaced, else the sections that were. */
+    const swap = (next) => {
+        swapHead(next);
+        const before = frameOf(doc);
+        if (before === null || before !== frameOf(next)) {
+            swapPage(next);
+            return null;
+        }
+        const incoming = collect(next.body);
+        const swapped = [];
+        for (const entry of marked) {
+            if (entry.parent !== null)
+                continue;
+            const counterpart = incoming.find((candidate) => candidate.parent === null && candidate.id === entry.id);
+            const old = between(entry);
+            const fresh = counterpart === undefined ? null : between(counterpart);
+            if (old === null || fresh === null || markup(old) === markup(fresh))
+                continue;
+            for (const node of old)
+                node.parentNode?.removeChild(node);
+            for (const node of fresh)
+                entry.end.parentNode?.insertBefore(doc.importNode(node, true), entry.end);
+            swapped.push(entry.id);
+        }
+        return swapped;
+    };
+    /** What a `remove` or `hide` patch took off the page, to put back on `restore` or show. */
+    const removed = new Map();
+    const hiddenNodes = new Map();
+    const sectionsOf = () => marked.filter((entry) => entry.parent === null);
+    const find = (id) => marked.find((entry) => entry.id === id);
+    /** Puts `nodes` at `index` among the document's sections other than `id`. */
+    const place = (nodes, id, index) => {
+        const others = sectionsOf().filter((entry) => entry.id !== id);
+        if (!Number.isInteger(index) || index < 0 || index > others.length)
+            return false;
+        const before = others[index]?.start ?? others.at(-1)?.end.nextSibling ?? null;
+        const parent = others[index]?.start.parentNode ?? others.at(-1)?.end.parentNode;
+        if (!parent)
+            return false;
+        for (const node of nodes)
+            parent.insertBefore(node, before);
+        return true;
+    };
+    const relabel = (marker, ids) => {
+        const parsed = parsePreviewMarker(marker.data);
+        if (parsed === null || !Object.hasOwn(ids, parsed.id))
+            return;
+        const id = ids[parsed.id];
+        marker.data = parsed.kind === "start" ? previewStartMarker({ id, type: parsed.type, hidden: parsed.hidden }) : previewEndMarker({ id });
+    };
+    /** Applies one patch to the page as it stands; returns the sections it put in. */
+    const apply = (patch) => {
+        const entry = find(patch.id);
+        switch (patch.op) {
+            case "move": {
+                if (entry === undefined || entry.parent !== null)
+                    return [];
+                const nodes = withMarkers(entry);
+                if (nodes !== null)
+                    place(nodes, entry.id, patch.index);
+                return [];
+            }
+            case "duplicate": {
+                const nodes = entry === undefined ? null : withMarkers(entry);
+                if (entry === undefined || nodes === null || !Object.hasOwn(patch.ids, entry.id))
+                    return [];
+                const copies = nodes.map((node) => node.cloneNode(true));
+                for (const copy of copies) {
+                    if (copy.nodeType === COMMENT_NODE)
+                        relabel(copy, patch.ids);
+                    else if (copy.nodeType === ELEMENT_NODE) {
+                        const walker = doc.createTreeWalker(copy, SHOW_COMMENT);
+                        for (let node = walker.nextNode(); node !== null; node = walker.nextNode())
+                            relabel(node, patch.ids);
+                    }
+                }
+                const after = entry.end.nextSibling;
+                for (const copy of copies)
+                    entry.end.parentNode.insertBefore(copy, after);
+                return [patch.ids[entry.id]];
+            }
+            case "remove": {
+                const nodes = entry === undefined ? null : withMarkers(entry);
+                if (nodes === null)
+                    return [];
+                for (const node of nodes)
+                    node.parentNode?.removeChild(node);
+                removed.set(patch.id, nodes);
+                return [];
+            }
+            case "restore": {
+                const nodes = removed.get(patch.id);
+                if (entry !== undefined || nodes === undefined || !place(nodes, patch.id, patch.index))
+                    return [];
+                removed.delete(patch.id);
+                return [patch.id];
+            }
+            case "hide": {
+                if (entry === undefined || entry.hidden === patch.hidden)
+                    return [];
+                const inside = between(entry);
+                if (inside === null)
+                    return [];
+                if (patch.hidden) {
+                    for (const node of inside)
+                        node.parentNode?.removeChild(node);
+                    hiddenNodes.set(entry.id, inside);
+                }
+                else {
+                    const kept = hiddenNodes.get(entry.id);
+                    if (kept === undefined)
+                        return [];
+                    for (const node of kept)
+                        entry.end.parentNode.insertBefore(node, entry.end);
+                    hiddenNodes.delete(entry.id);
+                }
+                entry.start.data = previewStartMarker({ id: entry.id, type: entry.type, hidden: patch.hidden });
+                return patch.hidden ? [] : [entry.id];
+            }
+            case "text": {
+                const inside = entry === undefined ? null : between(entry);
+                const from = patch.from.trim();
+                if (inside === null || from === "" || typeof patch.to !== "string")
+                    return [];
+                for (const node of textNodes(inside)) {
+                    if (node.data.trim() !== from)
+                        continue;
+                    const lead = /^\s*/.exec(node.data)[0];
+                    const trail = /\s*$/.exec(node.data)[0];
+                    node.data = `${lead}${patch.to}${trail}`;
+                }
+                return [];
+            }
+            default:
+                return [];
+        }
+    };
+    /** Shows `patches` at once; a render already on its way would undo them, so it is dropped. */
+    const patchPage = (patches) => {
+        latest += 1;
+        const loaded = [];
+        for (const patch of patches) {
+            if (typeof patch !== "object" || patch === null || typeof patch.id !== "string")
+                continue;
+            loaded.push(...apply(patch));
+            marked = collect(doc.body);
+        }
+        for (const id of loaded)
+            doc.dispatchEvent(new win.CustomEvent(PREVIEW_SECTION_LOAD_EVENT, { detail: { id } }));
+        post({ type: "layout", instances: instances() });
+    };
+    const render = async (draft, revision) => {
+        const ticket = ++latest;
+        try {
+            const response = await win.fetch(endpoint, {
+                method: "POST",
+                headers: { "Content-Type": "application/json", Accept: "text/html" },
+                body: JSON.stringify({ token, draft }),
+                credentials: "same-origin",
+            });
+            const html = await response.text();
+            if (stopped || ticket !== latest)
+                return;
+            if (!response.ok) {
+                post({ type: "error", revision, reason: `the preview answered ${response.status}` });
+                return;
+            }
+            const swapped = swap(new win.DOMParser().parseFromString(html, "text/html"));
+            marked = collect(doc.body);
+            if (swapped === null) {
+                doc.dispatchEvent(new win.Event(ASTRO_PAGE_LOAD_EVENT));
+            }
+            else {
+                for (const id of swapped)
+                    doc.dispatchEvent(new win.CustomEvent(PREVIEW_SECTION_LOAD_EVENT, { detail: { id } }));
+            }
+            post({ type: "rendered", revision, instances: instances() });
+        }
+        catch (error) {
+            if (stopped || ticket !== latest)
+                return;
+            post({ type: "error", revision, reason: error instanceof Error ? error.message : String(error) });
+        }
+    };
+    const onMessage = (event) => {
+        if (event.origin !== options.editorOrigin || event.source !== win.parent)
+            return;
+        const message = event.data;
+        if (typeof message !== "object" || message === null)
+            return;
+        if (message.source !== "wocart-editor" || message.version !== PREVIEW_PROTOCOL_VERSION)
+            return;
+        switch (message.type) {
+            case "render":
+                if (typeof message.draft === "object" && message.draft !== null && !Array.isArray(message.draft)) {
+                    void render(message.draft, typeof message.revision === "number" ? message.revision : null);
+                }
+                break;
+            case "patch":
+                if (Array.isArray(message.patches))
+                    patchPage(message.patches);
+                break;
+            case "mode":
+                if (message.mode === "edit" || message.mode === "interactive")
+                    mode = message.mode;
+                break;
+            case "scroll-to": {
+                const entry = marked.find((candidate) => candidate.id === message.id);
+                const first = entry === undefined ? undefined : between(entry)?.find((node) => node.nodeType === ELEMENT_NODE);
+                first?.scrollIntoView({ block: "start", behavior: "smooth" });
+                break;
+            }
+            case "token":
+                if (typeof message.token === "string" && message.token !== "")
+                    token = message.token;
+                break;
+        }
+    };
+    win.addEventListener("message", onMessage);
+    win.addEventListener("scroll", reportLayout, { passive: true });
+    win.addEventListener("resize", reportLayout);
+    doc.addEventListener("click", onClick, true);
+    doc.addEventListener("submit", onSubmit, true);
+    doc.addEventListener("mouseover", onOver, true);
+    doc.documentElement.addEventListener("mouseleave", onLeave);
+    post({ type: "ready", instances: instances() });
+    return {
+        stop() {
+            win.removeEventListener("message", onMessage);
+            win.removeEventListener("scroll", reportLayout);
+            win.removeEventListener("resize", reportLayout);
+            doc.removeEventListener("click", onClick, true);
+            doc.removeEventListener("submit", onSubmit, true);
+            doc.removeEventListener("mouseover", onOver, true);
+            doc.documentElement.removeEventListener("mouseleave", onLeave);
+            if (frame !== 0)
+                win.cancelAnimationFrame(frame);
+            stopped = true;
+        },
+    };
+}

package/dist/preview-protocol.d.ts

@@ -0,0 +1,147 @@
+/**
+ * The preview protocol: how a framed storefront page in preview mode and the
+ * editor that frames it talk, and how the page marks its sections. Plain data
+ * and string helpers — shared by the renderer (`InstanceView`), the page's
+ * bridge (`@wocart/theme/preview`) and an editor, so the three cannot drift.
+ *
+ * Every message is `{ source, version, type, … }`. The page sends
+ * `source: "wocart-preview"`; the editor sends `source: "wocart-editor"`. Both
+ * sides post with the other's exact origin and check `event.origin` and
+ * `event.source` before reading a message.
+ */
+/** Incremented on a change an older counterpart could not read. */
+export declare const PREVIEW_PROTOCOL_VERSION: 1;
+/** Where a theme that supports preview serves it: a POST route of the storefront. */
+export declare const THEME_PREVIEW_PATH = "/wocart-preview";
+/** A section's place on the page, in the frame's viewport coordinates. */
+export interface PreviewRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** One rendered instance, as the page reports it. `rect` is null when it shows nothing. */
+export interface PreviewInstance {
+    id: string;
+    type: string;
+    /** The instance it is inside, or `null` for a section of the document. */
+    parent: string | null;
+    hidden: boolean;
+    rect: PreviewRect | null;
+}
+/** What the preview page tells the editor. */
+export type PreviewPageMessage = {
+    source: "wocart-preview";
+    version: typeof PREVIEW_PROTOCOL_VERSION;
+} & ({
+    type: "ready";
+    instances: PreviewInstance[];
+} | {
+    type: "layout";
+    instances: PreviewInstance[];
+} | {
+    type: "rendered";
+    revision: number | null;
+    instances: PreviewInstance[];
+} | {
+    type: "select";
+    id: string;
+} | {
+    type: "hover";
+    id: string | null;
+} | {
+    type: "error";
+    revision: number | null;
+    reason: string;
+});
+/** The interaction an editor allows: `edit` turns clicks into selections; `interactive` lets the page behave. */
+export type PreviewMode = "edit" | "interactive";
+/**
+ * A change the editor has already made to its draft, for the page to show at
+ * once, before the `render` that follows it. A patch is a hint: the page
+ * applies what it can find and leaves the rest to that render, which is the
+ * page's truth — so an editor always sends the render too, and a page that
+ * does not know patches (before `@wocart/theme` 1.6.0) still shows every
+ * change, a moment later.
+ *
+ * - `move`: a section of the document to `index` among the sections, counted
+ *   once it has left its place (`moveInstance`).
+ * - `duplicate`: a copy of an instance right after it; `ids` maps every
+ *   instance id inside it, its own included, to its copy's.
+ * - `remove`: an instance and everything in it; `restore` puts what a
+ *   `remove` took back, as a section of the document at `index`.
+ * - `hide`: an instance switched off (it shows nothing) or back on.
+ * - `text`: inside an instance, text that reads `from` now reads `to` — a
+ *   field's text as the theme prints it.
+ */
+export type PreviewPatch = {
+    op: "move";
+    id: string;
+    index: number;
+} | {
+    op: "duplicate";
+    id: string;
+    ids: Readonly<Record<string, string>>;
+} | {
+    op: "remove";
+    id: string;
+} | {
+    op: "restore";
+    id: string;
+    index: number;
+} | {
+    op: "hide";
+    id: string;
+    hidden: boolean;
+} | {
+    op: "text";
+    id: string;
+    from: string;
+    to: string;
+};
+/**
+ * What the editor tells the preview page. `draft` is a `PreviewDraft` of
+ * `@wocart/storefront`; `revision`, when given, comes back on the `rendered`
+ * or `error` it causes, and a render answered after a newer one is dropped —
+ * as is one answered after a `patch`, which the next render follows.
+ */
+export type PreviewEditorMessage = {
+    source: "wocart-editor";
+    version: typeof PREVIEW_PROTOCOL_VERSION;
+} & ({
+    type: "render";
+    draft: Record<string, unknown>;
+    revision?: number;
+} | {
+    type: "patch";
+    patches: readonly PreviewPatch[];
+} | {
+    type: "mode";
+    mode: PreviewMode;
+} | {
+    type: "scroll-to";
+    id: string;
+} | {
+    type: "token";
+    token: string;
+});
+/** The comment text that opens an instance's nodes. */
+export declare function previewStartMarker(instance: {
+    id: string;
+    type: string;
+    hidden?: boolean;
+}): string;
+/** The comment text that closes them. */
+export declare function previewEndMarker(instance: {
+    id: string;
+}): string;
+/** What a marker comment says, or `null` for any other comment. */
+export declare function parsePreviewMarker(text: string): {
+    kind: "start";
+    id: string;
+    type: string;
+    hidden: boolean;
+} | {
+    kind: "end";
+    id: string;
+} | null;

package/dist/preview-protocol.js

@@ -0,0 +1,51 @@
+/**
+ * The preview protocol: how a framed storefront page in preview mode and the
+ * editor that frames it talk, and how the page marks its sections. Plain data
+ * and string helpers — shared by the renderer (`InstanceView`), the page's
+ * bridge (`@wocart/theme/preview`) and an editor, so the three cannot drift.
+ *
+ * Every message is `{ source, version, type, … }`. The page sends
+ * `source: "wocart-preview"`; the editor sends `source: "wocart-editor"`. Both
+ * sides post with the other's exact origin and check `event.origin` and
+ * `event.source` before reading a message.
+ */
+/** Incremented on a change an older counterpart could not read. */
+export const PREVIEW_PROTOCOL_VERSION = 1;
+/** Where a theme that supports preview serves it: a POST route of the storefront. */
+export const THEME_PREVIEW_PATH = "/wocart-preview";
+// ── Section markers ─────────────────────────────────────────────────────────
+// A preview render brackets each instance with two HTML comments, so the page
+// can find every section's nodes — even a section that rendered nothing — and
+// a shopper's page carries none of them.
+const START = "wocart:start";
+const END = "wocart:end";
+/** The comment text that opens an instance's nodes. */
+export function previewStartMarker(instance) {
+    return `${START} id=${encodeURIComponent(instance.id)} type=${encodeURIComponent(instance.type)}${instance.hidden === true ? " hidden" : ""}`;
+}
+/** The comment text that closes them. */
+export function previewEndMarker(instance) {
+    return `${END} id=${encodeURIComponent(instance.id)}`;
+}
+/** What a marker comment says, or `null` for any other comment. */
+export function parsePreviewMarker(text) {
+    const start = /^wocart:start id=([^ ]+) type=([^ ]+)( hidden)?$/.exec(text);
+    if (start) {
+        try {
+            return { kind: "start", id: decodeURIComponent(start[1]), type: decodeURIComponent(start[2]), hidden: start[3] !== undefined };
+        }
+        catch {
+            return null;
+        }
+    }
+    const end = /^wocart:end id=([^ ]+)$/.exec(text);
+    if (end) {
+        try {
+            return { kind: "end", id: decodeURIComponent(end[1]) };
+        }
+        catch {
+            return null;
+        }
+    }
+    return null;
+}