feat(hoc): adding hoc support

README.md

@@ -21,29 +21,46 @@ If you aren't using npm in your project, you can include reactWasm using UMD bui
 
 ## Usage
 
+### Render props
+
 Once you have installed react-wasm, supposing a CommonJS environment, you can import and use it in this way:
 
 ```js
-import Wasm from 'react-wasm';
+import Wasm from "react-wasm";
 
 // supposing an "add.wasm" module that exports a single function "add"
 const ExampleComponent = () => (
   <Wasm url="/add.wasm">
     {({ loading, error, data }) => {
-      if (loading) return 'Loading...';
-      if (error) return 'An error has occurred';
+      if (loading) return "Loading...";
+      if (error) return "An error has occurred";
 
       const { module, instance } = data;
-      return (
-        <div>
-          1 + 2 = {instance.exports.add(1, 2)}
-        </div>
-      );
+      return <div>1 + 2 = {instance.exports.add(1, 2)}</div>;
     }}
   </Wasm>
 );
 ```
 
+### Higher Order Component
+
+It's also possible to use the library using the HoC approach by importing the named `withWasm` function:
+
+```js
+import { withWasm } from "react-wasm";
+
+// supposing an "add.wasm" module that exports a single function "add"
+const ExampleComponent = ({ loading, error, data }) => {
+  if (loading) return "Loading...";
+  if (error) return "An error has occurred";
+
+  const { module, instance } = data;
+  return <div>1 + 2 = {instance.exports.add(1, 2)}</div>;
+};
+
+export default withWasm(ExampleComponent);
+```
+
 ## API
 
 ```js
@@ -53,7 +70,7 @@ type WasmProps = {
   url?: string,
   bufferSource?: BufferSource,
   // An optional object containing the values to be imported into the newly-created Instance
-  // such as functions or WebAssembly.Memory objects. 
+  // such as functions or WebAssembly.Memory objects.
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Syntax
   importObject?: {},
   children: (renderProps: {
@@ -85,11 +102,14 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/mbasso/react-wasm/releases) page.
 
 ## Authors
+
 **Matteo Basso**
+
 - [github/mbasso](https://github.com/mbasso)
 - [@teo_basso](https://twitter.com/teo_basso)
 
 ## Copyright and License
+
 Copyright (c) 2019, Matteo Basso.
 
 react-wasm source code is licensed under the [MIT License](https://github.com/mbasso/react-wasm/blob/master/LICENSE.md).

src/index.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React from 'react';
+import withWasmDefinition from './withWasm';
 import compileWasm from './compileWasm';
 import type { WasmProps, WasmState } from './types';
 
@@ -50,3 +51,5 @@ export default class Wasm extends React.Component<WasmProps, WasmState> {
     return children(this.state);
   }
 }
+
+export const withWasm = withWasmDefinition;

src/withWasm.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Wasm from '.';
+
+const withWasm = ComponentDefinition => ({ url, ...otherProps }) => (
+  <Wasm url={url}>
+    {wasmData => <ComponentDefinition {...otherProps} {...wasmData} />}
+  </Wasm>
+);
+
+export default withWasm;

test/withWasm.spec.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import Wasm from '../src';
+import withWasm from '../src/withWasm';
+
+jest.mock('../src', () => ({
+  __esModule: true,
+  default: jest.fn(({ children }) => (
+    <div>
+      {children({
+        loading: true,
+        error: false,
+        data: { hello: 'world' }
+      })}
+    </div>
+  ))
+}));
+
+function Component({ firstname }) {
+  return <div>Hello {firstname}</div>;
+}
+
+describe('withWasm ', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    const Enhanced = withWasm(Component);
+
+    const instance = TestRenderer.create(
+      <Enhanced firstname="James" url="/add.wasm" />
+    );
+
+    wrapper = instance.root;
+  });
+
+  it('should create a new component wrapped by the Wasm one', () => {
+    expect(wrapper.findByType(Wasm)).toBeTruthy();
+  });
+
+  it('should create a new component with its own props and the one injected by the Wasm one', () => {
+    expect(wrapper.findByType(Component).props).toEqual({
+      firstname: 'James',
+      loading: true,
+      error: false,
+      data: { hello: 'world' }
+    });
+  });
+});