38

GitHub - mbasso/react-wasm: Declarative WebAssembly instantiation for React

 5 years ago
source link: https://github.com/mbasso/react-wasm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

react-wasm

Build Status npm version npm downloads Coverage Status MIT Donate

Declarative WebAssembly instantiation for React

Installation

You can install react-wasm using npm:

npm install --save react-wasm

If you aren't using npm in your project, you can include reactWasm using UMD build in the dist folder with <script> tag.

Usage

Once you have installed react-wasm, supposing a CommonJS environment, you can import and use it in this way:

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';

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

API

type WasmProps = {
  // you can instantiate modules using a URL
  // or directly a BufferSource (TypedArray or ArrayBuffer)
  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. 
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Syntax
  importObject?: {},
  children: (renderProps: {
    loading: boolean,
    error: ?Error,
    data: ?{
      module: WebAssembly.Module,
      instance: WebAssembly.Instance
    }
  }) => React.Node
};

Browser support

react-wasm uses fetch and obviously WebAssembly APIs, they are broadly supported by major browser engines but you would like to polyfill them to support old versions.

if (!window.fetch || !window.WebAssembly) {
    ...
} else {
    ...
}

Change Log

This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.

Authors

Matteo Basso

Copyright and License

Copyright (c) 2019, Matteo Basso.

react-wasm source code is licensed under the MIT License.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK