feat: cancel an expired raf

zjxxxxxxxxx · Sep 22, 2023 · 7f6990e · 7f6990e
1 parent 67274fd
commit 7f6990e
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 25 deletions.
diff --git a/.changeset/old-hairs-watch.md b/.changeset/old-hairs-watch.md
@@ -0,0 +1,5 @@
+---
+'@open-editor/client': patch
+---
+
+cancel an expired raf
diff --git a/packages/client/src/elements/defineOverlayElement.ts b/packages/client/src/elements/defineOverlayElement.ts
@@ -116,16 +116,25 @@ export function defineOverlayElement() {
       this.#update_RAF();
     };
 
+    #last_RAF?: number;
     #update_RAF = () => {
-      requestAnimationFrame(() => {
-        const styles = this.#activeElement
-          ? getComputedStyles(this.#activeElement)
-          : emptyComputedStyles;
-        this.#updateStyles(styles);
-        this.#tooltip.update(this.#activeElement, styles.posttion);
+      if (this.#last_RAF) {
+        cancelAnimationFrame(this.#last_RAF);
+      }
+      this.#last_RAF = requestAnimationFrame(() => {
+        this.#last_RAF = undefined;
+        this.#update();
       });
     };
 
+    #update() {
+      const styles = this.#activeElement
+        ? getComputedStyles(this.#activeElement)
+        : emptyComputedStyles;
+      this.#updateStyles(styles);
+      this.#tooltip.update(this.#activeElement, styles.posttion);
+    }
+
     #updateStyles(styles: Record<string, ComputedStyle>) {
       applyStyle(this.#posttion, {
         width: CSS_util.px(styles.posttion.width),

diff --git a/packages/client/src/resolve/createReactResolver.ts b/packages/client/src/resolve/createReactResolver.ts
@@ -2,24 +2,24 @@ import type { ElementSourceMeta } from './resolveSource';
 import { isValidFileName } from './util';
 
 export interface ReactResolverOptions<T = any> {
-  isValid(target?: T | null): boolean;
-  getOwner(target?: T | null): T | null | undefined;
-  getSource(target?: T | null): any;
-  getName(target?: T | null): string | undefined;
+  isValid(current?: T | null): boolean;
+  getOwner(current?: T | null): T | null | undefined;
+  getSource(current?: T | null): any;
+  getName(current?: T | null): string | undefined;
 }
 
 export function createReactResolver<T = any>(options: ReactResolverOptions<T>) {
   const { isValid, getOwner, getSource, getName } = options;
 
   return function reactResolver(
-    target: T | null | undefined,
+    current: T | null | undefined,
     tree: Partial<ElementSourceMeta>[],
     deep: boolean,
   ) {
-    while (target) {
-      let owner = getOwner(target);
+    while (current) {
+      let owner = getOwner(current);
 
-      const source = getSource(target);
+      const source = getSource(current);
       if (isValidFileName(source?.fileName)) {
         while (!isValid(owner)) {
           if (!owner) return;
@@ -36,7 +36,7 @@ export function createReactResolver<T = any>(options: ReactResolverOptions<T>) {
         if (!deep) return;
       }
 
-      target = owner;
+      current = owner;
     }
   };
 }
diff --git a/packages/client/src/resolve/createVueResolver.ts b/packages/client/src/resolve/createVueResolver.ts
@@ -7,7 +7,7 @@ interface VueResolverOptions<T = any> {
   isValid(instance: T): boolean;
   isValidNext(instance: T): boolean;
   getNext(instance: T): T | null | undefined;
-  getVueSource(instance: T): string;
+  getVueSource(instance: T): string | undefined;
   getFile(instance: T): string;
   getName(instance: T): string | undefined;
 }

diff --git a/packages/client/src/resolve/framework/react15.ts b/packages/client/src/resolve/framework/react15.ts
@@ -16,8 +16,8 @@ function createResolver() {
       }
       return false;
     },
-    getOwner: (target) => target?._currentElement._owner,
-    getSource: (target) => target?._currentElement._source,
+    getOwner: (instance) => instance?._currentElement._owner,
+    getSource: (instance) => instance?._currentElement._source,
     getName(owner) {
       if (owner) {
         const component = isFunc(owner._currentElement.type)

diff --git a/packages/client/src/resolve/framework/react18.ts b/packages/client/src/resolve/framework/react18.ts
@@ -13,8 +13,8 @@ function createResolver() {
       }
       return false;
     },
-    getOwner: (target) => target?._debugOwner,
-    getSource: (target) => target?._debugSource,
+    getOwner: (fiber) => fiber?._debugOwner,
+    getSource: (fiber) => fiber?._debugSource,
     getName(owner) {
       if (owner) {
         const component = isFunc(owner.type)
@@ -37,9 +37,9 @@ export function fiberResolver(
 }
 
 export function resolveReact18(
-  debug: ResolveDebug<Fiber>,
+  { value: fiber }: ResolveDebug<Fiber>,
   tree: Partial<ElementSourceMeta>[],
   deep = false,
 ) {
-  fiberResolver(debug.value, tree, deep);
+  fiberResolver(fiber, tree, deep);
 }
diff --git a/packages/client/src/resolve/framework/vue2.ts b/packages/client/src/resolve/framework/vue2.ts
@@ -6,10 +6,12 @@ let resolver: ReturnType<typeof createVueResolver<any>>;
 function createResolver() {
   resolver = createVueResolver({
     isValid: (instance) => Boolean(instance?.$vnode),
-    isValidNext: (instance) => Boolean(instance.$parent.$vnode),
+    isValidNext: (instance) => Boolean(instance.$parent?.$vnode),
     getNext: (instance) => instance.$parent,
-    getVueSource: (instance) =>
-      <string>instance.$vnode.componentInstance?.$props?.__source,
+    getVueSource(instance) {
+      const { $props } = instance.$vnode.componentInstance;
+      return $props?.__source;
+    },
     getFile(instance) {
       const { Ctor } = instance.$vnode.componentOptions;
       return Ctor?.__file ?? Ctor.options?.__file;