vestrycms 0.0.0-stage → 0.2.0

package/dist/mdx/serialize.js

@@ -0,0 +1,485 @@
+import { gfmToMarkdown } from "mdast-util-gfm";
+import { mdxToMarkdown } from "mdast-util-mdx";
+import { defaultHandlers, toMarkdown, } from "mdast-util-to-markdown";
+import { isPlainString, valueToSource } from "./expressions.js";
+/**
+ * Note every identifier-like word in a piece of JS source. Words inside
+ * strings or comments count too, which at worst keeps an unused import.
+ */
+function scan(source, used) {
+    for (const m of source.matchAll(IDENTIFIERS))
+        used.identifiers.add(m[0]);
+}
+const IDENTIFIER = "[\\p{ID_Start}$_][\\p{ID_Continue}$\\u200c\\u200d]*";
+const IDENTIFIERS = new RegExp(IDENTIFIER, "gu");
+const IS_IDENTIFIER = new RegExp(`^${IDENTIFIER}$`, "u");
+export function serializeMdx(doc, options = {}) {
+    const isMdx = options.format !== "md";
+    const used = { components: new Set(), identifiers: new Set() };
+    const root = {
+        type: "root",
+        children: blocks(doc.content ?? [], used),
+    };
+    const imports = isMdx ? importStatements(used, options) : [];
+    if (imports.length) {
+        root.children.unshift({
+            type: "mdxjsEsm",
+            value: imports.join("\n"),
+        });
+    }
+    const mdx = mdxToMarkdown({ quote: '"' });
+    const libFlow = findHandler(mdx, "mdxJsxFlowElement");
+    let out = toMarkdown(root, {
+        extensions: isMdx ? [mdx, gfmToMarkdown()] : [gfmToMarkdown()],
+        bullet: "-",
+        bulletOther: "*",
+        emphasis: "_",
+        strong: "*",
+        fences: true,
+        rule: "-",
+        listItemIndent: "one",
+        resourceLink: true,
+        handlers: {
+            rawHtml: (node) => node.value,
+            rawInlineHtml: (node) => node.value,
+            ...(libFlow ? { mdxJsxFlowElement: flowElementHandler(libFlow) } : {}),
+            list: listHandler(defaultHandlers.list),
+        },
+    });
+    // Place a blank line after the import block like Prettier/MDX conventions.
+    out = out.replace(/\s+$/, "");
+    return out ? `${out}\n` : "";
+}
+function findHandler(ext, name) {
+    const own = ext.handlers?.[name];
+    if (typeof own === "function")
+        return own;
+    for (const sub of ext.extensions ?? []) {
+        const found = findHandler(sub, name);
+        if (found)
+            return found;
+    }
+    return undefined;
+}
+/**
+ * Block components with children are written with blank lines around the
+ * children and no indentation:
+ *
+ *     <Article>
+ *
+ *     ## Heading
+ *
+ *     </Article>
+ *
+ * The library default indents children, which Prettier's MDX parser then
+ * reflows as JSX text.
+ */
+function flowElementHandler(lib) {
+    return (node, parent, state, info) => {
+        const el = node;
+        if (!el.children?.length)
+            return lib(node, parent, state, info);
+        const open = lib({ ...el, children: [] }, parent, state, info).replace(/\s*\/>$/, ">");
+        const children = state.containerFlow(el, info);
+        return `${open}\n\n${children}\n\n</${el.name ?? ""}>`;
+    };
+}
+/**
+ * A tight list is written without blank lines, but some neighbouring blocks
+ * need one to stay apart (two paragraphs would merge, kind 7 HTML would join
+ * the paragraph before it, ...), and a blank line anywhere in a list makes it
+ * loose when read back. Ask the serializer's own join rules whether any
+ * neighbours in the list or its items need a blank line, and if so write the
+ * whole list loose.
+ */
+function listHandler(lib) {
+    return (node, parent, state, info) => {
+        const list = node;
+        if (!list.spread &&
+            [list, ...list.children].some((p) => needsBlankLine(p, state))) {
+            list.spread = true;
+            for (const item of list.children)
+                item.spread = true;
+        }
+        return lib(node, parent, state, info);
+    };
+}
+/** Mirrors mdast-util-to-markdown's `between`: tight only if a join says 0. */
+function needsBlankLine(parent, state) {
+    const children = parent.children;
+    for (let i = 1; i < children.length; i++) {
+        let index = state.join.length;
+        let lines;
+        while (index--) {
+            const result = state.join[index](children[i - 1], children[i], parent, state);
+            if (result === true || result === 1)
+                break;
+            if (typeof result === "number" || result === false) {
+                lines = result === false ? 1 : result;
+                break;
+            }
+        }
+        if (lines !== 0)
+            return true;
+    }
+    return false;
+}
+function importStatements(used, options) {
+    const lines = new Map();
+    const add = (name, spec) => {
+        if (spec)
+            lines.set(name, importLine(spec));
+    };
+    // Components get the registry's import, falling back to the source's.
+    for (const name of used.components) {
+        const reg = options.components?.[name];
+        add(name, reg?.import
+            ? { name, from: reg.import, named: reg.namedImport }
+            : options.existingImports?.[name]);
+    }
+    // Anything else the source imported stays while it is still referenced.
+    for (const [name, spec] of Object.entries(options.existingImports ?? {}))
+        if (!lines.has(name) && used.identifiers.has(name))
+            add(name, spec);
+    const originalOrder = Object.keys(options.existingImports ?? {});
+    return [...lines.entries()]
+        .sort(([a], [b]) => {
+        const ia = originalOrder.indexOf(a);
+        const ib = originalOrder.indexOf(b);
+        if (ia !== -1 && ib !== -1)
+            return ia - ib;
+        if (ia !== -1)
+            return -1;
+        if (ib !== -1)
+            return 1;
+        return a.localeCompare(b);
+    })
+        .map(([, l]) => l);
+}
+function importLine(spec) {
+    const from = JSON.stringify(spec.from);
+    if (!spec.named)
+        return `import ${spec.name} from ${from};`;
+    const imported = spec.imported === undefined || spec.imported === spec.name
+        ? ""
+        : IS_IDENTIFIER.test(spec.imported)
+            ? `${spec.imported} as `
+            : `${JSON.stringify(spec.imported)} as `;
+    return `import { ${imported}${spec.name} } from ${from};`;
+}
+function blocks(nodes, used) {
+    const out = [];
+    for (const node of nodes) {
+        const converted = block(node, used);
+        if (converted)
+            out.push(converted);
+    }
+    return out;
+}
+function block(node, used) {
+    switch (node.type) {
+        case "paragraph": {
+            const children = inlines(node.content ?? [], used);
+            if (!children.length)
+                return null;
+            return { type: "paragraph", children: children };
+        }
+        case "heading":
+            return {
+                type: "heading",
+                depth: clampDepth(Number(node.attrs?.level ?? 1)),
+                children: inlines(node.content ?? [], used),
+            };
+        case "horizontalRule":
+            return { type: "thematicBreak" };
+        case "blockquote":
+            return {
+                type: "blockquote",
+                children: blocks(node.content ?? [], used),
+            };
+        case "bulletList":
+        case "orderedList": {
+            const ordered = node.type === "orderedList";
+            // Lists that must be loose to keep their content apart are loosened
+            // while serializing; see listHandler.
+            const spread = node.attrs?.spread === true;
+            const items = (node.content ?? []).map((item) => {
+                const checked = item.attrs?.checked;
+                return {
+                    type: "listItem",
+                    spread,
+                    checked: typeof checked === "boolean" ? checked : null,
+                    children: blocks(item.content ?? [], used),
+                };
+            });
+            return {
+                type: "list",
+                ordered,
+                start: ordered ? Number(node.attrs?.start ?? 1) : null,
+                spread,
+                children: items,
+            };
+        }
+        case "codeBlock":
+            return {
+                type: "code",
+                lang: node.attrs?.language ?? null,
+                meta: node.attrs?.meta ?? null,
+                value: (node.content ?? []).map((t) => t.text ?? "").join(""),
+            };
+        case "rawHtml":
+            return { type: "html", value: String(node.attrs?.value ?? "") };
+        case "table":
+            return table(node, used);
+        case "mdxComponent":
+            return jsxElement(node, used, false);
+        case "footnoteDefinition":
+            return {
+                type: "footnoteDefinition",
+                ...footnoteLabel(node),
+                children: blocks(node.content ?? [], used),
+            };
+        case "mdxExpression": {
+            const value = String(node.attrs?.value ?? "");
+            scan(value, used);
+            return { type: "mdxFlowExpression", value };
+        }
+        case "mdxEsm": {
+            const value = String(node.attrs?.value ?? "");
+            scan(value, used);
+            return { type: "mdxjsEsm", value };
+        }
+        case "image":
+            return {
+                type: "paragraph",
+                children: inlines([node], used),
+            };
+        default: {
+            const children = inlines([node], used);
+            return children.length
+                ? { type: "paragraph", children: children }
+                : null;
+        }
+    }
+}
+function footnoteLabel(node) {
+    const label = String(node.attrs?.label ?? node.attrs?.identifier ?? "");
+    const identifier = String(node.attrs?.identifier ?? label.toLowerCase());
+    return { identifier, label };
+}
+function clampDepth(n) {
+    return Math.min(6, Math.max(1, Math.round(n)));
+}
+function table(node, used) {
+    const rows = node.content ?? [];
+    const align = [];
+    const children = rows.map((row, rowIdx) => ({
+        type: "tableRow",
+        children: (row.content ?? []).map((cell, colIdx) => {
+            if (rowIdx === 0)
+                align[colIdx] = cell.attrs?.align ?? null;
+            const paragraphs = cell.content ?? [];
+            const inline = [];
+            paragraphs.forEach((p, i) => {
+                if (i > 0)
+                    inline.push({ type: "hardBreak" });
+                inline.push(...(p.type === "paragraph" ? (p.content ?? []) : [p]));
+            });
+            return {
+                type: "tableCell",
+                children: inlines(inline, used),
+            };
+        }),
+    }));
+    return { type: "table", align, children };
+}
+function propsToAttributes(node, used, inline = false) {
+    const props = (node.attrs?.props ?? {});
+    const spreads = (node.attrs?.spreads ?? []);
+    const attrs = [];
+    for (const [name, value] of Object.entries(props)) {
+        if (value === undefined)
+            continue;
+        if (value === true) {
+            attrs.push({ type: "mdxJsxAttribute", name, value: null });
+        }
+        else if (isPlainString(value)) {
+            attrs.push({ type: "mdxJsxAttribute", name, value });
+        }
+        else {
+            // Block components print each attribute on its own line, indented
+            // two spaces, so nested lines are indented relative to that.
+            const source = valueToSource(value, inline ? "" : "  ");
+            scan(source, used);
+            attrs.push({
+                type: "mdxJsxAttribute",
+                name,
+                value: { type: "mdxJsxAttributeValueExpression", value: source },
+            });
+        }
+    }
+    for (const s of spreads) {
+        scan(s, used);
+        attrs.push({ type: "mdxJsxExpressionAttribute", value: s });
+    }
+    return attrs;
+}
+function jsxElement(node, used, inline) {
+    const name = String(node.attrs?.name ?? "");
+    if (name && /^[A-Z]/.test(name))
+        used.components.add(name);
+    // `<ui.Card />` needs the import of `ui`.
+    scan(name, used);
+    const attributes = propsToAttributes(node, used, inline);
+    if (inline) {
+        return {
+            type: "mdxJsxTextElement",
+            name: name || null,
+            attributes,
+            children: inlines(node.content ?? [], used),
+        };
+    }
+    return {
+        type: "mdxJsxFlowElement",
+        name: name || null,
+        attributes,
+        children: blocks(node.content ?? [], used),
+    };
+}
+const MARK_ORDER = [
+    "link",
+    "superscript",
+    "subscript",
+    "bold",
+    "italic",
+    "strike",
+    "code",
+];
+/**
+ * Convert a flat run of inline PM nodes (text with marks) into nested mdast
+ * phrasing content. At each step the mark covering the longest run of
+ * following nodes becomes the outer wrapper, so `**a <sup>6</sup> b**`
+ * keeps bold outermost.
+ */
+function inlines(nodes, used) {
+    return group(nodes, used);
+}
+function markKey(m) {
+    return JSON.stringify([m.type, m.attrs ?? {}]);
+}
+function hasMark(node, key) {
+    return (node.marks ?? []).some((m) => markKey(m) === key);
+}
+function stripMark(node, key) {
+    return {
+        ...node,
+        marks: (node.marks ?? []).filter((m) => markKey(m) !== key),
+    };
+}
+function group(nodes, used) {
+    const out = [];
+    let i = 0;
+    while (i < nodes.length) {
+        const node = nodes[i];
+        const marks = node.marks ?? [];
+        if (!marks.length) {
+            out.push(...leaf(node, used));
+            i++;
+            continue;
+        }
+        // Pick the mark with the longest run from here.
+        let best = null;
+        let bestLen = 0;
+        for (const m of marks) {
+            const key = markKey(m);
+            let j = i;
+            while (j < nodes.length && hasMark(nodes[j], key))
+                j++;
+            const len = j - i;
+            const better = len > bestLen ||
+                (len === bestLen &&
+                    best !== null &&
+                    MARK_ORDER.indexOf(m.type) <
+                        MARK_ORDER.indexOf(best.type));
+            if (better) {
+                best = m;
+                bestLen = len;
+            }
+        }
+        const key = markKey(best);
+        const run = nodes.slice(i, i + bestLen).map((n) => stripMark(n, key));
+        const children = group(run, used);
+        out.push(wrap(best, children));
+        i += bestLen;
+    }
+    return out;
+}
+function wrap(mark, children) {
+    switch (mark.type) {
+        case "bold":
+            return { type: "strong", children };
+        case "italic":
+            return { type: "emphasis", children };
+        case "strike":
+            return { type: "delete", children };
+        case "link":
+            return {
+                type: "link",
+                url: String(mark.attrs?.href ?? ""),
+                title: mark.attrs?.title ?? null,
+                children,
+            };
+        case "superscript":
+            return {
+                type: "mdxJsxTextElement",
+                name: "sup",
+                attributes: [],
+                children,
+            };
+        case "subscript":
+            return {
+                type: "mdxJsxTextElement",
+                name: "sub",
+                attributes: [],
+                children,
+            };
+        case "code": {
+            const text = children.map((c) => ("value" in c ? c.value : "")).join("");
+            return { type: "inlineCode", value: text };
+        }
+        default:
+            return { type: "paragraph", children };
+    }
+}
+function leaf(node, used) {
+    switch (node.type) {
+        case "text":
+            return node.text ? [{ type: "text", value: node.text }] : [];
+        case "hardBreak":
+            return [{ type: "break" }];
+        case "image":
+            return [
+                {
+                    type: "image",
+                    url: String(node.attrs?.src ?? ""),
+                    alt: node.attrs?.alt ?? null,
+                    title: node.attrs?.title ?? null,
+                },
+            ];
+        case "rawInlineHtml":
+            return [{ type: "html", value: String(node.attrs?.value ?? "") }];
+        case "mdxInlineComponent":
+            return [jsxElement(node, used, true)];
+        case "mdxInlineExpression": {
+            const value = String(node.attrs?.value ?? "");
+            scan(value, used);
+            return [{ type: "mdxTextExpression", value }];
+        }
+        case "footnoteReference":
+            return [{ type: "footnoteReference", ...footnoteLabel(node) }];
+        case "mdxComponent":
+            return [jsxElement(node, used, true)];
+        default:
+            return node.content ? inlines(node.content, used) : [];
+    }
+}

