@mpxjs/webpack-plugin 2.9.0-beta.0 → 2.9.0-beta.1

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,16 +188,16 @@ module.exports = function getSpec ({ warn, error }) {
           }
           const styleBinding = []
           el.isStyleParsed = true
-          el.attrsList.forEach((item) => {
-            const parsed = parseMustache(item.value)
+          el.attrsList.filter(item => this.test.test(item.name)).forEach((item) => {
+            const parsed = parseMustacheWithContext(item.value)
             if (item.name === 'style') {
               if (parsed.hasBinding || parsed.result.indexOf('rpx') > -1) {
-                styleBinding.push(parseMustache(item.value).result)
+                styleBinding.push(parsed.result)
               } else {
                 styleBinding.push(JSON.stringify(item.value))
               }
             } else if (item.name === 'wx:style') {
-              styleBinding.push(parseMustache(item.value).result)
+              styleBinding.push(parsed.result)
             }
           })
           return {
@@ -212,7 +210,7 @@ module.exports = function getSpec ({ warn, error }) {
         // 样式类名绑定
         test: /^wx:(class)$/,
         web ({ value }) {
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           return {
             name: ':class',
             value: parsed.result
@@ -266,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'
           }

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

@@ -143,11 +143,25 @@ export function inheritEvent (type, oe, detail = {}) {
 }
 
 export function getCustomEvent (type, detail = {}, target = null) {
+  const targetInfo = {}
+  if (target) {
+    const targetEl = target.$el || {}
+    const info = {
+      id: targetEl.id || '',
+      dataset: targetEl.dataset || {},
+      offsetTop: targetEl.offsetTop || 0,
+      offsetLeft: targetEl.offsetLeft || 0
+    }
+    Object.assign(targetInfo, {
+      target: info,
+      currentTarget: info
+    })
+  }
   return {
     type,
     detail,
-    target,
-    timeStamp: new Date().valueOf()
+    timeStamp: new Date().valueOf(),
+    ...targetInfo
   }
 }
 

package/lib/runtime/components/web/mpx-checkbox-group.vue

@@ -79,7 +79,7 @@
         } else {
           value = this.getValue()
         }
-        this.$emit('change', getCustomEvent('change', { value }, this.$refs.checkboxGroup))
+        this.$emit('change', getCustomEvent('change', { value }, this))
       }
     }
   }

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

@@ -76,11 +76,11 @@
     methods: {
       submit () {
         const value = getFormValue(this.$slots.default)
-        this.$emit('submit', getCustomEvent('submit', { value }))
+        this.$emit('submit', getCustomEvent('submit', { value }, this))
       },
       reset () {
         setFormValue(this.$slots.default, this.initialValue)
-        this.$emit('reset', getCustomEvent('reset', { value: this.initialValue }))
+        this.$emit('reset', getCustomEvent('reset', { value: this.initialValue }, this))
       }
     }
   }

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

@@ -1,5 +1,5 @@
 <script>
-  import getInnerListeners, { extendEvent } from './getInnerListeners'
+  import getInnerListeners, { getCustomEvent } from './getInnerListeners'
   import { isBrowser } from '../../env'
 
   export default {
@@ -24,18 +24,14 @@
     beforeCreate () {
       if (isBrowser) {
         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.onload = () => {
+          this.$emit('load', getCustomEvent('load', {
+            width: this.image.width,
+            height: this.image.height
+          }, this))
         }
-        this.image.onerror = (e) => {
-          this.$emit('error', e)
+        this.image.onerror = () => {
+          this.$emit('error', getCustomEvent('error', {}, this))
         }
       }
     },
@@ -51,9 +47,9 @@
       if (this.mode === 'widthFix' || this.mode === 'heightFix') {
         let style
         if (this.mode === 'widthFix') {
-           style = {
-             height: 'auto'
-           }
+          style = {
+            height: 'auto'
+          }
         } else {
           style = {
             width: 'auto'

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

@@ -179,7 +179,7 @@
               x: this.roundFun(position.x) ? this.roundFun(position.x) : 0,
               y: this.roundFun(position.y) ? this.roundFun(position.y) : 0,
               source: this.source
-            }))
+            }, this))
           }
           this.lastestX = this.roundFun(position.x)
           this.lastestY = this.roundFun(position.y)
@@ -215,7 +215,7 @@
               this.touchEvent = 'vtouchmove'
             }
           }
-          this.$emit(this.touchEvent)
+          this.$emit(this.touchEvent, getCustomEvent(this.touchEvent, {}, this))
           this.isFirstTouch = false
         })
         if (this.inertia) { // movable-view是否带有惯性
@@ -233,7 +233,7 @@
               x: this.roundFun(this.bs.x),
               y: this.roundFun(this.bs.y),
               scale: this.roundFun(scale)
-            }))
+            }, this))
             this.lastestScale = this.roundFun(scale)
           })
           this.bs.on('zoomEnd', ({ scale }) => {

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

@@ -97,13 +97,13 @@
       },
       notifyChange() {
         const value = this.getValue()
-        this.$emit('change', getCustomEvent('change', {value}))
+        this.$emit('change', getCustomEvent('change', { value }, this))
       },
-      notifyPickstart(value) {
-        this.$emit('pickstart', getCustomEvent('pickstart', {value}))
+      notifyPickstart() {
+        this.$emit('pickstart', getCustomEvent('pickstart', {}, this))
       },
-      notifyPickend(value) {
-        this.$emit('pickend', getCustomEvent('pickend', {value}))
+      notifyPickend() {
+        this.$emit('pickend', getCustomEvent('pickend', {}, this))
       }
     }
   }

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

@@ -266,11 +266,11 @@
           default:
             value = this.selectedIndex[0]
         }
-        this.$emit('change', getCustomEvent('change', {value}))
+        this.$emit('change', getCustomEvent('change', {value}, this))
       },
       _cancel () {
         this.hide()
-        this.$emit('cancel', getCustomEvent('cancel'))
+        this.$emit('cancel', getCustomEvent('cancel', {}, this))
       },
       _isMoving () {
         return this.wheels.some((wheel) => {
@@ -327,7 +327,7 @@
                       this.$emit('columnchange', getCustomEvent('columnchange', {
                         column: i,
                         value: currentIndex
-                      }))
+                      }, this))
                     }
                   }
                   if (this.mode === 'time' || this.mode === 'date') {

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

@@ -113,7 +113,9 @@
         ref: 'progress',
         on: {
           transitionend: () => {
-            this.$emit('activeend', getCustomEvent('activeend'))
+            this.$emit('activeend', getCustomEvent('activeend', {
+              curPercent: this.percent
+            }, this))
           }
         }
       })

package/lib/runtime/components/web/mpx-radio-group.vue

@@ -84,7 +84,7 @@
         } else {
           value = this.getValue()
         }
-        this.$emit('change', getCustomEvent('change', { value }, this.$refs.radioGroup))
+        this.$emit('change', getCustomEvent('change', { value }, this))
       }
     }
   }

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

@@ -124,7 +124,7 @@
       refresherTriggered: {
         handler (val) {
           if (!val) {
-            this.$emit('refresherrestore')
+            this.$emit('refresherrestore', getCustomEvent('refresherrestore', {}, this))
             this.isLoading = false
             this.isAutoPullDown = true
             this.bs && this.bs.finishPullDown()
@@ -182,7 +182,7 @@
             scrollHeight: this.bs.scrollerHeight,
             deltaX,
             deltaY
-          }))
+          }, this))
           if (this.bs.minScrollX - x < this._upperThreshold && deltaX > 0) {
             this.dispatchScrollTo('left')
           }
