Merge pull request #22 from inokawa/support-wasm

Support WebAssembly

Author: inokawa

README.md

@@ -31,6 +31,7 @@ The communication between React app and React Native app will be also simplified
   - `.css` is injected to the HTML head of WebView, like [css-loader](https://github.com/webpack-contrib/css-loader).
   - `.bmp`, `.gif`, `.png`, `.jpg`, `.jpeg`, `.webp` and `.svg` are loaded as base64 encoded url, like [url-loader](https://github.com/webpack-contrib/url-loader).
   - `.htm` and `.html` are loaded as string, which can be rendered with React's dangerouslySetInnerHTML.
+  - `.wasm` is imported as [WebAssembly instance](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance), so you can call its methods by `foo.exports.bar();`.
 
 If you have some feature requests or improvements, please create a [issue](https://github.com/inokawa/react-native-react-bridge/issues) or [PR](https://github.com/inokawa/react-native-react-bridge/pulls).
 

fixtures/app-export-default-with-wasm.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { webViewRender } from "react-native-react-bridge/lib/web";
+import Comp from "./Component";
+import wasm from "./example.wasm";
+alert(wasm);
+
+const App = () => {
+  return <Comp />;
+};
+
+export default webViewRender(App);

fixtures/example.wasm

@@ -5,7 +5,13 @@ const codeExts = ["js", "ts", "jsx", "tsx"];
 const htmlExts = ["htm", "html", "css"];
 const imageExts = ["bmp", "gif", "png", "jpg", "jpeg", "webp", "svg"];
 const textExts = ["txt", "md"];
-const sourceExts = [...codeExts, ...htmlExts, ...imageExts, ...textExts];
+const sourceExts = [
+  ...codeExts,
+  ...htmlExts,
+  ...imageExts,
+  ...textExts,
+  "wasm",
+];
 
 export const bundle = async (filename) => {
   const config = await Metro.loadConfig();

src/plugin/__snapshots__/metro.spec.js.snap

@@ -58,4 +58,11 @@ describe("bundle", () => {
     const res = await bundle(filePath);
     expect(res).toMatchSnapshot();
   });
+
+  it("with wasm", async () => {
+    const filename = "app-export-default-with-wasm.jsx";
+    const filePath = resolvePath(filename);
+    const res = await bundle(filePath);
+    expect(res).toMatchSnapshot();
+  });
 });

src/plugin/metro.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const fs = require("fs");
+const { TextEncoder } = require("util");
 const metroTransformer = require("metro-react-native-babel-transformer");
 
 module.exports.transform = async (args) => {
@@ -55,6 +56,11 @@ module.exports.transform = async (args) => {
         ...args,
         src: injectImage(filename, "svg+xml"),
       });
+    case ".wasm":
+      return metroTransformer.transform({
+        ...args,
+        src: injectWasm(src),
+      });
     default:
       break;
   }
@@ -81,3 +87,14 @@ const injectImage = (filename, ext) => {
   const src = fs.readFileSync(filename, "base64");
   return `export default "data:image/${ext};base64,${src}";`;
 };
+
+const injectWasm = (src) => {
+  const buf = new TextEncoder().encode(src);
+  return `
+export default (function () {
+  const wasmModule = new WebAssembly.Module(Uint8Array.from([${buf.toString()}]));
+  const instance = new WebAssembly.Instance(wasmModule);
+  return instance;
+})();
+`;
+};