package/dist/mdx/types.d.ts

@@ -0,0 +1,42 @@
+/** Minimal ProseMirror JSON shapes, shared by the converter and the editor. */
+export interface PMMark {
+    type: string;
+    attrs?: Record<string, unknown>;
+}
+export interface PMNode {
+    type: string;
+    attrs?: Record<string, unknown>;
+    content?: PMNode[];
+    marks?: PMMark[];
+    text?: string;
+}
+/** A non-literal JSX attribute value, kept verbatim as source. */
+export interface RawExpression {
+    $raw: string;
+}
+export declare function isRawExpression(v: unknown): v is RawExpression;
+export type PropValue = unknown;
+export interface ImportSpec {
+    /** Local identifier, e.g. `Highlights`. */
+    name: string;
+    /** Module specifier. */
+    from: string;
+    /** Default or named import. */
+    named?: boolean;
+    /** Exported name of a named import when it differs from `name` (`import { imported as name }`). */
+    imported?: string;
+}
+export interface ParsedDocument {
+    doc: PMNode;
+    /** Imports found in the source, keyed by local name. */
+    imports: Record<string, ImportSpec>;
+}
+export interface ComponentRegistry {
+    /** Component name → import spec to emit when it is used. */
+    [name: string]: {
+        import?: string;
+        namedImport?: boolean;
+        inline?: boolean;
+        children?: boolean | "text";
+    };
+}

