Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
aslemammad-react-worker-components
Advanced tools
React Worker Components simplify using Web Workers
React Worker Components simplify using Web Workers
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.
npm install react-worker-components
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>
);
};
Expose a React function component from web workers.
Component
React.FC<Props>import { expose } from 'react-worker-components';
const Foo = () => {
return <h1>Foo</h1>;
};
expose(Foo); // in worker file
Register a component with a string name
This allows serializing components between main and worker threads.
component
AnyComponentname
stringimport { 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 an exposed component in main thread
This will connect the component in the worker thread. Requires Suspense.
createWorker
function (): Workerimport { wrap } from 'react-worker-components';
const Foo = wrap(() => new Worker('./Foo.worker', { type: 'module' }));
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.
FAQs
React Worker Components simplify using Web Workers
We found that aslemammad-react-worker-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.