@mapled/vanilla 0.0.1 → 0.1.1

package/dist/markdown.js

@@ -0,0 +1,577 @@
+/** Rich text → DOM. Mapled stores and serves rich text as Markdown; this
+    builds it into nodes — `createElement` with names from the list below,
+    text nodes, and three attributes it validates itself (`href`, `src`,
+    `alt`; `start` is a number it parsed, `loading` a constant). There is
+    no HTML string anywhere on the way, so whatever the input does to the
+    parser, the worst result is wrong formatting: raw HTML in the source
+    is shown as the text it is (DOM_SECURITY.md, rule 5).
+
+    The syntax is what Mapled's editor writes: paragraphs, headings,
+    bold / italic / strikethrough, inline code and fenced blocks, quotes,
+    bulleted and numbered lists (nested), links, images, rules, hard
+    breaks. Tables, reference links and footnotes are shown as text. */
+import { safeUrl } from "./url.js";
+/** Every element this module can create. */
+export const MARKDOWN_ELEMENTS = ["p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "blockquote", "pre", "code", "em", "strong", "del", "a", "img", "br", "hr"];
+/** Past this the value is shown as plain paragraphs: nobody edits a text
+    this long by hand, and parsing time stays bounded. */
+const MAX_SOURCE = 100_000;
+const MAX_DEPTH = 8;
+const MAX_ADDRESS = 2048;
+const PUNCTUATION = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";
+const ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: "\u00a0", copy: "©", reg: "®", trade: "™", mdash: "—", ndash: "–", hellip: "…", laquo: "«", raquo: "»" };
+export function renderMarkdown(source, doc, base) {
+    const out = doc.createDocumentFragment();
+    if (typeof source !== "string" || source === "")
+        return out;
+    const text = source.replace(/\r\n?/g, "\n").replace(/\t/g, "    ").replace(/\u0000/g, "\ufffd");
+    const ctx = { doc, base };
+    if (text.length > MAX_SOURCE) {
+        for (const block of text.split(/\n{2,}/)) {
+            if (block.trim() !== "")
+                make(ctx, "p", out).textContent = block.trim();
+        }
+        return out;
+    }
+    blocks(ctx, text.split("\n"), out, 0);
+    return out;
+}
+function make(ctx, tag, parent) {
+    const el = ctx.doc.createElement(tag);
+    parent.appendChild(el);
+    return el;
+}
+/* ---- blocks ---- */
+const blank = (line) => line.trim() === "";
+const indentOf = (line) => line.length - line.trimStart().length;
+/** `# Heading` — the level and the text, closing #s dropped. */
+function heading(line) {
+    const start = indentOf(line);
+    if (start > 3)
+        return null;
+    let level = 0;
+    while (level < 7 && line[start + level] === "#")
+        level++;
+    if (level === 0 || level > 6)
+        return null;
+    const after = line[start + level];
+    if (after !== undefined && after !== " ")
+        return null;
+    let text = line.slice(start + level).trim();
+    let end = text.length;
+    while (end > 0 && text[end - 1] === "#")
+        end--;
+    if (end < text.length && (end === 0 || text[end - 1] === " "))
+        text = text.slice(0, end).trim();
+    return { level, text };
+}
+/** `---`, `***`, `___`, spaces allowed between. */
+function rule(line) {
+    if (indentOf(line) > 3)
+        return false;
+    const marks = line.replace(/ /g, "");
+    const first = marks[0];
+    if (marks.length < 3 || (first !== "-" && first !== "*" && first !== "_"))
+        return false;
+    for (const ch of marks)
+        if (ch !== first)
+            return false;
+    return true;
+}
+function fence(line) {
+    const m = /^ {0,3}(`{3,}|~{3,})/.exec(line);
+    if (!m)
+        return null;
+    const mark = m[1][0];
+    // an info string with a backtick is an inline code span, not a fence
+    if (mark === "`" && line.slice(m[0].length).includes("`"))
+        return null;
+    return { mark, size: m[1].length };
+}
+function marker(line) {
+    const m = /^( {0,3})([-*+]|\d{1,9}[.)])( +|$)/.exec(line);
+    if (!m)
+        return null;
+    const mark = m[2];
+    const spaces = m[3].length;
+    const ordered = mark.length > 1 || /\d/.test(mark);
+    return {
+        indent: m[1].length,
+        // text that starts five or more spaces in is an indented block: the content column is one past the marker
+        width: mark.length + (spaces >= 1 && spaces <= 4 ? spaces : 1),
+        ordered,
+        start: ordered ? parseInt(mark, 10) : 1,
+        rest: line.slice(m[0].length),
+    };
+}
+const quoted = (line) => /^ {0,3}>/.test(line);
+/** Whether a line starts a block of its own — which ends a paragraph. A
+    numbered item does only when it is number 1: "2026. A good year." in
+    the middle of a paragraph is a sentence. */
+function startsBlock(line) {
+    if (heading(line) !== null || fence(line) !== null || quoted(line) || rule(line))
+        return true;
+    const m = marker(line);
+    return m !== null && m.rest !== "" && (!m.ordered || m.start === 1);
+}
+function blocks(ctx, lines, parent, depth) {
+    if (depth >= MAX_DEPTH) {
+        const text = lines.join("\n").trim();
+        if (text !== "")
+            make(ctx, "p", parent).textContent = text;
+        return;
+    }
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        if (blank(line)) {
+            i++;
+            continue;
+        }
+        const fenced = fence(line);
+        if (fenced) {
+            const body = [];
+            const indent = indentOf(line);
+            i++;
+            while (i < lines.length) {
+                const next = lines[i];
+                const closing = fence(next);
+                if (closing && closing.mark === fenced.mark && closing.size >= fenced.size && next.trim().length === closing.size)
+                    break;
+                body.push(next.slice(Math.min(indent, indentOf(next))));
+                i++;
+            }
+            i++;
+            make(ctx, "code", make(ctx, "pre", parent)).textContent = body.length > 0 ? `${body.join("\n")}\n` : "";
+            continue;
+        }
+        const head = heading(line);
+        if (head) {
+            inline(ctx, head.text, make(ctx, `h${head.level}`, parent), depth);
+            i++;
+            continue;
+        }
+        if (rule(line)) {
+            make(ctx, "hr", parent);
+            i++;
+            continue;
+        }
+        if (quoted(line)) {
+            const inner = [];
+            while (i < lines.length && quoted(lines[i])) {
+                inner.push(lines[i].replace(/^ {0,3}> ?/, ""));
+                i++;
+            }
+            blocks(ctx, inner, make(ctx, "blockquote", parent), depth + 1);
+            continue;
+        }
+        const first = marker(line);
+        if (first) {
+            i = list(ctx, lines, i, first, parent, depth);
+            continue;
+        }
+        const para = [line.trimStart()];
+        i++;
+        while (i < lines.length && !blank(lines[i]) && !startsBlock(lines[i])) {
+            para.push(lines[i].trimStart());
+            i++;
+        }
+        inline(ctx, para.join("\n"), make(ctx, "p", parent), depth);
+    }
+}
+/** A list from line `i`; answers the index of the line after it. */
+function list(ctx, lines, i, first, parent, depth) {
+    const el = make(ctx, first.ordered ? "ol" : "ul", parent);
+    if (first.ordered && first.start !== 1)
+        el.setAttribute("start", String(first.start));
+    const items = [];
+    let loose = false;
+    while (i < lines.length) {
+        const m = marker(lines[i]);
+        if (!m || m.ordered !== first.ordered || m.indent !== first.indent || rule(lines[i]))
+            break;
+        const column = m.indent + m.width;
+        const body = [m.rest];
+        i++;
+        let gap = false;
+        while (i < lines.length) {
+            const next = lines[i];
+            if (blank(next)) {
+                gap = true;
+                body.push("");
+                i++;
+                continue;
+            }
+            if (indentOf(next) < column)
+                break;
+            if (gap && body.some((b) => b !== "") && !marker(next.slice(column)))
+                loose = true;
+            gap = false;
+            body.push(next.slice(column));
+            i++;
+        }
+        while (body.length > 0 && body[body.length - 1] === "")
+            body.pop();
+        // a blank line before the next item of this list makes it a loose one
+        if (gap && i < lines.length) {
+            const following = marker(lines[i]);
+            if (following && following.ordered === first.ordered && following.indent === first.indent)
+                loose = true;
+        }
+        items.push({ lines: body, el: make(ctx, "li", el) });
+    }
+    for (const item of items) {
+        blocks(ctx, item.lines, item.el, depth + 1);
+        if (loose)
+            continue;
+        // a tight list shows its text without paragraphs
+        for (const child of Array.from(item.el.childNodes)) {
+            if (child.nodeName !== "P")
+                continue;
+            while (child.firstChild)
+                item.el.insertBefore(child.firstChild, child);
+            item.el.removeChild(child);
+        }
+    }
+    return i;
+}
+/* ---- inlines ---- */
+const isSpace = (ch) => ch === undefined || ch === " " || ch === "\n";
+const isWord = (ch) => ch !== undefined && /[\p{L}\p{N}]/u.test(ch);
+/** Where `ch` is, looking no further than `limit` and not past a character of `stop`; -1 if not there. */
+function find(text, ch, from, limit, stop = "") {
+    const end = Math.min(text.length, limit);
+    for (let j = from; j < end; j++) {
+        if (text[j] === ch)
+            return j;
+        if (stop.includes(text[j]))
+            return -1;
+    }
+    return -1;
+}
+/** The index just past a run of one character. */
+function runEnd(text, i, ch) {
+    let j = i;
+    while (text[j] === ch)
+        j++;
+    return j;
+}
+/** Skips what can't hold a delimiter: an escaped character, a code span. */
+function skip(text, j) {
+    if (text[j] === "\\")
+        return j + 2;
+    if (text[j] === "`") {
+        const end = runEnd(text, j, "`");
+        const close = closingTicks(text, end, end - j);
+        return close === -1 ? end : close + (end - j);
+    }
+    return -1;
+}
+/** Where a run of exactly `size` backticks starts, from `from` on; -1 if none. */
+function closingTicks(text, from, size) {
+    let j = text.indexOf("`", from);
+    while (j !== -1) {
+        const end = runEnd(text, j, "`");
+        if (end - j === size)
+            return j;
+        j = text.indexOf("`", end);
+    }
+    return -1;
+}
+/** Where the closing delimiter starts; -1 if there is none. A closer
+    follows a non-space; `_` also has to end a word. */
+function closer(text, from, delim) {
+    const ch = delim[0];
+    let j = from;
+    while (j < text.length) {
+        const skipped = skip(text, j);
+        if (skipped !== -1) {
+            j = skipped;
+            continue;
+        }
+        if (text[j] !== ch) {
+            j++;
+            continue;
+        }
+        const end = runEnd(text, j, ch);
+        const size = end - j;
+        // a run of two belongs to bold when italics are being closed, and the other way round
+        const fits = delim.length === 1 ? size === 1 || size >= 3 : size >= delim.length;
+        if (fits && j > from && !isSpace(text[j - 1]) && (ch !== "_" || !isWord(text[end]))) {
+            // the end of the run closes: what is left of it belongs to the text inside
+            return end - delim.length;
+        }
+        j = end;
+    }
+    return -1;
+}
+function decodeEntity(text, i) {
+    const semi = find(text, ";", i + 1, i + 34, " \n&");
+    if (semi === -1)
+        return null;
+    const name = text.slice(i + 1, semi);
+    if (name[0] === "#") {
+        const hex = name[1] === "x" || name[1] === "X";
+        const digits = name.slice(hex ? 2 : 1);
+        if (!(hex ? /^[0-9a-fA-F]{1,6}$/ : /^[0-9]{1,7}$/).test(digits))
+            return null;
+        const code = parseInt(digits, hex ? 16 : 10);
+        const valid = code > 0 && code <= 0x10ffff && !(code >= 0xd800 && code <= 0xdfff);
+        return { char: valid ? String.fromCodePoint(code) : "\ufffd", end: semi + 1 };
+    }
+    const known = Object.prototype.hasOwnProperty.call(ENTITIES, name) ? ENTITIES[name] : undefined;
+    return known === undefined ? null : { char: known, end: semi + 1 };
+}
+const unescape = (text) => text.replace(/\\([!-/:-@[-`{-~])/g, "$1");
+/** `(destination "title")` right after a link's text: the destination and
+    the index past the `)`, or null when this isn't one. */
+function destination(text, open) {
+    if (text[open] !== "(")
+        return null;
+    const limit = Math.min(text.length, open + MAX_ADDRESS + 1024);
+    let j = open + 1;
+    while (j < limit && isSpace(text[j]) && text[j] !== undefined)
+        j++;
+    let address = "";
+    if (text[j] === "<") {
+        const end = find(text, ">", j + 1, limit, "\n<");
+        if (end === -1)
+            return null;
+        address = text.slice(j + 1, end);
+        j = end + 1;
+    }
+    else {
+        const from = j;
+        let depth = 0;
+        while (j < limit) {
+            const ch = text[j];
+            if (ch === "\\" && j + 1 < limit) {
+                j += 2;
+                continue;
+            }
+            if (ch === " " || ch === "\n")
+                break;
+            if (ch === "(")
+                depth++;
+            if (ch === ")") {
+                if (depth === 0)
+                    break;
+                depth--;
+            }
+            j++;
+        }
+        address = text.slice(from, j);
+    }
+    while (j < limit && (text[j] === " " || text[j] === "\n"))
+        j++;
+    const quote = text[j];
+    if (quote === '"' || quote === "'" || quote === "(") {
+        // a title: read past it, don't use it
+        const end = find(text, quote === "(" ? ")" : quote, j + 1, limit);
+        if (end === -1)
+            return null;
+        j = end + 1;
+        while (j < limit && (text[j] === " " || text[j] === "\n"))
+            j++;
+    }
+    if (text[j] !== ")")
+        return null;
+    return { address: unescape(address), end: j + 1 };
+}
+/** `[text](address)` from the `[` at `open`: the text ends at the first
+    `]`, and a `[` before it means this one opened nothing. One pair may
+    nest — an image inside a link's text — and only one level of it. */
+function bracketed(text, open, inside = false) {
+    let j = open + 1;
+    while (j < text.length) {
+        const skipped = skip(text, j);
+        if (skipped !== -1) {
+            j = skipped;
+            continue;
+        }
+        if (!inside && text[j] === "!" && text[j + 1] === "[") {
+            const image = bracketed(text, j + 1, true);
+            if (!image)
+                return null;
+            j = image.end;
+            continue;
+        }
+        if (text[j] === "[")
+            return null;
+        if (text[j] === "]")
+            break;
+        j++;
+    }
+    if (j >= text.length)
+        return null;
+    const dest = destination(text, j + 1);
+    return dest ? { label: text.slice(open + 1, j), address: dest.address, end: dest.end } : null;
+}
+const AUTOLINK = /^(?:[a-z][a-z0-9+.-]{1,31}:[^\s<>]*|[^\s<>@]+@[^\s<>@]+\.[^\s<>@]+)$/i;
+function inline(ctx, text, parent, depth) {
+    if (depth >= MAX_DEPTH) {
+        parent.appendChild(ctx.doc.createTextNode(text));
+        return;
+    }
+    let buffer = "";
+    const flush = () => {
+        if (buffer !== "")
+            parent.appendChild(ctx.doc.createTextNode(buffer));
+        buffer = "";
+    };
+    /** delimiters known to have no closer from here on: asked once, not once per opener */
+    const dead = new Set();
+    let i = 0;
+    while (i < text.length) {
+        const ch = text[i];
+        if (ch === "\\") {
+            const next = text[i + 1];
+            if (next === "\n") {
+                flush();
+                make(ctx, "br", parent);
+                i += 2;
+                while (text[i] === " ")
+                    i++;
+            }
+            else if (next !== undefined && PUNCTUATION.includes(next)) {
+                buffer += next;
+                i += 2;
+            }
+            else {
+                buffer += ch;
+                i++;
+            }
+            continue;
+        }
+        if (ch === "\n") {
+            const hard = buffer.endsWith("  ");
+            // trailing spaces go — read from the end: a pattern anchored there would try every
+            // space of a long run inside the line, once per soft break (quadratic, found by review)
+            let end = buffer.length;
+            while (end > 0 && buffer[end - 1] === " ")
+                end--;
+            buffer = buffer.slice(0, end);
+            if (hard) {
+                flush();
+                make(ctx, "br", parent);
+            }
+            else {
+                buffer += "\n";
+            }
+            i++;
+            while (text[i] === " ")
+                i++;
+            continue;
+        }
+        if (ch === "`") {
+            const end = runEnd(text, i, "`");
+            const close = closingTicks(text, end, end - i);
+            if (close === -1) {
+                buffer += text.slice(i, end);
+                i = end;
+                continue;
+            }
+            let code = text.slice(end, close).replace(/\n/g, " ");
+            if (code.length > 1 && code.startsWith(" ") && code.endsWith(" ") && code.trim() !== "")
+                code = code.slice(1, -1);
+            flush();
+            make(ctx, "code", parent).textContent = code;
+            i = close + (end - i);
+            continue;
+        }
+        if (ch === "!" && text[i + 1] === "[") {
+            const found = bracketed(text, i + 1);
+            if (found) {
+                const alt = unescape(found.label);
+                const src = safeUrl(found.address.trim(), ctx.base, "media");
+                if (src === null) {
+                    // an image that may not load is still what its author called it
+                    buffer += alt;
+                }
+                else {
+                    flush();
+                    const img = make(ctx, "img", parent);
+                    img.setAttribute("src", src);
+                    img.setAttribute("alt", alt);
+                    img.setAttribute("loading", "lazy");
+                }
+                i = found.end;
+                continue;
+            }
+        }
+        if (ch === "[") {
+            const found = bracketed(text, i);
+            if (found) {
+                const href = safeUrl(found.address.trim(), ctx.base, "link");
+                flush();
+                // a link that may not be followed keeps its words
+                const target = href === null ? parent : make(ctx, "a", parent);
+                if (href !== null)
+                    target.setAttribute("href", href);
+                inline(ctx, found.label, target, depth + 1);
+                i = found.end;
+                continue;
+            }
+        }
+        if (ch === "<") {
+            const end = find(text, ">", i + 1, i + MAX_ADDRESS, " \n<");
+            const inside = end === -1 ? null : text.slice(i + 1, end);
+            if (inside !== null && AUTOLINK.test(inside)) {
+                const href = safeUrl(inside.includes(":") ? inside : `mailto:${inside}`, ctx.base, "link");
+                if (href !== null) {
+                    flush();
+                    const a = make(ctx, "a", parent);
+                    a.setAttribute("href", href);
+                    a.textContent = inside;
+                    i = end + 1;
+                    continue;
+                }
+            }
+        }
+        if (ch === "&") {
+            const entity = decodeEntity(text, i);
+            if (entity) {
+                buffer += entity.char;
+                i = entity.end;
+                continue;
+            }
+        }
+        if (ch === "*" || ch === "_" || ch === "~") {
+            const end = runEnd(text, i, ch);
+            const size = end - i;
+            const opens = !isSpace(text[end]) && (ch !== "_" || !isWord(text[i - 1]));
+            const shapes = ch === "~" ? (size >= 2 ? [["~~", ["del"]]] : []) : [...(size >= 3 ? [[ch.repeat(3), ["em", "strong"]]] : []), ...(size >= 2 ? [[ch.repeat(2), ["strong"]]] : []), [ch, ["em"]]];
+            let done = false;
+            if (opens) {
+                for (const [delim, tags] of shapes) {
+                    if (dead.has(delim))
+                        continue;
+                    const from = i + delim.length;
+                    const close = closer(text, from, delim);
+                    if (close === -1) {
+                        dead.add(delim);
+                        continue;
+                    }
+                    if (close === from)
+                        continue;
+                    flush();
+                    let target = parent;
+                    for (const tag of tags)
+                        target = make(ctx, tag, target);
+                    inline(ctx, text.slice(from, close), target, depth + 1);
+                    i = close + delim.length;
+                    done = true;
+                    break;
+                }
+            }
+            if (!done) {
+                buffer += text.slice(i, end);
+                i = end;
+            }
+            continue;
+        }
+        buffer += ch;
+        i++;
+    }
+    flush();
+}

package/dist/paths.d.ts

@@ -0,0 +1,21 @@
+/** Paths: how a page names a value — `home.headline` from the document,
+    `title` or `author.name` inside a record. A path is the page author's
+    text and is held to the grammar of Mapled's keys; what it walks is
+    content, read by own properties only (DOM_SECURITY.md, rule 7). */
+/** The segments of a path, or null when it is outside the grammar. */
+export declare function parsePath(text: string | null | undefined): string[] | null;
+/** What paths resolve in: a record as Mapled serves it, or an item of a
+    repeatable group (a plain object of the record's data). */
+export type Source = {
+    data: unknown;
+    expanded?: unknown;
+};
+/** The value at a path, or undefined when there is none. A relation the
+    read expanded is walked into: `author.name` reads the linked record —
+    one linked record only; a list of them has no single value. */
+export declare function valueAt(source: Source, segments: readonly string[]): unknown;
+/** Nothing to show: no value, or an empty one. */
+export declare const isEmpty: (value: unknown) => boolean;
+/** A value as the text a person reads, or null when it isn't one —
+    objects and lists of objects have no text of their own. */
+export declare function asText(value: unknown): string | null;

package/dist/paths.js

@@ -0,0 +1,60 @@
+/** Paths: how a page names a value — `home.headline` from the document,
+    `title` or `author.name` inside a record. A path is the page author's
+    text and is held to the grammar of Mapled's keys; what it walks is
+    content, read by own properties only (DOM_SECURITY.md, rule 7). */
+const SEGMENT = /^[a-z0-9][a-z0-9_-]{0,63}$/;
+const MAX_SEGMENTS = 8;
+/** The segments of a path, or null when it is outside the grammar. */
+export function parsePath(text) {
+    if (typeof text !== "string")
+        return null;
+    const segments = text.trim().split(".");
+    if (segments.length > MAX_SEGMENTS)
+        return null;
+    for (const segment of segments)
+        if (!SEGMENT.test(segment))
+            return null;
+    return segments;
+}
+const own = (value, key) => value !== null && typeof value === "object" && !Array.isArray(value) && Object.prototype.hasOwnProperty.call(value, key)
+    ? value[key]
+    : undefined;
+/** The value at a path, or undefined when there is none. A relation the
+    read expanded is walked into: `author.name` reads the linked record —
+    one linked record only; a list of them has no single value. */
+export function valueAt(source, segments) {
+    let current = source.data;
+    let expanded = source.expanded;
+    for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        const linked = i < segments.length - 1 ? own(expanded, segment) : undefined;
+        if (linked !== undefined) {
+            if (linked === null || Array.isArray(linked))
+                return undefined;
+            current = own(linked, "data");
+            expanded = own(linked, "expanded");
+            continue;
+        }
+        current = own(current, segment);
+        // below a field there are no records to walk into
+        expanded = undefined;
+        if (current === undefined)
+            return undefined;
+    }
+    return current;
+}
+/** Nothing to show: no value, or an empty one. */
+export const isEmpty = (value) => value === undefined || value === null || value === "" || (Array.isArray(value) && value.length === 0);
+/** A value as the text a person reads, or null when it isn't one —
+    objects and lists of objects have no text of their own. */
+export function asText(value) {
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number" && Number.isFinite(value))
+        return String(value);
+    if (typeof value === "boolean")
+        return value ? "true" : "false";
+    if (Array.isArray(value) && value.every((v) => typeof v === "string" || typeof v === "number"))
+        return value.join(", ");
+    return null;
+}