@mpxjs/webpack-plugin 2.8.40-test → 2.8.40-test.2

package/lib/platform/template/wx/component-config/index.js

@@ -33,13 +33,13 @@ const switchComponent = require('./switch')
 const template = require('./template')
 const text = require('./text')
 const textarea = require('./textarea')
-const Nonsupport = require('./unsupported')
+const unsupported = require('./unsupported')
 const video = require('./video')
 const view = require('./view')
 const webView = require('./web-view')
 const wxs = require('./wxs')
 const component = require('./component')
-const fixHTMLTag = require('./fix-html-tag')
+const fixComponentName = require('./fix-component-name')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -80,8 +80,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
 
   // 转换规则只需以微信为基准配置微信和支付宝的差异部分，比如微信和支付宝都支持但是写法不一致，或者微信支持而支付宝不支持的部分(抛出错误或警告)
   return [
-    fixHTMLTag(),
-    ...Nonsupport({ print }),
+    ...unsupported({ print }),
+    fixComponentName({ print }),
     ad({ print }),
     view({ print }),
     scrollView({ print }),

package/lib/platform/template/wx/index.js

@@ -3,9 +3,7 @@ const JSON5 = require('json5')
 const getComponentConfigs = require('./component-config')
 const normalizeComponentRules = require('../normalize-component-rules')
 const isValidIdentifierStr = require('../../../utils/is-valid-identifier-str')
-const templateCompiler = require('../../../template-compiler/compiler')
-const parseMustache = templateCompiler.parseMustache
-const stringifyWithResolveComputed = templateCompiler.stringifyWithResolveComputed
+const { parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
 const normalize = require('../../../utils/normalize')
 
 module.exports = function getSpec ({ warn, error }) {
@@ -17,10 +15,10 @@ module.exports = function getSpec ({ warn, error }) {
     postProps: [
       {
         web ({ name, value }) {
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           if (parsed.hasBinding) {
             return {
-              name: name === 'animation' ? 'v-' + name : ':' + name,
+              name: name === 'animation' ? 'v-animation' : ':' + name,
               value: parsed.result
             }
           }
@@ -34,7 +32,7 @@ module.exports = function getSpec ({ warn, error }) {
         test: 'wx:for',
         swan (obj, data) {
           const attrsMap = data.el.attrsMap
-          const parsed = parseMustache(obj.value)
+          const parsed = parseMustacheWithContext(obj.value)
           let listName = parsed.result
           const el = data.el
 
@@ -48,7 +46,7 @@ module.exports = function getSpec ({ warn, error }) {
           }
 
           if (keyName) {
-            const parsed = parseMustache(keyName)
+            const parsed = parseMustacheWithContext(keyName)
             if (parsed.hasBinding) {
               // keyStr = ` trackBy ${parsed.result.slice(1, -1)}`
             } else if (keyName === '*this') {
@@ -78,7 +76,7 @@ module.exports = function getSpec ({ warn, error }) {
           }
         },
         web ({ value }, { el }) {
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           const attrsMap = el.attrsMap
           const itemName = attrsMap['wx:for-item'] || 'item'
           const indexName = attrsMap['wx:for-index'] || 'index'
@@ -190,9 +188,8 @@ module.exports = function getSpec ({ warn, error }) {
           }
           const styleBinding = []
           el.isStyleParsed = true
-          // 不过滤的话每一个属性都要 parse
           el.attrsList.filter(item => this.test.test(item.name)).forEach((item) => {
-            const parsed = parseMustache(item.value)
+            const parsed = parseMustacheWithContext(item.value)
             styleBinding.push(parsed.result)
           })
           return {
@@ -203,12 +200,20 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         // 样式类名绑定
-        test: /^wx:(class)$/,
-        web ({ value }) {
-          const parsed = parseMustache(value)
+        test: /^(class|wx:class)$/,
+        web ({ value }, { el }) {
+          if (el.isClassParsed) {
+            return false
+          }
+          const classBinding = []
+          el.isClassParsed = true
+          el.attrsList.filter(item => this.test.test(item.name)).forEach((item) => {
+            const parsed = parseMustacheWithContext(item.value)
+            classBinding.push(parsed.result)
+          })
           return {
             name: ':class',
-            value: parsed.result
+            value: `[${classBinding}]`
           }
         }
       },
@@ -259,7 +264,7 @@ module.exports = function getSpec ({ warn, error }) {
         },
         web ({ name, value }) {
           let dir = this.test.exec(name)[1]
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           if (dir === 'elif') {
             dir = 'else-if'
           }
@@ -359,7 +364,7 @@ module.exports = function getSpec ({ warn, error }) {
           }
         },
         web ({ name, value }, { eventRules, el, usingComponents }) {
-          if (parseMustache(value).hasBinding) {
+          if (parseMustacheWithContext(value).hasBinding) {
             error('Web environment does not support mustache binding in event props!')
             return
           }

package/lib/runtime/base.styl

@@ -48,9 +48,17 @@ span {
   white-space: pre-line;
 }
 
-html, body, .app {
+html, body, #app {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+page {
+  display: block;
   width: 100%;
   height: 100%;
+  background-color: #fff;
 }
 
 .pull-down-loading {

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

@@ -1,8 +1,6 @@
 import { isEmptyObject } from '../../utils'
 import { isBrowser } from '../../env'
 
-const isTouchDevice = isBrowser ? document && ('ontouchstart' in document.documentElement) : true
-
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
   // 该函数必须在产生merge前执行
@@ -49,6 +47,7 @@ function mergeListeners (listeners, otherListeners, options = {}) {
 function processTap (listeners, context) {
   const listenerMap = {}
   const tapEvents = ['tap', 'longpress', 'longtap']
+  const isTouchDevice = isBrowser ? document && ('ontouchstart' in document.documentElement) : true
   tapEvents.forEach((eventName) => {
     if (listeners[eventName]) {
       listenerMap[eventName] = true

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

@@ -1,5 +1,6 @@
 <script>
   import getInnerListeners, { getCustomEvent } from './getInnerListeners'
+  import { isBrowser } from '../../env'
 
   export default {
     name: 'mpx-image',
@@ -21,21 +22,23 @@
       }
     },
     beforeCreate () {
-      this.image = new Image()
-      this.image.onload = () => {
-        this.$emit('load', getCustomEvent('load', {
-          width: this.image.width,
-          height: this.image.height
-        }, this))
-      }
-      this.image.onerror = () => {
-        this.$emit('error', getCustomEvent('error', {}, this))
+      if (isBrowser) {
+        this.image = new Image()
+        this.image.onload = () => {
+          this.$emit('load', getCustomEvent('load', {
+            width: this.image.width,
+            height: this.image.height
+          }, this))
+        }
+        this.image.onerror = () => {
+          this.$emit('error', getCustomEvent('error', {}, this))
+        }
       }
     },
     watch: {
       src: {
         handler (src) {
-          if (src) this.image.src = src
+          if (src && this.image) this.image.src = src
         },
         immediate: true
       }

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

@@ -178,7 +178,7 @@
             this.refresh()
           })
           const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
-          this.resizeObserver.observe(elementToObserve)
+          elementToObserve && this.resizeObserver.observe(elementToObserve)
         }
       },
       refresh () {

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

@@ -15,7 +15,13 @@
   export default {
     name: 'mpx-picker-view-column',
     props: {
-      value: Array
+      value: Array,
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      }
     },
     data() {
       return {
@@ -64,7 +70,9 @@
               rotate: -5,
               wheelWrapperClass: 'wheel-scroll'
             },
-            probeType: 3
+            probeType: 3,
+            bindToWrapper: true,
+            ...this.scrollOptions
           })
           this.wheels[0].on('scrollStart', function () {
             if (this.pickerView) {

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

@@ -138,6 +138,12 @@
       fields: {
         type: String,
         default: 'day'
+      },
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
       }
     },
     data () {
@@ -311,7 +317,9 @@
                     wheelWrapperClass: 'wheel-scroll',
                     wheelItemClass: 'wheel-item'
                   },
-                  probeType: 3
+                  probeType: 3,
+                  bindToWrapper: true,
+                  ...this.scrollOptions
                 })
                 if (this.mode === 'time' || this.mode === 'date') {
                   this.wheels[i].on('scrollStart', function (i) {

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

@@ -47,7 +47,7 @@
         default: () => {
           return {}
         }
-      },
+      }
     },
     data () {
       return {
@@ -212,7 +212,7 @@
         this.bs.scroller.hooks.on('beforeRefresh', () => {
           this.initLayerComputed()
         })
-        this.bs.on('slideWillChange', (page) => {
+        this.bs.on('slidePageChanged', (page) => {
           this.currentIndex = this.vertical ? page.pageY : page.pageX
           this.$emit('change', getCustomEvent('change', {
             current: this.currentIndex,