@mpxjs/webpack-plugin 2.7.52 → 2.7.54

package/lib/dependencies/DynamicEntryDependency.js

@@ -73,13 +73,20 @@ class DynamicEntryDependency extends NullDependency {
           resource = addQuery(resource, { packageRoot }, true)
         }
 
-        const key = resource + filename
-        let addEntryPromise
+        const key = [resource, filename].join('|')
 
         if (alreadyOutputted) {
-          addEntryPromise = mpx.addEntryPromiseMap.get(key) || Promise.resolve()
+          const addEntryPromise = mpx.addEntryPromiseMap.get(key)
+          if (addEntryPromise) {
+            addEntryPromise.then(entryModule => {
+              // 构建entry依赖图，针对alreadyOutputted的entry也需要记录
+              originEntryNode.addChild(mpx.getEntryNode(entryModule, entryType))
+            })
+          }
+          // alreadyOutputted时直接返回，避免存在模块循环引用时死循环
+          return callback(null, { resultPath })
         } else {
-          addEntryPromise = new Promise((resolve, reject) => {
+          const addEntryPromise = new Promise((resolve, reject) => {
             mpx.addEntry(resource, filename, (err, entryModule) => {
               if (err) return reject(err)
               if (entryType === 'export') {
@@ -88,15 +95,15 @@ class DynamicEntryDependency extends NullDependency {
               resolve(entryModule)
             })
           })
+          addEntryPromise
+            .then(entryModule => {
+              originEntryNode.addChild(mpx.getEntryNode(entryModule, entryType))
+              callback(null, { resultPath })
+            })
+            .catch(err => callback(err))
+
           mpx.addEntryPromiseMap.set(key, addEntryPromise)
         }
-
-        addEntryPromise
-          .then(entryModule => {
-            if (entryModule) originEntryNode.addChild(mpx.getEntryNode(entryModule, entryType))
-            callback(null, { resultPath })
-          })
-          .catch(err => callback(err))
       }
     ], callback)
   }

package/lib/extractor.js

