@mpxjs/core 2.9.39 → 2.9.41-react.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.39",
+  "version": "2.9.41-react.0",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,18 +19,52 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.39",
+    "@mpxjs/utils": "^2.9.41-react.0",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
   "peerDependencies": {
     "@mpxjs/api-proxy": "^2.9.0",
     "@mpxjs/store": "^2.9.0",
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.9.26",
+    "react": "^18.3.1",
+    "react-native": "^0.74.3",
+    "react-native-root-siblings": "^5.0.1",
     "vue": "^2.7.10",
     "vue-demi": "^0.14.6",
     "vue-i18n": "^8.27.2",
     "vue-i18n-bridge": "^9.2.2"
   },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "vue-demi": {
+      "optional": true
+    },
+    "vue-i18n": {
+      "optional": true
+    },
+    "vue-i18n-bridge": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "@react-navigation/native": {
+      "optional": true
+    },
+    "@react-navigation/native-stack": {
+      "optional": true
+    },
+    "react-native-root-siblings": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -47,5 +81,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "87957d360b18806f16d169612d924d383ac043c4"
+  "gitHead": "1c9ae7527a257fad98f5536114e63415cea54271"
 }

package/src/convertor/convertor.js

@@ -11,6 +11,7 @@ import wxToQqRule from './wxToQq'
 import wxToTtRule from './wxToTt'
 import wxToDdRule from './wxToDd'
 import wxToJdRule from './wxToJd'
+import wxToReactRule from './wxToReact'
 
 // 根据当前环境获取的默认生命周期信息
 let lifecycleInfo
