@mpxjs/webpack-plugin 2.10.5 → 2.10.6-beta.2

package/lib/runtime/components/web/mpx-sticky-header.vue

@@ -0,0 +1,91 @@
+<script>
+import { warn } from '@mpxjs/utils'
+import { getCustomEvent } from './getInnerListeners'
+
+  export default {
+    name: 'mpx-sticky-header',
+    inject: ['scrollOffset', 'refreshVersion'],
+    props: {
+      'offsetTop': {
+        type: Number,
+        default: 0
+      }
+    },
+    data() {
+      return {
+        headerTop: 0,
+        isStickOnTop: false
+      }
+    },
+    computed: {
+      _scrollOffset() {
+        return -this.scrollOffset?.get() || 0
+      },
+      _refreshVersion() {
+        return this.refreshVersion?.get() || 0
+      }
+    },
+    watch: {
+      _scrollOffset: {
+        handler(newScrollOffset) {
+          const newIsStickOnTop = newScrollOffset > this.headerTop
+          if (newIsStickOnTop !== this.isStickOnTop) {
+            this.isStickOnTop = newIsStickOnTop
+            this.$emit('stickontopchange', getCustomEvent('stickontopchange', {
+              isStickOnTop: newIsStickOnTop
+            }, this))
+          }
+          const stickyHeader = this.$refs.stickyHeader
+          if (!stickyHeader) return
+          if (this.isStickOnTop) {
+            stickyHeader.style.transform = `translateY(${newScrollOffset - this.headerTop + this.offsetTop}px)`
+          } else {
+            stickyHeader.style.transform = 'none'
+          }
+        },
+        immediate: true
+      },
+      _refreshVersion: {
+        handler() {
+          const parentElement = this.$el.parentElement
+          if (!parentElement) return
+          
+          const parentClass = parentElement.className || ''
+          const isStickySection = /mpx-sticky-section/.test(parentClass)
+          const isScrollViewWrapper = /mpx-inner-wrapper/.test(parentClass)
+          
+          if (!isStickySection && !isScrollViewWrapper) {
+            warn('sticky-header only supports being a direct child of a scroll-view or sticky-section component.')
+            return
+          }
+          
+          this.headerTop = isStickySection 
+            ? this.$el.offsetTop + parentElement.offsetTop
+            : this.$el.offsetTop
+          
+          const stickyHeader = this.$refs.stickyHeader
+          if (!stickyHeader) return
+          
+          if (this._scrollOffset > this.headerTop) {
+            stickyHeader.style.transform = `translateY(${this._scrollOffset - this.headerTop + this.offsetTop}px)`
+          } else {
+            stickyHeader.style.transform = 'none'
+          }
+        },
+      }
+    },
+    render(h) {
+      const style = {
+        width: '100%',
+        boxSizing: 'border-box',
+        position: 'relative',
+        zIndex: 10
+      }
+
+      return h('div', {
+        style,
+        ref: 'stickyHeader'
+      }, this.$slots.default)
+    }
+  }
+</script>

package/lib/runtime/components/web/mpx-sticky-section.vue

@@ -0,0 +1,15 @@
+<script>
+  export default {
+    name: 'mpx-sticky-section',
+    render(h) {
+      const style = {
+        position: 'relative'
+      }
+
+      return h('div', {
+        style,
+        class: 'mpx-sticky-section'
+      }, this.$slots.default)
+    }
+  }
+</script>

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

@@ -197,4 +197,4 @@ export default {
   right: 0;
   bottom: 0;
 }
-</style>
+</style>

package/lib/runtime/mpxGlobal.js

@@ -0,0 +1 @@
+module.exports = Object.create(global)

package/lib/runtime/optionProcessor.d.ts

@@ -4,8 +4,13 @@ declare global {
       [key: string]: any
     }
   }
+  interface Window {
+     mpxGlobal: Record<string, any>
+  }
 }
 
+declare const mpxGlobal: Record<string, any>
+
 export function processComponentOption (...args: any): object
 
 export function getComponent (...args: any): object

package/lib/runtime/optionProcessor.js

