├── .github └── workflows │ └── test.yml ├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── __tests__ ├── jsx.spec.tsx ├── tsconfig.json └── v-model.spec.tsx ├── api-extractor.json ├── babel.config.js ├── global.d.ts ├── index.js ├── jest-setup.ts ├── jest.config.js ├── jsx-dev-runtime.js ├── jsx-runtime.js ├── package.json ├── pnpm-lock.yaml ├── rollup.config.js ├── src ├── dev.ts ├── index.ts └── jsx.ts └── tsconfig.json /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: test 2 | 3 | on: 4 | push: 5 | branches: 6 | - '**' 7 | pull_request: 8 | branches: 9 | - main 10 | 11 | jobs: 12 | test: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v2 16 | 17 | - name: Install pnpm 18 | uses: pnpm/action-setup@v2.0.1 19 | with: 20 | version: 6.15.1 21 | 22 | - name: Set node version to 16 23 | uses: actions/setup-node@v2 24 | with: 25 | node-version: 16 26 | cache: 'pnpm' 27 | 28 | - run: pnpm bootstrap 29 | 30 | - name: Run unit tests 31 | run: pnpm run test 32 | 33 | - uses: codecov/codecov-action@v2 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | temp 85 | 86 | # Gatsby files 87 | .cache/ 88 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 89 | # https://nextjs.org/blog/next-9-1#public-directory-support 90 | # public 91 | 92 | # vuepress build output 93 | .vuepress/dist 94 | 95 | # Serverless directories 96 | .serverless/ 97 | 98 | # FuseBox cache 99 | .fusebox/ 100 | 101 | # DynamoDB Local files 102 | .dynamodb/ 103 | 104 | # TernJS port file 105 | .tern-port 106 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 doly mood 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-jsx-runtime [![npm](https://badgen.net/npm/v/vue-jsx-runtime)](https://www.npmjs.com/package/vue-jsx-runtime) [![build status](https://github.com/dolymood/vue-jsx-runtime/workflows/test/badge.svg)](https://github.com/dolymood/vue-jsx-runtime/actions/workflows/test.yml) [![coverage](https://badgen.net/codecov/c/github/dolymood/vue-jsx-runtime)](https://codecov.io/github/dolymood/vue-jsx-runtime) 2 | 3 | Vue 3 jsx runtime support. 4 | 5 | The background https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html . With new jsx runtime support, which means a JSX ast standard, every lib can have its own jsx syntax with small limits. 6 | 7 | [Examples](https://github.com/dolymood/vue-jsx-runtime-examples) with TS: 8 | 9 | - [vite](https://github.com/dolymood/vue-jsx-runtime-examples/tree/main/vite) with esbuild usage 10 | - [vue-cli](https://github.com/dolymood/vue-jsx-runtime-examples/tree/main/vue-cli) with babel usage 11 | - [swc](https://github.com/dolymood/vue-jsx-runtime-examples/tree/main/swc) 12 | 13 | TODO: 14 | 15 | - optimize, transformOn, isCustomElement ... 16 | - dev validation 17 | - more tests 18 | - more features 19 | 20 | ## Installation 21 | 22 | Install the plugin with: 23 | 24 | ```bash 25 | pnpm add vue-jsx-runtime 26 | # or 27 | npm install vue-jsx-runtime 28 | ``` 29 | 30 | ## Usage 31 | 32 | ### In Babel 33 | 34 | ```js 35 | // babel plugin 36 | plugins: [ 37 | [ 38 | // add @babel/plugin-transform-react-jsx 39 | '@babel/plugin-transform-react-jsx', 40 | { 41 | throwIfNamespace: false, 42 | runtime: 'automatic', 43 | importSource: 'vue-jsx-runtime' 44 | } 45 | ], 46 | ], 47 | ``` 48 | ### In TypeScript 49 | 50 | `tsconfig.json`: 51 | 52 | ```json 53 | { 54 | "compilerOptions": { 55 | "jsx": "react-jsxdev", /* 'react-jsx' or 'react-jsxdev'. You can also use 'preserve' to use babel or other tools to handle jsx*/ 56 | "jsxImportSource": "vue-jsx-runtime" 57 | } 58 | } 59 | ``` 60 | 61 | If you used with Babel, you need to set the config: 62 | 63 | ```json 64 | { 65 | "compilerOptions": { 66 | "jsx": "preserve", /* 'react-jsx' or 'react-jsxdev'. You can also use 'preserve' to use babel or other tools to handle jsx*/ 67 | } 68 | } 69 | ``` 70 | 71 | ### In Other Tools 72 | 73 | If you use some tool which support jsx-runtime, like [swc](https://swc.rs/), you can use like this: 74 | 75 | `.swcrc`: 76 | 77 | ```json 78 | { 79 | "jsc": { 80 | "transform": { 81 | "react": { 82 | "runtime": "automatic", 83 | "importSource": "vue-jsx-runtime" 84 | } 85 | } 86 | } 87 | } 88 | ``` 89 | 90 | More details, see https://swc.rs/docs/configuration/compilation#jsctransformreact 91 | 92 | About [esbuild](https://github.com/evanw/esbuild/), see https://github.com/evanw/esbuild/issues/1172 and a hack way https://github.com/evanw/esbuild/issues/832 . https://github.com/evanw/esbuild/issues/334#issuecomment-711444731 . 93 | 94 | ## Syntax 95 | 96 | ### Content 97 | 98 | Functional component: 99 | 100 | ```jsx 101 | const App = () =>
Vue 3.0
; 102 | ``` 103 | 104 | with render 105 | 106 | ```jsx 107 | const App = { 108 | render() { 109 | return
Vue 3.0
; 110 | }, 111 | } 112 | ``` 113 | 114 | ```jsx 115 | import { withModifiers, defineComponent } from "vue"; 116 | 117 | const App = defineComponent({ 118 | setup() { 119 | const count = ref(0); 120 | 121 | const inc = () => { 122 | count.value++; 123 | }; 124 | 125 | return () => ( 126 |
{count.value}
127 | ); 128 | }, 129 | }); 130 | ``` 131 | 132 | Fragment 133 | 134 | ```jsx 135 | const App = () => ( 136 | <> 137 | I'm 138 | Fragment 139 | 140 | ); 141 | ``` 142 | 143 | ### Attributes / Props 144 | 145 | ```jsx 146 | const App = () => ; 147 | ``` 148 | 149 | with a dynamic binding: 150 | 151 | ```jsx 152 | const placeholderText = "email"; 153 | const App = () => ; 154 | ``` 155 | 156 | ### Directives 157 | 158 | #### v-show 159 | 160 | ```jsx 161 | const App = { 162 | data() { 163 | return { visible: true }; 164 | }, 165 | render() { 166 | return ; 167 | }, 168 | }; 169 | ``` 170 | 171 | #### v-model 172 | 173 | A little different with `@vue/babel-plugin-jsx`. 174 | 175 | Syntax: 176 | ``` 177 | v-model={[object, ["path/key"], argument, ["modifier"]]} 178 | ``` 179 | 180 | ##### Recommend: 181 | 182 | ```jsx 183 | const val = ref(1); // val.value will be 1 184 | // jsx 185 | // do not use v-model={val.value} 186 | ``` 187 | 188 | ```jsx 189 | 190 | ``` 191 | 192 | `v-model` will use `val["value"]` to getter or setter by default. 193 | 194 | ##### Other usage 195 | 196 | ```jsx 197 | const val = ref(1); 198 | 199 | 200 | ``` 201 | 202 | ```jsx 203 | 204 | ``` 205 | 206 | Will compile to: 207 | 208 | ```js 209 | h(A, { 210 | argument: val["value"], 211 | argumentModifiers: { 212 | modifier: true, 213 | }, 214 | "onUpdate:argument": ($event) => (val["value"] = $event), 215 | }); 216 | ``` 217 | 218 | #### custom directive 219 | 220 | Recommended when using string arguments 221 | 222 | ```jsx 223 | const App = { 224 | directives: { custom: customDirective }, 225 | setup() { 226 | return () => ; 227 | }, 228 | }; 229 | ``` 230 | 231 | ```jsx 232 | const App = { 233 | directives: { custom: customDirective }, 234 | setup() { 235 | return () => ; 236 | }, 237 | }; 238 | ``` 239 | 240 | ### Slot 241 | 242 | #### Recommend 243 | 244 | Use object slots: 245 | 246 | ```jsx 247 | const A = (props, { slots }) => ( 248 | <> 249 |

{ slots.default ? slots.default() : 'foo' }

250 |

{ slots.bar?.() }

251 | 252 | ); 253 | 254 | const App = { 255 | setup() { 256 | return () => ( 257 | <> 258 | 259 | {{ 260 | default: () =>
A
, 261 | bar: () => B, 262 | }} 263 | 264 | {() => "foo"} 265 | 266 | ); 267 | }, 268 | }; 269 | ``` 270 | 271 | #### Use v-slots 272 | 273 | > Note: In `jsx`, _`v-slot`_ should be replace with **`v-slots`** 274 | 275 | ```jsx 276 | const App = { 277 | setup() { 278 | const slots = { 279 | bar: () => B, 280 | }; 281 | return () => ( 282 | 283 |
A
284 | 285 | ); 286 | }, 287 | }; 288 | // or 289 | const App = { 290 | setup() { 291 | const slots = { 292 | default: () =>
A
, 293 | bar: () => B, 294 | }; 295 | return () => ; 296 | }, 297 | }; 298 | ``` 299 | 300 | ## Different with [vue jsx-next](https://github.com/vuejs/jsx-next) 301 | 302 | - `jsx-next` is a plugin for `Babel` only. 303 | - `vue-jsx-runtime` can be used with `Babel`, `TypeScript`, `swc`, `esbuild` and more. 304 | 305 | `vue-jsx-runtime` limits: 306 | 307 | - can not merge ele/component props 308 | - `v-model` syntax is little different with `jsx-next` - `v-model` 309 | -------------------------------------------------------------------------------- /__tests__/jsx.spec.tsx: -------------------------------------------------------------------------------- 1 | // use https://github.com/vuejs/jsx-next/tree/dev/packages/babel-plugin-jsx test cases 2 | import { 3 | reactive, 4 | ref, 5 | defineComponent, 6 | CSSProperties, 7 | ComponentPublicInstance, 8 | Transition, 9 | } from 'vue' 10 | import { shallowMount, mount, VueWrapper } from '@vue/test-utils' 11 | 12 | const patchFlagExpect = ( 13 | wrapper: VueWrapper, 14 | flag: number, 15 | dynamic: string[] | null, 16 | ) => { 17 | // todo patchFlag 18 | // const { patchFlag, dynamicProps } = wrapper.vm.$.subTree as any 19 | 20 | // expect(patchFlag).toBe(flag) 21 | // expect(dynamicProps).toEqual(dynamic) 22 | } 23 | 24 | describe('Transform JSX', () => { 25 | test('should render with render function', () => { 26 | const wrapper = shallowMount({ 27 | render() { 28 | return
123
29 | }, 30 | }) 31 | expect(wrapper.text()).toBe('123') 32 | }) 33 | 34 | test('should render with setup', () => { 35 | const wrapper = shallowMount({ 36 | setup() { 37 | return () =>
123
38 | }, 39 | }) 40 | expect(wrapper.text()).toBe('123') 41 | }) 42 | 43 | test('Extracts attrs', () => { 44 | const wrapper = shallowMount({ 45 | setup() { 46 | return () =>
47 | }, 48 | }) 49 | expect(wrapper.element.id).toBe('hi') 50 | }) 51 | 52 | test('Binds attrs', () => { 53 | const id = 'foo' 54 | const wrapper = shallowMount({ 55 | setup() { 56 | return () =>
{id}
57 | }, 58 | }) 59 | expect(wrapper.text()).toBe('foo') 60 | }) 61 | 62 | test('should not fallthrough with inheritAttrs: false', () => { 63 | const Child = defineComponent({ 64 | props: { 65 | foo: Number, 66 | }, 67 | setup(props) { 68 | return () =>
{props.foo}
69 | }, 70 | }) 71 | 72 | Child.inheritAttrs = false 73 | 74 | const wrapper = mount({ 75 | render() { 76 | return 77 | }, 78 | }) 79 | expect(wrapper.classes()).toStrictEqual([]) 80 | expect(wrapper.text()).toBe('1') 81 | }) 82 | 83 | test('Fragment', () => { 84 | const Child = () =>
123
85 | 86 | Child.inheritAttrs = false 87 | 88 | const wrapper = mount({ 89 | setup() { 90 | return () => ( 91 | <> 92 | 93 |
456
94 | 95 | ) 96 | }, 97 | }) 98 | 99 | expect(wrapper.html()).toBe('
123
456
') 100 | }) 101 | 102 | test('nested component', () => { 103 | const A = { 104 | B: defineComponent({ 105 | setup() { 106 | return () =>
123
107 | }, 108 | }), 109 | } 110 | 111 | A.B.inheritAttrs = false 112 | 113 | const wrapper = mount(() => ) 114 | 115 | expect(wrapper.html()).toBe('
123
') 116 | }) 117 | 118 | test('xlink:href', () => { 119 | const wrapper = shallowMount({ 120 | setup() { 121 | return () => 122 | }, 123 | }) 124 | expect(wrapper.attributes()['xlink:href']).toBe('#name') 125 | }) 126 | 127 | test('Merge class', () => { 128 | const wrapper = shallowMount({ 129 | setup() { 130 | // @ts-ignore 131 | return () =>
132 | }, 133 | }) 134 | // DIFFERENT: vue-jsx-runtime can not merge props 135 | // expect(wrapper.classes().sort()).toEqual(['a', 'b'].sort()) 136 | expect(wrapper.classes().sort()).toEqual(['b'].sort()) 137 | }) 138 | 139 | test('Merge style', () => { 140 | const propsA = { 141 | style: { 142 | color: 'red', 143 | } as CSSProperties, 144 | } 145 | const propsB = { 146 | style: { 147 | color: 'blue', 148 | width: '300px', 149 | height: '300px', 150 | } as CSSProperties, 151 | } 152 | const wrapper = shallowMount({ 153 | setup() { 154 | // @ts-ignore 155 | return () =>
156 | }, 157 | }) 158 | expect(wrapper.html()).toBe( 159 | '
', 160 | ) 161 | }) 162 | 163 | test('JSXSpreadChild', () => { 164 | const a = ['1', '2'] 165 | const wrapper = shallowMount({ 166 | setup() { 167 | return () =>
{[...a]}
168 | }, 169 | }) 170 | expect(wrapper.text()).toBe('12') 171 | }) 172 | 173 | test('domProps input[value]', () => { 174 | const val = 'foo' 175 | const wrapper = shallowMount({ 176 | setup() { 177 | return () => 178 | }, 179 | }) 180 | expect(wrapper.html()).toBe('') 181 | }) 182 | 183 | test('domProps input[checked]', () => { 184 | const val = true 185 | const wrapper = shallowMount({ 186 | setup() { 187 | return () => 188 | }, 189 | }) 190 | 191 | expect(wrapper.vm.$.subTree?.props?.checked).toBe(val) 192 | }) 193 | 194 | test('domProps option[selected]', () => { 195 | const val = true 196 | const wrapper = shallowMount({ 197 | render() { 198 | return calls.push(4)} 247 | hook-insert={() => calls.push(2)} 248 | /> 249 | ) 250 | }, 251 | }) 252 | 253 | expect(wrapper.attributes('id')).toBe('hehe') 254 | expect(wrapper.attributes('href')).toBe('huhu') 255 | expect(wrapper.text()).toBe('2') 256 | expect(wrapper.classes()).toEqual(expect.arrayContaining(['a', 'b', 'c'])) 257 | 258 | await wrapper.trigger('click') 259 | 260 | // expect(calls).toEqual(expect.arrayContaining([3, 4])) 261 | expect(calls).toEqual(expect.arrayContaining([4])) 262 | }) 263 | }) 264 | 265 | describe('directive', () => { 266 | test('vHtml', () => { 267 | const wrapper = shallowMount({ 268 | setup() { 269 | const html = '
foo
' 270 | return () =>

271 | }, 272 | }) 273 | expect(wrapper.html()).toBe('

foo

') 274 | }) 275 | 276 | test('vText', () => { 277 | const text = 'foo' 278 | const wrapper = shallowMount({ 279 | setup() { 280 | return () =>
281 | }, 282 | }) 283 | expect(wrapper.html()).toBe('
foo
') 284 | }) 285 | }) 286 | 287 | describe('slots', () => { 288 | test('with default', () => { 289 | const A = defineComponent({ 290 | setup(_, { slots }) { 291 | return () => ( 292 |
293 | {slots.default?.()} 294 | {slots.foo?.('val')} 295 |
296 | ) 297 | }, 298 | }) 299 | 300 | A.inheritAttrs = false 301 | 302 | const wrapper = mount({ 303 | setup() { 304 | return () => ( 305 | val }}> 306 | default 307 | 308 | ) 309 | }, 310 | }) 311 | 312 | expect(wrapper.html()).toBe('
defaultval
') 313 | }) 314 | 315 | test('without default', () => { 316 | const A = defineComponent({ 317 | setup(_, { slots }) { 318 | return () =>
{slots.foo?.('foo')}
319 | }, 320 | }) 321 | 322 | A.inheritAttrs = false 323 | 324 | const wrapper = mount({ 325 | setup() { 326 | return () => val }} /> 327 | }, 328 | }) 329 | 330 | expect(wrapper.html()).toBe('
foo
') 331 | }) 332 | }) 333 | 334 | describe('PatchFlags', () => { 335 | test('static', () => { 336 | const wrapper = shallowMount({ 337 | setup() { 338 | return () =>
static
339 | }, 340 | }) 341 | patchFlagExpect(wrapper, 0, null) 342 | }) 343 | 344 | test('props', async () => { 345 | const wrapper = mount({ 346 | setup() { 347 | const visible = ref(true) 348 | const onClick = () => { 349 | visible.value = false 350 | } 351 | return () => ( 352 |
353 | NEED_PATCH 354 |
355 | ) 356 | }, 357 | }) 358 | 359 | patchFlagExpect(wrapper, 8, ['onClick']) 360 | await wrapper.trigger('click') 361 | expect(wrapper.html()).toBe('
NEED_PATCH
') 362 | }) 363 | 364 | test('full props', async () => { 365 | // DIFFERENT: vue-jsx-runtime can not merge props 366 | const wrapper = mount({ 367 | setup() { 368 | const bindProps = reactive({ class: 'a', style: { marginTop: 10 } }) 369 | const onClick = () => { 370 | bindProps.class = 'b' 371 | } 372 | 373 | return () => ( 374 |
375 | full props 376 |
377 | ) 378 | }, 379 | }) 380 | patchFlagExpect(wrapper, 16, ['onClick']) 381 | 382 | await wrapper.trigger('click') 383 | 384 | expect(wrapper.classes().sort()).toEqual(['b'].sort()) 385 | }) 386 | }) 387 | 388 | describe('variables outside slots', () => { 389 | const A = defineComponent({ 390 | props: { 391 | inc: Function, 392 | }, 393 | render() { 394 | return this.$slots.default?.() 395 | }, 396 | }) 397 | 398 | A.inheritAttrs = false 399 | 400 | test('internal', async () => { 401 | const wrapper = mount( 402 | defineComponent({ 403 | data() { 404 | return { 405 | val: 0, 406 | } 407 | }, 408 | methods: { 409 | inc() { 410 | this.val += 1 411 | }, 412 | }, 413 | render() { 414 | const attrs = { 415 | innerHTML: `${this.val}`, 416 | } 417 | return ( 418 | 419 |
420 | 421 |