feat(jsx): base for supporting more runtimes

[muningis]

What:
Support JSX runtimes other than react.

Why:
Allow this to be used with other JSX runtimes supported by mdxjs (https://mdxjs.com/docs/getting-started/#jsx) but not limited to. For example, this can work quite fine with https://hono.dev/ too, eventhough it's not mentioned here (thanks to a fact, that Hono is compatible with React's API)

How:
Adjust bundleMDX to accept jsxConfig (which fallbacks to react).
getMDXComponent will have to be adjusted too, still looking for an approach which would have least breaking changes. Second paramter globals could be used for that, as such:

const { code } = bundleMDX({
  jsxConfig: {
    JsxLib: {
      varName: 'HonoJSX',
      package: 'hono/jsx',
    },
    JsxDom: {
      varName: 'HonoDOM',
      package: 'hono/jsx/dom',
    },
    jsxRuntime: {
      varName: '_jsx_runtime',
      package: 'hono/jsx/jsx-runtime',
    },
  }
});

// ...

import * as HonoJSX from "hono/jsx";
import * as HonoDOM from "hono/jsx/dom";
import * as _jsx_runtime from "hono/jsx/jsx-runtime";
const Component = getMDXComponent(code, { HonoJSX, HonoDOM, _jsx_runtime });

Checklist:

• Documentation
• Tests - TODO
• Ready to be merged

Todo:

• Readme update
• Preact tests
• Hono tests (react compatible, not officially supported by mdx-js)
• Vue tests
• Solid tests
• Svelte tests

[kentcdodds]

Thanks! I think I want to lowercase a few things. Other than that, this is perfect :)

[kentcdodds]

Thanks! One last thing. Could you add a note about this in the readme?

[muningis]

Of course! Still have to do few things though:

• add some unit tests for various runtimes (primarly Vue, Solid, Svelte).
• modify getMDXBudler - will adjust /client import to fallback/default to React, and /client/jsx will allow passing own JSX bindings+runtime.

[kentcdodds]

Thank you!

[muningis]

Had quite a busy January, getting back to this! At the moment only solid test's are failing, as it complains about Client Side API usage in Server. Not entirely familiar with Solid that much, will probably jump on their Discord.

WDYT about skipping Solid for now?

[muningis]

From Solid’s discord:

I think you'll want to use the latest vite-plugin-solid

this is basically because they gotta compile solid’s code. So mdx-bundler can’t really work just by replacing jsx’s runtimes imports 😞

[kentcdodds]

Bummer :(

[kentcdodds]

This looks almost perfect. I just want to make sure I understand what's going on in the package.json, and I want to ensure that there are no breaking changes for existing users.

[kentcdodds]

What are these? This looks like it actually should be in a export config.

[muningis]

Honestly, I don't know what was there... Fixed it.

[muningis]

As for breaking changes regression check, probably result.code snapshot test would be best shot.

Create snapshots with separate MR, merge them into main, and then rebase into this.

[kentcdodds]

I was mostly just thinking about the imports that people have already. I'm pretty sure that you have everything wired up properly, but I just wanted to double check.

[kentcdodds]

Thanks!

[github-actions]

🎉 This PR is included in version 10.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[muningis]

Few typescipt issues found for non-react uses of this. For some reason, I thought it would be good idea to test it on non-typescript repo (and I’m typescript-first guy).

Got fix for type export declarations in package.json, will take a bit for JSX not to enforce react rather use what’s in consumer repo.

Edit: issue is also caused in "inproper" monorepos, where @types/react might be installed and it causes conflicts with JSX from other JSX libs. Not much of an issue then.