Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yiminghe/react-worker-render
move react component lifecycle to worker and render to DOM
https://github.com/yiminghe/react-worker-render
react worker
Last synced: about 2 months ago
JSON representation
move react component lifecycle to worker and render to DOM
- Host: GitHub
- URL: https://github.com/yiminghe/react-worker-render
- Owner: yiminghe
- License: mit
- Created: 2022-04-25T15:07:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-08T03:47:45.000Z (about 2 years ago)
- Last Synced: 2024-07-05T12:25:07.992Z (3 months ago)
- Topics: react, worker
- Language: TypeScript
- Homepage:
- Size: 3.42 MB
- Stars: 49
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-worker-render
[![NPM version](https://badge.fury.io/js/react-worker-render.png)](http://badge.fury.io/js/react-worker-render)
[![NPM downloads](http://img.shields.io/npm/dm/react-worker-render.svg)](https://npmjs.org/package/react-worker-render)
[![Build Status](https://app.travis-ci.com/yiminghe/react-worker-render.svg?branch=main)](https://app.travis-ci.com/github/yiminghe/react-worker-render)
[![react-worker-render](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/wog843&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/wog843/runs)move react component lifecycle to worker and render to DOM.
## example
https://yiminghe.github.io/react-worker-render
## API
### types
```ts
interface WorkerRenderComponentSpec extends React.ComponentLifecycle, React.StaticLifecycle {
getInitialState?: () => any;
defaultProps?: any;
render: (this: {
nativeComponents: Record;
props: any;
state: any;
getComponent: (name: string) => React.ComponentClass;
getEventHandle: (name: string) => any;
}) => React.ReactNode;
[k: string]: any;
}
interface WorkerLike {
postMessage(msg: string): void;
onmessage: ((e: any) => void) | null;
}
```### ReactWorker
```ts
import { ReactWorker } from 'react-worker-render';
``````ts
export declare function registerNativeComponent(cls: string, Cls: React.ComponentClass): void;
export declare function registerComponent(name: string, desc: WorkerRenderComponentSpec): void;
export declare function bootstrap(params: {
worker: WorkerLike;
entry: string;
}): void;
```### ReactRender
```ts
import { ReactRender } from 'react-worker-render';
``````ts
export declare function registerNativeComponent(cls: string, Cls: React.ComponentClass): void;
export declare function registerComponent(name: string, desc: {render:WorkerRenderComponentSpec['render']}): void;
export declare function bootstrap(params: {
worker: WorkerLike;
entry: string;
batchedUpdates: (fn: () => void) => void;
render: (element: React.ReactChild) => void;
}): void;
```## development
```
yarn run bootstrap
yarn start
```open: http://localhost:3000/
## supported react versions
16-18
App can override react/react-reconciler version using yarn resolutions.