package/dist/mdx/types.js

@@ -0,0 +1,6 @@
+export function isRawExpression(v) {
+    return (typeof v === "object" &&
+        v !== null &&
+        "$raw" in v &&
+        typeof v.$raw === "string");
+}

package/dist/pages/admin.astro

@@ -0,0 +1,27 @@
+---
+/// <reference path="../env.d.ts" />
+import { basePath, name } from "virtual:vestry/runtime";
+
+export const prerender = false;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="color-scheme" content="light" />
+    <title>{name}</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%231e293b'/%3E%3Cpath d='M9 9l7 14 7-14' stroke='%23f8fafc' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"
+    />
+  </head>
+  <body>
+    <div id="vestry-root" data-base={basePath} data-name={name}></div>
+    <script>
+      import "../ui/main.js";
+    </script>
+  </body>
+</html>

package/dist/pages/api.d.ts

@@ -0,0 +1,3 @@
+import type { APIRoute } from "astro";
+export declare const prerender = false;
+export declare const ALL: APIRoute;

package/dist/pages/api.js

@@ -0,0 +1,31 @@
+import config from "virtual:vestry/config";
+import index from "virtual:vestry/index";
+import { basePath } from "virtual:vestry/runtime";
+import { createApi } from "../core/api.js";
+export const prerender = false;
+function readEnv(key) {
+    // Cloudflare (nodejs_compat populates process.env), Node adapters, and
+    // anything else that exposes a process.env object.
+    const fromProcess = globalThis.process?.env?.[key];
+    if (fromProcess !== undefined)
+        return fromProcess;
+    const fromMeta = import.meta.env?.[key];
+    return fromMeta;
+}
+const api = createApi({ config, index, basePath, env: readEnv });
+/**
+ * Cloudflare bindings (the D1 database) come from `cloudflare:workers`; the
+ * adapter's `locals.runtime.env` was removed in Astro 6 and now throws.
+ * Imported lazily and by variable so other runtimes just get no bindings.
+ */
+async function bindings() {
+    try {
+        const specifier = "cloudflare:workers";
+        const mod = (await import(/* @vite-ignore */ specifier));
+        return mod.env;
+    }
+    catch {
+        return undefined;
+    }
+}
+export const ALL = async ({ request }) => api.handle(request, { bindings: await bindings() });

