npm - mdx-artifacts - Versions diffs - 0.1.1 → 0.2.0 - Mend

mdx-artifacts 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/dist/lib/cli/vite-artifact.js DELETED Viewed

@@ -1,237 +0,0 @@
-import mdx from "@mdx-js/rollup";
-import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
-import { randomUUID } from "node:crypto";
-import { access, mkdir, readFile, rm, writeFile } from "node:fs/promises";
-import { createRequire } from "node:module";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { createServer, build as viteBuild } from "vite";
-import { createArtifactMeta, createArtifactRoute, readArtifactState, writeArtifactState } from "./artifact-state.js";
-const packageCliDir = path.dirname(fileURLToPath(import.meta.url));
-const defaultStylesPath = path.resolve(packageCliDir, "../react/styles.css");
-export async function createArtifactProject(projectRoot, mdxPath, config) {
-    const tmpDir = path.join(projectRoot, ".artifact-kit", "tmp", randomUUID());
-    const artifact = createArtifactRoute(projectRoot, mdxPath, config.docsDir);
-    const srcDir = path.join(tmpDir, "src");
-    const distDir = path.join(tmpDir, "dist");
-    const entryPath = path.join(srcDir, "entry.tsx");
-    const mdxImport = toRelativeImport(entryPath, mdxPath);
-    const styleImports = createStyleImports(projectRoot, entryPath, config);
-    const reactEntryPath = await resolveReactEntryPath();
-    const reactEntryImport = toRelativeImport(entryPath, reactEntryPath);
-    const reactAliases = resolveReactAliases(projectRoot);
-    await mkdir(srcDir, { recursive: true });
-    await writeFile(path.join(tmpDir, "index.html"), `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MDX Artifact</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/entry.tsx"></script>
-  </body>
-</html>
-`);
-    await writeFile(entryPath, `import React from "react";
-import { createRoot } from "react-dom/client";
-import { ArtifactStateProvider, CommentLayer } from "${reactEntryImport}";
-import Doc from "${mdxImport}";
-${styleImports}
-function App() {
-  return (
-    <main className="ak-shell">
-      <article className="ak-document">
-        <ArtifactStateProvider>
-          <CommentLayer>
-            <Doc />
-          </CommentLayer>
-        </ArtifactStateProvider>
-      </article>
-    </main>
-  );
-}
-createRoot(document.getElementById("root")!).render(<App />);
-`);
-    const viteConfig = {
-        root: tmpDir,
-        logLevel: "warn",
-        plugins: [artifactStatePlugin(projectRoot, artifact), react(), mdx(), tailwindcss()],
-        resolve: {
-            alias: [
-                ...reactAliases,
-                { find: /^mdx-artifacts\/react$/, replacement: reactEntryPath },
-                { find: /^mdx-artifacts$/, replacement: reactEntryPath }
-            ],
-            dedupe: ["react", "react-dom"]
-        },
-        optimizeDeps: {
-            exclude: ["mdx-artifacts", "mdx-artifacts/react"]
-        },
-        server: {
-            port: config.port,
-            fs: {
-                allow: [projectRoot]
-            }
-        },
-        build: {
-            outDir: distDir,
-            emptyOutDir: true,
-            cssCodeSplit: false,
-            assetsInlineLimit: Number.MAX_SAFE_INTEGER,
-            rollupOptions: {
-                input: path.join(tmpDir, "index.html")
-            }
-        }
-    };
-    return {
-        artifact,
-        tmpDir,
-        distDir,
-        config: viteConfig,
-        cleanup: () => rm(tmpDir, { recursive: true, force: true })
-    };
-}
-function artifactStatePlugin(projectRoot, artifact) {
-    return {
-        name: "artifact-kit-state",
-        configureServer(server) {
-            server.middlewares.use(async (request, response, next) => {
-                const requestUrl = new URL(request.url ?? "/", "http://localhost");
-                try {
-                    if (requestUrl.pathname === "/__artifact/meta") {
-                        await handleArtifactMeta(projectRoot, artifact, request, response);
-                        return;
-                    }
-                    if (requestUrl.pathname === "/__artifact/state") {
-                        await handleArtifactState(projectRoot, artifact, request, response);
-                        return;
-                    }
-                }
-                catch (error) {
-                    sendJson(response, 500, {
-                        error: error instanceof Error ? error.message : String(error)
-                    });
-                    return;
-                }
-                next();
-            });
-        }
-    };
-}
-async function handleArtifactMeta(projectRoot, artifact, request, response) {
-    if (request.method !== "GET") {
-        sendJson(response, 405, { error: "Method not allowed." });
-        return;
-    }
-    sendJson(response, 200, await createArtifactMeta(projectRoot, artifact));
-}
-async function handleArtifactState(projectRoot, artifact, request, response) {
-    if (request.method === "GET") {
-        sendJson(response, 200, await readArtifactState(artifact));
-        return;
-    }
-    if (request.method === "POST") {
-        let value;
-        try {
-            value = JSON.parse(await readRequestBody(request));
-        }
-        catch {
-            sendJson(response, 400, { error: "Request body must be valid JSON." });
-            return;
-        }
-        const state = await writeArtifactState(projectRoot, artifact, value);
-        sendJson(response, 200, { ok: true, state });
-        return;
-    }
-    sendJson(response, 405, { error: "Method not allowed." });
-}
-function readRequestBody(request) {
-    return new Promise((resolve, reject) => {
-        let body = "";
-        request.setEncoding("utf8");
-        request.on("data", (chunk) => {
-            body += chunk;
-        });
-        request.on("end", () => resolve(body));
-        request.on("error", reject);
-    });
-}
-function sendJson(response, statusCode, value) {
-    response.statusCode = statusCode;
-    response.setHeader("content-type", "application/json; charset=utf-8");
-    response.end(JSON.stringify(value, null, 2));
-}
-async function resolveReactEntryPath() {
-    const builtEntryPath = path.resolve(packageCliDir, "../react/index.js");
-    const sourceEntryPath = path.resolve(packageCliDir, "../react/index.ts");
-    try {
-        await access(builtEntryPath);
-        return builtEntryPath;
-    }
-    catch {
-        return sourceEntryPath;
-    }
-}
-function resolveReactAliases(projectRoot) {
-    const projectRequire = createRequire(path.join(projectRoot, "package.json"));
-    return [
-        { find: /^react$/, replacement: projectRequire.resolve("react") },
-        { find: /^react\/jsx-runtime$/, replacement: projectRequire.resolve("react/jsx-runtime") },
-        { find: /^react\/jsx-dev-runtime$/, replacement: projectRequire.resolve("react/jsx-dev-runtime") },
-        { find: /^react-dom$/, replacement: projectRequire.resolve("react-dom") },
-        { find: /^react-dom\/client$/, replacement: projectRequire.resolve("react-dom/client") }
-    ];
-}
-export async function startDevServer(project) {
-    const server = await createServer(project.config);
-    await server.listen();
-    return server;
-}
-export async function buildArtifact(project) {
-    await viteBuild(project.config);
-    return inlineBuildAssets(project.distDir);
-}
-async function inlineBuildAssets(distDir) {
-    const htmlPath = path.join(distDir, "index.html");
-    let html = await readFile(htmlPath, "utf8");
-    html = await replaceAsync(html, /<link rel="stylesheet" crossorigin href="([^"]+)">/g, async (_match, href) => {
-        const css = await readFile(assetPath(distDir, href), "utf8");
-        return `<style>${css}</style>`;
-    });
-    html = await replaceAsync(html, /<script type="module" crossorigin src="([^"]+)"><\/script>/g, async (_match, src) => {
-        const js = await readFile(assetPath(distDir, src), "utf8");
-        return `<script type="module">${escapeScriptContent(js)}</script>`;
-    });
-    return html;
-}
-function assetPath(distDir, value) {
-    return path.join(distDir, value.replace(/^\//, ""));
-}
-function toRelativeImport(fromFile, targetFile) {
-    const relative = path.relative(path.dirname(fromFile), targetFile).replaceAll(path.sep, "/");
-    return relative.startsWith(".") ? relative : `./${relative}`;
-}
-function createStyleImports(projectRoot, entryPath, config) {
-    const styles = [
-        ...(config.includeDefaultStyles ? [defaultStylesPath] : []),
-        ...config.styles.map((stylePath) => path.resolve(projectRoot, stylePath))
-    ];
-    return styles.map((stylePath) => `import "${toRelativeImport(entryPath, stylePath)}";`).join("\n");
-}
-async function replaceAsync(source, pattern, replacer) {
-    const matches = Array.from(source.matchAll(pattern));
-    let output = source;
-    for (const match of matches) {
-        const replacement = await replacer(match[0], ...match.slice(1));
-        output = output.replace(match[0], () => replacement);
-    }
-    return output;
-}
-function escapeScriptContent(source) {
-    return source.replace(/<\/script/gi, "<\\/script");
-}

package/dist/lib/react/components/Callout.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-export type CalloutTone = "info" | "success" | "warning" | "danger";
-export type CalloutProps = {
-    id?: string;
-    body: string;
-    title?: string;
-    tone?: CalloutTone;
-    className?: string;
-};
-export declare function Callout({ id, body, title, tone, className }: CalloutProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/CodeBlock.d.ts DELETED Viewed

@@ -1,10 +0,0 @@
-export type CodeBlockProps = {
-    id?: string;
-    code: string;
-    language?: string;
-    filename?: string;
-    showLineNumbers?: boolean;
-    highlightLines?: number[];
-    className?: string;
-};
-export declare function CodeBlock({ id, code, language, filename, showLineNumbers, highlightLines, className }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/CodeBlock.js DELETED Viewed

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CommentTarget } from "./Comments.js";
-export function CodeBlock({ id, code, language, filename, showLineNumbers = false, highlightLines = [], className }) {
-    const lines = splitCodeLines(code);
-    const highlighted = new Set(highlightLines);
-    const title = filename ?? (language ? `${language} code block` : "Code block");
-    const targetId = id ?? `code:${slugify(filename ?? language ?? code)}`;
-    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-section", className), description: "CodeBlock component", targetId: targetId, title: title, children: _jsxs("figure", { className: "ak-code-block", children: [(filename || language) && (_jsxs("figcaption", { className: "ak-code-header", children: [filename && _jsx("span", { className: "ak-code-filename", children: filename }), language && _jsx("span", { className: "ak-code-language", children: language })] })), _jsx("pre", { className: "ak-code-pre", children: _jsx("code", { className: language ? `language-${language}` : undefined, children: lines.map((line, index) => {
-                            const lineNumber = index + 1;
-                            return (_jsxs("span", { className: classNames("ak-code-line", showLineNumbers ? "ak-code-line-numbered" : undefined, highlighted.has(lineNumber) ? "ak-code-line-highlighted" : undefined), "data-line": lineNumber, children: [showLineNumbers && _jsx("span", { className: "ak-code-line-number", children: lineNumber }), _jsx("span", { className: "ak-code-line-content", children: line || "\u00a0" })] }, lineNumber));
-                        }) }) })] }) }));
-}
-function splitCodeLines(code) {
-    const normalized = code.endsWith("\n") ? code.slice(0, -1) : code;
-    return normalized.split("\n");
-}
-function classNames(...values) {
-    return values.filter(Boolean).join(" ");
-}
-function slugify(value) {
-    const slug = value
-        .toLowerCase()
-        .replace(/[`*_~[\]()]/g, "")
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-+|-+$/g, "")
-        .slice(0, 64);
-    return slug || "item";
-}

package/dist/lib/react/components/DecisionMatrix.d.ts DELETED Viewed

@@ -1,16 +0,0 @@
-export type DecisionMatrixOption = {
-    id?: string;
-    name: string;
-    summary?: string;
-    pros?: string[];
-    cons?: string[];
-    risks?: string[];
-    confidence?: "low" | "medium" | "high";
-    verdict?: string;
-};
-export type DecisionMatrixProps = {
-    id?: string;
-    question: string;
-    options: DecisionMatrixOption[];
-};
-export declare function DecisionMatrix({ id, question, options }: DecisionMatrixProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/DecisionMatrix.js DELETED Viewed

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CommentTarget } from "./Comments.js";
-import { InlineText } from "./InlineText.js";
-export function DecisionMatrix({ id, question, options }) {
-    const targetId = id ?? `decision:${slugify(question)}`;
-    return (_jsx(CommentTarget, { className: "ak-comment-target-section", description: "DecisionMatrix component", targetId: targetId, title: question, children: _jsxs("section", { className: "ak-section ak-decision-matrix", children: [_jsxs("div", { className: "ak-section-header", children: [_jsx("p", { className: "ak-eyebrow", children: "Decision Matrix" }), _jsx(InlineText, { as: "h2", text: question, variant: "title" })] }), _jsx("div", { className: "ak-decision-grid", children: options.map((option, index) => {
-                        const optionTargetId = id
-                            ? `${id}.${option.id ?? `${index + 1}`}`
-                            : `decision:${slugify(question)}:${index + 1}:${slugify(option.name)}`;
-                        return (_jsx(CommentTarget, { className: "ak-comment-target-card", description: `DecisionMatrix option in ${question}`, targetId: optionTargetId, title: option.name, children: _jsxs("article", { className: "ak-card", children: [_jsxs("div", { className: "ak-card-header", children: [_jsx(InlineText, { as: "h3", text: option.name, variant: "subtitle" }), option.confidence ? (_jsx("span", { className: `ak-badge ak-badge-${option.confidence}`, children: option.confidence })) : null] }), option.summary ? _jsx(InlineText, { as: "p", className: "ak-muted", text: option.summary }) : null, _jsx(ListBlock, { title: "Pros", items: option.pros }), _jsx(ListBlock, { title: "Cons", items: option.cons }), _jsx(ListBlock, { title: "Risks", items: option.risks }), option.verdict ? _jsx(InlineText, { as: "p", className: "ak-verdict", text: option.verdict }) : null] }) }, option.name));
-                    }) })] }) }));
-}
-function ListBlock({ title, items }) {
-    if (!items?.length) {
-        return null;
-    }
-    return (_jsxs("div", { className: "ak-list-block", children: [_jsx("h4", { children: title }), _jsx("ul", { children: items.map((item) => (_jsx("li", { children: _jsx(InlineText, { text: item }) }, item))) })] }));
-}
-function slugify(value) {
-    const slug = value
-        .toLowerCase()
-        .replace(/[`*_~[\]()]/g, "")
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-+|-+$/g, "")
-        .slice(0, 64);
-    return slug || "item";
-}

