@mpxjs/webpack-plugin 2.8.56 → 2.8.59

package/lib/index.js

@@ -173,12 +173,6 @@ 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
@@ -646,7 +640,6 @@ 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/runtime/components/web/mpx-video.vue

@@ -1,20 +1,14 @@
 <template>
   <video
     ref="_mpx_video_ref"
-    :class="classList"
-    :src="src"
-    :controls="showControlsTool"
-    :autoplay="autoplay"
-    :loop="loop"
-    :muted="mutedCopy"
-    :poster="poster"
+    class="video-js"
     v-bind="playsinlineAttr"
-  >
-  </video>
-</template>
-
-<script>
+   ></video>
+ </template>
+ <script>
   import { inheritEvent } from './getInnerListeners'
+  import videojs from 'video.js'
+  import 'video.js/dist/video-js.min.css'
 
   export default {
     name: 'mpx-video',
@@ -54,7 +48,7 @@
         type: Boolean,
         default: false
       },
-      initialTime: { // done
+      initialTime: {
         type: Number,
         default: 0
       },
@@ -63,6 +57,10 @@
         type: Boolean,
         default: true
       },
+      showBottomProgress: { // done
+        type: Boolean,
+        default: true
+      },
       showFullscreenBtn: { // done
         type: Boolean,
         default: true
@@ -125,135 +123,166 @@
         default: false
       },
       playsinline: {
-        type: Boolean,
-        default: true
-      }
-    },
-    computed: {
-      playsinlineAttr () {
-        if (!this.playsinline) return {}
-        return {
-          'webkit-playsinline': true,
-          'playsinline': true,
-          'x5-playsinline': true
-        }
-      }
+      type: Boolean,
+      default: true
+    }
     },
     data () {
       return {
-        showControlsTool: this.controls,
-        mutedCopy: this.muted,
-        classList: ''
       }
     },
