@izumisy/md-react-preview 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import { a as escapeJsString, c as DEFAULT_GLOB, i as createPreviewerViteConfig, l as defineConfig, n as runPreview, o as extractPreviewBlocks, r as startDev, s as hasPreviewBlocks, t as runBuild } from "./server-C2ZxWhHj.mjs";
+export { DEFAULT_GLOB, createPreviewerViteConfig, defineConfig, escapeJsString, extractPreviewBlocks, hasPreviewBlocks, runBuild, runPreview, startDev };

package/dist/server-C2ZxWhHj.mjs

@@ -0,0 +1,275 @@
+import { createRequire } from "node:module";
+import { basename, dirname, relative, resolve } from "node:path";
+import { build, createServer, preview } from "vite";
+import { fileURLToPath } from "node:url";
+import react from "@vitejs/plugin-react";
+import mdx from "@mdx-js/rollup";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkMdxFrontmatter from "remark-mdx-frontmatter";
+import remarkGfm from "remark-gfm";
+import { REGISTRY_MODULE_ID, VIRTUAL_PREFIX, createBasePreviewPlugin, createPreviewBuildPlugin, parseMeta, resolveCssImportPath, simpleHash } from "@izumisy/vite-plugin-react-preview";
+//#region src/config.ts
+const DEFAULT_GLOB = "docs/**/*.md";
+function defineConfig(config) {
+	return config;
+}
+//#endregion
+//#region src/preview-transform.ts
+const PREVIEW_FENCE_RE = /```tsx preview(.*?)\n([\s\S]*?)```/g;
+/**
+* Extract all ` ```tsx preview ` fenced code blocks from a markdown/mdx string.
+* Returns an array of blocks with their code and positions.
+*/
+function extractPreviewBlocks(source) {
+	const blocks = [];
+	const re = new RegExp(PREVIEW_FENCE_RE.source, "g");
+	let match;
+	while ((match = re.exec(source)) !== null) blocks.push({
+		code: match[2].replace(/\n$/, ""),
+		start: match.index,
+		end: match.index + match[0].length,
+		meta: parseMeta(match[1])
+	});
+	return blocks;
+}
+function escapeJsString(s) {
+	return s.replace(/\\/g, "\\\\").replace(/"/g, "\\\"").replace(/\n/g, "\\n");
+}
+/**
+* Check whether a source string contains ` ```tsx preview ` blocks.
+*/
+function hasPreviewBlocks(source) {
+	return source.includes("tsx preview");
+}
+//#endregion
+//#region src/vite-plugins/preview.ts
+/**
+* Vite plugin that:
+* 1. Transforms ` ```tsx preview ` fenced code blocks in .preview.mdx files
+*    into `<PreviewBlock>` components (runs before the MDX compiler).
+* 2. Provides virtual modules for each preview block so they can be rendered
+*    in isolated iframe containers.
+* 3. Handles HMR invalidation when preview files change.
+* 4. In build mode, scans preview files upfront to populate the block registry.
+*/
+function previewPlugin(resolveFiles, options) {
+	const blockRegistry = /* @__PURE__ */ new Map();
+	let devServer = null;
+	const basePlugins = createBasePreviewPlugin("mrp-preview-base", {
+		blockRegistry,
+		cssImport: options?.css ? resolveCssImportPath(options.css, options.hostRoot) : void 0
+	});
+	const transformPlugin = {
+		name: "mrp-preview",
+		enforce: "pre",
+		async transform(code, id) {
+			if (!id.endsWith(".md")) return;
+			let transformed;
+			if (hasPreviewBlocks(code)) {
+				const blocks = extractPreviewBlocks(code);
+				transformed = code;
+				for (let i = blocks.length - 1; i >= 0; i--) {
+					const block = blocks[i];
+					const blockId = simpleHash(`${id}:${i}`);
+					const escaped = escapeJsString(block.code);
+					const isStandalone = block.meta.standalone === "true";
+					blockRegistry.set(blockId, {
+						code: block.code,
+						sourceFile: id,
+						wrap: block.meta.wrap,
+						height: block.meta.height,
+						standalone: isStandalone
+					});
+					const replacement = `<PreviewBlock code={"${escaped}"} blockId={"${blockId}"}${block.meta.height ? ` height={"${block.meta.height}"}` : ""}${block.meta.wrap ? ` wrap={"${block.meta.wrap}"}` : ""}${block.meta.align ? ` align={"${block.meta.align}"}` : ""}${isStandalone ? ` standalone={true}` : ""} />`;
+					transformed = transformed.slice(0, block.start) + replacement + transformed.slice(block.end);
+				}
+			}
+			if (devServer) {
+				for (const [blockId, entry] of blockRegistry) if (entry.sourceFile === id) {
+					const mod = devServer.moduleGraph.getModuleById("\0" + VIRTUAL_PREFIX + blockId + ".tsx");
+					if (mod) devServer.moduleGraph.invalidateModule(mod);
+				}
+				const registryMod = devServer.moduleGraph.getModuleById("\0" + REGISTRY_MODULE_ID);
+				if (registryMod) devServer.moduleGraph.invalidateModule(registryMod);
+			}
+			if (transformed) return {
+				code: transformed,
+				map: null
+			};
+		},
+		configureServer(server) {
+			devServer = server;
+		}
+	};
+	async function scanBlocks() {
+		const { readFile } = await import("node:fs/promises");
+		const files = await resolveFiles();
+		for (const file of files) {
+			const blocks = extractPreviewBlocks(await readFile(file, "utf-8"));
+			if (blocks.length === 0) continue;
+			for (let i = 0; i < blocks.length; i++) {
+				const blockId = simpleHash(`${file}:${i}`);
+				blockRegistry.set(blockId, {
+					code: blocks[i].code,
+					sourceFile: file,
+					wrap: blocks[i].meta.wrap,
+					height: blocks[i].meta.height
+				});
+			}
+		}
+	}
+	return {
+		plugins: [
+			transformPlugin,
+			...basePlugins,
+			createPreviewBuildPlugin({
+				blockRegistry,
+				scanBlocks
+			})
+		],
+		blockRegistry
+	};
+}
+//#endregion
+//#region src/vite-plugins/entries.ts
+/**
+* Virtual module `virtual:previewer-entries` — exports all discovered
+* *.md files as an array of { name, Component } objects.
+*/
+function previewerEntriesPlugin(hostRoot, resolveFiles) {
+	const MODULE_ID = "virtual:previewer-entries";
+	const RESOLVED_ID = "\0" + MODULE_ID;
+	return {
+		name: "previewer-entries",
+		resolveId(id) {
+			if (id === MODULE_ID) return RESOLVED_ID;
+		},
+		async load(id) {
+			if (id !== RESOLVED_ID) return;
+			const files = await resolveFiles();
+			const entries = await Promise.all(files.map(async (file, i) => {
+				return {
+					varName: `Mod${i}`,
+					name: basename(file).replace(/\.md$/, ""),
+					file,
+					filePath: relative(hostRoot, file)
+				};
+			}));
+			return [
+				...entries.map((e) => `import ${e.varName}, { frontmatter as ${e.varName}Fm } from ${JSON.stringify(e.file)};`),
+				"",
+				"export const entries = [",
+				...entries.map((e) => `  { name: ${JSON.stringify(e.name)}, Component: ${e.varName}, frontmatter: ${e.varName}Fm ?? {}, filePath: ${JSON.stringify(e.filePath)} },`),
+				"];"
+			].join("\n");
+		}
+	};
+}
+//#endregion
+//#region src/vite-plugins/css.ts
+/**
+* Virtual module `virtual:previewer-css` — imports the host project's
+* CSS file if configured, or exports nothing.
+*/
+function previewerCssPlugin(hostRoot, css) {
+	const MODULE_ID = "virtual:previewer-css";
+	const RESOLVED_ID = "\0" + MODULE_ID + ".css";
+	return {
+		name: "previewer-css",
+		resolveId(id) {
+			if (id === MODULE_ID) return RESOLVED_ID;
+		},
+		load(id) {
+			if (id !== RESOLVED_ID) return;
+			if (!css) return "";
+			const cssPath = resolveCssImportPath(css, hostRoot);
+			return `@import ${JSON.stringify(cssPath)};`;
+		}
+	};
+}
+//#endregion
+//#region src/vite-config.ts
+const APP_DIR = resolve(dirname(fileURLToPath(import.meta.url)), "..", "app");
+const mdxReactEntry = createRequire(import.meta.url).resolve("@mdx-js/react");
+function createPreviewerViteConfig(options) {
+	const preview = previewPlugin(options.resolveFiles, {
+		css: options.css,
+		hostRoot: options.root
+	});
+	return {
+		configFile: false,
+		root: APP_DIR,
+		publicDir: false,
+		define: { __PREVIEWER_TITLE__: JSON.stringify(options.title) },
+		resolve: { alias: { "@mdx-js/react": mdxReactEntry } },
+		server: {
+			port: 3040,
+			fs: { allow: [options.root, APP_DIR] }
+		},
+		plugins: [
+			...preview.plugins,
+			{
+				enforce: "pre",
+				...mdx({
+					remarkPlugins: [
+						remarkGfm,
+						remarkFrontmatter,
+						[remarkMdxFrontmatter, { name: "frontmatter" }],
+						...options.mdx?.remarkPlugins ?? []
+					],
+					rehypePlugins: [...options.mdx?.rehypePlugins ?? []],
+					providerImportSource: "@mdx-js/react",
+					format: "mdx",
+					mdxExtensions: [".mdx", ".md"],
+					include: /\.(md|mdx)$/
+				})
+			},
+			react({ include: /\.(jsx|tsx)$/ }),
+			...options.vite?.plugins ?? [],
+			previewerEntriesPlugin(options.root, options.resolveFiles),
+			previewerCssPlugin(options.root, options.css)
+		]
+	};
+}
+//#endregion
+//#region src/server.ts
+function buildViteConfig({ cwd, config, resolveFiles }) {
+	return createPreviewerViteConfig({
+		root: cwd,
+		title: config.title,
+		resolveFiles,
+		css: config.previewCss,
+		vite: config.vite,
+		mdx: config.mdx
+	});
+}
+async function startDev(opts) {
+	const server = await createServer(buildViteConfig(opts));
+	await server.listen();
+	server.printUrls();
+	return server;
+}
+async function runBuild(opts) {
+	const viteConfig = buildViteConfig(opts);
+	await build({
+		...viteConfig,
+		build: {
+			...viteConfig.build,
+			outDir: resolve(opts.cwd, "dist")
+		}
+	});
+}
+async function runPreview(opts) {
+	const viteConfig = buildViteConfig(opts);
+	const server = await preview({
+		...viteConfig,
+		build: {
+			...viteConfig.build,
+			outDir: resolve(opts.cwd, "dist")
+		}
+	});
+	server.printUrls();
+	return server;
+}
+//#endregion
+export { escapeJsString as a, DEFAULT_GLOB as c, createPreviewerViteConfig as i, defineConfig as l, runPreview as n, extractPreviewBlocks as o, startDev as r, hasPreviewBlocks as s, runBuild as t };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@izumisy/md-react-preview",
+  "version": "0.1.0",
+  "description": "md-react-preview — component previewer powered by MDX",
+  "bin": {
+    "mrp": "./dist/cli.mjs"
+  },
+  "files": [
+    "dist/**",
+    "app/**"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@mdx-js/react": "^3.1.0",
+    "@mdx-js/rollup": "^3.1.0",
+    "@shikijs/langs": "^4.0.2",
+    "@shikijs/themes": "^4.0.2",
+    "@vitejs/plugin-react": "^4.5.2",
+    "c12": "^3.3.3",
+    "citty": "^0.2.1",
+    "fast-glob": "^3.3.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-mdx-frontmatter": "^5.2.0",
+    "shiki": "^4.0.2",
+    "vite": "^6.3.5",
+    "@izumisy/vite-plugin-react-preview": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "oxfmt": "^0.41.0",
+    "oxlint": "^1.56.0",
+    "tsdown": "^0.21.3",
+    "typescript": "~5.9.3",
+    "unified": "^11.0.5",
+    "vitest": "^4.1.2"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "type-check": "tsc --incremental",
+    "lint": "oxlint",
+    "fmt": "oxfmt --write src app/src",
+    "fmt:check": "oxfmt --check src app/src",
+    "test": "vitest run"
+  }
+}