hono-decks 1.1.0 → 1.2.0

package/dist/vite.js

@@ -7,10 +7,10 @@ import { unified } from "unified";
 import remarkGfm from "remark-gfm";
 import remarkMdx from "remark-mdx";
 import remarkParse from "remark-parse";
-import { fileURLToPath, pathToFileURL } from "node:url";
 import { compile } from "@mdx-js/mdx";
 import remarkDirective from "remark-directive";
 import { codeToHtml } from "shiki";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import { existsSync } from "node:fs";
 import { lookup } from "node:dns/promises";
 import { isIP } from "node:net";
@@ -1505,29 +1505,20 @@ function extractDeckPrelude(source) {
 	};
 }
 //#endregion
-//#region src/node/void-markdown.ts
-/** Load only for an explicit Void Markdown build; ordinary MDX has no new peers. */
-async function compileVoidMarkdownDecks(input) {
+//#region src/node/markdown-decks.ts
+async function compileMarkdownDecks(input, adapter) {
 	const markdownEntries = input.decks.filter((entry) => entry.sourcePath.endsWith(".md"));
 	const mdx = await compileMdxModuleDecks({
 		...input,
 		decks: input.decks.filter((entry) => !entry.sourcePath.endsWith(".md"))
 	});
 	if (!markdownEntries.length) return mdx;
-	let compiler;
-	try {
-		compiler = await import(pathToFileURL(createRequire(resolve(input.cwd ?? process.cwd(), "package.json")).resolve("void-plugin-hono-jsx/markdown/compiler")).href);
-		if (typeof (compiler.compileMarkdownModule ?? compiler.compileStaticMarkdown) !== "function" || typeof (compiler.readMarkdownModule ?? compiler.readStaticMarkdown) !== "function") throw new Error("Missing standalone compiler API");
-	} catch (error) {
-		throw new Error("Void Markdown requires void-plugin-hono-jsx with the public /markdown/compiler API and its Markdown peers installed in the app.", { cause: error });
-	}
-	const readModule = compiler.readMarkdownModule ?? compiler.readStaticMarkdown;
-	const compileModule = compiler.compileMarkdownModule ?? compiler.compileStaticMarkdown;
 	const decks = [...mdx.decks];
 	const clients = /* @__PURE__ */ new Set();
 	const markdownIslands = /* @__PURE__ */ new Map();
 	for (const entry of markdownEntries) try {
-		const parsed = readModule(await input.readText(entry.sourcePath));
+		const source = await input.readText(entry.sourcePath);
+		const parsed = adapter.read(source);
 		if (input.clientComponentIds?.[entry.slug] && Object.keys(input.clientComponentIds[entry.slug]).length) throw new Error("Void Markdown slides support static components only; use MDX for hono-decks client components.");
 		const warnings = [];
 		const meta = toDeckFrontmatter(parsed.frontmatter, warnings);
@@ -1548,12 +1539,13 @@ async function compileVoidMarkdownDecks(input) {
 		const slides = [];
 		for (const [index, slideSource] of splitMarkdownSlides(parsed.content).entries()) {
 			const prelude = parsed.script ? `<script>\n${parsed.script}\n<\/script>\n` : "";
-			const slide = readModule(prelude + slideSource);
+			const slide = adapter.read(prelude + slideSource);
 			const path = `${input.outDir}/decks/${entry.slug}/slide-${index}.ts`;
-			const result = await compileModule(rewriteAssetUrls(`${prelude}---\n${JSON.stringify({
+			const rewritten = rewriteAssetUrls(`${prelude}---\n${JSON.stringify({
 				...parsed.frontmatter,
 				...slide.frontmatter
-			})}\n---\n${slide.content}`, assets), { sourcePath: resolve(input.cwd ?? process.cwd(), entry.sourcePath) });
+			})}\n---\n${slide.content}`, assets);
+			const result = await adapter.compile(rewritten, { sourcePath: resolve(input.cwd ?? process.cwd(), entry.sourcePath) });
 			clientEntryRequired ||= Boolean(result.clientCode || result.islands?.length);
 			if (result.clientCode) clients.add(result.clientCode);
 			for (const island of result.islands ?? []) markdownIslands.set(island.id, island);
@@ -1603,6 +1595,7 @@ async function compileVoidMarkdownDecks(input) {
 		decks,
 		routerModule: emitModuleDecksRouter({ decks }),
 		clientCode: [...clients].join("\n"),
+		clientModules: [adapter.client([...markdownIslands.values()])].filter(Boolean),
 		markdownIslands: [...markdownIslands.values()]
 	};
 }
@@ -1639,6 +1632,64 @@ function splitMarkdownSlides(source) {
 	return splitSlideSources(protectedLines.join("\n")).map((slide) => slide.replace(new RegExp(`${prefix}(\\d+)_END`, "g"), (_, id) => fences[Number(id)]));
 }
 //#endregion
+//#region src/adapters/hono-markdown.ts
+/** Node-only bridge. Existing Void configs retain their original compiler/runtime pair. */
+async function createHonoMarkdownAdapter(cwd, legacy = false, options) {
+	const require = createRequire(resolve(cwd, "package.json"));
+	const entry = legacy ? "void-plugin-hono-jsx/markdown/compiler" : "@ts-76/hono-markdown/compiler";
+	let compiler;
+	try {
+		compiler = await import(pathToFileURL(require.resolve(entry)).href);
+	} catch (cause) {
+		throw new Error(`Hono Markdown requires ${legacy ? "its public /markdown/compiler API" : "@ts-76/hono-markdown/compiler"} and Markdown peers installed in the app.`, { cause });
+	}
+	const read = compiler.readMarkdownModule ?? compiler.readStaticMarkdown;
+	const compile = compiler.compileMarkdownModule ?? compiler.compileStaticMarkdown;
+	if (typeof read !== "function" || typeof compile !== "function") throw new Error("Missing standalone compiler API");
+	const runtime = entry.startsWith("void-plugin") ? "void-plugin-hono-jsx/markdown/client" : "@ts-76/hono-markdown/client";
+	return {
+		read,
+		compile: (source, input) => compile(source, {
+			...input,
+			options
+		}),
+		client: (islands) => emitMarkdownClient(islands, runtime)
+	};
+}
+function emitMarkdownClient(islands, runtime) {
+	if (!islands.length) return "";
+	const literal = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
+	return `import { hydrateMarkdownIslands } from ${literal(runtime)};
+hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () => import(${literal(island.modulePath)})`).join(",")} }, {
+  ready(element, start) {
+    const slide = element.closest('section[data-slide-state]');
+    if (!slide || slide.dataset.slideState === 'active') { start(); return; }
+    const observer = new MutationObserver(() => {
+      if (slide.dataset.slideState === 'active') { observer.disconnect(); start(); }
+    });
+    observer.observe(slide, { attributes: true, attributeFilter: ['data-slide-state'] });
+  }
+});`;
+}
+//#endregion
+//#region src/node/markdown-adapter.ts
+async function loadMarkdownAdapter(selection, cwd) {
+	if (selection === "void") return createHonoMarkdownAdapter(cwd, true);
+	if (selection.adapter === "hono-decks/adapters/hono-markdown") return createHonoMarkdownAdapter(cwd, false, selection.options);
+	const module = await import(pathToFileURL(createRequire(resolve(cwd, "package.json")).resolve(selection.adapter)).href);
+	if (typeof module.createMarkdownAdapter !== "function") throw new Error("Markdown adapter must export createMarkdownAdapter.");
+	const adapter = await module.createMarkdownAdapter({
+		cwd,
+		options: selection.options
+	});
+	if (![
+		adapter?.read,
+		adapter?.compile,
+		adapter?.client
+	].every((value) => typeof value === "function")) throw new Error("Markdown adapter must provide read, compile and client functions.");
+	return adapter;
+}
+//#endregion
 //#region src/node/client-entry.ts
 async function discoverClientComponentIds(input) {
 	const result = {};
@@ -1659,12 +1710,11 @@ async function emitClientEntryModule(input) {
 			registrations.push(`${JSON.stringify(clientId)}: ${localName}`);
 		}
 	}
-	const markdown = input.markdownIslands ?? [];
-	if (registrations.length === 0 && markdown.length === 0) return `export const decksClientEntry = ${JSON.stringify(input.extraCode ?? "")};\n`;
+	const clientModules = input.clientModules ?? [];
+	if (registrations.length === 0 && clientModules.length === 0) return `export const decksClientEntry = ${JSON.stringify(input.extraCode ?? "")};\n`;
 	const result = await build({
 		stdin: {
-			contents: `${markdown.length ? `import { hydrateMarkdownIslands } from "void-plugin-hono-jsx/markdown/client";
-hydrateMarkdownIslands({ ${markdown.map((entry) => `${javascriptString(entry.id)}: () => import(${javascriptString(entry.modulePath)})`).join(",")} });` : ""}
+			contents: `${clientModules.join("\n")}
 import { hydrateSlideIslands } from "hono-decks/client";
 ${imports.join("\n")}
 
@@ -1741,9 +1791,6 @@ function hashString(value) {
 function safeIdentifier(value) {
 	return value.replace(/[^A-Za-z0-9_$]+/g, "_").replace(/^[^A-Za-z_$]+/, "_") || "_";
 }
-function javascriptString(value) {
-	return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
-}
 //#endregion
 //#region src/node/path-utils.ts
 function dirname(path) {
@@ -2023,7 +2070,7 @@ async function compileDeckModules(input) {
 	const out = normalizeRelativePath(input.out, "Output directory");
 	const root = normalizeDeckRoot(input.root);
 	const paths = await listFiles(input.cwd, join(input.cwd, root));
-	const resolved = resolveDeckFiles(paths, root, { markdown: input.markdown === "void" });
+	const resolved = resolveDeckFiles(paths, root, { markdown: Boolean(input.markdown) });
 	const componentModulePaths = Object.fromEntries(resolved.flatMap((deck) => {
 		const path = deck.kind === "directory" ? findComponentModule(paths, root, deck.slug) : void 0;
 		return path ? [[deck.slug, path]] : [];
@@ -2051,7 +2098,8 @@ async function compileDeckModules(input) {
 		refresh: input.refreshOgp,
 		resolveOgp: input.resolveOgp ?? resolveOgpMetadata
 	});
-	const generated = await (input.markdown === "void" ? compileVoidMarkdownDecks : compileMdxModuleDecks)({
+	const adapter = input.markdown && resolved.some((entry) => entry.sourcePath.endsWith(".md")) ? await loadMarkdownAdapter(input.markdown, input.cwd) : void 0;
+	const generated = await (adapter ? (value) => compileMarkdownDecks(value, adapter) : compileMdxModuleDecks)({
 		cwd: input.cwd,
 		root,
 		outDir: out,
@@ -2070,7 +2118,7 @@ async function compileDeckModules(input) {
 		clientEntries: clientEntryPaths,
 		clientComponentIds,
 		extraCode: generated.clientCode,
-		markdownIslands: generated.markdownIslands,
+		clientModules: generated.clientModules,
 		onCss: (css) => {
 			clientCss = css;
 		}
@@ -2220,7 +2268,7 @@ async function loadDecksConfig(input) {
 	const config = (await import(`data:text/javascript;charset=utf-8,${encodeURIComponent(source)}#${Date.now()}`)).default;
 	if (!config || typeof config !== "object") throw new Error(`Config must have a default export: ${path}`);
 	if (typeof config.mountPath !== "string") throw new Error(`Config mountPath must be a string: ${path}`);
-	if (config.build?.markdown !== void 0 && config.build.markdown !== "void") throw new Error("Config build.markdown must be \"void\".");
+	if (config.build?.markdown !== void 0 && config.build.markdown !== "void" && (typeof config.build.markdown !== "object" || !config.build.markdown || typeof config.build.markdown.adapter !== "string" || !config.build.markdown.adapter.trim())) throw new Error("Config build.markdown must be \"void\" or an adapter reference.");
 	return {
 		path,
 		config,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hono-decks",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Slide decks for Hono and Cloudflare Workers",
   "keywords": [
     "cloudflare-workers",
@@ -63,6 +63,10 @@
     },
     "./vite-env": {
       "types": "./vite-env.d.ts"
+    },
+    "./adapters/hono-markdown": {
+      "types": "./dist/adapters/hono-markdown.d.ts",
+      "import": "./dist/adapters/hono-markdown.js"
     }
   },
   "publishConfig": {