@mpxjs/webpack-plugin 2.9.67 → 2.9.70-alpha.0

package/lib/platform/template/wx/index.js

@@ -9,7 +9,7 @@ const { dash2hump } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'ios', 'android'],
+    supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'ios', 'android', 'tenon'],
     // props预处理
     preProps: [],
     // props后处理
@@ -28,6 +28,15 @@ module.exports = function getSpec ({ warn, error }) {
               value: parsed.result
             }
           }
+        },
+        tenon ({ name, value }) {
+          const parsed = parseMustacheWithContext(value)
+          if (parsed.hasBinding) {
+            return {
+              name: name === 'animation' ? 'v-' + name : ':' + name,
+              value: parsed.result
+            }
+          }
         }
       }
     ],
@@ -90,6 +99,16 @@ module.exports = function getSpec ({ warn, error }) {
             name: 'v-for',
             value: `(${itemName}, ${indexName}) in ${parsed.result}`
           }
+        },
+        tenon ({ value }, { el }) {
+          const parsed = parseMustacheWithContext(value)
+          const attrsMap = el.attrsMap
+          const itemName = attrsMap['wx:for-item'] || 'item'
+          const indexName = attrsMap['wx:for-index'] || 'index'
+          return {
+            name: 'v-for',
+            value: `(${itemName}, ${indexName}) in ${parsed.result}`
+          }
         }
       },
       {
@@ -115,6 +134,25 @@ module.exports = function getSpec ({ warn, error }) {
             name: ':key',
             value
           }
+        },
+        tenon ({ value }, { el }) {
+          // vue的template中不能包含key，对应于小程序中的block
+          if (el.tag === 'block') return false
+          const itemName = el.attrsMap['wx:for-item'] || 'item'
+          const keyName = value
+          if (value === '*this') {
+            value = itemName
+          } else {
+            if (isValidIdentifierStr(keyName)) {
+              value = `${itemName}.${keyName}`
+            } else {
+              value = `${itemName}['${keyName}']`
+            }
+          }
+          return {
+            name: ':key',
+            value
+          }
         }
       },
       {
@@ -125,6 +163,9 @@ module.exports = function getSpec ({ warn, error }) {
         },
         web () {
           return false
+        },
+        tenon () {
+          return false
         }
       },
       {
@@ -167,6 +208,49 @@ module.exports = function getSpec ({ warn, error }) {
               }
             ]
           }
+        },
+        tenon ({ value }, { el }) {
+          el.hasEvent = true
+          const attrsMap = el.attrsMap
+          const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
+          const stringify = JSON.stringify
+          const match = tagRE.exec(value)
+          if (match) {
+            const modelProp = attrsMap['wx:model-prop'] || 'value'
+            const modelEvent = attrsMap['wx:model-event'] || 'input'
+            const modelValuePathRaw = attrsMap['wx:model-value-path']
+            const modelValuePath = modelValuePathRaw === undefined ? 'value' : modelValuePathRaw
+            const modelFilter = attrsMap['wx:model-filter']
+            let modelValuePathArr
+            try {
+              modelValuePathArr = JSON5.parse(modelValuePath)
+            } catch (e) {
+              if (modelValuePath === '') {
+                modelValuePathArr = []
+              } else {
+                modelValuePathArr = modelValuePath.split('.')
+              }
+            }
+            const modelValue = match[1].trim()
+            return [
+              {
+                name: ':' + modelProp,
+                value: modelValue
+              },
+              {
+                name: 'mpxModelEvent',
+                value: modelEvent
+              },
+              {
+                name: 'mpxModelEventId',
+                value: Math.random().toString(36).slice(3, 11)
+              },
+              {
+                name: '@mpxModel',
+                value: `__model(${stringifyWithResolveComputed(modelValue)}, $event, ${stringify(modelValuePathArr)}, ${stringify(modelFilter)})`
+              }
+            ]
+          }
         }
       },
       {
@@ -183,6 +267,12 @@ module.exports = function getSpec ({ warn, error }) {
             name: 'ref',
             value: `__mpx_ref_${value}__`
           }
+        },
+        tenon ({ value }) {
+          return {
+            name: 'ref',
+            value: `${value}`
+          }
         }
       },
       {
@@ -232,6 +322,14 @@ module.exports = function getSpec ({ warn, error }) {
               value: classBinding[0]
             }
           }
