@mpxjs/webpack-plugin 2.9.56 → 2.9.58

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -0,0 +1,171 @@
+import { forwardRef, JSX, useRef, useEffect } from 'react'
+// @ts-ignore
+import { noop } from '@mpxjs/utils'
+import { Portal } from '@ant-design/react-native'
+import { getCustomEvent } from './getInnerListeners'
+import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
+// @ts-ignore
+import { WebView } from 'react-native-webview'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { StyleSheet } from 'react-native'
+
+type OnMessageCallbackEvent = {
+  detail: {
+    data: any[]
+  }
+}
+
+type CommonCallbackEvent = {
+  detail: {
+    src?: string
+  }
+}
+
+interface WebViewProps {
+  src: string
+  bindmessage?: (event: OnMessageCallbackEvent) => void
+  bindload?: (event: CommonCallbackEvent) => void
+  binderror?: (event: CommonCallbackEvent) => void
+}
+
+interface PayloadData {
+  data?: Record<string, any>
+}
+
+type MessageData = {
+  payload?: PayloadData,
+  type?: string,
+  callbackId?: number
+}
+
+interface NativeEvent {
+  url: string,
+  data: string
+}
+
+interface LoadRes {
+  timeStamp: string,
+  nativeEvent: NativeEvent
+}
+
+interface FormRef {
+  postMessage: (value: any) => void;
+}
+
+const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element => {
+  const { src, bindmessage = noop, bindload = noop, binderror = noop } = props
+
+  const defaultWebViewStyle = [
+    {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    }
+  ]
+  const { nodeRef: webViewRef } = useNodesRef<WebView, WebViewProps>(props, ref, {
+    defaultStyle: StyleSheet.flatten([
+      ...defaultWebViewStyle
+    ])
+  })
+  const _messageList:any[] = []
+  const handleUnload = () => {
+    // 这里是 WebView 销毁前执行的逻辑
+    bindmessage(getCustomEvent('messsage', {}, {
+      detail: {
+        data: _messageList
+      },
+      layoutRef: webViewRef
+    }))
+  }
+
+  useEffect(() => {
+    // 组件卸载时执行
+    return () => {
+      handleUnload()
+    }
+  }, [])
+  const _load = function(res:LoadRes) {
+    const result = {
+      type: 'load',
+      timeStamp: res.timeStamp,
+      detail: {
+        src: res.nativeEvent?.url
+      }
+    }
+    bindload(result)
+  }
+  const _error = function(res:LoadRes) {
+    const result = {
+      type: 'error',
+      timeStamp: res.timeStamp,
+      detail: {
+        src: ''
+      }
+    }
+    binderror(result)
+  }
+  const _message = function(res:LoadRes) {
+    let data: MessageData
+    let asyncCallback
+    const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
+    try {
+      const nativeEventData = res.nativeEvent?.data
+      data = JSON.parse(nativeEventData)
+    } catch (e) {
+      data = {}
+    }
+    const postData:PayloadData = data.payload || {}
+    switch (data.type) {
+      case 'postMessage':
+        _messageList.push(postData.data)
+        asyncCallback = Promise.resolve({
+          errMsg: 'invokeWebappApi:ok'
+        })
+        break
+      case 'navigateTo':
+        asyncCallback = navObj.navigateTo(postData)
+        break
+      case 'navigateBack':
+        asyncCallback = navObj.navigateBack(postData)
+        break
+      case 'redirectTo':
+        asyncCallback = navObj.redirectTo(postData)
+        break
+      case 'switchTab':
+        asyncCallback = navObj.switchTab(postData)
+        break
+      case 'reLaunch':
+        asyncCallback = navObj.reLaunch(postData)
+        break
+    }
+
+    asyncCallback && asyncCallback.then((res: any) => {
+      if (webViewRef.current?.postMessage) {
+        const test = JSON.stringify({
+          type: data.type,
+          callbackId: data.callbackId,
+          result: res
+        })
+        webViewRef.current.postMessage(test)
+      }
+    })
+  }
+  // @ts-ignore
+  return(<Portal>
+    <WebView
+        style={[ ...defaultWebViewStyle ]}
+        source={{ uri: src }}
+        ref={webViewRef}
+        onLoad={_load}
+        onError={_error}
+        onMessage={_message}
+        javaScriptEnabled={true}
+    ></WebView>
+  </Portal>)
+})
+
+_WebView.displayName = 'mpx-web-view'
+
+export default _WebView

package/lib/runtime/components/react/{getInnerListeners.type.ts → types/getInnerListeners.ts}

@@ -1,7 +1,7 @@
-import React from 'react'
+import { MutableRefObject } from 'react'
 import { NativeSyntheticEvent } from 'react-native'
 
