improve flow

MrWangJustToDo · Jan 7, 2024 · 0cf368c · 0cf368c
1 parent b3cbf2a
commit 0cf368c
Show file tree

Hide file tree

Showing 35 changed files with 453 additions and 216 deletions.
diff --git a/packages/myreact-dom/src/client/renderDispatch/lazy.ts b/packages/myreact-dom/src/client/renderDispatch/lazy.ts
@@ -1,6 +1,6 @@
 import { __my_react_internal__, createElement } from "@my-react/react";
 import { devWarnWithFiber, WrapperByScope } from "@my-react/react-reconciler";
-import { isPromise, ListTree, STATE_TYPE } from "@my-react/react-shared";
+import { isPromise, ListTree } from "@my-react/react-shared";
 
 import type { ClientDomDispatch } from "./instance";
 import type { lazy, MixinMyReactFunctionComponent } from "@my-react/react";
@@ -26,7 +26,7 @@ const loadLazy = async (fiber: MyReactFiberNode, typedElementType: ReturnType<ty
 
     typedElementType.render = render as ReturnType<typeof lazy>["render"];
 
-    fiber._update(STATE_TYPE.__triggerSync__);
+    typedElementType._update(fiber, typedElementType.render);
   } catch (e) {
     currentRenderPlatform.current.dispatchError({ fiber, error: e });
   } finally {
@@ -43,7 +43,7 @@ export const resolveLazyElementLegacy = (_fiber: MyReactFiberNode, _dispatch: Cl
   if (typedElementType._loaded === true) {
     if (_dispatch.isHydrateRender) {
       Promise.resolve().then(() => {
-        _fiber._update(STATE_TYPE.__triggerSync__);
+        typedElementType._update(_fiber, typedElementType.render);
       });
       return WrapperByScope(_dispatch.resolveSuspense(_fiber));
     } else {

diff --git a/packages/myreact-dom/src/client/renderPlatform/feature.ts b/packages/myreact-dom/src/client/renderPlatform/feature.ts
@@ -26,6 +26,7 @@ function dispatchError(this: DomPlatform, _params: { fiber: MyReactFiberNode; er
       });
     });
   }
+  return void 0;
 }
 
 /**

diff --git a/packages/myreact-dom/src/client/tools/highlight.ts b/packages/myreact-dom/src/client/tools/highlight.ts
@@ -112,31 +112,35 @@ export class HighLight {
 
     allPendingUpdate.forEach((fiber) => {
       if (include(fiber.state, STATE_TYPE.__unmount__)) return;
-      const node = fiber.nativeNode as HTMLElement;
-      if (node.nodeType === Node.TEXT_NODE) {
-        this.range.selectNodeContents(node);
-      } else {
-        this.range.selectNode(node);
-      }
-      const rect = this.range.getBoundingClientRect();
-      if (
-        (rect.width || rect.height) &&
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
-      ) {
-        // do the highlight paint
-        const left = rect.left - 0.5;
-        const top = rect.top - 0.5;
-        const width = rect.width + 1;
-        const height = rect.height + 1;
-        context.strokeRect(
-          left < 0 ? 0 : left,
-          top < 0 ? 0 : top,
-          width > window.innerWidth ? window.innerWidth : width,
-          height > window.innerHeight ? window.innerHeight : height
-        );
+      try {
+        const node = fiber.nativeNode as HTMLElement;
+        if (node.nodeType === Node.TEXT_NODE) {
+          this.range.selectNodeContents(node);
+        } else {
+          this.range.selectNode(node);
+        }
+        const rect = this.range.getBoundingClientRect();
+        if (
+          (rect.width || rect.height) &&
+          rect.top >= 0 &&
+          rect.left >= 0 &&
+          rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
+          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+        ) {
+          // do the highlight paint
+          const left = rect.left - 0.5;
+          const top = rect.top - 0.5;
+          const width = rect.width + 1;
+          const height = rect.height + 1;
+          context.strokeRect(
+            left < 0 ? 0 : left,
+            top < 0 ? 0 : top,
+            width > window.innerWidth ? window.innerWidth : width,
+            height > window.innerHeight ? window.innerHeight : height
+          );
+        }
+      } catch {
+        void 0;
       }
     });
 
@@ -146,31 +150,35 @@ export class HighLight {
 
     allPendingAppend.forEach((fiber) => {
       if (include(fiber.state, STATE_TYPE.__unmount__)) return;
-      const node = fiber.nativeNode as HTMLElement;
-      if (node.nodeType === Node.TEXT_NODE) {
-        this.range.selectNodeContents(node);
-      } else {
-        this.range.selectNode(node);
-      }
-      const rect = this.range.getBoundingClientRect();
-      if (
-        (rect.width || rect.height) &&
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
-      ) {
-        // do the highlight paint
-        const left = rect.left - 0.5;
-        const top = rect.top - 0.5;
-        const width = rect.width + 1;
-        const height = rect.height + 1;
-        context.strokeRect(
-          left < 0 ? 0 : left,
-          top < 0 ? 0 : top,
-          width > window.innerWidth ? window.innerWidth : width,
-          height > window.innerHeight ? window.innerHeight : height
-        );
+      try {
+        const node = fiber.nativeNode as HTMLElement;
+        if (node.nodeType === Node.TEXT_NODE) {
+          this.range.selectNodeContents(node);
+        } else {
+          this.range.selectNode(node);
+        }
+        const rect = this.range.getBoundingClientRect();
+        if (
+          (rect.width || rect.height) &&
+          rect.top >= 0 &&
+          rect.left >= 0 &&
+          rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
+          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+        ) {
+          // do the highlight paint
+          const left = rect.left - 0.5;
+          const top = rect.top - 0.5;
+          const width = rect.width + 1;
+          const height = rect.height + 1;
+          context.strokeRect(
+            left < 0 ? 0 : left,
+            top < 0 ? 0 : top,
+            width > window.innerWidth ? window.innerWidth : width,
+            height > window.innerHeight ? window.innerHeight : height
+          );
+        }
+      } catch {
+        void 0;
       }
     });
 
@@ -180,31 +188,35 @@ export class HighLight {
 
     allPendingSetRef.forEach((fiber) => {
       if (include(fiber.state, STATE_TYPE.__unmount__)) return;
-      const node = fiber.nativeNode as HTMLElement;
-      if (node.nodeType === Node.TEXT_NODE) {
-        this.range.selectNodeContents(node);
-      } else {
-        this.range.selectNode(node);
-      }
-      const rect = this.range.getBoundingClientRect();
-      if (
-        (rect.width || rect.height) &&
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
-      ) {
-        // do the highlight paint
-        const left = rect.left - 0.5;
-        const top = rect.top - 0.5;
-        const width = rect.width + 1;
-        const height = rect.height + 1;
-        context.strokeRect(
-          left < 0 ? 0 : left,
-          top < 0 ? 0 : top,
-          width > window.innerWidth ? window.innerWidth : width,
-          height > window.innerHeight ? window.innerHeight : height
-        );
+      try {
+        const node = fiber.nativeNode as HTMLElement;
+        if (node.nodeType === Node.TEXT_NODE) {
+          this.range.selectNodeContents(node);
+        } else {
+          this.range.selectNode(node);
+        }
+        const rect = this.range.getBoundingClientRect();
+        if (
+          (rect.width || rect.height) &&
+          rect.top >= 0 &&
+          rect.left >= 0 &&
+          rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
+          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+        ) {
+          // do the highlight paint
+          const left = rect.left - 0.5;
+          const top = rect.top - 0.5;
+          const width = rect.width + 1;
+          const height = rect.height + 1;
+          context.strokeRect(
+            left < 0 ? 0 : left,
+            top < 0 ? 0 : top,
+            width > window.innerWidth ? window.innerWidth : width,
+            height > window.innerHeight ? window.innerHeight : height
+          );
+        }
+      } catch {
+        void 0;
       }
     });
 
@@ -216,31 +228,35 @@ export class HighLight {
 
     allPendingWarn.forEach((fiber) => {
       if (include(fiber.state, STATE_TYPE.__unmount__)) return;
-      const node = fiber.nativeNode as HTMLElement;
-      if (node.nodeType === Node.TEXT_NODE) {
-        this.range.selectNodeContents(node);
-      } else {
-        this.range.selectNode(node);
-      }
-      const rect = this.range.getBoundingClientRect();
-      if (
-        (rect.width || rect.height) &&
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
-      ) {
-        // do the highlight paint
-        const left = rect.left - 0.5;
-        const top = rect.top - 0.5;
-        const width = rect.width + 1;
-        const height = rect.height + 1;
-        context.strokeRect(
-          left < 0 ? 0 : left,
-          top < 0 ? 0 : top,
-          width > window.innerWidth ? window.innerWidth : width,
-          height > window.innerHeight ? window.innerHeight : height
-        );
+      try {
+        const node = fiber.nativeNode as HTMLElement;
+        if (node.nodeType === Node.TEXT_NODE) {
+          this.range.selectNodeContents(node);
+        } else {
+          this.range.selectNode(node);
+        }
+        const rect = this.range.getBoundingClientRect();
+        if (
+          (rect.width || rect.height) &&
+          rect.top >= 0 &&
+          rect.left >= 0 &&
+          rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
+          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+        ) {
+          // do the highlight paint
+          const left = rect.left - 0.5;
+          const top = rect.top - 0.5;
+          const width = rect.width + 1;
+          const height = rect.height + 1;
+          context.strokeRect(
+            left < 0 ? 0 : left,
+            top < 0 ? 0 : top,
+            width > window.innerWidth ? window.innerWidth : width,
+            height > window.innerHeight ? window.innerHeight : height
+          );
+        }
+      } catch {
+        void 0;
       }
     });
 

diff --git a/packages/myreact-dom/src/server/renderPlatform/feature.ts b/packages/myreact-dom/src/server/renderPlatform/feature.ts
@@ -39,6 +39,8 @@ const dispatchError = ({ fiber, error }: { fiber: MyReactFiberNode; error: Error
   } else {
     throw error;
   }
+
+  return void 0;
 };
 
 /**

diff --git a/packages/myreact-reactivity/src/reactive/feature.ts b/packages/myreact-reactivity/src/reactive/feature.ts
@@ -74,7 +74,7 @@ export function createReactive<P extends Record<string, unknown>, S extends Reco
 
     componentWillUnmount(): void {
       this.props.$$__instance__$$.onUnmounted.forEach((f) => f());
-      this.effect.stop();
+      this.reactiveEffect.stop();
     }
 
     shouldComponentUpdate(): boolean {
@@ -84,15 +84,15 @@ export function createReactive<P extends Record<string, unknown>, S extends Reco
       return true;
     }
 
-    effect = new ReactiveEffect(() => {
+    reactiveEffect = new ReactiveEffect(() => {
       const { children, $$__trigger__$$, $$__reactiveState__$$, $$__instance__$$, ...last } = this.props;
       const targetRender = (render || children) as (props: UnwrapRef<S> & P) => LikeReactNode;
       const element = targetRender?.({ ...last, ...$$__reactiveState__$$ } as UnwrapRef<S> & P) || null;
       return element;
     }, this.props.$$__trigger__$$);
 
     render() {
-      return createElement(ForBeforeMount, { ["$$__instance__$$"]: this.props.$$__instance__$$, children: this.effect.run() });
+      return createElement(ForBeforeMount, { ["$$__instance__$$"]: this.props.$$__instance__$$, children: this.reactiveEffect.run() });
     }
   }
 
@@ -104,18 +104,18 @@ export function createReactive<P extends Record<string, unknown>, S extends Reco
     } & P
   > {
     componentWillUnmount(): void {
-      this.effect.stop();
+      this.reactiveEffect.stop();
     }
 
-    effect = new ReactiveEffect(() => {
+    reactiveEffect = new ReactiveEffect(() => {
       const { children, $$__trigger__$$, $$__reactiveState__$$, $$__instance__$$, ...last } = this.props;
       const targetRender = (render || children) as (props: UnwrapRef<S> & P) => LikeReactNode;
       const element = targetRender?.({ ...last, ...$$__reactiveState__$$ } as UnwrapRef<S> & P) || null;
       return element;
     }, this.props.$$__trigger__$$);
 
     render() {
-      return this.effect.run();
+      return this.reactiveEffect.run();
     }
   }
-Original file line number
+Diff line change
@@ Expand Up @@
           });
         });
       }
+      return void 0;
     }
     /**
@@ Expand Down @@