react-router-markdown 0.9.0 → 0.10.0

package/README.md

@@ -1,7 +1,9 @@
 # react-router-markdown
 
-Vite plugin to parse Markdown files as React Router pages. It supports defining React Router's meta
-function returned data, as frontmatter.
+Vite plugin to import Markdown files as React components with frontmatter support. It follows React
+Router's route module conventions, including the default component, `meta`, and `handle` exports,
+but does not depend on React Router. Use it with React Router, any other React framework that
+supports Vite, or a plain React + Vite app.
 
 ## Setup
 
@@ -50,14 +52,14 @@ export default defineConfig({
 
 ### Imports and TypeScript support
 
-In order to TypeScript import `.md` files with type hints, add the following to your `vite.d.ts`
+In order for TypeScript to import `.md` files with type hints, add the following to your `vite.d.ts`
 file:
 
 ```tsx
 /// <reference types="react-router-markdown/references" />
 ```
 
-Optionally, you can also add the following to your `tsconfig.json` file:
+Alternatively, you can add the following to your `tsconfig.json` file:
 
 ```json
 {
@@ -68,3 +70,70 @@ Optionally, you can also add the following to your `tsconfig.json` file:
 ```
 
 Now you can use any `.md` file as a React Router page.
+
+## Example
+
+`app/routes/about.md`:
+
+```md
+---
+title: 'About Us'
+meta:
+  - title: 'About Us - ACME'
+  - name: description
+    content: 'Meta description here'
+  - name: robots
+    content: 'index, follow'
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum venenatis facilisis. Nam sit
+amet finibus lectus.
+
+Nunc lobortis neque magna, id mollis arcu pulvinar ultrices. Aenean mollis dolor nulla. Aliquam
+aliquet tempus ultrices. Integer ac est finibus, efficitur orci faucibus, luctus odio. Vivamus vitae
+venenatis quam, imperdiet rutrum massa.
+```
+
+`app/router.ts`:
+
+```tsx
+import { type RouteConfig, route } from '@react-router/dev/routes'
+
+export default [route('about', './routes/about.md')] satisfies RouteConfig
+```
+
+`app/components/markdown-wrapper.tsx`:
+
+```tsx
+import { cn } from '@/lib/utils'
+
+export default function MarkdownWrapper({
+  children,
+  frontmatter,
+}: {
+  children: React.ReactNode
+  frontmatter: {
+    title?: string
+    subtitle?: string
+  }
+}) {
+  const hasHeader = frontmatter.title || frontmatter.subtitle
+  return (
+    <article className={cn('prose prose-slate dark:prose-invert max-w-none')}>
+      {hasHeader && (
+        <header className="mb-8 space-y-4">
+          {frontmatter.title && (
+            <h1 className={cn('text-4xl font-bold tracking-tight lg:text-5xl')}>
+              {frontmatter.title}
+            </h1>
+          )}
+          {frontmatter.subtitle && (
+            <p className="text-muted-foreground text-xl leading-7">{frontmatter.subtitle}</p>
+          )}
+        </header>
+      )}
+      <div className="space-y-6">{children}</div>
+    </article>
+  )
+}
+```

package/dist/index.d.mts

@@ -8,12 +8,6 @@ type MarkdownPageProps = {
     frontmatter: Record<string, unknown>;
   }> | null;
 };
-declare function MarkdownPage({
-  parseHtml,
-  rawContent,
-  frontmatter,
-  Wrapper
-}: MarkdownPageProps): React.ReactElement;
+export declare function MarkdownPage({ parseHtml, rawContent, frontmatter, Wrapper }: MarkdownPageProps): React.ReactElement;
 //#endregion
-export { MarkdownPage };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/lib/markdow-page.ts"],"sourcesContent":["import { raw } from 'hast-util-raw'\nimport ReactMarkdown from 'react-markdown'\nimport { jsx } from 'react/jsx-runtime'\n\ntype HastNodes = Parameters<typeof raw>[0]\ntype HastOptions = NonNullable<Parameters<typeof raw>[1]>\ntype MarkdownPageProps = {\n  parseHtml: boolean\n  rawContent: string\n  frontmatter: Record<string, unknown>\n  Wrapper: React.ComponentType<{\n    children: React.ReactNode\n    frontmatter: Record<string, unknown>\n  }> | null\n}\n\nfunction rehypeRaw(options: HastOptions) {\n  return (tree: HastNodes, file: HastOptions['file']) => raw(tree, { ...options, file })\n}\n\nexport function MarkdownPage({\n  parseHtml,\n  rawContent,\n  frontmatter,\n  Wrapper,\n}: MarkdownPageProps): React.ReactElement {\n  const rehypePlugins = parseHtml ? [rehypeRaw] : []\n  const mdElement = jsx(ReactMarkdown, { children: rawContent, rehypePlugins: rehypePlugins })\n\n  if (!Wrapper) {\n    return mdElement\n  }\n\n  return jsx(Wrapper, {\n    children: mdElement,\n    frontmatter: frontmatter,\n  })\n}\n"],"mappings":";;;;AAgBA,SAAS,UAAU,SAAsB;AACvC,SAAQ,MAAiB,SAA8B,IAAI,MAAM;EAAE,GAAG;EAAS;EAAM,CAAC;;AAGxF,SAAgB,aAAa,EAC3B,WACA,YACA,aACA,WACwC;CAExC,MAAM,YAAY,IAAI,eAAe;EAAE,UAAU;EAAY,eADvC,YAAY,CAAC,UAAU,GAAG,EAAE;EACyC,CAAC;AAE5F,KAAI,CAAC,QACH,QAAO;AAGT,QAAO,IAAI,SAAS;EAClB,UAAU;EACG;EACd,CAAC"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/lib/markdow-page.ts"],"sourcesContent":["import { raw } from 'hast-util-raw'\nimport ReactMarkdown from 'react-markdown'\nimport { jsx } from 'react/jsx-runtime'\n\ntype HastNodes = Parameters<typeof raw>[0]\ntype HastOptions = NonNullable<Parameters<typeof raw>[1]>\ntype MarkdownPageProps = {\n  parseHtml: boolean\n  rawContent: string\n  frontmatter: Record<string, unknown>\n  Wrapper: React.ComponentType<{\n    children: React.ReactNode\n    frontmatter: Record<string, unknown>\n  }> | null\n}\n\nfunction rehypeRaw(options: HastOptions) {\n  return (tree: HastNodes, file: HastOptions['file']) => raw(tree, { ...options, file })\n}\n\nexport function MarkdownPage({\n  parseHtml,\n  rawContent,\n  frontmatter,\n  Wrapper,\n}: MarkdownPageProps): React.ReactElement {\n  const rehypePlugins = parseHtml ? [rehypeRaw] : []\n  const mdElement = jsx(ReactMarkdown, { children: rawContent, rehypePlugins: rehypePlugins })\n\n  if (!Wrapper) {\n    return mdElement\n  }\n\n  return jsx(Wrapper, {\n    children: mdElement,\n    frontmatter: frontmatter,\n  })\n}\n"],"mappings":";;;;AAgBA,SAAS,UAAU,SAAsB;CACvC,QAAQ,MAAiB,SAA8B,IAAI,MAAM;EAAE,GAAG;EAAS;CAAK,CAAC;AACvF;AAEA,SAAgB,aAAa,EAC3B,WACA,YACA,aACA,WACwC;CAExC,MAAM,YAAY,IAAI,eAAe;EAAE,UAAU;EAAY,eADvC,YAAY,CAAC,SAAS,IAAI,CAAC;CACyC,CAAC;CAE3F,IAAI,CAAC,SACH,OAAO;CAGT,OAAO,IAAI,SAAS;EAClB,UAAU;EACG;CACf,CAAC;AACH"}

