@lithent/lithent-mdx 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 superlucky84
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# @lithent/lithent-mdx
+
+Official Vite plugin that tailors the MDX toolchain for Lithent.
+
+## Features
+- **Lithent-focused JSX config**: Sets `jsxImportSource` so MDX JSX renders through the Lithent runtime.
+- **Automatic `mount()` wrapping**: Wraps the MDX default export with Lithent `mount()` to preserve state during HMR.
+- **Configurable pipeline**: Pass any `@mdx-js/rollup` options via `mdxOptions`.
+- **TypeScript ready**: Includes type definitions across the package.
+
+## Installation
+
+```bash
+pnpm add -D @lithent/lithent-mdx @mdx-js/rollup
+```
+
+Required peer dependencies:
+- `lithent` `^1.20.0`
+- `vite` `^5.0.0`
+- `@lithent/lithent-vite` `^0.2.0` for end-to-end HMR support
+
+## Usage
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import lithentMdx from '@lithent/lithent-mdx';
+import lithentVite from '@lithent/lithent-vite';
+
+export default defineConfig({
+  plugins: [
+    lithentMdx({
+      mdxOptions: {
+        remarkPlugins: [],
+        rehypePlugins: [],
+      },
+    }),
+    lithentVite(),
+  ],
+});
+```
+
+With the plugin enabled, `.mdx` files are transformed into Lithent components and wrapped with `mount()`. Adjust `jsxImportSource` if you need a different Lithent entry point (for example `lithent/helper`).
+
+## Development & Testing
+
+```bash
+pnpm --filter @lithent/lithent-mdx dev   # Launch MDX playground
+pnpm --filter @lithent/lithent-mdx test  # Run Vitest on the transform helpers
+```
+
+Open `http://localhost:5173/html/index.html` after starting the dev server to inspect the live MDX example.

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { lithentMdx, default } from './plugin';
+export type { LithentMdxPluginOptions } from './plugin';
+export { wrapMdxModule, MDX_WRAP_SENTINEL } from './transform';
+export type { MdxWrapResult } from './transform';

package/dist/index.mjs