+        },
+        tenon ({ name, value }) {
+          const dir = this.test.exec(name)[1]
+          const parsed = parseMustacheWithContext(value)
+          return {
+            name: ':' + dir,
+            value: parsed.result
+          }
         }
       },
       // 通用指令
@@ -289,6 +387,17 @@ module.exports = function getSpec ({ warn, error }) {
             name: 'v-' + dir,
             value: parsed.result
           }
+        },
+        tenon ({ name, value }) {
+          let dir = this.test.exec(name)[1]
+          const parsed = parseMustacheWithContext(value)
+          if (dir === 'elif') {
+            dir = 'else-if'
+          }
+          return {
+            name: 'v-' + dir,
+            value: parsed.result
+          }
         }
       },
       // 事件
@@ -432,6 +541,23 @@ module.exports = function getSpec ({ warn, error }) {
             name: rPrefix + rEventName + meta.modifierStr,
             value
           }
+        },
+        tenon ({ name, value }, { eventRules, el }) {
+          const match = this.test.exec(name)
+          const prefix = match[1]
+          const eventName = match[2]
+          const modifierStr = match[3] || ''
+          const meta = {
+            modifierStr
+          }
+          // 记录event监听信息用于后续判断是否需要使用内置基础组件
+          el.hasEvent = true
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', meta })
+          const rEventName = runRules(eventRules, eventName, { mode: 'web' })
+          return {
+            name: rPrefix + rEventName + meta.modifierStr,
+            value
+          }
         }
       },
       // 无障碍

package/lib/react/processStyles.js