package/dist/vite.d.mts

@@ -1,5 +1,4 @@
 import { Plugin } from "vite";
-
 //#region src/lib/vite-plugin.d.ts
 type ReactRouterMarkdownOptions<D = Record<string, any>> = {
   /**

package/dist/vite.mjs

@@ -8,12 +8,14 @@ function reactRouterMarkdown(options = {}) {
 		enforce: "pre",
 		transform(code, id) {
 			if (!(id.split("?", 1)[0] ?? id).endsWith(".md")) return null;
-			const { data, content } = matter(beforeTransform(code));
+			const transformedCode = beforeTransform(code);
+			const { data, content } = matter(transformedCode);
 			const [transformedContent, transformedFrontmatter] = afterTransform(content, data || {});
 			const handleData = handleDataFn(transformedContent, transformedFrontmatter);
 			return {
 				code: [
-					`import { MarkdownPage } from 'react-router-markdown';`,
+					"import { MarkdownPage } from 'react-router-markdown';",
+					"import { jsx } from 'react/jsx-runtime';",
 					wrapperModule ? `import Wrapper from ${JSON.stringify(wrapperModule)};` : "const Wrapper = null;",
 					"",
 					`export const frontmatter = ${JSON.stringify(transformedFrontmatter || {})};`,
@@ -23,7 +25,7 @@ function reactRouterMarkdown(options = {}) {
 					`export const handle = ${JSON.stringify(handleData)};`,
 					"",
 					`function Page() {
-            return _jsx(MarkdownPage, {
+            return jsx(MarkdownPage, {
               Wrapper,
               parseHtml: ${parseHtml ? "true" : "false"},
               rawContent: rawContent,

package/dist/vite.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"vite.mjs","names":[],"sources":["../src/lib/vite-plugin.ts","../src/vite.ts"],"sourcesContent":["import matter from 'gray-matter'\nimport { type Plugin } from 'vite'\n\nexport type ReactRouterMarkdownOptions<D = Record<string, any>> = {\n  /**\n   * Module specifier to import a wrapper component from.\n   * Must default-export a React component.\n   *\n   * Example: '#/components/markdown/wrapper'\n   * @default undefined\n   */\n  wrapperModule?: string\n  /**\n   * If true, any HTML tags in the markdown content will be parsed as HTML instead of escaped.\n   * @default false\n   */\n  parseHtml?: boolean\n  /**\n   * A function to return the handle data to be used for each page.\n   * It accepts the post-processed content and frontmatter as arguments.\n   * @default undefined\n   */\n  handleData?: (content: string, frontmatter: Record<string, any>) => Partial<D>\n\n  /**\n   * A function to transform the raw MD file content before it is parsed.\n   * @default undefined\n   */\n  beforeTransform?: (content: string) => string\n\n  /**\n   * A function to transform the parsed MD content and/or frontmatter after they are parsed.\n   * It should return back the transformed content and frontmatter.\n   * @default undefined\n   */\n  afterTransform?: (\n    content: string,\n    frontmatter: Record<string, any>,\n  ) => [string, Record<string, any>]\n}\n\nexport function reactRouterMarkdown<D = Record<string, any>>(\n  options: ReactRouterMarkdownOptions<D> = {},\n): Plugin {\n  const {\n    wrapperModule,\n    parseHtml = false,\n    handleData: handleDataFn = () => ({}) as Partial<D>,\n    beforeTransform = (content) => content,\n    afterTransform = (content, frontmatter) => [content, frontmatter],\n  }: ReactRouterMarkdownOptions<D> = options\n\n  return {\n    name: 'react-router-markdown',\n    enforce: 'pre',\n\n    transform(code, id) {\n      const filePath = id.split('?', 1)[0] ?? id\n      if (!filePath.endsWith('.md')) return null\n\n      const transformedCode = beforeTransform(code)\n      const { data, content } = matter(transformedCode)\n      const [transformedContent, transformedFrontmatter] = afterTransform(content, data || {})\n      const handleData = handleDataFn(transformedContent, transformedFrontmatter)\n\n      return {\n        code: [\n          `import { MarkdownPage } from 'react-router-markdown';`,\n          wrapperModule\n            ? `import Wrapper from ${JSON.stringify(wrapperModule)};`\n            : 'const Wrapper = null;',\n          '',\n          `export const frontmatter = ${JSON.stringify(transformedFrontmatter || {})};`,\n          `export const rawContent = ${JSON.stringify(transformedContent || '')};`,\n          '',\n          'export const meta = () => frontmatter.meta || [];',\n          `export const handle = ${JSON.stringify(handleData)};`,\n          '',\n          `function Page() {\n            return _jsx(MarkdownPage, {\n              Wrapper,\n              parseHtml: ${parseHtml ? 'true' : 'false'},\n              rawContent: rawContent,\n              frontmatter: frontmatter,\n            })\n          }\n          export default Page;\n          `,\n        ].join('\\n'),\n        map: null,\n      }\n    },\n  }\n}\n","export { type ReactRouterMarkdownOptions } from './lib/vite-plugin'\n\nimport { reactRouterMarkdown } from './lib/vite-plugin'\n\nexport default reactRouterMarkdown\n"],"mappings":";;;AAyCA,SAAgB,oBACd,UAAyC,EAAE,EACnC;CACR,MAAM,EACJ,eACA,YAAY,OACZ,YAAY,sBAAsB,EAAE,GACpC,mBAAmB,YAAY,SAC/B,kBAAkB,SAAS,gBAAgB,CAAC,SAAS,YAAY,KAChC;AAEnC,QAAO;EACL,MAAM;EACN,SAAS;EAET,UAAU,MAAM,IAAI;AAElB,OAAI,EADa,GAAG,MAAM,KAAK,EAAE,CAAC,MAAM,IAC1B,SAAS,MAAM,CAAE,QAAO;GAGtC,MAAM,EAAE,MAAM,YAAY,OADF,gBAAgB,KAAK,CACI;GACjD,MAAM,CAAC,oBAAoB,0BAA0B,eAAe,SAAS,QAAQ,EAAE,CAAC;GACxF,MAAM,aAAa,aAAa,oBAAoB,uBAAuB;AAE3E,UAAO;IACL,MAAM;KACJ;KACA,gBACI,uBAAuB,KAAK,UAAU,cAAc,CAAC,KACrD;KACJ;KACA,8BAA8B,KAAK,UAAU,0BAA0B,EAAE,CAAC,CAAC;KAC3E,6BAA6B,KAAK,UAAU,sBAAsB,GAAG,CAAC;KACtE;KACA;KACA,yBAAyB,KAAK,UAAU,WAAW,CAAC;KACpD;KACA;;;2BAGiB,YAAY,SAAS,QAAQ;;;;;;;KAO/C,CAAC,KAAK,KAAK;IACZ,KAAK;IACN;;EAEJ;;;;ACxFH,IAAA,eAAe"}
+{"version":3,"file":"vite.mjs","names":[],"sources":["../src/lib/vite-plugin.ts","../src/vite.ts"],"sourcesContent":["import matter from 'gray-matter'\nimport { type Plugin } from 'vite'\n\nexport type ReactRouterMarkdownOptions<D = Record<string, any>> = {\n  /**\n   * Module specifier to import a wrapper component from.\n   * Must default-export a React component.\n   *\n   * Example: '#/components/markdown/wrapper'\n   * @default undefined\n   */\n  wrapperModule?: string\n  /**\n   * If true, any HTML tags in the markdown content will be parsed as HTML instead of escaped.\n   * @default false\n   */\n  parseHtml?: boolean\n  /**\n   * A function to return the handle data to be used for each page.\n   * It accepts the post-processed content and frontmatter as arguments.\n   * @default undefined\n   */\n  handleData?: (content: string, frontmatter: Record<string, any>) => Partial<D>\n\n  /**\n   * A function to transform the raw MD file content before it is parsed.\n   * @default undefined\n   */\n  beforeTransform?: (content: string) => string\n\n  /**\n   * A function to transform the parsed MD content and/or frontmatter after they are parsed.\n   * It should return back the transformed content and frontmatter.\n   * @default undefined\n   */\n  afterTransform?: (\n    content: string,\n    frontmatter: Record<string, any>,\n  ) => [string, Record<string, any>]\n}\n\nexport function reactRouterMarkdown<D = Record<string, any>>(\n  options: ReactRouterMarkdownOptions<D> = {},\n): Plugin {\n  const {\n    wrapperModule,\n    parseHtml = false,\n    handleData: handleDataFn = () => ({}) as Partial<D>,\n    beforeTransform = (content) => content,\n    afterTransform = (content, frontmatter) => [content, frontmatter],\n  }: ReactRouterMarkdownOptions<D> = options\n\n  return {\n    name: 'react-router-markdown',\n    enforce: 'pre',\n\n    transform(code, id) {\n      const filePath = id.split('?', 1)[0] ?? id\n      if (!filePath.endsWith('.md')) return null\n\n      const transformedCode = beforeTransform(code)\n      const { data, content } = matter(transformedCode)\n      const [transformedContent, transformedFrontmatter] = afterTransform(content, data || {})\n      const handleData = handleDataFn(transformedContent, transformedFrontmatter)\n\n      return {\n        code: [\n          \"import { MarkdownPage } from 'react-router-markdown';\",\n          \"import { jsx } from 'react/jsx-runtime';\",\n          wrapperModule\n            ? `import Wrapper from ${JSON.stringify(wrapperModule)};`\n            : 'const Wrapper = null;',\n          '',\n          `export const frontmatter = ${JSON.stringify(transformedFrontmatter || {})};`,\n          `export const rawContent = ${JSON.stringify(transformedContent || '')};`,\n          '',\n          'export const meta = () => frontmatter.meta || [];',\n          `export const handle = ${JSON.stringify(handleData)};`,\n          '',\n          `function Page() {\n            return jsx(MarkdownPage, {\n              Wrapper,\n              parseHtml: ${parseHtml ? 'true' : 'false'},\n              rawContent: rawContent,\n              frontmatter: frontmatter,\n            })\n          }\n          export default Page;\n          `,\n        ].join('\\n'),\n        map: null,\n      }\n    },\n  }\n}\n","export { type ReactRouterMarkdownOptions } from './lib/vite-plugin'\n\nimport { reactRouterMarkdown } from './lib/vite-plugin'\n\nexport default reactRouterMarkdown\n"],"mappings":";;;AAyCA,SAAgB,oBACd,UAAyC,CAAC,GAClC;CACR,MAAM,EACJ,eACA,YAAY,OACZ,YAAY,sBAAsB,CAAC,IACnC,mBAAmB,YAAY,SAC/B,kBAAkB,SAAS,gBAAgB,CAAC,SAAS,WAAW,MAC/B;CAEnC,OAAO;EACL,MAAM;EACN,SAAS;EAET,UAAU,MAAM,IAAI;GAElB,IAAI,EADa,GAAG,MAAM,KAAK,CAAC,CAAC,CAAC,MAAM,GAAA,CAC1B,SAAS,KAAK,GAAG,OAAO;GAEtC,MAAM,kBAAkB,gBAAgB,IAAI;GAC5C,MAAM,EAAE,MAAM,YAAY,OAAO,eAAe;GAChD,MAAM,CAAC,oBAAoB,0BAA0B,eAAe,SAAS,QAAQ,CAAC,CAAC;GACvF,MAAM,aAAa,aAAa,oBAAoB,sBAAsB;GAE1E,OAAO;IACL,MAAM;KACJ;KACA;KACA,gBACI,uBAAuB,KAAK,UAAU,aAAa,EAAE,KACrD;KACJ;KACA,8BAA8B,KAAK,UAAU,0BAA0B,CAAC,CAAC,EAAE;KAC3E,6BAA6B,KAAK,UAAU,sBAAsB,EAAE,EAAE;KACtE;KACA;KACA,yBAAyB,KAAK,UAAU,UAAU,EAAE;KACpD;KACA;;;2BAGiB,YAAY,SAAS,QAAQ;;;;;;;IAOhD,CAAC,CAAC,KAAK,IAAI;IACX,KAAK;GACP;EACF;CACF;AACF;;;AC1FA,IAAA,eAAe"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-markdown",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Vite plugin to parse and use markdown files as React Router pages, including frontmatter support.",
   "keywords": [
     "markdown",
@@ -44,6 +44,7 @@
     "format": "oxfmt --write .",
     "format:check": "oxfmt --check .",
     "lint": "pnpm typecheck && pnpm publint",
+    "prepublishOnly": "pnpm build",
     "publint": "publint",
     "test": "vitest --run",
     "test:coverage": "vitest --run --coverage",
@@ -56,20 +57,20 @@
     "react-markdown": "^10.1.0"
   },
   "devDependencies": {
-    "@types/node": "^25.5.0",
-    "@types/react": "^19.2.14",
-    "@vitest/coverage-v8": "^4.1.2",
-    "oxfmt": "^0.42.0",
-    "publint": "^0.3.18",
-    "react": "^19.2.4",
-    "tsdown": "^0.21.7",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.2"
+    "@types/node": "^26.5.1",
+    "@types/react": "^19.3.0",
+    "@vitest/coverage-v8": "^5.0.0",
+    "oxfmt": "^0.67.0",
+    "publint": "^0.3.24",
+    "react": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.0",
+    "vitest": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^19.2.4",
-    "vite": "^7.0.0 || ^8.0.0"
+    "vite": "^8.0.0"
   },
-  "packageManager": "pnpm@10.33.0"
+  "packageManager": "pnpm@12.4.1"
 }