Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: support npm resolution for file imports (#4135)
* feat: support npm resolution for wasm (etc.) imports * chore: add changeset * chore: only import `exports` from * fix: handle scoped npm packages * fix: improve npm package name detection * fix: set resolve.exports conditions to match other esbuild conditions * fix: add tests * chore: rebuild pnpm-lock * fix: prettier on package.json files * chore: rebuild pnpm-lock
- Loading branch information
Showing
18 changed files
with
282 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
--- | ||
"wrangler": minor | ||
--- | ||
|
||
feat: resolve npm exports for file imports | ||
|
||
Previously, when using wasm (or other static files) from an npm package, you would have to import the file like so: | ||
|
||
```js | ||
import wasm from "../../node_modules/svg2png-wasm/svg2png_wasm_bg.wasm"; | ||
``` | ||
|
||
This update now allows you to import the file like so, assuming it's exposed and available in the package's `exports` field: | ||
|
||
```js | ||
import wasm from "svg2png-wasm/svg2png_wasm_bg.wasm"; | ||
``` | ||
|
||
This will look at the package's `exports` field in `package.json` and resolve the file using [`resolve.exports`](https://www.npmjs.com/package/resolve.exports). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
dist |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# import-wasm-example | ||
|
||
`import-wasm-example` is a test fixture that imports a `wasm` file from `import-wasm-static`, testing npm module resolution with wrangler imports. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
{ | ||
"name": "import-wasm-example", | ||
"version": "1.0.1", | ||
"private": true, | ||
"description": "", | ||
"author": "", | ||
"main": "src/index.js", | ||
"scripts": { | ||
"check:type": "tsc", | ||
"test": "npx vitest run", | ||
"test:ci": "npx vitest run", | ||
"test:watch": "npx vitest", | ||
"type:tests": "tsc -p ./tests/tsconfig.json" | ||
}, | ||
"devDependencies": { | ||
"undici": "^5.9.1", | ||
"wrangler": "workspace:*", | ||
"@cloudflare/workers-tsconfig": "workspace:^" | ||
}, | ||
"dependencies": { | ||
"import-wasm-static": "workspace:^" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
// this is from the `import-wasm-static` fixture defined above | ||
// and setup inside package.json to mimic an npm package | ||
import multiply from "import-wasm-static/multiply.wasm"; | ||
|
||
export default { | ||
async fetch(request) { | ||
// just instantiate and return something | ||
// we're really just testing the import at the top of this file | ||
const multiplyModule = await WebAssembly.instantiate(multiply); | ||
return new Response(`${multiplyModule.exports.multiply(7, 3)}`); | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { resolve } from "path"; | ||
import { fetch } from "undici"; | ||
import { describe, it, beforeAll, afterAll } from "vitest"; | ||
import { runWranglerDev } from "../../shared/src/run-wrangler-long-lived"; | ||
|
||
describe("wrangler correctly imports wasm files with npm resolution", () => { | ||
let ip: string, port: number, stop: (() => Promise<unknown>) | undefined; | ||
|
||
beforeAll(async () => { | ||
({ ip, port, stop } = await runWranglerDev(resolve(__dirname, ".."), [ | ||
"--port=0", | ||
])); | ||
}); | ||
|
||
afterAll(async () => { | ||
await stop?.(); | ||
}); | ||
|
||
// if the worker compiles, is running, and returns 21 (7 * 3) we can assume that the wasm module was imported correctly | ||
it("responds", async ({ expect }) => { | ||
const response = await fetch(`http://${ip}:${port}/`); | ||
const text = await response.text(); | ||
expect(text).toBe("21"); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"extends": "@cloudflare/workers-tsconfig/tsconfig.json", | ||
"compilerOptions": { | ||
"types": ["node"] | ||
}, | ||
"include": ["**/*.ts", "../../../node-types.d.ts"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
{ | ||
"compilerOptions": { | ||
"target": "ES2020", | ||
"esModuleInterop": true, | ||
"module": "CommonJS", | ||
"lib": ["ES2020"], | ||
"types": ["node"], | ||
"moduleResolution": "node", | ||
"noEmit": true | ||
}, | ||
"include": ["tests", "../../node-types.d.ts"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
name = "import-wasm-example" | ||
compatibility_date = "2023-10-02" | ||
|
||
main = "src/index.js" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# import-wasm-static | ||
|
||
`import-wasm-static` is a fixture that simply exports a `wasm` file via `package.json` exports to be used and imported in other fixtures, to test npm module resolution. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"name": "import-wasm-static", | ||
"version": "0.0.1", | ||
"private": true, | ||
"sideEffects": false, | ||
"exports": { | ||
"./multiply.wasm": "./wasm/multiply.wasm" | ||
} | ||
} |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
(module | ||
(func $multiply (param $p1 i32) (param $p2 i32) (result i32) | ||
local.get $p1 | ||
local.get $p2 | ||
i32.mul) | ||
(export "multiply" (func $multiply)) | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { extractPackageName } from "../deployment-bundle/module-collection"; | ||
|
||
describe("Module Collection", () => { | ||
describe("extractPackageName", () => { | ||
test.each` | ||
importString | packageName | ||
${"wrangler"} | ${"wrangler"} | ||
${"wrangler/example"} | ${"wrangler"} | ||
${"wrangler/example.wasm"} | ${"wrangler"} | ||
${"@cloudflare/wrangler"} | ${"@cloudflare/wrangler"} | ||
${"@cloudflare/wrangler/example"} | ${"@cloudflare/wrangler"} | ||
${"@cloudflare/wrangler/example.wasm"} | ${"@cloudflare/wrangler"} | ||
${"./some/file"} | ${null} | ||
${"../some/file"} | ${null} | ||
${"/some/file"} | ${null} | ||
`("$importString --> $packageName", ({ importString, packageName }) => { | ||
expect(extractPackageName(importString)).toBe(packageName); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.