With this release, you can now easily substitute one package for another at build time with the new alias feature. For example, --alias:oldpkg=newpkg replaces all imports of oldpkg with newpkg. One use case for this is easily replacing a node-only package with a browser-friendly package in 3rd-party code that you don't control. These new substitutions happen first before all of esbuild's existing path resolution logic.
Note that when an import path is substituted using an alias, the resulting import path is resolved in the working directory instead of in the directory containing the source file with the import path. If needed, the working directory can be set with the cd command when using the CLI or with the absWorkingDir setting when using the JS or Go APIs.
Fix crash when pretty-printing minified JSX with object spread of object literal with computed property (#2697)
JSX elements are translated to JavaScript function calls and JSX element attributes are translated to properties on a JavaScript object literal. These properties are always either strings (e.g. in <x y />, y is a string) or an object spread (e.g. in <x {...y} />, y is an object spread) because JSX doesn't provide syntax for directly passing a computed property as a JSX attribute. However, esbuild's minifier has a rule that tries to inline object spread with an inline object literal in JavaScript. For example, x = { ...{ y } } is minified to x={y} when minification is enabled. This means that there is a way to generate a non-string non-spread JSX attribute in esbuild's internal representation. One example is with <x {...{ [y]: z }} />. When minification is enabled, esbuild's internal representation of this is something like <x [y]={z} /> due to object spread inlining, which is not valid JSX syntax. If this internal representation is then pretty-printed as JSX using --minify --jsx=preserve, esbuild previously crashed when trying to print this invalid syntax. With this release, esbuild will now print <x {...{[y]:z}}/> in this scenario instead of crashing.
When two or more CSS rules are exactly the same (even if they are not adjacent), all but the last one can safely be removed:
/* Before */
a { color: red; }
span { font-weight: bold; }
a { color: red; }
/* After */
span { font-weight: bold; }
a { color: red; }
Previously esbuild only did this transformation within a single source file. But with this release, esbuild will now do this transformation across source files, which may lead to smaller CSS output if the same rules are repeated across multiple CSS source files in the same bundle. This transformation is only enabled when minifying (specifically when syntax minification is enabled).
The target setting in esbuild allows you to enable or disable JavaScript syntax features for a given version of a set of target JavaScript VMs. Previously Deno was not one of the JavaScript VMs that esbuild supported with target, but it will now be supported starting from this release. For example, versions of Deno older than v1.2 don't support the new ||= operator, so adding e.g. --target=deno1.0 to esbuild now lets you tell esbuild to transpile ||= to older JavaScript.
A recent change to Node v19 added a non-writable crypto property to the global object: nodejs/node#44897. This conflicts with Go's WebAssembly shim code, which overwrites the global crypto property. As a result, all Go-based WebAssembly code that uses the built-in shim (including esbuild) is now broken on Node v19. This release of esbuild fixes the issue by reconfiguring the global crypto property to be writable before invoking Go's WebAssembly shim code.
Fix CSS dimension printing exponent confusion edge case (#2677)
In CSS, a dimension token has a numeric "value" part and an identifier "unit" part. For example, the dimension token 32px has a value of 32 and a unit of px. The unit can be any valid CSS identifier. The value can be any number in floating-point format including an optional exponent (e.g. -3.14e-0 has an exponent of e-0). The full details of this syntax are here: https://www.w3.org/TR/css-syntax-3/.
To maintain the integrity of the dimension token through the printing process, esbuild must handle the edge case where the unit looks like an exponent. One such case is the dimension 1e\32 which has the value 1 and the unit e2. It would be bad if this dimension token was printed such that a CSS parser would parse it as a number token with the value 1e2 instead of a dimension token. The way esbuild currently does this is to escape the leading e in the dimension unit, so esbuild would parse 1e\32 but print 1\65 2 (both 1e\32 and 1\65 2 represent a dimension token with a value of 1 and a unit of e2).
However, there is an even narrower edge case regarding this edge case. If the value part of the dimension token itself has an e, then it's not necessary to escape the e in the dimension unit because a CSS parser won't confuse the unit with the exponent even though it looks like one (since a number can only have at most one exponent). This came up because the grammar for the CSS unicode-range property uses a hack that lets you specify a hexadecimal range without quotes even though CSS has no token for a hexadecimal range. The hack is to allow the hexadecimal range to be parsed as a dimension token and optionally also a number token. Here is the grammar for unicode-range:
With this release, you can now easily substitute one package for another at build time with the new alias feature. For example, --alias:oldpkg=newpkg replaces all imports of oldpkg with newpkg. One use case for this is easily replacing a node-only package with a browser-friendly package in 3rd-party code that you don't control. These new substitutions happen first before all of esbuild's existing path resolution logic.
Note that when an import path is substituted using an alias, the resulting import path is resolved in the working directory instead of in the directory containing the source file with the import path. If needed, the working directory can be set with the cd command when using the CLI or with the absWorkingDir setting when using the JS or Go APIs.
Fix crash when pretty-printing minified JSX with object spread of object literal with computed property (#2697)
JSX elements are translated to JavaScript function calls and JSX element attributes are translated to properties on a JavaScript object literal. These properties are always either strings (e.g. in <x y />, y is a string) or an object spread (e.g. in <x {...y} />, y is an object spread) because JSX doesn't provide syntax for directly passing a computed property as a JSX attribute. However, esbuild's minifier has a rule that tries to inline object spread with an inline object literal in JavaScript. For example, x = { ...{ y } } is minified to x={y} when minification is enabled. This means that there is a way to generate a non-string non-spread JSX attribute in esbuild's internal representation. One example is with <x {...{ [y]: z }} />. When minification is enabled, esbuild's internal representation of this is something like <x [y]={z} /> due to object spread inlining, which is not valid JSX syntax. If this internal representation is then pretty-printed as JSX using --minify --jsx=preserve, esbuild previously crashed when trying to print this invalid syntax. With this release, esbuild will now print <x {...{[y]:z}}/> in this scenario instead of crashing.
When two or more CSS rules are exactly the same (even if they are not adjacent), all but the last one can safely be removed:
/* Before */
a { color: red; }
span { font-weight: bold; }
a { color: red; }
/* After */
span { font-weight: bold; }
a { color: red; }
Previously esbuild only did this transformation within a single source file. But with this release, esbuild will now do this transformation across source files, which may lead to smaller CSS output if the same rules are repeated across multiple CSS source files in the same bundle. This transformation is only enabled when minifying (specifically when syntax minification is enabled).
The target setting in esbuild allows you to enable or disable JavaScript syntax features for a given version of a set of target JavaScript VMs. Previously Deno was not one of the JavaScript VMs that esbuild supported with target, but it will now be supported starting from this release. For example, versions of Deno older than v1.2 don't support the new ||= operator, so adding e.g. --target=deno1.0 to esbuild now lets you tell esbuild to transpile ||= to older JavaScript.
A recent change to Node v19 added a non-writable crypto property to the global object: nodejs/node#44897. This conflicts with Go's WebAssembly shim code, which overwrites the global crypto property. As a result, all Go-based WebAssembly code that uses the built-in shim (including esbuild) is now broken on Node v19. This release of esbuild fixes the issue by reconfiguring the global crypto property to be writable before invoking Go's WebAssembly shim code.
Fix CSS dimension printing exponent confusion edge case (#2677)
In CSS, a dimension token has a numeric "value" part and an identifier "unit" part. For example, the dimension token 32px has a value of 32 and a unit of px. The unit can be any valid CSS identifier. The value can be any number in floating-point format including an optional exponent (e.g. -3.14e-0 has an exponent of e-0). The full details of this syntax are here: https://www.w3.org/TR/css-syntax-3/.
To maintain the integrity of the dimension token through the printing process, esbuild must handle the edge case where the unit looks like an exponent. One such case is the dimension 1e\32 which has the value 1 and the unit e2. It would be bad if this dimension token was printed such that a CSS parser would parse it as a number token with the value 1e2 instead of a dimension token. The way esbuild currently does this is to escape the leading e in the dimension unit, so esbuild would parse 1e\32 but print 1\65 2 (both 1e\32 and 1\65 2 represent a dimension token with a value of 1 and a unit of e2).
However, there is an even narrower edge case regarding this edge case. If the value part of the dimension token itself has an e, then it's not necessary to escape the e in the dimension unit because a CSS parser won't confuse the unit with the exponent even though it looks like one (since a number can only have at most one exponent). This came up because the grammar for the CSS unicode-range property uses a hack that lets you specify a hexadecimal range without quotes even though CSS has no token for a hexadecimal range. The hack is to allow the hexadecimal range to be parsed as a dimension token and optionally also a number token. Here is the grammar for unicode-range:
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.15.10 to 0.15.16.
Release notes
Sourced from esbuild's releases.
... (truncated)
Changelog
Sourced from esbuild's changelog.
... (truncated)
Commits
50ae05b
publish 0.15.16 to npmd8d7362
alias: more tests, allow relative substitutionsa7eb789
fix #2191: add a path alias feature4e9f9c1
fix indentation for some tests89e4520
fix #2697: jsx + spread + computed property crashef348a3
jsx: pretty-print single-line JSX elements478062d
publish 0.15.15 to npme7ad5fb
remove duplicate css rules across files (#2688)6664172
test duplicate rule merging after bundlinga73c4e9
css: merge adjacent selectors forward not backwardDependabot 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)