@mpxjs/core 2.10.17 → 2.10.18-beta.2

package/@types/global.d.ts

@@ -1,5 +1,5 @@
 // declaration for mpx mode
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony'
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony' | 'ks'
 
 // declaration for mpx env
 declare let __mpx_env__: string

package/@types/index.d.ts

@@ -115,7 +115,7 @@ interface Context {
   refs: ObjectOf<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>
   asyncRefs: ObjectOf<Promise<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>>
 
-  forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
+  forceUpdate (data?: object): void
 
   selectComponent: ReplaceWxComponentIns['selectComponent']
   selectAllComponents: ReplaceWxComponentIns['selectAllComponents']
@@ -204,7 +204,7 @@ export interface MpxComponentIns {
 
   $watch (expr: string | (() => any), handler: WatchHandler | WatchOptWithHandler, options?: WatchOpt): () => void
 
-  $forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
+  $forceUpdate (data?: object): void
 
   $nextTick (fn: () => void): void
 
@@ -412,7 +412,7 @@ interface MpxConfig {
   rnConfig: RnConfig,
 }
 
-type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'
+type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'| 'ks' | 'jd' | 'dd'
 
 interface ImplementOptions {
   modes?: Array<SupportedMode>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.17",
+  "version": "2.10.18-beta.2",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.10.17",
+    "@mpxjs/utils": "^2.10.18",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -113,5 +113,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "33fbd0bb8d4b83555239a8931fabb23022af0866"
+  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
 }

package/src/convertor/convertor.js

@@ -9,6 +9,7 @@ import wxToTtRule from './wxToTt'
 import wxToDdRule from './wxToDd'
 import wxToJdRule from './wxToJd'
 import wxToReactRule from './wxToReact'
+import wxToKsRule from './wxToKs'
 
 /**
  * 转换规则包含四点
@@ -38,7 +39,8 @@ const rulesMap = {
   wxToJd: extend({}, defaultConvertRule, wxToJdRule),
   wxToIos: extend({}, defaultConvertRule, wxToReactRule),
   wxToAndroid: extend({}, defaultConvertRule, wxToReactRule),
-  wxToHarmony: extend({}, defaultConvertRule, wxToReactRule)
+  wxToHarmony: extend({}, defaultConvertRule, wxToReactRule),
+  wxToKs: extend({}, defaultConvertRule, wxToKsRule)
 }
 
 export function getConvertRule (convertMode) {

package/src/convertor/getConvertMode.js

@@ -8,7 +8,8 @@ const convertModes = {
   'wx-dd': 'wxToDd',
   'wx-ios': 'wxToIos',
   'wx-android': 'wxToAndroid',
-  'wx-harmony': 'wxToHarmony'
+  'wx-harmony': 'wxToHarmony',
+  'wx-ks': 'wxToKs'
 }
 
 export function getConvertMode (srcMode) {

package/src/convertor/wxToKs.js

@@ -0,0 +1,21 @@
+import { error } from '@mpxjs/utils'
+
+const BEHAVIORS_MAP = [
+  'wx://form-field',
+  'wx://form-field-group',
+  'wx://form-field-button',
+  'wx://component-export'
+]
+
+export default {
+  convert (options) {
+    if (options.behaviors) {
+      options.behaviors.forEach((behavior, idx) => {
+        if (BEHAVIORS_MAP.includes(behavior)) {
+          error(`Built-in behavior "${behavior}" is not supported in ks environment!`, global.currentResource || global.currentModuleId)
+          options.behaviors.splice(idx, 1)
+        }
+      })
+    }
+  }
+}

package/src/convertor/wxToWeb.js

@@ -6,7 +6,8 @@ import {
   diffAndCloneA,
   error,
   hasOwn,
-  isDev
+  isDev,
+  getDefaultValueByType
 } from '@mpxjs/utils'
 import { implemented } from '../core/implement'
 
@@ -56,6 +57,12 @@ export default {
                   return diffAndCloneA(prop.value).clone
                 }
                 : prop.value
+            } else {
+              // 没有显式设置value时，根据type自动添加默认值，与微信小程序原生行为保持一致
+              const defaultValue = getDefaultValueByType(prop.type, 'web')
+              if (defaultValue !== undefined) {
+                newProp.default = defaultValue
+              }
             }
             props[key] = newProp
           } else {

package/src/core/proxy.js

@@ -31,8 +31,10 @@ import {
   wrapMethodsWithErrorHandling,
   warn,
   error,
-  getEnvObj
+  getEnvObj,
+  def
 } from '@mpxjs/utils'
+import { renderHelperDefs } from '../platform/builtInMixins/renderHelperMixin'
 import {
   BEFORECREATE,
   CREATED,
@@ -164,6 +166,7 @@ export default class MpxProxy {
   }
 
   created () {
+    console.log('[mpx] create proxy instance')
     if (__mpx_dynamic_runtime__) {
       // 缓存上下文，在 destoryed 阶段删除
       contextMap.set(this.uid, this.target)
@@ -190,6 +193,7 @@ export default class MpxProxy {
     this.callHook(CREATED)
 
     if (!isWeb && !isReact) {
+      this.initRenderHelpers()
       this.initRender()
     }
 
@@ -335,7 +339,7 @@ export default class MpxProxy {
           createSelectorQuery: this.target.createSelectorQuery ? this.target.createSelectorQuery.bind(this.target) : envObj.createSelectorQuery.bind(envObj),
           createIntersectionObserver: this.target.createIntersectionObserver ? this.target.createIntersectionObserver.bind(this.target) : envObj.createIntersectionObserver.bind(envObj),
           getPageId: this.target.getPageId.bind(this.target),
-          getOpenerEventChannel: this.target.getOpenerEventChannel.bind(this.target)
+          getOpenerEventChannel: this.target.getOpenerEventChannel ? this.target.getOpenerEventChannel.bind(this.target) : noop
         }
       ])
       if (!isObject(setupResult)) {
@@ -728,6 +732,15 @@ export default class MpxProxy {
     this.toggleRecurse(true)
   }
 
+  initRenderHelpers () {
+    if (this.options.__nativeRender__ || __mpx_mode__ !== 'ks') return
+    Object.keys(renderHelperDefs).forEach((key) => {
+      if (!hasOwn(this.target, key)) {
+        def(this.target, key, renderHelperDefs[key])
+      }
+    })
+  }
+
   initRender () {
     if (this.options.__nativeRender__) return this.doRender()
 
@@ -740,6 +753,13 @@ export default class MpxProxy {
     const moduleId = this.target.__moduleId
     const dynamicTarget = this.target.__dynamic
 
+    const debugConfig = typeof global.__getMpxRenderEffectDebugRules === 'function'
+      ? global.__getMpxRenderEffectDebugRules(this.options?.mpxFileResource)
+      : {
+          debug: 1,
+          name: `MpxRenderEffect-${this.options?.mpxFileResource || 'unknown'}`
+        }
+
     const effect = this.effect = new ReactiveEffect(() => {
       // pre render for props update
       if (this.propsUpdatedFlag) {
@@ -769,8 +789,9 @@ export default class MpxProxy {
       } else {
         this.render()
       }
-    }, () => queueJob(update), this.scope)
+    }, () => queueJob(update), this.scope, this.scope, debugConfig.debug, debugConfig.name)
 
+    console.log(`[mpx] ${this.options?.mpxFileResource} will initRender`)
     const update = this.update = effect.run.bind(effect)
     update.id = this.uid
     // render effect允许自触发

package/src/helper/MpxScroll/index.js

@@ -57,8 +57,8 @@ export default class MpxScroll {
       const isIntersecting = change.isIntersecting
       this.isIntersecting = isIntersecting
       if (!isIntersecting) {
-        // 非 inter section 状态下及时清除 transtorm，以免影响正常滚动时元素的 fixed 定位
-        this.el.style.cssText = ''
+        // 非 inter section 状态下及时清除 transform，以免影响正常滚动时元素的 fixed 定位
+        this.el.style.transform = ''
         this.pullDownEventRegister && this.pullDownEventRegister.destroy()
       } else {
         this.pullDownEventRegister = new EventRegister(this.el, [
@@ -103,7 +103,12 @@ export default class MpxScroll {
 
   transformPage (distance) {
     this.translateY = distance
-    this.el.style.cssText = `transform: translateY(${distance}px)`
+    if (distance === 0) {
+      // 距离为 0 时移除 transform，避免影响页面 fixed 定位
+      this.el.style.transform = ''
+    } else {
+      this.el.style.transform = `translateY(${distance}px)`
+    }
   }
 
   onTouchEnd (e) {
@@ -219,8 +224,15 @@ export default class MpxScroll {
   }
 
   onReachBottom (onReachBottomDistance, callback) {
-    const { bottom } = this.el.getBoundingClientRect()
-    const mark = bottom - window.innerHeight <= onReachBottomDistance
+    const scrollTop = getScrollTop()
+    const scrollHeight = document.documentElement.scrollHeight
+    const clientHeight = window.innerHeight
+
+    // 使用 scrollHeight 判断实际内容高度是否超过视口，只有可滚动时才计算触底
+    const scrollable = scrollHeight > clientHeight
+    // 距离底部的距离 = 内容总高度 - (当前滚动位置 + 视口高度)
+    const distanceToBottom = scrollHeight - (scrollTop + clientHeight)
+    const mark = scrollable && (distanceToBottom <= onReachBottomDistance)
 
     if (!this.bottomReached && mark) {
       this.bottomReached = true

package/src/observer/array.js

@@ -32,7 +32,7 @@ export const arrayMethods = Object.create(arrayProto)
       }
       if (inserted) ob.observeArray(inserted)
       // notify change
-      ob.dep.notify()
+      ob.dep.notify(method, '[Array Method]', '[Array Method]', new Error('此时被通知变更').stack)
     }
     return result
   })

package/src/observer/computed.js

@@ -3,7 +3,7 @@ import Dep from './dep'
 import { createRef } from './ref'
 import { ReactiveEffect } from './effect'
 
-export function computed (getterOrOptions) {
+export function computed (getterOrOptions, options = {}) {
   let getter, setter
   if (isFunction(getterOrOptions)) {
     getter = getterOrOptions
@@ -17,7 +17,7 @@ export function computed (getterOrOptions) {
   let value
   const effect = new ReactiveEffect(getter, () => {
     dirty = true
-  })
+  }, undefined, options.debug || 0, options.name || 'anonymous computed')
 
   return createRef({
     get: () => {

package/src/observer/dep.js

@@ -7,30 +7,50 @@ let uid = 0
  * directives subscribing to it.
  */
 export default class Dep {
-  constructor () {
+  constructor (key) {
     this.id = uid++
     this.subs = []
+    this.addSubStacks = new Map()
+    this.key = key
   }
 
   addSub (sub) {
+    const addSubStack = new Error('此时被添加到订阅者列表').stack
+    this.addSubStacks.set(sub, addSubStack)
     this.subs.push(sub)
   }
 
   removeSub (sub) {
     remove(this.subs, sub)
+    this.addSubStacks.delete(sub)
   }
 
-  depend () {
+  depend (key, value) {
     if (Dep.target) {
-      Dep.target.addDep(this)
+      // if (this.key === 'link_params' || key === 'link_params') console.log(new Error('此时被依赖').stack)
+      Dep.target.addDep(this, key, value)
     }
   }
 
-  notify () {
+  notify (key, value, oldvalue, stack) {
     // stabilize the subscriber list first
     const subs = this.subs.slice()
+    try {
+      console.log('[Mpx Dep] notify ' +
+        this.subs.length +
+        ' subs, from ' +
+        key +
+        ': ' +
+        (typeof oldvalue === 'object' ? JSON.stringify(oldvalue) : oldvalue) +
+        ' -> ' +
+        (typeof value === 'object' ? JSON.stringify(value) : value) +
+        ', subs: ' +
+        subs.map(s => `id:${s.id} name:${s.name}`).join(', '))
+    } catch (e) {
+      // do nothing
+    }
     for (let i = 0, l = subs.length; i < l; i++) {
-      subs[i].update()
+      subs[i].update(key, value, oldvalue, stack, this.addSubStacks.get(subs[i]))
     }
   }
 }

package/src/observer/effect.js

@@ -17,6 +17,8 @@ export function resetTracking () {
   shouldTrack = last === undefined ? true : last
 }
 
+global.__setMpxReactiveEffect = (value) => {}
+
 export class ReactiveEffect {
   active = true
   deps = []
@@ -24,15 +26,45 @@ export class ReactiveEffect {
   depIds = new Set()
   newDepIds = new Set()
   allowRecurse = false
+  debug = 0
+  name = 'no-name'
 
   constructor (
     fn,
     scheduler,
-    scope
+    scope,
+    debug,
+    name
   ) {
+    this.debug = debug || 0
+    this.name = name || 'no-name'
     this.id = ++uid
-    this.fn = fn
-    this.scheduler = scheduler
+    this.fn = (...args) => {
+      this.debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} will run`)
+      this.debug > 1 && console.log(new Error('此时触发了run').stack)
+      const t = global.__setMpxReactiveEffect
+      global.__setMpxReactiveEffect = (option) => {
+        Object.entries(option).forEach(([key, value]) => {
+          this[key] = value
+        })
+      }
+      const result = fn(...args)
+      global.__setMpxReactiveEffect = t
+      return result
+    }
+    this.scheduler = (...args) => {
+      this.debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} will scheduled`)
+      this.debug > 1 && console.log(new Error('此时触发scheduler').stack)
+      const t = global.__setMpxReactiveEffect
+      global.__setMpxReactiveEffect = (option) => {
+        Object.entries(option).forEach(([key, value]) => {
+          this[key] = value
+        })
+      }
+      const result = scheduler(...args)
+      global.__setMpxReactiveEffect = t
+      return result
+    }
     this.pausedState = PausedState.resumed
     recordEffectScope(this, scope)
   }
@@ -53,14 +85,14 @@ export class ReactiveEffect {
   }
 
   // add dependency to this
-  addDep (dep) {
+  addDep (dep, key, value) {
     if (!shouldTrack) return
     const id = dep.id
     if (!this.newDepIds.has(id)) {
       this.newDepIds.add(id)
       this.newDeps.push(dep)
       if (!this.depIds.has(id)) {
-        dep.addSub(this)
+        dep.addSub(this, key, value)
       }
     }
   }
@@ -85,12 +117,20 @@ export class ReactiveEffect {
   }
 
   // same as trigger
-  update () {
+  update (key, value, oldvalue, stack, fromAddSubStack) {
+    const debugOptions = global.__getMpxReactiveEffectDebugRules?.(key, value)
+    const debug = debugOptions ? debugOptions.debug : this.debug
     // avoid dead cycle
     if (Dep.target !== this || this.allowRecurse) {
       if (this.pausedState !== PausedState.resumed) {
+        debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} pausedState will set to dirty with, from ${key}: ${typeof value === 'object' ? JSON.stringify(value) : value}`)
+        debug > 1 && console.log(stack)
+        debug > 2 && console.log(fromAddSubStack)
         this.pausedState = PausedState.dirty
       } else {
+        debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} will updated, from ${key}: ${typeof value === 'object' ? JSON.stringify(value) : value}`)
+        debug > 1 && console.log(stack)
+        debug > 2 && console.log(fromAddSubStack)
         this.scheduler ? this.scheduler() : this.run()
       }
     }

package/src/observer/reactive.js

@@ -110,7 +110,7 @@ function observe (value, shallow) {
  * Define a reactive property on an Object.
  */
 export function defineReactive (obj, key, val, shallow) {
-  const dep = new Dep()
+  const dep = new Dep(key)
 
   const property = Object.getOwnPropertyDescriptor(obj, key)
   if (property && property.configurable === false) {
@@ -121,6 +121,8 @@ export function defineReactive (obj, key, val, shallow) {
   const getter = property && property.get
   const setter = property && property.set
 
+  const stack = new Error().stack
+
   let childOb = shallow ? getObserver(val) : observe(val)
   Object.defineProperty(obj, key, {
     enumerable: true,
@@ -128,9 +130,9 @@ export function defineReactive (obj, key, val, shallow) {
     get: function reactiveGetter () {
       const value = getter ? getter.call(obj) : val
       if (Dep.target) {
-        dep.depend()
+        dep.depend(key, value)
         if (childOb) {
-          childOb.dep.depend()
+          childOb.dep.depend(key, value)
           if (Array.isArray(value)) {
             dependArray(value)
           }
@@ -140,10 +142,12 @@ export function defineReactive (obj, key, val, shallow) {
     },
     set: function reactiveSetter (newVal) {
       const value = getter ? getter.call(obj) : val
+      let oldVal = value
       if (!(shallow && isForceTrigger) && !hasChanged(newVal, value)) {
         return
       }
       if (!shallow && isRef(value) && !isRef(newVal)) {
+        oldVal = value.value
         value.value = newVal
       } else if (setter) {
         setter.call(obj, newVal)
@@ -151,7 +155,7 @@ export function defineReactive (obj, key, val, shallow) {
         val = newVal
       }
       childOb = shallow ? getObserver(newVal) : observe(newVal)
-      dep.notify()
+      dep.notify(key, newVal, oldVal, stack)
     }
   })
 }
@@ -176,8 +180,9 @@ export function set (target, key, val) {
     target[key] = val
     return val
   }
+  const oldVal = target[key]
   defineReactive(ob.value, key, val, ob.shallow)
-  ob.dep.notify()
+  ob.dep.notify(key, val, oldVal, new Error('此时被通知变更').stack)
   return val
 }
 
@@ -193,11 +198,12 @@ export function del (target, key) {
   if (!hasOwn(target, key)) {
     return
   }
+  const oldVal = target[key]
   delete target[key]
   if (!ob) {
     return
   }
-  ob.dep.notify()
+  ob.dep.notify(key, undefined, oldVal, new Error('此时被通知变更').stack)
 }
 
 /**
@@ -208,7 +214,7 @@ function dependArray (arr) {
   for (let i = 0, l = arr.length; i < l; i++) {
     const item = arr[i]
     const ob = getObserver(item)
-    ob && ob.dep.depend()
+    ob && ob.dep.depend(i, item)
     if (Array.isArray(item)) {
       dependArray(item)
     }

package/src/observer/watch.js

@@ -137,7 +137,7 @@ export function watch (source, cb, options = {}) {
 
   job.allowRecurse = !!cb
 
-  const effect = new ReactiveEffect(getter, scheduler)
+  const effect = new ReactiveEffect(getter, scheduler, undefined, options.debug || 0, options.name || 'anonymous watch')
 
   if (cb) {
     if (immediate) {

package/src/platform/builtInMixins/index.js

@@ -57,14 +57,18 @@ export default function getBuiltInMixins ({ type, rawOptions = {} }) {
     }
     // 此为纯增强类mixins，原生模式下不需要注入
     if (!rawOptions.__nativeRender__) {
-      bulitInMixins = bulitInMixins.concat([
-        renderHelperMixin(),
+      const enhancedMixins = [
         showMixin(type),
         i18nMixin(),
         dynamicRenderHelperMixin(),
         dynamicSlotMixin(),
         dynamicRefsMixin()
-      ])
+      ]
+      if (__mpx_mode__ !== 'ks') {
+        // ks methods 不支持 _ 或者 $ 开头的方法名，所以 ks 不走 methods mixin
+        enhancedMixins.unshift(renderHelperMixin())
+      }
+      bulitInMixins = bulitInMixins.concat(enhancedMixins)
     }
   }
   return bulitInMixins.filter(item => item)

package/src/platform/builtInMixins/pageStatusMixin.js

@@ -1,4 +1,5 @@
 import { CREATED, ONLOAD, ONSHOW, ONHIDE, ONRESIZE } from '../../core/innerLifecycle'
+import { isObject } from '@mpxjs/utils'
 
 export default function pageStatusMixin (mixinType) {
   if (mixinType === 'page') {
@@ -12,8 +13,19 @@ export default function pageStatusMixin (mixinType) {
       onResize (e) {
         this.__mpxProxy.callHook(ONRESIZE, [e])
       },
-      onLoad (query) {
-        this.__mpxProxy.callHook(ONLOAD, [query])
+      onLoad (rawQuery) {
+        if (__mpx_mode__ === 'wx' || __mpx_mode__ === 'qq' || __mpx_mode__ === 'tt') {
+          const decodedQuery = {}
+          // 处理以上平台直接透传encode的结果，给到onload第二个参数供开发者使用
+          if (isObject(rawQuery)) {
+            for (const key in rawQuery) {
+              decodedQuery[key] = decodeURIComponent(rawQuery[key])
+            }
+          }
+          this.__mpxProxy.callHook(ONLOAD, [rawQuery, decodedQuery])
+        } else {
+          this.__mpxProxy.callHook(ONLOAD, [rawQuery, rawQuery])
+        }
       }
     }
     if (__mpx_mode__ === 'ali') {