mdx-bundler - npm Package Compare versions

Comparing version 10.0.3 to 10.1.0

client/index.js

@@ -1,1 +0,1 @@
-module.exports = require('../dist/client')
+module.exports = require('../dist/client/index.js')

client/package.json

 {
   "type": "commonjs",
   "main": "./index.js",
-  "types": "./index.d.ts"
+  "types": "./index.d.ts",
+  "exports": {
+    "react": "./react.js",
+    "jsx": "./jsx.js"
+  }
 }

dist/index.d.ts

@@ -8,3 +8,3 @@ /**
     [key: string]: any;
-}>({ file, source, files, mdxOptions, esbuildOptions, globals, cwd, grayMatterOptions, bundleDirectory, bundlePath, }: import("./types").BundleMDX<Frontmatter>): Promise<{
+}>({ file, source, files, mdxOptions, esbuildOptions, globals, cwd, grayMatterOptions, bundleDirectory, bundlePath, jsxConfig }: import("./types").BundleMDX<Frontmatter>): Promise<{
     code: string;
@@ -11,0 +11,0 @@ frontmatter: Frontmatter;

dist/index.js

@@ -25,2 +25,20 @@ "use strict";
 /**
+ * @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
@@ -40,3 +58,4 @@ * @param {import('./types').BundleMDX<Frontmatter>} options
   bundleDirectory,
-  bundlePath
+  bundlePath,
+  jsxConfig = defaultJSXConfig
 }) {
@@ -188,16 +207,20 @@ /* c8 ignore start */
     },
+    jsx: "automatic",
+    jsxImportSource: jsxConfig.jsxLib.package,
     plugins: [(0, _esbuildPluginGlobalExternals.globalExternals)({
       ...globals,
-      react: {
-        varName: 'React',
+      [jsxConfig.jsxLib.package]: {
+        varName: jsxConfig.jsxLib.varName,
         type: 'cjs'
       },
-      'react-dom': {
-        varName: 'ReactDOM',
+      [jsxConfig.jsxRuntime.package]: {
+        varName: jsxConfig.jsxRuntime.varName,
         type: 'cjs'
       },
-      'react/jsx-runtime': {
-        varName: '_jsx_runtime',
-        type: 'cjs'
-      }
+      ...(jsxConfig.jsxDom ? {
+        [jsxConfig.jsxDom.package]: {
+          varName: jsxConfig.jsxDom.varName,
+          type: 'cjs'
+        }
+      } : {})
     }),
@@ -213,3 +236,4 @@ // eslint-disable-next-line new-cap
         name: 'frontmatter'
-      }]]
+      }]],
+      jsxImportSource: jsxConfig.jsxLib.package
     }, matter.data))],
@@ -216,0 +240,0 @@ bundle: true,

dist/types.d.ts

@@ -198,2 +198,48 @@ // This file is for defining types that are annoying to define with jsdoc syntax
   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;
+  }
 }
@@ -209,2 +255,11 @@
 
+type MDXJsxExportFunction<
+  ExportedObject extends {},
+  Frontmatter extends Record<string, unknown>,
+> = (
+  code: string,
+  jsxGlobals: Record<string, unknown>,
+  globals?: Record<string, unknown>,
+) => ReturnType<MDXExport<ExportedObject, Frontmatter>>
+
 type MDXExportFunction<
@@ -211,0 +266,0 @@ ExportedObject extends {},