@@ -55,7 +56,9 @@ const rulesMap = {
   wxToQq: { ...defaultConvertRule, ...wxToQqRule },
   wxToTt: { ...defaultConvertRule, ...wxToTtRule },
   wxToDd: { ...defaultConvertRule, ...wxToDdRule },
-  wxToJd: { ...defaultConvertRule, ...wxToJdRule }
+  wxToJd: { ...defaultConvertRule, ...wxToJdRule },
+  wxToIos: { ...defaultConvertRule, ...wxToReactRule },
+  wxToAndroid: { ...defaultConvertRule, ...wxToReactRule }
 }
 
 export function getConvertRule (convertMode) {

package/src/convertor/getConvertMode.js

@@ -5,7 +5,9 @@ const convertModes = {
   'wx-qq': 'wxToQq',
   'wx-tt': 'wxToTt',
   'wx-jd': 'wxToJd',
-  'wx-dd': 'wxToDd'
+  'wx-dd': 'wxToDd',
+  'wx-ios': 'wxToIos',
+  'wx-android': 'wxToAndroid'
 }
 
 export function getConvertMode (srcMode) {

package/src/convertor/wxToReact.js

@@ -0,0 +1,31 @@
+import {
+  error,
+  isDev
+} from '@mpxjs/utils'
+import { implemented } from '../core/implement'
+
+// 暂不支持的wx选项，后期需要各种花式支持
+const unsupported = ['relations', 'moved', 'definitionFilter', 'onShareAppMessage', 'options', 'behaviors', 'externalClasses']
+
+function convertErrorDesc (key) {
+  error(`Options.${key} is not supported in runtime conversion from wx to react native.`, global.currentResource)
+}
+
+function notSupportTip (options) {
+  unsupported.forEach(key => {
+    if (options[key]) {
+      if (!implemented[key]) {
+        isDev && convertErrorDesc(key)
+        delete options[key]
+      } else if (implemented[key].remove) {
+        delete options[key]
+      }
+    }
+  })
+}
+
+export default {
+  convert (options) {
+    notSupportTip(options)
+  }
+}

package/src/core/proxy.js

@@ -27,7 +27,8 @@ import {
   callWithErrorHandling,
   warn,
   error,
-  getEnvObj
+  getEnvObj,
+  isReact
 } from '@mpxjs/utils'
 import {
   BEFORECREATE,
@@ -128,6 +129,8 @@ export default class MpxProxy {
       this.forceUpdateAll = false
       this.currentRenderTask = null
       this.propsUpdatedFlag = false
+      // react专用，正确触发updated钩子
+      this.pendingUpdatedFlag = false
     }
     this.initApi()
   }
@@ -150,7 +153,7 @@ export default class MpxProxy {
     this.state = CREATED
     this.callHook(CREATED)
 
-    if (__mpx_mode__ !== 'web') {
+    if (__mpx_mode__ !== 'web' && !isReact) {
       this.initRender()
     }
 
@@ -172,9 +175,9 @@ export default class MpxProxy {
 
   mounted () {
     if (this.state === CREATED) {
-      this.state = MOUNTED
       // 用于处理refs等前置工作
       this.callHook(BEFOREMOUNT)
+      this.state = MOUNTED
       this.callHook(MOUNTED)
       this.currentRenderTask && this.currentRenderTask.resolve()
     }
@@ -199,8 +202,8 @@ export default class MpxProxy {
     this.callHook(BEFOREUNMOUNT)
     this.scope?.stop()
     if (this.update) this.update.active = false
-    this.callHook(UNMOUNTED)
     this.state = UNMOUNTED
+    this.callHook(UNMOUNTED)
   }
 
   isUnmounted () {
@@ -236,7 +239,12 @@ export default class MpxProxy {
   }
 
   initProps () {
-    this.props = diffAndCloneA(this.target.__getProps(this.options)).clone
+    if (isReact) {
+      // react模式下props内部对象透传无需深clone，依赖对象深层的数据响应触发子组件更新
+      this.props = this.target.__getProps()
+    } else {
+      this.props = diffAndCloneA(this.target.__getProps(this.options)).clone
+    }
     reactive(this.props)
     proxy(this.target, this.props, undefined, false, this.createProxyConflictHandler('props'))
   }
@@ -642,6 +650,20 @@ export default class MpxProxy {
       this.forceUpdateAll = true
     }
 
+    if (isReact) {
+      // rn中不需要setdata
+      this.forceUpdateData = {}
+      this.forceUpdateAll = false
+      if (this.update) {
+        options.sync ? this.update() : queueJob(this.update)
+      }
+      if (callback) {
+        callback = callback.bind(this.target)
+        options.sync ? callback() : nextTick(callback)
+      }
+      return
+    }
+
     if (this.effect) {
       options.sync ? this.effect.run() : this.effect.update()
     } else {

package/src/core/transferOptions.js

@@ -7,6 +7,10 @@ export default function transferOptions (options, type, needConvert = true) {
   let currentInject
   if (global.currentInject && global.currentInject.moduleId === global.currentModuleId) {
     currentInject = global.currentInject
+  } else {
+    currentInject = {
+      moduleId: global.currentModuleId
+    }
   }
   // 文件编译路径
   options.mpxFileResource = global.currentResource
@@ -18,8 +22,12 @@ export default function transferOptions (options, type, needConvert = true) {
     // 编译计算属性注入
     options.computed = Object.assign({}, currentInject.injectComputed, options.computed)
   }
+  if (currentInject && currentInject.injectMethods) {
+    // 编译methods注入
+    options.methods = Object.assign({}, currentInject.injectMethods, options.methods)
+  }
   if (currentInject && currentInject.injectOptions) {
-    // 编译option注入,优先微信中的单独配置
+    // 编译options注入,优先微信中的单独配置
     options.options = Object.assign({}, currentInject.injectOptions, options.options)
   }
   if (currentInject && currentInject.pageEvents) {

package/src/{vuePlugin.js → external/vuePlugin.js}

@@ -1,7 +1,7 @@
 import { walkChildren, parseSelector, error, hasOwn, collectDataset } from '@mpxjs/utils'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
 import { EffectScope } from 'vue'
-import { PausedState } from './helper/const'
+import { PausedState } from '../helper/const'
 
 const hackEffectScope = () => {
   EffectScope.prototype.pause = function () {

package/src/index.js

@@ -1,4 +1,4 @@
-import Vue from './vue'
+import Vue from './external/vue'
 import { error, diffAndCloneA, hasOwn, makeMap } from '@mpxjs/utils'
 import { APIs, InstanceAPIs } from './platform/export/api'
 
@@ -145,7 +145,11 @@ Mpx.config = {
     hostWhitelists Array 类型 支持h5域名白名单安全校验
     apiImplementations webview JSSDK接口 例如getlocation
    */
-  webviewConfig: {}
+  webviewConfig: {},
+   /**
+   * react-native 相关配置，用于挂载事件等，如 onShareAppMessage
+   */
+  rnConfig: {}
 }
 
 global.__mpx = Mpx

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

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

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

@@ -0,0 +1,15 @@
+import { warn, type } from '@mpxjs/utils'
+export default function directiveHelperMixin () {
+  return {
+    methods: {
+      __getWxKey (item, key) {
+        const value = key === '*this' ? item : item[key]
+        if (typeof value === 'string' || typeof value === 'number') {
+          return value
+        } else {
+          warn(`wx:key's value should return a string or a number, received: ${type(value)}`, this.__mpxProxy.options.mpxFileResource)
+        }
+      }
+    }
+  }
+}

package/src/platform/builtInMixins/directiveHelperMixin.js

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

package/src/platform/builtInMixins/index.js

@@ -11,10 +11,20 @@ import componentGenericsMixin from './componentGenericsMixin'
 import getTabBarMixin from './getTabBarMixin'
 import pageRouteMixin from './pageRouteMixin'
 import { dynamicRefsMixin, dynamicRenderHelperMixin, dynamicSlotMixin } from '../../dynamic/dynamicRenderMixin'
+import styleHelperMixin from './styleHelperMixin'
+import directiveHelperMixin from './directiveHelperMixin'
+import { isReact } from '@mpxjs/utils'
 
 export default function getBuiltInMixins (options, type) {
-  let bulitInMixins = []
-  if (__mpx_mode__ === 'web') {
+  let bulitInMixins
+  if (isReact) {
+    bulitInMixins = [
+      proxyEventMixin(),
+      directiveHelperMixin(),
+      styleHelperMixin(type),
+      refsMixin()
+    ]
+  } else if (__mpx_mode__ === 'web') {
     bulitInMixins = [
       proxyEventMixin(),
       refsMixin(),

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

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

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

@@ -0,0 +1,49 @@
+import { error } from '@mpxjs/utils'
+import Mpx from '../../index'
+
+export default function proxyEventMixin () {
+  const methods = {
+    __invoke (rawEvent, eventConfig = []) {
+      if (typeof Mpx.config.proxyEventHandler === 'function') {
+        try {
+          Mpx.config.proxyEventHandler(rawEvent)
+        } catch (e) {
+        }
+      }
+      const location = this.__mpxProxy.options.mpxFileResource
+
+      let returnedValue
+      eventConfig.forEach((item) => {
+        const callbackName = item[0]
+        if (callbackName) {
+          const params = item.length > 1
+            ? item.slice(1).map(item => {
+              if (item === '__mpx_event__') {
+                return rawEvent
+              } else {
+                return item
+              }
+            })
+            : [rawEvent]
+          if (typeof this[callbackName] === 'function') {
+            returnedValue = this[callbackName].apply(this, params)
+          } else {
+            error(`Instance property [${callbackName}] is not function, please check.`, location)
+          }
+        }
+      })
+      return returnedValue
+    }
+    // __model (expr, $event, valuePath = ['value'], filterMethod) {
+    //   const innerFilter = {
+    //     trim: val => typeof val === 'string' && val.trim()
+    //   }
+    //   const originValue = valuePath.reduce((acc, cur) => acc[cur], $event.detail)
+    //   const value = filterMethod ? (innerFilter[filterMethod] ? innerFilter[filterMethod](originValue) : typeof this[filterMethod] === 'function' ? this[filterMethod](originValue) : originValue) : originValue
+    //   setByPath(this, expr, value)
+    // }
+  }
+  return {
+    methods
+  }
+}

package/src/platform/builtInMixins/proxyEventMixin.js

@@ -18,7 +18,6 @@ export default function proxyEventMixin () {
       }
       const location = this.__mpxProxy.options.mpxFileResource
       const type = $event.type
-      const emitMode = $event.detail && $event.detail.mpxEmit
       if (!type) {
         error('Event object must have [type] property!', location)
         return
@@ -45,19 +44,9 @@ export default function proxyEventMixin () {
       let returnedValue
       curEventConfig.forEach((item) => {
         const callbackName = item[0]
-        if (emitMode) {
-          $event = $event.detail.data
-        }
         if (callbackName) {
           const params = item.length > 1
             ? item.slice(1).map(item => {
-              // 暂不支持$event.xxx的写法
-              // if (/^\$event/.test(item)) {
-              //   this.__mpxTempEvent = $event
-              //   const value = getByPath(this, item.replace('$event', '__mpxTempEvent'))
-              //   // 删除临时变量
-              //   delete this.__mpxTempEvent
-              //   return value
               if (item === '__mpx_event__') {
                 return $event
               } else {

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

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