feat(hoc): adding hoc support

[mfrachet]

• Pull request has tests / docs demo, and is linted.

In the React universe, when we try to aggregate behaviors or avoid computation repetition, we use to rely on 3 possibilites:

• render props (the default behavior you've provided)
• hoc (the one I'm providing with this PR)
• hooks (one that I will work on soon)

This PR is a suggestion to add a function withWasm that allows to wrap a component inside the Wasm one using the HoC approach.

[mbasso]

Hi @mfrachet,
thank you so much for opening this issue, I really appreciate it 😄
I like the idea of providing an HoC and also an hook!
I'll submit a review soon about a couple of things.

I'd also like to discuss the signature of the HoC, the current implementation works like this:

// define a component
const Example = ({ 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>;
};

// wrap it with the HoC
const WasmExample = withWasm(Example);

// we can use it like this
<WasmExample url="/add.wasm" {...otherProps} />

I think we might also consider an alternative solution that allows us to create HoCs that use wasm modules. In this way we can create, for example, libraries or modules that exports them instead of a component that provides constants urls and so on.

// define a component
const Example = ({ loading, error, add }) => {
  if (loading) return "Loading...";
  if (error) return "An error has occurred";

  const { module, instance } = data;
  return <div>1 + 2 = {add(1, 2)}</div>;
};

// define an HoC based on our helper
// withWasm(
//     wasmPropsProvider = props => props,
//     mapProps = props => props
// )
const withAdd = withWasm(
  // callback that takes the props and returns the ones used to instantiate the Wasm component
  (/* props */) => ({
    url: '/add.wasm'
  }),

  // map Wasm-provided props to the ones to provide to the decorated component
  ({ loading, error, data }) => ({
    loading,
    error,
    add: data && data.instance.exports.add
  })
);

// wrap the component with the HoC
const WasmExample = withAdd(Example);

// we can use it like this
<WasmExample {...otherProps} />

With this signature, using the default values, we can also achieve the same behaviour that you have provided:

const WasmExample = withWasm()(Example);

<WasmExample url="/add.wasm" {...otherProps} />

What do you think about it? Does it make sense?

[mbasso]

I'll merge and publish a new release soon! Thank you!

[mbasso]

[email protected] is now online 🎉 Thank you!