@mpxjs/webpack-plugin 2.8.40-test → 2.8.40-test.2

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

@@ -1,7 +1,6 @@
 const postcss = require('postcss')
 const loadPostcssConfig = require('./load-postcss-config')
 const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
-const trim = require('./plugins/trim')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
@@ -30,7 +29,7 @@ module.exports = function (css, map) {
 
   const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs })
   loadPostcssConfig(this, inlineConfig).then(config => {
-    const plugins = [trim] // init with trim plugin
+    const plugins = [] // init with trim plugin
     const options = Object.assign(
       {
         to: this.resourcePath,

package/lib/template-compiler/compiler.js

@@ -738,7 +738,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,
@@ -944,7 +944,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].')
   }
@@ -956,7 +956,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)
@@ -1142,19 +1142,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) => {
@@ -1162,42 +1152,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,
@@ -1205,10 +1223,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
   }
 }
@@ -1226,14 +1248,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
@@ -1275,7 +1297,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
@@ -1387,14 +1409,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)
+      }
     }
   })
 }
@@ -1526,7 +1548,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)
   }
@@ -1571,8 +1593,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, [{
@@ -1607,8 +1629,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})}}`
@@ -1845,12 +1867,7 @@ function getVirtualHostRoot (options, meta) {
     }
     if (options.isPage) {
       if (mode === 'web') {
-        return createASTElement('div', [
-          {
-            name: 'class',
-            value: 'page'
-          }
-        ])
+        return createASTElement('page', [])
       }
     }
   }
@@ -1866,7 +1883,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}}'
       }
@@ -1888,7 +1905,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, [{
@@ -2372,6 +2389,7 @@ module.exports = {
   makeAttrsMap,
   stringifyAttr,
   parseMustache,
+  parseMustacheWithContext,
   stringifyWithResolveComputed,
   addAttrs
 }

package/lib/utils/check-core-version-match.js

@@ -1,18 +1,22 @@
-// @mpxjs/webpack-plugin 2.7.x -> @mpxjs/core 2.7.x
-// @mpxjs/webpack-plugin 2.8.x -> @mpxjs/core 2.8.x
 const coreVersion = require('@mpxjs/core/package.json').version
-const packageName = require('../../package.json').name
-const packageVersion = require('../../package.json').version
+const utilsVersion = require('@mpxjs/utils/package.json').version
+const corePath = require.resolve('@mpxjs/core')
+const utilsPath = require.resolve('@mpxjs/utils')
+const semverLt = require('semver/functions/lt')
 
-if (packageVersion.slice(0, 3) !== coreVersion.slice(0, 3)) {
-  const corePath = require.resolve('@mpxjs/core')
-  const packagePath = require.resolve('../../package.json')
-  throw new Error(
-    `@mpxjs/core packages version mismatch:
-    -@mpxjs/core@${coreVersion}(${corePath})
-    -${packageName}@${packageVersion}(${packagePath})
-    This may cause things to work incorrectly, Make sure to use the same minor version for both.
-    For example: @mpxjs/core@2.7.x with @mpxjs/webpack-plugin@2.7.x
+const leastCoreVersion = '2.8.59'
+const leastUtilsVersion = '2.8.59'
+
+function compare (version, leastVersion, npmName, npmPath) {
+  if (semverLt(version, leastVersion)) {
+    throw new Error(
+      `${npmName} packages version mismatch:
+    -${npmName}@${version}(${npmPath})
+    This may cause things to work incorrectly, Make sure the usage version is greater than ${leastVersion}.
     `
-  )
+    )
+  }
 }
+
+compare(coreVersion, leastCoreVersion, '@mpxjs/core', corePath)
+compare(utilsVersion, leastUtilsVersion, '@mpxjs/utils', utilsPath)

package/lib/web/processJSON.js

@@ -61,7 +61,8 @@ module.exports = function (json, {
     customGetDynamicEntry (resource, type, outputPath, packageRoot) {
       return {
         resource,
-        outputPath: toPosix(path.join(packageRoot, outputPath)),
+        // 输出web时组件outputPath不需要拼接packageRoot
+        outputPath: type === 'page' ? toPosix(path.join(packageRoot, outputPath)) : outputPath,
         packageRoot
       }
     }
@@ -297,7 +298,7 @@ module.exports = function (json, {
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, {}, (err, { resource, outputPath } = {}) => {
+        processComponent(component, context, {}, (err, { resource, outputPath } = {}, { tarRoot } = {}) => {
           if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
           const { resourcePath, queryObj } = parseRequest(resource)
           componentsMap[resourcePath] = outputPath
@@ -307,7 +308,7 @@ module.exports = function (json, {
               isComponent: true,
               outputPath
             }),
-            async: queryObj.async
+            async: queryObj.async || tarRoot
           }
           callback()
         })

package/lib/web/processMainScript.js

@@ -0,0 +1,84 @@
+const addQuery = require('../utils/add-query')
+const normalize = require('../utils/normalize')
+const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+const {
+  buildComponentsMap,
+  buildPagesMap,
+  buildGlobalParams,
+  shallowStringify,
+  stringifyRequest,
+  buildI18n
+} = require('./script-helper')
+
+module.exports = function (script, {
+  loaderContext,
+  ctorType,
+  srcMode,
+  moduleId,
+  isProduction,
+  jsonConfig,
+  localComponentsMap,
+  tabBar,
+  tabBarMap,
+  tabBarStr,
+  localPagesMap,
+  resource
+}, callback) {
+  const { i18n, webConfig, hasUnoCSS } = loaderContext.getMpx()
+  const { pagesMap, firstPage, globalTabBar } = buildPagesMap({
+    localPagesMap,
+    loaderContext,
+    tabBar,
+    tabBarMap,
+    tabBarStr,
+    jsonConfig
+  })
+
+  const componentsMap = buildComponentsMap({ localComponentsMap, loaderContext })
+
+  const scriptSrcMode = script ? script.mode || srcMode : srcMode
+
+  let output = '  import \'@mpxjs/webpack-plugin/lib/runtime/base.styl\'\n'
+  // hasUnoCSS由@mpxjs/unocss-plugin注入
+  if (hasUnoCSS) {
+    output += '  import \'uno.css\'\n'
+  }
+  output += `  import Vue from 'vue'
+  import VueRouter from 'vue-router'
+  import Mpx from '@mpxjs/core'
+  import { processAppOption, getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
+  Vue.use(VueRouter)\n`
+
+  if (i18n) {
+    output += buildI18n({ i18n, loaderContext })
+  }
+
+  output += buildGlobalParams({
+    moduleId,
+    scriptSrcMode,
+    loaderContext,
+    isProduction,
+    jsonConfig,
+    webConfig,
+    isMain: true,
+    globalTabBar
+  })
+
+  output += `\n  const App = require(${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}).default\n`
+
+  output += `
+  export default processAppOption({
+    App,
+    tabBarMap: ${JSON.stringify(tabBarMap)},
+    firstPage: ${JSON.stringify(firstPage)},
+    pagesMap: ${shallowStringify(pagesMap)},
+    componentsMap: ${shallowStringify(componentsMap)},
+    Vue,
+    VueRouter,
+    webConfig: ${JSON.stringify(webConfig)}
+  })\n`
+
+  callback(null, {
+    output
+  })
+}