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

package/lib/runtime/components/web/getInnerListeners.js

@@ -1,4 +1,5 @@
 import { isEmptyObject } from './util'
+const isTouchDevice = 'ontouchstart' in document.documentElement
 
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
@@ -54,58 +55,63 @@ function processTap (listeners, context) {
   })
   if (isEmptyObject(listenerMap)) return
   context.__mpxTapInfo = context.__mpxTapInfo || {}
-  let events = {
-    touchstart (e) {
-      context.__mpxTapInfo.detail = {
-        x: e.changedTouches[0].pageX,
-        y: e.changedTouches[0].pageY
-      }
-      context.__mpxTapInfo.startTimer = null
-      context.__mpxTapInfo.needTap = true
-      context.__mpxTapInfo.hadTouch = true
-      if (listenerMap.longpress || listenerMap.longtap) {
-        context.__mpxTapInfo.startTimer = setTimeout(() => {
+  let events
+  if (isTouchDevice) {
+    events = {
+      touchstart (e) {
+        context.__mpxTapInfo.detail = {
+          x: e.changedTouches[0].pageX,
+          y: e.changedTouches[0].pageY
+        }
+        context.__mpxTapInfo.startTimer = null
+        context.__mpxTapInfo.needTap = true
+        if (listenerMap.longpress || listenerMap.longtap) {
+          context.__mpxTapInfo.startTimer = setTimeout(() => {
+            context.__mpxTapInfo.needTap = false
+            if (listenerMap.longpress) {
+              const re = inheritEvent('longpress', e, context.__mpxTapInfo.detail)
+              context.$emit('longpress', re)
+            }
+            if (listenerMap.longtap) {
+              const re = inheritEvent('longtap', e, context.__mpxTapInfo.detail)
+              context.$emit('longtap', re)
+            }
+          }, 350)
+        }
+      },
+      touchmove (e) {
+        const tapDetailInfo = context.__mpxTapInfo.detail || {}
+        const currentPageX = e.changedTouches[0].pageX
+        const currentPageY = e.changedTouches[0].pageY
+        if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
           context.__mpxTapInfo.needTap = false
-          if (listenerMap.longpress) {
-            const re = inheritEvent('longpress', e, context.__mpxTapInfo.detail)
-            context.$emit('longpress', re)
-          }
-          if (listenerMap.longtap) {
-            const re = inheritEvent('longtap', e, context.__mpxTapInfo.detail)
-            context.$emit('longtap', re)
-          }
-        }, 350)
-      }
-    },
-    touchmove (e) {
-      const tapDetailInfo = context.__mpxTapInfo.detail || {}
-      const currentPageX = e.changedTouches[0].pageX
-      const currentPageY = e.changedTouches[0].pageY
-      if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
-        context.__mpxTapInfo.needTap = false
+          context.__mpxTapInfo.startTimer && clearTimeout(context.__mpxTapInfo.startTimer)
+          context.__mpxTapInfo.startTimer = null
+        }
+      },
+      touchend (e) {
         context.__mpxTapInfo.startTimer && clearTimeout(context.__mpxTapInfo.startTimer)
-        context.__mpxTapInfo.startTimer = null
-      }
-    },
-    touchend (e) {
-      context.__mpxTapInfo.startTimer && clearTimeout(context.__mpxTapInfo.startTimer)
-      if (listenerMap.tap && context.__mpxTapInfo.needTap) {
-        const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
-        context.$emit('tap', re)
+        if (listenerMap.tap && context.__mpxTapInfo.needTap) {
+          const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
+          context.$emit('tap', re)
+        }
       }
-    },
-    click (e) {
-      if (listenerMap.tap && !context.__mpxTapInfo.hadTouch) {
-        context.__mpxTapInfo.detail = {
-          x: e.pageX,
-          y: e.pageY
+    }
+  } else {
+    events = {
+      click (e) {
+        if (listenerMap.tap) {
+          context.__mpxTapInfo.detail = {
+            x: e.pageX,
+            y: e.pageY
+          }
+          const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
+          context.$emit('tap', re)
         }
-        const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
-        context.$emit('tap', re)
       }
-      context.__mpxTapInfo.hadTouch = false
     }
   }
+
   mergeListeners(listeners, events, {
     force: true
   })

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-keep-alive.vue

@@ -1,5 +1,6 @@
 <script>
   import { inBrowser } from '../../../utils/env'
+
   function isDef (v) {
     return v !== undefined && v !== null
   }
@@ -30,7 +31,7 @@
 
   function getVnodeKey (vnode) {
     if (vnode && vnode.componentOptions) {
-      return vnode.key || vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? ('::' + (vnode.componentOptions.tag)) : '')
+      return vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? ('::' + (vnode.componentOptions.tag)) : '')
     }
   }
 
@@ -73,6 +74,8 @@
             const current = stack[i - 1]
             if (current.vnode && current.vnodeKey === vnodeKey && current.vnode.componentInstance) {
               vnode.componentInstance = current.vnode.componentInstance
+              // 避免组件实例复用但是vnode.key不一致带来的bad case
+              vnode.key = current.vnode.key
               break
             }
           }

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