package/dist/ui/App.d.ts

@@ -0,0 +1,4 @@
+export declare function App({ basePath, name }: {
+    basePath: string;
+    name: string;
+}): import("react").JSX.Element;

package/dist/ui/App.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider, useQuery, } from "@tanstack/react-query";
+import { useEffect, useMemo } from "react";
+import { BrowserRouter, Navigate, Route, Routes, useLocation, } from "react-router";
+import { createClient, UNAUTHORIZED_EVENT } from "./api.js";
+import { createVestryAuthClient } from "./auth-client.js";
+import { Shell } from "./components/Layout.js";
+import { Alert, Loading, ToastProvider } from "./components/ui.js";
+import { VestryContext } from "./context.js";
+import { AssetsPage } from "./pages/Assets.js";
+import { CollectionListPage } from "./pages/CollectionList.js";
+import { DashboardPage } from "./pages/Dashboard.js";
+import { CollectionEntryPage, NewEntryPage, SingletonPage, } from "./pages/EntryEditor.js";
+import { LoginPage } from "./pages/Login.js";
+import { UsersPage } from "./pages/Users.js";
+export function App({ basePath, name }) {
+    const queryClient = useMemo(() => new QueryClient({
+        defaultOptions: { queries: { retry: 1, refetchOnWindowFocus: false } },
+    }), []);
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ToastProvider, { children: _jsx(BrowserRouter, { basename: basePath, children: _jsx(Root, { basePath: basePath, name: name }) }) }) }));
+}
+function Root({ basePath, name }) {
+    const api = useMemo(() => createClient(basePath), [basePath]);
+    const authClient = useMemo(() => createVestryAuthClient(basePath), [basePath]);
+    const location = useLocation();
+    const configQuery = useQuery({
+        queryKey: ["config"],
+        queryFn: () => api.config(),
+        staleTime: Infinity,
+    });
+    // When a session expires mid-use the API answers 401; reloading the config
+    // drops the user and the router falls back to the sign-in page.
+    const refetch = configQuery.refetch;
+    useEffect(() => {
+        const onUnauthorized = () => void refetch();
+        window.addEventListener(UNAUTHORIZED_EVENT, onUnauthorized);
+        return () => window.removeEventListener(UNAUTHORIZED_EVENT, onUnauthorized);
+    }, [refetch]);
+    if (configQuery.isLoading)
+        return _jsx(Loading, { label: "Loading Vestry\u2026" });
+    if (configQuery.error || !configQuery.data) {
+        return (_jsx("div", { className: "v-page", children: _jsxs(Alert, { kind: "error", children: ["Could not load the Vestry configuration:", " ", configQuery.error?.message] }) }));
+    }
+    const client = configQuery.data;
+    const value = {
+        basePath,
+        name: client.config.name ?? name,
+        api,
+        authClient,
+        client,
+        config: client.config,
+        refresh: async () => {
+            await configQuery.refetch();
+        },
+    };
+    if (!client.user) {
+        return (_jsx(VestryContext.Provider, { value: value, children: _jsxs(Routes, { children: [_jsx(Route, { path: "/login", element: _jsx(LoginPage, {}) }), _jsx(Route, { path: "*", element: _jsx(Navigate, { to: `/login?next=${encodeURIComponent(basePath + location.pathname + location.search)}`, replace: true }) })] }) }));
+    }
+    return (_jsx(VestryContext.Provider, { value: value, children: _jsxs(Routes, { children: [_jsx(Route, { path: "/login", element: _jsx(Navigate, { to: afterLogin(location.search, basePath), replace: true }) }), _jsx(Route, { path: "*", element: _jsx(Shell, { children: _jsxs(Routes, { children: [_jsx(Route, { index: true, element: _jsx(DashboardPage, {}) }), _jsx(Route, { path: "collections/:collection", element: _jsx(CollectionListPage, {}) }), _jsx(Route, { path: "collections/:collection/new", element: _jsx(NewEntryPage, {}) }), _jsx(Route, { path: "collections/:collection/*", element: _jsx(CollectionEntryPage, {}) }), _jsx(Route, { path: "singletons/:singleton", element: _jsx(SingletonPage, {}) }), _jsx(Route, { path: "assets/:container", element: _jsx(AssetsPage, {}) }), _jsx(Route, { path: "users", element: _jsx(UsersPage, {}) }), _jsx(Route, { path: "*", element: _jsx(Navigate, { to: "/", replace: true }) })] }) }) })] }) }));
+}
+/** Where to go after sign-in: the `next` the login page was sent with, made router-relative. */
+function afterLogin(search, basePath) {
+    const next = new URLSearchParams(search).get("next");
+    if (!next || !next.startsWith("/") || next.startsWith("//"))
+        return "/";
+    const base = basePath.replace(/\/$/, "");
+    const underBase = next === base || next.startsWith(`${base}/`) || next.startsWith(`${base}?`);
+    const rest = underBase ? next.slice(base.length) : next;
+    return rest.startsWith("/") ? rest : `/${rest}`;
+}