@@ -212,7 +212,7 @@
               this.$emit('dragstart', getCustomEvent('dragstart', {
                 scrollLeft: this.bs.x ? this.bs.x * -1 : 0,
                 scrollTop: this.bs.y ? this.bs.y * -1 : 0
-              }))
+              }, this))
             }
             if (this.refresherEnabled) {
               this.isAutoPullDown = false
@@ -223,13 +223,13 @@
               this.$emit('dragging', getCustomEvent('dragging', {
                 scrollLeft: this.bs.x ? this.bs.x * -1 : 0,
                 scrollTop: this.bs.y ? this.bs.y * -1 : 0
-              }))
+              }, this))
             }
             if (this.refresherEnabled) {
               if (this.bs.y > 0 && this.bs.y < this.refresherThreshold && this.bs.movingDirectionY !== 1) {
                 this.isAutoPullDown = false
                 this.isLoading = false
-                this.$emit('refresherpulling')
+                this.$emit('refresherpulling', getCustomEvent('refresherpulling', {}, this))
               }
             }
           })
@@ -238,7 +238,7 @@
               this.$emit('dragend', getCustomEvent('dragend', {
                 scrollLeft: this.bs.x ? this.bs.x * -1 : 0,
                 scrollTop: this.bs.y ? this.bs.y * -1 : 0
-              }))
+              }, this))
             }
           })
           if (this.refresherEnabled) {
@@ -248,12 +248,12 @@
                 this.isLoading = true
                 if (this.bs.y < this.refresherThreshold) {
                   this.isAutoPullDown = true
-                  this.$emit('refresherabort')
+                  this.$emit('refresherabort', getCustomEvent('refresherabort', {}, this))
                 }
               }
             })
             this.bs.on('pullingDown', () => {
-              this.$emit('refresherrefresh')
+              this.$emit('refresherrefresh', getCustomEvent('refresherrefresh', {}, this))
             })
           }
         }
@@ -312,7 +312,7 @@
       dispatchScrollTo: throttle(function (direction) {
         let eventName = 'scrolltoupper'
         if (direction === 'bottom' || direction === 'right') eventName = 'scrolltolower'
-        this.$emit(eventName, getCustomEvent(eventName, { direction }))
+        this.$emit(eventName, getCustomEvent(eventName, { direction }, this))
       }, 200, {
         leading: true,
         trailing: false

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

@@ -156,12 +156,12 @@
           let eventName = 'changing'
           let moveStartX = event.targetTouches[0] && event.targetTouches[0].pageX
           this.setLineValue(moveStartX)
-          this.$emit(eventName, getCustomEvent(eventName, { value: this.sliderValue }, this.$refs.slider))
+          this.$emit(eventName, getCustomEvent(eventName, { value: this.sliderValue }, this))
         }
       },
       sliderTouchEnd (event) {
         let eventName = 'change'
-        this.$emit(eventName, getCustomEvent(eventName, { value: this.sliderValue }, this.$refs.slider))
+        this.$emit(eventName, getCustomEvent(eventName, { value: this.sliderValue }, this))
         this.isDrag = false
       },
       sliderClick (event) {
@@ -170,7 +170,7 @@
         }
         this.setLineValue(event.pageX)
         let eventName = 'change'
-        this.$emit(eventName, getCustomEvent(eventName, { value: this.sliderValue }, this.$refs.slider))
+        this.$emit(eventName, getCustomEvent(eventName, { value: this.sliderValue }, this))
       },
       setLineValue (moveStartX) {
         moveStartX = moveStartX - this.startX
@@ -200,7 +200,7 @@
         } else {
           value = this.getValue()
         }
-        this.$emit('change', getCustomEvent('change', { value: value }, this.$refs.slider))
+        this.$emit('change', getCustomEvent('change', { value: value }, this))
       }
     }
   }

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

@@ -145,7 +145,7 @@
           current: this.currentIndex,
           currentItemId: this.itemIds[this.currentIndex] || '',
           source: this.changeSource
-        }))
+        }, this))
       })
 
       this.bs.on('scrollEnd', () => {
@@ -153,13 +153,13 @@
           current: this.currentIndex,
           currentItemId: this.itemIds[this.currentIndex] || '',
           source: this.changeSource
-        }))
+        }, this))
       })
       this.bs.on('scroll', throttle(({ x, y }) => {
         this.$emit('transition', getCustomEvent('transition', {
           dx: this.lastX - x,
           dy: this.lastY - y
-        }))
+        }, this))
       }, 30, {
         leading: true,
         trailing: false

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

@@ -80,7 +80,7 @@
         } else {
           value = this.getValue()
         }
