@mpxjs/webpack-plugin 2.7.0-beta.4 → 2.7.0-beta.8

package/lib/template-compiler/compiler.js

@@ -1,6 +1,7 @@
 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')
@@ -1710,31 +1711,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',
@@ -1757,17 +1798,33 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processAliStyleClassHack (el, options) {
-  if (!isComponentNode(el, options)) return
+function processAliStyleClassHack (el, options, root) {
+  let processor
+  // 处理组件标签
+  if (isComponentNode(el, options)) processor = ({ value, typeName }) => [typeName, value]
+  // 处理组件根节点
+  if (options.isComponent && el === root && isRealNode(el)) {
+    processor = ({ name, value, typeName }) => {
+      let sep = name === 'style' ? ';' : ' '
+      value = value ? `{{${typeName}||''}}${sep}${value}` : `{{${typeName}||''}}`
+      return [name, value]
+    }
+  }
+  // 非上述两种不处理
+  if (!processor) return
+  // 处理style、class
   ['style', 'class'].forEach((type) => {
     let exp = getAndRemoveAttr(el, type).val
-    let typeName = 'mpx' + type.replace(/^./, (matched) => {
-      return matched.toUpperCase()
+    let typeName = 'mpx' + type.replace(/^./, (matched) => matched.toUpperCase())
+    let [newName, newValue] = processor({
+      name: type,
+      value: exp,
+      typeName
     })
-    if (exp !== undefined) {
+    if (newValue !== undefined) {
       addAttrs(el, [{
-        name: typeName,
-        value: exp
+        name: newName,
+        value: newValue
       }])
     }
   })
@@ -1775,21 +1832,24 @@ function processAliStyleClassHack (el, options) {
 
 // 有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()
 }
@@ -1797,7 +1857,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 {
@@ -2279,5 +2342,6 @@ module.exports = {
   makeAttrsMap,
   stringifyAttr,
   parseMustache,
-  stringifyWithResolveComputed
+  stringifyWithResolveComputed,
+  addAttrs
 }

package/lib/template-compiler/index.js

@@ -38,7 +38,7 @@ module.exports = function (raw) {
     )
   }
 
-  const parsed = compiler.parse(raw, {
+  const { root: ast, meta } = compiler.parse(raw, {
     warn,
     error,
     usingComponents,
@@ -57,13 +57,10 @@ module.exports = function (raw) {
     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)
   })
 
-  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,6 +1,6 @@
-const babylon = require('babylon')
-const t = require('babel-types')
-const generate = require('babel-generator').default
+const babylon = require('@babel/parser')
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 const dash2hump = require('../utils/hump-dash').dash2hump
 
 module.exports = function transDynamicClassExpr (expr) {

package/lib/utils/const.js

@@ -3,5 +3,7 @@ module.exports = {
   MPX_DISABLE_EXTRACTOR_CACHE: 'mpx_disable_extractor_cache',
   DEFAULT_RESULT_SOURCE: '',
   RESOLVE_IGNORED_ERR: new Error('Resolve ignored!'),
-  JSON_JS_EXT: '.json.js'
+  JSON_JS_EXT: '.json.js',
+  MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
+  MPX_APP_MODULE_ID: 'mpx-app-scope' // app文件moduleId
 }

package/lib/web/processJSON.js

@@ -7,18 +7,29 @@ const toPosix = require('../utils/to-posix')
 const addQuery = require('../utils/add-query')
 const parseComponent = require('../parser')
 const getJSONContent = require('../utils/get-json-content')
-const isUrlRequest = require('../utils/is-url-request')
 const resolve = require('../utils/resolve')
+const createJSONHelper = require('../json-compiler/helper')
+const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 
-module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesMap, componentsMap, pagesEntryMap, projectRoot, pathHash }, rawCallback) {
+module.exports = function (json, {
+  loaderContext,
+  pagesMap,
+  componentsMap
+}, rawCallback) {
   const localPagesMap = {}
   const localComponentsMap = {}
-  const buildInfo = loaderContext._module.buildInfo
-
   let output = '/* json */\n'
   let jsonObj = {}
   let tabBarMap
   let tabBarStr
+  const mpx = loaderContext.getMpx()
+  const {
+    mode,
+    env,
+    projectRoot
+  } = mpx
+
   const context = loaderContext.context
 
   const emitWarning = (msg) => {
@@ -28,13 +39,31 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
   }
 
   const emitError = (msg) => {
-    this.emitError(
-      new Error('[json compiler][' + this.resource + ']: ' + msg)
+    loaderContext.emitError(
+      new Error('[json compiler][' + loaderContext.resource + ']: ' + msg)
     )
   }
 
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
 
+  const {
+    isUrlRequest,
+    urlToRequest,
+    processPage,
+    processComponent
+  } = createJSONHelper({
+    loaderContext,
+    emitWarning,
+    emitError,
+    customGetDynamicEntry (resource, type, outputPath, packageRoot) {
+      return {
+        resource,
+        outputPath: toPosix(path.join(packageRoot, outputPath)),
+        packageRoot
+      }
+    }
+  })
+
   const callback = (err) => {
     return rawCallback(err, {
       output,
@@ -75,7 +104,7 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
       tabBarStr = JSON.stringify(tabBar)
       tabBarStr = tabBarStr.replace(/"(iconPath|selectedIconPath)":"([^"]+)"/g, function (matched, $1, $2) {
         if (isUrlRequest($2, projectRoot)) {
-          return `"${$1}":require(${stringifyRequest(loaderUtils.urlToRequest($2, projectRoot))})`
+          return `"${$1}":require(${stringifyRequest(urlToRequest($2, projectRoot))})`
         }
         return matched
       })
@@ -85,15 +114,14 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
 
   const processPackages = (packages, context, callback) => {
     if (packages) {
-      async.forEach(packages, (packagePath, callback) => {
-        const parsed = parseRequest(packagePath)
-        const queryObj = parsed.queryObj
-        // readFile无法处理query
-        packagePath = parsed.resourcePath
+      async.each(packages, (packagePath, callback) => {
+        const { queryObj } = parseRequest(packagePath)
         async.waterfall([
           (callback) => {
             resolve(context, packagePath, loaderContext, (err, result) => {
-              callback(err, result)
+              if (err) return callback(err)
+              const { rawResourcePath } = parseRequest(result)
+              callback(err, rawResourcePath)
             })
           },
           (result, callback) => {
@@ -103,11 +131,10 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
             })
           },
           (result, content, callback) => {
-            const filePath = result
-            const extName = path.extname(filePath)
+            const extName = path.extname(result)
             if (extName === '.mpx' || extName === '.vue') {
               const parts = parseComponent(content, {
-                filePath,
+                filePath: result,
                 needMap: loaderContext.sourceMap,
                 mode,
                 env
@@ -138,12 +165,17 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
                   pages: content.pages,
                   ...queryObj
                 }
+
+                if (content.plugins) {
+                  subPackage.plugins = content.plugins
+                }
+
                 processSelfQueue.push((callback) => {
                   processSubPackage(subPackage, context, callback)
                 })
               } else {
                 processSelfQueue.push((callback) => {
-                  processPages(content.pages, '', '', context, callback)
+                  processPages(content.pages, context, '', callback)
                 })
               }
             }
@@ -158,77 +190,41 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
               callback()
             }
           }
-        ], callback)
+        ], (err) => {
+          callback(err === RESOLVE_IGNORED_ERR ? null : err)
+        })
       }, callback)
     } else {
       callback()
     }
   }
 
-  const getPageName = (resourcePath, ext) => {
-    const baseName = path.basename(resourcePath, ext)
-    return path.join('pages', baseName + pathHash(resourcePath), baseName)
-  }
+  const pageKeySet = new Set()
 
-  const processPages = (pages, srcRoot = '', tarRoot = '', context, callback) => {
+  const processPages = (pages, context, tarRoot = '', callback) => {
     if (pages) {
-      context = path.join(context, srcRoot)
-      async.forEach(pages, (page, callback) => {
-        let aliasPath = ''
-        if (typeof page !== 'string') {
-          aliasPath = page.path
-          page = page.src
-        }
-        if (!isUrlRequest(page, projectRoot)) return callback()
-        if (resolveMode === 'native') {
-          page = loaderUtils.urlToRequest(page, projectRoot)
-        }
-        resolve(context, page, loaderContext, (err, resource) => {
-          if (err) return callback(err)
+      async.each(pages, (page, callback) => {
+        processPage(page, context, tarRoot, (err, { resource, outputPath } = {}, { isFirst, key } = {}) => {
+          if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
+          if (pageKeySet.has(key)) return callback()
+          pageKeySet.add(key)
           const { resourcePath, queryObj } = parseRequest(resource)
-          const ext = path.extname(resourcePath)
-          // 获取pageName
-          let pageName
-          if (aliasPath) {
-            pageName = toPosix(path.join(tarRoot, aliasPath))
-            // 判断 key 存在重复情况直接报错
-            for (let key in pagesMap) {
-              if (pagesMap[key] === pageName && key !== resourcePath) {
-                emitError(`Current page [${resourcePath}] registers a conflict page path [${pageName}] with existed page [${key}], which is not allowed, please rename it!`)
-                return callback()
-              }
-            }
-          } else {
-            const relative = path.relative(context, resourcePath)
-            if (/^\./.test(relative)) {
-              // 如果当前page不存在于context中，对其进行重命名
-              pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
-              emitWarning(`Current page [${resourcePath}] is not in current pages directory [${context}], the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
-            } else {
-              pageName = toPosix(path.join(tarRoot, /^(.*?)(\.[^.]*)?$/.exec(relative)[1]))
-              // 如果当前page与已有page存在命名冲突，也进行重命名
-              for (let key in pagesMap) {
-                // 此处引入pagesEntryMap确保相同entry下路由路径重复注册才报错，不同entry下的路由路径重复则无影响
-                if (pagesMap[key] === pageName && key !== resourcePath && pagesEntryMap[key] === loaderContext.resourcePath) {
-                  const pageNameRaw = pageName
-                  pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
-                  emitWarning(`Current page [${resourcePath}] is registered with a conflict page path [${pageNameRaw}] which is already existed in system, the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
-                  break
-                }
-              }
+          if (localPagesMap[outputPath]) {
+            const { resourcePath: oldResourcePath } = parseRequest(localPagesMap[outputPath].resource)
+            if (oldResourcePath !== resourcePath) {
+              const oldOutputPath = outputPath
+              outputPath = mpx.getOutputPath(resourcePath, 'page', { conflictPath: outputPath })
+              emitWarning(new Error(`Current page [${resourcePath}] is registered with a conflict outputPath [${oldOutputPath}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
             }
           }
-          if (pagesMap[resourcePath]) {
-            emitWarning(`Current page [${resourcePath}] which is imported from [${loaderContext.resourcePath}] has been registered in pagesMap already, it will be ignored, please check it and remove the redundant page declaration!`)
-            return callback()
-          }
-          buildInfo.pagesMap = buildInfo.pagesMap || {}
-          buildInfo.pagesMap[resourcePath] = pagesMap[resourcePath] = pageName
-          pagesEntryMap[resourcePath] = loaderContext.resourcePath
-          localPagesMap[pageName] = {
-            resource: addQuery(resource, { page: true }),
+
+          pagesMap[resourcePath] = outputPath
+          loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'page', outputPath))
+
+          localPagesMap[outputPath] = {
+            resource: addQuery(resource, { isPage: true }),
             async: tarRoot || queryObj.async,
-            isFirst: queryObj.isFirst
+            isFirst
           }
           callback()
         })
@@ -240,10 +236,15 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
 
   const processSubPackage = (subPackage, context, callback) => {
     if (subPackage) {
+      if (typeof subPackage.root === 'string' && subPackage.root.startsWith('.')) {
+        emitError(`Current subpackage root [${subPackage.root}] is not allow starts with '.'`)
+        return callback()
+      }
       let tarRoot = subPackage.tarRoot || subPackage.root || ''
       let srcRoot = subPackage.srcRoot || subPackage.root || ''
       if (!tarRoot) return callback()
-      processPages(subPackage.pages, srcRoot, tarRoot, context, callback)
+      context = path.join(context, srcRoot)
+      processPages(subPackage.pages, context, tarRoot, callback)
     } else {
       callback()
     }
@@ -251,7 +252,7 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
 
   const processSubPackages = (subPackages, context, callback) => {
     if (subPackages) {
-      async.forEach(subPackages, (subPackage, callback) => {
+      async.each(subPackages, (subPackage, callback) => {
         processSubPackage(subPackage, context, callback)
       }, callback)
     } else {
@@ -261,48 +262,38 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
 
   const processComponents = (components, context, callback) => {
     if (components) {
-      async.forEachOf(components, (component, name, callback) => {
-        processComponent(component, name, context, callback)
+      async.eachOf(components, (component, name, callback) => {
+        processComponent(component, context, {}, (err, { resource, outputPath } = {}) => {
+          if (err === RESOLVE_IGNORED_ERR) {
+            return callback()
+          }
+          const { resourcePath, queryObj } = parseRequest(resource)
+          componentsMap[resourcePath] = outputPath
+          loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
+
+          localComponentsMap[name] = {
+            resource: addQuery(resource, {
+              isComponent: true,
+              outputPath
+            }),
+            async: queryObj.async
+          }
+          callback()
+        })
       }, callback)
     } else {
       callback()
     }
   }
 
-  const processComponent = (component, name, context, callback) => {
-    if (!isUrlRequest(component, projectRoot)) return callback()
-
-    if (resolveMode === 'native') {
-      component = loaderUtils.urlToRequest(component, projectRoot)
-    }
-
-    resolve(context, component, loaderContext, (err, resource) => {
-      if (err) return callback(err)
-      const { resourcePath, queryObj } = parseRequest(resource)
-      const parsed = path.parse(resourcePath)
-      const componentId = parsed.name + pathHash(resourcePath)
-
-      buildInfo.packageName = 'main'
-      buildInfo.componentsMap = buildInfo.componentsMap || {}
-      buildInfo.componentsMap[resourcePath] = componentsMap[resourcePath] = componentId
-
-      localComponentsMap[name] = {
-        resource: addQuery(resource, { component: true, componentId }),
-        async: queryObj.async
-      }
-      callback()
-    })
-  }
-
   const processGenerics = (generics, context, callback) => {
     if (generics) {
-      async.forEachOf(generics, (generic, name, callback) => {
-        if (generic.default) {
-          processComponent(generic.default, `${name}default`, context, callback)
-        } else {
-          callback()
-        }
-      }, callback)
+      const genericsComponents = {}
+      Object.keys(generics).forEach((name) => {
+        const generic = generics[name]
+        if (generic.default) genericsComponents[`${name}default`] = generic.default
+      })
+      processComponents(genericsComponents, context, callback)
     } else {
       callback()
     }
@@ -310,6 +301,7 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
 
   async.parallel([
     (callback) => {
+      // 添加首页标识
       if (jsonObj.pages && jsonObj.pages[0]) {
         if (typeof jsonObj.pages[0] !== 'string') {
           jsonObj.pages[0].src = addQuery(jsonObj.pages[0].src, { isFirst: true })
@@ -317,7 +309,7 @@ module.exports = function (json, { mode, env, loaderContext, resolveMode, pagesM
           jsonObj.pages[0] = addQuery(jsonObj.pages[0], { isFirst: true })
         }
       }
-      processPages(jsonObj.pages, '', '', context, callback)
+      processPages(jsonObj.pages, context, '', callback)
     },
     (callback) => {
       processComponents(jsonObj.usingComponents, context, callback)