Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ESM build for browsers #342

Merged
merged 2 commits into from
Oct 18, 2020
Merged

Add ESM build for browsers #342

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7e23481
Add ESM build for browsers
calebeby Aug 23, 2020
245c11b
Merge remote-tracking branch 'upstream/master' into wasm-esm
calebeby Sep 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions lib/browser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ import * as common from "./common"

declare let WEB_WORKER_SOURCE_CODE: string

let build: typeof types.build = options => {
export const build: typeof types.build = options => {
throw new Error(`The "build" API only works in node`);
};

let transform: typeof types.transform = (input, options) => {
export const transform: typeof types.transform = (input, options) => {
throw new Error(`The "transform" API only works in node`);
};

let buildSync: typeof types.buildSync = options => {
export const buildSync: typeof types.buildSync = options => {
throw new Error(`The "buildSync" API only works in node`);
};

let transformSync: typeof types.transformSync = (input, options) => {
export const transformSync: typeof types.transformSync = (input, options) => {
throw new Error(`The "transformSync" API only works in node`);
};

let startService: typeof types.startService = options => {
export const startService: typeof types.startService = options => {
if (!options) throw new Error('Must provide an options object to "startService"');
if (!options.wasmURL) throw new Error('Must provide the "wasmURL" option');
return fetch(options.wasmURL).then(r => r.arrayBuffer()).then(wasm => {
Expand Down Expand Up @@ -87,4 +87,4 @@ let api: typeof types = {
startService,
};

module.exports = api;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change was needed, because without it, ESM shim code was being included in the ESM build. I switched it so that now it uses a default export as well as named exports. I took a look at the outputs of the various bundles and it seems correct. The bundle that I'm least sure about is the browser.js bundle, but it looks right as far as I can tell.

export default api
11 changes: 11 additions & 0 deletions npm/esbuild-wasm/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,17 @@
},
"main": "lib/main.js",
"browser": "lib/browser.js",
"module": "lib/browser.mjs",
"exports": {
".": {
"browser": {
"module": "./lib/browser.mjs",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ./lib/browser.mjs does not import any CJS files, so it qualifies for a "module-only optimization" as described here. I think it is not necessary to additionally have the import field, since bundlers will prefer module over import, and only node needs import, but node does not look at browser.

"script": "./lib/browser.js"
},
"node": "./lib/main.js"
},
"./": "./"
},
"types": "lib/main.d.ts",
"directories": {
"bin": "bin"
Expand Down
10 changes: 10 additions & 0 deletions scripts/esbuild.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,16 @@ function buildWasmLib(esbuildPath) {
'--define:WEB_WORKER_SOURCE_CODE=' + JSON.stringify(wasmExecMinCode + workerMinCode),
], { cwd: repoDir }).toString()
fs.writeFileSync(path.join(libDir, 'browser.js'), umdPrefix + browserJs.trim() + umdSuffix)

// Generate "npm/esbuild-wasm/browser.mjs"
const browserMjs = childProcess.execFileSync(esbuildPath, [
path.join(repoDir, 'lib', 'browser.ts'),
'--bundle',
'--target=es2020',
Copy link
Contributor Author

@calebeby calebeby Aug 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I set it to a modern target since the assumption for the .mjs build is that if people need it to work in older browsers, they can transpile it themselves.

'--format=esm',
'--define:WEB_WORKER_SOURCE_CODE=' + JSON.stringify(wasmExecMinCode + workerMinCode),
], { cwd: repoDir }).toString()
fs.writeFileSync(path.join(libDir, 'browser.mjs'), browserMjs.trim())
}

exports.buildBinary = () => {
Expand Down