@mpxjs/api-proxy 2.9.64 → 2.9.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.9.64",
+  "version": "2.9.66",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/didi/mpx#readme",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.64",
+    "@mpxjs/utils": "^2.9.65",
     "axios": "^1.7.3"
   },
   "peerDependencies": {
@@ -80,5 +80,5 @@
       "optional": true
     }
   },
-  "gitHead": "803334dc0e600f219d514c27461aa7663b7a6653"
+  "gitHead": "ff9eb06a3be28538870823cebf813ed56f39bbd7"
 }

package/src/common/js/utils.js

@@ -1,4 +1,4 @@
-import { hasOwn, noop, getEnvObj } from '@mpxjs/utils'
+import { hasOwn, noop, getEnvObj, getFocusedNavigation } from '@mpxjs/utils'
 
 /**
  *
@@ -87,14 +87,6 @@ function failHandle (result, fail, complete) {
   typeof complete === 'function' && complete(result)
 }
 
-function getFocusedNavigation () {
-  for (const key in global.__mpxPagesMap) {
-    const navigation = global.__mpxPagesMap[key]?.[1]
-    if (navigation && navigation.isFocused()) {
-      return navigation
-    }
-  }
-}
 const ENV_OBJ = getEnvObj()
 
 export {

package/src/platform/api/animation/animation.react.js

@@ -0,0 +1,281 @@
+class Animation {
+  constructor (
+    {
+      duration = 400,
+      delay = 0,
+      timingFunction = 'linear',
+      transformOrigin = '50% 50% 0'
+    } = {}
+  ) {
+    // 默认值
+    this._setDefault(duration, delay, timingFunction, transformOrigin)
+    this.id = 0
+  }
+
+  _transformUnit (...args) {
+    return args.map(each => {
+      return global.__formatValue(each)
+    })
+  }
+
+  _formatTransformOrigin (transformOrigin) {
+    const transformOriginArr = transformOrigin.trim().split(/\s+/, 3).map(item => global.__formatValue(item))
+    switch (transformOriginArr.length) {
+      case 0:
+        transformOriginArr.push('50%', '50%', 0)
+        break
+      case 1:
+        transformOriginArr.push('50%', 0)
+        break
+      case 2:
+        transformOriginArr.push(0)
+        break
+    }
+    return transformOriginArr
+  }
+
+  // 设置默认值
+  _setDefault (duration, delay, timingFunction, transformOrigin) {
+    this.DEFAULT = { duration, delay, timingFunction, transformOrigin }
+  }
+
+  // 属性组合
+  rules = new Map()
+  // transform 对象
+  transform = new Map()
+  // 组合动画
+  steps = []
+
+  matrix (a, b, c, d, tx, ty) { // Todo
+    console.error('React Native 不支持 matrix 动画')
+    // this.transform.set('matrix', [a, b, c, d, tx, ty])
+    return this
+  }
+
+  matrix3d (a1, b1, c1, d1,
+            a2, b2, c2, d2,
+            a3, b3, c3, d3,
+            a4, b4, c4, d4
+  ) {
+    console.error('React Native 不支持 matrix3d 动画')
+    // this.transform.set('matrix3d', [ // Todo
+    //   a1, b1, c1, d1,
+    //   a2, b2, c2, d2,
+    //   a3, b3, c3, d3,
+    //   a4, b4, c4, d4
+    // ])
+    return this
+  }
+
+  rotate (angle) { // 旋转变换
+    this.transform.set('rotate', `${angle}deg`)
+    return this
+  }
+
+  rotate3d (x, y, z, angle) {
+    if (typeof y !== 'number') {
+      this.transform.set('rotate3d', x)
+    } else {
+      // this.transform.set('rotate3d', [x, y, z, angle])
+      this.rotateX(x)
+      this.rotateY(y)
+      this.rotateZ(z)
+      this.rotate(angle)
+    }
+    return this
+  }
+
+  rotateX (angle) {
+    this.transform.set('rotateX', `${angle}deg`)
+    return this
+  }
+
+  rotateY (angle) {
+    this.transform.set('rotateY', `${angle}deg`)
+    return this
+  }
+
+  rotateZ (angle) {
+    this.transform.set('rotateZ', `${angle}deg`)
+    return this
+  }
+
+  scale (x, y) {
+    const scaleY = (typeof y !== 'undefined' && y !== null) ? y : x
+    this.scaleX(x)
+    this.scaleY(scaleY)
+    // this.transform.set('scale', [x, scaleY])
+    return this
+  }
+
+  scaleX (scale) {
+    this.transform.set('scaleX', scale)
+    return this
+  }
+
+  scaleY (scale) {
+    this.transform.set('scaleY', scale)
+    return this
+  }
+
+  scaleZ (scale) { // Todo Invariant Violation: Invalid transform scaleZ: {"scaleZ":0}
+    console.error('React Native 不支持 transform scaleZ')
+    // this.transform.set('scaleZ', scale)
+    return this
+  }
+
+  scale3d (x, y, z) { // Todo Invariant Violation: Invalid transform scaleZ: {"scaleZ":0}
+    console.error('React Native 不支持 transform scaleZ，故不支持 scale3d')
+    // this.scaleX(x)
+    // this.scaleY(y)
+    // this.scaleZ(z)
+    return this
+  }
+
+  skew (x, y) {
+    // this.transform.set('skew', [x, y])
+    this.skewX(x)
+    this.skewY(y)
+    return this
+  }
+
+  skewX (angle) {
+    this.transform.set('skewX', `${angle}deg`)
+    return this
+  }
+
+  skewY (angle) {
+    this.transform.set('skewY', `${angle}deg`)
+    return this
+  }
+
+  translate (x, y) {
+    [x, y] = this._transformUnit(x, y)
+    // this.transform.set('translate', [x, y])
+    this.translateX(x)
+    this.translateY(y)
+    return this
+  }
+
+  translateX (translate) {
+    [translate] = this._transformUnit(translate)
+    this.transform.set('translateX', translate)
+    return this
+  }
+
+  translateY (translate) {
+    [translate] = this._transformUnit(translate)
+    this.transform.set('translateY', translate)
+    return this
+  }
+
+  translateZ (translate) { // Todo Invariant Violation: Invalid transform translateZ: {"translateZ":0}
+    console.error('React Native 不支持 transform translateZ')
+    // [translate] = this._transformUnit(translate)
+    // this.transform.set('translateZ', translate)
+    return this
+  }
+
+  translate3d (x, y, z) { // Todo Invariant Violation: Invalid transform translateZ: {"translateZ":0}
+    console.error('React Native 不支持 transform translateZ，故无法支持 translate3d')
+    // [x, y, z] = this._transformUnit(x, y, z)
+    // // this.transform.set('translate3d', [x, y, z])
+    // this.translateX(x)
+    // this.translateY(y)
+    // this.translateZ(z)
+    return this
+  }
+
+  opacity (value) {
+    this.rules.set('opacity', value)
+    return this
+  }
+
+  backgroundColor (value) {
+    this.rules.set('backgroundColor', value)
+    return this
+  }
+
+  width (value) {
+    [value] = this._transformUnit(value)
+    this.rules.set('width', value)
+    return this
+  }
+
+  height (value) {
+    [value] = this._transformUnit(value)
+    this.rules.set('height', value)
+    return this
+  }
+
+  top (value) {
+    [value] = this._transformUnit(value)
+    this.rules.set('top', value)
+    return this
+  }
+
+  right (value) {
+    [value] = this._transformUnit(value)
+    this.rules.set('right', value)
+    return this
+  }
+
+  bottom (value) {
+    [value] = this._transformUnit(value)
+    this.rules.set('bottom', value)
+    return this
+  }
+
+  left (value) {
+    [value] = this._transformUnit(value)
+    this.rules.set('left', value)
+    return this
+  }
+
+  // 关键帧载入
+  step (arg = {}) {
+    const { DEFAULT } = this
+    let {
+      duration = DEFAULT.duration,
+      delay = DEFAULT.delay,
+      timingFunction = DEFAULT.timingFunction,
+      transformOrigin = DEFAULT.transformOrigin
+    } = arg
+    if (typeof transformOrigin !== 'string') {
+      console.error('Value of transformOrigin only support string type, please check again')
+      transformOrigin = DEFAULT.transformOrigin
+    }
+    this.steps.push({
+      animatedOption: {
+        duration,
+        delay,
+        timingFunction,
+        transformOrigin: this._formatTransformOrigin(transformOrigin)
+      },
+      rules: this.rules,
+      transform: this.transform
+    })
+    // 清空 rules 和 transform
+    this.rules = new Map()
+    this.transform = new Map()
+    return this
+  }
+
+  // 数据
+  createAnimationData () {
+    const steps = this.steps
+    this.steps = []
+    return steps
+  }
+
+  // 动画数据产出
+  export () {
+    this.id++
+    return {
+      id: this.id,
+      actions: this.createAnimationData()
+    }
+  }
+}
+
+export default Animation

package/src/platform/api/animation/index.android.js

@@ -0,0 +1 @@
+export * from './index.ios'

package/src/platform/api/animation/index.ios.js

@@ -0,0 +1,5 @@
+import Animation from './animation.react'
+
+export const createAnimation = (option) => {
+  return new Animation(option)
+}

package/src/platform/api/create-intersection-observer/index.ali.js

@@ -1,6 +1,9 @@
 import { ENV_OBJ } from '../../../common/js'
 
 function createIntersectionObserver (component, options = {}) {
+  if (options.observeAll) {
+    options.selectAll = options.observeAll
+  }
   return ENV_OBJ.createIntersectionObserver(options)
 }
 

package/src/platform/api/create-intersection-observer/index.ios.js

@@ -0,0 +1,9 @@
+import IntersectionObserver from './rnIntersectionObserver'
+
+function createIntersectionObserver (comp, opt, config) {
+  return new IntersectionObserver(comp, opt, config)
+}
+
+export {
+  createIntersectionObserver
+}

package/src/platform/api/create-intersection-observer/rnIntersectionObserver.js

@@ -0,0 +1,239 @@
+import { isArray, isObject, isString, noop } from '@mpxjs/utils'
+import throttle from 'lodash/throttle'
+import { Dimensions } from 'react-native'
+import { getFocusedNavigation } from '../../../common/js'
+
+const WindowRefStr = 'window'
+const IgnoreTarget = 'ignore'
+const DefaultMargin = { top: 0, bottom: 0, left: 0, right: 0 }
+let idCount = 0
+
+class RNIntersectionObserver {
+  constructor (component, options, intersectionCtx) {
+    this.id = idCount++
+    this.component = component
+    this.options = options
+    this.thresholds = options.thresholds.sort((a, b) => a - b) || [0]
+    this.initialRatio = options.initialRatio || 0
+    this.observeAll = options.observeAll || false
+
+    // 组件上挂载对应的observers，用于在组件销毁的时候进行批量disconnect
+    this.component._intersectionObservers = this.component.__intersectionObservers || []
+    this.component._intersectionObservers.push(this)
+
+    this.observerRefs = null
+    this.relativeRef = null
+    this.margins = DefaultMargin
+    this.callback = noop
+
+    this.throttleMeasure = this.getThrottleMeasure(options.throttleTime || 100)
+
+    // 记录上一次相交的比例
+    this.previousIntersectionRatio = []
+
+     // 添加实例添加到上下文中，滚动组件可以获取到上下文内的实例从而触发滚动
+    if (intersectionCtx && isObject(intersectionCtx)) {
+      this.intersectionCtx = intersectionCtx
+      this.intersectionCtx[this.id] = this
+    }
+    return this
+  }
+
+    // 支持传递ref 或者 selector
+  relativeTo (selector, margins = {}) {
+    let relativeRef
+    if (isString(selector)) {
+      relativeRef = this.component.__selectRef(selector, 'node')
+    }
+    if (isObject(selector)) {
+      relativeRef = selector.nodeRefs?.[0]
+    }
+    if (relativeRef) {
+      this.relativeRef = relativeRef
+      this.margins = Object.assign({}, DefaultMargin, margins)
+    } else {
+      console.warn(`node ${selector}is not found. The relative node for intersection observer will be ignored`)
+    }
+    return this
+  }
+
+  relativeToViewport (margins = {}) {
+    this.relativeRef = WindowRefStr
+    this.margins = Object.assign({}, DefaultMargin, margins)
+    return this
+  }
+
+  observe (selector, callback) {
+    if (this.observerRefs) {
+      console.error('"observe" call can be only called once in IntersectionObserver')
+      return
+    }
+    let targetRef = null
+    if (this.observeAll) {
+      targetRef = this.component.__selectRef(selector, 'node', true)
+    } else {
+      targetRef = this.component.__selectRef(selector, 'node')
+    }
+    if (!targetRef || targetRef.length === 0) {
+      console.error('intersection observer target not found')
+      return
+    }
+    this.observerRefs = isArray(targetRef) ? targetRef : [targetRef]
+    this.callback = callback
+    this._measureTarget(true)
+  }
+
+  _getWindowRect () {
+    if (this.windowRect) return this.windowRect
+    const navigation = getFocusedNavigation()
+    const screen = Dimensions.get('screen')
+    const navigationLayout = navigation.layout || {
+      x: 0,
+      y: 0,
+      width: screen.width,
+      height: screen.height
+    }
+
+    const windowRect = {
+      top: navigationLayout.y + this.margins.top,
+      left: navigationLayout.x + this.margins.left,
+      right: navigationLayout.width - this.margins.right,
+      bottom: navigationLayout.y + navigationLayout.height - this.margins.bottom
+    }
+
+    this.windowRect = windowRect
+    return this.windowRect
+  }
+
+  _getReferenceRect (targetRef) {
+    const targetRefs = isArray(targetRef) ? targetRef : [targetRef]
+    const targetPromiseQueue = []
+    targetRefs.forEach((targetRefItem) => {
+      if (targetRefItem === WindowRefStr) {
+        targetPromiseQueue.push(this._getWindowRect())
+        return
+      }
+      // 当节点前面存在后面移除的时候可能会存在拿不到target的情况，此处直接忽略留一个占位不用做计算即可
+      // 测试节点移除之后 targetRefItem.getNodeInstance().nodeRef都存在，只是current不存在了
+      if (!targetRefItem || !targetRefItem.getNodeInstance().nodeRef.current) {
+        targetPromiseQueue.push(Promise.resolve(IgnoreTarget))
+        return
+      }
+      const target = targetRefItem.getNodeInstance().nodeRef.current
+      targetPromiseQueue.push(new Promise((resolve) => {
+        target.measureInWindow(
+          (x, y, width, height) => {
+            const boundingClientRect = {
+              left: x,
+              top: y,
+              right: x + width,
+              bottom: y + height,
+              width: width,
+              height: height
+            }
+            resolve(boundingClientRect)
+          }
+        )
+      }))
+    })
+
+    if (isArray(targetRef)) {
+      return Promise.all(targetPromiseQueue)
+    } else {
+      return targetPromiseQueue[0]
+    }
+  }
+
+  _restrictValueInRange (start = 0, end = 0, value = 0) {
+    return Math.min(Math.max(start, value), end)
+  }
+
+  _isInsectedFn (intersectionRatio, previousIntersectionRatio, thresholds) {
+  // console.log('nowintersectionRatio, previousIntersectionRatio', [intersectionRatio, previousIntersectionRatio])
+    let nowIndex = -1
+    let previousIndex = -1
+    thresholds.forEach((item, index) => {
+      if (intersectionRatio >= item) {
+        nowIndex = index
+      }
+      if (previousIntersectionRatio >= item) {
+        previousIndex = index
+      }
+    })
+    return !(nowIndex === previousIndex)
+  }
+
+  // 计算相交区域
+  _measureIntersection ({ observeRect, relativeRect, observeIndex, isInit }) {
+    const visibleRect = {
+      left: this._restrictValueInRange(relativeRect.left, relativeRect.right, observeRect.left),
+      top: this._restrictValueInRange(relativeRect.top, relativeRect.bottom, observeRect.top),
+      right: this._restrictValueInRange(relativeRect.left, relativeRect.right, observeRect.right),
+      bottom: this._restrictValueInRange(relativeRect.top, relativeRect.bottom, observeRect.bottom)
+    }
+
+    const targetArea = (observeRect.bottom - observeRect.top) * (observeRect.right - observeRect.left)
+    const visibleArea = (visibleRect.bottom - visibleRect.top) * (visibleRect.right - visibleRect.left)
+    const intersectionRatio = targetArea ? visibleArea / targetArea : 0
+
+    const isInsected = isInit ? intersectionRatio > this.initialRatio : this._isInsectedFn(intersectionRatio, this.previousIntersectionRatio[observeIndex], this.thresholds)
+    this.previousIntersectionRatio[observeIndex] = intersectionRatio
+
+    return {
+      intersectionRatio,
+      intersectionRect: {
+        top: visibleRect.top,
+        bottom: relativeRect.bottom,
+        left: visibleRect.left,
+        right: relativeRect.right
+      },
+      isInsected
+    }
+  }
+
+  getThrottleMeasure (throttleTime) {
+    return throttle(() => {
+      this._measureTarget()
+    }, throttleTime)
+  }
+
+  // 计算节点的rect信息
+  _measureTarget (isInit = false) {
+    Promise.all([
+      this._getReferenceRect(this.observerRefs),
+      this._getReferenceRect(this.relativeRef)
+    ]).then(([observeRects, relativeRect]) => {
+      if (relativeRect === IgnoreTarget) return
+      observeRects.forEach((observeRect, index) => {
+        if (observeRect === IgnoreTarget) return
+        const { intersectionRatio, intersectionRect, isInsected } = this._measureIntersection({
+          observeRect,
+          observeIndex: index,
+          relativeRect,
+          isInit
+        })
+        // 初次调用的
+        if (isInsected) {
+          this.callback({
+            // index: index,
+            id: this.observerRefs[index].getNodeInstance().props?.current?.id,
+            dataset: this.observerRefs[index].getNodeInstance().props?.current?.dataset || {},
+            intersectionRatio: Math.round(intersectionRatio * 100) / 100,
+            intersectionRect,
+            boundingClientRect: observeRect,
+            relativeRect: relativeRect,
+            time: Date.now()
+          })
+        }
+      })
+    }).catch((e) => {
+      console.log('_measureTarget fail', e)
+    })
+  }
+
+  disconnect () {
+    if (this.intersectionCtx) delete this.intersectionCtx[this.id]
+  }
+}
+
+export default RNIntersectionObserver

package/src/platform/api/route/index.web.js

@@ -110,7 +110,8 @@ function reLaunch (options = {}) {
       routeCount: ++routeCount,
       replaced: false
     }
-    const delta = router.stack.length - 1
+    // 宿主环境中没有办法统计到webview中的页面跳转，所有给用户开放个userDelta，由用户根据webview中的页面跳转的个数自行传递控制relaunch跳转正确
+    const delta = router.stack.length - 1 + (options.delta || 0)
     // 在需要操作后退时，先操作后退，在beforeEach中基于当前action通过next()进行replace操作，避免部分浏览器的表现不一致
     if (delta > 0) {
       router.go(-delta)

package/src/platform/api/system/rnSystem.js

@@ -5,10 +5,10 @@ import { successHandle, failHandle, defineUnsupportedProps, getFocusedNavigation
 
 const getWindowInfo = function () {
   const dimensionsScreen = Dimensions.get('screen')
-  const navigation = getFocusedNavigation() || {}
+  const navigation = getFocusedNavigation()
   const insets = {
-    ...(initialWindowMetrics?.insets || {}),
-    ...(navigation.insets || {})
+    ...initialWindowMetrics?.insets,
+    ...navigation?.insets
   }
   let safeArea = {}
   let { top = 0, bottom = 0, left = 0, right = 0 } = insets
@@ -17,7 +17,7 @@ const getWindowInfo = function () {
   }
   const screenHeight = dimensionsScreen.height
   const screenWidth = dimensionsScreen.width
-  const layout = navigation.layout || {}
+  const layout = navigation?.layout || {}
   const layoutHeight = layout.height || 0
   const layoutWidth = layout.width || 0
   const windowHeight = layoutHeight || screenHeight