@mdsnai/sdk 0.2.2 → 0.3.0

package/dist/web/headless.js

@@ -1,370 +1,344 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseMarkdown = parseMarkdown;
-exports.parsePage = parsePage;
-exports.createParsedPage = createParsedPage;
-exports.parseFragment = parseFragment;
-const markdown_it_1 = __importDefault(require("markdown-it"));
-const core_1 = require("../core");
-const frontmatter_1 = require("../core/document/frontmatter");
-const mdsn_1 = require("../core/protocol/mdsn");
-function createMarkdownParser() {
-    return new markdown_it_1.default({
-        html: true,
-        linkify: true,
-        typographer: false,
-    });
-}
-function parseInlineNodes(tokens, startIndex = 0, stopType) {
-    const nodes = [];
-    let index = startIndex;
-    while (index < tokens.length) {
-        const token = tokens[index];
-        if (stopType && token.type === stopType) {
-            return [nodes, index];
+import { parsePage, serializeMarkdownBody } from "../core/index.js";
+function findBootstrapScript(root) {
+    if (root instanceof Document) {
+        const element = root.getElementById("mdsn-bootstrap");
+        return element instanceof HTMLScriptElement ? element : null;
+    }
+    for (const child of Array.from(root.childNodes)) {
+        if (child instanceof HTMLScriptElement && child.id === "mdsn-bootstrap") {
+            return child;
         }
-        switch (token.type) {
-            case "text":
-                nodes.push({ type: "text", value: token.content });
-                index += 1;
-                continue;
-            case "strong_open": {
-                const [children, nextIndex] = parseInlineNodes(tokens, index + 1, "strong_close");
-                nodes.push({ type: "strong", children });
-                index = nextIndex + 1;
-                continue;
-            }
-            case "em_open": {
-                const [children, nextIndex] = parseInlineNodes(tokens, index + 1, "em_close");
-                nodes.push({ type: "em", children });
-                index = nextIndex + 1;
-                continue;
-            }
-            case "code_inline":
-                nodes.push({ type: "inline_code", value: token.content });
-                index += 1;
-                continue;
-            case "link_open": {
-                const [children, nextIndex] = parseInlineNodes(tokens, index + 1, "link_close");
-                nodes.push({
-                    type: "link",
-                    href: token.attrGet("href") ?? "",
-                    title: token.attrGet("title") ?? undefined,
-                    children,
-                });
-                index = nextIndex + 1;
-                continue;
+        if (child instanceof Element) {
+            const nested = findBootstrapScript(child);
+            if (nested) {
+                return nested;
             }
-            case "image":
-                nodes.push({
-                    type: "image",
-                    src: token.attrGet("src") ?? "",
-                    alt: token.content,
-                    title: token.attrGet("title") ?? undefined,
-                });
-                index += 1;
-                continue;
-            case "softbreak":
-                nodes.push({ type: "softbreak" });
-                index += 1;
-                continue;
-            case "hardbreak":
-                nodes.push({ type: "hardbreak" });
-                index += 1;
-                continue;
-            case "html_inline":
-                nodes.push({ type: "html_inline", value: token.content });
-                index += 1;
-                continue;
-            default:
-                index += 1;
-                continue;
         }
     }
-    return [nodes, index];
+    return null;
 }
-function parseTable(tokens, startIndex) {
-    const header = [];
-    const rows = [];
-    let index = startIndex + 1;
-    let currentRow = null;
-    while (index < tokens.length) {
-        const token = tokens[index];
-        if (token.type === "table_close") {
-            return [{ type: "table", header, rows }, index + 1];
-        }
-        if (token.type === "tr_open") {
-            currentRow = [];
-            index += 1;
-            continue;
+function getDocument(root) {
+    if (root instanceof Document) {
+        return root;
+    }
+    return root.ownerDocument ?? document;
+}
+function parseBootstrap(root) {
+    const element = findBootstrapScript(root);
+    if (!(element instanceof HTMLScriptElement) || !element.textContent?.trim()) {
+        throw new Error("Missing mdsn bootstrap data.");
+    }
+    return JSON.parse(element.textContent);
+}
+function parseBootstrapFromHtml(content) {
+    const document = new DOMParser().parseFromString(content, "text/html");
+    return parseBootstrap(document);
+}
+function toHeadlessBlock(block, markdown) {
+    return {
+        name: block.name,
+        markdown,
+        inputs: block.inputs,
+        operations: block.operations
+    };
+}
+function findOperationBlock(blocks, operation) {
+    return (blocks.find((block) => block.operations.some((candidate) => candidate.method === operation.method &&
+        candidate.target === operation.target &&
+        candidate.name === operation.name)) ?? null);
+}
+function fragmentBlockFromMarkdown(markdown, fallbackBlock) {
+    const page = parsePage(markdown);
+    const trimmedMarkdown = page.markdown.trim();
+    const block = page.blocks[0];
+    if (block) {
+        return toHeadlessBlock(block, trimmedMarkdown);
+    }
+    if (!fallbackBlock) {
+        return null;
+    }
+    return {
+        ...fallbackBlock,
+        markdown: trimmedMarkdown
+    };
+}
+function parseSseMessages(content) {
+    return content
+        .split(/\n\n+/)
+        .map((chunk) => chunk
+        .split("\n")
+        .map((line) => line.trim())
+        .filter((line) => line.startsWith("data:"))
+        .map((line) => line.slice(5).trimStart())
+        .join("\n"))
+        .filter(Boolean);
+}
+function parseSseEvent(rawEvent) {
+    const message = rawEvent
+        .split("\n")
+        .map((line) => line.trim())
+        .filter((line) => line.startsWith("data:"))
+        .map((line) => line.slice(5).trimStart())
+        .join("\n");
+    return message || null;
+}
+function drainSseBuffer(buffer, onMessage) {
+    const normalized = buffer.replaceAll("\r\n", "\n");
+    let cursor = normalized;
+    while (true) {
+        const separatorIndex = cursor.indexOf("\n\n");
+        if (separatorIndex === -1) {
+            break;
         }
-        if (token.type === "tr_close") {
-            if (currentRow) {
-                if (header.length === 0) {
-                    header.push(...currentRow);
-                }
-                else {
-                    rows.push(currentRow);
-                }
-            }
-            currentRow = null;
-            index += 1;
-            continue;
+        const rawEvent = cursor.slice(0, separatorIndex);
+        cursor = cursor.slice(separatorIndex + 2);
+        const message = parseSseEvent(rawEvent);
+        if (message) {
+            onMessage(message);
         }
-        if (token.type === "th_open" || token.type === "td_open") {
-            const inlineToken = tokens[index + 1];
-            const children = inlineToken?.type === "inline"
-                ? parseInlineNodes(inlineToken.children ?? [])[0]
-                : [];
-            currentRow?.push(children);
-            index += 3;
-            continue;
+    }
+    return cursor;
+}
+function replaceBlock(blocks, nextBlock) {
+    let replaced = false;
+    const next = blocks.map((block) => {
+        if (block.name !== nextBlock.name) {
+            return block;
         }
-        index += 1;
+        replaced = true;
+        return nextBlock;
+    });
+    if (!replaced) {
+        next.push(nextBlock);
     }
-    throw new Error("Unterminated markdown table");
+    return next;
 }
-function parseBlockNodes(tokens, startIndex = 0, stopType) {
-    const nodes = [];
-    let index = startIndex;
-    while (index < tokens.length) {
-        const token = tokens[index];
-        if (stopType && token.type === stopType) {
-            return [nodes, index];
+function toSnapshot(bootstrap, current) {
+    if (bootstrap.kind === "page") {
+        const next = {
+            status: current?.status ?? "idle",
+            markdown: bootstrap.markdown,
+            blocks: [...bootstrap.blocks]
+        };
+        const route = bootstrap.route ?? current?.route;
+        if (route) {
+            next.route = route;
         }
-        switch (token.type) {
-            case "heading_open": {
-                const inlineToken = tokens[index + 1];
-                const children = inlineToken?.type === "inline"
-                    ? parseInlineNodes(inlineToken.children ?? [])[0]
-                    : [];
-                nodes.push({
-                    type: "heading",
-                    depth: Number(token.tag.slice(1)),
-                    children,
-                });
-                index += 3;
-                continue;
-            }
-            case "paragraph_open": {
-                const inlineToken = tokens[index + 1];
-                const children = inlineToken?.type === "inline"
-                    ? parseInlineNodes(inlineToken.children ?? [])[0]
-                    : [];
-                nodes.push({ type: "paragraph", children });
-                index += 3;
-                continue;
-            }
-            case "bullet_list_open":
-            case "ordered_list_open": {
-                const ordered = token.type === "ordered_list_open";
-                const closeType = ordered ? "ordered_list_close" : "bullet_list_close";
-                const items = [];
-                const startValue = token.attrGet("start");
-                index += 1;
-                while (index < tokens.length && tokens[index]?.type !== closeType) {
-                    if (tokens[index]?.type !== "list_item_open") {
-                        index += 1;
-                        continue;
-                    }
-                    const [itemNodes, nextIndex] = parseBlockNodes(tokens, index + 1, "list_item_close");
-                    items.push(itemNodes);
-                    index = nextIndex + 1;
-                }
-                nodes.push({
-                    type: "list",
-                    ordered,
-                    start: ordered && startValue ? Number(startValue) : undefined,
-                    items,
-                });
-                index += 1;
-                continue;
-            }
-            case "blockquote_open": {
-                const [children, nextIndex] = parseBlockNodes(tokens, index + 1, "blockquote_close");
-                nodes.push({ type: "blockquote", children });
-                index = nextIndex + 1;
-                continue;
-            }
-            case "fence":
-            case "code_block":
-                nodes.push({
-                    type: "code",
-                    language: token.info?.trim() || undefined,
-                    value: token.content,
-                });
-                index += 1;
-                continue;
-            case "html_block":
-                nodes.push({ type: "html", value: token.content });
-                index += 1;
-                continue;
-            case "hr":
-                nodes.push({ type: "thematic_break" });
-                index += 1;
-                continue;
-            case "table_open": {
-                const [tableNode, nextIndex] = parseTable(tokens, index);
-                nodes.push(tableNode);
-                index = nextIndex;
-                continue;
-            }
-            default:
-                index += 1;
-                continue;
+        if (current?.error) {
+            next.error = current.error;
         }
+        return next;
     }
-    return [nodes, index];
-}
-function parseMarkdownContainer(markdown, id) {
-    return {
-        id,
-        markdown,
-        nodes: parseMarkdown(markdown),
+    const next = {
+        status: current?.status ?? "idle",
+        markdown: current?.markdown ?? "",
+        blocks: replaceBlock(current?.blocks ?? [], bootstrap.block)
     };
+    if (current?.route) {
+        next.route = current.route;
+    }
+    if (current?.error) {
+        next.error = current.error;
+    }
+    return next;
 }
-function splitMarkdownByAnchors(markdown) {
-    const containers = [];
-    const anchors = [];
-    const segments = [];
-    const lines = markdown.split(/\r?\n/);
-    let activeFence = false;
-    let currentLines = [];
-    const pushContainer = () => {
-        const containerMarkdown = currentLines.join("\n").trim();
-        currentLines = [];
-        if (!containerMarkdown) {
-            return;
+function toQueryString(values) {
+    const params = new URLSearchParams();
+    for (const [key, value] of Object.entries(values)) {
+        params.set(key, value);
+    }
+    const query = params.toString();
+    return query ? `?${query}` : "";
+}
+function pushHistory(target) {
+    if (typeof window === "undefined") {
+        return;
+    }
+    window.history.pushState({}, "", target);
+}
+export function createHeadlessHost(options) {
+    const fetchImpl = options.fetchImpl ?? fetch;
+    let mounted = false;
+    let snapshot = toSnapshot(parseBootstrap(options.root), null);
+    let status = { status: "idle" };
+    const listeners = new Set();
+    function publish() {
+        const next = {
+            status: status.status,
+            markdown: snapshot.markdown,
+            blocks: [...snapshot.blocks]
+        };
+        if (status.error) {
+            next.error = status.error;
         }
-        const container = parseMarkdownContainer(containerMarkdown, `container-${containers.length}`);
-        containers.push(container);
-        segments.push({ type: "container", container });
-    };
-    for (const line of lines) {
-        const trimmed = line.trim();
-        if (trimmed.startsWith("```") || trimmed.startsWith("~~~")) {
-            activeFence = !activeFence;
-            currentLines.push(line);
-            continue;
+        if (snapshot.route) {
+            next.route = snapshot.route;
         }
-        if (!activeFence) {
-            const anchorMatch = trimmed.match(/^<!--\s*mdsn:block\s+([a-zA-Z_][\w-]*)\s*-->$/);
-            if (anchorMatch) {
-                pushContainer();
-                const anchor = { name: anchorMatch[1] };
-                anchors.push(anchor);
-                segments.push({ type: "anchor", anchor });
-                continue;
-            }
+        for (const listener of listeners) {
+            listener(next);
         }
-        currentLines.push(line);
     }
-    pushContainer();
-    return { containers, anchors, segments };
-}
-function splitFragmentSource(markdown) {
-    const segments = [];
-    const lines = markdown.split(/\r?\n/);
-    let activeFence = null;
-    let currentMarkdownLines = [];
-    let index = 0;
-    const pushMarkdownSegment = () => {
-        const segmentMarkdown = currentMarkdownLines.join("\n").trim();
-        currentMarkdownLines = [];
-        if (!segmentMarkdown) {
+    function setStatus(next) {
+        status = next;
+        publish();
+    }
+    async function applyResponse(content) {
+        const bootstrap = parseBootstrapFromHtml(content);
+        if (bootstrap.kind === "fragment" && bootstrap.continueTarget) {
+            await visit(bootstrap.continueTarget, true);
             return;
         }
-        segments.push({ type: "markdown", markdown: segmentMarkdown });
-    };
-    while (index < lines.length) {
-        const line = lines[index] ?? "";
-        const trimmed = line.trim();
-        const fenceMatch = trimmed.match(/^(`{3,}|~{3,})(.*)$/);
-        if (fenceMatch) {
-            const marker = fenceMatch[1];
-            const info = fenceMatch[2].trim();
-            if (activeFence) {
-                if (trimmed === activeFence) {
-                    activeFence = null;
+        snapshot = toSnapshot(bootstrap, snapshot);
+        setStatus({ status: "idle" });
+    }
+    async function request(target, init) {
+        setStatus({ status: "loading" });
+        try {
+            const response = await fetchImpl(target, init);
+            const content = await response.text();
+            await applyResponse(content);
+        }
+        catch (error) {
+            setStatus({ status: "error", error: error instanceof Error ? error.message : String(error) });
+        }
+    }
+    async function requestStream(target, operation) {
+        const fallbackBlock = findOperationBlock(snapshot.blocks, operation);
+        setStatus({ status: "loading" });
+        try {
+            const response = await fetchImpl(target, {
+                method: "GET",
+                headers: {
+                    accept: "text/event-stream"
                 }
-                currentMarkdownLines.push(line);
-                index += 1;
-                continue;
-            }
-            if (marker === "```" && info === "mdsn") {
-                pushMarkdownSegment();
-                index += 1;
-                const blockLines = [];
-                while (index < lines.length && lines[index]?.trim() !== "```") {
-                    blockLines.push(lines[index] ?? "");
-                    index += 1;
+            });
+            const applyMessage = (message) => {
+                const nextBlock = fragmentBlockFromMarkdown(message, fallbackBlock);
+                if (!nextBlock) {
+                    return;
                 }
-                if (index >= lines.length) {
-                    throw new Error("Unterminated mdsn code block");
+                snapshot = {
+                    ...snapshot,
+                    blocks: replaceBlock(snapshot.blocks, nextBlock)
+                };
+                publish();
+            };
+            if (!response.body) {
+                const content = await response.text();
+                for (const message of parseSseMessages(content)) {
+                    applyMessage(message);
+                }
+                setStatus({ status: "idle" });
+                return;
+            }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = "";
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) {
+                    break;
                 }
-                segments.push({ type: "mdsn", source: blockLines.join("\n") });
-                index += 1;
-                continue;
+                buffer += decoder.decode(value, { stream: true });
+                buffer = drainSseBuffer(buffer, applyMessage);
             }
-            activeFence = marker;
-            currentMarkdownLines.push(line);
-            index += 1;
-            continue;
+            buffer += decoder.decode();
+            drainSseBuffer(buffer, applyMessage);
+            setStatus({ status: "idle" });
+        }
+        catch (error) {
+            setStatus({ status: "error", error: error instanceof Error ? error.message : String(error) });
         }
-        currentMarkdownLines.push(line);
-        index += 1;
-    }
-    pushMarkdownSegment();
-    return segments;
-}
-function parseMarkdown(source) {
-    const parser = createMarkdownParser();
-    const tokens = parser.parse(source, {});
-    return parseBlockNodes(tokens)[0];
-}
-function parsePage(source) {
-    const document = (0, core_1.parsePageDefinition)(source);
-    return createParsedPage(document);
-}
-function createParsedPage(document) {
-    const structure = splitMarkdownByAnchors(document.markdown);
-    return {
-        frontmatter: document.frontmatter,
-        containers: structure.containers,
-        anchors: structure.anchors,
-        blocks: document.blocks,
-        segments: structure.segments,
-    };
-}
-function parseFragment(source) {
-    const { body } = (0, frontmatter_1.parseFrontmatter)(source);
-    const sourceSegments = splitFragmentSource(body);
-    const mdsnSegments = sourceSegments.filter((segment) => segment.type === "mdsn");
-    if (mdsnSegments.length > 1) {
-        throw new Error("A block fragment may contain at most one mdsn code block");
     }
-    const parsedBlock = mdsnSegments.length > 0
-        ? (0, mdsn_1.parseMdsnBlocks)([mdsnSegments[0].source]).blocks[0]
-        : undefined;
-    const containers = [];
-    const segments = [];
-    for (const segment of sourceSegments) {
-        if (segment.type === "markdown") {
-            const container = parseMarkdownContainer(segment.markdown, `container-${containers.length}`);
-            containers.push(container);
-            segments.push({ type: "container", container });
-            continue;
+    async function visit(target, updateHistory = false) {
+        setStatus({ status: "loading" });
+        try {
+            const response = await fetchImpl(target, {
+                method: "GET",
+                headers: {
+                    accept: "text/html"
+                }
+            });
+            const content = await response.text();
+            snapshot = toSnapshot(parseBootstrapFromHtml(content), snapshot);
+            if (updateHistory) {
+                pushHistory(target);
+            }
+            setStatus({ status: "idle" });
         }
-        if (parsedBlock) {
-            segments.push({ type: "block", block: parsedBlock });
+        catch (error) {
+            setStatus({ status: "error", error: error instanceof Error ? error.message : String(error) });
         }
     }
+    function onPopState() {
+        const target = `${window.location.pathname}${window.location.search}`;
+        void visit(target, false);
+    }
     return {
-        containers,
-        block: parsedBlock,
-        segments,
+        mount() {
+            if (mounted || typeof window === "undefined") {
+                mounted = true;
+                return;
+            }
+            window.addEventListener("popstate", onPopState);
+            mounted = true;
+        },
+        unmount() {
+            if (!mounted || typeof window === "undefined") {
+                mounted = false;
+                return;
+            }
+            window.removeEventListener("popstate", onPopState);
+            mounted = false;
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            listener(this.getSnapshot());
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        getSnapshot() {
+            const next = {
+                status: status.status,
+                markdown: snapshot.markdown,
+                blocks: [...snapshot.blocks]
+            };
+            if (status.error) {
+                next.error = status.error;
+            }
+            if (snapshot.route) {
+                next.route = snapshot.route;
+            }
+            return next;
+        },
+        async submit(operation, values = {}) {
+            if (operation.method === "GET") {
+                const target = `${operation.target}${toQueryString(values)}`;
+                if (operation.accept === "text/event-stream") {
+                    void requestStream(target, operation);
+                    return;
+                }
+                await request(target, {
+                    method: "GET",
+                    headers: {
+                        accept: "text/html"
+                    }
+                });
+                return;
+            }
+            await request(operation.target, {
+                method: "POST",
+                headers: {
+                    accept: "text/html",
+                    "content-type": "text/markdown"
+                },
+                body: serializeMarkdownBody(values)
+            });
+        },
+        visit(target) {
+            return visit(target, true);
+        }
     };
 }
+//# sourceMappingURL=headless.js.map