+    computed: {
+    playsinlineAttr () {
+      if (!this.playsinline) return {}
+      return {
+        'webkit-playsinline': true,
+        'playsinline': true,
+        'x5-playsinline': true,
+        'x5-video-orientation': 'landscape|portrait'
+      }
+    }
+  },
     watch: {
-      muted (val) {
-        this.mutedCopy = val
+      muted: function (val) {
+        this._player?.muted(val)
+      },
+      controls: function (show) {
+        this.$emit('controlstoggle', inheritEvent('controlstoggle', {}, { show }))
       }
     },
     mounted () {
+      const videoNode = this.$refs['_mpx_video_ref']
+      this._player = videojs(videoNode, {
+        controls: true,
+        sources:[
+          {
+            src: this.src
+          }
+        ],
+        autoplay: this.autoplay,
+        loop: this.loop,
+         /**
+          log 若 controls 属性值为 false 则设置 poster 无效
+        */
+        poster: this.controls ? this.poster : ''
+      }, function () {
+      })
+      this.initPlayer()
       this.initStyle()
       this.initEvent()
     },
     methods: {
-      initStyle () {
-        const videoNode = this.$refs['_mpx_video_ref']
+      initPlayer () {
+        this._player.muted(this.muted)
         if (this.initialTime) {
-          videoNode.currentTime = this.initialTime
+          this._player.currentTime(this.initialTime)
         }
-        if (this.autoplay) { // log 解决autoplay无法自动播放问题
-          this.mutedCopy = true
-        }
-        if (!this.showProgress) this.classList += ' mpx-no-show_progress'
-        if (!this.showFullscreenBtn) this.classList += ' mpx-no-show_fullscreen_btn'
-        if (!this.showPlayBtn) this.classList += ' mpx-no-show_play_btn'
-        if (!this.showCenterPlayBtn) this.classList += ' mpx-no-show_center_play_btn'
-        if (!this.showMuteBtn) this.classList += ' mpx-no-show_mute_btn'
       },
-      initEvent () {
-        const videoNode = this.$refs['_mpx_video_ref']
+      initStyle () {
+        if (!this.controls) this._player.el_.classList.add('mpx-no-show_controls')
+
+        if (!this.showBottomProgress) this._player.el_.classList.add('mpx-no-show_progress')
+
+        /**
+          showProgress若不设置，宽度大于240时才会显示
+        */
+        if (!this.showProgress || (this._player.el_.offsetWidth < 240 && this.showProgress)) this._player.el_.classList.add('mpx-no-show_progress')
 
-        videoNode.addEventListener('play', (e) => {
+        if (!this.showFullscreenBtn) this._player.el_.classList.add('mpx-no-show_fullscreen_btn')
+
+        if (!this.showPlayBtn) this._player.el_.classList.add('mpx-no-show_play_btn')
+
+        if (!this.showCenterPlayBtn) this._player.el_.classList.add('mpx-no-show_center_play_btn')
+
+        if (!this.showMuteBtn) this._player.el_.classList.add('mpx-no-show_mute_btn')
+      },
+      initEvent () {
+        this._player.on('play', (e) => {
           this.$emit('play', inheritEvent('play', e, {}))
         })
 
-        videoNode.addEventListener('pause', (e) => {
+        this._player.on('pause', (e) => {
           this.$emit('pause', inheritEvent('pause', e, {}))
         })
 
-        videoNode.addEventListener('ended', (e) => {
+        this._player.on('ended', (e) => {
           this.$emit('ended', inheritEvent('ended', e, {}))
         })
 
-        videoNode.addEventListener('timeupdate', (e) => {
-          const eNode = e.target
-          this.$emit('timeupdate', inheritEvent('timeupdate', e, { currentTime: eNode.currentTime, duration: eNode.duration }))
+        this._player.on('timeupdate', (e) => {
+          this.$emit('timeupdate', inheritEvent('timeupdate', e, {}))
         })
 
-        videoNode.addEventListener('error', (e) => {
+        this._player.on('error', (e) => {
           this.$emit('error', inheritEvent('error', e, {}))
         })
 
-        videoNode.addEventListener('waiting', (e) => {
+        this._player.on('waiting', (e) => {
           this.$emit('waiting', inheritEvent('waiting', e, {}))
         })
-
-        videoNode.addEventListener('loadedmetadata', (e) => {
-          const eNode = e.target
-          this.$emit('loadedmetadata', inheritEvent('loadedmetadata', e, { width: eNode.videoWidth, height: eNode.videoHeight, duration: eNode.duration }))
+        this._player.on('loadedmetadata', (e) => {
+          this.$emit('loadedmetadata', inheritEvent('loadedmetadata', e, {}))
         })
 
-        videoNode.addEventListener('progress', (e) => {
+        this._player.on('progress', (e) => {
           const eNode = e.target
           const buffered = (eNode?.buffered?.end(0)) / (eNode?.duration)
           this.$emit('progress', inheritEvent('progress', e, { buffered: buffered * 100 }))
         })
 
-        videoNode.addEventListener('seeked', (e) => {
+        this._player.on('seeked', (e) => {
           const eNode = e.target
-          this.$emit('seekcomplete', inheritEvent('seekcomplete', e, { position: eNode.currentTime }))
+          this.$emit('seekcomplete', inheritEvent('seekcomplete', e, { position: eNode.currentTime  }))
         })
-
-        videoNode.addEventListener('fullscreenchange', (e) => {
-          //  TODO direction
-          if (document.isFullScreen) {
-            this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: true }))
-          } else {
-            this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: false }))
+        this._player.on('fullscreenchange', (e) => {
+          if (!this._player.paused()) {
+            // hack: 解决退出全屏自动暂停
+            setTimeout(() => {
+              this._player.play()
+            }, 500)
           }
+          this.$emit('fullscreenchange', inheritEvent('fullscreenchange', e, { fullScreen: this._player.isFullscreen() }))
         })
 
-        videoNode.addEventListener('enterpictureinpicture', (e) => {
+        this._player.on('enterpictureinpicture', (e) => {
           this.$emit('enterpictureinpicture', inheritEvent('enterpictureinpicture', e, {}))
         })
 
-        videoNode.addEventListener('leavepictureinpicture', (e) => {
+        this._player.on('leavepictureinpicture', (e) => {
           this.$emit('leavepictureinpicture', inheritEvent('leavepictureinpicture', e, {}))
         })
+
       }
     }
   }
-</script>
+ </script>
+
+ <style lang="stylus">
+
+    .vjs-chapters-button
+      display: none !important
+
+   .mpx-no-show_controls
+     .vjs-control-bar
+       display none !important
 
-<style lang="stylus">
-  .mpx-video-container
-    .mpx-no-show_progress
-      &::-webkit-media-controls-timeline
-        display none !important
+   .mpx-no-show_progress
+     .vjs-progress-control
+       display none !important
 
-    .mpx-no-show_fullscreen_btn
-      &::-webkit-media-controls-fullscreen-button
-        display none !important
+   .mpx-no-show_fullscreen_btn
+     .vjs-fullscreen-control
+       display none !important
 
-    .mpx-no-show_play_btn
-      &::-webkit-media-controls-play-button
-        display none !important
+   .mpx-no-show_play_btn
+     .vjs-play-control
+       display none !important
 
-    .mpx-no-show_center_play_btn
-      &::-webkit-media-controls-start-playback-button
-        display none !important
+   .mpx-no-show_center_play_btn
+     .vjs-big-play-button
+       display none !important
 
-    .mpx-no-show_mute_btn
-      &::-webkit-media-controls-mute-button
-        display none !important
-</style>
+   .mpx-no-show_mute_btn
+     .vjs-mute-control
+       display none !important
+ </style>

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

@@ -96,6 +96,16 @@ function checkDelAndGetPath (path) {
       } else {
         delPath = current.parentPath
       }
+    } else if (t.isLogicalExpression(current.container)) { // case: a || ''
+      const key = current.key === 'left' ? 'right' : 'left'
+      if (t.isLiteral(current.parent[key])) {
+        delPath = current.parentPath
+      } else {
+        canDel = false
+        break
+      }
+    } else if (current.key === 'expression' && t.isExpressionStatement(current.parentPath)) { // dealRemove删除节点时需要
+      delPath = current.parentPath
     } else {
       break
     }
@@ -152,10 +162,6 @@ function checkPrefix (keys, key) {
 }
 
 function dealRemove (path, replace) {
-  while (path.key === 'expression' && t.isExpressionStatement(path.parentPath)) {
-    path = path.parentPath
-  }
-
   try {
     if (replace) {
       path.replaceWith(t.stringLiteral(''))
@@ -163,9 +169,7 @@ function dealRemove (path, replace) {
       t.validate(path, path.key, null)
       path.remove()
     }
-  } catch (e) {
-    console.error(e)
-  }
+  } catch (e) {}
 }
 
 module.exports = {
@@ -202,9 +206,23 @@ module.exports = {
       Identifier (path) {
         if (
           checkBindThis(path) &&
-          !path.scope.hasBinding(path.node.name) &&
           !ignoreMap[path.node.name]
         ) {
+          const scopeBinding = path.scope.hasBinding(path.node.name)
+          // 删除局部作用域的变量
+          if (scopeBinding) {
+            if (renderReduce) {
+              const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
+              if (canDel && !ignore) {
+                delPath.delInfo = {
+                  isLocal: true,
+                  canDel,
+                  replace
+                }
+              }
+            }
+            return
+          }
           const { last, keyPath } = calPropName(path)
           path.needBind = true
           if (needCollect) {
@@ -272,10 +290,14 @@ module.exports = {
       enter (path) {
         // 删除重复变量
         if (path.delInfo) {
-          const { keyPath, canDel, replace } = path.delInfo
+          const { keyPath, canDel, isLocal, replace } = path.delInfo
           delete path.delInfo
 
           if (canDel) {
+            if (isLocal) { // 局部作用域里的变量，可直接删除
+              dealRemove(path, replace)
+              return
+            }
             const data = bindingsMap.get(currentBlock)
             const { bindings, pBindings } = data
             const allBindings = Object.assign({}, pBindings, bindings)

package/lib/template-compiler/compiler.js

@@ -3,6 +3,7 @@ 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')
@@ -1750,68 +1751,105 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processRootViewEventHack (el, options, root) {
-  // 只处理组件根节点
-  if (!(options.isComponent && el === root && isRealNode(el))) {
-    return
-  }
-  const { proxyComponentEvents } = options
-  if (proxyComponentEvents) {
-    proxyComponentEvents.forEach((type) => {
-      addAttrs(el, [{
-        name: type,
-        value: '__proxyEvent'
-      }])
-    })
+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: /^id$/, 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 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]
-    }
+  function processMove (attr) {
+    getAndRemoveAttr(el, attr.name)
+    newElAttrs.push(attr)
+  }
 
-    ['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
+  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
       })
-      if (newValue !== undefined) {
-        addAttrs(el, [{
-          name: newName,
-          value: newValue
-        }])
+    })
+  }
+
+  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)
+        }
       }
     })
+  })
+
+  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。其他跳过。
 function getVirtualHostRoot (options, meta) {
-  if (srcMode === 'wx' && options.isComponent) {
-    // 处理组件时
-    if (mode === 'wx' && options.hasVirtualHost) {
-      // wx组件注入virtualHost配置
-      !meta.options && (meta.options = {})
-      meta.options.virtualHost = true
-    }
-    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
+  if (srcMode === 'wx') {
+    if (options.isComponent) {
+      if ((mode === 'wx') && options.hasVirtualHost) {
+        // wx组件注入virtualHost配置
+        !meta.options && (meta.options = {})
+        meta.options.virtualHost = true
+      }
+      if ((mode === 'web') && !options.hasVirtualHost) {
+        // ali组件根节点实体化
+        const rootView = createASTElement('view', [
+          {
+            name: 'class',
+            value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
+          },
+          {
+            name: 'v-on',
+            value: '$listeners'
+          }
+        ])
+        rootView.hasEvent = true
+        processElement(rootView, rootView, options, meta)
+        return rootView
+      }
+    }
+    if (options.isPage) {
+      if (mode === 'web') {
+        return createASTElement('div', [
+          {
+            name: 'class',
+            value: 'page'
+          }
+        ])
+      }
     }
   }
   return getTempNode()
@@ -1991,16 +2029,6 @@ 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') {
@@ -2020,6 +2048,8 @@ function processElement (el, root, options, meta) {
 
   processInjectWxs(el, meta)
 
+  const transAli = mode === 'ali' && srcMode === 'wx'
+
   if (mode === 'web') {
     // 收集内建组件
     processBuiltInComponents(el, meta)
@@ -2071,7 +2101,11 @@ function closeElement (el, meta, options) {
   postProcessWxs(el, meta)
 
   if (!pass) {
-    el = postProcessComponentIs(el)
+    if (isComponentNode(el, options) && !options.hasVirtualHost && mode === 'ali') {
+      el = processAliAddComponentRootView(el, options)
+    } else {
+      el = postProcessComponentIs(el)
+    }
   }
   postProcessFor(el)
   postProcessIf(el)

package/lib/template-compiler/index.js

@@ -19,6 +19,7 @@ module.exports = function (raw) {
   const localSrcMode = queryObj.mode
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
   const componentsMap = mpx.componentsMap[packageName]
+  const pagesMap = mpx.pagesMap
   const wxsContentMap = mpx.wxsContentMap
   const renderOptimizeRules = mpx.renderOptimizeRules
   const usingComponents = queryObj.usingComponents || []
@@ -40,14 +41,6 @@ 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,
@@ -56,6 +49,7 @@ module.exports = function (raw) {
     hasComment,
     isNative,
     isComponent: !!componentsMap[resourcePath],
+    isPage: !!pagesMap[resourcePath],
     mode,
     env,
     srcMode: localSrcMode || globalSrcMode,
@@ -70,8 +64,7 @@ module.exports = function (raw) {
     checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
     globalComponents: Object.keys(mpx.usingComponents),
     forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
-    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
-    proxyComponentEvents
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
   })
 
   if (meta.wxsContentMap) {

package/lib/web/processTemplate.js

@@ -23,7 +23,6 @@ module.exports = function (template, {
     decodeHTMLText,
     externalClasses,
     checkUsingComponents,
-    proxyComponentEventsRules,
     autoVirtualHostRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
@@ -58,15 +57,6 @@ 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(
@@ -82,6 +72,7 @@ module.exports = function (template, {
           hasComment,
           isNative,
           isComponent: ctorType === 'component',
+          isPage: ctorType === 'page',
           mode,
           srcMode: templateSrcMode,
           defs,
@@ -97,7 +88,6 @@ module.exports = function (template, {
           globalComponents: [],
           // web模式下实现抽象组件
           componentGenerics,
-          proxyComponentEvents,
           hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
         })
         if (meta.wxsModuleMap) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.56",
+  "version": "2.8.59",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -54,7 +54,8 @@
     "postcss-modules-values": "^4.0.0",
     "postcss-selector-parser": "^6.0.8",
     "postcss-value-parser": "^4.0.2",
-    "source-list-map": "^2.0.0"
+    "source-list-map": "^2.0.0",
+    "video.js": "^8.6.0"
   },
   "peerDependencies": {
     "webpack": "^5.48.0"
@@ -81,5 +82,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "391feabc6246acfa17271aa632adf5da2c308a05"
+  "gitHead": "4e014ea355bb2d659c6fd6a3040b6b88245da9e5"
 }