@mpxjs/webpack-plugin 2.9.0-beta.0 → 2.9.0-beta.2

package/lib/runtime/optionProcessor.js

@@ -3,7 +3,19 @@ import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
 
-export default function processComponentOption ({ option, ctorType, outputPath, pageConfig, componentsMap, componentGenerics, genericsInfo, mixin, hasApp }) {
+export default function processComponentOption (
+  {
+    option,
+    ctorType,
+    outputPath,
+    pageConfig,
+    componentsMap,
+    componentGenerics,
+    genericsInfo,
+    mixin,
+    hasApp
+  }
+) {
   // 局部注册页面和组件中依赖的组件
   for (const componentName in componentsMap) {
     if (hasOwn(componentsMap, componentName)) {
@@ -128,6 +140,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     global.__mpxRouter.stack = []
     global.__mpxRouter.needCache = null
     global.__mpxRouter.needRemove = []
+    global.__mpxRouter.eventChannelMap = {}
     // 处理reLaunch中传递的url并非首页时的replace逻辑
     global.__mpxRouter.beforeEach(function (to, from, next) {
       let action = global.__mpxRouter.__mpxAction
@@ -166,24 +179,15 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
             })
           }
         } else {
-          let methods = ''
-          switch (action.type) {
-            case 'to':
-              methods = 'navigateTo'
-              break
-            case 'redirect':
-              methods = 'redirectTo'
-              break
-            case 'back':
-              methods = 'navigateBack'
-              break
-            case 'reLaunch':
-              methods = 'reLaunch'
-              break
-            default:
-              methods = 'navigateTo'
+          const typeMethodMap = {
+            to: 'navigateTo',
+            redirect: 'redirectTo',
+            back: 'navigateBack',
+            switch: 'switchTab',
+            reLaunch: 'reLaunch'
           }
-          throw new Error(`${methods}:fail page "${to.path}" is not found`)
+          const method = typeMethodMap[action.type]
+          throw new Error(`${method}:fail page "${to.path}" is not found`)
         }
       }
 
@@ -195,6 +199,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
         case 'to':
           stack.push(insertItem)
           global.__mpxRouter.needCache = insertItem
+          if (action.eventChannel) global.__mpxRouter.eventChannelMap[to.path.slice(1)] = action.eventChannel
           break
         case 'back':
           global.__mpxRouter.needRemove = stack.splice(stack.length - action.delta, action.delta)

package/lib/runtime/stringify.wxs

@@ -24,8 +24,9 @@ function objectKeys (obj) {
         var shift = false
         for (var i = 1; i < objStr.length - 1; i++) {
           var item = objStr[i]
+          var lastItem = objStr[i - 1]
           if (inKey) {
-            if (item === ':') {
+            if (item === ':' && lastItem === '"') {
               keys.push(key.slice(1, -1))
               key = ''
               inKey = false
@@ -93,18 +94,53 @@ function isDef (v) {
   return v !== undefined && v !== null
 }
 
+var escapeMap = {
+  '(': '_pl_',
+  ')': '_pr_',
+  '[': '_bl_',
+  ']': '_br_',
+  '{': '_cl_',
+  '#': '_h_',
+  '!': '_i_',
+  '/': '_s_',
+  '.': '_d_',
+  ':': '_c_',
+  ',': '_2c_',
+  '%': '_p_',
+  // wxs can not use '\'' as key
+  // wxs环境中'\''!=="'"，此文件不能格式化，否则会导致程序错误
+  "'": '_q_',
+  // wxs can not use '"' as key
+  '"': '_dq_',
+  '+': '_a_',
+  '$': '_si_'
+}
+
+var escapeReg = genRegExp('[()[\]{}#!/.:,%\'"+$]', 'g')
+
+function mpEscape (str) {
+  return str.replace(escapeReg, function (match) {
+    if (escapeMap[match]) return escapeMap[match]
+    // fix wxs can not use '}' as key
+    if (match === '}') return '_cr_'
+    // unknown escaped
+    return '_u_'
+  })
+}
+
+
 function stringifyDynamicClass (value) {
-  if (!value) return ''
   if (isArray(value)) {
-    return stringifyArray(value)
-  }
-  if (isObject(value)) {
-    return stringifyObject(value)
+    value = stringifyArray(value)
+  } else if (isObject(value)) {
+    value = stringifyObject(value)
   }
+
   if (typeof value === 'string') {
-    return value
+    return mpEscape(value)
+  } else {
+    return ''
   }
-  return ''
 }
 
 function stringifyArray (value) {

package/lib/style-compiler/index.js

@@ -30,7 +30,7 @@ module.exports = function (css, map) {
 
   const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs })
   loadPostcssConfig(this, inlineConfig).then(config => {
-    const plugins = config.plugins.concat(trim)
+    const plugins = [trim] // init with trim plugin
     const options = Object.assign(
       {
         to: this.resourcePath,
@@ -79,6 +79,8 @@ module.exports = function (css, map) {
       }
     }
 
+    plugins.push(...config.plugins) // push user config plugins
+
     return postcss(plugins)
       .process(css, options)
       .then(result => {

package/lib/template-compiler/compiler.js

@@ -762,7 +762,7 @@ function parse (template, options) {
     },
     comment: function comment (text) {
       if (!currentParent) genTempRoot()
-      if (options.hasComment) {
+      if (options.hasComment || /mpx_config_/.test(text)) {
         currentParent.children.push({
           type: 3,
           text: text,
@@ -967,7 +967,7 @@ function processComponentIs (el, options) {
 
   const is = getAndRemoveAttr(el, 'is').val
   if (is) {
-    el.is = parseMustache(is).result
+    el.is = parseMustacheWithContext(is).result
   } else {
     warn$1('<component> tag should have attrs[is].')
   }
@@ -979,7 +979,7 @@ function parseFuncStr2 (str) {
   const funcRE = /^([^()]+)(\((.*)\))?/
   const match = funcRE.exec(str)
   if (match) {
-    const funcName = parseMustache(match[1]).result
+    const funcName = parseMustacheWithContext(match[1]).result
     const hasArgs = !!match[2]
     let args = match[3] ? `,${match[3]}` : ''
     const ret = /(,|^)\s*(\$event)\s*(,|$)/.exec(args)
@@ -1163,19 +1163,9 @@ function wrapMustache (val) {
   return val && !tagRE.test(val) ? `{{${val}}}` : val
 }
 
-function parseMustache (raw = '') {
-  let replaced = false
-  if (tagRE.test(raw)) {
-    const ret = []
-    let lastLastIndex = 0
-    let match
-    while (match = tagREG.exec(raw)) {
-      const pre = raw.substring(lastLastIndex, match.index)
-      if (pre) {
-        ret.push(stringify(pre))
-      }
-      let exp = match[1]
-
+function parseMustacheWithContext (raw = '') {
+  return parseMustache(raw, (exp) => {
+    if (defs) {
       // eval处理的话，和别的判断条件，比如运行时的判断混用情况下得不到一个结果，还是正则替换
       const defKeys = Object.keys(defs)
       defKeys.forEach((defKey) => {
@@ -1183,42 +1173,70 @@ function parseMustache (raw = '') {
         const defREG = new RegExp(`\\b${defKey}\\b`, 'g')
         if (defRE.test(exp)) {
           exp = exp.replace(defREG, stringify(defs[defKey]))
-          replaced = true
         }
       })
+    }
 
-      if (i18n) {
-        for (const i18nFuncName of i18nFuncNames) {
-          const funcNameRE = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`)
-          const funcNameREG = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`, 'g')
-          if (funcNameRE.test(exp)) {
-            if (i18n.useComputed || !i18nFuncName.startsWith('\\$')) {
-              const i18nInjectComputedKey = `_i${i18nInjectableComputed.length + 1}`
-              i18nInjectableComputed.push(`${i18nInjectComputedKey} () {\nreturn ${exp.trim()}}`)
-              exp = i18nInjectComputedKey
-            } else {
-              exp = exp.replace(funcNameREG, `${i18nModuleName}.$1(null, _l, _fl, `)
-            }
-            hasI18n = true
-            replaced = true
-            break
+    if (i18n) {
+      for (const i18nFuncName of i18nFuncNames) {
+        const funcNameRE = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`)
+        const funcNameREG = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`, 'g')
+        if (funcNameRE.test(exp)) {
+          if (i18n.useComputed || !i18nFuncName.startsWith('\\$')) {
+            const i18nInjectComputedKey = `_i${i18nInjectableComputed.length + 1}`
+            i18nInjectableComputed.push(`${i18nInjectComputedKey} () {\nreturn ${exp.trim()}}`)
+            exp = i18nInjectComputedKey
+          } else {
+            exp = exp.replace(funcNameREG, `${i18nModuleName}.$1(null, _l, _fl, `)
           }
+          hasI18n = true
+          break
         }
       }
+    }
+
+    return exp
+  })
+}
+
+function parseMustache (raw = '', expHandler = exp => exp, strHandler = str => str) {
+  let replaced = false
+  if (tagRE.test(raw)) {
+    const ret = []
+    let lastLastIndex = 0
+    let match
+    while (match = tagREG.exec(raw)) {
+      const pre = raw.substring(lastLastIndex, match.index)
+      if (pre) {
+        const pre2 = strHandler(pre)
+        if (pre2 !== pre) replaced = true
+        if (pre2) ret.push(stringify(pre2))
+      }
+
+      const exp = match[1].trim()
+      if (exp) {
+        const exp2 = expHandler(exp)
+        if (exp2 !== exp) replaced = true
+        if (exp2) ret.push(`(${exp2})`)
+      }
 
-      ret.push(`(${exp.trim()})`)
       lastLastIndex = tagREG.lastIndex
     }
+
     const post = raw.substring(lastLastIndex)
     if (post) {
-      ret.push(stringify(post))
+      const post2 = strHandler(post)
+      if (post2 !== post) replaced = true
+      if (post2) ret.push(stringify(post2))
     }
+
     let result
     if (ret.length === 1) {
       result = ret[0]
     } else {
       result = `(${ret.join('+')})`
     }
+
     return {
       result,
       hasBinding: true,
@@ -1226,10 +1244,14 @@ function parseMustache (raw = '') {
       replaced
     }
   }
+
+  const raw2 = strHandler(raw)
+  if (raw2 !== raw) replaced = true
+
   return {
-    result: stringify(raw),
+    result: stringify(raw2),
     hasBinding: false,
-    val: raw,
+    val: raw2,
     replaced
   }
 }
@@ -1247,14 +1269,14 @@ function processIf (el) {
   let val = getAndRemoveAttr(el, config[mode].directive.if).val
   if (val) {
     if (mode === 'swan') val = wrapMustache(val)
-    const parsed = parseMustache(val)
+    const parsed = parseMustacheWithContext(val)
     el.if = {
       raw: parsed.val,
       exp: parsed.result
     }
   } else if (val = getAndRemoveAttr(el, config[mode].directive.elseif).val) {
     if (mode === 'swan') val = wrapMustache(val)
-    const parsed = parseMustache(val)
+    const parsed = parseMustacheWithContext(val)
     el.elseif = {
       raw: parsed.val,
       exp: parsed.result
@@ -1296,7 +1318,7 @@ function processFor (el) {
       }
     } else {
       if (mode === 'swan') val = wrapMustache(val)
-      const parsed = parseMustache(val)
+      const parsed = parseMustacheWithContext(val)
       el.for = {
         raw: parsed.val,
         exp: parsed.result
@@ -1408,14 +1430,14 @@ function processAttrs (el, options) {
     const isTemplateData = el.tag === 'template' && attr.name === 'data'
     const needWrap = isTemplateData && mode !== 'swan'
     const value = needWrap ? `{${attr.value}}` : attr.value
-    const parsed = parseMustache(value)
+    const parsed = parseMustacheWithContext(value)
     if (parsed.hasBinding) {
       // 该属性判断用于提供给运行时对于计算属性作为props传递时提出警告
       const isProps = isComponentNode(el, options) && !(attr.name === 'class' || attr.name === 'style')
       addExp(el, parsed.result, isProps)
-    }
-    if (parsed.replaced) {
-      modifyAttr(el, attr.name, needWrap ? parsed.val.slice(1, -1) : parsed.val)
+      if (parsed.replaced) {
+        modifyAttr(el, attr.name, needWrap ? parsed.val.slice(1, -1) : parsed.val)
+      }
     }
   })
 }
@@ -1547,7 +1569,7 @@ function processText (el) {
   if (el.type !== 3 || el.isComment) {
     return
   }
-  const parsed = parseMustache(el.text)
+  const parsed = parseMustacheWithContext(el.text)
   if (parsed.hasBinding) {
     addExp(el, parsed.result)
   }
@@ -1592,8 +1614,8 @@ function processClass (el, meta) {
   let staticClass = getAndRemoveAttr(el, type).val || ''
   staticClass = staticClass.replace(/\s+/g, ' ')
   if (dynamicClass) {
-    const staticClassExp = parseMustache(staticClass).result
-    const dynamicClassExp = transDynamicClassExpr(parseMustache(dynamicClass).result, {
+    const staticClassExp = parseMustacheWithContext(staticClass).result
+    const dynamicClassExp = transDynamicClassExpr(parseMustacheWithContext(dynamicClass).result, {
       error: error$1
     })
     addAttrs(el, [{
@@ -1628,8 +1650,8 @@ function processStyle (el, meta) {
   let staticStyle = getAndRemoveAttr(el, type).val || ''
   staticStyle = staticStyle.replace(/\s+/g, ' ')
   if (dynamicStyle) {
-    const staticStyleExp = parseMustache(staticStyle).result
-    const dynamicStyleExp = parseMustache(dynamicStyle).result
+    const staticStyleExp = parseMustacheWithContext(staticStyle).result
+    const dynamicStyleExp = parseMustacheWithContext(dynamicStyle).result
     addAttrs(el, [{
       name: targetType,
       value: `{{${stringifyModuleName}.stringifyStyle(${staticStyleExp}, ${dynamicStyleExp})}}`
@@ -1870,7 +1892,7 @@ function processShow (el, options, root) {
   if (options.hasVirtualHost) {
     if (options.isComponent && el.parent === root && isRealNode(el)) {
       if (show !== undefined) {
-        show = `{{${parseMustache(show).result}&&mpxShow}}`
+        show = `{{${parseMustacheWithContext(show).result}&&mpxShow}}`
       } else {
         show = '{{mpxShow}}'
       }
@@ -1892,7 +1914,7 @@ function processShow (el, options, root) {
 
   function processShowStyle () {
     if (show !== undefined) {
-      const showExp = parseMustache(show).result
+      const showExp = parseMustacheWithContext(show).result
       let oldStyle = getAndRemoveAttr(el, 'style').val
       oldStyle = oldStyle ? oldStyle + ';' : ''
       addAttrs(el, [{
@@ -2376,6 +2398,7 @@ module.exports = {
   makeAttrsMap,
   stringifyAttr,
   parseMustache,
+  parseMustacheWithContext,
   stringifyWithResolveComputed,
   addAttrs
 }

package/lib/utils/ts-loader-watch-run-loader-filter.js

@@ -1,23 +1,9 @@
-const normalize = require('./normalize')
-const selectorPath = normalize.lib('selector.js')
-const scriptSetupPath = normalize.lib('script-setup-compiler/index.js')
-const mpxLoaderPath = normalize.lib('loader.js')
-const { has } = require('./set')
-
-const tsLoaderWatchRunFilterLoaders = new Set([
-  selectorPath,
-  scriptSetupPath,
-  mpxLoaderPath,
-  'node_modules/vue-loader/lib/index.js'
-])
-
 module.exports = (loaders, loaderIndex) => {
-  for (let len = loaders.length; len > 0; --len) {
-    const currentLoader = loaders[len - 1]
-    if (!has(tsLoaderWatchRunFilterLoaders, filterLoaderPath => currentLoader.path.endsWith(filterLoaderPath))) {
-      break
+  for (let i = loaderIndex; i >= 0; i--) {
+    const currentLoader = loaders[i]
+    if (currentLoader.path.endsWith('ts-loader/dist/stringify-loader.js')) {
+      return i
     }
-    loaderIndex--
   }
   return loaderIndex
 }

package/lib/wxss/runtime/api.js

@@ -2,26 +2,27 @@
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
 */
-module.exports = (cssWithMappingToString) => {
-  const list = []
+/* eslint no-var: off */
+module.exports = function (cssWithMappingToString) {
+  var list = []
 
   // return the list of modules as css string
   list.toString = function toString () {
-    return this.map((item) => {
-      let content = ''
+    return this.map(function (item) {
+      var content = ''
 
-      const needLayer = typeof item[5] !== 'undefined'
+      var needLayer = typeof item[5] !== 'undefined'
 
       if (item[4]) {
-        content += `@supports (${item[4]}) {`
+        content += '@supports (' + item[4] + ') {'
       }
 
       if (item[2]) {
-        content += `@media ${item[2]} {`
+        content += '@media ' + item[2] + '{'
       }
 
       if (needLayer) {
-        content += `@layer${item[5].length > 0 ? ` ${item[5]}` : ''} {`
+        content += '@layer' + (item[5].length > 0 ? item[5] : '') + '{'
       }
 
       content += cssWithMappingToString(item)
@@ -48,11 +49,11 @@ module.exports = (cssWithMappingToString) => {
       modules = [[null, modules, undefined]]
     }
 
-    const alreadyImportedModules = {}
+    var alreadyImportedModules = {}
 
     if (dedupe) {
-      for (let k = 0; k < this.length; k++) {
-        const id = this[k][0]
+      for (var k = 0; k < this.length; k++) {
+        var id = this[k][0]
 
         if (id != null) {
           alreadyImportedModules[id] = true
@@ -60,8 +61,8 @@ module.exports = (cssWithMappingToString) => {
       }
     }
 
-    for (let k = 0; k < modules.length; k++) {
-      const item = [].concat(modules[k])
+    for (var k1 = 0; k1 < modules.length; k1++) {
+      var item = [].concat(modules[k1])
 
       if (dedupe && alreadyImportedModules[item[0]]) {
         continue
@@ -71,9 +72,7 @@ module.exports = (cssWithMappingToString) => {
         if (typeof item[5] === 'undefined') {
           item[5] = layer
         } else {
-          item[1] = `@layer${item[5].length > 0 ? ` ${item[5]}` : ''} {${
-            item[1]
-          }}`
+          item[1] = '@layer' + (item[5].length > 0 ? item[5] : '') + '{' + item[1] + '}'
           item[5] = layer
         }
       }
@@ -82,16 +81,16 @@ module.exports = (cssWithMappingToString) => {
         if (!item[2]) {
           item[2] = media
         } else {
-          item[1] = `@media ${item[2]} {${item[1]}}`
+          item[1] = '@media' + item[2] + item[1]
           item[2] = media
         }
       }
 
       if (supports) {
         if (!item[4]) {
-          item[4] = `${supports}`
+          item[4] = String(supports)
         } else {
-          item[1] = `@supports (${item[4]}) {${item[1]}}`
+          item[1] = '@supports (' + item[4] + ')' + '{' + item[1] + '}'
           item[4] = supports
         }
       }

package/lib/wxss/runtime/noSourceMaps.js

@@ -1 +1,3 @@
-module.exports = (i) => i[1]
+module.exports = function (i) {
+  return i[1]
+}

package/lib/wxss/runtime/sourceMaps.js

@@ -1,6 +1,7 @@
-module.exports = (item) => {
-  const content = item[1]
-  const cssMapping = item[3]
+/* eslint no-var: off */
+module.exports = function (item) {
+  var content = item[1]
+  var cssMapping = item[3]
 
   if (!cssMapping) {
     return content
@@ -8,13 +9,13 @@ module.exports = (item) => {
 
   if (typeof btoa === 'function') {
     // eslint-disable-next-line no-undef
-    const base64 = btoa(
+    var base64 = btoa(
       unescape(encodeURIComponent(JSON.stringify(cssMapping)))
     )
-    const data = `sourceMappingURL=data:application/json;charset=utf-8;base64,${base64}`
-    const sourceMapping = `/*# ${data} */`
+    var data = `sourceMappingURL=data:application/json;charset=utf-8;base64,${base64}`
+    var sourceMapping = `/*# ${data} */`
 
-    const sourceURLs = cssMapping.sources.map(
+    var sourceURLs = cssMapping.sources.map(
       (source) => `/*# sourceURL=${cssMapping.sourceRoot || ''}${source} */`
     )
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.0-beta.0",
+  "version": "2.9.0-beta.2",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
   ],
   "author": "donghongping",
-  "license": "Apache",
+  "license": "Apache-2.0",
   "main": "lib/index.js",
   "directories": {
     "lib": "lib"
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "67b611aeae99f916d46ca8d5d9ed784ddf53f05c"
+  "gitHead": "2d61bab77c50eccb7470b9b9bd644e7bd6510467"
 }

package/lib/partial-compile/index.js

@@ -1,35 +0,0 @@
-const { matchCondition } = require('../utils/match-condition')
-const { parseQuery } = require('loader-utils')
-
-class MpxPartialCompilePlugin {
-  constructor (condition) {
-    this.condition = condition
-  }
-
-  isResolvingPage (obj) {
-    // valid query should start with '?'
-    const query = obj.query || '?'
-    return parseQuery(query).isPage
-  }
-
-  apply (compiler) {
-    compiler.resolverFactory.hooks.resolver.intercept({
-      factory: (type, hook) => {
-        hook.tap('MpxPartialCompilePlugin', (resolver) => {
-          resolver.hooks.result.tapAsync({
-            name: 'MpxPartialCompilePlugin',
-            stage: -100
-          }, (obj, resolverContext, callback) => {
-            if (this.isResolvingPage(obj) && !matchCondition(obj.path, this.condition)) {
-              obj.path = false
-            }
-            callback(null, obj)
-          })
-        })
-        return hook
-      }
-    })
-  }
-}
-
-module.exports = MpxPartialCompilePlugin