From 893b1ea94f81ec70b63c062a0d1ab6edbf4f9f1e Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sat, 15 Dec 2018 21:41:37 -0500
Subject: [PATCH 01/11] Updated Webpack Version

This version of webpack doesn't have a bug which to wasm not
working. https://github.com/webpack/webpack/issues/8261
---
 packages/react-scripts/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 1f6b8cfafec..c27b8eb16b0 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -67,7 +67,7 @@
     "style-loader": "0.23.0",
     "terser-webpack-plugin": "1.1.0",
     "url-loader": "1.1.1",
-    "webpack": "4.19.1",
+    "webpack": "4.23.0",
     "webpack-dev-server": "3.1.9",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3"

From b0616c2f0c23802e0b9e679e988000de425b3666 Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sat, 15 Dec 2018 22:30:09 -0500
Subject: [PATCH 02/11] Added WASM Inclusion and Tests

---
 packages/react-scripts/config/paths.js         |   1 +
 .../react-scripts/config/webpack.config.js     |   2 +-
 .../kitchensink/integration/webpack.test.js    |   6 ++++++
 .../fixtures/kitchensink/src/App.js            |   5 +++++
 .../src/features/webpack/WasmInclusion.js      |   4 ++++
 .../src/features/webpack/WasmInclusion.test.js |  17 +++++++++++++++++
 .../src/features/webpack/assets/add.wasm       | Bin 0 -> 41 bytes
 7 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.test.js
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/add.wasm

diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index b719054583b..c4549cc14e2 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -58,6 +58,7 @@ const moduleFileExtensions = [
   'json',
   'web.jsx',
   'jsx',
+  'wasm',
 ];
 
 // Resolve file paths in the same order as webpack
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 746884a03eb..4a558d6b1e1 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -506,7 +506,7 @@ module.exports = function(webpackEnv) {
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              exclude: [/\.(js|mjs|jsx|ts|tsx|wasm)$/, /\.html$/, /\.json$/],
               options: {
                 name: 'static/media/[name].[hash:8].[ext]',
               },
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
index 32c9b47a48d..a08b71f8ce2 100644
--- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
+++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
@@ -146,5 +146,11 @@ describe('Integration', () => {
       );
       doc.defaultView.close();
     });
+
+    it('wasm inclusion', async () => {
+      const doc = await initDOM('wasm-inclusion');
+
+      expect(doc.getElementById('wasm-inclusion').textContent).toBe('11');
+    });
   });
 });
diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js
index 380a49fc639..6464e22be18 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/App.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/App.js
@@ -222,6 +222,11 @@ class App extends Component {
           this.setFeature(f.default)
         );
         break;
