@mpxjs/webpack-plugin 2.9.69 → 2.9.70-alpha.0

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

@@ -3,184 +3,184 @@
 </template>
 
 <script>
-  import { getCustomEvent } from './getInnerListeners'
-  import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
-  const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
-  const eventLoad = 'load'
-  const eventError = 'error'
-  const eventMessage = 'message'
-  const mpx = global.__mpx
-  export default {
-    props: {
-      src: {
-        type: String
+import { getCustomEvent } from './getInnerListeners'
+import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
+import { extend } from '../../utils'
+const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
+const eventLoad = 'load'
+const eventError = 'error'
+const eventMessage = 'message'
+const mpx = global.__mpx
+export default {
+  props: {
+    src: {
+      type: String
+    }
+  },
+  computed: {
+    host () {
+      let host = this.src.split('/')
+      if (host[2]) {
+        host = host[0] + '//' + host[2]
+      } else {
+        host = ''
       }
+      return host
     },
-    computed: {
-      host () {
-        let host = this.src.split('/')
-        if (host[2]) {
-          host = host[0] + '//' + host[2]
-        } else {
-          host = ''
-        }
-        return host
-      },
-      currentUrl () {
-        if (!this.src) return ''
-        const hostValidate = this.hostValidate(this.host)
-        if (!hostValidate) {
-          console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
-          return ''
-        }
-        let src
-        const srcQueryIndex = this.src.indexOf('?')
-        // webview与被打开页面通过_uid确定关联关系
-        if (srcQueryIndex > -1) {
-          src = `${this.src.substring(0, srcQueryIndex + 1)}mpx_webview_id=${this._uid}&${this.src.substring(srcQueryIndex + 1)}`
-        } else {
-          src = `${this.src}?mpx_webview_id=${this._uid}`
-        }
-        return src
-      },
-      loadData () {
-        return {
-          src: this.host,
-          fullUrl: this.src
-        }
+    currentUrl () {
+      if (!this.src) return ''
+      const hostValidate = this.hostValidate(this.host)
+      if (!hostValidate) {
+        console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
+        return ''
       }
-    },
-    watch: {
-      currentUrl: {
-        handler (value) {
-          if (!value) {
-            this.$emit(eventError, getCustomEvent(eventError, {
-              ...this.loadData,
-              errMsg: 'web-view load failed due to not in domain list'
-            }, this))
-          } else {
-            this.$nextTick(() => {
-              if (this.$refs.mpxIframe && this.mpxIframe != this.$refs.mpxIframe) {
-                this.mpxIframe = this.$refs.mpxIframe
-                this.mpxIframe.addEventListener('load', (event) => {
-                  this.$emit(eventLoad, getCustomEvent(eventLoad, this.loadData, this))
-                })
-              }
-            })
-          }
-        },
-        immediate: true
+      let src
+      const srcQueryIndex = this.src.indexOf('?')
+      // webview与被打开页面通过_uid确定关联关系
+      if (srcQueryIndex > -1) {
+        src = `${this.src.substring(0, srcQueryIndex + 1)}mpx_webview_id=${this._uid}&${this.src.substring(srcQueryIndex + 1)}`
+      } else {
+        src = `${this.src}?mpx_webview_id=${this._uid}`
       }
+      return src
     },
-    beforeCreate () {
-      this.messageList = []
-    },
-    mounted () {
-      window.addEventListener('message', this.messageCallback)
-    },
-    deactivated () {
-      if (!this.messageList.length) {
-        return
+    loadData () {
+      return {
+        src: this.host,
+        fullUrl: this.src
       }
-      let data = {
-        type: 'message',
-        data: this.messageList
+    }
+  },
+  watch: {
+    currentUrl: {
+      handler (value) {
+        if (!value) {
+          this.$emit(eventError, getCustomEvent(eventError, extend({
+            errMsg: 'web-view load failed due to not in domain list'
+          }, this.loadData), this))
+        } else {
+          this.$nextTick(() => {
+            if (this.$refs.mpxIframe && this.mpxIframe != this.$refs.mpxIframe) {
+              this.mpxIframe = this.$refs.mpxIframe
+              this.mpxIframe.addEventListener('load', () => {
+                this.$emit(eventLoad, getCustomEvent(eventLoad, this.loadData, this))
+              })
+            }
+          })
+        }
+      },
+      immediate: true
+    }
+  },
+  beforeCreate () {
+    this.messageList = []
+  },
+  mounted () {
+    window.addEventListener('message', this.messageCallback)
+  },
+  deactivated () {
+    if (!this.messageList.length) {
+      return
+    }
+    let data = {
+      type: 'message',
+      data: this.messageList
+    }
+    this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+  },
+  destroyed () {
+    window.removeEventListener('message', this.messageCallback)
+    if (!this.messageList.length) {
+      return
+    }
+    let data = {
+      type: 'message',
+      data: this.messageList
+    }
+    this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+  },
+  methods: {
+    messageCallback (event) {
+      const hostValidate = this.hostValidate(event.origin)
+      const data = event.data
+      // 判断number类型，防止undefined导致触发return逻辑
+      if (data.clientUid !== undefined && +data.clientUid !== this._uid) {
+        return
       }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
-    },
-    destroyed () {
-      window.removeEventListener('message', this.messageCallback)
-      if (!this.messageList.length) {
+      let value = data.payload
+      if (!hostValidate) {
         return
       }
-      let data = {
-        type: 'message',
-        data: this.messageList
+      let asyncCallback = null
+      switch (data.type) {
+        case 'postMessage':
+          this.messageList.push(value.data || value)
+          asyncCallback = Promise.resolve({
+            errMsg: 'invokeWebappApi:ok'
+          })
+          break
+        case 'navigateTo':
+          asyncCallback = navObj.navigateTo(value)
+          break
+        case 'navigateBack':
+          asyncCallback = navObj.navigateBack(value)
+          break
+        case 'redirectTo':
+          asyncCallback = navObj.redirectTo(value)
+          break
+        case 'switchTab':
+          asyncCallback = navObj.switchTab(value)
+          break
+        case 'reLaunch':
+          asyncCallback = navObj.reLaunch(value)
+          break
+        case 'getLocation':
+          const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation
+          if (getLocation) {
+            asyncCallback = getLocation()
+          } else {
+            asyncCallback = Promise.reject({
+              errMsg: '未在apiImplementations中配置getLocation方法'
+            })
+          }
+          break
       }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+      asyncCallback && asyncCallback.then((res) => {
+        this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
+          type: data.type,
+          callbackId: data.callbackId,
+          result: res
+        }, event.origin)
+      }).catch((error) => {
+        this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
+          type: data.type,
+          callbackId: data.callbackId,
+          error
+        }, event.origin)
+      })
     },
-    methods: {
-      messageCallback (event) {
-        const hostValidate = this.hostValidate(event.origin)
-        const data = event.data
-        // 判断number类型，防止undefined导致触发return逻辑
-        if (data.clientUid !== undefined && +data.clientUid !== this._uid) {
-          return
-        }
-        let value = data.payload
-        if (!hostValidate) {
-          return
-        }
-        let asyncCallback = null
-        switch (data.type) {
-          case 'postMessage':
-            this.messageList.push(value.data || value)
-            asyncCallback = Promise.resolve({
-              errMsg: 'invokeWebappApi:ok'
-            })
-            break
-          case 'navigateTo':
-            asyncCallback = navObj.navigateTo(value)
-            break
-          case 'navigateBack':
-            asyncCallback = navObj.navigateBack(value)
-            break
-          case 'redirectTo':
-            asyncCallback = navObj.redirectTo(value)
-            break
-          case 'switchTab':
-            asyncCallback = navObj.switchTab(value)
-            break
-          case 'reLaunch':
-            asyncCallback = navObj.reLaunch(value)
-            break
-          case 'getLocation':
-            const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation
-            if (getLocation) {
-              asyncCallback = getLocation()
-            } else {
-              asyncCallback = Promise.reject({
-                errMsg: '未在apiImplementations中配置getLocation方法'
-              })
-            }
-            break
-        }
-        asyncCallback && asyncCallback.then((res) => {
-          this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
-            type: data.type,
-            callbackId: data.callbackId,
-            result: res
-          }, event.origin)
-        }).catch((error) => {
-          this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
-            type: data.type,
-            callbackId: data.callbackId,
-            error
-          }, event.origin)
+    hostValidate (host) {
+      const hostWhitelists = mpx.config.webviewConfig && mpx.config.webviewConfig.hostWhitelists || []
+      if (hostWhitelists.length) {
+        return hostWhitelists.some((item) => {
+          return host.endsWith(item)
         })
-      },
-      hostValidate (host) {
-        const hostWhitelists = mpx.config.webviewConfig && mpx.config.webviewConfig.hostWhitelists || []
-        if (hostWhitelists.length) {
-          return hostWhitelists.some((item) => {
-            return host.endsWith(item)
-          })
-        } else {
-          return true
-        }
+      } else {
+        return true
       }
     }
   }
+}
 </script>
 
 <style>
-  .mpx-iframe {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
+.mpx-iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
 </style>

package/lib/runtime/optionProcessor.js

@@ -1,4 +1,4 @@
-import { hasOwn, isEmptyObject } from './utils'
+import { hasOwn, isEmptyObject, extend } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
@@ -59,7 +59,7 @@ registered in parent context!`)
   }
 
   if (ctorType === 'page') {
-    option.__mpxPageConfig = Object.assign({}, global.__mpxPageConfig, pageConfig)
+    option.__mpxPageConfig = extend({}, global.__mpxPageConfig, pageConfig)
   }
 
   if (!hasApp) {
@@ -109,7 +109,7 @@ registered in parent context!`)
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
-  if (extendOptions) Object.assign(component, extendOptions)
+  if (extendOptions) extend(component, extendOptions)
   return component
 }
 
@@ -164,10 +164,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
       })
     }
     const webRouteConfig = global.__mpx.config.webConfig.routeConfig || global.__mpx.config.webRouteConfig
-    global.__mpxRouter = option.router = new VueRouter({
-      ...webRouteConfig,
-      routes: routes
-    })
+    global.__mpxRouter = option.router = new VueRouter(extend({ routes }, webRouteConfig))
     let mpxStackPath = []
     if (isBrowser) {
       // 解决webview被刷新导致路由栈丢失后产生错乱问题
@@ -365,7 +362,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
 
   if (App.onAppInit) {
     global.__mpxAppInit = true
-    Object.assign(option, App.onAppInit() || {})
+    extend(option, App.onAppInit() || {})
     global.__mpxAppInit = false
   }
 
@@ -374,14 +371,8 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     option.pinia = global.__mpxPinia
   }
 
-  const app = new Vue({
-    ...option,
-    render: (h) => h(App)
-  })
-  return {
-    app,
-    ...option
-  }
+  const app = new Vue(extend(option, { render: (h) => h(App) }))
+  return extend({ app }, option)
 }
 
 export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el }) {

package/lib/runtime/optionProcessor.tenon.js

@@ -0,0 +1,84 @@
+// import { inBrowser } from '../utils/env'
+
+import { hasOwn } from './utils'
+
+export function processComponentOption (
+  {
+    option,
+    ctorType,
+    outputPath,
+    pageConfig,
+    componentsMap,
+    componentGenerics,
+    genericsInfo,
+    wxsMixin,
+    hasApp,
+  }
+) {
+  if (ctorType === 'app') {
+    // 对于app中的组件需要全局注册
+    for (const componentName in componentsMap) {
+      if (hasOwn(componentsMap, componentName)) {
+        const component = componentsMap[componentName]
+        Vue.component(componentName, component)
+      }
+    }
+  } else {
+    // 局部注册页面和组件中依赖的组件
+    for (const componentName in componentsMap) {
+      if (hasOwn(componentsMap, componentName)) {
+        const component = componentsMap[componentName]
+        if (!option.components) {
+          option.components = {}
+        }
+        option.components[componentName] = component
+      }
+    }
+
+    if (ctorType === 'page') {
+      (option.mixins ? option.mixins : (option.mixins = [])).push({
+        // cache page instance in tenon
+        created () {
+          global.__currentPageInstance = this
+        }
+      })
+      option.__mpxPageConfig = Object.assign({}, global.__mpxPageConfig, pageConfig)
+    }
+  }
+
+  if (wxsMixin) {
+    if (option.mixins) {
+      option.mixins.push(mixin)
+    } else {
+      option.mixins = [mixin]
+    }
+  }
+
+  if (outputPath) {
+    option.componentPath = '/' + outputPath
+  }
+
+  return option
+}
+
+export function getComponent (component, extendOptions) {
+  component = component.__esModule ? component.default : component
+  // eslint-disable-next-line
+  if (extendOptions) Object.assign(component, extendOptions)
+  return component
+}
+
+export function getWxsMixin (wxsModules) {
+  if (!wxsModules) return {}
+  return {
+    created () {
+      Object.keys(wxsModules).forEach((key) => {
+        if (key in this) {
+          console.error(`[Mpx runtime error]: The wxs module key [${key}] exist in the component/page instance already, please check and rename it!`)
+        } else {
+          this[key] = wxsModules[key]
+        }
+      })
+    }
+  }
+}

package/lib/runtime/utils.js

@@ -45,3 +45,5 @@ const hasOwnProperty = Object.prototype.hasOwnProperty
 export function hasOwn (obj, key) {
   return hasOwnProperty.call(obj, key)
 }
+
+export const extend = Object.assign

package/lib/style-compiler/index.js

@@ -30,7 +30,7 @@ module.exports = function (css, map) {
   const index = queryObj.index || 0
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
 
-  const transRpxFn = mpx.webConfig.transRpxFn
+  const transRpxFn = mpx.webConfig && mpx.webConfig.transRpxFn
   const testResolveRange = (include = () => true, exclude) => {
     return matchCondition(this.resourcePath, { include, exclude })
   }

package/lib/style-compiler/plugins/hm.js

@@ -0,0 +1,20 @@
+const postcss = require('postcss')
+const rpxRegExp = /\b(\d+(\.\d+)?)rpx\b/
+const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
+
+module.exports = postcss.plugin('hm', (options = {}) => root => {
+  function transHm (declaration) {
+    if (rpxRegExp.test(declaration.value)) {
+      declaration.value = declaration.value.replace(rpxRegExpG, function (match, $1) {
+        if ($1 === '0') return $1
+        return `${$1}hm`
+      })
+    }
+  }
+
+  root.walkRules(rule => {
+    rule.walkDecls(declaration => {
+      transHm(declaration)
+    })
+  })
+})

package/lib/template-compiler/bind-this.js

@@ -264,7 +264,8 @@ module.exports = {
   transform (code, {
     needCollect = false,
     renderReduce = false,
-    ignoreMap = {}
+    ignoreMap = {},
+    customBindThis
   } = {}) {
     const ast = babylon.parse(code, {
       plugins: [
@@ -420,7 +421,11 @@ module.exports = {
             if (isProps) {
               propKeySet.add(name)
             }
-            path.replaceWith(t.memberExpression(t.thisExpression(), path.node))
+            if (typeof customBindThis === 'function') {
+              customBindThis(path, t)
+            } else {
+              path.replaceWith(t.memberExpression(t.thisExpression(), path.node))
+            }
           }
           delete path.needBind
         }