From e11dd91ed894bc7c26f44a144dfc7c9282133b43 Mon Sep 17 00:00:00 2001 From: tommie Date: Mon, 31 Jul 2023 13:19:15 +0200 Subject: [PATCH 1/2] docs(wasm): add sections about Node.js and module access (#13978) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 翠 / green --- guide/features.md | 50 +++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/guide/features.md b/guide/features.md index cebe8005..392bafb8 100644 --- a/guide/features.md +++ b/guide/features.md @@ -500,7 +500,8 @@ Note that variables only represent file names one level deep. If `file` is `'foo ## WebAssembly -Pre-compiled `.wasm` files can be imported with `?init` - the default export will be an initialization function that returns a Promise of the wasm instance: +Pre-compiled `.wasm` files can be imported with `?init`. +The default export will be an initialization function that returns a Promise of the [`WebAssembly.Instance`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Instance): ```js import init from './example.wasm?init' @@ -510,7 +511,7 @@ init().then((instance) => { }) ``` -The init function can also take the `imports` object which is passed along to `WebAssembly.instantiate` as its second argument: +The init function can also take an importObject which is passed along to [`WebAssembly.instantiate`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/instantiate) as its second argument: ```js init({ @@ -524,13 +525,54 @@ init({ }) ``` -In the production build, `.wasm` files smaller than `assetInlineLimit` will be inlined as base64 strings. Otherwise, they will be copied to the dist directory as an asset and fetched on-demand. +In the production build, `.wasm` files smaller than `assetInlineLimit` will be inlined as base64 strings. Otherwise, they will be treated as a [static asset](./assets) and fetched on-demand. -::: warning +::: tip NOTE [ES Module Integration Proposal for WebAssembly](https://github.com/WebAssembly/esm-integration) is not currently supported. Use [`vite-plugin-wasm`](https://github.com/Menci/vite-plugin-wasm) or other community plugins to handle this. ::: +### Accessing the WebAssembly Module + +If you need access to the `Module` object, e.g. to instantiate it multiple times, use an [explicit URL import](./assets#explicit-url-imports) to resolve the asset, and then perform the instantiation: + +```js +import wasmUrl from 'foo.wasm?url' + +const main = async () => { + const responsePromise = fetch(wasmUrl) + const { module, instance } = await WebAssembly.instantiateStreaming( + responsePromise, + ) + /* ... */ +} + +main() +``` + +### Fetching the module in Node.js + +In SSR, the `fetch()` happening as part of the `?init` import, may fail with `TypeError: Invalid URL`. +See the issue [Support wasm in SSR](https://github.com/vitejs/vite/issues/8882). + +Here is an alternative, assuming the project base is the current directory: + +```js +import wasmUrl from 'foo.wasm?url' +import { readFile } from 'node:fs/promises' + +const main = async () => { + const resolvedUrl = (await import('./test/boot.test.wasm?url')).default + const buffer = await readFile('.' + resolvedUrl) + const { instance } = await WebAssembly.instantiate(buffer, { + /* ... */ + }) + /* ... */ +} + +main() +``` + ## Web Workers ### Import with Constructors From 3ac42dbf114bf597ecf231ec6f2229c4ecb71720 Mon Sep 17 00:00:00 2001 From: waynzh Date: Wed, 2 Aug 2023 19:28:24 +0800 Subject: [PATCH 2/2] docs(cn): resolve conflicts --- guide/features.md | 43 ++++++++++++------------------------------- 1 file changed, 12 insertions(+), 31 deletions(-) diff --git a/guide/features.md b/guide/features.md index 3988f0ce..9143e1f4 100644 --- a/guide/features.md +++ b/guide/features.md @@ -500,12 +500,8 @@ const module = await import(`./dir/${file}.js`) ## WebAssembly {#webassembly} -<<<<<<< HEAD -预编译的 `.wasm` 文件可以通过 `?init` 来导入。默认导出一个初始化函数，返回值为所导出 wasm 实例对象的 Promise： -======= -Pre-compiled `.wasm` files can be imported with `?init`. -The default export will be an initialization function that returns a Promise of the [`WebAssembly.Instance`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Instance): ->>>>>>> e11dd91ed894bc7c26f44a144dfc7c9282133b43 +预编译的 `.wasm` 文件可以通过 `?init` 来导入。 +默认导出一个初始化函数，返回值为所导出 [`WebAssembly.Instance`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Instance) 实例对象的 Promise： ```js import init from './example.wasm?init' @@ -515,11 +511,7 @@ init().then((instance) => { }) ``` -<<<<<<< HEAD -`init` 函数还可以将传递给 `WebAssembly.instantiate` 的导入对象作为其第二个参数： -======= -The init function can also take an importObject which is passed along to [`WebAssembly.instantiate`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/instantiate) as its second argument: ->>>>>>> e11dd91ed894bc7c26f44a144dfc7c9282133b43 +`init` 函数还可以将传递给 [`WebAssembly.instantiate`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/instantiate) 的导入对象作为其第二个参数： ```js init({ @@ -533,26 +525,16 @@ init({ }) ``` -<<<<<<< HEAD -在生产构建当中，体积小于 `assetInlineLimit` 的 `.wasm` 文件将会被内联为 base64 字符串。否则，它们将作为资源复制到 `dist` 目录中，并按需获取。 +在生产构建当中，体积小于 `assetInlineLimit` 的 `.wasm` 文件将会被内联为 base64 字符串。否则，它们将被视为 [静态资源](./assets) ，并按需获取。 -::: warning +::: tip 注意 [对 WebAssembly 的 ES 模块集成提案](https://github.com/WebAssembly/esm-integration) 尚未支持。 请使用 [`vite-plugin-wasm`](https://github.com/Menci/vite-plugin-wasm) 或其他社区上的插件来处理。 ::: -## Web Workers {#web-workers} -======= -In the production build, `.wasm` files smaller than `assetInlineLimit` will be inlined as base64 strings. Otherwise, they will be treated as a [static asset](./assets) and fetched on-demand. +### 访问 WebAssembly 模块 {#accessing-the-webassembly-module} -::: tip NOTE -[ES Module Integration Proposal for WebAssembly](https://github.com/WebAssembly/esm-integration) is not currently supported. -Use [`vite-plugin-wasm`](https://github.com/Menci/vite-plugin-wasm) or other community plugins to handle this. -::: - -### Accessing the WebAssembly Module - -If you need access to the `Module` object, e.g. to instantiate it multiple times, use an [explicit URL import](./assets#explicit-url-imports) to resolve the asset, and then perform the instantiation: +如果需要访问 `Module` 对象，例如将它多次实例化，可以使用 [显式 URL 引入](./assets#explicit-url-imports) 来解析资源，然后执行实例化： ```js import wasmUrl from 'foo.wasm?url' @@ -568,12 +550,12 @@ const main = async () => { main() ``` -### Fetching the module in Node.js +### 在 Node.js 中获取模块 {#fetching-the-module-in-node-js} -In SSR, the `fetch()` happening as part of the `?init` import, may fail with `TypeError: Invalid URL`. -See the issue [Support wasm in SSR](https://github.com/vitejs/vite/issues/8882). +在 SSR 中，作为 `?init` 导入的 `fetch()` 可能会失败，导致 `TypeError: Invalid URL` 报错。 +请参见问题 [在 SSR 中支持 wasm](https://github.com/vitejs/vite/issues/8882)。 -Here is an alternative, assuming the project base is the current directory: +以下是一种替代方案，假设项目根目录在当前目录： ```js import wasmUrl from 'foo.wasm?url' @@ -591,8 +573,7 @@ const main = async () => { main() ``` -## Web Workers ->>>>>>> e11dd91ed894bc7c26f44a144dfc7c9282133b43 +## Web Workers {#web-workers} ### 通过构造器导入 {#import-with-constructors}