@@ -36,11 +36,14 @@
       easingFunction: {
         type: String,
         default: 'default'
-      }
+      },
+      scrollOptions: Object
     },
     data () {
       return {
-        currentIndex: this.current
+        currentIndex: this.current,
+        currentChildLength: 0,
+        lastChildLength: 0
       }
     },
     computed: {
@@ -80,6 +83,9 @@
         }
       }
     },
+    updated () {
+      this.currentChildLength = this.$children && this.$children.length
+    },
     watch: {
       current (val) {
         if (this.bs) {
@@ -88,13 +94,32 @@
         }
         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 () {
+      if (this.bs && this.autoplay) {
+        this.bs.startPlay()
+      }
+    },
+    deactivated () {
+      if (this.bs && this.autoplay) {
+        this.bs.pausePlay()
       }
     },
     beforeCreate () {
       this.itemIds = []
     },
     mounted () {
-      this.bs = new BScroll(this.$refs.wrapper, {
+      const originBsOptions = {
         scrollX: !this.vertical,
         scrollY: this.vertical,
         slide: {
@@ -103,14 +128,17 @@
           speed: this.duration,
           easing: this.easing,
           interval: this.interval,
-          autoplay: this.autoplay
+          autoplay: this.autoplay,
+          startPageXIndex: this.vertical ? 0 : this.current,
+          startPageYIndex: this.vertical? this.current : 0
         },
         momentum: false,
         bounce: false,
         probeType: 3,
         stopPropagation: true
-      })
-
+      }
+      const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions)
+      this.bs = new BScroll(this.$refs.wrapper, bsOptions)
       this.bs.on('slideWillChange', (page) => {
         this.currentIndex = this.vertical ? page.pageY : page.pageX
         this.$emit('change', getCustomEvent('change', {
@@ -153,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/components/web/mpx-tab-bar-container.vue

@@ -15,7 +15,7 @@
     'mpx-tab-bar': tabBarPagesMap['mpx-tab-bar']
   }
   tabBar.list.forEach(({ pagePath }) => {
-    const name = pagePath.replace('/', '-')
+    const name = pagePath.replace(/\//g, '-')
     const page = tabBarPagesMap[pagePath]
     if (page) {
       components[name] = page
@@ -39,7 +39,7 @@
       currentComponent () {
         const index = this.currentIndex
         const tabItem = tabBar.list[index]
-        return tabItem.pagePath.replace('/', '-')
+        return tabItem.pagePath.replace(/\//g, '-')
       }
     },
     watch: {

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

@@ -86,7 +86,7 @@
       }
 
       if (this.maxlength !== -1) {
-        domProps.maxlength = this.maxlength
+        domProps.maxLength = this.maxlength
       }
 
       const data = {

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,6 +270,11 @@ 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/i18n-loader注入
@@ -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,
@@ -25,23 +25,6 @@ export default function processOption (
       }
     }
 
-    // 注册v-ex-classes自定义指令处理externalClasses
-    Vue.directive('ex-classes', (el, binding, vnode) => {
-      const context = vnode.context
-      if (context) {
-        const externalClasses = context.$options.externalClasses || []
-        const classList = el.classList
-        binding.value.forEach((className) => {
-          const actualExternalClassNames = context.$attrs[className]
-          if (externalClasses.indexOf(className) !== -1 && actualExternalClassNames) {
-            classList.remove(className)
-            actualExternalClassNames.split(/\s+/).forEach((actualExternalClassName) => {
-              if (actualExternalClassName) classList.add(actualExternalClassName)
-            })
-          }
-        })
-      }
-    })
     Vue.directive('animation', (el, binding) => {
       const newActions = binding && binding.value && binding.value.actions
       if (el.actions === newActions) {
@@ -102,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) {
@@ -121,7 +149,9 @@ export default function processOption (
           redirect: '/' + firstPage
         })
       }
+      const webRouteConfig = global.__mpx.config.webRouteConfig
       global.__mpxRouter = option.router = new VueRouter({
+        ...webRouteConfig,
         routes: routes
       })
       global.__mpxRouter.stack = []
@@ -354,8 +384,8 @@ registered in parent context!`)
     option.mixins = [mixin]
   }
 
-  if (componentId) {
-    option.componentPath = '/' + componentId
+  if (outputPath) {
+    option.componentPath = '/' + outputPath
   }
 
   return option