-type LayoutRef = React.MutableRefObject<any>
+type LayoutRef = MutableRefObject<any>
 
 type SetTimeoutReturnType = ReturnType<typeof setTimeout>
 

package/lib/runtime/components/react/types/global.d.ts

@@ -0,0 +1,15 @@
+declare module 'react-native-svg/css' {
+  import type { ImageSourcePropType, StyleProp, ImageStyle } from 'react-native'
+  import type { SvgProps as SvgCssUriProps } from 'react-native-svg'
+
+  export const SvgCssUri: React.ComponentType<SvgCssUriProps & { uri?: string }>
+
+  export interface WithLocalSvgProps {
+    asset: ImageSourcePropType
+    style?: StyleProp<ImageStyle>
+    width?: string | number
+    height?: string | number
+  }
+
+  export const WithLocalSvg: React.ComponentType<WithLocalSvgProps>
+}

package/lib/runtime/components/react/utils.ts

@@ -3,7 +3,7 @@ import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 
-export const PERCENT_REGX = /\d+(\.\d+)?%$/
+export const PERCENT_REGX = /^\s*-?\d+(\.\d+)?%\s*$/
 
 const URL_REGEX = /url\(["']?(.*?)["']?\)/
 

package/lib/runtime/optionProcessor.js

@@ -75,7 +75,32 @@ registered in parent context!`)
   if (outputPath) {
     option.componentPath = '/' + outputPath
   }
+  if (ctorType === 'app') {
+    option.data = function () {
+      return {
+        transitionName: ''
+      }
+    }
+    option.watch = {
+      $route: {
+        handler () {
+          const actionType = global.__mpxRouter.currentActionType
 
+          switch (actionType) {
+            case 'to':
+              this.transitionName = 'mpx-slide-left'
+              break
+            case 'back':
+              this.transitionName = 'mpx-slide-right'
+              break
+            default:
+              this.transitionName = ''
+          }
+        },
+        immediate: true
+      }
+    }
+  }
   return option
 }
 
@@ -160,6 +185,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     global.__mpxRouter.needCache = null
     global.__mpxRouter.needRemove = []
     global.__mpxRouter.eventChannelMap = {}
+    global.__mpxRouter.currentActionType = null
     // 处理reLaunch中传递的url并非首页时的replace逻辑
     global.__mpxRouter.beforeEach(function (to, from, next) {
       let action = global.__mpxRouter.__mpxAction
@@ -178,7 +204,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
           }
         }
       }
-
+      global.__mpxRouter.currentActionType = action.type
       const pageInRoutes = routes.some(item => item.path === to.path)
       if (!pageInRoutes) {
         if (stack.length < 1) {

package/lib/runtime/transRpxStyle.js

@@ -5,7 +5,7 @@ module.exports = function (style) {
   }
   const transRpxFn = global.__mpxTransRpxFn || defaultTransRpxFn
   const parsedStyleObj = {}
-  const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
+  const rpxRegExpG = /\b(-?\d+(\.\d+)?)rpx\b/g
   const parseStyleText = (cssText) => {
     const listDelimiter = /;(?![^(]*\))/g
     const propertyDelimiter = /:(.+)/

package/lib/style-compiler/plugins/rpx.js

@@ -1,5 +1,5 @@
-const pxRegExp = /\b(\d+(\.\d+)?)px\b/
-const pxRegExpG = /\b(\d+(\.\d+)?)px\b/g
+const pxRegExp = /\b(-?\d+(\.\d+)?)px\b/
+const pxRegExpG = /\b(-?\d+(\.\d+)?)px\b/g
 // rpx
 module.exports = (options = {}) => {
   return {

package/lib/style-compiler/plugins/vw.js

@@ -1,5 +1,5 @@
-const rpxRegExp = /\b(\d+(\.\d+)?)rpx\b/
-const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
+const rpxRegExp = /\b(-?\d+(\.\d+)?)rpx\b/
+const rpxRegExpG = /\b(-?\d+(\.\d+)?)rpx\b/g
 
 module.exports = (options = {}) => {
   return {

package/lib/template-compiler/compiler.js

@@ -1094,12 +1094,39 @@ function processStyleReact (el) {
   }
 }
 
-function processEventReact (el, options, meta) {
+function getModelConfig (el, match) {
+  const modelProp = getAndRemoveAttr(el, config[mode].directive.modelProp).val || config[mode].event.defaultModelProp
+  const modelEvent = getAndRemoveAttr(el, config[mode].directive.modelEvent).val || config[mode].event.defaultModelEvent
+  const modelValuePathRaw = getAndRemoveAttr(el, config[mode].directive.modelValuePath).val
+  const modelValuePath = modelValuePathRaw === undefined ? config[mode].event.defaultModelValuePath : modelValuePathRaw
+  const modelFilter = getAndRemoveAttr(el, config[mode].directive.modelFilter).val
+  let modelValuePathArr
+  try {
+    modelValuePathArr = JSON5.parse(modelValuePath)
+  } catch (e) {
+    if (modelValuePath === '') {
+      modelValuePathArr = []
+    } else {
+      modelValuePathArr = modelValuePath.split('.')
+    }
+  }
+  const modelValue = match[1].trim()
+  const stringifiedModelValue = stringifyWithResolveComputed(modelValue)
+  return {
+    modelProp,
+    modelEvent,
+    modelFilter,
+    modelValuePathArr,
+    stringifiedModelValue
+  }
+}
+
+function processEventReact (el) {
   const eventConfigMap = {}
   el.attrsList.forEach(function ({ name, value }) {
     const parsedEvent = config[mode].event.parseEvent(name)
     if (parsedEvent) {
-      const type = parsedEvent.eventName
+      const type = config[mode].event.getEvent(parsedEvent.eventName, parsedEvent.prefix)
       const parsedFunc = parseFuncStr(value)
       if (parsedFunc) {
         if (!eventConfigMap[type]) {
@@ -1112,12 +1139,43 @@ function processEventReact (el, options, meta) {
     }
   })
 
-  let wrapper
+  const modelExp = getAndRemoveAttr(el, config[mode].directive.model).val
+  if (modelExp) {
+    const match = tagRE.exec(modelExp)
+    if (match) {
+      const { modelProp, modelEvent, modelFilter, modelValuePathArr, stringifiedModelValue } = getModelConfig(el, match)
+      if (!isValidIdentifierStr(modelEvent)) {
+        warn$1(`EventName ${modelEvent} which is used in ${config[mode].directive.model} must be a valid identifier!`)
+        return
+      }
+      // if (forScopes.length) {
+      //   stringifiedModelValue = stringifyWithResolveComputed(modelValue)
+      // } else {
+      //   stringifiedModelValue = stringify(modelValue)
+      // }
+      // todo 未来可能需要支持类似modelEventPrefix这样的配置来声明model事件的绑定方式
+      const modelEventType = config[mode].event.getEvent(modelEvent)
+      if (!eventConfigMap[modelEventType]) {
+        eventConfigMap[modelEventType] = {
+          configs: []
+        }
+      }
+      eventConfigMap[modelEventType].configs.unshift({
+        hasArgs: true,
+        expStr: `[${stringify('__model')},${stringifiedModelValue},${stringify(eventIdentifier)},${stringify(modelValuePathArr)}${modelFilter ? `,${stringify(modelFilter)}` : ''}]`
+      })
+      addAttrs(el, [
+        {
+          name: modelProp,
+          value: modelExp
+        }
+      ])
+    }
+  }
 
+  // let wrapper
   for (const type in eventConfigMap) {
     let { configs } = eventConfigMap[type]
-
-    let resultName
     configs.forEach(({ name }) => {
       if (name) {
         // 清空原始事件绑定
@@ -1125,21 +1183,15 @@ function processEventReact (el, options, meta) {
         do {
           has = getAndRemoveAttr(el, name).has
         } while (has)
-
-        if (!resultName) {
-          // 清除修饰符
-          resultName = name.replace(/\..*/, '')
-        }
       }
     })
     configs = configs.map((item) => {
       return item.expStr
     })
-    const name = resultName || config[mode].event.getEvent(type)
     const value = `{{(e)=>this.__invoke(e, [${configs}])}}`
     addAttrs(el, [
       {
-        name,
+        name: type,
         value
       }
     ])
@@ -1166,12 +1218,12 @@ function processEventReact (el, options, meta) {
     // }
   }
 
-  if (wrapper) {
-    replaceNode(el, wrapper, true)
-    addChild(wrapper, el)
-    processAttrs(wrapper, options)
-    postMoveBaseDirective(wrapper, el)
-  }
+  // if (wrapper) {
+  //   replaceNode(el, wrapper, true)
+  //   addChild(wrapper, el)
+  //   processAttrs(wrapper, options)
+  //   postMoveBaseDirective(wrapper, el)
+  // }
 }
 
 function processEvent (el, options) {
@@ -1204,27 +1256,11 @@ function processEvent (el, options) {
   if (modelExp) {
     const match = tagRE.exec(modelExp)
     if (match) {
-      const modelProp = getAndRemoveAttr(el, config[mode].directive.modelProp).val || config[mode].event.defaultModelProp
-      const modelEvent = getAndRemoveAttr(el, config[mode].directive.modelEvent).val || config[mode].event.defaultModelEvent
-      const modelValuePathRaw = getAndRemoveAttr(el, config[mode].directive.modelValuePath).val
-      const modelValuePath = modelValuePathRaw === undefined ? config[mode].event.defaultModelValuePath : modelValuePathRaw
-      const modelFilter = getAndRemoveAttr(el, config[mode].directive.modelFilter).val
-      let modelValuePathArr
-      try {
-        modelValuePathArr = JSON5.parse(modelValuePath)
-      } catch (e) {
-        if (modelValuePath === '') {
-          modelValuePathArr = []
-        } else {
-          modelValuePathArr = modelValuePath.split('.')
-        }
-      }
+      const { modelProp, modelEvent, modelFilter, modelValuePathArr, stringifiedModelValue } = getModelConfig(el, match)
       if (!isValidIdentifierStr(modelEvent)) {
         warn$1(`EventName ${modelEvent} which is used in ${config[mode].directive.model} must be a valid identifier!`)
         return
       }
-      const modelValue = match[1].trim()
-      const stringifiedModelValue = stringifyWithResolveComputed(modelValue)
       // if (forScopes.length) {
       //   stringifiedModelValue = stringifyWithResolveComputed(modelValue)
       // } else {
@@ -1655,23 +1691,49 @@ function processFor (el) {
 }
 
 function processRefReact (el, meta) {
-  const val = getAndRemoveAttr(el, config[mode].directive.ref).val
+  const { val, has } = getAndRemoveAttr(el, config[mode].directive.ref)
+
   // rn中只有内建组件能被作为node ref处理
   const type = el.isBuiltIn ? 'node' : 'component'
-  if (val) {
+  if (has) {
     if (!meta.refs) {
       meta.refs = []
     }
     const all = !!forScopes.length
-    meta.refs.push({
+    const refConf = {
       key: val,
       all,
       type
-    })
+    }
+
+    if (!val) {
+      refConf.key = `ref_rn_${++refId}`
+      refConf.sKeys = []
+      const rawId = el.attrsMap.id
+      const rawClass = el.attrsMap.class
+      const rawDynamicClass = el.attrsMap[config[mode].directive.dynamicClass]
+
+      meta.computed = meta.computed || []
+      if (rawId) {
+        const staticId = parseMustacheWithContext(rawId).result
+        const computedIdKey = `_ri${refId}`
+        refConf.sKeys.push({ key: computedIdKey, prefix: '#' })
+        meta.computed.push(`${computedIdKey}() {\n return ${staticId}}`)
+      }
+      if (rawClass || rawDynamicClass) {
+        const staticClass = parseMustacheWithContext(rawClass).result
+        const dynamicClass = parseMustacheWithContext(rawDynamicClass).result
+        const computedClassKey = `_rc${refId}`
+        refConf.sKeys.push({ key: computedClassKey, prefix: '.' })
+        meta.computed.push(`${computedClassKey}() {\n return this.__getClass(${staticClass}, ${dynamicClass})}`)
+      }
+    }
+
+    meta.refs.push(refConf)
 
     addAttrs(el, [{
       name: 'ref',
-      value: `{{ this.__getRefVal('${val}') }}`
+      value: `{{ this.__getRefVal('${refConf.key}') }}`
     }])
   }
 }
@@ -2173,7 +2235,7 @@ function processBuiltInComponents (el, meta) {
     const tag = el.tag
     if (!meta.builtInComponentsMap[tag]) {
       if (isReact(mode)) {
-        meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/react/${tag}`
+        meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/react/dist/${tag}`
       } else {
         meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/${mode}/${tag}`
       }
@@ -2529,7 +2591,7 @@ function processElement (el, root, options, meta) {
     processFor(el)
     processRefReact(el, meta)
     processStyleReact(el)
-    processEventReact(el, options, meta)
+    processEventReact(el)
     processComponentIs(el, options)
     processSlotReact(el)
     processAttrs(el, options)

package/lib/web/processTemplate.js

@@ -38,7 +38,7 @@ module.exports = function (template, {
     const idName = (el && el.match(/#(.*)/) && el.match(/#(.*)/)[1]) || 'app'
     template = {
       tag: 'template',
-      content: `<div id="${idName}"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></div>`
+      content: `<div id="${idName}"><transition :name="transitionName"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></transition></div>`
     }
     builtInComponentsMap['mpx-keep-alive'] = {
       resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { isComponent: true })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.56",
+  "version": "2.9.58",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -76,15 +76,19 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "build": "rimraf ./lib/runtime/components/react/dist && tsc"
   },
   "devDependencies": {
+    "@ant-design/react-native": "^5.2.2",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
-    "@types/react": "^18.2.79"
+    "@types/react": "^18.2.79",
+    "react-native": "^0.74.5",
+    "rimraf": "^6.0.1"
   },
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "4175767d6ccf695ced81c9c7ced5eccd80445929"
+  "gitHead": "49fe4c4bc46ff4bf87cd8adde37981d4b4134aa7"
 }