--jsx, jsx — Set this to "automatic" to opt in to this new transform
--jsx-dev, jsxDev — Toggles development mode for the automatic runtime
--jsx-import-source, jsxImportSource — Overrides the root import for runtime functions (default "react")
New JSX pragma comments:
@jsxRuntime — Sets the runtime (automatic or classic)
@jsxImportSource — Sets the import source (only valid with automatic runtime)
The existing @jsxFragment and @jsxFactory pragma comments are only valid with "classic" runtime.
TSConfig resolving:
Along with accepting the new options directly via CLI or API, option inference from tsconfig.json compiler options was also implemented:
"jsx": "preserve" or "jsx": "react-native" → Same as --jsx=preserve in esbuild
"jsx": "react" → Same as --jsx=transform in esbuild (which is the default behavior)
"jsx": "react-jsx" → Same as --jsx=automatic in esbuild
"jsx": "react-jsxdev" → Same as --jsx=automatic --jsx-dev in esbuild
It also reads the value of "jsxImportSource" from tsconfig.json if specified.
For react-jsx it's important to note that it doesn't implicitly disable --jsx-dev. This is to support the case where a user sets "react-jsx" in their tsconfig.json but then toggles development mode directly in esbuild.
esbuild vs Babel vs TS vs...
There are a few differences between the various technologies that implement automatic JSX runtimes. The JSX transform in esbuild follows a mix of Babel's and TypeScript's behavior:
When an element has __source or __self props:
Babel: Print an error about a deprecated transform plugin
TypeScript: Allow the props
swc: Hard crash
esbuild: Print an error — Following Babel was chosen for this one because this might help people catch configuration issues where JSX files are being parsed by multiple tools
Element has an "implicit true" key prop, e.g. <a key />:
Babel: Print an error indicating that "key" props require an explicit value
TypeScript: Silently omit the "key" prop
swc: Hard crash
esbuild: Print an error like Babel — This might help catch legitimate programming mistakes
Element has spread children, e.g. <a>{...children}</a>
Babel: Print an error stating that React doesn't support spread children
TypeScript: Use static jsx function and pass children as-is, including spread operator
--jsx, jsx — Set this to "automatic" to opt in to this new transform
--jsx-dev, jsxDev — Toggles development mode for the automatic runtime
--jsx-import-source, jsxImportSource — Overrides the root import for runtime functions (default "react")
New JSX pragma comments:
@jsxRuntime — Sets the runtime (automatic or classic)
@jsxImportSource — Sets the import source (only valid with automatic runtime)
The existing @jsxFragment and @jsxFactory pragma comments are only valid with "classic" runtime.
TSConfig resolving:
Along with accepting the new options directly via CLI or API, option inference from tsconfig.json compiler options was also implemented:
"jsx": "preserve" or "jsx": "react-native" → Same as --jsx=preserve in esbuild
"jsx": "react" → Same as --jsx=transform in esbuild (which is the default behavior)
"jsx": "react-jsx" → Same as --jsx=automatic in esbuild
"jsx": "react-jsxdev" → Same as --jsx=automatic --jsx-dev in esbuild
It also reads the value of "jsxImportSource" from tsconfig.json if specified.
For react-jsx it's important to note that it doesn't implicitly disable --jsx-dev. This is to support the case where a user sets "react-jsx" in their tsconfig.json but then toggles development mode directly in esbuild.
esbuild vs Babel vs TS vs...
There are a few differences between the various technologies that implement automatic JSX runtimes. The JSX transform in esbuild follows a mix of Babel's and TypeScript's behavior:
When an element has __source or __self props:
Babel: Print an error about a deprecated transform plugin
TypeScript: Allow the props
swc: Hard crash
esbuild: Print an error — Following Babel was chosen for this one because this might help people catch configuration issues where JSX files are being parsed by multiple tools
Element has an "implicit true" key prop, e.g. <a key />:
Babel: Print an error indicating that "key" props require an explicit value
TypeScript: Silently omit the "key" prop
swc: Hard crash
esbuild: Print an error like Babel — This might help catch legitimate programming mistakes
Element has spread children, e.g. <a>{...children}</a>
Babel: Print an error stating that React doesn't support spread children
TypeScript: Use static jsx function and pass children as-is, including spread operator
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Bumps esbuild from 0.13.12 to 0.14.51.
Release notes
Sourced from esbuild's releases.
... (truncated)
Changelog
Sourced from esbuild's changelog.
... (truncated)
Commits
4402c76
publish 0.14.51 to npm0137224
fix #334: support automatic JSX runtime (#2349)7a268da
scan over template string ranges in error messagese2830ae
publish 0.14.50 to npm8759590
fix #2362: addplatform
to the transform API09cbb59
update internal typescript 4.5 => 4.769d356b
fix #2411: ignore tsconfigextends
directories7208846
generate"names"
in source maps (#2415)98ab5e1
warn about duplicate attributes in jsx elements8c6c39a
improve the error message for generic arrow in tsxDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)