feat(jsx): base for supporting more runtimes

kentcdodds · Dec 18, 2024 · d91d6dd · d91d6dd
1 parent aa5b349
commit d91d6dd
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 6 deletions.
diff --git a/src/index.js b/src/index.js
@@ -10,6 +10,24 @@ import dirnameMessedUp from './dirname-messed-up.cjs'
 
 const {readFile, unlink} = fs.promises
 
+/**
+ * @type {import('./types').JsxConfig} 
+ */
+const defaultJSXConfig = {
+  JsxLib: {
+    varName: 'React',
+    package: 'react',
+  },
+  JsxDom: {
+    varName: 'ReactDOM',
+    package: 'react-dom'
+  },
+  JsxRuntime: {
+    varName: '_jsx_runtime',
+    package: 'react/jsx-runtime'
+  }
+}
+
 /**
  * @template {{[key: string]: any}} Frontmatter
  * @param {import('./types').BundleMDX<Frontmatter>} options
@@ -26,6 +44,7 @@ async function bundleMDX({
   grayMatterOptions = options => options,
   bundleDirectory,
   bundlePath,
+  jsxConfig = defaultJSXConfig
 }) {
   /* c8 ignore start */
   if (dirnameMessedUp && !process.env.ESBUILD_BINARY_PATH) {
@@ -187,16 +206,16 @@ async function bundleMDX({
       plugins: [
         globalExternals({
           ...globals,
-          react: {
-            varName: 'React',
+          [jsxConfig.JsxLib.package]: {
+            varName: jsxConfig.JsxLib.varName,
             type: 'cjs',
           },
-          'react-dom': {
-            varName: 'ReactDOM',
+          [jsxConfig.JsxDom.package]: {
+            varName: jsxConfig.JsxDom.varName,
             type: 'cjs',
           },
-          'react/jsx-runtime': {
-            varName: '_jsx_runtime',
+          [jsxConfig.JsxRuntime.package]: {
+            varName: jsxConfig.JsxRuntime.varName,
             type: 'cjs',
           },
         }),
@@ -213,6 +232,7 @@ async function bundleMDX({
                 remarkFrontmatter,
                 [remarkMdxFrontmatter, {name: 'frontmatter'}],
               ],
+              jsxImportSource: jsxConfig.JsxLib.package
             },
             matter.data,
           ),
@@ -248,6 +268,7 @@ async function bundleMDX({
     )
   }
 
+  console.log(code);
   return {
     code: `${code};return Component;`,
     frontmatter: matter.data,

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -195,6 +195,52 @@ type BundleMDXOptions<Frontmatter> = {
    * @see bundleDirectory
    */
   bundlePath?: string
+  /**
+   * Allows this to output code other than react.
+   * Follow https://mdxjs.com/docs/getting-started/#jsx and JSX library's documentation to use
+   * 
+   * @example
+   * ```
+   * bundleMDX({
+   *   jsxConfig: {
+   *     JsxLib: {
+   *       varName: 'HonoJSX',
+   *       package: 'hono/jsx',
+   *     },
+   *     JsxDom: {
+   *       varName: 'HonoDOM',
+   *       package: 'hono/jsx/dom',
+   *     },
+   *     jsxRuntime: {
+   *       varName: '_jsx_runtime',
+   *       package: 'hono/jsx/jsx-runtime',
+   *     },
+   *   }
+   * })
+   * ```
+   */
+  jsxConfig?: JsxConfig;
+};
+
+export type JsxConfig = {
+  JsxLib: {
+    /** @default 'React' */
+    varName: string;
+    /** @default 'react' */
+    package: string;
+  }
+  JsxDom: {
+    /** @default 'ReactDOM' */
+    varName: string;
+    /** @default 'react-dom' */
+    package: string;
+  }
+  JsxRuntime: {
+    /** @default '_jsx_runtime' */
+    varName: string;
+    /** @default 'react/jsx-runtime' */
+    package: string;
+  }
 }
 
 type MDXExport<