/ core Public
fix(jsx-runtime): fix automatic runtime implementation #7959
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge.
The JSX automatic runtime consists of two modules. These modules require different exports.
vue/jsx-runtimeis for production. This has the following exports:
vue/jsx-dev-runtimeis for development. This has the following exports:
Whereas a JSX pragma of the classic runtime accepts children as the 3rd..nth arguments, in the automatic runtime this is passed as the
childrenprop. If the JSX element has one child, the
jsxfunction is used and
childrenis that child. If the JSX element has more, the
jsxsfunction is called and
childrenis 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,
vue/jsx-dev-runtimemodule is used intead. This is similar to
jsxs, but it accepts more arguments.
The 4th argument determines if the production runtime would use
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
thisin 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.
This fixes some bugs introduced in #7958.
I am familiar with JSX transforms, but not with Vue. There may be better ways to fix this in a Vue specific way. Also I don’t know how to test this.
For reference, see the JS output in https://www.typescriptlang.org/play?jsx=4#code/KYDwDg9gTgLgBAYwgOwM7wGYQnAvHAbQCg44AeAEwEsA3OAegD4AaE86mxs+jlty2owDeAcgCGIgL7derUgM6iJk0QCMpMwXPaCyYJnoM8tRALpEgA. Try using both the
JSX. You can ignore the type errors.