Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(jsx-runtime): fix automatic runtime implementation #7959

Merged
merged 3 commits into from
Mar 28, 2023
Merged

fix(jsx-runtime): fix automatic runtime implementation #7959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c8bdfe6
fix(jsx-runtime): fix automatic runtime implementation
remcohaszing Mar 26, 2023
815648b
Update index.js
yyx990803 Mar 28, 2023
9577f1c
Update index.mjs
yyx990803 Mar 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions packages/vue/jsx-runtime/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
const Vue = require('vue')
exports.jsx = Vue.h
exports.jsxDEV = Vue.h
exports.Fragment = Vue.Fragment
const { h, Fragment } = require('vue')

function jsx(type, { children, ...props }) {
return h(type, props, children)
}

exports.jsx = jsx
exports.jsxs = jsx
exports.jsxDEV = jsx
exports.Fragment = Fragment
13 changes: 12 additions & 1 deletion packages/vue/jsx-runtime/index.mjs
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Upon closer inspection it looks like h accepts children as either a child, multiple children, or rest arguments. So this file could probably be simplified so something like this:

import { h, Fragment } from 'vue'

function jsx(type, { children, ...props }) {
  return h(type, props, children)
}

export {
  Fragment,
  jsx,
  jsx as jsxs,
  jsx as jsxDEV
}

Since props are always a newly created object when passed to jsx, the following small performance enhancement could even be made to avoid another shallow copy of props:

function jsx(type, props) {
  const { children } = props
  delete props.children
  return h(type, props, children)
}

Still, would prefer you to see the original changes to get a better understanding of the JSX automatic runtime.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes sense, the optimization also makes sense.

FYI Vue does recommend using its own JSX babel plugin which compiles JSX differently, these functions are meant for compatibility when the user opts for React-style JSX transforms.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great to see this land! Regarding “these functions are meant for compatibility when the user opts for React-style JSX transforms”, it’s good to be aware that there are differences in how React-style JSX is normally written, and what props are accepted in Vue.

Notably className vs class. But it gets quite complex around SVG (different camelcased and dash-cases attributes and tag names, xlink:href) and style (are objects accepted? Vendors prefixes with dashes or camelcase? CSS variables?).

So might be good to have some docs on how to author JSX with this, and tests that show weird SVG things work!

Original file line number Diff line number Diff line change
@@ -1 +1,12 @@
export { h as jsx, h as jsxDEV, Fragment } from 'vue'
import { h, Fragment } from 'vue'

function jsx(type, { children, ...props }) {
return h(type, props, children)
}

export {
Fragment,
jsx,
jsx as jsxs,
jsx as jsxDEV
}
5 changes: 5 additions & 0 deletions packages/vue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@
"import": "./jsx-runtime/index.mjs",
"require": "./jsx-runtime/index.js"
},
"./jsx-dev-runtime": {
"types": "./jsx-runtime/index.d.ts",
"import": "./jsx-runtime/index.mjs",
"require": "./jsx-runtime/index.js"
},
"./jsx": {
"types": "./jsx.d.ts"
},
Expand Down