@mpxjs/core 2.9.39 → 2.9.41

package/src/platform/builtInMixins/refsMixin.ios.js

@@ -0,0 +1,311 @@
+import { BEFORECREATE } from '../../core/innerLifecycle'
+import { noop, isBoolean, dash2hump, warn, collectDataset, hump2dash } from '@mpxjs/utils'
+import { StyleSheet } from 'react-native'
+
+const _createSelectorQuery = (runCb) => {
+  return {
+    exec: (cb = noop) => {
+      runCb().then(res => {
+        cb(res)
+      })
+    },
+    in: () => {
+      warn('please use wx:ref to get NodesRef')
+    },
+    select: () => {
+      warn('please use wx:ref to get NodesRef')
+    },
+    selectAll: () => {
+      warn('please use wx:ref to get NodesRef')
+    },
+    selectViewport: () => { // 有点难实现，dimension 目前没有暴露相关 api
+      warn('please use wx:ref')
+    }
+  }
+}
+
+const flushRefFns = (nodeInstances, fns) => {
+  const mountedNodeInstance = nodeInstances
+    .map(instance => instance.getNodeInstance())
+    .filter(({ nodeRef }) => nodeRef.current) // 如果有 nodeRef，表明目前组件处于挂载中
+  if (mountedNodeInstance.length) {
+    return Promise.all(mountedNodeInstance.map(instance => flushFns(instance, fns)))
+  } else {
+    return Promise.resolve(null)
+  }
+}
+
+const flushFns = (nodeInstance, fns) => {
+  return Promise.all(fns.map(fn => fn(nodeInstance))).then((res) => {
+    return res.reduce((preVal, curVal) => {
+      return Object.assign(preVal, curVal)
+    }, {})
+  })
+}
+
+const wrapFn = (fn) => {
+  return (nodeRef) => {
+    return new Promise((resolve) => {
+      fn(nodeRef, resolve)
+    })
+  }
+}
+
+const getMeasureProps = (measureProps = []) => {
+  return wrapFn((nodeInstance, resolve) => {
+    const nodeRef = nodeInstance.nodeRef.current
+    setTimeout(() => {
+      nodeRef.measure(function (x, y, width, height, pageX, pageY) {
+        const rectAndSize = {
+          width,
+          height,
+          left: pageX,
+          top: pageY,
+          right: pageX + width,
+          bottom: pageY + height
+        }
+        const result = measureProps.reduce((preVal, key) => {
+          return Object.assign(preVal, { [key]: rectAndSize[key] || 0 })
+        }, {})
+        resolve(result)
+      })
+    }, 30) // 延迟，等待组件在rn视图上真正渲染出来
+  })
+}
+
+const getDataset = (props) => {
+  return wrapFn((nodeRef, resolve) => {
+    props = nodeRef.props.current
+    resolve({
+      dataset: collectDataset(props)
+    })
+  })
+}
+
+const getPlainProps = (config) => {
+  return wrapFn((nodeRef, resolve) => {
+    const res = {}
+    const props = nodeRef.props.current
+    config.forEach((key) => {
+      // props 属性默认不转驼峰，用户写什么格式不会变化，取值做兼容
+      res[key] = props[key] || props[hump2dash(key)] || ''
+    })
+    resolve(res)
+  })
+}
+
+const getComputedStyle = (config = []) => {
+  return wrapFn((nodeRef, resolve) => {
+    config = new Set(config)
+    const res = {}
+    const styles = nodeRef.props.current.style || []
+    const defaultStyle = nodeRef.instance.defaultStyle || {}
+    const computedStyle = StyleSheet.flatten([defaultStyle, ...styles])
+    config.forEach((key) => {
+      const humpKey = dash2hump(key)
+      // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容
+      res[key] = computedStyle[key] || computedStyle[humpKey] || ''
+    })
+
+    resolve(res)
+  })
+}
+
+const getInstanceConfig = (config) => {
+  return wrapFn((nodeRef, resolve) => {
+    const instance = nodeRef.instance
+    resolve({ [config]: instance[config] || {} })
+  })
+}
+
+const defaultScrollOffset = {
+  scrollLeft: 0,
+  scrollTop: 0,
+  scrollHeight: 0,
+  scrollWidth: 0
+}
+
+const getScrollOffset = () => {
+  return wrapFn((nodeRef, resolve) => {
+    const instance = nodeRef.instance
+    resolve((instance.scrollOffset && instance.scrollOffset.current) || defaultScrollOffset)
+  })
+}
+
+// const getScrollOffsetFallback = (cb) => {
+//   const res = {
+//     scrollLeft: 0,
+//     scrollTop: 0,
+//     scrollHeight: 0,
+//     scrollWidth: 0
+//   }
+//   cb(res)
+// }
+
+const RECT = ['left', 'top', 'right', 'bottom']
+const SIZE = ['width', 'height']
+
+function _createNodesRef (nodeRefs = []) {
+  const fields = (config, cb = noop) => {
+    const plainProps = []
+    const measureProps = []
+    const computedStyle = []
+    const fns = []
+
+    for (const key in config) {
+      const value = config[key]
+      if (Array.isArray(value) && value.length) {
+        if (key === 'properties') {
+          // wx 最终输出的 properties 字段都会转化为驼峰，所以在这里提前处理为最终的字段格式
+          plainProps.push(...value.map(v => dash2hump(v)))
+        } else if (key === 'computedStyle') {
+          const _computedStyle = config.computedStyle
+          for (let i = _computedStyle.length - 1; i >= 0; i--) {
+            const style = _computedStyle[i]
+            if (RECT.includes(style) || SIZE.includes(style)) {
+              measureProps.push(style)
+              _computedStyle.splice(i, 1)
+            }
+          }
+          if (_computedStyle.length) {
+            computedStyle.push(..._computedStyle)
+          }
+        }
+      } else if (isBoolean(value) && value) {
+        switch (key) {
+          case 'rect':
+            measureProps.push(...RECT)
+            break
+          case 'size':
+            measureProps.push(...SIZE)
+            break
+          case 'scrollOffset':
+            fns.push(getScrollOffset())
+            break
+          case 'dataset':
+            fns.push(getDataset())
+            break
+          case 'node':
+          case 'context':
+          case 'ref':
+            fns.push(getInstanceConfig(key))
+            break
+          default:
+            plainProps.push(key)
+            break
+        }
+      }
+    }
+
+    if (plainProps.length) {
+      fns.push(getPlainProps(plainProps))
+    }
+    if (measureProps.length) {
+      const nodeInstance = nodeRefs[0] && nodeRefs[0].getNodeInstance()
+      const hasMeasureFn = nodeInstance && nodeInstance.nodeRef.current && nodeInstance.nodeRef.current.measure
+      if (hasMeasureFn) {
+        fns.push(getMeasureProps(measureProps))
+      } else {
+        computedStyle.push(...measureProps)
+      }
+    }
+    if (computedStyle.length) {
+      fns.push(getComputedStyle(computedStyle))
+    }
+
+    const runCb = () => {
+      return flushRefFns(nodeRefs, fns).then((result) => {
+        // wx的数据格式：对于具体方法接受到的回调传参，如果获取的 nodeRef 只有一个，那么只需要返回一条数据而不是数组，但是 exec 里面统一都是数组
+        cb(result && result.length === 1 ? result[0] : result)
+        return result
+      })
+    }
+
+    return _createSelectorQuery(runCb)
+  }
+
+  const boundingClientRect = (cb = noop) => {
+    const config = {
+      id: true,
+      dataset: true,
+      rect: true,
+      size: true
+    }
+    return fields(config, cb)
+  }
+
+  const context = (cb = noop) => {
+    const config = {
+      context: true
+    }
+    return fields(config, cb)
+  }
+
+  const node = (cb = noop) => {
+    const config = {
+      node: true
+    }
+    return fields(config, cb)
+  }
+
+  const ref = (cb = noop) => {
+    const config = {
+      ref: true
+    }
+    return fields(config, cb)
+  }
+
+  const scrollOffset = (cb = noop) => {
+    const config = {
+      id: true,
+      dataset: true,
+      scrollOffset: true
+    }
+    return fields(config, cb)
+  }
+
+  return {
+    fields,
+    boundingClientRect,
+    context,
+    node,
+    ref,
+    scrollOffset
+  }
+}
+
+export default function getRefsMixin () {
+  return {
+    [BEFORECREATE] () {
+      this.__refs = {}
+      this.$refs = {}
+      this.__getRefs()
+    },
+    methods: {
+      __getRefs () {
+        const refs = this.__getRefsData() || []
+        const target = this
+        refs.forEach(({ key, type, all }) => {
+          Object.defineProperty(this.$refs, key, {
+            enumerable: true,
+            configurable: true,
+            get () {
+              const refs = target.__refs[key] || []
+              if (type === 'component') {
+                return all ? refs : refs[0]
+              } else {
+                return _createNodesRef(refs)
+              }
+            }
+          })
+        })
+      },
+      __getRefVal (key) {
+        if (!this.__refs[key]) {
+          this.__refs[key] = []
+        }
+        return (instance) => instance && this.__refs[key].push(instance)
+      }
+    }
+  }
+}

