@shivaedev/work-board 0.6.0 → 0.6.1

package/src/render/documentLinks.ts

@@ -1,30 +1,28 @@
-import { defineHastPlugin } from "satteri";
+import type { Element, Root } from "hast";
+import { visit as visitElements } from "unist-util-visit";
 import { fileUrl } from "#files/url.ts";
 import { attachmentHref } from "#path/attachment.ts";
 
 export function documentLinks(file: string) {
-	return defineHastPlugin({
-		element: {
-			filter: ["a", "img"],
-			visit: (element) => {
-				const attribute = element.tagName === "img" ? "src" : "href";
-				const href = element.properties[attribute];
-				if (typeof href !== "string" || href.startsWith("#") || href.startsWith("//") || /^[a-z][a-z\d+.-]*:/iu.exec(href) !== null) {
-					return;
-				}
-				const target = new URL(href, `http://work-board.local${fileUrl(file)}`);
-				const resolved = target.pathname + target.search + target.hash;
-				const image = attachmentHref(resolved);
-				return {
-					...element,
-					properties: {
-						...element.properties,
-						[attribute]: image ?? resolved,
-						...(element.tagName === "img" && image ? { dataLocalImage: image } : {}),
-					},
-				};
-			},
-		},
-		name: "work-board-document-links",
-	});
+	function resolve(element: Element) {
+		const attribute = element.tagName === "img" ? "src" : "href";
+		const href = element.properties[attribute];
+		if (typeof href !== "string" || href.startsWith("#") || href.startsWith("//") || /^[a-z][a-z\d+.-]*:/iu.exec(href) !== null) {
+			return;
+		}
+		const target = new URL(href, `http://work-board.local${fileUrl(file)}`);
+		const resolved = target.pathname + target.search + target.hash;
+		const image = attachmentHref(resolved);
+		element.properties[attribute] = image ?? resolved;
+		if (element.tagName === "img" && image) {
+			element.properties.dataLocalImage = image;
+		}
+	}
+	return () => (tree: Root) => {
+		visitElements(tree, "element", (element) => {
+			if (element.tagName === "a" || element.tagName === "img") {
+				resolve(element);
+			}
+		});
+	};
 }

package/src/render/footnotes.ts

@@ -1,5 +1,5 @@
-import type { Element } from "hast";
-import { defineHastPlugin } from "satteri";
+import type { Element, Root } from "hast";
+import { visit as visitElements } from "unist-util-visit";
 
 const FOOTNOTE_IDS = /^(?:user-content-fn|footnote-label)/u;
 
@@ -17,16 +17,13 @@ const scoped = (prefix: string, value: Value): Value => {
 	return Array.isArray(value) ? value.map((each) => (typeof each === "string" ? String(scoped(prefix, each)) : each)) : value;
 };
 
