solid-js jsx compatible mdx runtime
npm install solid-jsxThis module is ESM only, due to mdx and xdm being ESM only.
Adding
``json`
"type": "module"
in package.json is one option.
`sh`
pnpm install --save-dev solid-jsx
This library can be used alongside version 2 of @mdx-js, or xdm by setting the jsxImportSource property to 'solid-jsx'.
You can use their official integration with various bundlers, and frameworks,
below is an @mdx-js configuration sample for Vite, which supports rollup plugins.
`js
import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';
import mdx from '@mdx-js/rollup';
import remarkGfm from 'remark-gfm';
export default defineConfig({
plugins: [mdx({ jsxImportSource: 'solid-jsx', remarkPlugins: [remarkGfm] }), solid()],
build: {
target: 'esnext',
},
});
`
Draw math with xdm and mathjax
`js
import solid from 'vite-plugin-solid';
import xdm from 'xdm/rollup.js';
import remarkMath from 'remark-math';
import uno from 'unocss/vite';
import remarkMath from 'remark-math';
import rehypeMathJaxSVG from 'rehype-mathjax/svg.js';
export default defineConfig({
plugins: [
xdm({
jsxImportSource: 'solid-jsx',
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeMathJaxSVG],
}),
solid(),
uno(),
],
});
`
More information -> Integrations.
All markdown tags and custom components replacement are supported.
However, since the code goes through the @mdx-js/xdm compiler and not through the solid-js compiler,
inline components will not be reactive.
` {count}jsx`
export const Counter = () => {
const [count, setCount] = createSignal(0);
return (
<>
);
};
This limitation is minor, since writing components inline is just one option,
and by far the worst one of them all, with limited syntax and language support.
You can always import directly TypeScript/JavaScript components inside .mdx
`mdx
import Counter from './Counter';
`
or pass the component to markdown directly
`mdx`
Hello
`jsx
import Message from './message.mdx';
`
To have dynamic tags, use solid-js Dynamic component.
`jsx`
const options: Record
red: RedThing,
green: GreenThing,
blue: BlueThing,
};
h2: 'h6',
h1: () => Test,
Planet: () =>
}}
/>;
When nesting MDX files, importing components at the top or repeating the same set of those as parameters can become cumbersome.
You can use MDXProvider to avoid this:
`jsx
import { MDXProvider } from 'solid-jsx';
render(() => (
)
);
`
The package also provides Typescript support, the types can be referenced as "solid-jsx/types". In tsconfig.json:
`json`
{
"compilerOptions": {
"types": ["vite/client", "solid-jsx/types"]
}
}
This project is free and open-source, so if you think this project can help you or
anyone else, you may star it on GitHub. Feel
free to open an issue if you have any
ideas, questions, or if you've found a bug.
Thanks for being willing to contribute!
Working on your first Pull Request? You can learn how from this _free_ series
How to Contribute to an Open Source Project on GitHub
We are following the Conventional Commits convention.
- pnpm build: Generate bundlespnpm lint
- : Lints code
solid-jsx` is open source software licensed as MIT.