@mpxjs/webpack-plugin 2.7.53 → 2.7.55

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')
@@ -196,7 +196,7 @@ class MpxWebpackPlugin {
 
   static wxssLoader (options) {
     return {
-      loader: normalize.lib('wxss/loader'),
+      loader: normalize.lib('wxss/index'),
       options
     }
   }

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'
@@ -222,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) {

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/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/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