@mpxjs/webpack-plugin 2.6.102 → 2.7.0-beta.1

package/lib/runtime/i18n.wxs

@@ -265,17 +265,17 @@ var dateTimeFormats = {}
 var numberFormats = {}
 
 function getMessages () {
-  // __mpx_messages__会在编译时通过lib/wxs/wxs-i18n-loader注入
+  // __mpx_messages__会在编译时通过lib/wxs/i18n-loader注入
   return __mpx_messages__ || messages
 }
 
 function getDateTimeFormats () {
-  // __mpx_datetime_formats__会在编译时通过lib/wxs/wxs-i18n-loader注入
+  // __mpx_datetime_formats__会在编译时通过lib/wxs/i18n-loader注入
   return __mpx_datetime_formats__ || dateTimeFormats
 }
 
 function getNumberFormats () {
-  // __mpx_number_formats__会在编译时通过lib/wxs/wxs-i18n-loader注入
+  // __mpx_number_formats__会在编译时通过lib/wxs/i18n-loader注入
   return __mpx_number_formats__ || numberFormats
 }
 

package/lib/selector.js

@@ -1,18 +1,19 @@
 const parseComponent = require('./parser')
-const loaderUtils = require('loader-utils')
-const getMainCompilation = require('./utils/get-main-compilation')
+const parseRequest = require('./utils/parse-request')
 
 module.exports = function (content) {
   this.cacheable()
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
+  // todo 移除mpx访问依赖，支持thread-loader
+  const mpx = this.getMpx()
   if (!mpx) {
     return content
   }
+  const { queryObj } = parseRequest(this.resource)
+  const type = queryObj.type
+  const index = queryObj.index || 0
   const mode = mpx.mode
   const env = mpx.env
   const defs = mpx.defs
-  const query = loaderUtils.getOptions(this) || {}
   const filePath = this.resourcePath
   const parts = parseComponent(content, {
     filePath,
@@ -21,9 +22,11 @@ module.exports = function (content) {
     defs,
     env
   })
-  let part = parts[query.type] || {}
+  let part = parts[type] || {}
   if (Array.isArray(part)) {
-    part = part[query.index]
+    part = part[index] || {
+      content: ''
+    }
   }
   this.callback(null, part.content, part.map)
 }

package/lib/style-compiler/index.js

@@ -1,26 +1,27 @@
-const getMainCompilation = require('../utils/get-main-compilation')
 const postcss = require('postcss')
-const loaderUtils = require('loader-utils')
 const loadPostcssConfig = require('./load-postcss-config')
-
 const trim = require('./plugins/trim')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
+const transSpecial = require('./plugins/trans-special')
 const matchCondition = require('../utils/match-condition')
+const parseRequest = require('../utils/parse-request')
 
 module.exports = function (css, map) {
   this.cacheable()
   const cb = this.async()
-  const loaderOptions = loaderUtils.getOptions(this) || {}
-
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
+  const { resourcePath, queryObj } = parseRequest(this.resource)
+  const id = queryObj.moduleId || queryObj.mid
+  const mpx = this.getMpx()
   const defs = mpx.defs
-
+  const mode = mpx.mode
+  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
+  const componentsMap = mpx.componentsMap[packageName]
+  const pagesMap = mpx.pagesMap
+  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
   const transRpxRulesRaw = mpx.transRpxRules
-
   const transRpxRules = transRpxRulesRaw ? (Array.isArray(transRpxRulesRaw) ? transRpxRulesRaw : [transRpxRulesRaw]) : []
 
   const testResolveRange = (include = () => true, exclude) => {
@@ -38,10 +39,13 @@ module.exports = function (css, map) {
       },
       config.options
     )
+    // ali环境处理host选择器
+    if (mode === 'ali') {
+      plugins.push(transSpecial({ id }))
+    }
 
-    if (loaderOptions.scoped) {
-      const moduleId = loaderOptions.moduleId || loaderOptions.mid
-      plugins.push(scopeId({ id: moduleId }))
+    if (queryObj.scoped) {
+      plugins.push(scopeId({ id }))
     }
 
     plugins.push(pluginCondStrip({
@@ -79,6 +83,10 @@ module.exports = function (css, map) {
     return postcss(plugins)
       .process(css, options)
       .then(result => {
+        // ali环境添加全局样式抹平root差异
+        if (mode === 'ali' && isApp) {
+          result.css += '\n.mpx-root-view { display: inline; line-height: normal; }\n'
+        }
         if (result.messages) {
           result.messages.forEach(({ type, file }) => {
             if (type === 'dependency') {

package/lib/style-compiler/plugins/trans-special.js

@@ -0,0 +1,21 @@
+const postcss = require('postcss')
+const selectorParser = require('postcss-selector-parser')
+
+module.exports = postcss.plugin('trans-special', ({ id }) => root => {
+  root.each(function rewriteSelector (node) {
+    if (!node.selector) return
+    node.selector = selectorParser(selectors => {
+      selectors.each(selector => {
+        selector.each(n => {
+          if (/^:host$/.test(n.value)) {
+            const compoundSelectors = n.nodes
+            n.replaceWith(selectorParser.className({
+              value: 'host-' + id
+            }))
+            selector.insertAfter(n, compoundSelectors)
+          }
+        })
+      })
+    }).process(node.selector).result
+  })
+})

package/lib/template-compiler/compiler.js

@@ -129,107 +129,6 @@ function isForbiddenTag (el) {
   )
 }
 
-// mpx special comments
-// example
-/*
-{
-  'tt,swan': {
-    remove: [
-      'open-type',
-      // src mode attr
-      'wx:if'
-    ],
-    add: {
-      type: 'primary',
-      // attr name only
-      foo: null,
-    }
-  }
-}
-*/
-let curMpxComment = null
-
-function evalMpxCommentExp (exp) {
-  /* eslint-disable no-new-func */
-  const f = new Function(`return ${exp};`)
-  return f()
-}
-
-function isMpxCommentAttrs (content) {
-  return /@mpx-attrs/.test(content)
-}
-
-function normalizePlatformMpxAttrsOpts (opts) {
-  const ret = {}
-  // Array to map for removing attributes
-  ret.remove = (opts.remove || []).reduce((acc, val) => {
-    acc[val] = true
-    return acc
-  }, {})
-  // Default adding map
-  ret.add = opts.add || {}
-  return ret
-}
-
-function produceMpxCommentAttrs (content) {
-  const exp = /@mpx-attrs[^(]*?\(([\s\S]*)\)/.exec(content)[1].trim()
-  const tmpOpts = evalMpxCommentExp(exp)
-  // normalize
-  Object.keys(tmpOpts).forEach(k => {
-    Object.assign(tmpOpts[k], normalizePlatformMpxAttrsOpts(tmpOpts[k]))
-
-    if (k.indexOf(',') > -1) {
-      const modes = k.split(',')
-      modes.forEach(mode => {
-        tmpOpts[mode] = tmpOpts[k]
-      })
-      delete tmpOpts[k]
-    }
-  })
-  curMpxComment = tmpOpts
-}
-
-function modifyAttrsFromCurMpxAttrOptions (attrs, curModeMpxComment) {
-  const removeMap = curModeMpxComment.remove
-  const addMap = curModeMpxComment.add
-
-  const newAttrs = []
-  attrs.forEach(attr => {
-    if (!removeMap[attr.name]) {
-      newAttrs.push(attr)
-    }
-  })
-
-  Object.keys(addMap).forEach(name => {
-    newAttrs.push({
-      name,
-      value: addMap[name]
-    })
-  })
-
-  return newAttrs
-}
-
-function consumeMpxCommentAttrs (attrs, mode) {
-  let ret = attrs
-  if (curMpxComment) {
-    const curModeMpxComment = curMpxComment[mode]
-    if (curModeMpxComment) {
-      ret = modifyAttrsFromCurMpxAttrOptions(attrs, curModeMpxComment)
-    }
-
-    // reset
-    curMpxComment = null
-  }
-  return ret
-}
-
-function assertMpxCommentAttrsEnd () {
-  if (curMpxComment) {
-    error$1('No target for @mpx-attrs!')
-  }
-}
-
 // Browser environment sniffing
 const UA = inBrowser && window.navigator.userAgent.toLowerCase()
 const isIE = UA && /msie|trident/.test(UA)
@@ -253,6 +152,9 @@ let forScopesMap = {}
 let hasI18n = false
 let i18nInjectableComputed = []
 let env
+let platformGetTagNamespace
+let filePath
+let refId
 
 function updateForScopesMap () {
   forScopes.forEach((scope) => {
@@ -279,9 +181,6 @@ const deleteErrorInResultMap = (node) => {
   rulesResultMap.delete(node)
   Array.isArray(node.children) && node.children.forEach(item => deleteErrorInResultMap(item))
 }
-let platformGetTagNamespace
-let basename
-let refId
 
 function baseWarn (msg) {
   console.warn(('[template compiler]: ' + msg))
@@ -310,7 +209,7 @@ function decode (value) {
 
 const i18nFuncNames = ['\\$(t)', '\\$(tc)', '\\$(te)', '\\$(d)', '\\$(n)']
 const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
-const i18nWxsLoaderPath = normalize.lib('wxs/wxs-i18n-loader.js')
+const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
 // 添加~前缀避免wxs绝对路径在存在projectRoot时被拼接为错误路径
 const i18nWxsRequest = '~' + i18nWxsLoaderPath + '!' + i18nWxsPath
 const i18nModuleName = '__i18n__'
@@ -599,6 +498,7 @@ function parseComponent (content, options) {
   mode = options.mode || 'wx'
   defs = options.defs || {}
   env = options.env
+  filePath = options.filePath
 
   let sfc = {
     template: null,
@@ -691,9 +591,6 @@ function parseComponent (content, options) {
       if (attr.name === 'scoped') {
         block.scoped = true
       }
-      if (attr.name === 'module') {
-        block.module = attr.value || true
-      }
       if (attr.name === 'src') {
         block.src = attr.value
       }
@@ -721,7 +618,7 @@ function parseComponent (content, options) {
 
       // 对于<script name="json">的标签，传参调用函数，其返回结果作为json的内容
       if (currentBlock.tag === 'script' && !/^application\/json/.test(currentBlock.type) && currentBlock.name === 'json') {
-        text = mpxJSON.compileMPXJSONText({ source: text, defs, filePath: options.filePath })
+        text = mpxJSON.compileMPXJSONText({ source: text, defs, filePath })
       }
       currentBlock.content = text
       currentBlock = null
@@ -773,7 +670,7 @@ function parse (template, options) {
   defs = options.defs || {}
   srcMode = options.srcMode || mode
   isNative = options.isNative
-  basename = options.basename
+  filePath = options.filePath
   i18n = options.i18n
   refId = 0
 
@@ -803,7 +700,7 @@ function parse (template, options) {
 
   function genTempRoot () {
     // 使用临时节点作为root，处理multi root的情况
-    root = currentParent = getTempNode()
+    root = currentParent = getVirtualHostRoot(options, meta)
     stack.push(root)
   }
 
@@ -824,16 +721,6 @@ function parse (template, options) {
         attrs = guardIESVGBug(attrs)
       }
 
-      if (options.globalMpxAttrsFilter) {
-        attrs = modifyAttrsFromCurMpxAttrOptions(attrs, normalizePlatformMpxAttrsOpts(options.globalMpxAttrsFilter({
-          tagName: tag,
-          attrs,
-          __mpx_mode__: mode,
-          filePath: options.filePath
-        }) || {}))
-      }
-      attrs = consumeMpxCommentAttrs(attrs, mode)
-
       let element = createASTElement(tag, attrs, currentParent)
       if (ns) {
         element.ns = ns
@@ -848,21 +735,6 @@ function parse (template, options) {
         )
       }
 
-      // single root
-      // // gen root
-      // if (!root) {
-      //   root = element
-      // } else {
-      //   // mount element
-      //   if (currentParent) {
-      //     currentParent.children.push(element)
-      //     element.parent = currentParent
-      //   } else {
-      //     multiRootError = true
-      //     return
-      //   }
-      // }
-
       // multi root
       if (!currentParent) genTempRoot()
 
@@ -931,10 +803,7 @@ function parse (template, options) {
     },
     comment: function comment (text) {
       if (!currentParent) genTempRoot()
-      // special comments should not be output
-      if (isMpxCommentAttrs(text)) {
-        produceMpxCommentAttrs(text)
-      } else if (options.hasComment) {
+      if (options.hasComment) {
         currentParent.children.push({
           type: 3,
           text: text,
@@ -945,8 +814,6 @@ function parse (template, options) {
     }
   })
 
-  assertMpxCommentAttrsEnd()
-
   if (multiRootError) {
     error$1('Template fields should has one single root, considering wrapping your template content with <view> or <text> tag!')
   }
@@ -1136,15 +1003,6 @@ function processComponentIs (el, options) {
   }
 }
 
-// function processComponentDepth (el, options) {
-//   if (isComponentNode(el,options)) {
-//     addAttrs(el, [{
-//       name: 'mpxDepth',
-//       value: '{{mpxDepth + 1}}'
-//     }])
-//   }
-// }
-
 const eventIdentifier = '__mpx_event__'
 
 function parseFuncStr2 (str) {
@@ -1552,9 +1410,13 @@ function postProcessWxs (el, meta) {
         content = el.children.filter((child) => {
           return child.type === 3 && !child.isComment
         }).map(child => child.text).join('\n')
-        src = addQuery('./' + basename, {
+
+        const fakeRequest = filePath + config[mode].wxs.ext
+
+        src = addQuery(`~${fakeRequest}!=!${filePath}`, {
           wxsModule: module
         })
+
         addAttrs(el, [{
           name: config[mode].wxs.src,
           value: src
@@ -1635,9 +1497,9 @@ function postProcessFor (el) {
 }
 
 function evalExp (exp) {
-  // eslint-disable-next-line no-new-func
   let result = { success: false }
   try {
+    // eslint-disable-next-line no-new-func
     const fn = new Function(`return ${exp};`)
     result = {
       success: true,
@@ -1876,10 +1738,11 @@ function processWebExternalClassesHack (el, options) {
 function processScoped (el, options) {
   if (options.hasScoped && isRealNode(el)) {
     const moduleId = options.moduleId
+    const rootModuleId = options.isComponent ? '' : 'mpx-app-scope' // 处理app全局样式对页面的影响
     const staticClass = getAndRemoveAttr(el, 'class').val
     addAttrs(el, [{
       name: 'class',
-      value: staticClass ? `${staticClass} ${moduleId}` : moduleId
+      value: `${staticClass || ''} ${moduleId} ${rootModuleId}`
     }])
   }
 }
@@ -1898,38 +1761,43 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processAliStyleClassHack (el, options, root) {
+function processAliStyleClassHack (el, options) {
+  if (!isComponentNode(el, options)) return
   ['style', 'class'].forEach((type) => {
     let exp = getAndRemoveAttr(el, type).val
-    let sep = type === 'style' ? ';' : ' '
-
     let typeName = 'mpx' + type.replace(/^./, (matched) => {
       return matched.toUpperCase()
     })
-
-    if (options.isComponent && el.parent === root && isRealNode(el)) {
-      if (exp !== undefined) {
-        exp = `{{${typeName}||''}}` + sep + exp
-      } else {
-        exp = `{{${typeName}||''}}`
-      }
-    }
     if (exp !== undefined) {
-      if (isComponentNode(el, options)) {
-        addAttrs(el, [{
-          name: typeName,
-          value: exp
-        }])
-      } else {
-        addAttrs(el, [{
-          name: type,
-          value: exp
-        }])
-      }
+      addAttrs(el, [{
+        name: typeName,
+        value: exp
+      }])
     }
   })
 }
 
+// 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
+function getVirtualHostRoot (options, meta) {
+  if (mode === 'wx' && options.hasVirtualHost && options.isComponent) {
+    !meta.options && (meta.options = {})
+    meta.options.virtualHost = true
+  }
+  if (mode === 'ali' && !options.hasVirtualHost && options.isComponent) {
+    return createASTElement('view', [
+      {
+        name: 'class',
+        value: `mpx-root-view host-${options.moduleId} ${options.hasScoped ? options.moduleId : ''} {{mpxClass||''}}`
+      },
+      {
+        name: 'style',
+        value: `{{mpxStyle||''}}`
+      }
+    ])
+  }
+  return getTempNode()
+}
+
 function processShow (el, options, root) {
   let show = getAndRemoveAttr(el, config[mode].directive.show).val
   if (mode === 'swan') show = wrapMustache(show)