@mpxjs/webpack-plugin 2.9.67 → 2.9.69-beta.1

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

@@ -3,184 +3,198 @@
 </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, isFunction } from '@mpxjs/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
-      }
-      let data = {
-        type: 'message',
-        data: this.messageList
+    loadData () {
+      return {
+        src: this.host,
+        fullUrl: this.src
       }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
-    },
-    destroyed () {
-      window.removeEventListener('message', this.messageCallback)
-      if (!this.messageList.length) {
+    }
+  },
+  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)
+      let data = {}
+      try {
+        const eventData = event.data
+        data = typeof eventData === 'string' ? JSON.parse(eventData) : eventData
+      } catch(e){}
+      // 判断number类型，防止undefined导致触发return逻辑
+      if (data.clientUid !== undefined && +data.clientUid !== this._uid) {
         return
       }
-      let data = {
-        type: 'message',
-        data: this.messageList
+      let value = data.payload
+      const args = data.args
+      const params = Array.isArray(args) ? args : [value]
+      if (!hostValidate) {
+        return
       }
-      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
-        }
-        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()
+      let asyncCallback = null
+      const type = data.type
+      switch (type) {
+        case 'postMessage':
+          let data = {
+            type: 'message',
+            data: params[0]?.data
+          }
+          this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+          asyncCallback = Promise.resolve({
+            errMsg: 'invokeWebappApi:ok'
+          })
+          break
+        case 'navigateTo':
+          asyncCallback = navObj.navigateTo(...params)
+          break
+        case 'navigateBack':
+          asyncCallback = navObj.navigateBack(...params)
+          break
+        case 'redirectTo':
+          asyncCallback = navObj.redirectTo(...params)
+          break
+        case 'switchTab':
+          asyncCallback = navObj.switchTab(...params)
+          break
+        case 'reLaunch':
+          asyncCallback = navObj.reLaunch(...params)
+          break
+        default:
+          if (type) {
+            const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type]
+            if (isFunction(implement)) {
+              asyncCallback = Promise.resolve(implement(...params))
             } else {
               asyncCallback = Promise.reject({
-                errMsg: '未在apiImplementations中配置getLocation方法'
+                errMsg: `未在apiImplementations中配置${type}方法`
               })
             }
-            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)
+          }
+          break
+      }
+      asyncCallback && asyncCallback.then((res) => {
+        this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
+          type: type,
+          callbackId: data.callbackId,
+          result: res
+        }, event.origin)
+      }).catch((error) => {
+        this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
+          type: 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;
-  }
-</style>
+.mpx-iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+</style>

package/lib/runtime/optionProcessor.js

@@ -1,10 +1,7 @@
-import { hasOwn, isEmptyObject } from './utils'
+import { hasOwn, isEmptyObject, extend } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
-import { createEvent } from './components/web/event'
-
-createEvent()
 
 export function processComponentOption (
   {
@@ -59,7 +56,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 +106,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 +161,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被刷新导致路由栈丢失后产生错乱问题
@@ -312,25 +306,6 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     })
     // 处理visibilitychange时触发当前活跃页面组件的onshow/onhide
     if (isBrowser) {
-      const errorHandler = function (args, fromVue) {
-        if (global.__mpxAppCbs && global.__mpxAppCbs.error && global.__mpxAppCbs.error.length) {
-          global.__mpxAppCbs.error.forEach((cb) => {
-            cb.apply(null, args)
-          })
-          console.error(...args)
-        } else if (fromVue) {
-          throw args[0]
-        }
-      }
-      Vue.config.errorHandler = (...args) => {
-        return errorHandler(args, true)
-      }
-      window.addEventListener('error', (event) => {
-        return errorHandler([event.error, event])
-      })
-      window.addEventListener('unhandledrejection', (event) => {
-        return errorHandler([event.reason, event])
-      })
       document.addEventListener('visibilitychange', function () {
         const vnode = global.__mpxRouter && global.__mpxRouter.__mpxActiveVnode
         if (vnode && vnode.componentInstance) {
@@ -365,7 +340,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 +349,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/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

@@ -4,7 +4,6 @@ const loadPostcssConfig = require('./load-postcss-config')
 const { MPX_ROOT_VIEW, MPX_DISABLE_EXTRACTOR_CACHE } = require('../utils/const')
 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 cssArrayList = require('./plugins/css-array-list')
@@ -58,9 +57,9 @@ module.exports = function (css, map) {
       plugins.push(transSpecial({ id }))
     }
 
-    plugins.push(pluginCondStrip({
-      defs
-    }))
+    // plugins.push(pluginCondStrip({
+    //   defs
+    // }))
 
     for (const item of transRpxRules) {
       const {

package/lib/style-compiler/plugins/scope-id.js

@@ -1,6 +1,8 @@
 const selectorParser = require('postcss-selector-parser')
 // scope-id
-
+function isSpaceCombinator (node) {
+  return node.type === 'combinator' && /^\s+$/.test(node.value)
+}
 module.exports = ({ id }) => {
   return {
     postcssPlugin: 'scope-id',
@@ -31,10 +33,36 @@ module.exports = ({ id }) => {
                 n.spaces.before = n.spaces.after = ''
                 return false
               }
+              if (n.type === 'pseudo' && n.value === ':deep') {
+                if (n.nodes.length) {
+                  let last = n
+                  n.nodes[0].each((ss) => {
+                    selector.insertAfter(last, ss)
+                    last = ss
+                  })
+                  const prev = n.prev()
+                  if (!prev || !isSpaceCombinator(prev)) {
+                    selector.insertAfter(
+                      n,
+                      selectorParser.combinator({
+                        value: ' '
+                      })
+                    )
+                  }
+                  n.remove()
+                } else {
+                  const prev = n.prev()
+                  if (prev && isSpaceCombinator(prev)) {
+                    prev.remove()
+                  }
+                  n.remove()
+                }
+                return false
+              }
               // /deep/ alias for >>>, since >>> doesn't work in SASS
               if (n.type === 'tag' && n.value === '/deep/') {
                 const prev = n.prev()
-                if (prev && prev.type === 'combinator' && prev.value === ' ') {
+                if (prev && isSpaceCombinator(prev)) {
                   prev.remove()
                 }
                 n.remove()

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

@@ -0,0 +1,118 @@
+const MagicString = require('magic-string')
+
+function cssConditionalStrip (cssContent, defs) {
+  const ms = new MagicString(cssContent)
+
+  // 正则匹配 @mpx-if, @mpx-elif, @mpx-else, @mpx-endif 的模式
+  const ifPattern = /\/\*\s*@mpx-if\s*\((.*?)\)\s*\*\//gs
+  const elifPattern = /\/\*\s*@mpx-elif\s*\((.*?)\)\s*\*\//gs
+  const elsePattern = /\/\*\s*@mpx-else\s*\*\//gs
+  const endifPattern = /\/\*\s*@mpx-endif\s*\*\//gs
+
+  function evaluateCondition (condition) {
+    // 替换变量
+    for (const key in defs) {
+      condition = condition.replace(new RegExp(`\\b${key}\\b`, 'g'), JSON.stringify(defs[key]))
+    }
+
+    // 解析条件表达式
+    try {
+      // eslint-disable-next-line no-new-func
+      return Function('"use strict";return (' + condition + ')')()
+    } catch (e) {
+      throw new Error(`Failed to evaluate condition: ${condition}`)
+    }
+  }
+
+  let currentStart = 0
+  function processCondition (start, end, condition) {
+    const conditionResult = evaluateCondition(condition)
+    let hasElse = false
+    let elseStart = -1
+    let elseLen = 0
+    currentStart = end + 1
+
+    while (currentStart < ms.original.length) {
+      elsePattern.lastIndex = currentStart
+      const elseMatch = elsePattern.exec(ms.original)
+      if (elseMatch) {
+        elseLen = elseMatch[0].length
+      }
+
+      ifPattern.lastIndex = currentStart
+      const ifMatch = ifPattern.exec(ms.original)
+
+      elifPattern.lastIndex = currentStart
+      const elseIfMatch = elifPattern.exec(ms.original)
+
+      endifPattern.lastIndex = currentStart
+      const endifMatch = endifPattern.exec(ms.original)
+
+      const nextIf = ifMatch ? ifMatch.index : Infinity
+      const nextElseIf = elseIfMatch ? elseIfMatch.index : Infinity
+      const nextElse = elseMatch ? elseMatch.index : Infinity
+      const nextEndif = endifMatch ? endifMatch.index : Infinity
+
+      const nextMarker = Math.min(nextIf, nextElseIf, nextElse, nextEndif)
+
+      if (nextMarker === Infinity) break
+
+      if (nextMarker === nextElse) {
+        // 处理 @mpx-else
+        hasElse = true
+        elseStart = nextElse
+        currentStart = elseMatch.index + elseLen
+        ms.remove(elseStart, elseStart + elseLen) // 移除 @mpx-else 注释
+      } else if (nextMarker === nextElseIf) {
+        // 处理 @mpx-elif
+        if (!conditionResult) {
+          // 前边的if为false，则直接移除前边代码
+          ms.remove(start, nextElseIf)
+        }
+        currentStart = nextElseIf + elseIfMatch[0].length
+        ms.remove(nextElseIf, nextElseIf + elseIfMatch[0].length) // 移除 @mpx-elif 注释
+        processCondition(nextElseIf, nextElseIf + elseIfMatch[0].length, elseIfMatch[1])
+      } else if (nextMarker === nextIf) {
+        // 处理嵌套的 @mpx-if
+        // 如果遇到了新的 @mpx-if，则递归处理
+        currentStart = nextIf + ifMatch[0].length
+        ms.remove(nextIf, nextIf + ifMatch[0].length) // 移除 @mpx-if 注释
+        processCondition(nextIf, nextIf + ifMatch[0].length, ifMatch[1])
+      } else if (nextMarker === nextEndif) {
+        // 处理 @mpx-endif block块
+        if (conditionResult && hasElse) {
+          // 移除 @mpx-else 至 @mpx-endif 代码
+          ms.remove(elseStart, endifMatch.index + endifMatch[0].length)
+        } else if (!conditionResult && hasElse) {
+          ms.remove(start, elseStart + elseLen)
+        } else if (!conditionResult) {
+          ms.remove(start, endifMatch.index + endifMatch[0].length)
+        }
+        ms.remove(endifMatch.index, endifMatch.index + endifMatch[0].length) // 移除 @mpx-endif 注释
+        currentStart = endifMatch.index + endifMatch[0].length
+        break
+      }
+      // 兜底更新当前开始位置
+      if (currentStart < nextMarker) {
+        currentStart = nextMarker + 1
+      }
+    }
+  }
+
+  let match
+  while ((match = ifPattern.exec(ms.original)) !== null) {
+    processCondition(match.index, ifPattern.lastIndex, match[1])
+    // 移除匹配到的 @mpx-if 注释
+    ms.remove(match.index, match.index + match[0].length)
+    ifPattern.lastIndex = currentStart
+  }
+
+  return ms.toString()
+}
+
+module.exports = function (css) {
+  this.cacheable()
+  const mpx = this.getMpx()
+  const defs = mpx.defs
+  return cssConditionalStrip(css, defs)
+}

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
         }