support web effectScope.pause/resume & fix ts types

didi · Nov 13, 2023 · 13d96c4 · 13d96c4
1 parent d3f067d
commit 13d96c4
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 33 deletions.
diff --git a/packages/core/@types/index.d.ts b/packages/core/@types/index.d.ts
@@ -46,7 +46,7 @@ type FullPropType<T> = {
 }
 
 interface Properties {
-  [key: string]: WechatMiniprogram.Component.AllProperty | PropType<any> | FullPropType<any>
+  [key: string]: WechatMiniprogram.Component.AllProperty
 }
 
 interface Methods {
@@ -82,12 +82,12 @@ type PropValueType<Def> = Def extends {
   }
   ? T
   : Def extends (...args: any[]) => infer T
-  ? T
-  : Def extends FullPropType<infer T>
-  ? T
-  : Def extends PropType<infer T>
-  ? T
-  : any;
+    ? T
+    : Def extends FullPropType<infer T>
+      ? T
+      : Def extends PropType<infer T>
+        ? T
+        : any;
 
 type GetPropsType<T> = {
   readonly [K in keyof T]: PropValueType<T[K]>
@@ -240,7 +240,10 @@ export function createApp<T extends WechatMiniprogram.IAnyObject> (opt: WechatMi
 
 type MixinType = 'app' | 'page' | 'component'
 
-export function injectMixins (mixins: object | Array<object>, options?: MixinType | MixinType[] | { types?: MixinType | MixinType[], stage?: number }): Mpx
+export function injectMixins (mixins: object | Array<object>, options?: MixinType | MixinType[] | {
+  types?: MixinType | MixinType[],
+  stage?: number
+}): Mpx
 
 // export function watch (expr: string | (() => any), handler: WatchHandler | WatchOptWithHandler, options?: WatchOpt): () => void
 
@@ -339,7 +342,7 @@ export interface Ref<T = any> {
    * We need this to be in public d.ts but don't want it to show up in IDE
    * autocomplete, so we use a private Symbol instead.
    */
-    [RefSymbol]: true
+  [RefSymbol]: true
 }
 
 type CollectionTypes = IterableCollections | WeakCollections
@@ -448,7 +451,11 @@ export interface WatchOptions extends WatchEffectOptions {
 
 interface EffectScope {
   run<T> (fn: () => T): T | undefined // 如果作用域不活跃就为 undefined
-  stop (): void
+  stop (fromParent?: boolean): void
+
+  pause (): void
+
+  resume (ignoreDirty?: boolean): void
 }
 
 
@@ -615,6 +622,7 @@ export function onSaveExitState (callback: () => void): void
 
 // get instance
 export function getCurrentInstance<T extends ComponentIns<{}, {}, {}>> (): { proxy: T, [x: string]: any }
+
 // I18n
 export function useI18n<Options extends {
   inheritLocale?: boolean

diff --git a/packages/core/src/observer/effect.js b/packages/core/src/observer/effect.js
@@ -119,7 +119,9 @@ export class ReactiveEffect {
   }
 
   pause () {
-    this.pausedState = PausedState.paused
+    if (this.pausedState !== PausedState.dirty) {
+      this.pausedState = PausedState.paused
+    }
   }
 
   resume (ignoreDirty = false) {

diff --git a/packages/core/src/platform/export/index.web.js b/packages/core/src/platform/export/index.web.js
@@ -1,8 +1,60 @@
-import {
-  effectScope as vueEffectScope,
-  getCurrentScope as vueGetCurrentScope,
-  onScopeDispose
-} from 'vue'
+import { EffectScope } from 'vue'
+import { hasOwn } from '@mpxjs/utils'
+import { PausedState } from '../../helper/const'
+
+const hackEffectScope = () => {
+  EffectScope.prototype.pause = function () {
+    if (this.active) {
+      let i, l
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        const effect = this.effects[i]
+        // vue2.7中存在对于watcher实例方法的重写(doWatch)，因此无法通过修改Watcher.prototype统一实现pause和resume，只能逐个实例修改实现
+        if (!hasOwn(effect, 'pausedState')) {
+          effect.pausedState = PausedState.resumed
+          const rawUpdate = effect.update
+          effect.update = function () {
+            if (effect.pausedState !== PausedState.resumed) {
+              effect.pausedState = PausedState.dirty
+            } else {
+              rawUpdate.call(effect)
+            }
+          }
+        }
+        if (effect.pausedState !== PausedState.dirty) {
+          effect.pausedState = PausedState.paused
+        }
+      }
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].pause()
+        }
+      }
+    }
+  }
+
+  EffectScope.prototype.resume = function (ignoreDirty = false) {
+    if (this.active) {
+      let i, l
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        const effect = this.effects[i]
+        if (hasOwn(effect, 'pausedState')) {
+          const lastPausedState = effect.pausedState
+          effect.pausedState = PausedState.resumed
+          if (!ignoreDirty && lastPausedState === PausedState.dirty) {
+            effect.update()
+          }
+        }
+      }
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].resume(ignoreDirty)
+        }
+      }
+    }
+  }
+}
+
+hackEffectScope()
 
 export {
   // watch
@@ -29,27 +81,12 @@ export {
   // computed
   computed,
   // instance
-  getCurrentInstance
-} from 'vue'
-
-const noop = () => {
-}
-
-const fixEffectScope = (scope) => {
-  scope.pause = noop
-  scope.resume = noop
-  return scope
-}
-
-const effectScope = (detached) => fixEffectScope(vueEffectScope(detached))
-const getCurrentScope = () => fixEffectScope(vueGetCurrentScope())
-
-export {
+  getCurrentInstance,
   // effectScope
   effectScope,
   getCurrentScope,
   onScopeDispose
-}
+} from 'vue'
 
 export {
   // i18n