react-worker-components
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    react-worker-components

    CI npm size discord

    React Worker Components simplify using Web Workers

    Introduction

    This is an experimental project inspired by React Server Component.

    I've been developing several libraries to interact with Web Workers.

    While they provide various interfaces with good abstraction, RSC style would be another approach which is useful for Web Workers.

    RWC is a library to provide RSC-like interface for Web Workers. It serializes React elements keeping their referential identities as much as possible. If a React component is "registered", it will be referenced by string names, and it can be used at the both ends.

    Project Status: Experimental but basic examples are working. Welcome to try realistic examples.

    Install

    npm install react-worker-components

    Usage

    TextBox.js

    This is a component that can be used in the RWC tree. register is important to enable serialization.

    import React, { useState } from 'react';
    
    import { register } from 'react-worker-components';
    
    export const TextBox = () => {
      const [text, setText] = useState('');
      return (
        <div>
          <span>Text: {text}</span>
          <input value={text} onChange={(event) => setText(event.target.value)} />
        </div>
      );
    };
    
    register(TextBox, 'TextBox');

    Hello.worker.js

    This is a component that runs only on web workers. expose is necessary to communicate with the main thread.

    import React from 'react';
    
    import { expose } from 'react-worker-components';
    
    import { TextBox } from './TextBox';
    
    const fib = (i) => (i <= 1 ? i : fib(i - 1) + fib(i - 2));
    
    const Hello = ({ count, children }) => {
      const fibNum = fib(count);
      return (
        <div>
          <div>Hello from worker: {fibNum}</div>
          <h1>Main TextBox</h1>
          {children}
          <h1>Worker TextBox</h1>
          <TextBox />
        </div>
      );
    };
    
    expose(Hello);

    App.js

    This is the entry point component in the main thread. wrap is to communicate with the worker thread.

    import React, { Suspense, useState } from 'react';
    
    import { wrap } from 'react-worker-components';
    
    import { TextBox } from './TextBox';
    
    const Hello = wrap(() => new Worker('./Hello.worker', { type: 'module' }));
    
    export const App = () => {
      const [count, setCount] = useState(1);
      return (
        <div>
          <span>Count: {count}</span>
          <button type="button" onClick={() => setCount(count + 1)}>+1</button>
          <button type="button" onClick={() => setCount((c) => c - 1)}>-1</button>
          <Suspense fallback="Loading...">
            <Hello count={count}>
              <TextBox />
            </Hello>
          </Suspense>
        </div>
      );
    };

    API

    expose

    Expose a React function component from web workers.

    Parameters

    • Component React.FC<Props>

    Examples

    import { expose } from 'react-worker-components';
    
    const Foo = () => {
      return <h1>Foo</h1>;
    };
    
    expose(Foo); // in worker file

    register

    Register a component with a string name

    This allows serializing components between main and worker threads.

    Parameters

    • component AnyComponent
    • name string

    Examples

    import { register } from 'react-worker-components';
    
    const Counter = () => {
      const [count, setCount] = useState(0);
      return <div>{count}<button onClick={() => setCount(1)}>1</button></div>;
    };
    
    register(Counter, 'Counter');

    wrap

    Wrap an exposed component in main thread

    This will connect the component in the worker thread. Requires Suspense.

    Parameters

    • createWorker function (): Worker

    Examples

    import { wrap } from 'react-worker-components';
    
    const Foo = wrap(() => new Worker('./Foo.worker', { type: 'module' }));

    Examples

    The examples folder contains working examples. You can run one of them with

    PORT=8080 npm run examples:01_minimal

    and open http://localhost:8080 in your web browser.

    Install

    npm i react-worker-components

    DownloadsWeekly Downloads

    11

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    63.8 kB

    Total Files

    18

    Last publish

    Collaborators

    • daishi