@@ -79,7 +79,7 @@ registered in parent context!`)
         transitionName: ''
       }
     }
-    if (!global.__mpx.config.webConfig.disablePageTransition) {
+    if (!global.__mpx.config.webConfig?.disablePageTransition) {
       option.watch = {
         $route: {
           handler () {
@@ -161,7 +161,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
         redirect: '/' + firstPage
       })
     }
-    const webRouteConfig = global.__mpx.config.webConfig.routeConfig || global.__mpx.config.webRouteConfig
+    const webRouteConfig = global.__mpx.config.webConfig?.routeConfig || global.__mpx.config.webRouteConfig
     global.__mpxRouter = option.router = new VueRouter(extend({ routes }, webRouteConfig))
     let mpxStackPath = []
     if (isBrowser) {

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

@@ -70,7 +70,7 @@ function getCollectPath (path) {
 function checkDelAndGetPath (path) {
   let current = path
   let delPath = path
-  let canDel = true
+  let canDel = true // 是否可删除，优先级比replace高
   let ignore = false
   let replace = false
 
@@ -80,8 +80,13 @@ function checkDelAndGetPath (path) {
     if (t.isUnaryExpression(current.parent) && current.key === 'argument') {
       delPath = current.parentPath
     } else if (t.isCallExpression(current.parent)) {
-      const args = current.node.arguments || current.parent.arguments || []
-      if (args.length === 1) { // case: String(a) || this._p(a)
+      const args = current.parent.arguments || []
+      if (
+        // case: String(a) || this._p(a)
+        args.length === 1 ||
+        // 除了自身，参数列表里只能是数字或字符串才能删
+        (args.every(node => node === current.node || t.isNumericLiteral(node) || t.isStringLiteral(node)))
+      ) {
         delPath = current.parentPath
       } else {
         break
@@ -123,24 +128,20 @@ function checkDelAndGetPath (path) {
 
     if (t.isCallExpression(parent) && listKey === 'arguments') {
       canDel = false
-      break
     }
 
     if (t.isMemberExpression(parent) && parent.computed) {
       canDel = false
-      break
     }
 
     if (t.isLogicalExpression(parent)) { // case: a || ((b || c) && d)
       canDel = false
       ignore = true
-      break
     }
 
     if (t.isConditionalExpression(parent)) {
       if (key === 'test') {
         canDel = false
-        break
       } else {
         ignore = true
         replace = true // 继续往上找，判断是否存在if条件等

package/lib/template-compiler/compiler.js

@@ -16,6 +16,7 @@ const setBaseWxml = require('../runtime-render/base-wxml')
 const { parseExp } = require('./parse-exps')
 const shallowStringify = require('../utils/shallow-stringify')
 const { isReact, isWeb } = require('../utils/env')
+const getTemplateContent = require('../utils/get-template-content')
 
 const no = function () {
   return false
@@ -638,7 +639,7 @@ function parse (template, options) {
   componentGenerics = options.componentGenerics || {}
 
   if (typeof options.usingComponentsInfo === 'string') options.usingComponentsInfo = JSON.parse(options.usingComponentsInfo)
-  usingComponents = Object.keys(options.usingComponentsInfo)
+  usingComponents = Object.keys(options.usingComponentsInfo || {})
   usingComponentsInfo = options.usingComponentsInfo
 
   const _warn = content => {
@@ -661,6 +662,7 @@ function parse (template, options) {
     srcMode,
     type: 'template',
     testKey: 'tag',
+    moduleId,
     data: {
       usingComponents
     },
@@ -689,6 +691,7 @@ function parse (template, options) {
     root = currentParent = getVirtualHostRoot(options, meta)
     stack.push(root)
   }
+  options.template = template // processTemplate时需要对template(只用于处理含name的情况)做截取
 
   parseHTML(template, {
     warn: warn$1,
@@ -721,6 +724,7 @@ function parse (template, options) {
 
       currentParent.children.push(element)
       element.parent = currentParent
+
       processElement(element, root, options, meta)
 
       tagNames.add(element.tag)
@@ -1426,7 +1430,6 @@ function processEvent (el, options) {
           }
         }
       })
-
       addAttrs(el, [
         {
           name: resultName || config[mode].event.getEvent(type),
@@ -1462,6 +1465,13 @@ function wrapMustache (val) {
   return val && !tagRE.test(val) ? `{{${val}}}` : val
 }
 
+function vbindMustache (val) {
+  const bindREG = /\{\{((?:.|\n|\r|\.{3})+?)\}\}(?!})/
+  const match = bindREG.exec(val) || []
+  const matchStr = match[1]?.trim()
+  return matchStr ? `{${matchStr}}` : val
+}
+
 function parseOptionalChaining (str) {
   const wxsName = `${optionalChainWxsName}.g`
   let optionsRes
@@ -2302,7 +2312,7 @@ function processExternalClasses (el, options) {
     let classNames = classLikeAttrValue.split(/\s+/)
     let hasExternalClass = false
     classNames = classNames.map((className) => {
-      if (options.externalClasses.includes(className)) {
+      if (options.externalClasses?.includes(className)) {
         hasExternalClass = true
         return `($attrs[${stringify(className)}] || '')`
       }
@@ -2345,12 +2355,12 @@ function processExternalClasses (el, options) {
 }
 
 function processScoped (el) {
-  if (hasScoped && isRealNode(el)) {
+  if (hasScoped && isRealNode(el) && (isWeb(mode) && el.tag !== 'component')) { // 处理web下 template第一个元素不设置mpx-app-scope
     const rootModuleId = ctorType === 'component' ? '' : MPX_APP_MODULE_ID // 处理app全局样式对页面的影响
     const staticClass = getAndRemoveAttr(el, 'class').val
     addAttrs(el, [{
       name: 'class',
-      value: `${staticClass || ''} ${moduleId} ${rootModuleId}`
+      value: `${staticClass || ''} ${moduleId || ''} ${rootModuleId}`
     }])
   }
 }
@@ -2449,7 +2459,7 @@ function getVirtualHostRoot (options, meta) {
         const rootView = createASTElement('view', [
           {
             name: 'class',
-            value: `${MPX_ROOT_VIEW} host-${moduleId}`
+            value: `${MPX_ROOT_VIEW} ${moduleId ? 'host-' + moduleId : ''}` // 解决template2vue中拿不到moduleId的情况
           },
           {
             name: 'v-on',
@@ -2528,8 +2538,33 @@ function processTemplate (el) {
   }
 }
 
-function postProcessTemplate (el) {
+function processImport (el, meta) { // 收集import引用的地址
+  if (el.tag === 'import' && el.attrsMap.src) {
+    if (!meta.templateSrcList) {
+      meta.templateSrcList = []
+    }
+    if (!meta.templateSrcList.includes(el.attrsMap.src)) {
+      meta.templateSrcList.push(el.attrsMap.src)
+    }
+  }
+}
+
+function postProcessTemplate (el, meta, options) {
   if (el.isTemplate) {
+    if (mode === 'web') {
+      if (!meta.inlineTemplateMap) {
+        meta.inlineTemplateMap = {}
+      }
+      const name = el.attrsMap.name // 行内的template有name就收集template的内容和给内容生成一个地址
+      if (name) {
+        const content = getTemplateContent(options.template, name)
+        const filePath = options.filePath.replace(/.mpx$/, `-${name}.wxml`)
+        meta.inlineTemplateMap[name] = {
+          filePath,
+          content
+        }
+      }
+    }
     processingTemplate = false
     return true
   }
@@ -2679,6 +2714,7 @@ function processMpxTagName (el) {
 }
 
 function processElement (el, root, options, meta) {
+  const initialTag = el.tag // 预存，在这个阶段增加_fakeTemplate值会影响web小程序元素trans web元素
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
   if (el._matchStatus === statusEnum.MISMATCH) {
@@ -2705,10 +2741,17 @@ function processElement (el, root, options, meta) {
   const transAli = mode === 'ali' && srcMode === 'wx'
 
   if (isWeb(mode)) {
+    if (initialTag === 'block') {
+      el._fakeTemplate = true // 该值是在template2vue中处理block转换的template的情况
+    }
     // 收集内建组件
     processBuiltInComponents(el, meta)
     // 预处理代码维度条件编译
     processIfWeb(el)
+    // 预处理template逻辑
+    processTemplate(el)
+    // 预处理import逻辑
+    processImport(el, meta)
     processScoped(el)
     processEventWeb(el)
     // processWebExternalClassesHack(el, options)
@@ -2771,8 +2814,9 @@ function processElement (el, root, options, meta) {
 function closeElement (el, options, meta) {
   postProcessAtMode(el)
   postProcessWxs(el, meta)
-
   if (isWeb(mode)) {
+    // 处理web下template逻辑
+    postProcessTemplate(el, meta, options)
     // 处理代码维度条件编译移除死分支
     postProcessIf(el)
     return
@@ -2783,7 +2827,7 @@ function closeElement (el, options, meta) {
     return
   }
 
-  const isTemplate = postProcessTemplate(el) || processingTemplate
+  const isTemplate = postProcessTemplate(el, meta) || processingTemplate
   if (!isTemplate) {
     if (!isNative) {
       postProcessComponentIs(el, (child) => {
@@ -2905,6 +2949,11 @@ function serialize (root) {
           result += node.text
         }
       }
+      if (mode === 'web') {
+        if ((node.tag === 'template' && node.attrsMap && node.attrsMap.name) || node.tag === 'import') {
+          return result
+        }
+      }
 
       if (node.type === 1) {
         if (node.tag !== 'temp-node') {
@@ -3209,6 +3258,7 @@ module.exports = {
   genNode,
   makeAttrsMap,
   stringifyAttr,
+  vbindMustache,
   parseMustache,
   parseMustacheWithContext,
   stringifyWithResolveComputed,

package/lib/utils/get-template-content.js

@@ -0,0 +1,47 @@
+/*
+ 对template.wxml文件做截取
+ @source原始小程序文件
+ @name 要匹配的该name的template
+ */
+module.exports = function (source, name) {
+  // 使用正则表达式匹配具有 name 的 template 标签及其所有子元素
+  // 正则表达式使用非贪婪匹配来递归匹配嵌套的 template
+  const regex = new RegExp(`(<template[^>]*\\bname=["|']${name}["|'][^>]*>).*?`, 'g')
+
+  let startIndex = 0
+  let endIndex = 0
+  const match = regex.exec(source)
+  // 逐个处理匹配到的 template 标签及其内容
+  if (match) {
+    const matchRes = match[0]
+    const reg = /<\/?template\s*[^>]*>/g
+    let n = 0
+    startIndex = match.index
+    endIndex = startIndex + matchRes.length
+    let html = source.slice(endIndex)
+    while (html) {
+      const matchRes = html.match(reg)
+      if (matchRes.length) {
+        const matchTemp = matchRes[0]
+        const matchIndex = html.indexOf(matchTemp)
+        const matchLength = matchTemp.length
+        const cutLength = matchIndex + matchLength
+        if (matchTemp.startsWith('</template>')) {
+          if (n === 0) {
+            endIndex += cutLength
+            break
+          } else {
+            n--
+          }
+        } else {
+          n++
+        }
+        endIndex += cutLength
+        html = html.slice(cutLength)
+      }
+    }
+  } else {
+    return ''
+  }
+  return source.slice(startIndex, endIndex)
+}

package/lib/web/index.js

@@ -108,6 +108,8 @@ module.exports = function ({
         builtInComponentsMap: templateRes.builtInComponentsMap,
         genericsInfo: templateRes.genericsInfo,
         wxsModuleMap: templateRes.wxsModuleMap,
+        templateSrcList: templateRes.templateSrcList,
+        inlineTemplateMap: templateRes.inlineTemplateMap,
         localComponentsMap: jsonRes.localComponentsMap
       }, callback)
     }