@@ -62,7 +62,8 @@ module.exports.pitch = async function (remainingRequest) {
 
   const extractedInfo = {
     content,
-    index
+    // isStatic时不需要关注引用索引
+    index: isStatic ? 0 : index
   }
 
   this.emitFile(file, '', undefined, {

package/lib/index.js

@@ -44,7 +44,7 @@ const { matchCondition } = require('./utils/match-condition')
 const { preProcessDefs } = require('./utils/index')
 const config = require('./config')
 const hash = require('hash-sum')
-const wxssLoaderPath = normalize.lib('wxss/loader')
+const wxssLoaderPath = normalize.lib('wxss/index')
 const wxmlLoaderPath = normalize.lib('wxml/loader')
 const wxsLoaderPath = normalize.lib('wxs/loader')
 const styleCompilerPath = normalize.lib('style-compiler/index')
@@ -147,7 +147,7 @@ class MpxWebpackPlugin {
     options.auditResource = options.auditResource || false
     options.decodeHTMLText = options.decodeHTMLText || false
     options.i18n = options.i18n || null
-    options.checkUsingComponents = options.checkUsingComponents || false
+    options.checkUsingComponentsRules = options.checkUsingComponentsRules || (options.checkUsingComponents ? { include: () => true } : { exclude: () => true })
     options.reportSize = options.reportSize || null
     options.pathHashMode = options.pathHashMode || 'absolute'
     options.forceDisableBuiltInLoader = options.forceDisableBuiltInLoader || false
@@ -196,7 +196,7 @@ class MpxWebpackPlugin {
 
   static wxssLoader (options) {
     return {
-      loader: normalize.lib('wxss/loader'),
+      loader: normalize.lib('wxss/index'),
       options
     }
   }
@@ -566,7 +566,7 @@ class MpxWebpackPlugin {
           tabBarMap: {},
           defs: preProcessDefs(this.options.defs),
           i18n: this.options.i18n,
-          checkUsingComponents: this.options.checkUsingComponents,
+          checkUsingComponentsRules: this.options.checkUsingComponentsRules,
           forceDisableBuiltInLoader: this.options.forceDisableBuiltInLoader,
           appTitle: 'Mpx homepage',
           attributes: this.options.attributes,

package/lib/loader.js

@@ -65,6 +65,10 @@ module.exports = function (content) {
     this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
   }
 
+  if (ctorType === 'app') {
+    const appName = getEntryName(this)
+    this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+  }
   const loaderContext = this
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
@@ -100,6 +104,7 @@ module.exports = function (content) {
       const isNative = false
 
       let usingComponents = [].concat(Object.keys(mpx.usingComponents))
+      let componentPlaceholder = []
 
       let componentGenerics = {}
 
@@ -110,6 +115,9 @@ module.exports = function (content) {
             fixUsingComponent(ret.usingComponents, mode)
             usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
           }
+          if (ret.componentPlaceholder) {
+            componentPlaceholder = componentPlaceholder.concat(Object.values(ret.componentPlaceholder))
+          }
           if (ret.componentGenerics) {
             componentGenerics = Object.assign({}, ret.componentGenerics)
           }
@@ -218,11 +226,6 @@ module.exports = function (content) {
         return callback(new Error(`Current ${ctorType} [${this.resourcePath}] is issued by [${issuer.resource}], which is not allowed!`))
       }
 
-      if (ctorType === 'app') {
-        const appName = getEntryName(this)
-        this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
-      }
-
       // 注入模块id及资源路径
       output += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       if (!isProduction) {
@@ -279,7 +282,8 @@ module.exports = function (content) {
           hasComment,
           isNative,
           moduleId,
-          usingComponents
+          usingComponents,
+          componentPlaceholder
           // 添加babel处理渲染函数中可能包含的...展开运算符
           // 由于...运算符应用范围极小以及babel成本极高，先关闭此特性后续看情况打开
           // needBabel: true

package/lib/runtime/animation.js

@@ -0,0 +1,59 @@
+module.exports = function (el, binding) {
+  const newActions = binding && binding.value && binding.value.actions
+  if (el.actions === newActions) {
+    Promise.resolve().then(() => {
+      Object.assign(el.style, el.lastDynamicStyle)
+    })
+    return
+  }
+  el.actions = newActions
+  if (typeof el.setAnimation === 'function') {
+    el.removeEventListener('transitionend', el.setAnimation, false)
+    el.setAnimation = undefined
+  }
+  el.dynamicStyleQueue = []
+  el.lastDynamicStyle = undefined
+  if (Array.isArray(newActions) && newActions.length) {
+    newActions.forEach((item) => {
+      const property = []
+      const { animates, option } = item
+      // 存储动画需要改变的样式属性
+      const dynamicStyle = {
+        transform: ''
+      }
+      animates.forEach((itemAnimation) => {
+        switch (itemAnimation.type) {
+          case 'style':
+            const [key, value] = itemAnimation.args
+            dynamicStyle[key] = value
+            property.push(key)
+            break
+          default:
+            dynamicStyle.transform += `${itemAnimation.type}(${itemAnimation.args}) `
+            if (!property.includes('transform')) {
+              property.push('transform')
+            }
+        }
+      })
+      Object.assign(dynamicStyle, {
+        transition: `${parseInt(option.duration)}ms ${option.timingFunction} ${parseInt(option.delay)}ms`,
+        transitionProperty: `${property}`,
+        transformOrigin: option.transformOrigin
+      })
+      el.dynamicStyleQueue.push(dynamicStyle)
+    })
+    el.setAnimation = function () {
+      if (!el.dynamicStyleQueue.length) {
+        el.removeEventListener('transitionend', el.setAnimation, false)
+        return
+      }
+      const dynamicStyle = el.dynamicStyleQueue.shift()
+      Object.assign(el.style, dynamicStyle)
+      el.lastDynamicStyle = dynamicStyle
+    }
+    // 首次动画属性设置
+    setTimeout(el.setAnimation, 0)
+    // 在transitionend事件内设置动画样式
+    el.addEventListener('transitionend', el.setAnimation, false)
+  }
+}

package/lib/runtime/components/web/mpx-picker.vue

@@ -18,8 +18,8 @@
                 <div class="wheel" v-for="(data, index) in pickerData" :key="index">
                   <ul class="wheel-scroll">
                     <li
-                            v-for="item in data" :key="item"
-                            class="wheel-item">{{item}}
+                      v-for="item in data" :key="item"
+                      class="wheel-item">{{item}}
                     </li>
                   </ul>
                 </div>
@@ -39,10 +39,10 @@
   import { type } from './util'
   import { getCustomEvent } from './getInnerListeners'
 
-  const startYear = 1970
+  const startYear = 1900
   const modeOptions = {
     time: [23, 59],
-    date: [130, 11, 30]
+    date: [200, 11, 30]
   }
 
   BScroll.use(Wheel)
@@ -73,7 +73,7 @@
     let months = []
     let days = []
 
-    for (let i = 0; i <= 130; i++) {
+    for (let i = 0; i <= 200; i++) {
       years.push(`${startYear + i}年`)
     }
     if (fields === 'year') {
@@ -127,11 +127,17 @@
           }
         }
       },
-      start: String,
-      end: String,
+      start: {
+        type: String,
+        default: '1970-01-01'
+      },
+      end: {
+        type: String,
+        default: '2100-01-01'
+      },
       fields: {
         type: String,
-        value: 'day'
+        default: 'day'
       }
     },
     data () {

package/lib/runtime/optionProcessor.js

@@ -1,4 +1,6 @@
 import { inBrowser } from '../utils/env'
+import transRpxStyle from './transRpxStyle'
+import animation from './animation'
 
 export default function processOption (
   option,
@@ -12,6 +14,7 @@ export default function processOption (
   componentGenerics,
   genericsInfo,
   mixin,
+  hasApp,
   Vue,
   VueRouter,
   i18n
@@ -26,108 +29,11 @@ export default function processOption (
     }
 
     Vue.directive('animation', (el, binding) => {
-      const newActions = binding && binding.value && binding.value.actions
-      if (el.actions === newActions) {
-        Promise.resolve().then(() => {
-          Object.assign(el.style, el.lastDynamicStyle)
-        })
-        return
-      }
-      el.actions = newActions
-      if (typeof el.setAnimation === 'function') {
-        el.removeEventListener('transitionend', el.setAnimation, false)
-        el.setAnimation = undefined
-      }
-      el.dynamicStyleQueue = []
-      el.lastDynamicStyle = undefined
-      if (Array.isArray(newActions) && newActions.length) {
-        newActions.forEach((item) => {
-          const property = []
-          const { animates, option } = item
-          // 存储动画需要改变的样式属性
-          const dynamicStyle = {
-            transform: ''
-          }
-          animates.forEach((itemAnimation) => {
-            switch (itemAnimation.type) {
-              case 'style':
-                const [key, value] = itemAnimation.args
-                dynamicStyle[key] = value
-                property.push(key)
-                break
-              default:
-                dynamicStyle.transform += `${itemAnimation.type}(${itemAnimation.args}) `
-                if (!property.includes('transform')) {
-                  property.push('transform')
-                }
-            }
-          })
-          Object.assign(dynamicStyle, {
-            transition: `${parseInt(option.duration)}ms ${option.timingFunction} ${parseInt(option.delay)}ms`,
-            transitionProperty: `${property}`,
-            transformOrigin: option.transformOrigin
-          })
-          el.dynamicStyleQueue.push(dynamicStyle)
-        })
-        el.setAnimation = function () {
-          if (!el.dynamicStyleQueue.length) {
-            el.removeEventListener('transitionend', el.setAnimation, false)
-            return
-          }
-          const dynamicStyle = el.dynamicStyleQueue.shift()
-          Object.assign(el.style, dynamicStyle)
-          el.lastDynamicStyle = dynamicStyle
-        }
-        // 首次动画属性设置
-        setTimeout(el.setAnimation, 0)
-        // 在transitionend事件内设置动画样式
-        el.addEventListener('transitionend', el.setAnimation, false)
-      }
+      return animation(el, binding)
     })
 
     Vue.filter('transRpxStyle', style => {
-      const defaultTransRpxFn = function (match, $1) {
-        const rpx2vwRatio = +(100 / 750).toFixed(8)
-        return '' + ($1 * rpx2vwRatio) + 'vw'
-      }
-      const transRpxFn = global.__mpxTransRpxFn || defaultTransRpxFn
-      const parsedStyleObj = {}
-      const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
-      const parseStyleText = (cssText) => {
-        const listDelimiter = /;(?![^(]*\))/g
-        const propertyDelimiter = /:(.+)/
-        if (typeof cssText === 'string') {
-          cssText.split(listDelimiter).forEach((item) => {
-            if (item) {
-              var tmp = item.split(propertyDelimiter)
-              tmp.length > 1 && (parsedStyleObj[tmp[0].trim()] = tmp[1].trim())
-            }
-          })
-        } else if (typeof cssText === 'object') {
-          if (Array.isArray(cssText)) {
-            cssText.forEach(cssItem => {
-              parseStyleText(cssItem)
-            })
-          } else {
-            Object.assign(parsedStyleObj, cssText)
-          }
-        }
-      }
-      const transRpxStyleFn = (val) => {
-        if (typeof val === 'string' && val.indexOf('rpx') > 0) {
-          return val.replace(rpxRegExpG, transRpxFn).replace(/"/g, '')
-        }
-        return val
-      }
-      if (style) {
-        style.forEach(item => {
-          parseStyleText(item)
-          for (let key in parsedStyleObj) {
-            parsedStyleObj[key] = transRpxStyleFn(parsedStyleObj[key])
-          }
-        })
-      }
-      return parsedStyleObj
+      return transRpxStyle(style)
     })
 
     const routes = []
@@ -376,6 +282,10 @@ registered in parent context!`)
     if (ctorType === 'page') {
       option.__mpxPageConfig = Object.assign({}, global.__mpxPageConfig, pageConfig)
     }
+    if (!hasApp) {
+      option.directives = { animation }
+      option.filters = { transRpxStyle }
+    }
   }
 
   if (option.mixins) {
@@ -387,7 +297,6 @@ registered in parent context!`)
   if (outputPath) {
     option.componentPath = '/' + outputPath
   }
-
   return option
 }
 

package/lib/runtime/transRpxStyle.js

@@ -0,0 +1,44 @@
+module.exports = function (style) {
+  const defaultTransRpxFn = function (match, $1) {
+    const rpx2vwRatio = +(100 / 750).toFixed(8)
+    return '' + ($1 * rpx2vwRatio) + 'vw'
+  }
+  const transRpxFn = global.__mpxTransRpxFn || defaultTransRpxFn
+  const parsedStyleObj = {}
+  const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
+  const parseStyleText = (cssText) => {
+    const listDelimiter = /;(?![^(]*\))/g
+    const propertyDelimiter = /:(.+)/
+    if (typeof cssText === 'string') {
+      cssText.split(listDelimiter).forEach((item) => {
+        if (item) {
+          var tmp = item.split(propertyDelimiter)
+          tmp.length > 1 && (parsedStyleObj[tmp[0].trim()] = tmp[1].trim())
+        }
+      })
+    } else if (typeof cssText === 'object') {
+      if (Array.isArray(cssText)) {
+        cssText.forEach(cssItem => {
+          parseStyleText(cssItem)
+        })
+      } else {
+        Object.assign(parsedStyleObj, cssText)
+      }
+    }
+  }
+  const transRpxStyleFn = (val) => {
+    if (typeof val === 'string' && val.indexOf('rpx') > 0) {
+      return val.replace(rpxRegExpG, transRpxFn).replace(/"/g, '')
+    }
+    return val
+  }
+  if (style) {
+    style.forEach(item => {
+      parseStyleText(item)
+      for (let key in parsedStyleObj) {
+        parsedStyleObj[key] = transRpxStyleFn(parsedStyleObj[key])
+      }
+    })
+  }
+  return parsedStyleObj
+}

package/lib/template-compiler/compiler.js

@@ -835,10 +835,14 @@ function parse (template, options) {
     Array.isArray(val.errorArray) && val.errorArray.forEach(item => error$1(item))
   })
 
-  if (!tagNames.has('component')) {
+  if (!tagNames.has('component') && options.checkUsingComponents) {
+    const arr = []
     options.usingComponents.forEach((item) => {
-      if (!tagNames.has(item) && !options.globalComponents.includes(item) && options.checkUsingComponents) warn$1(`${item}注册了，但是未被对应的模板引用，建议删除！`)
+      if (!tagNames.has(item) && !options.globalComponents.includes(item) && !options.componentPlaceholder.includes(item)) {
+        arr.push(item)
+      }
     })
+    arr.length && warn$1(`\n ${options.filePath} \n 组件 ${arr.join(' | ')} 注册了，但是未被对应的模板引用，建议删除！`)
   }
 
   return {

package/lib/template-compiler/index.js

@@ -21,6 +21,7 @@ module.exports = function (raw) {
   const componentsMap = mpx.componentsMap[packageName]
   const wxsContentMap = mpx.wxsContentMap
   const usingComponents = queryObj.usingComponents || []
+  const componentPlaceholder = queryObj.componentPlaceholder || []
   const hasComment = queryObj.hasComment
   const isNative = queryObj.isNative
   const hasScoped = queryObj.hasScoped
@@ -42,6 +43,7 @@ module.exports = function (raw) {
     warn,
     error,
     usingComponents,
+    componentPlaceholder,
     hasComment,
     isNative,
     isComponent: !!componentsMap[resourcePath],
@@ -56,7 +58,7 @@ module.exports = function (raw) {
     // 这里需传递resourcePath和wxsContentMap保持一致
     filePath: resourcePath,
     i18n,
-    checkUsingComponents: mpx.checkUsingComponents,
+    checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
     globalComponents: Object.keys(mpx.usingComponents),
     forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
     hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)

package/lib/web/processJSON.js

@@ -263,9 +263,7 @@ module.exports = function (json, {
     if (components) {
       async.eachOf(components, (component, name, callback) => {
         processComponent(component, context, {}, (err, { resource, outputPath } = {}) => {
-          if (err === RESOLVE_IGNORED_ERR) {
-            return callback()
-          }
+          if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
           const { resourcePath, queryObj } = parseRequest(resource)
           componentsMap[resourcePath] = outputPath
           loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))

package/lib/web/processScript.js

@@ -48,9 +48,9 @@ module.exports = function (script, {
   const {
     i18n,
     projectRoot,
-    webConfig
+    webConfig,
+    appInfo
   } = loaderContext.getMpx()
-
   const { getRequire } = createHelpers(loaderContext)
   const tabBar = jsonConfig.tabBar
 
@@ -153,6 +153,10 @@ module.exports = function (script, {
   \n`
         }
       }
+      let hasApp = true
+      if (!appInfo.name) {
+        hasApp = false
+      }
       // 注入wxs模块
       content += '  const wxsModules = {}\n'
       if (wxsModuleMap) {
@@ -238,7 +242,6 @@ module.exports = function (script, {
   // @ts-ignore
   global.__tabBarPagesMap = ${shallowStringify(tabBarPagesMap)}\n`
       }
-
       // 配置平台转换通过createFactory在core中convertor中定义和进行
       // 通过processOption进行组件注册和路由注入
       content += `  export default processOption(
@@ -254,7 +257,8 @@ module.exports = function (script, {
     ${JSON.stringify(tabBarMap)},
     ${JSON.stringify(componentGenerics)},
     ${JSON.stringify(genericsInfo)},
-    getWxsMixin(wxsModules)`
+    getWxsMixin(wxsModules),
+    ${hasApp}`
       if (ctorType === 'app') {
         content += `,
     Vue,

package/lib/wxss/CssSyntaxError.js

@@ -0,0 +1,29 @@
+module.exports = class CssSyntaxError extends Error {
+  constructor (error) {
+    super(error)
+
+    const { reason, line, column, file } = error
+
+    this.name = 'CssSyntaxError'
+
+    // Based on https://github.com/postcss/postcss/blob/master/lib/css-syntax-error.es6#L132
+    // We don't need `plugin` and `file` properties.
+    this.message = `${this.name}\n\n`
+
+    if (typeof line !== 'undefined') {
+      this.message += `(${line}:${column}) `
+    }
+
+    this.message += file ? `${file} ` : '<css input> '
+    this.message += `${reason}`
+
+    const code = error.showSourceCode()
+
+    if (code) {
+      this.message += `\n\n${code}\n`
+    }
+
+    // We don't need stack https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#31-dont-show-js-stack-for-csssyntaxerror
+    this.stack = false
+  }
+}

package/lib/wxss/Warning.js

@@ -0,0 +1,22 @@
+module.exports = class Warning extends Error {
+  constructor (warning) {
+    super(warning)
+
+    const { text, line, column } = warning
+
+    this.name = 'Warning'
+
+    // Based on https://github.com/postcss/postcss/blob/master/lib/warning.es6#L74
+    // We don't need `plugin` properties.
+    this.message = `${this.name}\n\n`
+
+    if (typeof line !== 'undefined') {
+      this.message += `(${line}:${column}) `
+    }
+
+    this.message += `${text}`
+
+    // We don't need stack https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#31-dont-show-js-stack-for-csssyntaxerror
+    this.stack = false
+  }
+}

package/lib/wxss/index.js

@@ -0,0 +1,5 @@
+const loader = require('./loader')
+
+module.exports = loader
+
+module.exports.defaultGetLocalIdent = require('./utils').defaultGetLocalIdent