Skip to content

Commit 8d4fd62

Browse files
high1high1
committed
Updated compatibility list
- code, tsconfig and package.json cleanup, ESM only - updated README and CHANGELOG - updated deps
1 parent f65cb10 commit 8d4fd62

7 files changed

Lines changed: 253 additions & 191 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
### 0.5.1
4+
5+
- added more components to compatibility replacement set (mathjax)
6+
37
### 0.5.0
48

59
- added compatibility replacement logic for elements that use Web component syntax, opt-in

‎README.md‎

Lines changed: 100 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,70 +2,135 @@
22

33
## What?
44

5-
Use Solid components with [mdx](https://mdxjs.com/).
5+
Use Solid components with [mdx](https://mdxjs.com/) or [xdm](http://wooorm.com/xdm/).
6+
7+
This module is ESM only, due to [mdx](https://mdxjs.com/) or [xdm](http://wooorm.com/xdm/) being ESM only.
8+
9+
Adding
10+
11+
```json
12+
"type": "module"
13+
```
14+
15+
in package.json is one option.
616

717
## Installation
818

919
```sh
1020
pnpm install --save-dev solid-jsx
1121
```
22+
1223
## Usage
1324

14-
> This library is meant to be used alongside [@mdx-js](https://mdxjs.com/), version 2, by setting the jsxImportSource to __'solid-jsx'__.
15-
You can use official integration with various bundlers, and frameworks, below is a configuration sample
25+
This library can be used alongside version 2 of [@mdx-js](https://mdxjs.com/), or [xdm](http://wooorm.com/xdm/) by setting the jsxImportSource property to **'solid-jsx'**.
26+
27+
```js
28+
pnpm i -D @mdx-js/rollup@next
29+
```
30+
31+
or
32+
33+
```js
34+
pnpm i -D xdm
35+
```
36+
37+
You can use their official integration with various bundlers, and frameworks, below is a configuration sample
1638
for [Vite](https://vitejs.dev), which supports rollup plugins.
1739

1840
```js
19-
import { defineConfig } from "vite";
20-
import solid from "vite-plugin-solid";
41+
import { defineConfig } from 'vite';
42+
import solid from 'vite-plugin-solid';
2143
import mdx from '@mdx-js/rollup';
2244
import remarkGfm from 'remark-gfm';
2345

2446
export default defineConfig({
25-
26-
plugins: [mdx({ jsxImportSource: 'solid-jsx', remarkPlugins: [remarkGfm]}), solid()],
47+
plugins: [mdx({ jsxImportSource: 'solid-jsx', remarkPlugins: [remarkGfm] }), solid()],
2748
build: {
28-
target: "esnext",
49+
target: 'esnext',
2950
},
3051
});
3152
```
32-
More information -> [Integrations](https://mdxjs.com/docs/getting-started/#integrations).
3353

34-
> All markdown tags and custom components replacement should be supported.
54+
Draw math with [xdm](http://wooorm.com/xdm/) and [mathjax](https://www.mathjax.org/)
3555

3656
```js
37-
const options: Record<string, Component> = {
38-
red: RedThing,
39-
green: GreenThing,
40-
blue: BlueThing
57+
import solid from 'vite-plugin-solid';
58+
import xdm from 'xdm/rollup.js';
59+
import remarkMath from 'remark-math';
60+
import uno from 'unocss/vite';
61+
import remarkMath from 'remark-math';
62+
import rehypeMathJaxSVG from 'rehype-mathjax/svg.js';
63+
64+
export default defineConfig({
65+
plugins: [
66+
xdm({
67+
jsxImportSource: 'solid-jsx',
68+
remarkPlugins: [remarkMath],
69+
rehypePlugins: [rehypeMathJaxSVG],
70+
}),
71+
solid(),
72+
uno(),
73+
],
74+
});
75+
```
76+
77+
More information -> [Integrations](https://mdxjs.com/docs/getting-started/#integrations).
78+
79+
All markdown tags and custom components replacement are supported.
80+
81+
However, since the code goes through the @mdx-js/xdm compiler and not through the solid-js compiler,
82+
inline components will not be reactive.
83+
84+
```jsx
85+
export const Counter = () => {
86+
const [count, setCount] = createSignal(0);
87+
return (
88+
<>
89+
<button onClick={() => setCount(count() + 1)}>Increment</button>
90+
<p>{count}</p>
91+
)
4192
}
42-
...
43-
<Message
44-
components={{
45-
h2: 'h6',
46-
h1: () => <div>Test</div>,
47-
Planet: () => <Dynamic component={options[selected()]} />,
48-
}}>
93+
<Counter />
4994
```
5095

51-
> However, since the code goes through the @mdx-js compiler and then in the jsx function in solid-jsx,
52-
this will not be reactive:
96+
This limitation is minor, since writing components inline is just one option,
97+
and by far the worst one of them all, with limited syntax and language support.
5398

54-
```js
55-
const [tag, setTag] = createSignal('p')
56-
<Message
57-
components={{
58-
h2: tag(),
59-
}}>
99+
You can always import directly TypeScript/JavaScript components inside .mdx
100+
101+
```mdx
102+
import Counter from './Counter';
103+
104+
<Counter />
60105
```
61-
You can use Dynamic tag here:
62106

63-
```js
64-
const [tag, setTag] = createSignal('p')
65-
<Message
107+
or pass the component to markdown directly
108+
109+
```mdx
110+
Hello <Counter>
111+
```
112+
113+
```jsx
114+
import Message from './message.mdx';
115+
116+
<Message components={{ Counter }} />;
117+
```
118+
119+
To have dynamic tags, use solid-js Dynamic component.
120+
121+
```jsx
122+
const options: Record<string, Component> = {
123+
red: RedThing,
124+
green: GreenThing,
125+
blue: BlueThing,
126+
};
127+
<Message
66128
components={{
67-
h2: (props: PropsWithChildren) => <Dynamic component={tag()} {...props} />,
68-
}}>
129+
h2: 'h6',
130+
h1: () => <div>Test</div>,
131+
Planet: () => <Dynamic component={options[selected()]} />,
132+
}}
133+
/>;
69134
```
70135

71136
## Support

‎package.json‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,25 @@
11
{
22
"name": "solid-jsx",
3-
"version": "0.5.0",
4-
"description": "",
5-
"source": "src/jsx-runtime.ts",
3+
"version": "0.5.1",
4+
"description": "solid-js jsx compatible mdx runtime",
65
"main": "./dist/jsx-runtime.js",
7-
"module": "./dist/jsx-runtime.mjs",
6+
"type": "module",
87
"exports": {
9-
".": {
10-
"import": "./dist/jsx-runtime.mjs",
11-
"require": "./dist/jsx-runtime.js"
12-
},
13-
"./jsx-runtime": {
14-
"import": "./dist/jsx-runtime.mjs",
15-
"require": "./dist/jsx-runtime.js"
16-
},
17-
"./jsx-dev-runtime": {
18-
"import": "./dist/jsx-runtime.mjs",
19-
"require": "./dist/jsx-runtime.js"
20-
}
8+
".": "./dist/jsx-runtime.js",
9+
"./jsx-runtime": "./dist/jsx-runtime.js",
10+
"./jsx-dev-runtime": "./dist/jsx-runtime.js"
2111
},
22-
"sideEffects": false,
12+
"types": "./dist/jsx-runtime.d.ts",
2313
"files": [
2414
"dist"
2515
],
26-
"types": "./dist/jsx-runtime.d.ts",
16+
"sideEffects": false,
2717
"scripts": {
2818
"prebuild": "rimraf dist",
2919
"prepare": "husky install",
30-
"build": "tsup src/jsx-runtime.ts --dts --format cjs,esm",
20+
"build": "pnpm prebuild && pnpm lint && pnpm pretty && tsup src/jsx-runtime.ts --dts --format esm --sourcemap --minify",
21+
"lint": "pnpm eslint --fix ./src",
22+
"pretty": "prettier --ignore-path .gitignore --write ./src",
3123
"prepublishOnly": "pnpm build"
3224
},
3325
"engines": {
@@ -57,11 +49,11 @@
5749
"eslint-plugin-prettier": "^4.0.0",
5850
"eslint-plugin-unicorn": "^40.1.0",
5951
"husky": "^7.0.4",
60-
"lint-staged": "^12.2.1",
52+
"lint-staged": "^12.2.2",
6153
"prettier": "^2.5.1",
6254
"rimraf": "^3.0.2",
6355
"tsup": "^5.11.11",
64-
"typescript": "^4.5.4"
56+
"typescript": "^4.5.5"
6557
},
6658
"lint-staged": {
6759
"*.{js,ts}": "eslint --fix",

0 commit comments

Comments
 (0)