Minimal example making webpack and wasm/Emscripten work together.
Build instructions:
- Clone this gist
- npm install
- npm start
- Open http://localhost:8080
- Look at console
| /** | |
| * Copyright 2019 Google Inc. All Rights Reserved. | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * Unless required by applicable law or agreed to in writing, software | |
| * distributed under the License is distributed on an "AS IS" BASIS, | |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| * See the License for the specific language governing permissions and | 
| node_modules | |
| package-lock.json | 
Minimal example making webpack and wasm/Emscripten work together.
Build instructions:
npm installnpm starthttp://localhost:8080| { | |
| "name": "tsquickstart", | |
| "version": "1.0.0", | |
| "description": "Boilerplate for quick one-off TypeScript projects. Just run `npm start`", | |
| "scripts": { | |
| "init": "test -f tsconfig.json || (tsc --init -t ESNext -m ESNext && npm install)", | |
| "start": "npm run init && concurrently \"npm run watch\" \"npm run serve\"", | |
| "serve": "http-server", | |
| "watch": "tsc -p . --watch", | |
| "build": "tsc -p ." | 
| /** | |
| * Inspired by ebidel@ (https://gist.github.com/ebidel/1b418134837a7dde7d76ed36288c1d16) | |
| * @author surma@ | |
| * License Apache-2.0 | |
| */ | |
| function* collectAllElementsDeep(selector = '*', root = document.all) { | |
| for (const el of root) { | |
| if (!el.matches(selector)) | |
| continue; | 
| #!/bin/bash | |
| docker run --rm -v $(pwd):/src trzeci/emscripten emcc \ | |
| -O0 `# leave uncompressed for example` \ | |
| -s WASM=1 \ | |
| -s EXPORTED_FUNCTIONS="['_hello']" \ | |
| -s EXTRA_EXPORTED_RUNTIME_METHODS="['cwrap']" \ | |
| -o emscripten-module.js \ | |
| --post-js module-post.js \ | |
| hello.c | 
| function eventTarget(o) { | |
| const {port1} = new MessageChannel(); | |
| o.dispatchEvent = port1.dispatchEvent.bind(port1); | |
| o.addEventListener = port1.addEventListener.bind(port1); | |
| } | |
| // Usage: | |
| let myObj = { /* ... */ }; | |
| eventTarget(myObj); | 
| _registry = {}; | |
| importPolyfill = path => { | |
| if(!(path in _registry)) { | |
| const entry = _registry[path] = {}; | |
| entry.promise = new Promise(resolve => entry.resolve = resolve); | |
| document.head.appendChild(Object.assign( | |
| document.createElement('script'), | |
| { | |
| type: 'module', | |
| innerText: `import * as X from '${path}'; _registry['${path}'].resolve(X);`, | 
| Promise.settleAll = Promise.settleAll || (ps => Promise.all(ps.map(p => p.catch(_ => {})))); | 
| lol1 | lol2 | 
| lol3 | lol4 |