-        this.$emit('change', getCustomEvent('change', { value }, this.$refs.switch))
+        this.$emit('change', getCustomEvent('change', { value }, this))
       }
     }
   }

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

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-  import { inheritEvent, extendEvent } from './getInnerListeners'
+  import { inheritEvent } from './getInnerListeners'
 
   export default {
     name: 'mpx-video',
@@ -169,75 +169,61 @@
         const videoNode = this.$refs['_mpx_video_ref']
 
         videoNode.addEventListener('play', (e) => {
-          extendEvent(e, { detail: {} })
-          this.$emit('play', e)
+          this.$emit('play', inheritEvent('play', e, {}))
         })
 
         videoNode.addEventListener('pause', (e) => {
-          extendEvent(e, { detail: {} })
-          this.$emit('pause', e)
+          this.$emit('pause', inheritEvent('pause', e, {}))
         })
 
         videoNode.addEventListener('ended', (e) => {
-          extendEvent(e, { detail: {} })
-          this.$emit('ended', e)
+          this.$emit('ended', inheritEvent('ended', e, {}))
         })
 
         videoNode.addEventListener('timeupdate', (e) => {
           const eNode = e.target
-          extendEvent(e, { detail: { currentTime: eNode.currentTime, duration: eNode.duration } })
-          this.$emit('timeupdate', e)
+          this.$emit('timeupdate', inheritEvent('timeupdate', e, { currentTime: eNode.currentTime, duration: eNode.duration }))
         })
 
         videoNode.addEventListener('error', (e) => {
-          extendEvent(e, { detail: {} })
-          this.$emit('error', e)
+          this.$emit('error', inheritEvent('error', e, {}))
         })
 
         videoNode.addEventListener('waiting', (e) => {
-          extendEvent(e, { detail: {} })
-          this.$emit('waiting', e)
+          this.$emit('waiting', inheritEvent('waiting', e, {}))
         })
 
         videoNode.addEventListener('loadedmetadata', (e) => {
           const eNode = e.target
-          extendEvent(e, { detail: { width: eNode.videoWidth, height: eNode.videoHeight, duration: eNode.duration } })
-          this.$emit('loadedmetadata', e)
+          this.$emit('loadedmetadata', inheritEvent('loadedmetadata', e, { width: eNode.videoWidth, height: eNode.videoHeight, duration: eNode.duration }))
         })
 
         videoNode.addEventListener('progress', (e) => {
           const eNode = e.target
           const buffered = (eNode?.buffered?.end(0)) / (eNode?.duration)
-          extendEvent(e, { detail: { buffered: buffered * 100 } })
-          this.$emit('progress', e)
+          this.$emit('progress', inheritEvent('progress', e, { buffered: buffered * 100 }))
         })
 
         videoNode.addEventListener('seeked', (e) => {
           const eNode = e.target
-          const ne = inheritEvent('seekcomplete', e, { position: eNode.currentTime })
-          this.$emit('seekcomplete', ne)
+          this.$emit('seekcomplete', inheritEvent('seekcomplete', e, { position: eNode.currentTime }))
         })
 
         videoNode.addEventListener('fullscreenchange', (e) => {
           //  TODO direction
-          extendEvent(e, { detail: { fullScreen: false } })
           if (document.isFullScreen) {
-            e.detail.fullScreen = true
-            this.$emit('fullscreenchange', e)
+            this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: true }))
           } else {
-            e.detail.fullScreen = false
-            this.$emit('fullscreenchange', e)
+            this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: false }))
           }
         })
 
         videoNode.addEventListener('enterpictureinpicture', (e) => {
-          extendEvent(e, { detail: {} })
-          this.$emit('enterpictureinpicture', e)
+          this.$emit('enterpictureinpicture', inheritEvent('enterpictureinpicture', e, {}))
         })
 
         videoNode.addEventListener('leavepictureinpicture', (e) => {
-          extendEvent(e, { detail: {} })
-          this.$emit('leavepictureinpicture', e)
+          this.$emit('leavepictureinpicture', inheritEvent('leavepictureinpicture', e, {}))
         })
       }
     }

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