@@ -0,0 +1,67 @@
+import x from "@mdx-js/rollup";
+const c = "/* __lithentMdxWrapped */", a = (e) => {
+  const t = f(e), u = t !== e;
+  if (t.includes(c))
+    return { code: t, modified: u };
+  const r = /export\s+default\s+function\s+([A-Za-z0-9_]+)/m.exec(t);
+  if (!r || r.index === void 0)
+    return { code: t, modified: u };
+  const n = r[1], o = r.index, s = o + r[0].length;
+  let i = `${t.slice(0, o)}function ${n}${t.slice(s)}`;
+  /import\s+{[^}]*\bmount\b[^}]*}\s+from\s+['"]lithent['"]/.test(i) || (i = m(i, `import { mount } from 'lithent';
+`));
+  const l = `__LithentMdxComponent_${n}`, d = `
+${c}
+const ${l} = mount((_renew, props) => {
+  return () => ${n}(props ?? {});
+});
+export default ${l};
+`;
+  return i = `${i}${d}`, { code: i, modified: !0 };
+}, f = (e) => {
+  const t = (n, o) => n.replace(
+    new RegExp(`^(\\s*)(?:export\\s+)?function\\s+${o}`, "gm"),
+    (s, i) => s.trimStart().startsWith("export ") ? s : `${i}export function ${o}`
+  ), u = (n, o) => n.replace(
+    new RegExp(`^(\\s*)(?:export\\s+)?function\\s+${o}`, "gm"),
+    (s, i) => s.trimStart().startsWith("export default") ? s : `${i}export default function ${o}`
+  ), p = t(e, "_createMdxContent");
+  return u(p, "MDXContent");
+}, m = (e, t) => {
+  const u = /^(import[\s\S]*?from\s+['"][^'"]+['"]\s*;[ \t]*\n?)/gm;
+  let p = null, r;
+  for (; r = u.exec(e); )
+    p = r;
+  if (p) {
+    const n = p.index + p[0].length;
+    return `${e.slice(0, n)}${t}${e.slice(n)}`;
+  }
+  return `${t}${e}`;
+}, g = (e = {}) => {
+  const t = e.jsxImportSource ?? "lithent";
+  return [x({
+    jsxImportSource: t,
+    ...e.mdxOptions
+  }), {
+    name: "lithent:mdx-wrapper",
+    enforce: void 0,
+    // normal - runs after mdxPlugin in array order
+    transform(r, n) {
+      const [o] = n.split("?", 1);
+      if (!/\.mdx$/i.test(o))
+        return null;
+      const s = a(r);
+      return s.modified ? {
+        code: s.code,
+        map: null
+      } : null;
+    }
+  }];
+};
+export {
+  c as MDX_WRAP_SENTINEL,
+  g as default,
+  g as lithentMdx,
+  a as wrapMdxModule
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/transform.ts","../src/plugin.ts"],"sourcesContent":["export interface MdxWrapResult {\n  code: string;\n  modified: boolean;\n}\n\nexport const MDX_WRAP_SENTINEL = '/* __lithentMdxWrapped */';\n\nexport const wrapMdxModule = (code: string): MdxWrapResult => {\n  const fixedExports = wrapMdxExports(code);\n  const exportsModified = fixedExports !== code;\n\n  if (fixedExports.includes(MDX_WRAP_SENTINEL)) {\n    return { code: fixedExports, modified: exportsModified };\n  }\n\n  const defaultExportRegex = /export\\s+default\\s+function\\s+([A-Za-z0-9_]+)/m;\n  const defaultExportMatch = defaultExportRegex.exec(fixedExports);\n\n  if (!defaultExportMatch || defaultExportMatch.index === undefined) {\n    return { code: fixedExports, modified: exportsModified };\n  }\n\n  const fnName = defaultExportMatch[1];\n\n  const start = defaultExportMatch.index;\n  const end = start + defaultExportMatch[0].length;\n  let updated = `${fixedExports.slice(0, start)}function ${fnName}${fixedExports.slice(end)}`;\n\n  // Ensure mount import exists\n  const hasMountImport =\n    /import\\s+{[^}]*\\bmount\\b[^}]*}\\s+from\\s+['\"]lithent['\"]/.test(updated);\n\n  if (!hasMountImport) {\n    updated = insertImportString(updated, `import { mount } from 'lithent';\\n`);\n  }\n\n  const wrapperVar = `__LithentMdxComponent_${fnName}`;\n  const wrapperSnippet = `\n${MDX_WRAP_SENTINEL}\nconst ${wrapperVar} = mount((_renew, props) => {\n  return () => ${fnName}(props ?? {});\n});\nexport default ${wrapperVar};\n`;\n\n  updated = `${updated}${wrapperSnippet}`;\n\n  return { code: updated, modified: true };\n};\n\nconst wrapMdxExports = (code: string): string => {\n  const ensureNamedExport = (source: string, fnName: string): string =>\n    source.replace(\n      new RegExp(`^(\\\\s*)(?:export\\\\s+)?function\\\\s+${fnName}`, 'gm'),\n      (match, leading) => {\n        if (match.trimStart().startsWith('export ')) {\n          return match;\n        }\n        return `${leading}export function ${fnName}`;\n      }\n    );\n\n  const ensureDefaultExport = (source: string, fnName: string): string =>\n    source.replace(\n      new RegExp(`^(\\\\s*)(?:export\\\\s+)?function\\\\s+${fnName}`, 'gm'),\n      (match, leading) => {\n        if (match.trimStart().startsWith('export default')) {\n          return match;\n        }\n        return `${leading}export default function ${fnName}`;\n      }\n    );\n\n  const withNamed = ensureNamedExport(code, '_createMdxContent');\n  const withDefault = ensureDefaultExport(withNamed, 'MDXContent');\n  return withDefault;\n};\n\nconst insertImportString = (source: string, statement: string): string => {\n  const importRegex = /^(import[\\s\\S]*?from\\s+['\"][^'\"]+['\"]\\s*;[ \\t]*\\n?)/gm;\n  let lastMatch: RegExpExecArray | null = null;\n  let match: RegExpExecArray | null;\n\n  while ((match = importRegex.exec(source))) {\n    lastMatch = match;\n  }\n\n  if (lastMatch) {\n    const insertPos = lastMatch.index + lastMatch[0].length;\n    return `${source.slice(0, insertPos)}${statement}${source.slice(insertPos)}`;\n  }\n\n  return `${statement}${source}`;\n};\n","import type { Plugin, PluginOption } from 'vite';\nimport mdxRollup from '@mdx-js/rollup';\nimport { wrapMdxModule } from './transform';\n\nexport interface LithentMdxPluginOptions {\n  /**\n   * MDX plugin options to pass to @mdx-js/rollup\n   */\n  mdxOptions?: Record<string, unknown>;\n\n  /**\n   * JSX import source for MDX files\n   * @default 'lithent'\n   */\n  jsxImportSource?: string;\n}\n\nexport const lithentMdx = (\n  options: LithentMdxPluginOptions = {}\n): PluginOption => {\n  const jsxImportSource = options.jsxImportSource ?? 'lithent';\n\n  // Create the MDX rollup plugin with Lithent-specific JSX settings\n  const mdxPlugin = mdxRollup({\n    jsxImportSource,\n    ...options.mdxOptions,\n  });\n\n  // Create the wrapper plugin that adds mount() wrapping\n  const wrapperPlugin: Plugin = {\n    name: 'lithent:mdx-wrapper',\n    enforce: undefined, // normal - runs after mdxPlugin in array order\n\n    transform(code, id) {\n      const [filepath] = id.split('?', 1);\n\n      // Only process .mdx files\n      if (!/\\.mdx$/i.test(filepath)) {\n        return null;\n      }\n\n      // Wrap MDXContent with mount() and add export default\n      const result = wrapMdxModule(code);\n\n      if (!result.modified) {\n        return null;\n      }\n\n      return {\n        code: result.code,\n        map: null,\n      };\n    },\n  };\n\n  // Return both plugins as an array\n  // Order matters: mdxPlugin first (MDX → JSX), then wrapperPlugin (add mount())\n  return [mdxPlugin, wrapperPlugin];\n};\n\nexport default lithentMdx;\n"],"names":["MDX_WRAP_SENTINEL","wrapMdxModule","code","fixedExports","wrapMdxExports","exportsModified","defaultExportMatch","fnName","start","end","updated","insertImportString","wrapperVar","wrapperSnippet","ensureNamedExport","source","match","leading","ensureDefaultExport","withNamed","statement","importRegex","lastMatch","insertPos","lithentMdx","options","jsxImportSource","mdxRollup","id","filepath","result"],"mappings":";AAKO,MAAMA,IAAoB,6BAEpBC,IAAgB,CAACC,MAAgC;AACtD,QAAAC,IAAeC,EAAeF,CAAI,GAClCG,IAAkBF,MAAiBD;AAErC,MAAAC,EAAa,SAASH,CAAiB;AACzC,WAAO,EAAE,MAAMG,GAAc,UAAUE,EAAgB;AAInD,QAAAC,IADqB,iDACmB,KAAKH,CAAY;AAE/D,MAAI,CAACG,KAAsBA,EAAmB,UAAU;AACtD,WAAO,EAAE,MAAMH,GAAc,UAAUE,EAAgB;AAGnD,QAAAE,IAASD,EAAmB,CAAC,GAE7BE,IAAQF,EAAmB,OAC3BG,IAAMD,IAAQF,EAAmB,CAAC,EAAE;AAC1C,MAAII,IAAU,GAAGP,EAAa,MAAM,GAAGK,CAAK,CAAC,YAAYD,CAAM,GAAGJ,EAAa,MAAMM,CAAG,CAAC;AAMzF,EAFE,0DAA0D,KAAKC,CAAO,MAGtEA,IAAUC,EAAmBD,GAAS;AAAA,CAAoC;AAGtE,QAAAE,IAAa,yBAAyBL,CAAM,IAC5CM,IAAiB;AAAA,EACvBb,CAAiB;AAAA,QACXY,CAAU;AAAA,iBACDL,CAAM;AAAA;AAAA,iBAENK,CAAU;AAAA;AAGf,SAAAF,IAAA,GAAGA,CAAO,GAAGG,CAAc,IAE9B,EAAE,MAAMH,GAAS,UAAU,GAAK;AACzC,GAEMN,IAAiB,CAACF,MAAyB;AAC/C,QAAMY,IAAoB,CAACC,GAAgBR,MACzCQ,EAAO;AAAA,IACL,IAAI,OAAO,qCAAqCR,CAAM,IAAI,IAAI;AAAA,IAC9D,CAACS,GAAOC,MACFD,EAAM,UAAA,EAAY,WAAW,SAAS,IACjCA,IAEF,GAAGC,CAAO,mBAAmBV,CAAM;AAAA,EAC5C,GAGEW,IAAsB,CAACH,GAAgBR,MAC3CQ,EAAO;AAAA,IACL,IAAI,OAAO,qCAAqCR,CAAM,IAAI,IAAI;AAAA,IAC9D,CAACS,GAAOC,MACFD,EAAM,UAAA,EAAY,WAAW,gBAAgB,IACxCA,IAEF,GAAGC,CAAO,2BAA2BV,CAAM;AAAA,EACpD,GAGEY,IAAYL,EAAkBZ,GAAM,mBAAmB;AAEtD,SADagB,EAAoBC,GAAW,YAAY;AAEjE,GAEMR,IAAqB,CAACI,GAAgBK,MAA8B;AACxE,QAAMC,IAAc;AACpB,MAAIC,IAAoC,MACpCN;AAEJ,SAAQA,IAAQK,EAAY,KAAKN,CAAM;AACzB,IAAAO,IAAAN;AAGd,MAAIM,GAAW;AACb,UAAMC,IAAYD,EAAU,QAAQA,EAAU,CAAC,EAAE;AACjD,WAAO,GAAGP,EAAO,MAAM,GAAGQ,CAAS,CAAC,GAAGH,CAAS,GAAGL,EAAO,MAAMQ,CAAS,CAAC;AAAA,EAC5E;AAEO,SAAA,GAAGH,CAAS,GAAGL,CAAM;AAC9B,GC5EaS,IAAa,CACxBC,IAAmC,OAClB;AACX,QAAAC,IAAkBD,EAAQ,mBAAmB;AAqC5C,SAAA,CAlCWE,EAAU;AAAA,IAC1B,iBAAAD;AAAA,IACA,GAAGD,EAAQ;AAAA,EAAA,CACZ,GAG6B;AAAA,IAC5B,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,IAET,UAAUvB,GAAM0B,GAAI;AAClB,YAAM,CAACC,CAAQ,IAAID,EAAG,MAAM,KAAK,CAAC;AAGlC,UAAI,CAAC,UAAU,KAAKC,CAAQ;AACnB,eAAA;AAIH,YAAAC,IAAS7B,EAAcC,CAAI;AAE7B,aAAC4B,EAAO,WAIL;AAAA,QACL,MAAMA,EAAO;AAAA,QACb,KAAK;AAAA,MAAA,IALE;AAAA,IAOX;AAAA,EAAA,CAK8B;AAClC;"}

package/dist/index.umd.js

@@ -0,0 +1,9 @@
+(function(o,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("@mdx-js/rollup")):typeof define=="function"&&define.amd?define(["exports","@mdx-js/rollup"],l):(o=typeof globalThis<"u"?globalThis:o||self,l(o.lithentMdx={},o.mdxRollup))})(this,function(o,l){"use strict";const c="/* __lithentMdxWrapped */",f=e=>{const t=m(e),p=t!==e;if(t.includes(c))return{code:t,modified:p};const r=/export\s+default\s+function\s+([A-Za-z0-9_]+)/m.exec(t);if(!r||r.index===void 0)return{code:t,modified:p};const n=r[1],i=r.index,s=i+r[0].length;let u=`${t.slice(0,i)}function ${n}${t.slice(s)}`;/import\s+{[^}]*\bmount\b[^}]*}\s+from\s+['"]lithent['"]/.test(u)||(u=h(u,`import { mount } from 'lithent';
+`));const a=`__LithentMdxComponent_${n}`,$=`
+${c}
+const ${a} = mount((_renew, props) => {
+  return () => ${n}(props ?? {});
+});
+export default ${a};
+`;return u=`${u}${$}`,{code:u,modified:!0}},m=e=>{const t=(n,i)=>n.replace(new RegExp(`^(\\s*)(?:export\\s+)?function\\s+${i}`,"gm"),(s,u)=>s.trimStart().startsWith("export ")?s:`${u}export function ${i}`),p=(n,i)=>n.replace(new RegExp(`^(\\s*)(?:export\\s+)?function\\s+${i}`,"gm"),(s,u)=>s.trimStart().startsWith("export default")?s:`${u}export default function ${i}`),d=t(e,"_createMdxContent");return p(d,"MDXContent")},h=(e,t)=>{const p=/^(import[\s\S]*?from\s+['"][^'"]+['"]\s*;[ \t]*\n?)/gm;let d=null,r;for(;r=p.exec(e);)d=r;if(d){const n=d.index+d[0].length;return`${e.slice(0,n)}${t}${e.slice(n)}`}return`${t}${e}`},x=(e={})=>{const t=e.jsxImportSource??"lithent";return[l({jsxImportSource:t,...e.mdxOptions}),{name:"lithent:mdx-wrapper",enforce:void 0,transform(r,n){const[i]=n.split("?",1);if(!/\.mdx$/i.test(i))return null;const s=f(r);return s.modified?{code:s.code,map:null}:null}}]};o.MDX_WRAP_SENTINEL=c,o.default=x,o.lithentMdx=x,o.wrapMdxModule=f,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/transform.ts","../src/plugin.ts"],"sourcesContent":["export interface MdxWrapResult {\n  code: string;\n  modified: boolean;\n}\n\nexport const MDX_WRAP_SENTINEL = '/* __lithentMdxWrapped */';\n\nexport const wrapMdxModule = (code: string): MdxWrapResult => {\n  const fixedExports = wrapMdxExports(code);\n  const exportsModified = fixedExports !== code;\n\n  if (fixedExports.includes(MDX_WRAP_SENTINEL)) {\n    return { code: fixedExports, modified: exportsModified };\n  }\n\n  const defaultExportRegex = /export\\s+default\\s+function\\s+([A-Za-z0-9_]+)/m;\n  const defaultExportMatch = defaultExportRegex.exec(fixedExports);\n\n  if (!defaultExportMatch || defaultExportMatch.index === undefined) {\n    return { code: fixedExports, modified: exportsModified };\n  }\n\n  const fnName = defaultExportMatch[1];\n\n  const start = defaultExportMatch.index;\n  const end = start + defaultExportMatch[0].length;\n  let updated = `${fixedExports.slice(0, start)}function ${fnName}${fixedExports.slice(end)}`;\n\n  // Ensure mount import exists\n  const hasMountImport =\n    /import\\s+{[^}]*\\bmount\\b[^}]*}\\s+from\\s+['\"]lithent['\"]/.test(updated);\n\n  if (!hasMountImport) {\n    updated = insertImportString(updated, `import { mount } from 'lithent';\\n`);\n  }\n\n  const wrapperVar = `__LithentMdxComponent_${fnName}`;\n  const wrapperSnippet = `\n${MDX_WRAP_SENTINEL}\nconst ${wrapperVar} = mount((_renew, props) => {\n  return () => ${fnName}(props ?? {});\n});\nexport default ${wrapperVar};\n`;\n\n  updated = `${updated}${wrapperSnippet}`;\n\n  return { code: updated, modified: true };\n};\n\nconst wrapMdxExports = (code: string): string => {\n  const ensureNamedExport = (source: string, fnName: string): string =>\n    source.replace(\n      new RegExp(`^(\\\\s*)(?:export\\\\s+)?function\\\\s+${fnName}`, 'gm'),\n      (match, leading) => {\n        if (match.trimStart().startsWith('export ')) {\n          return match;\n        }\n        return `${leading}export function ${fnName}`;\n      }\n    );\n\n  const ensureDefaultExport = (source: string, fnName: string): string =>\n    source.replace(\n      new RegExp(`^(\\\\s*)(?:export\\\\s+)?function\\\\s+${fnName}`, 'gm'),\n      (match, leading) => {\n        if (match.trimStart().startsWith('export default')) {\n          return match;\n        }\n        return `${leading}export default function ${fnName}`;\n      }\n    );\n\n  const withNamed = ensureNamedExport(code, '_createMdxContent');\n  const withDefault = ensureDefaultExport(withNamed, 'MDXContent');\n  return withDefault;\n};\n\nconst insertImportString = (source: string, statement: string): string => {\n  const importRegex = /^(import[\\s\\S]*?from\\s+['\"][^'\"]+['\"]\\s*;[ \\t]*\\n?)/gm;\n  let lastMatch: RegExpExecArray | null = null;\n  let match: RegExpExecArray | null;\n\n  while ((match = importRegex.exec(source))) {\n    lastMatch = match;\n  }\n\n  if (lastMatch) {\n    const insertPos = lastMatch.index + lastMatch[0].length;\n    return `${source.slice(0, insertPos)}${statement}${source.slice(insertPos)}`;\n  }\n\n  return `${statement}${source}`;\n};\n","import type { Plugin, PluginOption } from 'vite';\nimport mdxRollup from '@mdx-js/rollup';\nimport { wrapMdxModule } from './transform';\n\nexport interface LithentMdxPluginOptions {\n  /**\n   * MDX plugin options to pass to @mdx-js/rollup\n   */\n  mdxOptions?: Record<string, unknown>;\n\n  /**\n   * JSX import source for MDX files\n   * @default 'lithent'\n   */\n  jsxImportSource?: string;\n}\n\nexport const lithentMdx = (\n  options: LithentMdxPluginOptions = {}\n): PluginOption => {\n  const jsxImportSource = options.jsxImportSource ?? 'lithent';\n\n  // Create the MDX rollup plugin with Lithent-specific JSX settings\n  const mdxPlugin = mdxRollup({\n    jsxImportSource,\n    ...options.mdxOptions,\n  });\n\n  // Create the wrapper plugin that adds mount() wrapping\n  const wrapperPlugin: Plugin = {\n    name: 'lithent:mdx-wrapper',\n    enforce: undefined, // normal - runs after mdxPlugin in array order\n\n    transform(code, id) {\n      const [filepath] = id.split('?', 1);\n\n      // Only process .mdx files\n      if (!/\\.mdx$/i.test(filepath)) {\n        return null;\n      }\n\n      // Wrap MDXContent with mount() and add export default\n      const result = wrapMdxModule(code);\n\n      if (!result.modified) {\n        return null;\n      }\n\n      return {\n        code: result.code,\n        map: null,\n      };\n    },\n  };\n\n  // Return both plugins as an array\n  // Order matters: mdxPlugin first (MDX → JSX), then wrapperPlugin (add mount())\n  return [mdxPlugin, wrapperPlugin];\n};\n\nexport default lithentMdx;\n"],"names":["MDX_WRAP_SENTINEL","wrapMdxModule","code","fixedExports","wrapMdxExports","exportsModified","defaultExportMatch","fnName","start","end","updated","insertImportString","wrapperVar","wrapperSnippet","ensureNamedExport","source","match","leading","ensureDefaultExport","withNamed","statement","importRegex","lastMatch","insertPos","lithentMdx","options","jsxImportSource","mdxRollup","id","filepath","result"],"mappings":"2RAKa,MAAAA,EAAoB,4BAEpBC,EAAiBC,GAAgC,CACtD,MAAAC,EAAeC,EAAeF,CAAI,EAClCG,EAAkBF,IAAiBD,EAErC,GAAAC,EAAa,SAASH,CAAiB,EACzC,MAAO,CAAE,KAAMG,EAAc,SAAUE,CAAgB,EAInD,MAAAC,EADqB,iDACmB,KAAKH,CAAY,EAE/D,GAAI,CAACG,GAAsBA,EAAmB,QAAU,OACtD,MAAO,CAAE,KAAMH,EAAc,SAAUE,CAAgB,EAGnD,MAAAE,EAASD,EAAmB,CAAC,EAE7BE,EAAQF,EAAmB,MAC3BG,EAAMD,EAAQF,EAAmB,CAAC,EAAE,OAC1C,IAAII,EAAU,GAAGP,EAAa,MAAM,EAAGK,CAAK,CAAC,YAAYD,CAAM,GAAGJ,EAAa,MAAMM,CAAG,CAAC,GAIvF,0DAA0D,KAAKC,CAAO,IAGtEA,EAAUC,EAAmBD,EAAS;AAAA,CAAoC,GAGtE,MAAAE,EAAa,yBAAyBL,CAAM,GAC5CM,EAAiB;AAAA,EACvBb,CAAiB;AAAA,QACXY,CAAU;AAAA,iBACDL,CAAM;AAAA;AAAA,iBAENK,CAAU;AAAA,EAGf,OAAAF,EAAA,GAAGA,CAAO,GAAGG,CAAc,GAE9B,CAAE,KAAMH,EAAS,SAAU,EAAK,CACzC,EAEMN,EAAkBF,GAAyB,CAC/C,MAAMY,EAAoB,CAACC,EAAgBR,IACzCQ,EAAO,QACL,IAAI,OAAO,qCAAqCR,CAAM,GAAI,IAAI,EAC9D,CAACS,EAAOC,IACFD,EAAM,UAAA,EAAY,WAAW,SAAS,EACjCA,EAEF,GAAGC,CAAO,mBAAmBV,CAAM,EAC5C,EAGEW,EAAsB,CAACH,EAAgBR,IAC3CQ,EAAO,QACL,IAAI,OAAO,qCAAqCR,CAAM,GAAI,IAAI,EAC9D,CAACS,EAAOC,IACFD,EAAM,UAAA,EAAY,WAAW,gBAAgB,EACxCA,EAEF,GAAGC,CAAO,2BAA2BV,CAAM,EACpD,EAGEY,EAAYL,EAAkBZ,EAAM,mBAAmB,EAEtD,OADagB,EAAoBC,EAAW,YAAY,CAEjE,EAEMR,EAAqB,CAACI,EAAgBK,IAA8B,CACxE,MAAMC,EAAc,wDACpB,IAAIC,EAAoC,KACpCN,EAEJ,KAAQA,EAAQK,EAAY,KAAKN,CAAM,GACzBO,EAAAN,EAGd,GAAIM,EAAW,CACb,MAAMC,EAAYD,EAAU,MAAQA,EAAU,CAAC,EAAE,OACjD,MAAO,GAAGP,EAAO,MAAM,EAAGQ,CAAS,CAAC,GAAGH,CAAS,GAAGL,EAAO,MAAMQ,CAAS,CAAC,EAC5E,CAEO,MAAA,GAAGH,CAAS,GAAGL,CAAM,EAC9B,EC5EaS,EAAa,CACxBC,EAAmC,KAClB,CACX,MAAAC,EAAkBD,EAAQ,iBAAmB,UAqC5C,MAAA,CAlCWE,EAAU,CAC1B,gBAAAD,EACA,GAAGD,EAAQ,UAAA,CACZ,EAG6B,CAC5B,KAAM,sBACN,QAAS,OAET,UAAUvB,EAAM0B,EAAI,CAClB,KAAM,CAACC,CAAQ,EAAID,EAAG,MAAM,IAAK,CAAC,EAGlC,GAAI,CAAC,UAAU,KAAKC,CAAQ,EACnB,OAAA,KAIH,MAAAC,EAAS7B,EAAcC,CAAI,EAE7B,OAAC4B,EAAO,SAIL,CACL,KAAMA,EAAO,KACb,IAAK,IAAA,EALE,IAOX,CAAA,CAK8B,CAClC"}

package/dist/plugin.d.ts

@@ -0,0 +1,14 @@
+import type { PluginOption } from 'vite';
+export interface LithentMdxPluginOptions {
+    /**
+     * MDX plugin options to pass to @mdx-js/rollup
+     */
+    mdxOptions?: Record<string, unknown>;
+    /**
+     * JSX import source for MDX files
+     * @default 'lithent'
+     */
+    jsxImportSource?: string;
+}
+export declare const lithentMdx: (options?: LithentMdxPluginOptions) => PluginOption;
+export default lithentMdx;

package/dist/transform.d.ts

@@ -0,0 +1,6 @@
+export interface MdxWrapResult {
+    code: string;
+    modified: boolean;
+}
+export declare const MDX_WRAP_SENTINEL = "/* __lithentMdxWrapped */";
+export declare const wrapMdxModule: (code: string) => MdxWrapResult;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "type": "module",
+  "name": "@lithent/lithent-mdx",
+  "version": "0.2.0",
+  "description": "Vite plugin for MDX support in Lithent applications",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@mdx-js/rollup": "^3.1.0"
+  },
+  "devDependencies": {
+    "vite": "^5.4.8",
+    "@lithent/hmr-parser": "0.2.0",
+    "lithent": "1.20.0"
+  },
+  "keywords": [
+    "lithent",
+    "vite",
+    "mdx"
+  ],
+  "author": "superlucky84",
+  "license": "MIT",
+  "homepage": "https://github.com/superlucky84/lithent",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/superlucky84/lithent.git"
+  },
+  "peerDependencies": {
+    "lithent": "^1.20.0",
+    "vite": "^5.0.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "volta": {
+    "node": "20.3.0"
+  },
+  "scripts": {
+    "dev": "vite --config vite.config.dev.ts",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "test": "vitest run --reporter verbose",
+    "test:dev": "vitest"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { lithentMdx, default } from './plugin';
+export type { LithentMdxPluginOptions } from './plugin';
+export { wrapMdxModule, MDX_WRAP_SENTINEL } from './transform';
+export type { MdxWrapResult } from './transform';

package/src/mdx.entry.tsx

@@ -0,0 +1,30 @@
+import { mount, render } from 'lithent';
+import MdxExample from './mdx.example.mdx';
+
+const Counter = mount(renew => {
+  let count = 0;
+
+  const increment = () => {
+    count += 1;
+    renew();
+  };
+
+  return () => (
+    <div>
+      <button onClick={increment}>increase</button>
+      <p>count: {count}</p>
+    </div>
+  );
+});
+
+const RootMdx = mount(() => {
+  return () => <MdxExample components={{ Counter }} />;
+});
+
+const container = document.getElementById('app');
+
+if (container) {
+  render(<RootMdx />, container);
+}
+
+export default RootMdx;

package/src/mdx.example.mdx

@@ -0,0 +1,9 @@
+# Lithent MDX HMR 플레이그라운드
+
+이 페이지는 MDX에서 HMR 경계를 어떻게 주입하는지 실시간으로 확인하기 위한 샘플입니다. 아래 카운터를 수정하면서 저장해 보세요.
+
+> 버튼의 텍스트나 레이아웃을 수정한 뒤 저장하면 전체 새로고침 없이 변경 사항이 반영되는지 확인하세요.
+
+<Counter />
+
+

package/src/plugin.ts

@@ -0,0 +1,61 @@
+import type { Plugin, PluginOption } from 'vite';
+import mdxRollup from '@mdx-js/rollup';
+import { wrapMdxModule } from './transform';
+
+export interface LithentMdxPluginOptions {
+  /**
+   * MDX plugin options to pass to @mdx-js/rollup
+   */
+  mdxOptions?: Record<string, unknown>;
+
+  /**
+   * JSX import source for MDX files
+   * @default 'lithent'
+   */
+  jsxImportSource?: string;
+}
+
+export const lithentMdx = (
+  options: LithentMdxPluginOptions = {}
+): PluginOption => {
+  const jsxImportSource = options.jsxImportSource ?? 'lithent';
+
+  // Create the MDX rollup plugin with Lithent-specific JSX settings
+  const mdxPlugin = mdxRollup({
+    jsxImportSource,
+    ...options.mdxOptions,
+  });
+
+  // Create the wrapper plugin that adds mount() wrapping
+  const wrapperPlugin: Plugin = {
+    name: 'lithent:mdx-wrapper',
+    enforce: undefined, // normal - runs after mdxPlugin in array order
+
+    transform(code, id) {
+      const [filepath] = id.split('?', 1);
+
+      // Only process .mdx files
+      if (!/\.mdx$/i.test(filepath)) {
+        return null;
+      }
+
+      // Wrap MDXContent with mount() and add export default
+      const result = wrapMdxModule(code);
+
+      if (!result.modified) {
+        return null;
+      }
+
+      return {
+        code: result.code,
+        map: null,
+      };
+    },
+  };
+
+  // Return both plugins as an array
+  // Order matters: mdxPlugin first (MDX → JSX), then wrapperPlugin (add mount())
+  return [mdxPlugin, wrapperPlugin];
+};
+
+export default lithentMdx;

package/src/tests/transform.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest';
+import { wrapMdxModule, MDX_WRAP_SENTINEL } from '../transform';
+
+describe('wrapMdxModule', () => {
+  it('should wrap MDXContent with mount() and export default', () => {
+    const input = `
+function _createMdxContent(props) {
+  return <div>Hello</div>;
+}
+function MDXContent(props) {
+  return _createMdxContent(props);
+}
+export default MDXContent;
+`;
+
+    const result = wrapMdxModule(input);
+
+    expect(result.modified).toBe(true);
+    expect(result.code).toContain("import { mount } from 'lithent';");
+    expect(result.code).toContain(MDX_WRAP_SENTINEL);
+    expect(result.code).toContain('const __LithentMdxComponent_MDXContent = mount(');
+    expect(result.code).toContain('export default __LithentMdxComponent_MDXContent;');
+  });
+
+  it('should not wrap if already wrapped (sentinel present)', () => {
+    const input = `
+import { mount } from 'lithent';
+export function _createMdxContent(props) {
+  return <div>Hello</div>;
+}
+export default function MDXContent(props) {
+  return _createMdxContent(props);
+}
+${MDX_WRAP_SENTINEL}
+const __LithentMdxComponent_MDXContent = mount((_renew, props) => {
+  return () => MDXContent(props ?? {});
+});
+export default __LithentMdxComponent_MDXContent;
+`;
+
+    const result = wrapMdxModule(input);
+
+    // The wrapMdxExports will still add/fix exports, so modified might be true
+    // But sentinel check should prevent re-wrapping
+    expect(result.code).toContain(MDX_WRAP_SENTINEL);
+    expect(result.code).toContain('__LithentMdxComponent_MDXContent');
+  });
+
+  it('should add export to _createMdxContent if missing', () => {
+    const input = `
+function _createMdxContent(props) {
+  return <div>Hello</div>;
+}
+export default function MDXContent(props) {
+  return _createMdxContent(props);
+}
+`;
+
+    const result = wrapMdxModule(input);
+
+    expect(result.code).toContain('export function _createMdxContent');
+    // MDXContent is now wrapped, not exported as "export default function"
+    expect(result.code).toContain('export default __LithentMdxComponent_MDXContent');
+  });
+
+  it('should handle MDXContent without default export', () => {
+    const input = `
+export function _createMdxContent(props) {
+  return <div>Hello</div>;
+}
+export default function MDXContent(props) {
+  return _createMdxContent(props);
+}
+`;
+
+    const result = wrapMdxModule(input);
+
+    expect(result.modified).toBe(true);
+    expect(result.code).toContain('import { mount } from \'lithent\';');
+    expect(result.code).toContain('export default __LithentMdxComponent_MDXContent');
+  });
+});

package/src/transform.ts

@@ -0,0 +1,94 @@
+export interface MdxWrapResult {
+  code: string;
+  modified: boolean;
+}
+
+export const MDX_WRAP_SENTINEL = '/* __lithentMdxWrapped */';
+
+export const wrapMdxModule = (code: string): MdxWrapResult => {
+  const fixedExports = wrapMdxExports(code);
+  const exportsModified = fixedExports !== code;
+
+  if (fixedExports.includes(MDX_WRAP_SENTINEL)) {
+    return { code: fixedExports, modified: exportsModified };
+  }
+
+  const defaultExportRegex = /export\s+default\s+function\s+([A-Za-z0-9_]+)/m;
+  const defaultExportMatch = defaultExportRegex.exec(fixedExports);
+
+  if (!defaultExportMatch || defaultExportMatch.index === undefined) {
+    return { code: fixedExports, modified: exportsModified };
+  }
+
+  const fnName = defaultExportMatch[1];
+
+  const start = defaultExportMatch.index;
+  const end = start + defaultExportMatch[0].length;
+  let updated = `${fixedExports.slice(0, start)}function ${fnName}${fixedExports.slice(end)}`;
+
+  // Ensure mount import exists
+  const hasMountImport =
+    /import\s+{[^}]*\bmount\b[^}]*}\s+from\s+['"]lithent['"]/.test(updated);
+
+  if (!hasMountImport) {
+    updated = insertImportString(updated, `import { mount } from 'lithent';\n`);
+  }
+
+  const wrapperVar = `__LithentMdxComponent_${fnName}`;
+  const wrapperSnippet = `
+${MDX_WRAP_SENTINEL}
+const ${wrapperVar} = mount((_renew, props) => {
+  return () => ${fnName}(props ?? {});
+});
+export default ${wrapperVar};
+`;
+
+  updated = `${updated}${wrapperSnippet}`;
+
+  return { code: updated, modified: true };
+};
+
+const wrapMdxExports = (code: string): string => {
+  const ensureNamedExport = (source: string, fnName: string): string =>
+    source.replace(
+      new RegExp(`^(\\s*)(?:export\\s+)?function\\s+${fnName}`, 'gm'),
+      (match, leading) => {
+        if (match.trimStart().startsWith('export ')) {
+          return match;
+        }
+        return `${leading}export function ${fnName}`;
+      }
+    );
+
+  const ensureDefaultExport = (source: string, fnName: string): string =>
+    source.replace(
+      new RegExp(`^(\\s*)(?:export\\s+)?function\\s+${fnName}`, 'gm'),
+      (match, leading) => {
+        if (match.trimStart().startsWith('export default')) {
+          return match;
+        }
+        return `${leading}export default function ${fnName}`;
+      }
+    );
+
+  const withNamed = ensureNamedExport(code, '_createMdxContent');
+  const withDefault = ensureDefaultExport(withNamed, 'MDXContent');
+  return withDefault;
+};
+
+const insertImportString = (source: string, statement: string): string => {
+  const importRegex = /^(import[\s\S]*?from\s+['"][^'"]+['"]\s*;[ \t]*\n?)/gm;
+  let lastMatch: RegExpExecArray | null = null;
+  let match: RegExpExecArray | null;
+
+  while ((match = importRegex.exec(source))) {
+    lastMatch = match;
+  }
+
+  if (lastMatch) {
+    const insertPos = lastMatch.index + lastMatch[0].length;
+    return `${source.slice(0, insertPos)}${statement}${source.slice(insertPos)}`;
+  }
+
+  return `${statement}${source}`;
+};