@mpxjs/webpack-plugin 2.6.114-alpha.4 → 2.6.114-alpha.7

package/lib/runtime/components/tenon/tenon-input.vue

@@ -83,7 +83,7 @@ export default {
   methods: {},
 };
 </script>
-<style lang="stylus">
+<style lang="stylus" scoped>
   .mpx-input
     cursor auto
     width 100%

package/lib/runtime/components/tenon/tenon-switch.vue

@@ -80,7 +80,7 @@ export default {
 };
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .mpx-switch-wrap
   .mpx-switch-label
     border-radius 16hm

package/lib/runtime/components/tenon/tenon-text-area.vue

@@ -51,7 +51,7 @@ export default {
   methods: {},
 };
 </script>
-<style lang="stylus">
+<style lang="stylus" scoped>
 .mpx-textarea
   font inherit
   cursor auto

package/lib/runtime/components/tenon/tenon-text.vue

@@ -55,7 +55,7 @@ export default {
   },
 };
 </script>
-<style lang="stylus">
+<style lang="stylus" scoped>
 .mpx-text
   user-select none
   &.selectable

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

@@ -1,5 +1,5 @@
 <script>
-  import getInnerListeners from './getInnerListeners'
+  import getInnerListeners, { extendEvent } from './getInnerListeners'
 
   export default {
     name: 'mpx-image',
@@ -23,6 +23,13 @@
     beforeCreate () {
       this.image = new Image()
       this.image.onload = (e) => {
+        extendEvent(e, {
+          detail: {
+            width: this.image.width,
+            height: this.image.height
+          }
+        })
+
         this.$emit('load', e)
       }
       this.image.onerror = (e) => {
@@ -38,14 +45,22 @@
       }
     },
     render (createElement) {
-      if (this.mode === 'widthFix') {
+      if (this.mode === 'widthFix' || this.mode === 'heightFix') {
+        let style
+        if (this.mode === 'widthFix') {
+           style = {
+             height: 'auto'
+           }
+        } else {
+          style = {
+            width: 'auto'
+          }
+        }
         const domProps = {}
         if (this.src) domProps.src = this.src
         return createElement('img', {
           domProps,
-          style: {
-            height: 'auto'
-          },
+          style,
           class: ['mpx-image'],
           on: getInnerListeners(this, { ignoredListeners: ['load', 'error'] })
         })

package/lib/runtime/components/web/mpx-movable-view.vue

@@ -85,6 +85,10 @@
       animation: {
         type: Boolean,
         default: true
+      },
+      speed: {
+        type: Number,
+        default: 1000
       }
     },
     watch: {
@@ -96,7 +100,7 @@
         if (newVal < this.bs.maxScrollX) {
           newVal = this.bs.maxScrollX
         }
-        this.bs.scrollTo(newVal, this.bs.y)
+        this.bs.scrollTo(newVal, this.bs.y, this.speed)
       },
       y (newVal) {
         this.source = ''
@@ -106,7 +110,7 @@
         if (newVal < this.bs.maxScrollY) {
           newVal = this.bs.maxScrollY
         }
-        this.bs.scrollTo(this.bs.x, newVal)
+        this.bs.scrollTo(this.bs.x, newVal, this.speed)
       },
       scaleValue (newVal) {
         this.isZooming = true

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

@@ -41,7 +41,9 @@
     },
     data () {
       return {
-        currentIndex: this.current
+        currentIndex: this.current,
+        currentChildLength: 0,
+        lastChildLength: 0
       }
     },
     computed: {
@@ -81,6 +83,9 @@
         }
       }
     },
+    updated () {
+      this.currentChildLength = this.$children && this.$children.length
+    },
     watch: {
       current (val) {
         if (this.bs) {
@@ -89,6 +94,15 @@
         }
         this.changeSource = ''
         this.goto(val)
+      },
+      currentChildLength(val) {
+        if (val < this.lastChildLength && val < this.currentIndex) {
+          this.goto(0, 0)
+        }
+        if (this.lastChildLength || (!this.lastChildLength && !this.autoplay)) {
+          this.bs && this.bs.refresh()
+        }
+        this.lastChildLength = val
       }
     },
     activated () {
@@ -167,10 +181,11 @@
       refresh () {
         this.bs && this.bs.refresh()
       },
-      goto (index) {
+      goto (index, time) {
         const x = this.vertical ? 0 : index
         const y = this.vertical ? index : 0
-        this.bs && this.bs.goToPage(x, y)
+        const speed = time === 0 ? 0 : this.duration
+        this.bs && this.bs.goToPage(x, y, speed)
       }
     },
     render (createElement) {

package/lib/runtime/i18n.wxs

@@ -6,7 +6,6 @@ function genRegExp (str, flags) {
   }
 }
 
-
 function likeArray (arr) {
   if (!__mpx_wxs__) {
     return Array.isArray(arr)
@@ -23,7 +22,6 @@ function isDef (v) {
   return v !== undefined && v !== null
 }
 
-
 var RE_TOKEN_LIST_VALUE = genRegExp('^[0-9]+')
 var RE_TOKEN_NAMED_VALUE = genRegExp('^[A-Za-z0-9_]+')
 
@@ -40,7 +38,10 @@ function parseMessage (format) {
     var char = format[position++]
     if (char === '{') {
       if (text) {
-        tokens.push({ type: 'text', value: text })
+        tokens.push({
+          type: 'text',
+          value: text
+        })
       }
 
       text = ''
@@ -56,7 +57,10 @@ function parseMessage (format) {
         : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)
           ? 'named'
           : 'unknown'
-      tokens.push({ value: sub, type: type })
+      tokens.push({
+        value: sub,
+        type: type
+      })
     } else if (char === '%') {
       // when found rails i18n syntax, skip text capture
       if (format[(position)] !== '{') {
@@ -67,7 +71,10 @@ function parseMessage (format) {
     }
   }
 
-  text && tokens.push({ type: 'text', value: text })
+  text && tokens.push({
+    type: 'text',
+    value: text
+  })
 
   return tokens
 }
@@ -263,19 +270,24 @@ function exist (messages, locale, key) {
 var messages = {}
 var dateTimeFormats = {}
 var numberFormats = {}
+var locale = 'zh-CN'
+
+function getLocale () {
+  return __mpx_locale__ || locale
+}
 
 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
 }
 
@@ -339,7 +351,15 @@ module.exports = {
 }
 
 if (!__mpx_wxs__) {
-  module.exports.__getMessages = getMessages
-  module.exports.__getDateTimeFormats = getDateTimeFormats
-  module.exports.__getNumberFormats = getNumberFormats
+  if (!global.i18n) {
+    global.i18n = {
+      locale: getLocale(),
+      version: 0
+    }
+    global.i18nMethods = Object.assign(module.exports, {
+      __getMessages: getMessages,
+      __getDateTimeFormats: getDateTimeFormats,
+      __getNumberFormats: getNumberFormats
+    })
+  }
 }

package/lib/runtime/optionProcessor.js

@@ -4,7 +4,7 @@ export default function processOption (
   option,
   ctorType,
   firstPage,
-  componentId,
+  outputPath,
   pageConfig,
   pagesMap,
   componentsMap,
@@ -85,6 +85,51 @@ export default function processOption (
       }
     })
 
+    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
+    })
+
     const routes = []
 
     for (const pagePath in pagesMap) {
@@ -339,8 +384,8 @@ registered in parent context!`)
     option.mixins = [mixin]
   }
 
-  if (componentId) {
-    option.componentPath = '/' + componentId
+  if (outputPath) {
+    option.componentPath = '/' + outputPath
   }
 
   return option

package/lib/selector.js

@@ -1,31 +1,50 @@
 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 ctorType = queryObj.ctorType
+  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,
     needMap: this.sourceMap,
     mode,
-    defs,
     env
   })
-  let part = parts[query.type] || {}
+  let part = parts[type]
   if (Array.isArray(part)) {
-    part = part[query.index] || {
-      content: ''
+    part = part[index]
+  }
+  if (!part) {
+    let content = ''
+    // 补全js内容
+    if (type === 'script') {
+      switch (ctorType) {
+        case 'app':
+          content += 'import {createApp} from "@mpxjs/core"\n' +
+            'createApp({})\n'
+          break
+        case 'page':
+          content += 'import {createPage} from "@mpxjs/core"\n' +
+            'createPage({})\n'
+          break
+        case 'component':
+          content += 'import {createComponent} from "@mpxjs/core"\n' +
+            'createComponent({})\n'
+      }
     }
+    part = { content }
   }
+  part = part || { content: '' }
   this.callback(null, part.content, part.map)
 }

package/lib/style-compiler/index.js

@@ -1,32 +1,26 @@
-const getMainCompilation = require('../utils/get-main-compilation')
 const postcss = require('postcss')
-const loaderUtils = require('loader-utils')
 const loadPostcssConfig = require('./load-postcss-config')
-const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../staticConfig')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
 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 { 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 defs = mpx.defs
   const { resourcePath, queryObj } = parseRequest(this.resource)
-  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
-  const componentsMap = mpx.componentsMap[packageName]
-  const pagesMap = mpx.pagesMap
-  const isApp = (!componentsMap[resourcePath] && !pagesMap[resourcePath])
-
+  const mpx = this.getMpx()
+  const id = queryObj.moduleId || queryObj.mid || 'm' + mpx.pathHash(resourcePath)
+  const appInfo = mpx.appInfo
+  const defs = mpx.defs
+  const mode = mpx.mode
+  const isApp = resourcePath === appInfo.resourcePath
   const transRpxRulesRaw = mpx.transRpxRules
-
   const transRpxRules = transRpxRulesRaw ? (Array.isArray(transRpxRulesRaw) ? transRpxRulesRaw : [transRpxRulesRaw]) : []
 
   const transRpxFn = mpx.webConfig && mpx.webConfig.transRpxFn
@@ -45,14 +39,12 @@ module.exports = function (css, map) {
       },
       config.options
     )
-    // ali环境处理host选择器
-    if (mpx.mode === 'ali') {
-      plugins.push(transSpecial({ id: loaderOptions.moduleId || loaderOptions.mid }))
-    }
-
-    if (loaderOptions.scoped) {
-      const moduleId = loaderOptions.moduleId || loaderOptions.mid
-      plugins.push(scopeId({ id: moduleId }))
+    // ali平台下处理scoped和host选择器
+    if (mode === 'ali') {
+      if (queryObj.scoped) {
+        plugins.push(scopeId({ id }))
+      }
+      plugins.push(transSpecial({ id }))
     }
 
     plugins.push(pluginCondStrip({
@@ -91,7 +83,7 @@ module.exports = function (css, map) {
       .process(css, options)
       .then(result => {
         // ali环境添加全局样式抹平root差异
-        if (mpx.mode === 'ali' && isApp) {
+        if (mode === 'ali' && isApp) {
           result.css += `\n.${MPX_ROOT_VIEW} { display: initial }\n.${MPX_APP_MODULE_ID} { line-height: normal }`
         }
         if (result.messages) {

package/lib/style-compiler/load-postcss-config.js

@@ -16,7 +16,9 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
       webpack: loaderContext,
       defs: inlineConfig.defs || {}
     }
-    loaded = load(ctx, config.path, { argv: false }).catch(err => {
+    loaded = load(ctx, config.path, {
+      loaders: { '.json': (_, content) => JSON.parse(content) }
+    }).catch(err => {
       // postcss-load-config throws error when no config file is found,
       // but for us it's optional. only emit other errors
       if (err.message.indexOf('No PostCSS Config found') >= 0) {

package/lib/style-compiler/plugins/conditional-strip.js

@@ -1,5 +1,3 @@
-const postcss = require('postcss')
-
 /**
  * 按平台条件编译CSS，用法如下：
  * @type {postcss.Plugin<any>}
@@ -44,7 +42,7 @@ const postcss = require('postcss')
 //     @mpx-endif
 //     */
 // `
-module.exports = postcss.plugin('conditional-strip', (options = {}) => {
+module.exports = (options = {}) => {
   const { defs } = options
 
   const defKeys = Object.keys(defs)
@@ -91,71 +89,76 @@ module.exports = postcss.plugin('conditional-strip', (options = {}) => {
     return parseCondition(/@mpx-elif[^(]*?\(([\s\S]*)\)/, content)
   }
 
-  return function (root, result) {
-    const condsStacks = []
-    const currentConds = []
-    let curDepth = -1
+  return {
+    postcssPlugin: 'conditional-strip',
+    Once (root) {
+      const condsStacks = []
+      const currentConds = []
+      let curDepth = -1
 
-    root.walk(node => {
-      let isKeyword = false
-      if (node.type === 'comment') {
-        const { text } = node
-        if (isIfStart(text)) {
-          isKeyword = true
-          const cond = parseIf(text)
-          curDepth++
-          const parentCond = currentConds[curDepth - 1]
-          if (parentCond && parentCond.shouldRemove) {
-            cond.shouldRemove = true
-          }
-          cond.children.push(node)
-          condsStacks.push({
-            if: cond
-          })
-          currentConds[curDepth] = cond
-        } else if (isElseIf(text)) {
-          isKeyword = true
-          const cond = parseElseIf(text)
-          const parentCond = currentConds[curDepth - 1]
-          if (parentCond && parentCond.shouldRemove) {
-            cond.shouldRemove = true
-          }
-          cond.children.push(node)
-          condsStacks[curDepth].elif = cond
-          currentConds[curDepth] = cond
-        } else if (isElse(text)) {
-          isKeyword = true
-          const curConds = condsStacks[curDepth]
-          const cond = {
-            shouldRemove: !(curConds.if.shouldRemove && (!curConds.elif || curConds.elif.shouldRemove)),
-            children: [node]
-          }
-          const parentCond = currentConds[curDepth - 1]
-          if (parentCond && parentCond.shouldRemove) {
-            cond.shouldRemove = true
-          }
-          condsStacks[curDepth].else = cond
-          currentConds[curDepth] = cond
-        } else if (isEndIf(text)) {
-          isKeyword = true
-          const curConds = condsStacks.pop()
-          Object.keys(curConds).forEach(k => {
-            curConds[k].children.forEach(node => {
-              node.remove()
+      root.walk(node => {
+        let isKeyword = false
+        if (node.type === 'comment') {
+          const { text } = node
+          if (isIfStart(text)) {
+            isKeyword = true
+            const cond = parseIf(text)
+            curDepth++
+            const parentCond = currentConds[curDepth - 1]
+            if (parentCond && parentCond.shouldRemove) {
+              cond.shouldRemove = true
+            }
+            cond.children.push(node)
+            condsStacks.push({
+              if: cond
             })
-          })
-          currentConds.pop()
-          curDepth--
-          node.remove()
+            currentConds[curDepth] = cond
+          } else if (isElseIf(text)) {
+            isKeyword = true
+            const cond = parseElseIf(text)
+            const parentCond = currentConds[curDepth - 1]
+            if (parentCond && parentCond.shouldRemove) {
+              cond.shouldRemove = true
+            }
+            cond.children.push(node)
+            condsStacks[curDepth].elif = cond
+            currentConds[curDepth] = cond
+          } else if (isElse(text)) {
+            isKeyword = true
+            const curConds = condsStacks[curDepth]
+            const cond = {
+              shouldRemove: !(curConds.if.shouldRemove && (!curConds.elif || curConds.elif.shouldRemove)),
+              children: [node]
+            }
+            const parentCond = currentConds[curDepth - 1]
+            if (parentCond && parentCond.shouldRemove) {
+              cond.shouldRemove = true
+            }
+            condsStacks[curDepth].else = cond
+            currentConds[curDepth] = cond
+          } else if (isEndIf(text)) {
+            isKeyword = true
+            const curConds = condsStacks.pop()
+            Object.keys(curConds).forEach(k => {
+              curConds[k].children.forEach(node => {
+                node.remove()
+              })
+            })
+            currentConds.pop()
+            curDepth--
+            node.remove()
+          }
         }
-      }
 
-      if (!isKeyword) {
-        const curCond = currentConds[curDepth]
-        if (curCond && curCond.shouldRemove) {
-          curCond.children.push(node)
+        if (!isKeyword) {
+          const curCond = currentConds[curDepth]
+          if (curCond && curCond.shouldRemove) {
+            curCond.children.push(node)
+          }
         }
-      }
-    })
+      })
+    }
   }
-})
+}
+
+module.exports.postcss = true