Introducing binaryen-loader

Repository

Repository	Link
binaryen-loader	https://github.com/DrSensor/binaryen-loader
Example Project	https://github.com/DrSensor/example-vue-component-rust

About binaryen-loader

Binaryen is a compiler and toolchain infrastructure library for WebAssembly, written in C++. Most of the tools are cli app and one of them can be embedded into javascript (binaryen.js). This project is just a webpack loader that wraps binaryen.js (only the optimization parts) so it can be chained easily with other webpack-loader. For more insight see this tutorial in section Using Binaryen.

_{chaining binaryen-loader with other webpack loader}

Current features

Since this project based on binaryen.js, most of the features are just wrappers from module-optimization section. Some of the features are:

• define optimization flags in options.optimization
• run specific passes by defining it in options.transformation.passes (sometimes it can shrink the bundle size, sometimes it can increase the execution speed, sometimes it does the opposites for both of them)
• enables debug information in emitted wasm code by setting the options.debug to true

Technology Stack

Since this project generated from webpack-defaults with some modification (see commit before v0.0.2), the tech stack used is what webpack-defaults proposed.

Task	Tech/Tool	Configuration
Package Manager	npm (not yarn)	package.json
Test Framework	Jest	jest.config.js, jest.setup.js
Linter and others	ESLint, Prettier, husky	.prettierrc, .eslintrc.js, lint-staged, commitlint.config.js
Release Tool	husky, standard-version
Build Tool (Transpiler)	Babel	.babelrc
CI	circleci	.circleci/config.yml

Some interesting things to note

• ✨ There is helper file I created to make the testing enjoyable called on.js. For people who wrote some of webpack-loader, maybe you want to copy and edit that file 🐣

_{on.js in action}

• 🐛 In Jest, expect(err).toThrowErrorMatchingSnapshot() can make the test fail if runned on nodejs v10 or newer.

_{comparison of snapshot generated by .toThrowErrorMatchingSnapshot(). Left: generated when running on node:10. Right: generated when running on node:8 and node:6}

• 💚 Since CircleCI now support Manual Approval, I edit the .circleci/config.yml (see this commit history) and use that feature.

_{using Manual Approval feature on binaryen-loader workflow}

• ✅❔ There is fix attempt for timeout problem as shown below. Not sure if the fix is because running jest with --ci flag or set testEnvironment: 'node' (since by default testEnvironment is jsdom). Maybe adding jest.config.js override jest configuration in package.json (making it invalid).

_{timeout problem when running on CI. Fix on commit 33123b0}

• 💩 Since conventionalcommits take to much space on commit message, I try to combine it with gitmoji convention. Not sure if it's a good idea 😆

_{new combo: gitmoji + conventionalcommits}

Future Plans

• Currently, using passes like print-call-graph that is print the call-graph to stdout will pollute webpack outputted message. I plan to pipe the output into a file but still don't have a clue how to do it. Feel free to make PR, open an Issue, or just comment below if anyone has an idea 🙂
• There is an idea to separate some passes into categories (issue #2). Still evaluating and looking some feedback for this.
• I do document some behavior of some configuration in a form of unit-tests, like the provided export it exposed and range of binary size of wasm code after running Binaryen. I will continue this effort when finding something interesting along the way. Feel free to make PR (adding fixture and/or test case) if anyone found something interesting 🙂
• Add test case when chained to another loader, especially from foreign programming language (e.g Rust using rust-native-wasm-loader).

How to contribute?

The project is open to contributions in any way possible. If you find a bug, please open an issue in the project's issue tracker. For submitting code patches, feel free to open pull requests on Github. Read CONTRIBUTING.md first for the best experience 😄

GitHub Account

https://github.com/DrSensor