Repository files navigation

This repo contains a web app that depends on an NPM package withWasm, TypeScript and native ESModules.Wasm code is successfully used in a Node.js script, a Jest test and a Next.js app within a page and an API route.

The demo was created while working onblockprotocol/blockprotocol andhashintel/hash.

• Node.js v16 or higher
• Yarn
• Rust andwasm-pack (unless you want to skip steps 2 and 3 of the demo)

1. Clone the repo and install dependencies from the root folder:

   yarn install

2. (can be skipped) Generatewasm-package fromwasm-crate:

   cd wasm-cratewasm-pack build --out-dir ../wasm-package --target=bundlercd ..

3. (can be skipped) Tweakwasm-package:

   ## Enable native ESM in package.jsonyarn replace-in-file"/\"module\":/""\"type\":\"module\",\"main\":" wasm-package/package.json --isRegexyarn prettier --write wasm-package/package.json## Remove autogenerated .gitignorerm wasm-package/.gitignore

   This step won’t be necessary whenrustwasm/wasm-pack#1061 is merged and released.

4. 🎉 Run a Node.js script that uses thewasm-package:

   yarn workspace web-app exe scripts/wasm-package-answer.ts

5. 🎉 Run unit tests referring to thewasm-package:

   yarn workspace web-apptest

   Needs Jest>=29.3.0, seefacebook/jest#13505.

6. 🎉 Run Next.js dev server and check ifwasm-package works there too:

   yarn workspace web-app dev

   Openlocalhost:3000 andlocalhost:3000/api/wasm-package-answer to see the result.

   ⚠️ Note theworkaround inweb-app/next.config.js.

7. 🎉 Build and run production Next.js app:

   yarn workspace web-app buildyarn workspace web-app start