Merge pull request #109 from kwonoj/feat-module-bundle

feat(loadmodule): support bundling wasm binary
kwonoj · Oct 23, 2018 · 91ca4bb · 91ca4bb
2 parents 5010bed + bd590e7
commit 91ca4bb
Show file tree

Hide file tree

Showing 18 changed files with 8,457 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,19 @@
+<a name="2.0.0-beta.1"></a>
+# [2.0.0-beta.1](https://github.com/kwonoj/cld3-asm/compare/v1.0.1...v2.0.0-beta.1) (2018-10-23)
+
+### Features
+
+* **loadmodule:** deprecate environment ([277b127](https://github.com/kwonoj/cld3-asm/commit/277b127))
+* **loadmodule:** support bundling wasm binary ([f0672da](https://github.com/kwonoj/cld3-asm/commit/f0672da))
+* **loadmodule:** support moduleinitoption ([0c3c638](https://github.com/kwonoj/cld3-asm/commit/0c3c638))
+
+
+### BREAKING CHANGES
+
+* **loadmodule:** does not allow env override anymore
+* Does not bundle wasm binary with preamble script anymore
+
+
 <a name="1.0.1"></a>
 ## [1.0.1](https://github.com/kwonoj/cld3-asm/compare/v1.0.0...v1.0.1) (2018-02-04)
 

diff --git a/examples/browser_bundle/README.md b/examples/browser_bundle/README.md
@@ -0,0 +1,5 @@
+## Bundle cld3-asm in frontend javascript
+
+This example aims for particular configuration to include wasm binary itself into frontend javascript bundles.
+In normal cases, it is more recommended to use `moduleInitOption.binaryRemoteEndpoint` to point remote location of wasm binary instead.
+Check comments in webpack.config.js for required configurations.
diff --git a/examples/browser/index.ejs → examples/browser_bundle/index.ejs b/examples/browser/index.ejs → examples/browser_bundle/index.ejs
diff --git a/examples/browser/index.ts → examples/browser_bundle/index.ts b/examples/browser/index.ts → examples/browser_bundle/index.ts
diff --git a/examples/browser/package-lock.json → examples/browser_bundle/package-lock.json b/examples/browser/package-lock.json → examples/browser_bundle/package-lock.json
diff --git a/examples/browser/package.json → examples/browser_bundle/package.json b/examples/browser/package.json → examples/browser_bundle/package.json
@@ -3,14 +3,17 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "build": "webpack"
+    "build": "webpack",
+    "start": "npm run build && echo open dist/index.html in browser"
   },
   "author": "OJ Kwon <kwon.ohjoong@gmail.com>",
   "license": "MIT",
   "devDependencies": {
+    "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
     "ts-loader": "^5.2.2",
     "typescript": "^3.1.3",
+    "url-loader": "^1.1.2",
     "webpack": "^4.22.0",
     "webpack-cli": "^3.1.2"
   }

diff --git a/examples/browser_bundle/webpack.config.js b/examples/browser_bundle/webpack.config.js
@@ -0,0 +1,59 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+  entry: './index.ts',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'index_bundle.js'
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js']
+  },
+  mode: 'development',
+  module: {
+    /**
+     * Override default rules to avoid parsing wasm file as module
+     */
+    defaultRules: [
+      {
+        type: 'javascript/auto',
+        resolve: {}
+      }
+    ],
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          transpileOnly: true,
+          compilerOptions: {
+            module: 'esnext',
+            skipLibCheck: true,
+            skipDefaultLibCheck: true
+          }
+        }
+      },
+      /**
+       * Bundle wasm binary as dataUri in javascript.
+       */
+      {
+        test: /\.wasm$/,
+        loader: 'url-loader',
+        options: {
+          name: '[name]-[hash].[ext]'
+        }
+      }
+    ]
+  },
+  target: 'web',
+  node: {
+    fs: 'empty'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'index.ejs'
+    })
+  ]
+};
diff --git a/examples/browser_remote/README.md b/examples/browser_remote/README.md
@@ -0,0 +1,4 @@
+## Bundle cld3-asm in frontend javascript
+
+This example aims for load wasm binary via remote endpoint using `moduleInitOption.binaryRemoteEndpoint` options.
+binaryRemoteEndpoint automatically constructs endpoint file name so `file-loader` sets up output option without hash.
diff --git a/examples/browser_remote/index.ejs b/examples/browser_remote/index.ejs
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>cld3-asm browser example</title>
+  </head>
+  <body>
+    <p>Open up devtools and check console output</p>
+  </body>
+</html>
diff --git a/examples/browser_remote/index.ts b/examples/browser_remote/index.ts
@@ -0,0 +1,16 @@
+//tslint:disable:no-console
+import { loadModule } from '../../src/index';
+import { enableLogger } from '../../src/util/logger';
+import { runCld } from '../runCld';
+
+enableLogger(console.log.bind(console));
+
+const runBrowserCld = async () => {
+  const cldFactory = await loadModule({
+    binaryRemoteEndpoint: `http://localhost:8888`
+  });
+
+  runCld(cldFactory);
+};
+
+runBrowserCld();