From 7f6990e705c6496ec903c7e6723b452ede30b8d7 Mon Sep 17 00:00:00 2001 From: zjxxxxxxxxx <954270063@qq.com> Date: Fri, 22 Sep 2023 09:26:36 +0800 Subject: [PATCH] feat: cancel an expired raf --- .changeset/old-hairs-watch.md | 5 +++++ .../src/elements/defineOverlayElement.ts | 21 +++++++++++++------ .../client/src/resolve/createReactResolver.ts | 18 ++++++++-------- .../client/src/resolve/createVueResolver.ts | 2 +- .../client/src/resolve/framework/react15.ts | 4 ++-- .../client/src/resolve/framework/react18.ts | 8 +++---- packages/client/src/resolve/framework/vue2.ts | 8 ++++--- 7 files changed, 41 insertions(+), 25 deletions(-) create mode 100644 .changeset/old-hairs-watch.md diff --git a/.changeset/old-hairs-watch.md b/.changeset/old-hairs-watch.md new file mode 100644 index 00000000..0b9184d9 --- /dev/null +++ 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 index aa06b669..b0908357 100644 --- 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) { 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 index f273dbcd..1501cd76 100644 --- 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 { - 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(options: ReactResolverOptions) { const { isValid, getOwner, getSource, getName } = options; return function reactResolver( - target: T | null | undefined, + current: T | null | undefined, tree: Partial[], 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(options: ReactResolverOptions) { if (!deep) return; } - target = owner; + current = owner; } }; } diff --git a/packages/client/src/resolve/createVueResolver.ts b/packages/client/src/resolve/createVueResolver.ts index 50317c13..e311a94a 100644 --- a/packages/client/src/resolve/createVueResolver.ts +++ b/packages/client/src/resolve/createVueResolver.ts @@ -7,7 +7,7 @@ interface VueResolverOptions { 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 index 422404f4..fde5a915 100644 --- 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 index 55133f01..68385fec 100644 --- 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, + { value: fiber }: ResolveDebug, tree: Partial[], 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 index 38db2bce..a3539ba5 100644 --- a/packages/client/src/resolve/framework/vue2.ts +++ b/packages/client/src/resolve/framework/vue2.ts @@ -6,10 +6,12 @@ let resolver: ReturnType>; 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) => - 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;