@@ -56,13 +56,23 @@ module.exports = function (styles, {
           error
         })
         if (ctorType === 'app') {
-          output += `global.__getAppClassMap = function() {
-            return ${shallowStringify(classMap)};
+          output += `
+          let __appClassMap
+          global.__getAppClassMap = function() {
+            if(!__appClassMap) {
+              __appClassMap = ${shallowStringify(classMap)};
+            }
+            return __appClassMap;
           };\n`
         } else {
-          output += `global.currentInject.injectMethods = {
+          output += `
+          let __classMap
+          global.currentInject.injectMethods = {
             __getClassMap: function() {
-              return ${shallowStringify(classMap)};
+              if(!__classMap) {
+                __classMap = ${shallowStringify(classMap)};
+              }
+              return __classMap;
             }
           };\n`
         }

package/lib/react/processTemplate.js

@@ -119,6 +119,9 @@ module.exports = function (template, {
           }, meta.wxsModuleMap)
           const bindResult = bindThis.transform(rawCode, {
             ignoreMap
+            // customBindThis (path, t) {
+            //   path.replaceWith(t.callExpression(t.identifier('getValue'), [t.stringLiteral(path.node.name)]))
+            // }
           })
           output += `global.currentInject.render = function (createElement, getComponent) {
   return ${bindResult.code}

package/lib/resolve-loader.js

@@ -1,3 +1,6 @@
 module.exports = function () {
-  return `module.exports = __mpx_resolve_path__(${JSON.stringify(this.resource)})`
+  return `
+  var currentURL = global.currentPagePath
+  var getRelativePath = require('@mpxjs/webpack-plugin/lib/utils/get-relative-path').getRelativePath
+  module.exports = __mpx_resolve_path__(${JSON.stringify(this.resource)})`
 }

package/lib/resolver/AddModePlugin.js

@@ -6,17 +6,17 @@ const addInfix = require('../utils/add-infix')
 const { JSON_JS_EXT } = require('../utils/const')
 
 module.exports = class AddModePlugin {
-  constructor (source, mode, fileConditionRules, target, defaultMode) {
+  constructor (source, mode, options, target) {
     this.source = source
     this.target = target
     this.mode = mode
-    this.fileConditionRules = fileConditionRules
-    this.defaultMode = defaultMode
+    this.options = options
   }
 
   apply (resolver) {
     const target = resolver.ensureHook(this.target)
-    const { defaultMode, mode } = this
+    const { options = {}, mode } = this
+    const { defaultMode, fileConditionRules, implicitMode } = options
     resolver.getHook(this.source).tapAsync('AddModePlugin', (request, resolveContext, callback) => {
       if (request.mode || request.env) {
         return callback()
@@ -32,20 +32,20 @@ module.exports = class AddModePlugin {
         extname = path.extname(resourcePath)
       }
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
-      if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
+      if (!extname || !matchCondition(resourcePath, fileConditionRules)) return callback()
       const queryObj = parseQuery(request.query || '?')
       const queryInfix = queryObj.infix
-      queryObj.mode = mode
+      if (!implicitMode) queryObj.mode = mode
       queryObj.infix = `${queryInfix || ''}.${mode}`
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)
       resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
-        if (this.defaultMode && !result) {
+        if (defaultMode && !result) {
           queryObj.infix = `${queryInfix || ''}.${defaultMode}`
           obj.query = stringifyQuery(queryObj)
           obj.path = addInfix(resourcePath, defaultMode, extname)
-          resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + this.defaultMode, resolveContext, (err, result) => {
+          resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + defaultMode, resolveContext, (err, result) => {
             callback(err, result)
           })
           return

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

@@ -5,6 +5,8 @@ export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
 }>
 
+export type KeyboardAvoidContextValue = (enabled: boolean) => void
+
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }
 }
@@ -46,3 +48,7 @@ export const PickerContext = createContext(null)
 export const VarContext = createContext({})
 
 export const IntersectionObserverContext = createContext<IntersectionObserver | null>(null)
+
+export const RouteContext = createContext<number | null>(null)
+
+export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)

package/lib/runtime/components/react/dist/context.js

@@ -7,3 +7,5 @@ export const LabelContext = createContext(null);
 export const PickerContext = createContext(null);
 export const VarContext = createContext({});
 export const IntersectionObserverContext = createContext(null);
+export const RouteContext = createContext(null);
+export const KeyboardAvoidContext = createContext(null);

package/lib/runtime/components/react/dist/event.config.js

@@ -1,27 +1,27 @@
 const eventConfigMap = {
-    bindtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
-    bindlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
-    bindtouchstart: ['onTouchStart'],
-    bindtouchmove: ['onTouchMove'],
-    bindtouchend: ['onTouchEnd'],
-    bindtouchcancel: ['onTouchCancel'],
-    catchtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
-    catchlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
-    catchtouchstart: ['onTouchStart'],
-    catchtouchmove: ['onTouchMove'],
-    catchtouchend: ['onTouchEnd'],
-    catchtouchcancel: ['onTouchCancel'],
-    'capture-bindtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
-    'capture-bindlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
-    'capture-bindtouchstart': ['onTouchStartCapture'],
-    'capture-bindtouchmove': ['onTouchMoveCapture'],
-    'capture-bindtouchend': ['onTouchEndCapture'],
-    'capture-bindtouchcancel': ['onTouchCancelCapture'],
-    'capture-catchtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
-    'capture-catchlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
-    'capture-catchtouchstart': ['onTouchStartCapture'],
-    'capture-catchtouchmove': ['onTouchMoveCapture'],
-    'capture-catchtouchend': ['onTouchEndCapture'],
-    'capture-catchtouchcancel': ['onTouchCancelCapture']
+    bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+    bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+    bindtouchstart: { bitFlag: '2', events: ['onTouchStart'] },
+    bindtouchmove: { bitFlag: '3', events: ['onTouchMove'] },
+    bindtouchend: { bitFlag: '4', events: ['onTouchEnd'] },
+    bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'] },
+    catchtap: { bitFlag: '6', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+    catchlongpress: { bitFlag: '7', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+    catchtouchstart: { bitFlag: '8', events: ['onTouchStart'] },
+    catchtouchmove: { bitFlag: '9', events: ['onTouchMove'] },
+    catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'] },
+    catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'] },
+    'capture-bindtap': { bitFlag: 'c', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+    'capture-bindlongpress': { bitFlag: 'd', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+    'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'] },
+    'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'] },
+    'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'] },
+    'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'] },
+    'capture-catchtap': { bitFlag: 'i', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+    'capture-catchlongpress': { bitFlag: 'j', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+    'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'] },
+    'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'] },
+    'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
+    'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
 };
 export default eventConfigMap;