From c8bdfe6f6ab8894c4f739ea47667d2e71953fe13 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sun, 26 Mar 2023 13:11:26 +0200 Subject: [PATCH 1/3] fix(jsx-runtime): fix automatic runtime implementation The JSX automatic runtime consists of two modules. These modules require different exports. - `vue/jsx-runtime` is for production. This has the following exports: - `jsx` - `jsxs` - `Fragment` - `vue/jsx-dev-runtime` is for development. This has the following exports: - `jsxDEV` - `Fragment` Whereas a JSX pragma of the classic runtime accepts children as the 3rd..nth arguments, in the automatic runtime this is passed as the `children` prop. If the JSX element has one child, the `jsx` function is used and `children` is that child. If the JSX element has more, the `jsxs` function is called and `children` is an array of all childrne. If no children are passed, this prop is omitted. The third argument is the key. In the classic runtime this was part of props. If the development transform is used, `jsxDEV` from the `vue/jsx-dev-runtime` module is used intead. This is similar to `jsx` / `jsxs`, but it accepts more arguments. The 4th argument determines if the production runtime would use `jsxs` or `jsx`. The 5th argument is positional information that you could use to enhance the developer experience. Note that different compilers compile the file name differently. (relative vs absolute paths) The 6th argument is the value of `this` in the scopewhere the JSX element was created. React uses this to warn about string refs. This implementation combines the production and development runtime in the same file, and uses an package exports to expose both import entry points. --- packages/vue/jsx-runtime/index.js | 19 +++++++++++++++++-- packages/vue/jsx-runtime/index.mjs | 17 ++++++++++++++++- packages/vue/package.json | 5 +++++ 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/packages/vue/jsx-runtime/index.js b/packages/vue/jsx-runtime/index.js index 703b7fe0456..1233c4504c6 100644 --- a/packages/vue/jsx-runtime/index.js +++ b/packages/vue/jsx-runtime/index.js @@ -1,4 +1,19 @@ const Vue = require('vue') -exports.jsx = Vue.h -exports.jsxDEV = Vue.h + +function jsx(type, { children, ...props }) { + return Vue.h(type, props, children) +} + +function jsxs(type, { children, ...props }) { + return Vue.h(type, props, ...children) +} + +function jsxDEV(type, props, key, isStatic) { + const fn = isStatic ? jsxs : jsx + return fn(type, props) +} + +exports.jsx = jsx +exports.jsxs = jsxs +exports.jsxDEV = jsxDEV exports.Fragment = Vue.Fragment diff --git a/packages/vue/jsx-runtime/index.mjs b/packages/vue/jsx-runtime/index.mjs index 12f3780b3cc..aa53954504d 100644 --- a/packages/vue/jsx-runtime/index.mjs +++ b/packages/vue/jsx-runtime/index.mjs @@ -1 +1,16 @@ -export { h as jsx, h as jsxDEV, Fragment } from 'vue' +import { h, Fragment } from 'vue' + +export { Fragment } + +export function jsx(type, { children, ...props }) { + return h(type, props, children) +} + +export function jsxs(type, { children, ...props }) { + return h(type, props, ...children) +} + +export function jsxDEV(type, props, key, isStatic) { + const fn = isStatic ? jsxs : jsx + return fn(type, props) +} diff --git a/packages/vue/package.json b/packages/vue/package.json index f4539036618..72be3e866f3 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -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" }, From 815648b11a4fcec4f0519c6b3ec5145018e22c30 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 28 Mar 2023 11:05:46 +0800 Subject: [PATCH 2/3] Update index.js --- packages/vue/jsx-runtime/index.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/packages/vue/jsx-runtime/index.js b/packages/vue/jsx-runtime/index.js index 1233c4504c6..255fb4490df 100644 --- a/packages/vue/jsx-runtime/index.js +++ b/packages/vue/jsx-runtime/index.js @@ -1,19 +1,10 @@ -const Vue = require('vue') +const { h, Fragment } = require('vue') function jsx(type, { children, ...props }) { - return Vue.h(type, props, children) -} - -function jsxs(type, { children, ...props }) { - return Vue.h(type, props, ...children) -} - -function jsxDEV(type, props, key, isStatic) { - const fn = isStatic ? jsxs : jsx - return fn(type, props) + return h(type, props, children) } exports.jsx = jsx -exports.jsxs = jsxs -exports.jsxDEV = jsxDEV -exports.Fragment = Vue.Fragment +exports.jsxs = jsx +exports.jsxDEV = jsx +exports.Fragment = Fragment From 9577f1c67330155b498e28006438a78d04862216 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 28 Mar 2023 11:06:18 +0800 Subject: [PATCH 3/3] Update index.mjs --- packages/vue/jsx-runtime/index.mjs | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/vue/jsx-runtime/index.mjs b/packages/vue/jsx-runtime/index.mjs index aa53954504d..92bb8a9d4ad 100644 --- a/packages/vue/jsx-runtime/index.mjs +++ b/packages/vue/jsx-runtime/index.mjs @@ -1,16 +1,12 @@ import { h, Fragment } from 'vue' -export { Fragment } - -export function jsx(type, { children, ...props }) { +function jsx(type, { children, ...props }) { return h(type, props, children) } -export function jsxs(type, { children, ...props }) { - return h(type, props, ...children) -} - -export function jsxDEV(type, props, key, isStatic) { - const fn = isStatic ? jsxs : jsx - return fn(type, props) +export { + Fragment, + jsx, + jsx as jsxs, + jsx as jsxDEV }