Skip to content

Packaging

Bernard Teo edited this page Apr 10, 2021 · 3 revisions

[ Note: Some parts of this page is outdated. Cadet-frontend now uses a new version of webpack, so we can package things properly now. Sourceror is now a real NPM package. ]

Building the NPM Package for Sourceror

To build the NPM package, you should do

npm run build

The command will invoke the Rust compiler, which will generate the .wasm file an an accompanying .js file. The bundler (a recent version of Webpack) is then run to bundle these files with those in the /js folder.

The /dist folder will be created and it will contain package.json, index.js, and a sourceror subfolder. The /dist folder should be made into the NPM package. The sourceror subfolder should be copied to the externalLibs folder of your web server (for cadet-frontend, it should go into the /public/externalLibs folder). This might change in the future because externalLibs might perhaps be only for external libraries like CURVES and RUNES.

Shouldn't we let the frontend (i.e. cadet-frontend) bundle everything together?

That would be ideal, but the Webpack used in cadet-frontend is some very outdated version, and can't be updated because cadet-frontend depends lots of outdated things, including the react-scripts-ts package which hasn't been updated since 2018. That version of Webpack of course doesn't know how to import a WebAssembly file, so it chokes up when it encounters the line import * from './index_bg.wasm'; in the JavaScript code.

A modest amount of effort was made in an attempt to update the Webpack version in cadet-frontend, but it did not lead to any positive results. Until the dependency hell in cadet-frontend is cleaned up, this would probably not be possible. (However, you are welcome to make another attempt at this.)

Until then, we bundle Sourceror on its own (using a recent version of Webpack that understands WebAssembly), and get cadet-frontend to import the bundled library instead.

My browser makes a proper request for the .wasm file, but there is some cryptic error after that!

Check whether the mime type in the response is application/wasm. Streaming compilation/instantiation will not work if the mime type isn't correct. The very outdated version of webpack-dev-server in cadet-frontend is one such server that won't use the correct mime type. This is a hard error for the client — the fallback does not work for some reason. The streaming compilation code is generated by Webpack, and at the point of writing, we don't know how to disable it properly.

To work around this problem, after generating the NPM package, you can manually open /dist/index/js and replace Streaming with Streamin (there should be four occurrences) to "disable" streaming compilation.

Note: In production, you should not need to disable streaming compilation. GitHub Pages will serve .wasm files with the correct mime type.

I refreshed cadet-frontend, but the .wasm file is not downloaded!

WebAssembly files can only be downloaded lazily, due to the way WebAssembly works. The .wasm file will be downloaded after you click "Run" once.