+      case 'wasm-inclusion':
+        import('./features/webpack/WasmInclusion').then(f =>
+          this.setFeature(f.default)
+        );
+        break;
       default:
         throw new Error(`Missing feature "${feature}"`);
     }
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
new file mode 100644
index 00000000000..713ee156ce4
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
@@ -0,0 +1,4 @@
+import React from 'react';
+import { add } from './assets/add.wasm';
+
+export default () => <span id="wasm-inclusion">{add(1, 10)}</span>;
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.test.js
new file mode 100644
index 00000000000..aeb2cb59d44
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.test.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import WasmInclusion from './WasmInclusion';
+
+describe('wasm inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<WasmInclusion />, div);
+  });
+});
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/add.wasm b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/add.wasm
new file mode 100644
index 0000000000000000000000000000000000000000..357f72da7a0db8add83699082fd51d46bf3352fb
GIT binary patch
literal 41
wcmZQbEY4+QU|?WmXG~zKuV<`hW@2PuXJ=$iOi5v2;NoOtXHZ~JV9eqM0DJxgJ^%m!

literal 0
HcmV?d00001


From a91f692861ad6f971c6527e338a921f67a5692f4 Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sat, 15 Dec 2018 22:52:41 -0500
Subject: [PATCH 03/11] Attempt at Fixing Build

---
 .../kitchensink/src/features/webpack/WasmInclusion.js        | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
index 713ee156ce4..bc8cf460578 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
@@ -1,4 +1,5 @@
 import React from 'react';
-import { add } from './assets/add.wasm';
+import * as wasm from './assets/add.wasm';
+console.log(wasm);
 
-export default () => <span id="wasm-inclusion">{add(1, 10)}</span>;
+export default () => <span id="wasm-inclusion">{wasm.add(1, 10)}</span>;

From 5f6d0ca1df84bb903d0ba906ce66e4e32c3c8fd9 Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sat, 15 Dec 2018 23:03:21 -0500
Subject: [PATCH 04/11] Commit Because CI is Broken?


From 770a013748a318a9431a878c8188e99392aaad09 Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sun, 16 Dec 2018 00:20:04 -0500
Subject: [PATCH 05/11] Fail Test to Test Something

---
 .../fixtures/kitchensink/src/features/webpack/WasmInclusion.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
index bc8cf460578..8343f198a85 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
@@ -2,4 +2,4 @@ import React from 'react';
 import * as wasm from './assets/add.wasm';
 console.log(wasm);
 
-export default () => <span id="wasm-inclusion">{wasm.add(1, 10)}</span>;
+export default () => <span id="wasm-inclusion">{wasm.add(1, 9)}</span>;

From 02e69a75e8b882f402542d784c803950c4641be4 Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sun, 16 Dec 2018 12:29:34 -0500
Subject: [PATCH 06/11] Added Loading for WASM Actually

---
 packages/react-scripts/config/webpack.config.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 4a558d6b1e1..08075783420 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -431,6 +431,11 @@ module.exports = function(webpackEnv) {
                 sourceMaps: false,
               },
             },
+            // Process WASM
+            {
+              test: /\.wasm$/,
+              type: 'webassembly/experimental',
+            },
             // "postcss" loader applies autoprefixer to our CSS.
             // "css" loader resolves paths in CSS and adds assets as dependencies.
             // "style" loader turns CSS into JS modules that inject <style> tags.

From da0c28c9bad94a5bc6d999fa9cc81b14635d1bec Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sun, 16 Dec 2018 12:41:24 -0500
Subject: [PATCH 07/11] More Fix

---
 .../kitchensink/src/features/webpack/WasmInclusion.js       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
index 8343f198a85..5d4d8007f8b 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import * as wasm from './assets/add.wasm';
-console.log(wasm);
+import { add } from './assets/add.wasm';
+console.log(add);
 
-export default () => <span id="wasm-inclusion">{wasm.add(1, 9)}</span>;
+export default () => <span id="wasm-inclusion">{add(1, 9)}</span>;

From 96db5c881f784176b46d163d010137f7d4721e36 Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sun, 16 Dec 2018 12:48:43 -0500
Subject: [PATCH 08/11] Hmm, Things are Broken

---
 .../kitchensink/src/features/webpack/WasmInclusion.js        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
index 5d4d8007f8b..e4360b26593 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { add } from './assets/add.wasm';
-console.log(add);
+import('./assets/add.wasm').then(console.log);
 
-export default () => <span id="wasm-inclusion">{add(1, 9)}</span>;
+export default () => <span id="wasm-inclusion" />;

From 33e5f29d4a63a891baa94a89158cadf4fd791a3d Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sun, 16 Dec 2018 13:36:06 -0500
Subject: [PATCH 09/11] Added WASM Transformer for Jest

---
 .../config/jest/wasmTransform.js              | 31 +++++++++++++++++++
 .../scripts/utils/createJestConfig.js         |  1 +
 2 files changed, 32 insertions(+)
 create mode 100644 packages/react-scripts/config/jest/wasmTransform.js

diff --git a/packages/react-scripts/config/jest/wasmTransform.js b/packages/react-scripts/config/jest/wasmTransform.js
new file mode 100644
index 00000000000..fb20489aeaa
--- /dev/null
+++ b/packages/react-scripts/config/jest/wasmTransform.js
@@ -0,0 +1,31 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2018-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer for WASM imports.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    return `
+    const fs = require('fs');
+    const buffer = fs.readFileSync(${assetFilename});
+    const module = new WebAssembly.Module(buffer);
+    const instance = new WebAssembly.Instance(module);
+    
+    module.exports = {
+      __esmodule: true,
+      default: instance.exports,
+    }`;
+  },
+};
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
index 58c2ad48812..d01a092c6ac 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/packages/react-scripts/scripts/utils/createJestConfig.js
@@ -52,6 +52,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
       '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': resolve(
         'config/jest/fileTransform.js'
       ),
+      '^.+\\.wasm': resolve('config/jest/wasmTransform.js'),
     },
     transformIgnorePatterns: [
       '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',

From f0e392c329d0620b62708475059623392106b9dc Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Sun, 16 Dec 2018 13:53:03 -0500
Subject: [PATCH 10/11] Catch Import Error

---
 .../kitchensink/src/features/webpack/WasmInclusion.js         | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
index e4360b26593..f8e54d7774d 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/WasmInclusion.js
@@ -1,4 +1,6 @@
 import React from 'react';
-import('./assets/add.wasm').then(console.log);
+import('./assets/add.wasm')
+  .then(console.log)
+  .catch(console.log);
 
 export default () => <span id="wasm-inclusion" />;

From 5c161fb2b844037e0f5e8e8888d449ed5e0f11b9 Mon Sep 17 00:00:00 2001
From: Martin Charles <martincharles07@gmail.com>
Date: Mon, 17 Dec 2018 14:08:20 -0500
Subject: [PATCH 11/11] Remove WASM Loader

Might not need it after all.
---
 packages/react-scripts/config/webpack.config.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 08075783420..4a558d6b1e1 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -431,11 +431,6 @@ module.exports = function(webpackEnv) {
                 sourceMaps: false,
               },
             },
-            // Process WASM
-            {
-              test: /\.wasm$/,
-              type: 'webassembly/experimental',
-            },
             // "postcss" loader applies autoprefixer to our CSS.
             // "css" loader resolves paths in CSS and adds assets as dependencies.
             // "style" loader turns CSS into JS modules that inject <style> tags.