@mpxjs/webpack-plugin 2.10.18 → 2.10.20

package/lib/runtime/optionProcessor.js

@@ -2,13 +2,15 @@ import { hasOwn, isEmptyObject, extend } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
-import { error } from '@mpxjs/utils'
+import { error, proxy } from '@mpxjs/utils'
 const dash2hump = require('../utils/hump-dash').dash2hump
 
 export function processComponentOption (
   {
     option,
     ctorType,
+    moduleId,
+    hasScoped,
     outputPath,
     pageConfig,
     componentsMap,
@@ -75,6 +77,19 @@ registered in parent context!`)
   if (outputPath) {
     option.componentPath = '/' + outputPath
   }
+
+  // 宿主组件的 moduleId / scoped / ctorType 信息挂在 option 上，供 mpx-tpl-* 子模版通过 __mpxHost.$options 读取
+  option.__mpxModuleId = moduleId || ''
+  option.__mpxScoped = !!hasScoped
+  option.__mpxCtorType = ctorType
+  // 暴露宿主实例引用，供 mpx-tpl-* 子模版组件通过 inject 获取
+  const prevProvide = option.provide
+  option.provide = function () {
+    const base = typeof prevProvide === 'function'
+      ? prevProvide.call(this)
+      : (prevProvide || {})
+    return extend({}, base, { __mpxHost: this })
+  }
   if (ctorType === 'app') {
     option.data = function () {
       return {
@@ -134,6 +149,67 @@ export function getWxsMixin (wxsModules) {
   }
 }
 
+/**
+ * 将子模版实例的 `$slots` 代理到 `inject` 的宿主 `__mpxHost.$slots`（仅默认 / 具名，与 solutions/web-template-support.md §2.8 一致）。
+ * 不使用 `$watch`；若无法 defineProperty（如属性已不可配置），开发环境告警并跳过。
+ */
+function installMpxWxTemplateHostSlotsProxy (vm) {
+  if (!vm.__mpxHost) return
+  try {
+    Object.defineProperty(vm, '$slots', {
+      configurable: true,
+      enumerable: true,
+      get () {
+        const h = this.__mpxHost
+        return (h && h.$slots) || {}
+      },
+      set () { } // 不支持写入
+    })
+  } catch (e) {
+    if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV !== 'production') {
+      console.warn('[Mpx] mpx-tpl: could not proxy $slots to __mpxHost:', e && e.message)
+    }
+  }
+}
+
+// 创建 wxml template 对应的 Vue 子组件选项（仅接受构建期编译产物，见 web/compile-wx-template-fragment）
+// - props.mpxData：承载模版调用传入的数据，通过 proxy 在 this 上建立访问代理
+// - inject.__mpxHost：从最近的 mpx 宿主获取 this，用于继承 methods/components；其 $slots 经 installMpxWxTemplateHostSlotsProxy 供模版内 <slot> 使用
+// - wxsModules：由模版所在 wxml 自身声明的 wxs 模块（不继承宿主 wxs）
+// - render / staticRenderFns：须由 `vue/compiler-sfc` compileTemplate 等在构建期注入，不支持字符串 template
+export function createTemplateComponent ({ name, render, staticRenderFns, components, wxsModules }) {
+  if (typeof render !== 'function') {
+    throw new Error('[Mpx] createTemplateComponent requires a build-time `render` function (string template is not supported).')
+  }
+  const wxsMixin = getWxsMixin(wxsModules)
+  const base = {
+    name,
+    render,
+    components: components || {},
+    mixins: wxsMixin ? [wxsMixin] : [],
+    props: { mpxData: { type: Object, default: () => ({}) } },
+    inject: { __mpxHost: { default: null } },
+    created () {
+      const host = this.__mpxHost
+      if (host) {
+        const hostMethods = host.$options.methods || {}
+        Object.keys(hostMethods).forEach((k) => {
+          if (!(k in this)) this[k] = hostMethods[k].bind(host)
+        })
+        const compBase = this.$options.components || {}
+        const merged = Object.create(Object.getPrototypeOf(compBase) || null)
+        extend(merged, compBase, host.$options.components || {})
+        this.$options.components = merged
+        installMpxWxTemplateHostSlotsProxy(this)
+      }
+      // mpxData 常为宿主每次 render 的新字面量：source 传 getter，proxy 每次读都解析当前 this.mpxData；假定 key 集合在生命周期内不变（不在 updated 中补全新 key）
+      proxy(this, () => this.mpxData || {})
+    }
+  }
+  if (staticRenderFns && staticRenderFns.length) base.staticRenderFns = staticRenderFns
+  return base
+}
+
 function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, tabBarMap }) {
   const option = {}
   // 对于app中的组件需要全局注册

package/lib/style-compiler/index.js

@@ -7,6 +7,7 @@ const vw = require('./plugins/vw')
 const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
 const cssArrayList = require('./plugins/css-array-list')
+const removeStripConditionalComments = require('./plugins/remove-strip-conditional-comments')
 const { matchCondition } = require('../utils/match-condition')
 const parseRequest = require('../utils/parse-request')
 const isReact = require('../utils/env').isReact
@@ -96,6 +97,7 @@ module.exports = function (css, map) {
     if (mpx.mode === 'web') {
       postPlugins.push(vw({ transRpxFn }))
     }
+    postPlugins.push(removeStripConditionalComments())
 
     const finalPlugins = config.prePlugins.concat(plugins, config.plugins, postPlugins)
 

package/lib/style-compiler/plugins/remove-strip-conditional-comments.js

@@ -0,0 +1,14 @@
+const { STYLE_PAD_PLACEHOLDER } = require('../../utils/const')
+
+module.exports = () => {
+  return {
+    postcssPlugin: 'remove-strip-conditional-comments',
+    Comment (comment) {
+      if (comment.text.trim() === STYLE_PAD_PLACEHOLDER) {
+        comment.remove()
+      }
+    }
+  }
+}
+
+module.exports.postcss = true

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

@@ -1,14 +1,23 @@
 const fs = require('fs')
+const { STYLE_PAD_PLACEHOLDER } = require('../utils/const')
 
 class Node {
-  constructor(type, condition = null) {
+  constructor(type, condition = null, value = '') {
     this.type = type // 'If', 'ElseIf', 'Else' 或 'Text'
     this.condition = condition // If 或 Elif 的条件
     this.children = []
-    this.value = ''
+    this.value = value
   }
 }
 
+function keepLines(content) {
+  return content.replace(/([^\r\n]*)(\r\n|\r|\n|$)/g, (all, line, lineBreak) => {
+    if (!all) return ''
+    const indent = (/^[ \t]*/.exec(line) || [''])[0]
+    return `${indent}/* ${STYLE_PAD_PLACEHOLDER} */${lineBreak}`
+  })
+}
+
 // 提取 css string 为 token
 function tokenize(cssString) {
   // Support /* ... */, // ..., and <!-- ... --> styles
@@ -35,7 +44,8 @@ function tokenize(cssString) {
 
     tokens.push({
       type: type,
-      condition: condition ? condition.trim() : null
+      condition: condition ? condition.trim() : null,
+      content: match[0]
     })
     lastIndex = regex.lastIndex
   }
@@ -55,11 +65,10 @@ function parse(cssString) {
   let currentChildren = ast
   tokens.forEach(token => {
     if (token.type === 'text') {
-      const node = new Node('Text')
-      node.value = token.content
+      const node = new Node('Text', null, token.content)
       currentChildren.push(node)
     } else if (token.type === 'if') {
-      const node = new Node('If', token.condition)
+      const node = new Node('If', token.condition, token.content)
       currentChildren.push(node)
       nodeStack.push(currentChildren)
       currentChildren = node.children
@@ -68,7 +77,7 @@ function parse(cssString) {
         throw new Error('[Mpx style error]: elif without a preceding if')
       }
       currentChildren = nodeStack[nodeStack.length - 1]
-      const node = new Node('ElseIf', token.condition)
+      const node = new Node('ElseIf', token.condition, token.content)
       currentChildren.push(node)
       currentChildren = node.children
     } else if (token.type === 'else') {
@@ -76,11 +85,12 @@ function parse(cssString) {
         throw new Error('[Mpx style error]: else without a preceding if')
       }
       currentChildren = nodeStack[nodeStack.length - 1]
-      const node = new Node('Else')
+      const node = new Node('Else', null, token.content)
       currentChildren.push(node)
       currentChildren = node.children
     } else if (token.type === 'endif') {
       if (nodeStack.length > 0) {
+        currentChildren.push(new Node('EndIf', null, token.content))
         currentChildren = nodeStack.pop()
       }
     }
@@ -105,31 +115,35 @@ function evaluateCondition(condition, defs) {
 }
 
 function traverseAndEvaluate(ast, defs) {
-  let output = ''
-  let batchedIf = false
-  function traverse(nodes) {
+  function traverse(nodes, active) {
+    let output = ''
+    let batchedIf = false
     for (const node of nodes) {
       if (node.type === 'Text') {
-        output += node.value
+        output += active ? node.value : keepLines(node.value)
       } else if (node.type === 'If') {
         // 直接判断 If 节点
-        batchedIf = false
-        if (evaluateCondition(node.condition, defs)) {
-          traverse(node.children)
-          batchedIf = true
-        }
-      } else if (node.type === 'ElseIf' && !batchedIf) {
-        if (evaluateCondition(node.condition, defs)) {
-          traverse(node.children)
-          batchedIf = true
-        }
-      } else if (node.type === 'Else' && !batchedIf) {
-        traverse(node.children)
+        output += keepLines(node.value)
+        const currentMatched = active && evaluateCondition(node.condition, defs)
+        output += traverse(node.children, currentMatched)
+        batchedIf = currentMatched
+      } else if (node.type === 'ElseIf') {
+        output += keepLines(node.value)
+        const currentMatched = active && !batchedIf && evaluateCondition(node.condition, defs)
+        output += traverse(node.children, currentMatched)
+        batchedIf = batchedIf || currentMatched
+      } else if (node.type === 'Else') {
+        output += keepLines(node.value)
+        const currentMatched = active && !batchedIf
+        output += traverse(node.children, currentMatched)
+        batchedIf = true
+      } else if (node.type === 'EndIf') {
+        output += keepLines(node.value)
       }
     }
+    return output
   }
-  traverse(ast)
-  return output
+  return traverse(ast, true)
 }
 
 /**