From 461e05ce88c60824173efb8136566ded2f0e508b Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Wed, 1 Apr 2026 20:47:03 +0900 Subject: [PATCH 1/8] Rename package --- README.md | 2 +- packages/markstage/package.json | 2 +- packages/markstage/src/build-preview.test.ts | 19 ++++++--- packages/markstage/src/preview-transform.ts | 2 +- packages/markstage/src/vite-plugins/css.ts | 2 +- .../src/vite-plugins/preview.test.ts | 41 +++++++++++++++---- .../markstage/src/vite-plugins/preview.ts | 32 +++++++++++---- packages/react-preview/src/dom.ts | 11 ----- .../README.md | 10 ++--- .../package.json | 2 +- packages/vite-plugin-react-preview/src/dom.ts | 8 ++++ .../src/index.ts | 0 .../src/preview-module.test.ts | 0 .../src/preview-module.ts | 0 .../src/preview-plugin.test.ts | 0 .../src/preview-plugin.ts | 0 .../src/preview-utils.test.ts | 0 .../src/preview-utils.ts | 0 .../tsconfig.json | 0 .../tsdown.config.ts | 0 .../vitest.config.ts | 0 .../vitepress-plugin-react-preview/README.md | 2 +- .../package.json | 2 +- .../src/index.ts | 4 +- .../src/markdown-it-plugin.test.ts | 2 +- .../src/markdown-it-plugin.ts | 2 +- .../src/scan-blocks.test.ts | 4 +- pnpm-lock.yaml | 10 ++--- 28 files changed, 101 insertions(+), 56 deletions(-) delete mode 100644 packages/react-preview/src/dom.ts rename packages/{react-preview => vite-plugin-react-preview}/README.md (88%) rename packages/{react-preview => vite-plugin-react-preview}/package.json (93%) create mode 100644 packages/vite-plugin-react-preview/src/dom.ts rename packages/{react-preview => vite-plugin-react-preview}/src/index.ts (100%) rename packages/{react-preview => vite-plugin-react-preview}/src/preview-module.test.ts (100%) rename packages/{react-preview => vite-plugin-react-preview}/src/preview-module.ts (100%) rename packages/{react-preview => vite-plugin-react-preview}/src/preview-plugin.test.ts (100%) rename packages/{react-preview => vite-plugin-react-preview}/src/preview-plugin.ts (100%) rename packages/{react-preview => vite-plugin-react-preview}/src/preview-utils.test.ts (100%) rename packages/{react-preview => vite-plugin-react-preview}/src/preview-utils.ts (100%) rename packages/{react-preview => vite-plugin-react-preview}/tsconfig.json (100%) rename packages/{react-preview => vite-plugin-react-preview}/tsdown.config.ts (100%) rename packages/{react-preview => vite-plugin-react-preview}/vitest.config.ts (100%) diff --git a/README.md b/README.md index 0652434..93cef38 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ A lightweight toolkit for live-previewing React components directly from Markdow | Package | Description | |---------|-------------| | [`@izumisy/markstage`](packages/markstage/) | CLI & programmatic API — run a standalone preview server with `markstage dev` / `markstage build` | -| [`@izumisy/react-preview`](packages/react-preview/) | Vite plugin & utilities — preview block parsing, iframe rendering, standalone preview page generation | +| [`@izumisy/vite-plugin-react-preview`](packages/vite-plugin-react-preview/) | Vite plugin & utilities — preview block parsing, iframe rendering, standalone preview page generation | | [`@izumisy/vitepress-plugin-react-preview`](packages/vitepress-plugin-react-preview/) | VitePress plugin — live React component previews inside a VitePress site | ## Examples diff --git a/packages/markstage/package.json b/packages/markstage/package.json index 3233d99..6d34dcc 100644 --- a/packages/markstage/package.json +++ b/packages/markstage/package.json @@ -29,7 +29,7 @@ "author": "", "license": "ISC", "dependencies": { - "@izumisy/react-preview": "workspace:*", + "@izumisy/vite-plugin-react-preview": "workspace:*", "@mdx-js/react": "^3.1.0", "@mdx-js/rollup": "^3.1.0", "@shikijs/langs": "^4.0.2", diff --git a/packages/markstage/src/build-preview.test.ts b/packages/markstage/src/build-preview.test.ts index 7594892..4b87daa 100644 --- a/packages/markstage/src/build-preview.test.ts +++ b/packages/markstage/src/build-preview.test.ts @@ -4,7 +4,7 @@ import { rm } from "node:fs/promises"; import fg from "fast-glob"; import { runBuild, runPreview } from "./server"; import { extractPreviewBlocks } from "./preview-transform"; -import { simpleHash } from "@izumisy/react-preview"; +import { simpleHash } from "@izumisy/vite-plugin-react-preview"; import { readFile } from "node:fs/promises"; import type { PreviewServer } from "vite"; @@ -20,7 +20,8 @@ describe("build + preview integration", () => { // Clean previous build await rm(DIST_DIR, { recursive: true, force: true }); - const resolveFiles = () => fg("docs/**/*.md", { cwd: FIXTURE_DIR, absolute: true }); + const resolveFiles = () => + fg("docs/**/*.md", { cwd: FIXTURE_DIR, absolute: true }); const opts = { cwd: FIXTURE_DIR, @@ -63,7 +64,9 @@ describe("build + preview integration", () => { it("every __preview/{blockId} page returns 200", async () => { for (const blockId of expectedBlockIds) { const res = await fetch(`${baseUrl}/__preview/${blockId}`); - expect(res.status, `__preview/${blockId} returned ${res.status}`).toBe(200); + expect(res.status, `__preview/${blockId} returned ${res.status}`).toBe( + 200, + ); } }); @@ -74,7 +77,10 @@ describe("build + preview integration", () => { // Extract the script src from the HTML const match = html.match(/src="([^"]+\.js)"/); - expect(match, `__preview/${blockId} should have a script src`).toBeTruthy(); + expect( + match, + `__preview/${blockId} should have a script src`, + ).toBeTruthy(); const scriptUrl = new URL(match![1], baseUrl).href; const scriptRes = await fetch(scriptUrl); @@ -94,7 +100,10 @@ describe("build + preview integration", () => { const js = await scriptRes.text(); for (const blockId of expectedBlockIds) { - expect(js, `Standalone JS should contain registry entry for ${blockId}`).toContain(blockId); + expect( + js, + `Standalone JS should contain registry entry for ${blockId}`, + ).toContain(blockId); } }); }); diff --git a/packages/markstage/src/preview-transform.ts b/packages/markstage/src/preview-transform.ts index b3b922f..6cc537d 100644 --- a/packages/markstage/src/preview-transform.ts +++ b/packages/markstage/src/preview-transform.ts @@ -1,4 +1,4 @@ -import { parseMeta } from "@izumisy/react-preview"; +import { parseMeta } from "@izumisy/vite-plugin-react-preview"; const PREVIEW_FENCE_RE = /```tsx preview(.*?)\n([\s\S]*?)```/g; diff --git a/packages/markstage/src/vite-plugins/css.ts b/packages/markstage/src/vite-plugins/css.ts index 471b9ad..ffd4ba3 100644 --- a/packages/markstage/src/vite-plugins/css.ts +++ b/packages/markstage/src/vite-plugins/css.ts @@ -1,5 +1,5 @@ import type { Plugin } from "vite"; -import { resolveCssImportPath } from "@izumisy/react-preview"; +import { resolveCssImportPath } from "@izumisy/vite-plugin-react-preview"; /** * Virtual module `virtual:previewer-css` — imports the host project's diff --git a/packages/markstage/src/vite-plugins/preview.test.ts b/packages/markstage/src/vite-plugins/preview.test.ts index 96ffa49..6b48792 100644 --- a/packages/markstage/src/vite-plugins/preview.test.ts +++ b/packages/markstage/src/vite-plugins/preview.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect, beforeEach } from "vitest"; import { previewPlugin, type PreviewPluginResult } from "./preview"; -import { simpleHash } from "@izumisy/react-preview"; +import { simpleHash } from "@izumisy/vite-plugin-react-preview"; import type { Plugin } from "vite"; let preview: PreviewPluginResult; @@ -37,7 +37,9 @@ describe("previewPlugin", () => { const result = await callTransform(input, id); const blockId = simpleHash(`${id}:0`); expect(result!.code).toContain(`blockId={"${blockId}"}`); - expect(result!.code).toContain(`code={""}`); + expect(result!.code).toContain( + `code={""}`, + ); expect(result!.code).toContain(""); // Should NOT contain children @@ -46,9 +48,15 @@ describe("previewPlugin", () => { it("transforms multiple ```tsx preview blocks", async () => { const id = "src/Multi.md"; - const input = ["```tsx preview", "", "```", "", "```tsx preview", "", "```"].join( - "\n", - ); + const input = [ + "```tsx preview", + "", + "```", + "", + "```tsx preview", + "", + "```", + ].join("\n"); const result = await callTransform(input, id); const blockId0 = simpleHash(`${id}:0`); @@ -74,17 +82,32 @@ describe("previewPlugin", () => { }); it("escapes backslashes and double quotes in code", async () => { - const input = ["```tsx preview", "const re = /\\d+/;", 'const s = "hello";', "```"].join("\n"); + const input = [ + "```tsx preview", + "const re = /\\d+/;", + 'const s = "hello";', + "```", + ].join("\n"); const result = await callTransform(input, "src/Escape.md"); - expect(result!.code).toContain(`code={"const re = /\\\\d+/;\\nconst s = \\"hello\\";"}`); + expect(result!.code).toContain( + `code={"const re = /\\\\d+/;\\nconst s = \\"hello\\";"}`, + ); }); it("preserves multiline code as escaped newlines in code prop", async () => { - const input = ["```tsx preview", "
", " hello", "
", "```"].join("\n"); + const input = [ + "```tsx preview", + "
", + " hello", + "
", + "```", + ].join("\n"); const result = await callTransform(input, "src/Multiline.md"); - expect(result!.code).toContain(`code={"
\\n hello\\n
"}`); + expect(result!.code).toContain( + `code={"
\\n hello\\n
"}`, + ); }); it("registers blocks in the block registry", async () => { diff --git a/packages/markstage/src/vite-plugins/preview.ts b/packages/markstage/src/vite-plugins/preview.ts index 7d63e6b..687b7b9 100644 --- a/packages/markstage/src/vite-plugins/preview.ts +++ b/packages/markstage/src/vite-plugins/preview.ts @@ -1,5 +1,9 @@ import type { Plugin, ViteDevServer } from "vite"; -import { extractPreviewBlocks, escapeJsString, hasPreviewBlocks } from "../preview-transform"; +import { + extractPreviewBlocks, + escapeJsString, + hasPreviewBlocks, +} from "../preview-transform"; import { simpleHash, type PreviewBlockEntry, @@ -8,7 +12,7 @@ import { resolveCssImportPath, VIRTUAL_PREFIX, REGISTRY_MODULE_ID, -} from "@izumisy/react-preview"; +} from "@izumisy/vite-plugin-react-preview"; export type PreviewPluginResult = { plugins: Plugin[]; @@ -32,7 +36,9 @@ export function previewPlugin( let devServer: ViteDevServer | null = null; // Resolve CSS path for iframe injection - const cssImport = options?.css ? resolveCssImportPath(options.css, options.hostRoot) : undefined; + const cssImport = options?.css + ? resolveCssImportPath(options.css, options.hostRoot) + : undefined; // Reuse the base preview plugin for virtual modules + standalone server const basePlugins = createBasePreviewPlugin("markstage-preview-base", { @@ -69,13 +75,21 @@ export function previewPlugin( standalone: isStandalone, }); - const heightProp = block.meta.height ? ` height={"${block.meta.height}"}` : ""; - const wrapProp = block.meta.wrap ? ` wrap={"${block.meta.wrap}"}` : ""; - const alignProp = block.meta.align ? ` align={"${block.meta.align}"}` : ""; + const heightProp = block.meta.height + ? ` height={"${block.meta.height}"}` + : ""; + const wrapProp = block.meta.wrap + ? ` wrap={"${block.meta.wrap}"}` + : ""; + const alignProp = block.meta.align + ? ` align={"${block.meta.align}"}` + : ""; const standaloneProp = isStandalone ? ` standalone={true}` : ""; const replacement = ``; transformed = - transformed.slice(0, block.start) + replacement + transformed.slice(block.end); + transformed.slice(0, block.start) + + replacement + + transformed.slice(block.end); } } @@ -92,7 +106,9 @@ export function previewPlugin( } } // Also invalidate the registry so new/removed blocks are picked up - const registryMod = devServer.moduleGraph.getModuleById("\0" + REGISTRY_MODULE_ID); + const registryMod = devServer.moduleGraph.getModuleById( + "\0" + REGISTRY_MODULE_ID, + ); if (registryMod) { devServer.moduleGraph.invalidateModule(registryMod); } diff --git a/packages/react-preview/src/dom.ts b/packages/react-preview/src/dom.ts deleted file mode 100644 index 3a7bbc0..0000000 --- a/packages/react-preview/src/dom.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Browser-safe exports from @izumisy/react-preview. - * - * This sub-path (`@izumisy/react-preview/dom`) avoids pulling in Node.js - * dependencies (e.g. `node:crypto`) so it can be safely imported from - * browser code such as React components or Vue SFCs. - */ -export { - WRAP_STYLES, - ALIGN_STYLES, -} from "./preview-module"; diff --git a/packages/react-preview/README.md b/packages/vite-plugin-react-preview/README.md similarity index 88% rename from packages/react-preview/README.md rename to packages/vite-plugin-react-preview/README.md index 92cd50a..5cbf362 100644 --- a/packages/react-preview/README.md +++ b/packages/vite-plugin-react-preview/README.md @@ -1,4 +1,4 @@ -# @izumisy/react-preview +# @izumisy/vite-plugin-react-preview Low-level Vite plugin and utilities for rendering React component previews. This package is the shared engine used by both `@izumisy/markstage` (CLI) and `@izumisy/vitepress-plugin-react-preview` (VitePress integration). @@ -8,11 +8,11 @@ Low-level Vite plugin and utilities for rendering React component previews. This - **Virtual module generation** — each preview block becomes a virtual Vite module (`virtual:markstage-preview-{blockId}`) containing the component code, CSS import, and a default export - **Standalone preview pages** — generates full-viewport HTML pages served at `/__preview/{blockId}` with theme support (`?theme=dark|light`) - **Block registry** — a shared `Map` that tracks discovered blocks and coordinates between the markdown parser and Vite plugin -- **Browser-safe sub-path** — `@izumisy/react-preview/dom` exports constants without pulling in Node.js dependencies, safe for browser/Vue SFC imports +- **Browser-safe sub-path** — `@izumisy/vite-plugin-react-preview/dom` exports constants without pulling in Node.js dependencies, safe for browser/Vue SFC imports ## Exports -### `@izumisy/react-preview` (main) +### `@izumisy/vite-plugin-react-preview` (main) | Export | Description | |--------|-------------| @@ -25,7 +25,7 @@ Low-level Vite plugin and utilities for rendering React component previews. This | `simpleHash(str)` | MD5-based short hash for generating block IDs | | `resolveCssImportPath(css, hostRoot?)` | Resolves CSS import paths (package specifiers vs relative paths) | -### `@izumisy/react-preview/dom` (browser-safe) +### `@izumisy/vite-plugin-react-preview/dom` (browser-safe) | Export | Description | |--------|-------------| @@ -42,7 +42,7 @@ This package is not typically used directly. It is consumed by: If you are building a custom integration, use `createBasePreviewPlugin()` with a block registry: ```ts -import { createBasePreviewPlugin, type PreviewBlockEntry } from "@izumisy/react-preview"; +import { createBasePreviewPlugin, type PreviewBlockEntry } from "@izumisy/vite-plugin-react-preview"; const blockRegistry = new Map(); diff --git a/packages/react-preview/package.json b/packages/vite-plugin-react-preview/package.json similarity index 93% rename from packages/react-preview/package.json rename to packages/vite-plugin-react-preview/package.json index 0933203..7dbf6b9 100644 --- a/packages/react-preview/package.json +++ b/packages/vite-plugin-react-preview/package.json @@ -1,5 +1,5 @@ { - "name": "@izumisy/react-preview", + "name": "@izumisy/vite-plugin-react-preview", "version": "1.0.0", "description": "Vite plugin for rendering React component previews in iframe", "type": "module", diff --git a/packages/vite-plugin-react-preview/src/dom.ts b/packages/vite-plugin-react-preview/src/dom.ts new file mode 100644 index 0000000..668785d --- /dev/null +++ b/packages/vite-plugin-react-preview/src/dom.ts @@ -0,0 +1,8 @@ +/** + * Browser-safe exports from @izumisy/vite-plugin-react-preview. + * + * This sub-path (`@izumisy/vite-plugin-react-preview/dom`) avoids pulling in Node.js + * dependencies (e.g. `node:crypto`) so it can be safely imported from + * browser code such as React components or Vue SFCs. + */ +export { WRAP_STYLES, ALIGN_STYLES } from "./preview-module"; diff --git a/packages/react-preview/src/index.ts b/packages/vite-plugin-react-preview/src/index.ts similarity index 100% rename from packages/react-preview/src/index.ts rename to packages/vite-plugin-react-preview/src/index.ts diff --git a/packages/react-preview/src/preview-module.test.ts b/packages/vite-plugin-react-preview/src/preview-module.test.ts similarity index 100% rename from packages/react-preview/src/preview-module.test.ts rename to packages/vite-plugin-react-preview/src/preview-module.test.ts diff --git a/packages/react-preview/src/preview-module.ts b/packages/vite-plugin-react-preview/src/preview-module.ts similarity index 100% rename from packages/react-preview/src/preview-module.ts rename to packages/vite-plugin-react-preview/src/preview-module.ts diff --git a/packages/react-preview/src/preview-plugin.test.ts b/packages/vite-plugin-react-preview/src/preview-plugin.test.ts similarity index 100% rename from packages/react-preview/src/preview-plugin.test.ts rename to packages/vite-plugin-react-preview/src/preview-plugin.test.ts diff --git a/packages/react-preview/src/preview-plugin.ts b/packages/vite-plugin-react-preview/src/preview-plugin.ts similarity index 100% rename from packages/react-preview/src/preview-plugin.ts rename to packages/vite-plugin-react-preview/src/preview-plugin.ts diff --git a/packages/react-preview/src/preview-utils.test.ts b/packages/vite-plugin-react-preview/src/preview-utils.test.ts similarity index 100% rename from packages/react-preview/src/preview-utils.test.ts rename to packages/vite-plugin-react-preview/src/preview-utils.test.ts diff --git a/packages/react-preview/src/preview-utils.ts b/packages/vite-plugin-react-preview/src/preview-utils.ts similarity index 100% rename from packages/react-preview/src/preview-utils.ts rename to packages/vite-plugin-react-preview/src/preview-utils.ts diff --git a/packages/react-preview/tsconfig.json b/packages/vite-plugin-react-preview/tsconfig.json similarity index 100% rename from packages/react-preview/tsconfig.json rename to packages/vite-plugin-react-preview/tsconfig.json diff --git a/packages/react-preview/tsdown.config.ts b/packages/vite-plugin-react-preview/tsdown.config.ts similarity index 100% rename from packages/react-preview/tsdown.config.ts rename to packages/vite-plugin-react-preview/tsdown.config.ts diff --git a/packages/react-preview/vitest.config.ts b/packages/vite-plugin-react-preview/vitest.config.ts similarity index 100% rename from packages/react-preview/vitest.config.ts rename to packages/vite-plugin-react-preview/vitest.config.ts diff --git a/packages/vitepress-plugin-react-preview/README.md b/packages/vitepress-plugin-react-preview/README.md index 60c9470..7d644d3 100644 --- a/packages/vitepress-plugin-react-preview/README.md +++ b/packages/vitepress-plugin-react-preview/README.md @@ -7,7 +7,7 @@ Transforms `` ```tsx preview `` fenced blocks in Markdown into interactive previ ## Features - **markdown-it plugin** — rewrites `` ```tsx preview `` blocks into `` Vue components at the Markdown parsing stage -- **Vite plugin** — serves preview modules and standalone preview pages using `@izumisy/react-preview` under the hood +- **Vite plugin** — serves preview modules and standalone preview pages using `@izumisy/vite-plugin-react-preview` under the hood - **Style isolation** — inline previews render inside iframes; standalone previews run in a separate page - **Dark mode** — syncs with VitePress theme toggle via `postMessage` - **Build support** — emits standalone HTML pages (`/__preview/{blockId}.html`) during `vitepress build` diff --git a/packages/vitepress-plugin-react-preview/package.json b/packages/vitepress-plugin-react-preview/package.json index 21d89a3..bbe6a24 100644 --- a/packages/vitepress-plugin-react-preview/package.json +++ b/packages/vitepress-plugin-react-preview/package.json @@ -21,7 +21,7 @@ "test": "vitest run" }, "dependencies": { - "@izumisy/react-preview": "workspace:*" + "@izumisy/vite-plugin-react-preview": "workspace:*" }, "devDependencies": { "@types/markdown-it": "^14.1.2", diff --git a/packages/vitepress-plugin-react-preview/src/index.ts b/packages/vitepress-plugin-react-preview/src/index.ts index 925eeb8..5f89775 100644 --- a/packages/vitepress-plugin-react-preview/src/index.ts +++ b/packages/vitepress-plugin-react-preview/src/index.ts @@ -1,13 +1,13 @@ import { readFileSync, readdirSync, statSync } from "node:fs"; import { join, relative } from "node:path"; import type { Plugin } from "vite"; -import type { PreviewBlockEntry } from "@izumisy/react-preview"; +import type { PreviewBlockEntry } from "@izumisy/vite-plugin-react-preview"; import { createBasePreviewPlugin, createPreviewBuildPlugin, simpleHash, parseMeta, -} from "@izumisy/react-preview"; +} from "@izumisy/vite-plugin-react-preview"; import { createMarkdownItPlugin } from "./markdown-it-plugin"; export type MarkstageVitePressOptions = { diff --git a/packages/vitepress-plugin-react-preview/src/markdown-it-plugin.test.ts b/packages/vitepress-plugin-react-preview/src/markdown-it-plugin.test.ts index 4fb2254..a6ad9f1 100644 --- a/packages/vitepress-plugin-react-preview/src/markdown-it-plugin.test.ts +++ b/packages/vitepress-plugin-react-preview/src/markdown-it-plugin.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect } from "vitest"; import MarkdownIt from "markdown-it"; -import type { PreviewBlockEntry } from "@izumisy/react-preview"; +import type { PreviewBlockEntry } from "@izumisy/vite-plugin-react-preview"; import { createMarkdownItPlugin } from "./markdown-it-plugin"; function render(src: string, env: Record = {}) { diff --git a/packages/vitepress-plugin-react-preview/src/markdown-it-plugin.ts b/packages/vitepress-plugin-react-preview/src/markdown-it-plugin.ts index 93e3ebe..e948b1e 100644 --- a/packages/vitepress-plugin-react-preview/src/markdown-it-plugin.ts +++ b/packages/vitepress-plugin-react-preview/src/markdown-it-plugin.ts @@ -3,7 +3,7 @@ import { simpleHash, parseMeta, type PreviewBlockEntry, -} from "@izumisy/react-preview"; +} from "@izumisy/vite-plugin-react-preview"; /** * Create a markdown-it plugin that transforms ` ```tsx preview ` fenced code blocks diff --git a/packages/vitepress-plugin-react-preview/src/scan-blocks.test.ts b/packages/vitepress-plugin-react-preview/src/scan-blocks.test.ts index ad33e94..c6a7b1b 100644 --- a/packages/vitepress-plugin-react-preview/src/scan-blocks.test.ts +++ b/packages/vitepress-plugin-react-preview/src/scan-blocks.test.ts @@ -2,8 +2,8 @@ import { describe, it, expect, beforeAll, afterAll } from "vitest"; import { mkdirSync, writeFileSync, rmSync } from "node:fs"; import { join } from "node:path"; import { tmpdir } from "node:os"; -import type { PreviewBlockEntry } from "@izumisy/react-preview"; -import { simpleHash } from "@izumisy/react-preview"; +import type { PreviewBlockEntry } from "@izumisy/vite-plugin-react-preview"; +import { simpleHash } from "@izumisy/vite-plugin-react-preview"; import { findMarkdownFiles, scanMarkdownBlocks } from "./index"; const TMP_ROOT = join(tmpdir(), "markstage-test-" + Date.now()); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 530b350..2a50f79 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,9 +78,9 @@ importers: packages/markstage: dependencies: - '@izumisy/react-preview': + '@izumisy/vite-plugin-react-preview': specifier: workspace:* - version: link:../react-preview + version: link:../vite-plugin-react-preview '@mdx-js/react': specifier: ^3.1.0 version: 3.1.1(@types/react@19.2.14)(react@19.2.4) @@ -152,7 +152,7 @@ importers: specifier: 'catalog:' version: 4.1.2(@types/node@22.19.15)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(yaml@2.8.3)) - packages/react-preview: + packages/vite-plugin-react-preview: dependencies: vite: specifier: 'catalog:' @@ -173,9 +173,9 @@ importers: packages/vitepress-plugin-react-preview: dependencies: - '@izumisy/react-preview': + '@izumisy/vite-plugin-react-preview': specifier: workspace:* - version: link:../react-preview + version: link:../vite-plugin-react-preview react: specifier: '>=18' version: 19.2.4 From d4cc0c0bfe83d559645d898fe2c60017311ad527 Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Wed, 1 Apr 2026 20:48:12 +0900 Subject: [PATCH 2/8] Dete ARCHITECTURE.md --- ARCHITECTURE.md | 130 ------------------------------------------------ 1 file changed, 130 deletions(-) delete mode 100644 ARCHITECTURE.md diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md deleted file mode 100644 index 8015a87..0000000 --- a/ARCHITECTURE.md +++ /dev/null @@ -1,130 +0,0 @@ -# Architecture - -This document describes the internal design and development workflow of Markstage. - -## Repository Layout - -``` -markstage/ -├── packages/ -│ ├── core/ # @markstage/core — programmatic API -│ │ ├── src/ # Node-side code (Vite config, plugins, config loading) -│ │ │ ├── index.ts # Public API: startDev, runBuild, defineConfig, etc. -│ │ │ ├── config.ts # PreviewerConfig type + defineConfig helper -│ │ │ ├── load-config.ts # Loads previewer.config.* via c12 -│ │ │ ├── vite-config.ts # Assembles the full Vite InlineConfig -│ │ │ └── plugins/ # Vite plugins -│ │ │ ├── previewer-code.ts # Transforms ```tsx preview blocks -│ │ │ ├── previewer-entries.ts # Virtual module: preview MDX entries -│ │ │ ├── previewer-config.ts # Virtual module: config -│ │ │ ├── previewer-css.ts # Virtual module: host CSS -│ │ │ ├── previewer-html-title.ts # HTML title injection -│ │ │ └── previewer-llms-txt.ts # llms.txt endpoint -│ │ └── app/ # Browser-side React app (served by Vite) -│ │ ├── index.html -│ │ └── src/ -│ │ ├── main.tsx # React entry -│ │ ├── app.tsx # Shell: sidebar + content area -│ │ ├── overview.tsx # Overview grid page -│ │ ├── preview-block.tsx # Live preview + collapsible code -│ │ ├── code-block.tsx # Shiki syntax highlighting -│ │ ├── mdx-components.tsx # MDX component overrides -│ │ ├── theme.tsx # Dark/light theme provider -│ │ └── virtual-modules.d.ts # Type declarations for virtual modules -│ └── cli/ # @izumisy/markstage — CLI entry point -│ └── src/ -│ ├── cli.ts # Entry point — `dev` and `build` commands (citty) -│ └── index.ts # Re-exports defineConfig from @markstage/core -├── turbo.json # Turborepo task definitions -├── pnpm-workspace.yaml # pnpm workspace config -└── .github/workflows/ci.yml # CI: format check + lint -``` - -## Key Design Decisions - -### Vite as the Runtime - -Markstage does **not** ship a bundled app. Instead it constructs a Vite -`InlineConfig` at runtime and calls `createServer()` (dev) or `build()`. -The `app/` directory is used as Vite's `root`, so `app/index.html` is served -directly without middleware. - -### Virtual Modules - -Three Vite virtual modules inject dynamic data into the browser app: - -| Module | Purpose | -|--------|---------| -| `virtual:previewer-entries` | Imports every discovered `*.preview.mdx` and exports an `entries` array with name, Component, frontmatter, and filePath. | -| `virtual:previewer-config` | Exports `title` and `repo` so the app can render headers and source links. | -| `virtual:previewer-css` | Emits an `@import` for the host project's CSS file (or nothing). | - -### Plugin Pipeline - -Files go through several transformations before reaching the browser: - -1. **`vite-plugin-preview-code`** (enforce: `pre`) — rewrites `` ```tsx preview `` - fenced blocks into `` JSX so the MDX - compiler sees standard markup. -2. **`@mdx-js/rollup`** (enforce: `pre`) — compiles MDX to JSX with remark - plugins: - - `remark-gfm` — GitHub-flavoured markdown. - - `remark-frontmatter` + `remark-mdx-frontmatter` — parse and export YAML - frontmatter. -3. **`@vitejs/plugin-react`** — handles JSX/TSX compilation. - -### Framework Isolation - -Markstage bundles its own `@mdx-js/react` and resolves it via a Vite alias so -the host project does not need to install it. - -## Build - -Both `@markstage/core` and `@izumisy/markstage` (CLI) are compiled with -**tsdown** (a fast TypeScript bundler built on esbuild / Rollup): - -```bash -pnpm build # turbo run build -``` - -**@markstage/core** entry points (`packages/core/tsdown.config.ts`): - -- `src/index.ts` → `dist/index.mjs` + `dist/index.d.mts` (programmatic API) - -**@izumisy/markstage** entry points (`packages/cli/tsdown.config.ts`): - -- `src/cli.ts` → `dist/cli.mjs` (the bin executable) -- `src/index.ts` → `dist/index.mjs` + `dist/index.d.mts` (re-exports from core) - -The `app/` directory (in `packages/core/`) is **not** compiled — it is shipped -as-is and processed by Vite at runtime in the host project. - -## Development - -```bash -pnpm install # install all workspace dependencies -pnpm dev # tsdown --watch (rebuild on change) -pnpm type-check # tsc --incremental -pnpm lint # oxlint -pnpm fmt # oxfmt --write -pnpm fmt:check # oxfmt --check (CI) -``` - -All commands are orchestrated by Turborepo. Run them from the repo root and -Turbo will execute the correct scripts in each workspace package. - -## CI - -GitHub Actions (`.github/workflows/ci.yml`) runs on pushes to `main` and on -pull requests: - -1. `pnpm fmt:check` — verify formatting with oxfmt. -2. `pnpm lint` — run oxlint. - -## Adding a New Package - -1. Create a directory under `packages/`. -2. Add a `package.json` with the desired name and scripts. -3. If the new package has `build`, `lint`, `fmt`, `fmt:check`, or `type-check` - scripts, Turbo will pick them up automatically via the task definitions in - `turbo.json`. From 469e2f73113ec4be601780def7fd082396c39c35 Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Wed, 1 Apr 2026 20:48:27 +0900 Subject: [PATCH 3/8] Format files --- packages/markstage/src/build-preview.test.ts | 17 ++------ .../src/vite-plugins/preview.test.ts | 39 ++++--------------- .../markstage/src/vite-plugins/preview.ts | 30 ++++---------- 3 files changed, 19 insertions(+), 67 deletions(-) diff --git a/packages/markstage/src/build-preview.test.ts b/packages/markstage/src/build-preview.test.ts index 4b87daa..98dcdc8 100644 --- a/packages/markstage/src/build-preview.test.ts +++ b/packages/markstage/src/build-preview.test.ts @@ -20,8 +20,7 @@ describe("build + preview integration", () => { // Clean previous build await rm(DIST_DIR, { recursive: true, force: true }); - const resolveFiles = () => - fg("docs/**/*.md", { cwd: FIXTURE_DIR, absolute: true }); + const resolveFiles = () => fg("docs/**/*.md", { cwd: FIXTURE_DIR, absolute: true }); const opts = { cwd: FIXTURE_DIR, @@ -64,9 +63,7 @@ describe("build + preview integration", () => { it("every __preview/{blockId} page returns 200", async () => { for (const blockId of expectedBlockIds) { const res = await fetch(`${baseUrl}/__preview/${blockId}`); - expect(res.status, `__preview/${blockId} returned ${res.status}`).toBe( - 200, - ); + expect(res.status, `__preview/${blockId} returned ${res.status}`).toBe(200); } }); @@ -77,10 +74,7 @@ describe("build + preview integration", () => { // Extract the script src from the HTML const match = html.match(/src="([^"]+\.js)"/); - expect( - match, - `__preview/${blockId} should have a script src`, - ).toBeTruthy(); + expect(match, `__preview/${blockId} should have a script src`).toBeTruthy(); const scriptUrl = new URL(match![1], baseUrl).href; const scriptRes = await fetch(scriptUrl); @@ -100,10 +94,7 @@ describe("build + preview integration", () => { const js = await scriptRes.text(); for (const blockId of expectedBlockIds) { - expect( - js, - `Standalone JS should contain registry entry for ${blockId}`, - ).toContain(blockId); + expect(js, `Standalone JS should contain registry entry for ${blockId}`).toContain(blockId); } }); }); diff --git a/packages/markstage/src/vite-plugins/preview.test.ts b/packages/markstage/src/vite-plugins/preview.test.ts index 6b48792..147047b 100644 --- a/packages/markstage/src/vite-plugins/preview.test.ts +++ b/packages/markstage/src/vite-plugins/preview.test.ts @@ -37,9 +37,7 @@ describe("previewPlugin", () => { const result = await callTransform(input, id); const blockId = simpleHash(`${id}:0`); expect(result!.code).toContain(`blockId={"${blockId}"}`); - expect(result!.code).toContain( - `code={""}`, - ); + expect(result!.code).toContain(`code={""}`); expect(result!.code).toContain(""); // Should NOT contain children @@ -48,15 +46,9 @@ describe("previewPlugin", () => { it("transforms multiple ```tsx preview blocks", async () => { const id = "src/Multi.md"; - const input = [ - "```tsx preview", - "
", - "```", - "", - "```tsx preview", - "", - "```", - ].join("\n"); + const input = ["```tsx preview", "", "```", "", "```tsx preview", "", "```"].join( + "\n", + ); const result = await callTransform(input, id); const blockId0 = simpleHash(`${id}:0`); @@ -82,32 +74,17 @@ describe("previewPlugin", () => { }); it("escapes backslashes and double quotes in code", async () => { - const input = [ - "```tsx preview", - "const re = /\\d+/;", - 'const s = "hello";', - "```", - ].join("\n"); + const input = ["```tsx preview", "const re = /\\d+/;", 'const s = "hello";', "```"].join("\n"); const result = await callTransform(input, "src/Escape.md"); - expect(result!.code).toContain( - `code={"const re = /\\\\d+/;\\nconst s = \\"hello\\";"}`, - ); + expect(result!.code).toContain(`code={"const re = /\\\\d+/;\\nconst s = \\"hello\\";"}`); }); it("preserves multiline code as escaped newlines in code prop", async () => { - const input = [ - "```tsx preview", - "
", - " hello", - "
", - "```", - ].join("\n"); + const input = ["```tsx preview", "
", " hello", "
", "```"].join("\n"); const result = await callTransform(input, "src/Multiline.md"); - expect(result!.code).toContain( - `code={"
\\n hello\\n
"}`, - ); + expect(result!.code).toContain(`code={"
\\n hello\\n
"}`); }); it("registers blocks in the block registry", async () => { diff --git a/packages/markstage/src/vite-plugins/preview.ts b/packages/markstage/src/vite-plugins/preview.ts index 687b7b9..a7ae85d 100644 --- a/packages/markstage/src/vite-plugins/preview.ts +++ b/packages/markstage/src/vite-plugins/preview.ts @@ -1,9 +1,5 @@ import type { Plugin, ViteDevServer } from "vite"; -import { - extractPreviewBlocks, - escapeJsString, - hasPreviewBlocks, -} from "../preview-transform"; +import { extractPreviewBlocks, escapeJsString, hasPreviewBlocks } from "../preview-transform"; import { simpleHash, type PreviewBlockEntry, @@ -36,9 +32,7 @@ export function previewPlugin( let devServer: ViteDevServer | null = null; // Resolve CSS path for iframe injection - const cssImport = options?.css - ? resolveCssImportPath(options.css, options.hostRoot) - : undefined; + const cssImport = options?.css ? resolveCssImportPath(options.css, options.hostRoot) : undefined; // Reuse the base preview plugin for virtual modules + standalone server const basePlugins = createBasePreviewPlugin("markstage-preview-base", { @@ -75,21 +69,13 @@ export function previewPlugin( standalone: isStandalone, }); - const heightProp = block.meta.height - ? ` height={"${block.meta.height}"}` - : ""; - const wrapProp = block.meta.wrap - ? ` wrap={"${block.meta.wrap}"}` - : ""; - const alignProp = block.meta.align - ? ` align={"${block.meta.align}"}` - : ""; + const heightProp = block.meta.height ? ` height={"${block.meta.height}"}` : ""; + const wrapProp = block.meta.wrap ? ` wrap={"${block.meta.wrap}"}` : ""; + const alignProp = block.meta.align ? ` align={"${block.meta.align}"}` : ""; const standaloneProp = isStandalone ? ` standalone={true}` : ""; const replacement = ``; transformed = - transformed.slice(0, block.start) + - replacement + - transformed.slice(block.end); + transformed.slice(0, block.start) + replacement + transformed.slice(block.end); } } @@ -106,9 +92,7 @@ export function previewPlugin( } } // Also invalidate the registry so new/removed blocks are picked up - const registryMod = devServer.moduleGraph.getModuleById( - "\0" + REGISTRY_MODULE_ID, - ); + const registryMod = devServer.moduleGraph.getModuleById("\0" + REGISTRY_MODULE_ID); if (registryMod) { devServer.moduleGraph.invalidateModule(registryMod); } From be7214bc36e72a142c99ebabac8f0bdb726cbe70 Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Wed, 1 Apr 2026 20:48:55 +0900 Subject: [PATCH 4/8] Format again --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 93cef38..c7315b1 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,20 @@ # Markstage -A lightweight toolkit for live-previewing React components directly from Markdown. Write `` ```tsx preview `` fenced blocks and get instant rendered output — powered by Vite. +A lightweight toolkit for live-previewing React components directly from Markdown. Write ` ```tsx preview ` fenced blocks and get instant rendered output — powered by Vite. ## Packages -| Package | Description | -|---------|-------------| -| [`@izumisy/markstage`](packages/markstage/) | CLI & programmatic API — run a standalone preview server with `markstage dev` / `markstage build` | -| [`@izumisy/vite-plugin-react-preview`](packages/vite-plugin-react-preview/) | Vite plugin & utilities — preview block parsing, iframe rendering, standalone preview page generation | -| [`@izumisy/vitepress-plugin-react-preview`](packages/vitepress-plugin-react-preview/) | VitePress plugin — live React component previews inside a VitePress site | +| Package | Description | +| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | +| [`@izumisy/markstage`](packages/markstage/) | CLI & programmatic API — run a standalone preview server with `markstage dev` / `markstage build` | +| [`@izumisy/vite-plugin-react-preview`](packages/vite-plugin-react-preview/) | Vite plugin & utilities — preview block parsing, iframe rendering, standalone preview page generation | +| [`@izumisy/vitepress-plugin-react-preview`](packages/vitepress-plugin-react-preview/) | VitePress plugin — live React component previews inside a VitePress site | ## Examples -| Example | Description | -|---------|-------------| -| [`example-cli`](examples/cli/) | Standalone preview server using the `@izumisy/markstage` CLI | +| Example | Description | +| ------------------------------------------ | -------------------------------------------------------------------- | +| [`example-cli`](examples/cli/) | Standalone preview server using the `@izumisy/markstage` CLI | | [`example-vitepress`](examples/vitepress/) | VitePress integration with `@izumisy/vitepress-plugin-react-preview` | ## Quick Start From 0eda50ab9a0e91d49bc08c4bc754d17eb32df2e7 Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Wed, 1 Apr 2026 20:52:43 +0900 Subject: [PATCH 5/8] Update usage example --- packages/vite-plugin-react-preview/README.md | 25 +++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/vite-plugin-react-preview/README.md b/packages/vite-plugin-react-preview/README.md index 5cbf362..00761f5 100644 --- a/packages/vite-plugin-react-preview/README.md +++ b/packages/vite-plugin-react-preview/README.md @@ -42,14 +42,33 @@ This package is not typically used directly. It is consumed by: If you are building a custom integration, use `createBasePreviewPlugin()` with a block registry: ```ts -import { createBasePreviewPlugin, type PreviewBlockEntry } from "@izumisy/vite-plugin-react-preview"; - +import { + createBasePreviewPlugin, + createPreviewBuildPlugin, + type PreviewBlockEntry, +} from "@izumisy/vite-plugin-react-preview"; + +// blockRegistry is defined externally so that multiple plugins (e.g. a +// markdown-it plugin that registers blocks and the Vite plugin that serves +// them) can share the same mutable state. const blockRegistry = new Map(); -const plugins = createBasePreviewPlugin("my-preview-plugin", { +// createBasePreviewPlugin: provides virtual module resolution, code +// generation, JSX compilation, and the dev server middleware for serving +// standalone preview pages at /__preview/:blockId. +const basePlugins = createBasePreviewPlugin("my-preview-plugin", { blockRegistry, cssImport: "@my-lib/styles", }); + +// createPreviewBuildPlugin: production build only — emits static HTML pages +// for each preview block so they can be embedded as iframes in the built site. +const buildPlugin = createPreviewBuildPlugin({ + blockRegistry, + scanBlocks: (root) => { + // Populate blockRegistry before Rollup resolves virtual modules. + }, +}); ``` ## License From 5c44279039e59e48314557f869e6a7a30bb0cb67 Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Wed, 1 Apr 2026 21:01:56 +0900 Subject: [PATCH 6/8] Rename markstage to md-react-preview --- README.md | 14 ++-- examples/cli/README.md | 2 +- examples/cli/package.json | 8 +-- examples/cli/previewer.config.ts | 2 +- examples/vitepress/docs/.vitepress/config.ts | 10 +-- examples/vitepress/docs/index.md | 2 +- package.json | 2 +- .../{markstage => md-react-preview}/README.md | 16 ++--- .../app/index.html | 2 +- .../app/src/app.tsx | 0 .../app/src/code-block.tsx | 0 .../app/src/main.tsx | 0 .../app/src/mdx-components.tsx | 0 .../app/src/preview-block.tsx | 14 ++-- .../app/src/theme.tsx | 0 .../app/src/virtual-modules.d.ts | 2 +- .../package.json | 6 +- .../src/__fixtures__/docs/Button.md | 0 .../src/__fixtures__/docs/Card.md | 0 .../src/build-preview.test.ts | 0 .../src/cli.ts | 0 .../src/config.test.ts | 0 .../src/config.ts | 0 .../src/index.ts | 0 .../src/preview-transform.test.ts | 0 .../src/preview-transform.ts | 0 .../src/server.ts | 0 .../src/vite-config.ts | 0 .../src/vite-plugins/css.test.ts | 0 .../src/vite-plugins/css.ts | 0 .../src/vite-plugins/entries.test.ts | 44 +++++++++---- .../src/vite-plugins/entries.ts | 0 .../src/vite-plugins/preview.test.ts | 41 +++++++++--- .../src/vite-plugins/preview.ts | 34 +++++++--- .../tsconfig.json | 0 .../tsdown.config.ts | 0 .../vitest.config.ts | 0 packages/vite-plugin-react-preview/README.md | 6 +- .../src/preview-module.test.ts | 8 +-- .../src/preview-module.ts | 11 ++-- .../src/preview-plugin.test.ts | 2 +- .../src/preview-plugin.ts | 8 +-- .../vitepress-plugin-react-preview/README.md | 10 +-- .../src/PreviewBlock.vue | 66 +++++++++---------- .../src/index.ts | 8 +-- .../src/scan-blocks.test.ts | 2 +- pnpm-lock.yaml | 6 +- 47 files changed, 195 insertions(+), 131 deletions(-) rename packages/{markstage => md-react-preview}/README.md (87%) rename packages/{markstage => md-react-preview}/app/index.html (96%) rename packages/{markstage => md-react-preview}/app/src/app.tsx (100%) rename packages/{markstage => md-react-preview}/app/src/code-block.tsx (100%) rename packages/{markstage => md-react-preview}/app/src/main.tsx (100%) rename packages/{markstage => md-react-preview}/app/src/mdx-components.tsx (100%) rename packages/{markstage => md-react-preview}/app/src/preview-block.tsx (94%) rename packages/{markstage => md-react-preview}/app/src/theme.tsx (100%) rename packages/{markstage => md-react-preview}/app/src/virtual-modules.d.ts (92%) rename packages/{markstage => md-react-preview}/package.json (89%) rename packages/{markstage => md-react-preview}/src/__fixtures__/docs/Button.md (100%) rename packages/{markstage => md-react-preview}/src/__fixtures__/docs/Card.md (100%) rename packages/{markstage => md-react-preview}/src/build-preview.test.ts (100%) rename packages/{markstage => md-react-preview}/src/cli.ts (100%) rename packages/{markstage => md-react-preview}/src/config.test.ts (100%) rename packages/{markstage => md-react-preview}/src/config.ts (100%) rename packages/{markstage => md-react-preview}/src/index.ts (100%) rename packages/{markstage => md-react-preview}/src/preview-transform.test.ts (100%) rename packages/{markstage => md-react-preview}/src/preview-transform.ts (100%) rename packages/{markstage => md-react-preview}/src/server.ts (100%) rename packages/{markstage => md-react-preview}/src/vite-config.ts (100%) rename packages/{markstage => md-react-preview}/src/vite-plugins/css.test.ts (100%) rename packages/{markstage => md-react-preview}/src/vite-plugins/css.ts (100%) rename packages/{markstage => md-react-preview}/src/vite-plugins/entries.test.ts (60%) rename packages/{markstage => md-react-preview}/src/vite-plugins/entries.ts (100%) rename packages/{markstage => md-react-preview}/src/vite-plugins/preview.test.ts (80%) rename packages/{markstage => md-react-preview}/src/vite-plugins/preview.ts (84%) rename packages/{markstage => md-react-preview}/tsconfig.json (100%) rename packages/{markstage => md-react-preview}/tsdown.config.ts (100%) rename packages/{markstage => md-react-preview}/vitest.config.ts (100%) diff --git a/README.md b/README.md index c7315b1..2a7b1da 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Markstage +# md-react-preview A lightweight toolkit for live-previewing React components directly from Markdown. Write ` ```tsx preview ` fenced blocks and get instant rendered output — powered by Vite. @@ -6,7 +6,7 @@ A lightweight toolkit for live-previewing React components directly from Markdow | Package | Description | | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | -| [`@izumisy/markstage`](packages/markstage/) | CLI & programmatic API — run a standalone preview server with `markstage dev` / `markstage build` | +| [`@izumisy/md-react-preview`](packages/md-react-preview/) | CLI & programmatic API — run a standalone preview server with `mrp dev` / `mrp build` | | [`@izumisy/vite-plugin-react-preview`](packages/vite-plugin-react-preview/) | Vite plugin & utilities — preview block parsing, iframe rendering, standalone preview page generation | | [`@izumisy/vitepress-plugin-react-preview`](packages/vitepress-plugin-react-preview/) | VitePress plugin — live React component previews inside a VitePress site | @@ -14,19 +14,19 @@ A lightweight toolkit for live-previewing React components directly from Markdow | Example | Description | | ------------------------------------------ | -------------------------------------------------------------------- | -| [`example-cli`](examples/cli/) | Standalone preview server using the `@izumisy/markstage` CLI | +| [`example-cli`](examples/cli/) | Standalone preview server using the `@izumisy/md-react-preview` CLI | | [`example-vitepress`](examples/vitepress/) | VitePress integration with `@izumisy/vitepress-plugin-react-preview` | ## Quick Start ```bash -pnpm add -D @izumisy/markstage +pnpm add -D @izumisy/md-react-preview -npx markstage dev # dev server (port 3040) -npx markstage build # static build +npx mrp dev # dev server (port 3040) +npx mrp build # static build ``` -See the [`@izumisy/markstage` README](packages/markstage/) for configuration and usage details. +See the [`@izumisy/md-react-preview` README](packages/md-react-preview/) for configuration and usage details. ## License diff --git a/examples/cli/README.md b/examples/cli/README.md index 7eb3e12..6dfaf7b 100644 --- a/examples/cli/README.md +++ b/examples/cli/README.md @@ -1,6 +1,6 @@ # example-cli -Example project using the `@izumisy/markstage` CLI. +Example project using the `@izumisy/md-react-preview` CLI. ## Commands diff --git a/examples/cli/package.json b/examples/cli/package.json index d73b123..4c1622f 100644 --- a/examples/cli/package.json +++ b/examples/cli/package.json @@ -3,12 +3,12 @@ "private": true, "type": "module", "scripts": { - "dev": "markstage dev", - "build": "markstage build", - "preview": "markstage preview" + "dev": "mrp dev", + "build": "mrp build", + "preview": "mrp preview" }, "dependencies": { - "@izumisy/markstage": "workspace:*", + "@izumisy/md-react-preview": "workspace:*", "@tailor-platform/app-shell": "catalog:", "react": "catalog:", "react-dom": "catalog:" diff --git a/examples/cli/previewer.config.ts b/examples/cli/previewer.config.ts index 173d7e0..aa0b140 100644 --- a/examples/cli/previewer.config.ts +++ b/examples/cli/previewer.config.ts @@ -1,4 +1,4 @@ -import { defineConfig } from "@izumisy/markstage"; +import { defineConfig } from "@izumisy/md-react-preview"; export default defineConfig({ title: "AppShell docs", diff --git a/examples/vitepress/docs/.vitepress/config.ts b/examples/vitepress/docs/.vitepress/config.ts index bfd60c3..86efa25 100644 --- a/examples/vitepress/docs/.vitepress/config.ts +++ b/examples/vitepress/docs/.vitepress/config.ts @@ -1,13 +1,13 @@ import { defineConfig } from "vitepress"; -import { createMarkstagePlugin } from "@izumisy/vitepress-plugin-react-preview"; +import { createMrpPlugin } from "@izumisy/vitepress-plugin-react-preview"; -const markstage = createMarkstagePlugin({ +const mrp = createMrpPlugin({ css: "@tailor-platform/app-shell/styles", }); export default defineConfig({ title: "VitePress Example", - description: "Example of using Markstage preview blocks in VitePress", + description: "Example of using md-react-preview blocks in VitePress", themeConfig: { sidebar: [ @@ -26,11 +26,11 @@ export default defineConfig({ markdown: { config(md) { - md.use(markstage.markdownIt); + md.use(mrp.markdownIt); }, }, vite: { - plugins: [...markstage.vite()], + plugins: [...mrp.vite()], }, }); diff --git a/examples/vitepress/docs/index.md b/examples/vitepress/docs/index.md index 9da4cc7..3ae2531 100644 --- a/examples/vitepress/docs/index.md +++ b/examples/vitepress/docs/index.md @@ -1,7 +1,7 @@ --- layout: home hero: - name: "Markstage + VitePress" + name: "md-react-preview + VitePress" text: "React Component Preview Example" tagline: Live preview of React components inside VitePress using iframe isolation actions: diff --git a/package.json b/package.json index 3d863d6..c2f33da 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "markstage", + "name": "md-react-preview", "private": true, "packageManager": "pnpm@10.24.0", "engines": { diff --git a/packages/markstage/README.md b/packages/md-react-preview/README.md similarity index 87% rename from packages/markstage/README.md rename to packages/md-react-preview/README.md index 6ca71fe..c9225e8 100644 --- a/packages/markstage/README.md +++ b/packages/md-react-preview/README.md @@ -1,21 +1,21 @@ -# @izumisy/markstage +# @izumisy/md-react-preview -CLI and programmatic API for Markstage — a zero-config component previewer for React projects. +CLI and programmatic API for md-react-preview — a zero-config component previewer for React projects. Drop Markdown files into `docs/` with `` ```tsx preview `` fenced blocks and get a Vite-powered dev server with live component previews and syntax-highlighted source code. ## Install ```bash -pnpm add -D @izumisy/markstage +pnpm add -D @izumisy/md-react-preview ``` ## CLI ```bash -npx markstage dev # Start dev server (default port 3040) -npx markstage build # Build static output -npx markstage preview # Preview the production build locally +npx mrp dev # Start dev server (default port 3040) +npx mrp build # Build static output +npx mrp preview # Preview the production build locally ``` ## Writing Previews @@ -77,7 +77,7 @@ Options can be set as `key="value"` pairs or boolean flags in the fence meta: Create a `previewer.config.ts` at your project root: ```ts -import { defineConfig } from "@izumisy/markstage"; +import { defineConfig } from "@izumisy/md-react-preview"; export default defineConfig({ title: "My Component Library", @@ -99,7 +99,7 @@ export default defineConfig({ ## Programmatic API ```ts -import { startDev, runBuild, defineConfig, createPreviewerViteConfig } from "@izumisy/markstage"; +import { startDev, runBuild, defineConfig, createPreviewerViteConfig } from "@izumisy/md-react-preview"; ``` | Export | Description | diff --git a/packages/markstage/app/index.html b/packages/md-react-preview/app/index.html similarity index 96% rename from packages/markstage/app/index.html rename to packages/md-react-preview/app/index.html index caa4834..fa602e6 100644 --- a/packages/markstage/app/index.html +++ b/packages/md-react-preview/app/index.html @@ -3,7 +3,7 @@ - Markstage + md-react-preview