package/src/platform/builtInMixins/styleHelperMixin.android.js

@@ -0,0 +1,2 @@
+import styleHelperMixin from './styleHelperMixin.ios'
+export default styleHelperMixin

package/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -0,0 +1,141 @@
+import { isObject, isArray, dash2hump, isFunction, isEmptyObject } from '@mpxjs/utils'
+import { Dimensions } from 'react-native'
+
+function concat (a, b) {
+  return a ? b ? (a + ' ' + b) : a : (b || '')
+}
+
+function stringifyArray (value) {
+  let res = ''
+  let classString
+  for (let i = 0; i < value.length; i++) {
+    if ((classString = stringifyDynamicClass(value[i]))) {
+      if (res) res += ' '
+      res += classString
+    }
+  }
+  return res
+}
+
+function stringifyObject (value) {
+  let res = ''
+  const keys = Object.keys(value)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    if (value[key]) {
+      if (res) res += ' '
+      res += key
+    }
+  }
+  return res
+}
+
+function stringifyDynamicClass (value) {
+  if (isArray(value)) {
+    value = stringifyArray(value)
+  } else if (isObject(value)) {
+    value = stringifyObject(value)
+  }
+  return value
+}
+
+const listDelimiter = /;(?![^(]*[)])/g
+const propertyDelimiter = /:(.+)/
+const rpxRegExp = /^\s*(\d+(\.\d+)?)rpx\s*$/
+const pxRegExp = /^\s*(\d+(\.\d+)?)(px)?\s*$/
+
+function parseStyleText (cssText) {
+  const res = {}
+  const arr = cssText.split(listDelimiter)
+  for (let i = 0; i < arr.length; i++) {
+    const item = arr[i]
+    if (item) {
+      const tmp = item.split(propertyDelimiter)
+      if (tmp.length > 1) {
+        const k = dash2hump(tmp[0].trim())
+        res[k] = tmp[1].trim()
+      }
+    }
+  }
+  return res
+}
+
+function normalizeDynamicStyle (value) {
+  if (!value) return {}
+  if (isArray(value)) {
+    return mergeObjectArray(value)
+  }
+  if (typeof value === 'string') {
+    return parseStyleText(value)
+  }
+  return value
+}
+
+function mergeObjectArray (arr) {
+  const res = {}
+  for (let i = 0; i < arr.length; i++) {
+    Object.assign(res, arr[i])
+  }
+  return res
+}
+
+function transformStyleObj (context, styleObj) {
+  const keys = Object.keys(styleObj)
+  const transformed = {}
+  keys.forEach((prop) => {
+    // todo 检测不支持的prop
+    let value = styleObj[prop]
+    let matched
+    if ((matched = pxRegExp.exec(value))) {
+      value = +matched[1]
+    } else if ((matched = rpxRegExp.exec(value))) {
+      value = context.__rpx(+matched[1])
+    }
+    // todo 检测不支持的value
+    transformed[prop] = value
+  })
+  return transformed
+}
+
+export default function styleHelperMixin (type) {
+  return {
+    methods: {
+      __rpx (value) {
+        const { width } = Dimensions.get('screen')
+        // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
+        // px = rpx * (750 / 屏幕宽度)
+        return value * width / 750
+      },
+      __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, show) {
+        const result = []
+        const classMap = {}
+        if (type === 'page' && isFunction(global.__getAppClassMap)) {
+          Object.assign(classMap, global.__getAppClassMap.call(this))
+        }
+        if (isFunction(this.__getClassMap)) {
+          Object.assign(classMap, this.__getClassMap())
+        }
+        if ((staticClass || dynamicClass) && !isEmptyObject(classMap)) {
+          const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
+          classString.split(' ').forEach((className) => {
+            if (classMap[className]) {
+              result.push(classMap[className])
+            }
+          })
+        }
+
+        if (staticStyle || dynamicStyle) {
+          const styleObj = Object.assign(parseStyleText(staticStyle), normalizeDynamicStyle(dynamicStyle))
+          result.push(transformStyleObj(this, styleObj))
+        }
+
+        if (show === false) {
+          result.push({
+            display: 'none'
+          })
+        }
+        return result
+      }
+    }
+  }
+}

