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 install
npm start
http://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 |