package/lib/web/processScript.js

@@ -3,6 +3,8 @@ const loaderUtils = require('loader-utils')
 const normalize = require('../utils/normalize')
 const shallowStringify = require('../utils/shallow-stringify')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+const wxmlTemplateLoader = normalize.lib('web/wxml-template-loader')
+const WriteVfsDependency = require('../dependencies/WriteVfsDependency')
 const {
   buildComponentsMap,
   getRequireScript,
@@ -22,18 +24,20 @@ module.exports = function (script, {
   builtInComponentsMap,
   genericsInfo,
   wxsModuleMap,
+  templateSrcList,
+  inlineTemplateMap,
   localComponentsMap
 }, callback) {
-  const { projectRoot, appInfo, webConfig } = loaderContext.getMpx()
+  const { projectRoot, appInfo, webConfig, __vfs: vfs, parentLocalComponentsMap } = loaderContext.getMpx()
 
   let output = '/* script */\n'
-
   let scriptSrcMode = srcMode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
     script = { tag: 'script' }
   }
+
   output += genComponentTag(script, {
     attrs (script) {
       const attrs = Object.assign({}, script.attrs)
@@ -58,17 +62,36 @@ module.exports = function (script, {
           content += `  wxsModules.${module} = ${expression}\n`
         })
       }
-
+      content += 'const templateModules = {}\n'
+      if (templateSrcList?.length) { // import标签处理
+        templateSrcList?.forEach((item) => {
+          content += `
+          const tempLoaderResult = require(${stringifyRequest(this, `!!${wxmlTemplateLoader}!${item}`)})\n
+          Object.assign(templateModules, tempLoaderResult)\n`
+        })
+      }
+      // 把wxml要的localComponentsMap merge到parentLocalComponentsMap中这样在 template2vue中就可以拿到对应的值
+      Object.assign(parentLocalComponentsMap, localComponentsMap)
       // 获取组件集合
       const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig })
-
       // 获取pageConfig
       const pageConfig = {}
       if (ctorType === 'page') {
         Object.assign(pageConfig, jsonConfig)
         delete pageConfig.usingComponents
       }
-
+      if (inlineTemplateMap) { // 处理行内template(只有属性为name的情况)
+        const inlineTemplateMapLists = Object.keys(inlineTemplateMap)
+        if (inlineTemplateMapLists.length) {
+          inlineTemplateMapLists.forEach((name) => {
+            const { filePath, content } = inlineTemplateMap[name]
+            loaderContext._module.addPresentationalDependency(new WriteVfsDependency(filePath, content)) // 处理缓存报错的情况
+            vfs.writeModule(filePath, content) // 截取template写入文件
+            const expression = `getComponent(require(${stringifyRequest(loaderContext, `${filePath}?is=${name}&localComponentsMap=${encodeURIComponent(JSON.stringify(localComponentsMap))}&isTemplate`)}))`
+            componentsMap[name] = expression
+          })
+        }
+      }
       content += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, webConfig, hasApp })
       content += getRequireScript({ ctorType, script, loaderContext })
       content += `
@@ -78,7 +101,7 @@ module.exports = function (script, {
     outputPath: ${JSON.stringify(outputPath)},
     pageConfig: ${JSON.stringify(pageConfig)},
     // @ts-ignore
-    componentsMap: ${shallowStringify(componentsMap)},
+    componentsMap: Object.assign(${shallowStringify(componentsMap)}, templateModules),
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},
     wxsMixin: getWxsMixin(wxsModules),
@@ -87,7 +110,6 @@ module.exports = function (script, {
       return content
     }
   })
-
   callback(null, {
     output
   })

package/lib/web/processTemplate.js

@@ -31,7 +31,7 @@ module.exports = function (template, {
   const { resourcePath, rawResourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
 
-  let wxsModuleMap, genericsInfo
+  let wxsModuleMap, genericsInfo, inlineTemplateMap, templateSrcList
   let output = '/* template */\n'
 
   if (ctorType === 'app') {
@@ -54,7 +54,6 @@ module.exports = function (template, {
     if (template.lang) {
       return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans web mode temporarily, we will support it in the future!'))
     }
-
     output += genComponentTag(template, (template) => {
       if (ctorType === 'app') {
         return template.content
@@ -104,6 +103,12 @@ module.exports = function (template, {
             wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
           }
         }
+        if (meta.inlineTemplateMap) {
+          inlineTemplateMap = meta.inlineTemplateMap
+        }
+        if (meta.templateSrcList?.length) {
+          templateSrcList = meta.templateSrcList
+        }
         if (meta.builtInComponentsMap) {
           Object.keys(meta.builtInComponentsMap).forEach((name) => {
             builtInComponentsMap[name] = {
@@ -114,15 +119,16 @@ module.exports = function (template, {
         if (meta.genericsInfo) {
           genericsInfo = meta.genericsInfo
         }
-        return templateCompiler.serialize(root)
+        return templateCompiler.serialize(root, moduleId) // 增加moduleId给到template2vue拿到正确的scopedId
       }
     })
     output += '\n'
   }
-
   callback(null, {
     output,
     builtInComponentsMap,
+    inlineTemplateMap,
+    templateSrcList,
     genericsInfo,
     wxsModuleMap
   })