package/src/platform/builtInMixins/styleHelperMixin.js

@@ -0,0 +1,3 @@
+export default function styleHelperMixin () {
+  return {}
+}

package/src/platform/createApp.android.js

@@ -0,0 +1,2 @@
+import createApp from './createApp.ios'
+export default createApp

package/src/platform/createApp.ios.js

@@ -0,0 +1,104 @@
+import transferOptions from '../core/transferOptions'
+import builtInKeysMap from './patch/builtInKeysMap'
+import { makeMap, spreadProp } from '@mpxjs/utils'
+import { mergeLifecycle } from '../convertor/mergeLifecycle'
+import * as wxLifecycle from '../platform/patch/wx/lifecycle'
+import Mpx from '../index'
+import { createElement, memo, useRef, useEffect } from 'react'
+
+const appHooksMap = makeMap(mergeLifecycle(wxLifecycle.LIFECYCLE).app)
+
+function filterOptions (options, appData) {
+  const newOptions = {}
+  Object.keys(options).forEach(key => {
+    if (builtInKeysMap[key]) {
+      return
+    }
+    if (!appHooksMap[key]) {
+      appData[key] = options[key]
+    } else {
+      newOptions[key] = options[key]
+    }
+  })
+  return newOptions
+}
+
+function createAppInstance (appData) {
+  const instance = {
+    ...Mpx.prototype,
+    ...appData
+  }
+  return instance
+}
+
+export default function createApp (option, config = {}) {
+  const appData = {}
+
+  const { NavigationContainer, createNavigationContainerRef, createNativeStackNavigator } = global.__navigationHelper
+  // app选项目前不需要进行转换
+  const { rawOptions, currentInject } = transferOptions(option, 'app', false)
+  const defaultOptions = filterOptions(spreadProp(rawOptions, 'methods'), appData)
+  defaultOptions.onAppInit && defaultOptions.onAppInit()
+  const pages = currentInject.getPages() || {}
+  const firstPage = currentInject.firstPage
+  const Stack = createNativeStackNavigator()
+  const navigationRef = createNavigationContainerRef()
+  const pageScreens = Object.entries(pages).map(([key, item]) => {
+    return createElement(Stack.Screen, {
+      name: key,
+      component: item
+    })
+  })
+  global.__navigationRef = navigationRef
+  global.__mpxOptionsMap = global.__mpxOptionsMap || {}
+  const onStateChange = () => {
+    if (global.__navigationHelper.lastSuccessCallback) {
+      global.__navigationHelper.lastSuccessCallback()
+      global.__navigationHelper.lastSuccessCallback = null
+    }
+  }
+  const onUnhandledAction = (action) => {
+    const payload = action.payload
+    const message = `The action '${action.type}'${payload ? ` with payload ${JSON.stringify(action.payload)}` : ''} was not handled by any navigator.`
+    if (global.__navigationHelper.lastFailCallback) {
+      global.__navigationHelper.lastFailCallback(message)
+      global.__navigationHelper.lastFailCallback = null
+    }
+  }
+  global.__mpxOptionsMap[currentInject.moduleId] = memo(() => {
+    const instanceRef = useRef(null)
+    if (!instanceRef.current) {
+      instanceRef.current = createAppInstance(appData)
+    }
+    const instance = instanceRef.current
+    useEffect(() => {
+      const current = navigationRef.isReady() ? navigationRef.getCurrentRoute() : {}
+      const options = {
+        path: current.name,
+        query: current.params,
+        scene: 0,
+        shareTicket: '',
+        referrerInfo: {}
+      }
+      global.__mpxEnterOptions = options
+      // todo relaunch时会重复执行，需check
+      defaultOptions.onLaunch && defaultOptions.onLaunch.call(instance, options)
+    }, [])
+    return createElement(NavigationContainer,
+      {
+        ref: navigationRef,
+        onStateChange,
+        onUnhandledAction
+      },
+      createElement(Stack.Navigator,
+        {
+          initialRouteName: firstPage
+        },
+        ...pageScreens
+      )
+    )
+  })
+  global.getApp = function () {
+    return appData
+  }
+}