package.json

 {
   "name": "mdx-bundler",
-  "version": "10.0.3",
+  "version": "10.1.0",
   "description": "Compile and bundle your MDX files and their dependencies. FAST.",
@@ -56,3 +56,5 @@ "main": "dist/index.js",
   "devDependencies": {
+    "@testing-library/preact": "3.2.4",
     "@testing-library/react": "^14.1.0",
+    "@testing-library/vue": "8.1.0",
     "@types/jsdom": "^21.1.5",
@@ -67,2 +69,3 @@ "@types/mdx": "^2.0.10",
     "esbuild": "^0.19.5",
+    "hono": "4.6.14",
     "jsdom": "^22.1.0",
@@ -72,2 +75,3 @@ "kcd-scripts": "^14.0.1",
     "mdx-test-data": "^1.0.1",
+    "preact": "10.25.3",
     "react": "^18.2.0",
@@ -77,3 +81,4 @@ "react-dom": "^18.2.0",
     "typescript": "^5.2.2",
-    "uvu": "^0.5.6"
+    "uvu": "^0.5.6",
+    "vue": "3.5.13"
   },
@@ -80,0 +85,0 @@ "eslintConfig": {

README.md

@@ -47,3 +47,3 @@ <div align="center">
 [MDX](https://mdxjs.com/) enables you to combine terse markdown syntax for your
-content with the power of React components. For content-heavy sites, writing the
+content with the power of JSX components. For content-heavy sites, writing the
 content with straight-up HTML can be annoyingly verbose. Often people solve this
@@ -60,4 +60,4 @@ using a WSYWIG editor, but too often those fall short in mapping the writer's
 As previously stated, [MDX](https://mdxjs.com/) enables you to combine terse
-markdown syntax for your content with the power of React components. So you can
-import a React component and render it within the markdown itself. It's the best
+markdown syntax for your content with the power of JSX components. So you can
+import a JSX component and render it within the markdown itself. It's the best
 of both worlds.
@@ -149,2 +149,12 @@
     <strong>
+      "Can I use this other JSX libraries other than React?"
+    </strong>
+  </summary>
+
+Yes! If JSX runtime you want to use is mentioned here - https://mdxjs.com/docs/getting-started/#jsx, it's guaranteed to work. Libraries, such as `hono` which has `react` compatible API also works. Check to [Other JSX runtimes](#other-jsx-runtimes) to get started.
+</details>
+
+<details>
+  <summary>
+    <strong>
       "Why the dodo bird emoji? 🦤"
@@ -776,5 +786,80 @@ </strong>
 
+### Other JSX runtimes
+JSX runtimes mentioned [here](https://mdxjs.com/docs/getting-started/#jsx) are guaranteed to be supported, however any JSX runtime should work without problem, as long as they export their own jsx runtime. For example, `hono` is not mentioned here, but as it has `react` compatible API, it can be used without any issues.
+
+To do so, you will have to pass a configuration object and use JSX Component factory.
+```tsx
+const getMDX = (source) => {
+  return bundleMDX({
+    source,
+    jsxConfig: {
+      jsxLib: {
+        varName: 'HonoJSX',
+        package: 'hono/jsx',
+      },
+      jsxDom: {
+        varName: 'HonoDOM',
+        package: 'hono/jsx/dom',
+      },
+      jsxRuntime: {
+        varName: '_jsx_runtime',
+        package: 'hono/jsx/jsx-runtime',
+      },
+    }
+  });
+}
+
+// ...
+
+import { getMDXComponent } from "mdx-bundler/client/jsx";
+
+import * as HonoJSX from "hono/jsx";
+import * as HonoDOM from "hono/jsx/dom";
+import * as _jsx_runtime from "hono/jsx/jsx-runtime";
+const jsxConfig = {
+  HonoJSX,
+  HonoDOM,
+  _jsx_runtime
+};
+
+export const MDXComponent: React.FC<{
+  code: string;
+}> = ({ code }) => {
+  const Component = useMemo(
+    () => getMDXComponent(code, jsxConfig),
+    [code],
+  );
+
+  return (
+    <Component components={{ Text: ({ children }) => <p>{children}</p> }} />
+  );
+};
+```
+
+To use it with others, adjust `jsxConfig` passed to bundler.
+```ts
+const jsxConfig = {
+  jsxLib: {
+    varName: 'HonoJSX',
+    package: 'hono/jsx',
+  },
+  jsxDom: {
+    varName: 'HonoDOM',
+    package: 'hono/jsx/dom',
+  },
+  jsxRuntime: {
+    varName: '_jsx_runtime',
+    package: 'hono/jsx/jsx-runtime',
+  },
+}
+```
+and to `getMDXComponent`
+```ts
+const jsxConfig = { HonoJSX, HonoDOM, _jsx_runtime };
+```
+
+
 #### Cloudflare Workers
 
-We'd _love_ for this to work in cloudflare workers. Unfortunately cloudflares
+We'd _love_ for this to work in cloudflare workers. Unfortunately cloudflare workers
 have two limitations that prevent `mdx-bundler` from working in that
@@ -781,0 +866,0 @@ environment:

No alert changes

Improved metrics

Total package byte prevSize

64552

increased by11.91%

Number of package files

21

increased by40%

Lines of code

656

increased by28.38%

Number of lines in readme file

1027

increased by9.02%

Worsened metrics

Dev dependency count

24

increased by26.32%

No dependency changes