div should be ok

Author: yiminghe

package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
+    "@types/react-reconciler": "^0.26.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-reconciler": "^0.27.0"

src/common/types.ts

@@ -3,17 +3,21 @@ import type { ComponentContextValue } from './ComponentContext';
 
 export interface WorkerRenderComponent extends React.Component<any, any> {
   id: string;
+  componentName: string;
   componentContext?: ComponentContextValue;
   componentChildIndex: number;
   componentChildIndexMap: Map<WorkerRenderComponent, number>;
   componentIndex: number;
   componentPath: string;
   componentSpec: WorkerRenderComponentSpec;
+  callMethod(method: string, args: any[]): void;
 }
 export type ComponentPath = string;
 export type ComponentId = string;
 
 export interface AppComponent extends WorkerRenderComponent {
+  postMessage(msg: any): void;
+  componentNameDefaultPropsMap: Record<string, string>;
   newComponentsPathIdMap: Record<ComponentPath, ComponentId>;
   newComponentsIdStateMap: Record<ComponentId, any>;
   addComponent(component: WorkerRenderComponent): void;
@@ -25,6 +29,7 @@ export interface WorkerRenderComponentSpec
   extends React.ComponentLifecycle<any, any>,
     React.StaticLifecycle<any, any> {
   getInitialState?: () => any;
+  defaultProps?: any;
   render: (args: {
     native: Record<string, React.ComponentClass>;
     props: any;
@@ -39,3 +44,16 @@ export interface MessageChannel {
   postMessage(msg: string): void;
   onMessage(msg: string): void;
 }
+
+export interface FromWorkerMsg {
+  newComponentNameDefaultPropsMap: Record<string, string>;
+  pendingIdStateMap: Record<string, string>;
+  newComponentsPathIdMap: Record<string, string>;
+  newComponentsIdStateMap: Record<string, string>;
+}
+
+export interface FromRenderMsg {
+  componentId: string;
+  method: string;
+  args: any[];
+}

src/render/App.tsx

@@ -1,11 +1,19 @@
 import componentPath from '../common/componentPath';
 import React from 'react';
 import { getComponentDesc } from '../common/register';
-import { AppComponent, WorkerRenderComponent } from '../common/types';
+import {
+  AppComponent,
+  WorkerRenderComponent,
+  MessageChannel,
+  FromWorkerMsg,
+  FromRenderMsg,
+} from '../common/types';
 import { nativeComponents } from './nativeComponentClass';
 import { getComponentClass } from './getComponentClass';
+import ReactDOM from 'react-dom';
+
 class App
-  extends React.Component<{ channel: MessageChannel }>
+  extends React.Component<{ channel: MessageChannel }, { inited: boolean }>
   implements AppComponent
 {
   id: string;
@@ -14,17 +22,62 @@ class App
   componentChildIndex = 0;
   componentChildIndexMap = new Map();
   newComponentsPathIdMap = {};
+  componentNameDefaultPropsMap = {};
   newComponentsIdStateMap = {};
   pendingIdStateMap = {};
   components: Map<string, WorkerRenderComponent> = new Map();
   nativeEventHandles: Record<string, () => void>;
   componentSpec = null!;
+  componentName = '';
 
   constructor(props: any) {
     super(props);
     this.nativeEventHandles = {};
     this.id = '1';
     this.addComponent(this);
+    this.props.channel.onMessage = this.onMessage;
+    this.state = {
+      inited: false,
+    };
+  }
+  onMessage = (e: any) => {
+    const msg: FromWorkerMsg = JSON.parse(e.data);
+    const {
+      newComponentsIdStateMap,
+      newComponentsPathIdMap,
+      pendingIdStateMap,
+      newComponentNameDefaultPropsMap,
+    } = msg;
+    const { components, componentNameDefaultPropsMap } = this;
+    Object.assign(
+      componentNameDefaultPropsMap,
+      newComponentNameDefaultPropsMap,
+    );
+    for (const name of Object.keys(newComponentNameDefaultPropsMap)) {
+      getComponentClass(name).defaultProps =
+        newComponentNameDefaultPropsMap[name];
+    }
+    this.newComponentsIdStateMap = newComponentsIdStateMap;
+    this.newComponentsPathIdMap = newComponentsPathIdMap;
+
+    ReactDOM.unstable_batchedUpdates(() => {
+      if (!this.state.inited) {
+        this.setState({
+          inited: true,
+        });
+      }
+      for (const id of Object.keys(pendingIdStateMap)) {
+        const state = pendingIdStateMap[id];
+        const component = components.get(id)!;
+        component.setState(state);
+      }
+    });
+  };
+  postMessage(msg: FromRenderMsg) {
+    this.props.channel.postMessage(JSON.stringify(msg));
+  }
+  callMethod() {
+    return;
   }
   addComponent(component: WorkerRenderComponent) {
     this.components.set(component.id, component);
@@ -33,28 +86,29 @@ class App
     this.components.delete(component.id);
   }
   getNativeEventHandle = (name: string) => {
-    const { nativeEventHandles } = this;
-    if (nativeEventHandles[name]) {
-      return nativeEventHandles[name];
-    }
+    return name;
   };
   getComponentEventHandle = (name: string) => {
     return name;
   };
   setStateState() {
     return;
   }
-  render(): JSX.Element {
-    const componentDesc = getComponentDesc('main');
-    const element = componentDesc.render({
-      native: nativeComponents,
-      props: {},
-      state: {},
-      getNativeEventHandle: this.getNativeEventHandle,
-      getComponentEventHandle: this.getComponentEventHandle,
-      getComponentClass: getComponentClass,
-    });
-    return componentPath.renderWithComponentContext(this, element);
+  render(): React.ReactNode {
+    if (this.state.inited) {
+      const componentDesc = getComponentDesc('main');
+      const element = componentDesc.render({
+        native: nativeComponents,
+        props: {},
+        state: {},
+        getNativeEventHandle: this.getNativeEventHandle,
+        getComponentEventHandle: this.getComponentEventHandle,
+        getComponentClass: getComponentClass,
+      });
+      return componentPath.renderWithComponentContext(this, element);
+    } else {
+      return null;
+    }
   }
 }
 

src/render/getComponentClass.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getComponentDesc } from '../common/register';
-import { WorkerRenderComponent } from '../common/types';
+import { FromRenderMsg, WorkerRenderComponent } from '../common/types';
 import { nativeComponents } from './nativeComponentClass';
 import componentPath from '../common/componentPath';
 import ComponentContext, {
@@ -9,8 +9,6 @@ import ComponentContext, {
 
 const componentClassCache: Record<string, React.ComponentClass> = {};
 
-let gid = 1;
-
 export function getComponentClass(name: string): React.ComponentClass {
   if (componentClassCache[name]) {
     return componentClassCache[name];
@@ -22,65 +20,98 @@ export function getComponentClass(name: string): React.ComponentClass {
     extends React.Component<any, { state: any; __self: Component }>
     implements WorkerRenderComponent
   {
-    id: string;
     componentIndex = 0;
     componentPath = '';
     componentChildIndex = 0;
     componentChildIndexMap = new Map();
-    nativeEventHandles: Record<string, () => void>;
+    nativeEventHandles: Record<string, () => void> = {};
     componentSpec = componentSpec;
-
+    componentName = name;
     static contextType = ComponentContext;
-
+    publicInstance: any = {};
+    id = '';
     constructor(props: any) {
       super(props);
-      this.id = ++gid + '';
-      this.nativeEventHandles = {};
       this.state = {
         __self: this,
         state: {},
       };
+      Object.defineProperty(this.publicInstance, 'props', {
+        get: () => {
+          return this.props;
+        },
+      });
+      Object.defineProperty(this.publicInstance, 'state', {
+        get: () => {
+          return this.state.state;
+        },
+      });
+    }
+    callMethod() {
+      return;
     }
-
     static getDerivedStateFromProps(_: any, { __self }: any) {
       const instance: Component = __self;
       componentPath.updateComponentPath(instance);
       let state;
       const { app } = instance.context as ComponentContextValue;
-      if (instance.id) {
-        state = instance.state.state;
-      } else {
+      if (!instance.id) {
         const path = componentPath.getComponentPath(instance);
         instance.id = app.newComponentsPathIdMap[path];
         if (!instance.id) {
           throw new Error(`Can not find id from path: ${path}`);
         }
         app.addComponent(instance);
-        state = app.newComponentsIdStateMap[instance.id];
+        state = app.newComponentsIdStateMap[instance.id] || {};
+        return { state };
       }
-      return { state };
+      return {};
     }
 
     getContext() {
       return this.context as ComponentContextValue;
     }
 
+    componentDidMount() {
+      componentSpec.componentDidMount?.call(this.publicInstance);
+    }
+
+    componentDidUpdate(prevProps: any, prevState: any) {
+      const { publicInstance } = this;
+      componentSpec.componentDidUpdate?.call(
+        publicInstance,
+        prevProps,
+        prevState.state,
+      );
+    }
+
     componentWillUnmount() {
+      componentSpec.componentWillUnmount?.call(this.publicInstance);
       this.getContext().app.removeComponent(this);
     }
 
     getNativeEventHandle = (name: string) => {
       const { nativeEventHandles } = this;
+      const { app } = this.context as ComponentContextValue;
       if (nativeEventHandles[name]) {
         return nativeEventHandles[name];
       }
+      nativeEventHandles[name] = (...args: any) => {
+        const msg: FromRenderMsg = {
+          componentId: this.id,
+          method: name,
+          args,
+        };
+        app.postMessage(msg);
+      };
+      return nativeEventHandles[name];
     };
 
     getComponentEventHandle = (name: string) => {
       return name;
     };
 
-    render(): JSX.Element {
+    render(): React.ReactNode {
       const element = componentSpec.render({
         native: nativeComponents,
         props: this.props,

src/render/index.ts

@@ -0,0 +1,3 @@
+import { registerComponent } from '../common/register';
+import App from './App';
+export { registerComponent, App };