package/src/platform/createApp.js

@@ -66,9 +66,6 @@ export default function createApp (option, config = {}) {
       }
     })
   } else {
-    if (option.onAppInit) {
-      option.onAppInit()
-    }
     builtInMixins.push({
       onLaunch () {
         Object.assign(this, Mpx.prototype)
@@ -76,13 +73,13 @@ export default function createApp (option, config = {}) {
     })
   }
   // app选项目前不需要进行转换
-  const { rawOptions } = transferOptions(option, 'app', false)
+  const { rawOptions, currentInject } = transferOptions(option, 'app', false)
   rawOptions.mixins = builtInMixins
   const defaultOptions = filterOptions(spreadProp(mergeOptions(rawOptions, 'app', false), 'methods'), appData)
 
   if (__mpx_mode__ === 'web') {
     global.__mpxOptionsMap = global.__mpxOptionsMap || {}
-    global.__mpxOptionsMap[global.currentModuleId] = defaultOptions
+    global.__mpxOptionsMap[currentInject.moduleId] = defaultOptions
     global.getApp = function () {
       if (!isBrowser) {
         console.error('[Mpx runtime error]: Dangerous API! global.getApp method is running in non browser environments')
@@ -90,6 +87,7 @@ export default function createApp (option, config = {}) {
       return appData
     }
   } else {
+    defaultOptions.onAppInit && defaultOptions.onAppInit()
     const ctor = config.customCtor || global.currentCtor || App
     ctor(defaultOptions)
   }

package/src/platform/export/api.web.js

@@ -1,4 +1,4 @@
-import Vue from '../../vue'
+import Vue from 'vue'
 import { injectMixins } from '../../core/injectMixins'
 
 const vm = new Vue()

package/src/platform/patch/ali/getDefaultOptions.js

@@ -122,14 +122,14 @@ function initProxy (context, rawOptions, currentInject) {
   }
 }
 
-export function getDefaultOptions (type, { rawOptions = {}, currentInject }) {
+export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   const hookNames = type === 'component' ? ['onInit', 'didMount', 'didUnmount'] : ['onLoad', 'onReady', 'onUnload']
   const rootMixins = [{
     [hookNames[0]] () {
       if (rawOptions.__nativeRender__ && this.props) {
         const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
         Object.keys(this.props).forEach((key) => {
-          if (hasOwn(validProps, key) && typeof this.props[key] !== 'function') {
+          if (hasOwn(validProps, key) && !isFunction(this.props[key])) {
             this.data[key] = this.props[key]
           }
         })
@@ -143,7 +143,7 @@ export function getDefaultOptions (type, { rawOptions = {}, currentInject }) {
           const newData = {}
           // 微信原生转换支付宝时，每次props更新将其设置进data模拟微信表现
           Object.keys(nextProps).forEach((key) => {
-            if (hasOwn(validProps, key) && typeof nextProps[key] !== 'function') {
+            if (hasOwn(validProps, key) && !isFunction(nextProps[key])) {
               const { diff, clone } = diffAndCloneA(nextProps[key], this.props[key])
               if (diff) newData[key] = clone
             }
@@ -153,7 +153,7 @@ export function getDefaultOptions (type, { rawOptions = {}, currentInject }) {
           // 由于支付宝中props透传父级setData的值，此处发生变化的属性实例一定不同，只需浅比较即可确定发生变化的属性
           // 支付宝appx2.0版本后props传递发生变化，此处获取到的nextProps和this.props以及父组件setData的数据引用都不一致，进行了两次深克隆，此处this.props和nextProps的比对需要用deep diff
           Object.keys(nextProps).forEach(key => {
-            if (hasOwn(validProps, key) && typeof nextProps[key] !== 'function') {
+            if (hasOwn(validProps, key) && !isFunction(nextProps[key])) {
               const { diff, clone } = diffAndCloneA(nextProps[key], this.props[key])
               // 由于支付宝中透传父级setData的值，此处进行深clone后赋值避免父级存储的miniRenderData部分数据在此处被响应化，在子组件对props赋值时触发父组件的render
               if (diff) this[key] = clone

package/src/platform/patch/index.js

@@ -4,14 +4,15 @@ import { getDefaultOptions as getWxDefaultOptions } from './wx/getDefaultOptions
 import { getDefaultOptions as getAliDefaultOptions } from './ali/getDefaultOptions'
 import { getDefaultOptions as getSwanDefaultOptions } from './swan/getDefaultOptions'
 import { getDefaultOptions as getWebDefaultOptions } from './web/getDefaultOptions'
-import { error } from '@mpxjs/utils'
+import { getDefaultOptions as getReactDefaultOptions } from './react/getDefaultOptions'
+import { error, isReact } from '@mpxjs/utils'
 
 export default function createFactory (type) {
   return (options = {}, { isNative, customCtor, customCtorType } = {}) => {
     options.__nativeRender__ = !!isNative
     options.__type__ = type
     let ctor
-    if (__mpx_mode__ !== 'web') {
+    if (__mpx_mode__ !== 'web' && !isReact) {
       if (customCtor) {
         ctor = customCtor
         customCtorType = customCtorType || type
@@ -39,7 +40,9 @@ export default function createFactory (type) {
     }
 
     let getDefaultOptions
-    if (__mpx_mode__ === 'web') {
+    if (isReact) {
+      getDefaultOptions = getReactDefaultOptions
+    } else if (__mpx_mode__ === 'web') {
       getDefaultOptions = getWebDefaultOptions
     } else if (__mpx_mode__ === 'ali') {
       getDefaultOptions = getAliDefaultOptions
@@ -56,10 +59,10 @@ export default function createFactory (type) {
     // 注入内建的mixins, 内建mixin是按原始平台编写的，所以合并规则和rootMixins保持一致
     // 将合并后的用户定义的rawOptions传入获取当前应该注入的内建mixins
     rawOptions.mixins = getBuiltInMixins(rawOptions, type)
-    const defaultOptions = getDefaultOptions(type, { rawOptions, currentInject })
-    if (__mpx_mode__ === 'web') {
+    const defaultOptions = getDefaultOptions({ type, rawOptions, currentInject })
+    if (__mpx_mode__ === 'web' || isReact) {
       global.__mpxOptionsMap = global.__mpxOptionsMap || {}
-      global.__mpxOptionsMap[global.currentModuleId] = defaultOptions
+      global.__mpxOptionsMap[currentInject.moduleId] = defaultOptions
     } else if (ctor) {
       return ctor(defaultOptions)
     }

package/src/platform/patch/react/getDefaultOptions.android.js

@@ -0,0 +1 @@
+export { getDefaultOptions } from './getDefaultOptions.ios'