package/dist/lib/react/components/DiffBlock.js DELETED Viewed

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CommentTarget } from "./Comments.js";
-const markers = {
-    add: "+",
-    remove: "-",
-    context: " "
-};
-export function DiffBlock({ id, lines, filename, language, className }) {
-    const title = filename ?? (language ? `${language} diff block` : "Diff block");
-    const targetId = id ?? `diff:${slugify(filename ?? language ?? lines.map((line) => line.content).join("-"))}`;
-    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-section", className), description: "DiffBlock component", targetId: targetId, title: title, children: _jsxs("figure", { className: "ak-code-block ak-diff-block", children: [(filename || language) && (_jsxs("figcaption", { className: "ak-code-header", children: [filename && _jsx("span", { className: "ak-code-filename", children: filename }), language && _jsx("span", { className: "ak-code-language", children: language })] })), _jsx("pre", { className: "ak-code-pre", children: _jsx("code", { className: language ? `language-${language}` : undefined, children: lines.map((line, index) => (_jsxs("span", { className: classNames("ak-diff-line", `ak-diff-line-${line.type}`), children: [_jsx("span", { className: "ak-diff-line-number", children: line.newLine ?? line.oldLine ?? "" }), _jsx("span", { className: "ak-diff-marker", children: markers[line.type] }), _jsx("span", { className: "ak-diff-line-content", children: line.content || "\u00a0" })] }, `${line.type}-${index}`))) }) })] }) }));
-}
-function classNames(...values) {
-    return values.filter(Boolean).join(" ");
-}
-function slugify(value) {
-    const slug = value
-        .toLowerCase()
-        .replace(/[`*_~[\]()]/g, "")
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-+|-+$/g, "")
-        .slice(0, 64);
-    return slug || "item";
-}

package/dist/lib/react/components/InlineText.js DELETED Viewed

@@ -1,18 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-const inlineAllowedElements = ["p", "strong", "em", "del", "code", "a", "br"];
-const inlineComponents = {
-    p({ children }) {
-        return _jsx(_Fragment, { children: children });
-    },
-    a({ children, href }) {
-        return (_jsx("a", { href: href, rel: "noreferrer", target: "_blank", children: children }));
-    }
-};
-export function InlineText({ text, as: Component = "span", variant = "default", className }) {
-    return (_jsx(Component, { className: classNames("ak-inline-text", `ak-inline-text--${variant}`, className), children: _jsx(ReactMarkdown, { allowedElements: inlineAllowedElements, components: inlineComponents, remarkPlugins: [remarkGfm], skipHtml: true, unwrapDisallowed: true, children: text }) }));
-}
-function classNames(...values) {
-    return values.filter(Boolean).join(" ");
-}

package/dist/lib/react/components/MarkdownBody.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-export type MarkdownBodyVariant = "default" | "compact";
-export type MarkdownBodyProps = {
-    body: string;
-    variant?: MarkdownBodyVariant;
-    className?: string;
-};
-export declare function MarkdownBody({ body, variant, className }: MarkdownBodyProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/lib/react/components/MarkdownBody.js DELETED Viewed

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-const blockAllowedElements = [
-    "p",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "strong",
-    "em",
-    "del",
-    "code",
-    "a",
-    "br",
-    "ul",
-    "ol",
-    "li",
-    "blockquote"
-];
-const blockComponents = {
-    a({ children, href }) {
-        return (_jsx("a", { href: href, rel: "noreferrer", target: "_blank", children: children }));
-    }
-};
-export function MarkdownBody({ body, variant = "default", className }) {
-    if (!body.trim()) {
-        return null;
-    }
-    return (_jsx("div", { className: classNames("ak-markdown-body", `ak-markdown-body--${variant}`, className), children: _jsx(ReactMarkdown, { allowedElements: blockAllowedElements, components: blockComponents, remarkPlugins: [remarkGfm], skipHtml: true, unwrapDisallowed: true, children: body }) }));
-}
-function classNames(...values) {
-    return values.filter(Boolean).join(" ");
-}

package/dist/lib/react/components/OptionGrid.d.ts DELETED Viewed

@@ -1,13 +0,0 @@
-export type OptionGridItem = {
-    id?: string;
-    name: string;
-    intent?: string;
-    description?: string;
-    tradeoffs?: string[];
-};
-export type OptionGridProps = {
-    id?: string;
-    title: string;
-    options: OptionGridItem[];
-};
-export declare function OptionGrid({ id, title, options }: OptionGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/OptionGrid.js DELETED Viewed

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CommentTarget } from "./Comments.js";
-import { InlineText } from "./InlineText.js";
-export function OptionGrid({ id, title, options }) {
-    const targetId = id ?? `option:${slugify(title)}`;
-    return (_jsx(CommentTarget, { className: "ak-comment-target-section", description: "OptionGrid component", targetId: targetId, title: title, children: _jsxs("section", { className: "ak-section", children: [_jsxs("div", { className: "ak-section-header", children: [_jsx("p", { className: "ak-eyebrow", children: "Option Grid" }), _jsx(InlineText, { as: "h2", text: title, variant: "title" })] }), _jsx("div", { className: "ak-option-grid", children: options.map((option, index) => {
-                        const optionTargetId = id
-                            ? `${id}.${option.id ?? `${index + 1}`}`
-                            : `option:${slugify(title)}:${index + 1}:${slugify(option.name)}`;
-                        return (_jsx(CommentTarget, { className: "ak-comment-target-card", description: `OptionGrid item in ${title}`, targetId: optionTargetId, title: option.name, children: _jsxs("article", { className: "ak-card", children: [_jsx(InlineText, { as: "h3", text: option.name, variant: "subtitle" }), option.intent ? _jsx(InlineText, { as: "p", className: "ak-intent", text: option.intent }) : null, option.description ? _jsx(InlineText, { as: "p", text: option.description }) : null, option.tradeoffs?.length ? (_jsx("ul", { children: option.tradeoffs.map((tradeoff) => (_jsx("li", { children: _jsx(InlineText, { text: tradeoff }) }, tradeoff))) })) : null] }) }, option.name));
-                    }) })] }) }));
-}
-function slugify(value) {
-    const slug = value
-        .toLowerCase()
-        .replace(/[`*_~[\]()]/g, "")
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-+|-+$/g, "")
-        .slice(0, 64);
-    return slug || "item";
-}