@mpxjs/webpack-plugin 2.7.0-alpha.0 → 2.7.0-alpha.2

package/lib/template-compiler/compiler.js

@@ -1,15 +1,16 @@
 const JSON5 = require('json5')
 const he = require('he')
 const config = require('../config')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
 const normalize = require('../utils/normalize')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 const isEmptyObject = require('../utils/is-empty-object')
-const mpxJSON = require('../utils/mpx-json')
 const getRulesRunner = require('../platform/index')
 const addQuery = require('../utils/add-query')
 const transDynamicClassExpr = require('./trans-dynamic-class-expr')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const { inBrowser } = require('../utils/env')
+const { matchCondition } = require('../utils/match-condition')
 
 /**
  * Make a map and return a function for checking if a key
@@ -496,7 +497,6 @@ function parseHTML (html, options) {
 
 function parseComponent (content, options) {
   mode = options.mode || 'wx'
-  defs = options.defs || {}
   env = options.env
   filePath = options.filePath
 
@@ -548,6 +548,9 @@ function parseComponent (content, options) {
             if (/^application\/json/.test(currentBlock.type) || currentBlock.name === 'json') {
               tag = 'json'
             }
+            if (currentBlock.name === 'json') {
+              currentBlock.useJSONJS = true
+            }
           }
           if (currentBlock.mode && currentBlock.env) {
             if (currentBlock.mode === mode && currentBlock.env === env) {
@@ -606,20 +609,15 @@ function parseComponent (content, options) {
     }
   }
 
-  function end (tag, start, end) {
+  function end (tag, start) {
     if (depth === 1 && currentBlock) {
       currentBlock.end = start
       let text = content.slice(currentBlock.start, currentBlock.end)
       // pad content so that linters and pre-processors can output correct
       // line numbers in errors and warnings
-      if (currentBlock.tag !== 'template' && options.pad) {
+      if (options.pad) {
         text = padContent(currentBlock, options.pad) + text
       }
-
-      // 对于<script name="json">的标签，传参调用函数，其返回结果作为json的内容
-      if (currentBlock.tag === 'script' && !/^application\/json/.test(currentBlock.type) && currentBlock.name === 'json') {
-        text = mpxJSON.compileMPXJSONText({ source: text, defs, filePath })
-      }
       currentBlock.content = text
       currentBlock = null
     }
@@ -740,7 +738,6 @@ function parse (template, options) {
 
       currentParent.children.push(element)
       element.parent = currentParent
-
       processElement(element, root, options, meta)
       tagNames.add(element.tag)
 
@@ -907,6 +904,19 @@ function modifyAttr (el, name, val) {
   }
 }
 
+function moveBaseDirective (target, from, isDelete = true) {
+  target.for = from.for
+  target.if = from.if
+  target.elseif = from.elseif
+  target.else = from.else
+  if (isDelete) {
+    delete from.for
+    delete from.if
+    delete from.elseif
+    delete from.else
+  }
+}
+
 function stringify (str) {
   return JSON.stringify(str)
 }
@@ -1622,7 +1632,9 @@ function processClass (el, meta) {
   staticClass = staticClass.replace(/\s+/g, ' ')
   if (dynamicClass) {
     let staticClassExp = parseMustache(staticClass).result
-    let dynamicClassExp = transDynamicClassExpr(parseMustache(dynamicClass).result)
+    let dynamicClassExp = transDynamicClassExpr(parseMustache(dynamicClass).result, {
+      error: error$1
+    })
     addAttrs(el, [{
       name: targetType,
       // swan中externalClass是通过编译时静态实现，因此需要保留原有的staticClass形式避免externalClass失效
@@ -1714,31 +1726,71 @@ function processAliExternalClassesHack (el, options) {
   }
 }
 
+// externalClasses只能模拟静态传递
 function processWebExternalClassesHack (el, options) {
-  // todo 处理scoped的情况, 处理组件多层传递externalClass的情况，通过externalClass属性传递实际类名及scopeId信息，可以使用特殊的类名形式代表scopeId，如#idstring
-  let staticClass = el.attrsMap['class']
-  let dynamicClass = el.attrsMap[':class']
-  if (staticClass || dynamicClass) {
-    const externalClasses = []
+  const staticClass = getAndRemoveAttr(el, 'class').val
+  if (staticClass) {
+    const classNames = staticClass.split(/\s+/)
+    const replacements = []
     options.externalClasses.forEach((className) => {
-      const reg = new RegExp('\\b' + className + '\\b')
-      if (reg.test(staticClass) || reg.test(dynamicClass)) {
-        externalClasses.push(className)
+      const index = classNames.indexOf(className)
+      if (index > -1) {
+        replacements.push(`$attrs[${JSON.stringify(className)}]`)
+        classNames.splice(index, 1)
       }
     })
-    if (externalClasses.length) {
+
+    if (classNames.length) {
+      addAttrs(el, [{
+        name: 'class',
+        value: classNames.join(' ')
+      }])
+    }
+
+    if (replacements.length) {
+      const dynamicClass = getAndRemoveAttr(el, ':class').val
+      if (dynamicClass) replacements.push(dynamicClass)
+
       addAttrs(el, [{
-        name: 'v-ex-classes',
-        value: JSON.stringify(externalClasses)
+        name: ':class',
+        value: `[${replacements.join(',')}]`
       }])
     }
   }
+
+  // 处理externalClasses多层透传
+  const isComponent = isComponentNode(el, options)
+  if (isComponent) {
+    options.externalClasses.forEach((classLikeAttrName) => {
+      let classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val
+      if (classLikeAttrValue) {
+        const classNames = classLikeAttrValue.split(/\s+/)
+        const replacements = []
+        options.externalClasses.forEach((className) => {
+          const index = classNames.indexOf(className)
+          if (index > -1) {
+            replacements.push(`$attrs[${JSON.stringify(className)}]`)
+            classNames.splice(index, 1)
+          }
+        })
+
+        if (classNames.length) {
+          replacements.unshift(JSON.stringify(classNames.join(' ')))
+        }
+
+        addAttrs(el, [{
+          name: ':' + classLikeAttrName,
+          value: `[${replacements.join(',')}].join(' ')`
+        }])
+      }
+    })
+  }
 }
 
 function processScoped (el, options) {
   if (options.hasScoped && isRealNode(el)) {
     const moduleId = options.moduleId
-    const rootModuleId = options.isComponent ? '' : 'mpx-app-scope' // 处理app全局样式对页面的影响
+    const rootModuleId = options.isComponent ? '' : MPX_APP_MODULE_ID // 处理app全局样式对页面的影响
     const staticClass = getAndRemoveAttr(el, 'class').val
     addAttrs(el, [{
       name: 'class',
@@ -1761,39 +1813,79 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processAliStyleClassHack (el, options) {
-  if (!isComponentNode(el, options)) return
-  ['style', 'class'].forEach((type) => {
-    let exp = getAndRemoveAttr(el, type).val
-    let typeName = 'mpx' + type.replace(/^./, (matched) => {
-      return matched.toUpperCase()
-    })
-    if (exp !== undefined) {
-      addAttrs(el, [{
-        name: typeName,
-        value: exp
-      }])
+function processAliEventHack (el, options, root) {
+  // 只处理组件根节点
+  if (!(options.isComponent && el === root && isRealNode(el))) {
+    return
+  }
+  const { proxyComponentEventsRules } = options
+  let fallThroughEvents = ['onTap']
+  // 判断当前文件是否在范围中
+  const filePath = options.filePath
+  for (let item of proxyComponentEventsRules) {
+    const {
+      include,
+      exclude
+    } = item || {}
+
+    if (matchCondition(filePath, {
+      include,
+      exclude
+    })) {
+      const eventsRaw = item.events
+      const events = Array.isArray(eventsRaw) ? eventsRaw : [eventsRaw]
+      fallThroughEvents = Array.from(new Set(fallThroughEvents.concat(events)))
+      break
     }
+  }
+
+  fallThroughEvents.forEach((type) => {
+    addAttrs(el, [{
+      name: type,
+      value: '__proxyEvent'
+    }])
   })
 }
 
+function processAliStyleClassHack (el, options, root) {
+  // 处理组件根节点
+  if (options.isComponent && el === root && isRealNode(el)) {
+    ['style', 'class'].forEach((type) => {
+      let exp = getAndRemoveAttr(el, type).val
+      let typeName = type === 'class' ? 'className' : type
+      let sep = type === 'style' ? ';' : ' '
+      let newValue = exp ? `{{${typeName}||''}}${sep}${exp}` : `{{${typeName}||''}}`
+
+      if (newValue !== undefined) {
+        addAttrs(el, [{
+          name: type,
+          value: newValue
+        }])
+      }
+    })
+  }
+}
+
 // 有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||''}}`
-      }
-    ])
+  if (options.isComponent) {
+    // 处理组件时
+    if (mode === 'wx' && options.hasVirtualHost) {
+      // wx组件注入virtualHost配置
+      !meta.options && (meta.options = {})
+      meta.options.virtualHost = true
+    }
+    if (mode === 'ali' && !options.hasVirtualHost) {
+      // ali组件根节点实体化
+      let rootView = createASTElement('view', [
+        {
+          name: 'class',
+          value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
+        }
+      ])
+      processElement(rootView, rootView, options, meta)
+      return rootView
+    }
   }
   return getTempNode()
 }
@@ -1801,7 +1893,10 @@ function getVirtualHostRoot (options, meta) {
 function processShow (el, options, root) {
   let show = getAndRemoveAttr(el, config[mode].directive.show).val
   if (mode === 'swan') show = wrapMustache(show)
-  if (options.isComponent && el.parent === root && isRealNode(el)) {
+  let processFlag = el.parent === root
+  // 当ali且未开启virtualHost时，mpxShow打到根节点上
+  if (mode === 'ali' && !options.hasVirtualHost) processFlag = el === root
+  if (options.isComponent && processFlag && isRealNode(el)) {
     if (show !== undefined) {
       show = `{{${parseMustache(show).result}&&mpxShow}}`
     } else {
@@ -1977,10 +2072,22 @@ function processElement (el, root, options, meta) {
     processComponentGenericsForWeb(el, options, meta)
     return
   }
+  if (mode === 'tenon') {
+    // 收集内建组件
+    processBuiltInComponents(el, meta)
+    // 预处理代码维度条件编译
+    processIfForWeb(el)
+    // processWebExternalClassesHack(el, options)
+    // processComponentGenericsForWeb(el, options, meta)
+    return
+  }
 
   const pass = isNative || processTemplate(el) || processingTemplate
 
-  processScoped(el, options)
+  // 仅ali平台需要scoped模拟样式隔离
+  if (mode === 'ali') {
+    processScoped(el, options)
+  }
 
   if (transAli) {
     processAliExternalClassesHack(el, options)
@@ -1996,9 +2103,9 @@ function processElement (el, root, options, meta) {
     processShow(el, options, root)
   }
 
-  // 当mode为ali不管是不是跨平台都需要进行此处理，以保障ali当中的refs相关增强能力正常运行
-  if (mode === 'ali') {
+  if (transAli) {
     processAliStyleClassHack(el, options, root)
+    processAliEventHack(el, options, root)
   }
 
   if (!pass) {
@@ -2011,7 +2118,7 @@ function processElement (el, root, options, meta) {
 
 function closeElement (el, meta) {
   postProcessAtMode(el)
-  if (mode === 'web') {
+  if (mode === 'web' || mode === 'tenon') {
     postProcessWxs(el, meta)
     // 处理代码维度条件编译移除死分支
     postProcessIf(el)
@@ -2059,14 +2166,16 @@ function postProcessComponentIs (el) {
     let tempNode
     if (el.for || el.if || el.elseif || el.else) {
       tempNode = createASTElement('block', [])
-      tempNode.for = el.for
-      tempNode.if = el.if
-      tempNode.elseif = el.elseif
-      tempNode.else = el.else
+      moveBaseDirective(tempNode, el)
     } else {
       tempNode = getTempNode()
     }
+    let range = []
+    if (el.attrsMap.range) {
+      range = getAndRemoveAttr(el, 'range').val.split(',')
+    }
     el.components.forEach(function (component) {
+      if (range.length > 0 && !range.includes(component)) return
       let newChild = createASTElement(component, cloneAttrsList(el.attrsList), tempNode)
       newChild.if = {
         raw: `{{${el.is} === ${stringify(component)}}}`,
@@ -2083,7 +2192,7 @@ function postProcessComponentIs (el) {
     if (!el.parent) {
       error$1('Dynamic component can not be the template root, considering wrapping it with <view> or <text> tag!')
     } else {
-      el = replaceNode(el, tempNode) || el
+      el = replaceNode(el, tempNode, true) || el
     }
   }
   return el
@@ -2118,7 +2227,7 @@ function serialize (root) {
           result += node.text
         }
       }
-      if (node.tag === 'wxs' && mode === 'web') {
+      if (node.tag === 'wxs' && (mode === 'web' || mode === 'tenon')) {
         return result
       }
       if (node.type === 1) {
@@ -2283,5 +2392,6 @@ module.exports = {
   makeAttrsMap,
   stringifyAttr,
   parseMustache,
-  stringifyWithResolveComputed
+  stringifyWithResolveComputed,
+  addAttrs
 }

package/lib/template-compiler/index.js

@@ -1,7 +1,7 @@
 const compiler = require('./compiler')
 const bindThis = require('./bind-this').transform
 const parseRequest = require('../utils/parse-request')
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const loaderUtils = require('loader-utils')
 
 module.exports = function (raw) {
@@ -24,7 +24,7 @@ module.exports = function (raw) {
   const hasComment = queryObj.hasComment
   const isNative = queryObj.isNative
   const hasScoped = queryObj.hasScoped
-  const moduleId = queryObj.moduleId
+  const moduleId = queryObj.moduleId || 'm' + mpx.pathHash(resourcePath)
 
   const warn = (msg) => {
     this.emitWarning(
@@ -38,7 +38,7 @@ module.exports = function (raw) {
     )
   }
 
-  const parsed = compiler.parse(raw, {
+  const { root: ast, meta } = compiler.parse(raw, {
     warn,
     error,
     usingComponents,
@@ -53,17 +53,16 @@ module.exports = function (raw) {
     externalClasses,
     hasScoped,
     moduleId,
-    filePath: this.resourcePath,
+    // 这里需传递resourcePath和wxsContentMap保持一致
+    filePath: resourcePath,
     i18n,
     checkUsingComponents: mpx.checkUsingComponents,
     globalComponents: Object.keys(mpx.usingComponents),
-    forceProxyEvent: matchCondition(this.resourcePath, mpx.forceProxyEventRules),
-    hasVirtualHost: matchCondition(this.resourcePath, mpx.autoVirtualHostRules)
+    forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
+    proxyComponentEventsRules: mpx.proxyComponentEventsRules
   })
 
-  let ast = parsed.root
-  let meta = parsed.meta
-
   if (meta.wxsContentMap) {
     for (let module in meta.wxsContentMap) {
       wxsContentMap[`${resourcePath}~${module}`] = meta.wxsContentMap[module]

package/lib/template-compiler/trans-dynamic-class-expr.js

@@ -1,27 +1,37 @@
-const babylon = require('babylon')
-const t = require('babel-types')
-const generate = require('babel-generator').default
-const dash2hump = require('../utils/hump-dash').dash2hump
+const babylon = require('@babel/parser')
+const t = require('@babel/types')
+const traverse = require('@babel/traverse').default
+const generate = require('@babel/generator').default
 
-module.exports = function transDynamicClassExpr (expr) {
-  expr = babylon.parseExpression(expr, {
-    plugins: [
-      'objectRestSpread'
-    ]
-  })
-  if (t.isObjectExpression(expr)) {
-    expr.properties.forEach((property) => {
-      if (t.isObjectProperty(property) && !property.computed) {
-        const propertyName = property.key.name || property.key.value
-        if (/-/.test(propertyName)) {
-          property.key = t.identifier(dash2hump(propertyName) + 'MpxDash')
-        } else {
-          property.key = t.identifier(propertyName)
-        }
+module.exports = function transDynamicClassExpr (expr, { error } = {}) {
+  try {
+    const ast = babylon.parse(expr, {
+      plugins: [
+        'objectRestSpread'
+      ]
+    })
+    traverse(ast, {
+      ObjectExpression (path) {
+        path.node.properties.forEach((property) => {
+          if (t.isObjectProperty(property) && !property.computed) {
+            const propertyName = property.key.name || property.key.value
+            if (/-/.test(propertyName)) {
+              if (/\$/.test(propertyName)) {
+                error && error(`Dynamic classname [${propertyName}] is not supported, which includes [-] char and [$] char at the same time.`)
+              } else {
+                property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
+              }
+            } else {
+              property.key = t.identifier(propertyName)
+            }
+          }
+        })
       }
     })
+    return generate(ast.program.body[0].expression, {
+      compact: true
+    }).code
+  } catch (e) {
+    return expr
   }
-  return generate(expr, {
-    compact: true
-  }).code
 }

package/lib/tenon/index.js

@@ -0,0 +1,105 @@
+const processJSON = require('./processJSON')
+const processScript = require('./processScript')
+const processStyles = require('./processStyles')
+const processTemplate = require('./processTemplate')
+
+const async = require('async')
+
+module.exports = function ({
+  mpx,
+  loaderContext,
+  isProduction,
+  parts,
+  ctorType,
+  filePath,
+  queryObj,
+  autoScope,
+  componentsMap,
+  vueContentCache,
+  moduleId,
+  callback
+}) {
+  const hasComment = parts.template && parts.template.attrs && parts.template.attrs.comments
+  const isNative = false
+  const mode = mpx.mode
+  const srcMode = mpx.srcMode
+  const env = mpx.env
+  const defs = mpx.defs
+  const resolveMode = mpx.resolveMode
+  const pagesMap = mpx.pagesMap
+  const projectRoot = mpx.projectRoot
+
+  let output = ''
+  let usingComponents = [].concat(Object.keys(mpx.usingComponents))
+
+  return async.waterfall([
+    (callback) => {
+      async.parallel([
+        (callback) => {
+          processTemplate(parts.template, {
+            hasComment,
+            isNative,
+            mode,
+            srcMode,
+            defs,
+            loaderContext,
+            moduleId,
+            ctorType,
+            usingComponents,
+            decodeHTMLText: mpx.decodeHTMLText,
+            externalClasses: mpx.externalClasses,
+            checkUsingComponents: mpx.checkUsingComponents
+          }, callback)
+        },
+        (callback) => {
+          processStyles(parts.styles, {
+            ctorType,
+            autoScope
+          }, callback)
+        },
+        (callback) => {
+          processJSON(parts.json, {
+            mode,
+            env,
+            defs,
+            resolveMode,
+            loaderContext,
+            pagesMap,
+            pathHash: mpx.pathHash,
+            componentsMap,
+            projectRoot
+          }, callback)
+        }
+      ], (err, res) => {
+        callback(err, res)
+      })
+    },
+    ([templateRes, stylesRes, jsonRes], callback) => {
+      output += templateRes.output
+      output += stylesRes.output
+      output += jsonRes.output
+      if (ctorType === 'app' && jsonRes.jsonObj.window && jsonRes.jsonObj.window.navigationBarTitleText) {
+        mpx.appTitle = jsonRes.jsonObj.window.navigationBarTitleText
+      }
+
+      processScript(parts.script, {
+        ctorType,
+        srcMode,
+        loaderContext,
+        isProduction,
+        projectRoot,
+        jsonConfig: jsonRes.jsonObj,
+        componentId: queryObj.componentId || '',
+        builtInComponentsMap: templateRes.builtInComponentsMap,
+        localComponentsMap: jsonRes.localComponentsMap,
+        localPagesMap: jsonRes.localPagesMap,
+        forceDisableBuiltInLoader: mpx.forceDisableBuiltInLoader
+      }, callback)
+    }
+  ], (err, scriptRes) => {
+    if (err) return callback(err)
+    output += scriptRes.output
+    vueContentCache.set(filePath, output)
+    callback(null, output)
+  })
+}