test: add tests for preact and hono

Author: muningis

package.json

@@ -53,6 +53,7 @@
     "esbuild": "0.*"
   },
   "devDependencies": {
+    "@testing-library/preact": "3.2.4",
     "@testing-library/react": "^14.1.0",
     "@types/jsdom": "^21.1.5",
     "@types/mdx": "^2.0.10",
@@ -63,10 +64,12 @@
     "c8": "^8.0.1",
     "cross-env": "^7.0.3",
     "esbuild": "^0.19.5",
+    "hono": "4.6.14",
     "jsdom": "^22.1.0",
     "kcd-scripts": "^14.0.1",
     "left-pad": "^1.3.0",
     "mdx-test-data": "^1.0.1",
+    "preact": "10.25.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-mdx-images": "^3.0.0",

src/__tests__/hono.js

@@ -0,0 +1,77 @@
+import './setup-tests.js'
+import { Hono } from "hono";
+import * as HonoJSX from "hono/jsx";
+import * as HonoDOM from "hono/jsx/dom";
+import * as _jsx_runtime from "hono/jsx/jsx-runtime";
+import {test} from 'uvu'
+import * as assert from 'uvu/assert'
+import {bundleMDX} from '../index.js'
+import {getMDXComponent} from '../client/jsx.js'
+
+
+
+const jsxBundlerConfig = {
+  jsxLib: {
+    varName: 'HonoJSX',
+    package: 'hono/jsx',
+  },
+  jsxDom: {
+    varName: 'HonoDOM',
+    package: 'hono/jsx/dom',
+  },
+  jsxRuntime: {
+    varName: '_jsx_runtime',
+    package: 'hono/jsx/jsx-runtime',
+  },
+}
+const jsxComponentConfig = { HonoJSX, HonoDOM, _jsx_runtime  }
+
+const mdxSource = `
+---
+title: Example Post
+published: 2021-02-13
+description: This is some meta-data
+---
+import Demo from './demo'
+
+# This is the title
+
+Here's a **neat** demo:
+<Demo />
+`.trim();
+
+const demoTsx = `
+export default function Demo() {
+  return <div>mdx-bundler with hono's runtime!</div>
+}
+`.trim();
+
+
+test('smoke test for hono', async () => {
+
+  const result = await bundleMDX({
+    source: mdxSource,
+    jsxConfig: jsxBundlerConfig,
+    files: {
+      './demo.tsx': demoTsx
+    }
+  });
+
+  const SpanBold = ({ children }) => {
+    return HonoJSX.createElement('span', { className: "strong" }, children)
+  }
+
+  const app = new Hono()
+    .get("/", (c) => {
+      const Component = getMDXComponent(result.code, jsxComponentConfig);
+      return c.html(HonoJSX.jsx(Component, { components: { strong: SpanBold } }).toString());
+    });
+ 
+    const req = new Request("http://localhost/");
+    const res = await app.fetch(req);
+    assert.equal(await res.text(), `<h1>This is the title</h1>
+<p>Here&#39;s a <span class="strong">neat</span> demo:</p>
+<div>mdx-bundler with hono&#39;s runtime!</div>`);
+})
+
+test.run()

src/__tests__/index.js

@@ -8,7 +8,7 @@ import leftPad from 'left-pad'
 import remarkMdxImages from 'remark-mdx-images'
 import {VFile} from 'vfile'
 import {bundleMDX} from '../index.js'
-import {getMDXComponent, getMDXExport} from '../client.js'
+import {getMDXComponent, getMDXExport} from '../client/react.js'
 
 const {render} = rtl
 

src/__tests__/preact.js

@@ -0,0 +1,85 @@
+import './setup-tests.js'
+import * as Preact from "preact";
+import * as PreactDOM from "preact/compat";
+import * as _jsx_runtime from 'preact/jsx-runtime';
+import {test} from 'uvu'
+import * as assert from 'uvu/assert'
+import { render } from '@testing-library/preact'
+import {bundleMDX} from '../index.js'
+import {getMDXComponent} from '../client/jsx.js'
+
+
+
+const jsxBundlerConfig = {
+  jsxLib: {
+    varName: 'Preact',
+    package: 'preact',
+  },
+  jsxDom: {
+    varName: 'PreactDom',
+    package: 'preact/compat',
+  },
+  jsxRuntime: {
+    varName: '_jsx_runtime',
+    package: 'preact/jsx-runtime',
+  },
+}
+const jsxComponentConfig = { Preact, PreactDOM, _jsx_runtime  }
+
+const mdxSource = `
+---
+title: Example Post
+published: 2021-02-13
+description: This is some meta-data
+---
+import Demo from './demo'
+
+# This is the title
+
+Here's a **neat** demo:
+<Demo />
+`.trim();
+
+const demoTsx = `
+export default function Demo() {
+  return <div>mdx-bundler with Preact's runtime!</div>
+}
+`.trim();
+
+
+test('smoke test for preact', async () => {
+
+  const result = await bundleMDX({
+    source: mdxSource,
+    jsxConfig: jsxBundlerConfig,
+    files: {
+      './demo.tsx': demoTsx
+    }
+  });
+
+  const Component = getMDXComponent(result.code, jsxComponentConfig)
+
+  /** @param {Preact.JSX.HTMLAttributes<HTMLSpanElement>} props */
+  const SpanBold = ({children}) => {
+    return Preact.createElement('span', { className: "strong" }, children)
+  }
+
+  assert.equal(result.frontmatter, {
+    title: 'Example Post',
+    published: new Date('2021-02-13'),
+    description: 'This is some meta-data',
+  })
+
+  const {container} = render(
+    Preact.h(Component, {components: {strong: SpanBold}})
+  )
+
+  assert.equal(
+    container.innerHTML,
+    `<h1>This is the title</h1>
+<p>Here's a <span class="strong">neat</span> demo:</p>
+<div>mdx-bundler with Preact's runtime!</div>`,
+  )
+})
+
+test.run()