@@ -49,7 +49,7 @@
           const loadData = {
             src: this.src
           }
-          this.$emit(eventError, getCustomEvent(eventError, loadData))
+          this.$emit(eventError, getCustomEvent(eventError, loadData, this))
         }
       }, 1000)
       this.mpxIframe = this.$refs.mpxIframe
@@ -92,7 +92,7 @@
             const loadData = {
               src: this.src
             }
-            this.$emit(eventLoad, getCustomEvent(eventLoad, loadData))
+            this.$emit(eventLoad, getCustomEvent(eventLoad, loadData, this))
         }
       })
     },
@@ -108,7 +108,7 @@
         type: 'message',
         data: this.messageList
       }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data))
+      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
     },
     destroyed () {
       if (!this.isPostMessage) {
@@ -118,7 +118,7 @@
         type: 'message',
         data: this.messageList
       }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data))
+      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
     }
   }
 </script>

package/lib/runtime/stringify.wxs

@@ -24,8 +24,9 @@ function objectKeys (obj) {
         var shift = false
         for (var i = 1; i < objStr.length - 1; i++) {
           var item = objStr[i]
+          var lastItem = objStr[i - 1]
           if (inKey) {
-            if (item === ':') {
+            if (item === ':' && lastItem === '"') {
               keys.push(key.slice(1, -1))
               key = ''
               inKey = false
@@ -93,18 +94,53 @@ function isDef (v) {
   return v !== undefined && v !== null
 }
 
+var escapeMap = {
+  '(': '_pl_',
+  ')': '_pr_',
+  '[': '_bl_',
+  ']': '_br_',
+  '{': '_cl_',
+  '#': '_h_',
+  '!': '_i_',
+  '/': '_s_',
+  '.': '_d_',
+  ':': '_c_',
+  ',': '_2c_',
+  '%': '_p_',
+  // wxs can not use '\'' as key
+  // wxs环境中'\''!=="'"，此文件不能格式化，否则会导致程序错误
+  "'": '_q_',
+  // wxs can not use '"' as key
+  '"': '_dq_',
+  '+': '_a_',
+  '$': '_si_'
+}
+
+var escapeReg = genRegExp('[()[\]{}#!/.:,%\'"+$]', 'g')
+
+function mpEscape (str) {
+  return str.replace(escapeReg, function (match) {
+    if (escapeMap[match]) return escapeMap[match]
+    // fix wxs can not use '}' as key
+    if (match === '}') return '_cr_'
+    // unknown escaped
+    return '_u_'
+  })
+}
+
+
 function stringifyDynamicClass (value) {
-  if (!value) return ''
   if (isArray(value)) {
-    return stringifyArray(value)
-  }
-  if (isObject(value)) {
-    return stringifyObject(value)
+    value = stringifyArray(value)
+  } else if (isObject(value)) {
+    value = stringifyObject(value)
   }
+
   if (typeof value === 'string') {
-    return value
+    return mpEscape(value)
+  } else {
+    return ''
   }
-  return ''
 }
 
 function stringifyArray (value) {

package/lib/style-compiler/index.js

@@ -30,7 +30,7 @@ module.exports = function (css, map) {
 
   const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs })
   loadPostcssConfig(this, inlineConfig).then(config => {
-    const plugins = config.plugins.concat(trim)
+    const plugins = [trim] // init with trim plugin
     const options = Object.assign(
       {
         to: this.resourcePath,
@@ -79,6 +79,8 @@ module.exports = function (css, map) {
       }
     }
 
+    plugins.push(...config.plugins) // push user config plugins
+
     return postcss(plugins)
       .process(css, options)
       .then(result => {