![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
esbuild-wasm
Advanced tools
Package description
The esbuild-wasm package is a WebAssembly-based version of the esbuild bundler and minifier. It provides extremely fast build times and is designed to be used in environments where native binaries cannot be executed, such as in browsers or some serverless platforms. It supports transforming, bundling, and minifying JavaScript and TypeScript files.
Bundling JavaScript
This code initializes esbuild-wasm and bundles a JavaScript file, outputting a single bundled file. It demonstrates how to set up and execute a basic bundling process.
const esbuild = require('esbuild-wasm');
esbuild.initialize({ worker: true, wasmURL: '/path/to/esbuild.wasm' }).then(() => {
esbuild.build({
entryPoints: ['input.js'],
bundle: true,
outfile: 'output.js'
}).catch(() => process.exit(1));
});
Minifying CSS
This example shows how to use esbuild-wasm to minify a CSS file. It sets up the esbuild environment and performs minification, outputting the minified CSS.
const esbuild = require('esbuild-wasm');
esbuild.initialize({ worker: true, wasmURL: '/path/to/esbuild.wasm' }).then(() => {
esbuild.build({
entryPoints: ['input.css'],
minify: true,
outfile: 'output.css'
}).catch(() => process.exit(1));
});
Transpiling TypeScript
This code snippet demonstrates how to transpile TypeScript into JavaScript using esbuild-wasm. It includes setting up the environment, specifying the loader for TypeScript files, and bundling the output.
const esbuild = require('esbuild-wasm');
esbuild.initialize({ worker: true, wasmURL: '/path/to/esbuild.wasm' }).then(() => {
esbuild.build({
entryPoints: ['input.ts'],
loader: { '.ts': 'ts' },
outfile: 'output.js',
bundle: true
}).catch(() => process.exit(1));
});
Webpack is a popular JavaScript module bundler with a vast ecosystem of plugins. It offers more configuration options and plugins compared to esbuild-wasm but is generally slower in terms of build speed.
Rollup is another module bundler that focuses on producing efficient bundles. It is known for its tree-shaking capabilities, which are similar to esbuild-wasm, but Rollup typically has slower build times and less efficient minification.
Parcel is a web application bundler that requires zero configuration for quick setup. It provides fast build times similar to esbuild-wasm and supports various file types natively, but it might not reach the same speed for larger projects.
Changelog
0.19.6
Fix a constant folding bug with bigint equality
This release fixes a bug where esbuild incorrectly checked for bigint equality by checking the equality of the bigint literal text. This is correct if the bigint doesn't have a radix because bigint literals without a radix are always in canonical form (since leading zeros are not allowed). However, this is incorrect if the bigint has a radix (e.g. 0x123n
) because the canonical form is not enforced when a radix is present.
// Original code
console.log(!!0n, !!1n, 123n === 123n)
console.log(!!0x0n, !!0x1n, 123n === 0x7Bn)
// Old output
console.log(false, true, true);
console.log(true, true, false);
// New output
console.log(false, true, true);
console.log(!!0x0n, !!0x1n, 123n === 0x7Bn);
Add some improvements to the JavaScript minifier
This release adds more cases to the JavaScript minifier, including support for inlining String.fromCharCode
and String.prototype.charCodeAt
when possible:
// Original code
document.onkeydown = e => e.keyCode === 'A'.charCodeAt(0) && console.log(String.fromCharCode(55358, 56768))
// Old output (with --minify)
document.onkeydown=o=>o.keyCode==="A".charCodeAt(0)&&console.log(String.fromCharCode(55358,56768));
// New output (with --minify)
document.onkeydown=o=>o.keyCode===65&&console.log("🧀");
In addition, immediately-invoked function expressions (IIFEs) that return a single expression are now inlined when minifying. This makes it possible to use IIFEs in combination with @__PURE__
annotations to annotate arbitrary expressions as side-effect free without the IIFE wrapper impacting code size. For example:
// Original code
const sideEffectFreeOffset = /* @__PURE__ */ (() => computeSomething())()
use(sideEffectFreeOffset)
// Old output (with --minify)
const e=(()=>computeSomething())();use(e);
// New output (with --minify)
const e=computeSomething();use(e);
Automatically prefix the mask-composite
CSS property for WebKit (#3493)
The mask-composite
property will now be prefixed as -webkit-mask-composite
for older WebKit-based browsers. In addition to prefixing the property name, handling older browsers also requires rewriting the values since WebKit uses non-standard names for the mask composite modes:
/* Original code */
div {
mask-composite: add, subtract, intersect, exclude;
}
/* New output (with --target=chrome100) */
div {
-webkit-mask-composite:
source-over,
source-out,
source-in,
xor;
mask-composite:
add,
subtract,
intersect,
exclude;
}
Avoid referencing this
from JSX elements in derived class constructors (#3454)
When you enable --jsx=automatic
and --jsx-dev
, the JSX transform is supposed to insert this
as the last argument to the jsxDEV
function. I'm not sure exactly why this is and I can't find any specification for it, but in any case this causes the generated code to crash when you use a JSX element in a derived class constructor before the call to super()
as this
is not allowed to be accessed at that point. For example
// Original code
class ChildComponent extends ParentComponent {
constructor() {
super(<div />)
}
}
// Problematic output (with --loader=jsx --jsx=automatic --jsx-dev)
import { jsxDEV } from "react/jsx-dev-runtime";
class ChildComponent extends ParentComponent {
constructor() {
super(/* @__PURE__ */ jsxDEV("div", {}, void 0, false, {
fileName: "<stdin>",
lineNumber: 3,
columnNumber: 15
}, this)); // The reference to "this" crashes here
}
}
The TypeScript compiler doesn't handle this at all while the Babel compiler just omits this
for the entire constructor (even after the call to super()
). There seems to be no specification so I can't be sure that this change doesn't break anything important. But given that Babel is pretty loose with this and TypeScript doesn't handle this at all, I'm guessing this value isn't too important. React's blog post seems to indicate that this value was intended to be used for a React-specific migration warning at some point, so it could even be that this value is irrelevant now. Anyway the crash in this case should now be fixed.
Allow package subpath imports to map to node built-ins (#3485)
You are now able to use a subpath import in your package to resolve to a node built-in module. For example, with a package.json
file like this:
{
"type": "module",
"imports": {
"#stream": {
"node": "stream",
"default": "./stub.js"
}
}
}
You can now import from node's stream
module like this:
import * as stream from '#stream';
console.log(Object.keys(stream));
This will import from node's stream
module when the platform is node
and from ./stub.js
otherwise.
No longer throw an error when a Symbol
is missing (#3453)
Certain JavaScript syntax features use special properties on the global Symbol
object. For example, the asynchronous iteration syntax uses Symbol.asyncIterator
. Previously esbuild's generated code for older browsers required this symbol to be polyfilled. However, starting with this release esbuild will use Symbol.for()
to construct these symbols if they are missing instead of throwing an error about a missing polyfill. This means your code no longer needs to include a polyfill for missing symbols as long as your code also uses Symbol.for()
for missing symbols.
Parse upcoming changes to TypeScript syntax (#3490, #3491)
With this release, you can now use from
as the name of a default type-only import in TypeScript code, as well as of
as the name of an await using
loop iteration variable:
import type from from 'from'
for (await using of of of) ;
This matches similar changes in the TypeScript compiler (#56376 and #55555) which will start allowing this syntax in an upcoming version of TypeScript. Please never actually write code like this.
The type-only import syntax change was contributed by @magic-akari.
Readme
This is the cross-platform WebAssembly binary for esbuild, a JavaScript bundler and minifier. See https://github.com/evanw/esbuild and the JavaScript API documentation for details.
FAQs
The cross-platform WebAssembly binary for esbuild, a JavaScript bundler.
The npm package esbuild-wasm receives a total of 2,419,706 weekly downloads. As such, esbuild-wasm popularity was classified as popular.
We found that esbuild-wasm demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.