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: 3 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 (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-08T03:47:45.000Z (almost 2 years ago)
• Last Synced: 2024-03-05T08:48:14.295Z (4 months ago)
• Topics: react, worker
• Language: TypeScript
• Homepage:
• Size: 3.42 MB
• Stars: 46
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• fuck-awesome-stars - yiminghe/react-worker-render - move react component lifecycle to worker and render to DOM (TypeScript)

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.