@mpxjs/webpack-plugin 2.8.50 → 2.8.53

package/lib/index.js

@@ -173,6 +173,12 @@ class MpxWebpackPlugin {
     options.retryRequireAsync = options.retryRequireAsync || false
     options.enableAliRequireAsync = options.enableAliRequireAsync || false
     options.optimizeSize = options.optimizeSize || false
+    let proxyComponentEventsRules = []
+    const proxyComponentEventsRulesRaw = options.proxyComponentEventsRules
+    if (proxyComponentEventsRulesRaw) {
+      proxyComponentEventsRules = Array.isArray(proxyComponentEventsRulesRaw) ? proxyComponentEventsRulesRaw : [proxyComponentEventsRulesRaw]
+    }
+    options.proxyComponentEventsRules = proxyComponentEventsRules
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
@@ -640,6 +646,7 @@ class MpxWebpackPlugin {
           enableRequireAsync: this.options.mode === 'wx' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
           partialCompile: this.options.partialCompile,
           asyncSubpackageRules: this.options.asyncSubpackageRules,
+          proxyComponentEventsRules: this.options.proxyComponentEventsRules,
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))

package/lib/json-compiler/index.js

@@ -154,6 +154,9 @@ module.exports = function (content) {
       if (!json.usingComponents) {
         json.usingComponents = {}
       }
+      if (!json.component && mode === 'swan') {
+        json.component = true
+      }
     }
   } else if (componentsMap[resourcePath]) {
     // component

package/lib/loader.js

@@ -280,7 +280,7 @@ module.exports = function (content) {
       let ctor = 'App'
       if (ctorType === 'page') {
         // swan也默认使用Page构造器
-        if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
+        if (mpx.forceUsePageCtor || mode === 'ali') {
           ctor = 'Page'
         } else {
           ctor = 'Component'

package/lib/native-loader.js

@@ -214,7 +214,7 @@ module.exports = function (content) {
       let ctorType = 'app'
       if (pagesMap[resourcePath]) {
         ctorType = 'page'
-        if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
+        if (mpx.forceUsePageCtor || mode === 'ali') {
           ctor = 'Page'
         } else {
           ctor = 'Component'

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

@@ -345,7 +345,11 @@
             class: 'circle circle-c'
           }),
         ]
-      ) : null
+      ) : this.$slots.refresher
+        ? createElement('div', {
+          class: 'mpx-pull-down-slot',
+        }, this.$slots.refresher)
+        : null
 
       const pullDownWrapper = this.refresherEnabled ? createElement('div', {
         class: 'mpx-pull-down-wrapper',
@@ -379,7 +383,11 @@
         bottom: 20px
         left: 50%
         transform: translateX(-50%)
-
+      .mpx-pull-down-slot
+        position: absolute
+        width: 100%
+        height: auto
+        bottom: 0
       .mpx-pull-down-content-black
         .circle
           display: inline-block;

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

@@ -1,14 +1,15 @@
 <template>
-  <iframe ref="mpxIframe" class="mpx-iframe" :src="src"></iframe>
+  <iframe ref="mpxIframe" class="mpx-iframe" :src="currentUrl"></iframe>
 </template>
 
 <script>
   import { getCustomEvent } from './getInnerListeners'
-  import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab} from '@mpxjs/api-proxy/src/web/api/index'
+  import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy/src/web/api/index'
 
   const eventLoad = 'load'
   const eventError = 'error'
   const eventMessage = 'message'
+  const mpx = global.__mpx
   export default {
     data: function () {
       return {
@@ -17,7 +18,8 @@
         Loaded: false,
         isActived: false,
         mpxIframe: null,
-        isPostMessage: false
+        isPostMessage: false,
+        currentUrl: ''
       }
     },
     props: {
@@ -25,22 +27,29 @@
         type: String
       }
     },
-    computed: {
-      mainDomain () {
-        let domain
-        const src = location.href
-        let index = src.indexOf('?')
-        if (index > -1) {
-          domain = src.substr(0, index)
-          return domain
-        }
-        domain = src.split('/')
-        if (domain[2]) {
-          domain = domain[0] + '//' + domain[2]
+    watch: {
+      src (value) {
+        let host
+        host = value.split('/')
+        if (host[2]) {
+          host = host[0] + '//' + host[2]
         } else {
-          domain = ''
+          host = ''
+        }
+        const hostValidate = this.hostValidate(host)
+        if (!hostValidate) {
+          console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
+          return
         }
-        return domain
+        this.currentUrl = value
+        this.mpxIframe = this.$refs.mpxIframe
+        this.mpxIframe.addEventListener('load', (event) => {
+          this.Loaded = true
+          const loadData = {
+            src: this.src
+          }
+          this.$emit(eventLoad, getCustomEvent(eventLoad, loadData, this))
+        })
       }
     },
     mounted () {
@@ -52,48 +61,67 @@
           this.$emit(eventError, getCustomEvent(eventError, loadData, this))
         }
       }, 1000)
-      this.mpxIframe = this.$refs.mpxIframe
-      this.mpxIframe.addEventListener('load', (event) => {
-        event.currentTarget.contentWindow.postMessage(this.mainDomain, '*')
-      })
       window.addEventListener('message', (event) => {
+        const hostValidate = this.hostValidate(event.origin)
+        const hasPostMessage = this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage
         const data = event.data
-        const value = data.detail && data.detail.data && data.detail.data
-        if (!this.isActived) {
+        const value = data.payload
+        if (!this.isActived || !hostValidate) {
           return
         }
+        let asyncCallback = null
         switch (data.type) {
-          case eventMessage:
+          case 'postMessage':
             this.isPostMessage = true
             this.messageList.push(value.data)
+            asyncCallback = Promise.resolve({
+              errMsg: 'invokeWebappApi:ok'
+            })
             break
           case 'navigateTo':
             this.isActived = false
-            navigateTo(value)
+            asyncCallback = navigateTo(value)
             break
           case 'navigateBack':
             this.isActived = false
-            value ? navigateBack(value) : navigateBack()
+            asyncCallback = value ? navigateBack(value) : navigateBack()
             break
           case 'redirectTo':
             this.isActived = false
-            redirectTo(value)
+            asyncCallback = redirectTo(value)
             break
           case 'switchTab':
             this.isActived = false
-            switchTab(value)
+            asyncCallback = switchTab(value)
             break
           case 'reLaunch':
             this.isActived = false
-            reLaunch(value)
+            asyncCallback = reLaunch(value)
             break
-          case 'load':
-            this.Loaded = true
-            const loadData = {
-              src: this.src
+          case 'getLocation':
+            const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation
+            if (getLocation) {
+              asyncCallback = getLocation()
+            } else {
+              asyncCallback = Promise.reject({
+                errMsg: '未在apiImplementations中配置getLocation方法'
+              })
             }
-            this.$emit(eventLoad, getCustomEvent(eventLoad, loadData, this))
+            break
         }
+        asyncCallback && asyncCallback.then((res) => {
+          hasPostMessage && this.mpxIframe.contentWindow.postMessage({
+            type: data.type,
+            callbackId: data.callbackId,
+            result: res
+          }, event.origin)
+        }).catch((error) => {
+          hasPostMessage && this.mpxIframe.contentWindow.postMessage({
+            type: data.type,
+            callbackId: data.callbackId,
+            error
+          }, event.origin)
+        })
       })
     },
     activated () {
@@ -119,6 +147,18 @@
         data: this.messageList
       }
       this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+    },
+    methods: {
+      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
+        }
+      }
     }
   }
 </script>

package/lib/style-compiler/index.js

@@ -47,6 +47,10 @@ module.exports = function (css, map) {
       plugins.push(transSpecial({ id }))
     }
 
+    if (mode === 'web') {
+      plugins.push(transSpecial({ id }))
+    }
+
     plugins.push(pluginCondStrip({
       defs
     }))

package/lib/template-compiler/compiler.js

@@ -3,7 +3,6 @@ const he = require('he')
 const config = require('../config')
 const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
 const normalize = require('../utils/normalize')
-const { normalizeCondition } = require('../utils/match-condition')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 const isEmptyObject = require('../utils/is-empty-object')
 const getRulesRunner = require('../platform/index')
@@ -1751,67 +1750,47 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processAliAddComponentRootView (el, options) {
-  const processAttrsConditions = [
-    { condition: /^(on|catch)Tap$/, action: 'clone' },
-    { condition: /^(on|catch)TouchStart$/, action: 'clone' },
-    { condition: /^(on|catch)TouchMove$/, action: 'clone' },
-    { condition: /^(on|catch)TouchEnd$/, action: 'clone' },
-    { condition: /^(on|catch)TouchCancel$/, action: 'clone' },
-    { condition: /^(on|catch)LongTap$/, action: 'clone' },
-    { condition: /^data-/, action: 'clone' },
-    { condition: /^style$/, action: 'move' },
-    { condition: /^slot$/, action: 'move' }
-  ]
-  const processAppendAttrsRules = [
-    { name: 'class', value: `${MPX_ROOT_VIEW} host-${options.moduleId}` }
-  ]
-  const newElAttrs = []
-  const allAttrs = cloneAttrsList(el.attrsList)
-
-  function processClone (attr) {
-    newElAttrs.push(attr)
-  }
-
-  function processMove (attr) {
-    getAndRemoveAttr(el, attr.name)
-    newElAttrs.push(attr)
+function processRootViewEventHack (el, options, root) {
+  // 只处理组件根节点
+  if (!(options.isComponent && el === root && isRealNode(el))) {
+    return
   }
-
-  function processAppendRules (el) {
-    processAppendAttrsRules.forEach((rule) => {
-      const getNeedAppendAttrValue = el.attrsMap[rule.name]
-      const value = getNeedAppendAttrValue ? getNeedAppendAttrValue + ' ' + rule.value : rule.value
-      newElAttrs.push({
-        name: rule.name,
-        value
-      })
+  const { proxyComponentEvents } = options
+  if (proxyComponentEvents) {
+    proxyComponentEvents.forEach((type) => {
+      addAttrs(el, [{
+        name: type,
+        value: '__proxyEvent'
+      }])
     })
   }
+}
 
-  processAttrsConditions.forEach(item => {
-    const matcher = normalizeCondition(item.condition)
-    allAttrs.forEach((attr) => {
-      if (matcher(attr.name)) {
-        if (item.action === 'clone') {
-          processClone(attr)
-        } else if (item.action === 'move') {
-          processMove(attr)
-        }
+function processRootViewStyleClassHack (el, options, root) {
+  // 处理组件根节点
+  if (options.isComponent && el === root && isRealNode(el)) {
+    const processor = ({ name, value, typeName }) => {
+      const sep = name === 'style' ? ';' : ' '
+      value = value ? `{{${typeName}||''}}${sep}${value}` : `{{${typeName}||''}}`
+      return [name, value]
+    }
+
+    ['style', 'class'].forEach((type) => {
+      const exp = getAndRemoveAttr(el, type).val
+      const typeName = type === 'class' ? 'className' : type
+      const [newName, newValue] = processor({
+        name: type,
+        value: exp,
+        typeName
+      })
+      if (newValue !== undefined) {
+        addAttrs(el, [{
+          name: newName,
+          value: newValue
+        }])
       }
     })
-  })
-
-  processAppendRules(el)
-  const componentWrapView = createASTElement('view', newElAttrs)
-  moveBaseDirective(componentWrapView, el)
-  if (el.is && el.components) {
-    el = postProcessComponentIs(el)
   }
-
-  replaceNode(el, componentWrapView, true)
-  addChild(componentWrapView, el)
-  return componentWrapView
 }
 
 // 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
@@ -1823,17 +1802,18 @@ function getVirtualHostRoot (options, meta) {
       !meta.options && (meta.options = {})
       meta.options.virtualHost = true
     }
-    // if (mode === 'ali' && !options.hasVirtualHost) {
-    //   // ali组件根节点实体化
-    //   let rootView = createASTElement('view', [
-    //     {
-    //       name: 'class',
-    //       value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
-    //     }
-    //   ])
-    //   processElement(rootView, rootView, options, meta)
-    //   return rootView
-    // }
+    if ((mode === 'ali' || mode === 'web') && !options.hasVirtualHost) {
+      // ali组件根节点实体化
+      const rootView = createASTElement('view', [
+        {
+          name: 'class',
+          value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
+        }
+      ])
+      // 添加时间处理
+      processElement(rootView, rootView, options, meta)
+      return rootView
+    }
   }
   return getTempNode()
 }
@@ -2012,6 +1992,16 @@ function processMpxTagName (el) {
 }
 
 function processElement (el, root, options, meta) {
+  const transAli = mode === 'ali' && srcMode === 'wx'
+  const transWeb = mode === 'web' && srcMode === 'wx'
+  if (transAli) {
+    processRootViewStyleClassHack(el, options, root)
+    processRootViewEventHack(el, options, root)
+  }
+  if (transWeb) {
+    processRootViewEventHack(el, options, root)
+  }
+
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
   if (el._atModeStatus === 'mismatch') {
@@ -2031,8 +2021,6 @@ function processElement (el, root, options, meta) {
 
   processInjectWxs(el, meta)
 
-  const transAli = mode === 'ali' && srcMode === 'wx'
-
   if (mode === 'web') {
     // 收集内建组件
     processBuiltInComponents(el, meta)
@@ -2084,11 +2072,7 @@ function closeElement (el, meta, options) {
   postProcessWxs(el, meta)
 
   if (!pass) {
-    if (isComponentNode(el, options) && !options.hasVirtualHost && mode === 'ali') {
-      el = processAliAddComponentRootView(el, options)
-    } else {
-      el = postProcessComponentIs(el)
-    }
+    el = postProcessComponentIs(el)
   }
   postProcessFor(el)
   postProcessIf(el)

package/lib/template-compiler/index.js

@@ -40,6 +40,14 @@ module.exports = function (raw) {
     )
   }
 
+  let proxyComponentEvents = null
+  for (const item of mpx.proxyComponentEventsRules) {
+    if (matchCondition(resourcePath, item)) {
+      const eventsRaw = item.events
+      proxyComponentEvents = Array.isArray(eventsRaw) ? eventsRaw : [eventsRaw]
+      break
+    }
+  }
   const { root: ast, meta } = compiler.parse(raw, {
     warn,
     error,
@@ -62,7 +70,8 @@ module.exports = function (raw) {
     checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
     globalComponents: Object.keys(mpx.usingComponents),
     forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
-    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
+    proxyComponentEvents
   })
 
   if (meta.wxsContentMap) {
@@ -133,6 +142,10 @@ global.currentInject.getRefsData = function () {
 };\n`
   }
 
+  if (meta.options) {
+    resultSource += `global.currentInject.injectOptions = ${JSON.stringify(meta.options)};` + '\n'
+  }
+
   this.emitFile(resourcePath, '', undefined, {
     skipEmit: true,
     extractedResultSource: resultSource

package/lib/web/processScript.js

@@ -182,8 +182,10 @@ module.exports = function (script, {
             pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
           }
         }
-
-        if (pageCfg.isFirst) {
+        if (pagePath === jsonConfig.entryPagePath) {
+          firstPage = pagePath
+        }
+        if (!firstPage && pageCfg.isFirst) {
           firstPage = pagePath
         }
       })

package/lib/web/processTemplate.js

@@ -2,23 +2,7 @@ const templateCompiler = require('../template-compiler/compiler')
 const genComponentTag = require('../utils/gen-component-tag')
 const addQuery = require('../utils/add-query')
 const parseRequest = require('../utils/parse-request')
-// const { matchCondition } = require('../utils/match-condition')
-
-function calculateRootEleChild (arr) {
-  if (!arr) {
-    return 0
-  }
-  return arr.reduce((total, item) => {
-    if (item.type === 1) {
-      if (item.tag === 'template') {
-        total += calculateRootEleChild(item.children)
-      } else {
-        total += 1
-      }
-    }
-    return total
-  }, 0)
-}
+const { matchCondition } = require('../utils/match-condition')
 
 module.exports = function (template, {
   loaderContext,
@@ -38,8 +22,9 @@ module.exports = function (template, {
     wxsContentMap,
     decodeHTMLText,
     externalClasses,
-    checkUsingComponents
-    // autoVirtualHostRules
+    checkUsingComponents,
+    proxyComponentEventsRules,
+    autoVirtualHostRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
@@ -72,6 +57,16 @@ module.exports = function (template, {
       }
       if (template.content) {
         const templateSrcMode = template.mode || srcMode
+
+        let proxyComponentEvents = null
+        for (const item of proxyComponentEventsRules) {
+          if (matchCondition(resourcePath, item)) {
+            const eventsRaw = item.events
+            proxyComponentEvents = Array.isArray(eventsRaw) ? eventsRaw : [eventsRaw]
+            break
+          }
+        }
+
         const { root, meta } = templateCompiler.parse(template.content, {
           warn: (msg) => {
             loaderContext.emitWarning(
@@ -101,9 +96,9 @@ module.exports = function (template, {
           // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
           globalComponents: [],
           // web模式下实现抽象组件
-          componentGenerics
-          // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
-          // hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
+          componentGenerics,
+          proxyComponentEvents,
+          hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
         })
         if (meta.wxsModuleMap) {
           wxsModuleMap = meta.wxsModuleMap
@@ -123,18 +118,6 @@ module.exports = function (template, {
         if (meta.genericsInfo) {
           genericsInfo = meta.genericsInfo
         }
-        // 输出H5有多个root element时, 使用mpx-root-view标签包裹
-        // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
-        if (root.tag === 'temp-node') {
-          const childLen = calculateRootEleChild(root.children)
-          if (childLen >= 2) {
-            root.tag = 'div'
-            templateCompiler.addAttrs(root, [{
-              name: 'class',
-              value: 'mpx-root-view'
-            }])
-          }
-        }
         return templateCompiler.serialize(root)
       }
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.50",
+  "version": "2.8.53",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -81,5 +81,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "32f30631cc5f37503fb7791cb3b0d6c901ee2b27"
+  "gitHead": "cad6b8f0d2b1c8e520bfafa1de3bbf332466d801"
 }