@mpxjs/webpack-plugin 2.9.55 → 2.9.57

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/template-compiler/compiler.js

@@ -1094,6 +1094,33 @@ function processStyleReact (el) {
   }
 }
 
+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, options, meta) {
   const eventConfigMap = {}
   el.attrsList.forEach(function ({ name, value }) {
@@ -1112,7 +1139,39 @@ 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)
+      // }
+      if (!eventConfigMap[modelEvent]) {
+        eventConfigMap[modelEvent] = {
+          configs: []
+        }
+      }
+      eventConfigMap[modelEvent].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]
@@ -1166,12 +1225,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 +1263,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 {
@@ -2173,7 +2216,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}`
       }
@@ -2492,6 +2535,10 @@ function processElement (el, root, options, meta) {
     return
   }
 
+  if (runtimeCompile && options.dynamicTemplateRuleRunner) {
+    options.dynamicTemplateRuleRunner(el, options, config[mode])
+  }
+
   if (rulesRunner && el._atModeStatus !== 'match') {
     currentEl = el
     rulesRunner(el)

package/lib/template-compiler/index.js

@@ -76,7 +76,8 @@ module.exports = function (raw) {
     checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
     globalComponents: Object.keys(mpx.usingComponents),
     forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules) || runtimeCompile,
-    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
+    dynamicTemplateRuleRunner: mpx.dynamicTemplateRuleRunner
   })
 
   if (meta.wxsContentMap) {

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.55",
+  "version": "2.9.57",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -76,15 +76,18 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "build": "rimraf ./lib/runtime/components/react/dist && tsc"
   },
   "devDependencies": {
     "@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": "8e2e9dace226d48a91ff2a6dc2175c0a3be11d55"
+  "gitHead": "f52627676fd798818980c2d1a6890c5ea99e2862"
 }