-export const footnoteIds = (prefix: string) =>
-	defineHastPlugin({
-		element: {
-			filter: ["a", "h2", "li"],
-			visit: (element) => ({
-				...element,
-				properties: Object.fromEntries(
-					Object.entries(element.properties).map(([name, value]) => [name, SCOPED.has(name) ? scoped(prefix, value) : value]),
-				),
-			}),
-		},
-		name: "work-board-footnote-ids",
+export const footnoteIds = (prefix: string) => () => (tree: Root) => {
+	visitElements(tree, "element", (element) => {
+		if (!["a", "h2", "li"].includes(element.tagName)) {
+			return;
+		}
+		element.properties = Object.fromEntries(
+			Object.entries(element.properties).map(([name, value]) => [name, SCOPED.has(name) ? scoped(prefix, value) : value]),
+		);
 	});
+};

package/src/render/markdown.ts

@@ -1,5 +1,10 @@
 import { Effect } from "effect";
-import { type HastPluginInput, markdownToHtml } from "satteri";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { MarkdownAsync } from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import type { PluggableList } from "unified";
 import { codeBlocks } from "./code.ts";
 import type { documentHeadings } from "./documentHeadings.ts";
 import { documentLinks } from "./documentLinks.ts";
@@ -15,7 +20,7 @@ export interface RenderOptions {
 
 export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (source: string, options: RenderOptions = {}) {
 	const highlighter = yield* Highlighter;
-	const plugins: HastPluginInput[] = [codeBlocks(highlighter)];
+	const plugins: PluggableList = [rehypeRaw, codeBlocks(highlighter)];
 	if (options.idPrefix !== undefined) {
 		plugins.push(footnoteIds(options.idPrefix));
 	}
@@ -25,9 +30,17 @@ export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (s
 	if (options.headings !== undefined) {
 		plugins.push(options.headings.plugin);
 	}
-	const { html } = yield* Effect.tryPromise({
+	const html = yield* Effect.tryPromise({
 		catch: (cause) => new RenderFailed({ cause }),
-		try: async () => markdownToHtml(source, { hastPlugins: plugins }),
+		try: async () =>
+			renderToStaticMarkup(
+				await MarkdownAsync({
+					children: source,
+					components: { img: ({ node: _node, ...props }) => createElement("img", { ...props, loading: "lazy" }) },
+					rehypePlugins: plugins,
+					remarkPlugins: [remarkGfm],
+				}),
+			),
 	});
 	return html;
 });

package/src/render/textContent.ts

@@ -0,0 +1,8 @@
+import type { ElementContent } from "hast";
+
+export function textContent(node: ElementContent): string {
+	if (node.type === "text") {
+		return node.value;
+	}
+	return node.type === "element" ? node.children.map(textContent).join("") : "";
+}

package/src/search/collector.ts

@@ -1,6 +1,7 @@
-import type { Element } from "hast";
-import { defineHastPlugin } from "satteri";
+import type { Element, Root } from "hast";
+import { visit as visitElements } from "unist-util-visit";
 import { fileUrl } from "#files/url.ts";
+import { textContent } from "#render/textContent.ts";
 import type { Entry } from "./entries.ts";
 
 function sourceLine(element: Element, first: number | undefined, length: number): { readonly line?: number } {
@@ -14,31 +15,33 @@ export function searchCollector(file: string, startLine: () => number | undefine
 	const entries: Entry[] = [];
 	let passage = "";
 	let label = file;
-	const plugin = defineHastPlugin({
-		element: {
-			filter: ["h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "li", "td", "th"],
-			visit: (element, context) => {
-				const text = context.textContent(element).replace(/\s+/gu, " ").trim();
-				if (!text || element.properties.id === "footnote-label") {
-					return;
-				}
-				const heading = element.tagName.startsWith("h") && element.tagName !== "th";
-				if (heading && typeof element.properties.id === "string") {
-					passage = element.properties.id;
-					label = text;
+	function collect(element: Element) {
+		const text = element.children.map(textContent).join("").replace(/\s+/gu, " ").trim();
+		if (!text || element.properties.id === "footnote-label") {
+			return;
+		}
+		const heading = element.tagName.startsWith("h") && element.tagName !== "th";
+		if (heading && typeof element.properties.id === "string") {
+			passage = element.properties.id;
+			label = text;
+		}
+		entries.push({
+			file,
+			href: fileUrl(file) + (passage ? `#${encodeURIComponent(passage)}` : ""),
+			kind: heading ? "heading" : "passage",
+			...sourceLine(element, startLine(), length()),
+			text,
+			title: label,
+		});
+	}
+	function plugin() {
+		return function transform(tree: Root) {
+			visitElements(tree, "element", (element) => {
+				if (["h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "li", "td", "th"].includes(element.tagName)) {
+					collect(element);
 				}
-				entries.push({
-					file,
-					href: fileUrl(file) + (passage ? `#${encodeURIComponent(passage)}` : ""),
-					kind: heading ? "heading" : "passage",
-					...sourceLine(element, startLine(), length()),
-					text,
-					title: label,
-				});
-			},
-		},
-		name: "work-board-search-text",
-	});
-
+			});
+		};
+	}
 	return { entries, plugin };
 }

package/src/search/entries.ts

@@ -1,4 +1,6 @@
-import { markdownToHtml } from "satteri";
+import { MarkdownAsync } from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 import { fileUrl } from "#files/url.ts";
 import { boardOf } from "#render/board.ts";
 import { documentHeadings } from "#render/documentHeadings.ts";
@@ -41,8 +43,10 @@ export async function entriesOf(source: string, file: string, home: boolean, bod
 		if (fragment) {
 			fragmentLength = fragment.split("\n").length;
 			fragmentLine = board ? fragmentLocation(source, fragment, bodyLine, seenFragments) : bodyLine;
-			await markdownToHtml(board?.definitions ? `${fragment}\n\n${board.definitions}` : fragment, {
-				hastPlugins: [headings.plugin, plugin, linkCollector(links)],
+			await MarkdownAsync({
+				children: board?.definitions ? `${fragment}\n\n${board.definitions}` : fragment,
+				rehypePlugins: [rehypeRaw, headings.plugin, plugin, linkCollector(links)],
+				remarkPlugins: [remarkGfm],
 			});
 		}
 	}

package/src/search/linkCollector.ts

@@ -1,16 +1,16 @@
-import { defineHastPlugin } from "satteri";
+import type { Root } from "hast";
+import { visit as visitElements } from "unist-util-visit";
 
 export function linkCollector(links: Set<string>) {
-	return defineHastPlugin({
-		element: {
-			filter: ["a"],
-			visit: (element) => {
-				const href = element.properties.href;
-				if (typeof href === "string" && !href.startsWith("#")) {
-					links.add(href);
-				}
-			},
-		},
-		name: "work-board-link-collector",
-	});
+	return () => (tree: Root) => {
+		visitElements(tree, "element", (element) => {
+			if (element.tagName !== "a") {
+				return;
+			}
+			const href = element.properties.href;
+			if (typeof href === "string" && !href.startsWith("#")) {
+				links.add(href);
+			}
+		});
+	};
 }