@mpxjs/webpack-plugin 2.9.38 → 2.9.39

package/lib/template-compiler/compiler.js

@@ -12,7 +12,10 @@ const transDynamicClassExpr = require('./trans-dynamic-class-expr')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const makeMap = require('../utils/make-map')
 const { isNonPhrasingTag } = require('../utils/dom-tag-config')
+const setBaseWxml = require('../runtime-render/base-wxml')
+const { parseExp } = require('./parse-exps')
 
+const shallowStringify = require('../utils/shallow-stringify')
 const no = function () {
   return false
 }
@@ -34,7 +37,6 @@ const endTag = new RegExp(('^<\\/' + qnameCapture + '[^>]*>'))
 const doctype = /^<!DOCTYPE [^>]+>/i
 const comment = /^<!--/
 const conditionalComment = /^<!\[/
-
 let IS_REGEX_CAPTURING_BROKEN = false
 'x'.replace(/x(.)?/g, function (m, g) {
   IS_REGEX_CAPTURING_BROKEN = g === ''
@@ -62,7 +64,7 @@ function makeAttrsMap (attrs) {
   return map
 }
 
-function createASTElement (tag, attrs, parent) {
+function createASTElement (tag, attrs = [], parent = null) {
   return {
     type: 1,
     tag: tag,
@@ -75,11 +77,11 @@ function createASTElement (tag, attrs, parent) {
 
 function isForbiddenTag (el) {
   return (
-    el.tag === 'style' ||
-    (el.tag === 'script' && (
-      !el.attrsMap.type ||
-      el.attrsMap.type === 'text/javascript'
-    ))
+      el.tag === 'style' ||
+      (el.tag === 'script' && (
+          !el.attrsMap.type ||
+          el.attrsMap.type === 'text/javascript'
+      ))
   )
 }
 
@@ -88,25 +90,31 @@ function isForbiddenTag (el) {
 let warn$1
 let error$1
 let mode
+let env
 let defs
 let i18n
 let srcMode
-let processingTemplate
+let ctorType
+let moduleId
 let isNative
+let hasScoped
+let hasVirtualHost
 let rulesRunner
 let currentEl
 let injectNodes = []
 let forScopes = []
 let forScopesMap = {}
-let hasI18n = false
-let i18nInjectableComputed = []
-let env
 let platformGetTagNamespace
 let filePath
 let refId
-let hasOptionalChain = false
+let hasI18n = false
+let i18nInjectableComputed = []
+let hasOptionalChaining = false
+let processingTemplate = false
+const rulesResultMap = new Map()
 
 function updateForScopesMap () {
+  forScopesMap = {}
   forScopes.forEach((scope) => {
     forScopesMap[scope.index] = 'index'
     forScopesMap[scope.item] = 'item'
@@ -126,7 +134,6 @@ function popForScopes () {
   return scope
 }
 
-const rulesResultMap = new Map()
 const deleteErrorInResultMap = (node) => {
   rulesResultMap.delete(node)
   Array.isArray(node.children) && node.children.forEach(item => deleteErrorInResultMap(item))
@@ -278,8 +285,8 @@ function parseHTML (html, options) {
         endTagLength = endTag.length
         if (!isPlainTextElement(stackedTag) && stackedTag !== 'noscript') {
           text = text
-            .replace(/<!--([\s\S]*?)-->/g, '$1')
-            .replace(/<!\[CDATA\[([\s\S]*?)]]>/g, '$1')
+              .replace(/<!--([\s\S]*?)-->/g, '$1')
+              .replace(/<!\[CDATA\[([\s\S]*?)]]>/g, '$1')
         }
         if (shouldIgnoreFirstNewline(stackedTag, text)) {
           text = text.slice(1)
@@ -418,7 +425,7 @@ function parseHTML (html, options) {
       for (let i = stack.length - 1; i >= pos; i--) {
         if ((i > pos || !tagName) && options.warn) {
           options.warn(
-            ('tag <' + (stack[i].tag) + '> has no matching end tag.')
+              ('tag <' + (stack[i].tag) + '> has no matching end tag.')
           )
         }
         if (options.end) {
@@ -595,10 +602,30 @@ function parseComponent (content, options) {
 }
 
 function parse (template, options) {
-  rulesResultMap.clear()
+  // global var init
   warn$1 = options.warn || baseWarn
   error$1 = options.error || baseError
+  mode = options.mode || 'wx'
+  env = options.env
+  defs = options.defs || {}
+  srcMode = options.srcMode || mode
+  ctorType = options.ctorType
+  moduleId = options.moduleId
+  isNative = options.isNative
+  hasScoped = options.hasScoped
+  hasVirtualHost = options.hasVirtualHost
+  filePath = options.filePath
+  i18n = options.i18n
+  platformGetTagNamespace = options.getTagNamespace || no
+  refId = 0
+  injectNodes = []
+  forScopes = []
+  forScopesMap = {}
+  hasI18n = false
   i18nInjectableComputed = []
+  hasOptionalChaining = false
+  processingTemplate = false
+  rulesResultMap.clear()
 
   const _warn = content => {
     const currentElementRuleResult = rulesResultMap.get(currentEl) || rulesResultMap.set(currentEl, {
@@ -615,15 +642,6 @@ function parse (template, options) {
     currentElementRuleResult.errorArray.push(content)
   }
 
-  mode = options.mode || 'wx'
-  env = options.env
-  defs = options.defs || {}
-  srcMode = options.srcMode || mode
-  isNative = options.isNative
-  filePath = options.filePath
-  i18n = options.i18n
-  refId = 0
-
   rulesRunner = getRulesRunner({
     mode,
     srcMode,
@@ -636,14 +654,6 @@ function parse (template, options) {
     error: _error
   })
 
-  injectNodes = []
-  forScopes = []
-  forScopesMap = {}
-  hasI18n = false
-  hasOptionalChain = false
-
-  platformGetTagNamespace = options.getTagNamespace || no
-
   const stack = []
   let root
   const meta = {}
@@ -670,6 +680,7 @@ function parse (template, options) {
       const ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag)
 
       const element = createASTElement(tag, attrs, currentParent)
+
       if (ns) {
         element.ns = ns
       }
@@ -677,9 +688,9 @@ function parse (template, options) {
       if (isForbiddenTag(element)) {
         element.forbidden = true
         warn$1(
-          'Templates should only be responsible for mapping the state to the ' +
-          'UI. Avoid placing tags with side-effects in your templates, such as ' +
-          '<' + tag + '>' + ', as they will not be parsed.'
+            'Templates should only be responsible for mapping the state to the ' +
+            'UI. Avoid placing tags with side-effects in your templates, such as ' +
+            '<' + tag + '>' + ', as they will not be parsed.'
         )
       }
 
@@ -736,7 +747,7 @@ function parse (template, options) {
             parent: currentParent
           }
           children.push(el)
-          processText(el)
+          options.runtimeCompile ? processTextDynamic(el) : processText(el)
         }
       }
     },
@@ -765,7 +776,7 @@ function parse (template, options) {
     }
   }
 
-  if (hasOptionalChain) {
+  if (hasOptionalChaining) {
     injectWxs(meta, optionalChainWxsName, optionalChainWxsPath)
   }
 
@@ -785,7 +796,7 @@ function parse (template, options) {
         arr.push(item)
       }
     })
-    arr.length && warn$1(`\n ${options.filePath} \n 组件 ${arr.join(' | ')} 注册了，但是未被对应的模板引用，建议删除！`)
+    arr.length && warn$1(`\n ${filePath} \n 组件 ${arr.join(' | ')} 注册了，但是未被对应的模板引用，建议删除！`)
   }
 
   return {
@@ -795,7 +806,7 @@ function parse (template, options) {
 }
 
 function getTempNode () {
-  return createASTElement('temp-node', [])
+  return createASTElement('temp-node')
 }
 
 function addChild (parent, newChild, before) {
@@ -848,16 +859,25 @@ function modifyAttr (el, name, val) {
   }
 }
 
-function moveBaseDirective (target, from, isDelete = true) {
-  target.for = from.for
-  target.if = from.if
-  target.elseif = from.elseif
-  target.else = from.else
+function postMoveBaseDirective (target, source, options, isDelete = true) {
+  target.for = source.for
+  target.if = source.if
+  target.elseif = source.elseif
+  target.else = source.else
+
+  if (options.runtimeCompile) {
+    postProcessForDynamic(target, config[mode])
+    postProcessIfDynamic(target, config[mode])
+  } else {
+    postProcessFor(target)
+    postProcessIf(target)
+  }
+
   if (isDelete) {
-    delete from.for
-    delete from.if
-    delete from.elseif
-    delete from.else
+    delete source.for
+    delete source.if
+    delete source.elseif
+    delete source.else
   }
 }
 
@@ -895,7 +915,7 @@ function stringify (str) {
 
 const genericRE = /^generic:(.+)$/
 
-function processComponentGenericsForWeb (el, options, meta) {
+function processComponentGenericsWeb (el, options, meta) {
   if (options.componentGenerics && options.componentGenerics[el.tag]) {
     const generic = dash2hump(el.tag)
     el.tag = 'component'
@@ -907,7 +927,7 @@ function processComponentGenericsForWeb (el, options, meta) {
 
   let hasGeneric = false
 
-  const genericHash = options.moduleId
+  const genericHash = moduleId
 
   el.attrsList.forEach((attr) => {
     if (genericRE.test(attr.name)) {
@@ -944,10 +964,10 @@ function processComponentIs (el, options) {
     return
   }
 
-  options = options || {}
-  el.components = options.usingComponents
-  if (!el.components) {
-    warn$1('Component in which <component> tag is used must have a nonblank usingComponents field')
+  const isInRange = makeMap(getAndRemoveAttr(el, 'range').val || '')
+  el.components = (options.usingComponents || []).filter(i => isInRange(i))
+  if (!el.components.length) {
+    warn$1('Component in which <component> tag is used must have a non blank usingComponents field')
   }
 
   const is = getAndRemoveAttr(el, 'is').val
@@ -960,7 +980,7 @@ function processComponentIs (el, options) {
 
 const eventIdentifier = '__mpx_event__'
 
-function parseFuncStr2 (str) {
+function parseFuncStr (str, extraStr = '') {
   const funcRE = /^([^()]+)(\((.*)\))?/
   const match = funcRE.exec(str)
   if (match) {
@@ -978,7 +998,7 @@ function parseFuncStr2 (str) {
     }
     return {
       hasArgs,
-      expStr: `[${funcName + args}]`
+      expStr: `[${funcName + args + extraStr}]`
     }
   }
 }
@@ -1023,23 +1043,25 @@ function stringifyWithResolveComputed (modelValue) {
   return result.join('+')
 }
 
-function processBindEvent (el, options) {
+function processEvent (el, options) {
   const eventConfigMap = {}
-  el.attrsList.forEach(function (attr) {
-    const parsedEvent = config[mode].event.parseEvent(attr.name)
+  el.attrsList.forEach(function ({ name, value }) {
+    const parsedEvent = config[mode].event.parseEvent(name)
 
     if (parsedEvent) {
       const type = parsedEvent.eventName
       const modifiers = (parsedEvent.modifier || '').split('.')
-      const parsedFunc = parseFuncStr2(attr.value)
+      const prefix = parsedEvent.prefix
+      // catch 场景下，下发的 eventconfig 里面包含特殊字符，用以运行时的判断
+      const extraStr = options.runtimeCompile && prefix === 'catch' ? `, "__mpx_${prefix}"` : ''
+      const parsedFunc = parseFuncStr(value, extraStr)
       if (parsedFunc) {
         if (!eventConfigMap[type]) {
           eventConfigMap[type] = {
-            rawName: attr.name,
             configs: []
           }
         }
-        eventConfigMap[type].configs.push(parsedFunc)
+        eventConfigMap[type].configs.push(Object.assign({ name }, parsedFunc))
         if (modifiers.indexOf('proxy') > -1 || options.forceProxyEvent) {
           eventConfigMap[type].proxy = true
         }
@@ -1098,7 +1120,7 @@ function processBindEvent (el, options) {
 
   for (const type in eventConfigMap) {
     let needBind = false
-    let { configs, rawName, proxy } = eventConfigMap[type]
+    const { configs, proxy } = eventConfigMap[type]
     delete eventConfigMap[type]
     if (proxy) {
       needBind = true
@@ -1116,19 +1138,25 @@ function processBindEvent (el, options) {
     }
 
     if (needBind) {
-      if (rawName) {
-        // 清空原始事件绑定
-        let has
-        do {
-          has = getAndRemoveAttr(el, rawName).has
-        } while (has)
-        // 清除修饰符
-        rawName = rawName.replace(/\..*/, '')
-      }
+      let resultName
+      configs.forEach(({ name }) => {
+        if (name) {
+          // 清空原始事件绑定
+          let has
+          do {
+            has = getAndRemoveAttr(el, name).has
+          } while (has)
+
+          if (!resultName) {
+            // 清除修饰符
+            resultName = name.replace(/\..*/, '')
+          }
+        }
+      })
 
       addAttrs(el, [
         {
-          name: rawName || config[mode].event.getEvent(type),
+          name: resultName || config[mode].event.getEvent(type),
           value: '__invoke'
         }
       ])
@@ -1141,7 +1169,7 @@ function processBindEvent (el, options) {
   if (!isEmptyObject(eventConfigMap)) {
     addAttrs(el, [{
       name: 'data-eventconfigs',
-      value: `{{${config[mode].event.shallowStringify(eventConfigMap)}}}`
+      value: `{{${shallowStringify(eventConfigMap, true)}}}`
     }])
   }
 }
@@ -1150,6 +1178,164 @@ function wrapMustache (val) {
   return val && !tagRE.test(val) ? `{{${val}}}` : val
 }
 
+function parseOptionalChaining (str) {
+  const wxsName = `${optionalChainWxsName}.g`
+  let optionsRes
+  while (optionsRes = /\?\./.exec(str)) {
+    const strLength = str.length
+    const grammarMap = {
+      init () {
+        const initKey = [
+          {
+            mapKey: '[]',
+            mapValue: [
+              {
+                key: '[',
+                value: 1
+              },
+              {
+                key: ']',
+                value: -1
+              }
+            ]
+          },
+          {
+            mapKey: '()',
+            mapValue: [
+              {
+                key: '(',
+                value: 1
+              },
+              {
+                key: ')',
+                value: -1
+              }
+            ]
+          }
+        ]
+        this.count = {}
+        initKey.forEach(({ mapKey, mapValue }) => {
+          mapValue.forEach(({ key, value }) => {
+            this[key] = this.changeState(mapKey, value)
+          })
+        })
+      },
+      changeState (key, value) {
+        if (!this.count[key]) {
+          this.count[key] = 0
+        }
+        return () => {
+          this.count[key] = this.count[key] + value
+          return this.count[key]
+        }
+      },
+      checkState () {
+        return Object.values(this.count).find(i => i)
+      }
+    }
+    let leftIndex = optionsRes.index
+    let rightIndex = leftIndex + 2
+    let haveNotGetValue = true
+    let chainValue = ''
+    let chainKey = ''
+    let notCheck = false
+    grammarMap.init()
+    // 查 ?. 左边值
+    while (haveNotGetValue && leftIndex > 0) {
+      const left = str[leftIndex - 1]
+      const grammar = grammarMap[left]
+      if (notCheck) {
+        // 处于表达式内
+        chainValue = left + chainValue
+        if (grammar) {
+          grammar()
+          if (!grammarMap.checkState()) {
+            // 表达式结束
+            notCheck = false
+          }
+        }
+      } else if (~[']', ')'].indexOf(left)) {
+        // 命中表达式，开始记录表达式
+        chainValue = left + chainValue
+        notCheck = true
+        grammar()
+      } else if (left !== ' ') {
+        if (!/[A-Za-z0-9_$.]/.test(left)) {
+          // 结束
+          haveNotGetValue = false
+          leftIndex++
+        } else {
+          // 正常语法
+          chainValue = left + chainValue
+        }
+      }
+      leftIndex--
+    }
+    if (grammarMap.checkState() && haveNotGetValue) {
+      // 值查找结束但是语法未闭合或者处理到边界还未结束，抛异常
+      throw new Error('[optionChain] option value illegal!!!')
+    }
+    haveNotGetValue = true
+    let keyValue = ''
+    // 查 ?. 右边key
+    while (haveNotGetValue && rightIndex < strLength) {
+      const right = str[rightIndex]
+      const grammar = grammarMap[right]
+      if (notCheck) {
+        // 处于表达式内
+        if (grammar) {
+          grammar()
+          if (grammarMap.checkState()) {
+            keyValue += right
+          } else {
+            // 表达式结束
+            notCheck = false
+            chainKey += `,${keyValue}`
+            keyValue = ''
+          }
+        } else {
+          keyValue += right
+        }
+      } else if (~['[', '('].indexOf(right)) {
+        // 命中表达式，开始记录表达式
+        grammar()
+        if (keyValue) {
+          chainKey += `,'${keyValue}'`
+          keyValue = ''
+        }
+        notCheck = true
+      } else if (!/[A-Za-z0-9_$.?]/.test(right)) {
+        // 结束
+        haveNotGetValue = false
+        rightIndex--
+      } else if (right !== '?') {
+        // 正常语法
+        if (right === '.') {
+          if (keyValue) {
+            chainKey += `,'${keyValue}'`
+          }
+          keyValue = ''
+        } else {
+          keyValue += right
+        }
+      }
+      rightIndex++
+    }
+    if (grammarMap.checkState() && haveNotGetValue) {
+      // key值查找结束但是语法未闭合或者处理到边界还未结束，抛异常
+      throw new Error('[optionChain] option key illegal!!!')
+    }
+    if (keyValue) {
+      chainKey += `,'${keyValue}'`
+    }
+    str = str.slice(0, leftIndex) + `${wxsName}(${chainValue},[${chainKey.slice(1)}])` + str.slice(rightIndex)
+    if (!hasOptionalChaining) {
+      hasOptionalChaining = true
+    }
+  }
+  return str
+}
+
 function parseMustacheWithContext (raw = '') {
   return parseMustache(raw, (exp) => {
     if (defs) {
@@ -1163,8 +1349,9 @@ function parseMustacheWithContext (raw = '') {
         }
       })
     }
+    // 处理可选链表达式
+    exp = parseOptionalChaining(exp)
 
-    exp = parseOptionChain(exp)
     if (i18n) {
       for (const i18nFuncName of i18nFuncNames) {
         const funcNameRE = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`)
@@ -1244,12 +1431,12 @@ function parseMustache (raw = '', expHandler = exp => exp, strHandler = str => s
   }
 }
 
-function addExp (el, exp, isProps) {
+function addExp (el, exp, isProps, attrName) {
   if (exp) {
     if (!el.exps) {
       el.exps = []
     }
-    el.exps.push({ exp, isProps })
+    el.exps.push({ exp, isProps, attrName })
   }
 }
 
@@ -1274,7 +1461,7 @@ function processIf (el) {
   }
 }
 
-function processIfForWeb (el) {
+function processIfWeb (el) {
   let val = getAndRemoveAttr(el, config[mode].directive.if).val
   if (val) {
     el.if = {
@@ -1377,31 +1564,23 @@ function postProcessWxs (el, meta) {
   if (el.tag === config[mode].wxs.tag) {
     const module = el.attrsMap[config[mode].wxs.module]
     if (module) {
-      let src, content
+      let src
       if (el.attrsMap[config[mode].wxs.src]) {
         src = el.attrsMap[config[mode].wxs.src]
       } else {
-        content = el.children.filter((child) => {
+        const content = el.children.filter((child) => {
           return child.type === 3 && !child.isComment
         }).map(child => child.text).join('\n')
+        addWxsContent(meta, module, content)
 
         const fakeRequest = filePath + config[mode].wxs.ext
-
         src = addQuery(`~${fakeRequest}!=!${filePath}`, {
           wxsModule: module
         })
-
-        addAttrs(el, [{
-          name: config[mode].wxs.src,
-          value: src
-        }])
-        el.children = []
       }
-      src && addWxsModule(meta, module, src)
-      content && addWxsContent(meta, module, content)
       // wxs hoist
+      injectWxs(meta, module, src)
       removeNode(el, true)
-      injectNodes.push(el)
     }
   }
 }
@@ -1421,7 +1600,7 @@ function processAttrs (el, options) {
       if (isTemplateData) {
         result = result.replace(spreadREG, '$1')
       }
-      addExp(el, result, isProps)
+      addExp(el, result, isProps, attr.name)
       if (parsed.replaced) {
         modifyAttr(el, attr.name, needWrap ? parsed.val.slice(1, -1) : parsed.val)
       }
@@ -1436,7 +1615,7 @@ function postProcessFor (el) {
       这个操作主要是因为百度小程序不支持这两个directive在同级使用
      */
     if (el.if && mode === 'swan') {
-      const block = createASTElement('block', [])
+      const block = createASTElement('block')
       replaceNode(el, block, true)
       block.for = el.for
       delete el.for
@@ -1552,7 +1731,7 @@ function postProcessIf (el) {
   }
 }
 
-function processText (el) {
+function processText (el, meta) {
   if (el.type !== 3 || el.isComment) {
     return
   }
@@ -1576,10 +1755,13 @@ function processText (el) {
 //   }])
 // }
 
-function injectWxs (meta, module, src) {
+function injectWxs (meta, module, src, options) {
   if (addWxsModule(meta, module, src)) {
     return
   }
+  if (options && options.runtimeCompile) {
+    return
+  }
   const wxsNode = createASTElement(config[mode].wxs.tag, [
     {
       name: config[mode].wxs.module,
@@ -1683,13 +1865,13 @@ function processAliExternalClassesHack (el, options) {
     }
   })
 
-  if (options.hasScoped && isComponent) {
+  if (hasScoped && isComponent) {
     options.externalClasses.forEach((className) => {
       const externalClass = getAndRemoveAttr(el, className).val
       if (externalClass) {
         addAttrs(el, [{
           name: className,
-          value: `${externalClass} ${options.moduleId}`
+          value: `${externalClass} ${moduleId}`
         }])
       }
     })
@@ -1757,10 +1939,9 @@ function processWebExternalClassesHack (el, options) {
   }
 }
 
-function processScoped (el, options) {
-  if (options.hasScoped && isRealNode(el)) {
-    const moduleId = options.moduleId
-    const rootModuleId = options.isComponent ? '' : MPX_APP_MODULE_ID // 处理app全局样式对页面的影响
+function processScoped (el) {
+  if (hasScoped && isRealNode(el)) {
+    const rootModuleId = ctorType === 'component' ? '' : MPX_APP_MODULE_ID // 处理app全局样式对页面的影响
     const staticClass = getAndRemoveAttr(el, 'class').val
     addAttrs(el, [{
       name: 'class',
@@ -1778,12 +1959,12 @@ function processBuiltInComponents (el, meta) {
     }
     const tag = el.tag
     if (!meta.builtInComponentsMap[tag]) {
-      meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/${mode}/${tag}.vue`
+      meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/${mode}/${tag}`
     }
   }
 }
 
-function processAliAddComponentRootView (el, options) {
+function postProcessAliComponentRootView (el, options, meta) {
   const processAttrsConditions = [
     { condition: /^(on|catch)Tap$/, action: 'clone' },
     { condition: /^(on|catch)TouchStart$/, action: 'clone' },
@@ -1797,25 +1978,25 @@ function processAliAddComponentRootView (el, options) {
     { condition: /^slot$/, action: 'move' }
   ]
   const processAppendAttrsRules = [
-    { name: 'class', value: `${MPX_ROOT_VIEW} host-${options.moduleId}` }
+    { name: 'class', value: `${MPX_ROOT_VIEW} host-${moduleId}` }
   ]
-  const newElAttrs = []
+  const newAttrs = []
   const allAttrs = cloneAttrsList(el.attrsList)
 
   function processClone (attr) {
-    newElAttrs.push(attr)
+    newAttrs.push(attr)
   }
 
   function processMove (attr) {
     getAndRemoveAttr(el, attr.name)
-    newElAttrs.push(attr)
+    newAttrs.push(attr)
   }
 
   function processAppendRules (el) {
     processAppendAttrsRules.forEach((rule) => {
       const getNeedAppendAttrValue = el.attrsMap[rule.name]
       const value = getNeedAppendAttrValue ? getNeedAppendAttrValue + ' ' + rule.value : rule.value
-      newElAttrs.push({
+      newAttrs.push({
         name: rule.name,
         value
       })
@@ -1836,32 +2017,34 @@ function processAliAddComponentRootView (el, options) {
   })
 
   processAppendRules(el)
-  const componentWrapView = createASTElement('view', newElAttrs)
-  moveBaseDirective(componentWrapView, el)
-  if (el.is && el.components) {
-    el = postProcessComponentIs(el)
-  }
+  const componentWrapView = createASTElement('view', newAttrs)
 
   replaceNode(el, componentWrapView, true)
   addChild(componentWrapView, el)
-  return componentWrapView
+  processAttrs(componentWrapView, options)
+  postMoveBaseDirective(componentWrapView, el, options)
+
+  if (options.runtimeCompile) {
+    collectDynamicInfo(componentWrapView, options, meta)
+    postProcessAttrsDynamic(componentWrapView, config[mode])
+  }
 }
 
 // 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
 function getVirtualHostRoot (options, meta) {
   if (srcMode === 'wx') {
-    if (options.isComponent) {
-      if ((mode === 'wx') && options.hasVirtualHost) {
+    if (ctorType === 'component') {
+      if (mode === 'wx' && hasVirtualHost) {
         // wx组件注入virtualHost配置
         !meta.options && (meta.options = {})
         meta.options.virtualHost = true
       }
-      if ((mode === 'web') && !options.hasVirtualHost) {
+      if (mode === 'web' && !hasVirtualHost) {
         // ali组件根节点实体化
         const rootView = createASTElement('view', [
           {
             name: 'class',
-            value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
+            value: `${MPX_ROOT_VIEW} host-${moduleId}`
           },
           {
             name: 'v-on',
@@ -1872,10 +2055,8 @@ function getVirtualHostRoot (options, meta) {
         return rootView
       }
     }
-    if (options.isPage) {
-      if (mode === 'web') {
-        return createASTElement('page', [])
-      }
+    if (mode === 'web' && ctorType === 'page') {
+      return createASTElement('page')
     }
   }
   return getTempNode()
@@ -1889,8 +2070,8 @@ function processShow (el, options, root) {
   if (has && show === undefined) {
     error$1(`Attrs ${config[mode].directive.show} should have a value `)
   }
-  if (options.hasVirtualHost) {
-    if (options.isComponent && el.parent === root && isRealNode(el)) {
+  if (hasVirtualHost) {
+    if (ctorType === 'component' && el.parent === root && isRealNode(el)) {
       if (show !== undefined) {
         show = `{{${parseMustacheWithContext(show).result}&&mpxShow}}`
       } else {
@@ -1906,22 +2087,30 @@ function processShow (el, options, root) {
         value: show
       }])
     } else {
-      processShowStyle()
+      if (options.runtimeCompile) {
+        processShowStyleDynamic(el, show)
+      } else {
+        processShowStyle(el, show)
+      }
     }
   } else {
-    processShowStyle()
+    if (options.runtimeCompile) {
+      processShowStyleDynamic(el, show)
+    } else {
+      processShowStyle(el, show)
+    }
   }
+}
 
-  function processShowStyle () {
-    if (show !== undefined) {
-      const showExp = parseMustacheWithContext(show).result
-      let oldStyle = getAndRemoveAttr(el, 'style').val
-      oldStyle = oldStyle ? oldStyle + ';' : ''
-      addAttrs(el, [{
-        name: 'style',
-        value: `${oldStyle}{{${showExp}?'':'display:none;'}}`
-      }])
-    }
+function processShowStyle (el, show) {
+  if (show !== undefined) {
+    const showExp = parseMustacheWithContext(show).result
+    let oldStyle = getAndRemoveAttr(el, 'style').val
+    oldStyle = oldStyle ? oldStyle + ';' : ''
+    addAttrs(el, [{
+      name: 'style',
+      value: `${oldStyle}{{${showExp}?'':'display:none;'}}`
+    }])
   }
 }
 
@@ -2044,11 +2233,11 @@ function processDuplicateAttrsList (el) {
 }
 
 // 处理wxs注入逻辑
-function processInjectWxs (el, meta) {
+function processInjectWxs (el, meta, options) {
   if (el.injectWxsProps && el.injectWxsProps.length) {
     el.injectWxsProps.forEach((injectWxsProp) => {
       const { injectWxsPath, injectWxsModuleName } = injectWxsProp
-      injectWxs(meta, injectWxsModuleName, injectWxsPath)
+      injectWxs(meta, injectWxsModuleName, injectWxsPath, options)
     })
   }
 }
@@ -2086,7 +2275,7 @@ function processElement (el, root, options, meta) {
 
   processMpxTagName(el)
 
-  processInjectWxs(el, meta)
+  processInjectWxs(el, meta, options)
 
   const transAli = mode === 'ali' && srcMode === 'wx'
 
@@ -2094,9 +2283,9 @@ function processElement (el, root, options, meta) {
     // 收集内建组件
     processBuiltInComponents(el, meta)
     // 预处理代码维度条件编译
-    processIfForWeb(el)
+    processIfWeb(el)
     processWebExternalClassesHack(el, options)
-    processComponentGenericsForWeb(el, options, meta)
+    processComponentGenericsWeb(el, options, meta)
     return
   }
 
@@ -2104,7 +2293,7 @@ function processElement (el, root, options, meta) {
 
   // 仅ali平台需要scoped模拟样式隔离
   if (mode === 'ali') {
-    processScoped(el, options)
+    processScoped(el)
   }
 
   if (transAli) {
@@ -2114,9 +2303,14 @@ function processElement (el, root, options, meta) {
   processIf(el)
   processFor(el)
   processRef(el, options, meta)
-  processClass(el, meta)
-  processStyle(el, meta)
-  processBindEvent(el, options)
+  if (options.runtimeCompile) {
+    processClassDynamic(el, meta)
+    processStyleDynamic(el, meta)
+  } else {
+    processClass(el, meta)
+    processStyle(el, meta)
+  }
+  processEvent(el, options)
 
   if (!pass) {
     processShow(el, options, root)
@@ -2128,6 +2322,8 @@ function processElement (el, root, options, meta) {
 
 function closeElement (el, meta, options) {
   postProcessAtMode(el)
+  collectDynamicInfo(el, options, meta)
+
   if (mode === 'web') {
     postProcessWxs(el, meta)
     // 处理代码维度条件编译移除死分支
@@ -2136,16 +2332,26 @@ function closeElement (el, meta, options) {
   }
   const pass = isNative || postProcessTemplate(el) || processingTemplate
   postProcessWxs(el, meta)
-
   if (!pass) {
-    if (isComponentNode(el, options) && !options.hasVirtualHost && mode === 'ali') {
-      el = processAliAddComponentRootView(el, options)
-    } else {
-      el = postProcessComponentIs(el)
+    if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali') {
+      postProcessAliComponentRootView(el, options, meta)
     }
+    postProcessComponentIs(el, options)
   }
-  postProcessFor(el)
-  postProcessIf(el)
+
+  if (options.runtimeCompile) {
+    postProcessForDynamic(el, config[mode])
+    postProcessIfDynamic(el, config[mode])
+    postProcessAttrsDynamic(el, config[mode])
+  } else {
+    postProcessFor(el)
+    postProcessIf(el)
+  }
+}
+
+// 运行时组件的模版节点收集，最终注入到 mpx-custom-element-*.wxml 中
+function collectDynamicInfo (el, options, meta) {
+  setBaseWxml(el, { mode, isComponentNode, options }, meta)
 }
 
 function postProcessAtMode (el) {
@@ -2176,21 +2382,18 @@ function cloneAttrsList (attrsList) {
   })
 }
 
-function postProcessComponentIs (el) {
+function postProcessComponentIs (el, options) {
   if (el.is && el.components) {
     let tempNode
     if (el.for || el.if || el.elseif || el.else) {
-      tempNode = createASTElement('block', [])
-      moveBaseDirective(tempNode, el)
+      tempNode = createASTElement('block')
     } else {
       tempNode = getTempNode()
     }
-    let range = []
-    if (el.attrsMap.range) {
-      range = getAndRemoveAttr(el, 'range').val.split(',').map(item => item.trim())
-    }
+    replaceNode(el, tempNode, true)
+    postMoveBaseDirective(tempNode, el, options)
+
     el.components.forEach(function (component) {
-      if (range.length > 0 && !range.includes(component)) return
       const newChild = createASTElement(component, cloneAttrsList(el.attrsList), tempNode)
       newChild.if = {
         raw: `{{${el.is} === ${stringify(component)}}}`,
@@ -2207,10 +2410,9 @@ function postProcessComponentIs (el) {
     if (!el.parent) {
       error$1('Dynamic component can not be the template root, considering wrapping it with <view> or <text> tag!')
     } else {
-      el = replaceNode(el, tempNode, true) || el
+      replaceNode(el, tempNode, true)
     }
   }
-  return el
 }
 
 function stringifyAttr (val) {
@@ -2290,8 +2492,8 @@ function findPrevNode (node) {
   }
 }
 
-function replaceNode (node, newNode, reserveNode) {
-  if (!reserveNode) deleteErrorInResultMap(node)
+function replaceNode (node, newNode, reserveError) {
+  if (!reserveError) deleteErrorInResultMap(node)
   const parent = node.parent
   if (parent) {
     const index = parent.children.indexOf(node)
@@ -2303,8 +2505,8 @@ function replaceNode (node, newNode, reserveNode) {
   }
 }
 
-function removeNode (node, reserveNode) {
-  if (!reserveNode) deleteErrorInResultMap(node)
+function removeNode (node, reserveError) {
+  if (!reserveError) deleteErrorInResultMap(node)
   const parent = node.parent
   if (parent) {
     const index = parent.children.indexOf(node)
@@ -2399,167 +2601,148 @@ function genNode (node) {
   return exp
 }
 
-/**
- * 处理可选链用法
- * @param str
- * @returns
- */
-function parseOptionChain (str) {
-  const wxsName = `${optionalChainWxsName}.g`
-  let optionsRes
-  while (optionsRes = /\?\./.exec(str)) {
-    const strLength = str.length
-    const grammarMap = {
-      init () {
-        const initKey = [
-          {
-            mapKey: '[]',
-            mapValue: [
-              {
-                key: '[',
-                value: 1
-              },
-              {
-                key: ']',
-                value: -1
-              }
-            ]
-          },
-          {
-            mapKey: '()',
-            mapValue: [
-              {
-                key: '(',
-                value: 1
-              },
-              {
-                key: ')',
-                value: -1
-              }
-            ]
-          }
-        ]
-        this.count = {}
-        initKey.forEach(({ mapKey, mapValue }) => {
-          mapValue.forEach(({ key, value }) => {
-            this[key] = this.changeState(mapKey, value)
-          })
-        })
-      },
-      changeState (key, value) {
-        if (!this.count[key]) {
-          this.count[key] = 0
-        }
-        return () => {
-          this.count[key] = this.count[key] + value
-          return this.count[key]
-        }
-      },
-      checkState () {
-        return Object.values(this.count).find(i => i)
-      }
-    }
-    let leftIndex = optionsRes.index
-    let rightIndex = leftIndex + 2
-    let haveNotGetValue = true
-    let chainValue = ''
-    let chainKey = ''
-    let notCheck = false
-    grammarMap.init()
-    // 查 ?. 左边值
-    while (haveNotGetValue && leftIndex > 0) {
-      const left = str[leftIndex - 1]
-      const grammar = grammarMap[left]
-      if (notCheck) {
-        // 处于表达式内
-        chainValue = left + chainValue
-        if (grammar) {
-          grammar()
-          if (!grammarMap.checkState()) {
-            // 表达式结束
-            notCheck = false
-          }
-        }
-      } else if (~[']', ')'].indexOf(left)) {
-        // 命中表达式，开始记录表达式
-        chainValue = left + chainValue
-        notCheck = true
-        grammar()
-      } else if (left !== ' ') {
-        if (!/[A-Za-z0-9_$.]/.test(left)) {
-          // 结束
-          haveNotGetValue = false
-          leftIndex++
-        } else {
-          // 正常语法
-          chainValue = left + chainValue
+function addIfConditionDynamic (el, condition) {
+  if (!el.ifConditions) {
+    el.ifConditions = []
+  }
+  el.ifConditions.push(condition)
+}
+
+function processIfConditionsDynamic (el) {
+  const prevNode = findPrevNode(el)
+  if (prevNode && prevNode.if) {
+    addIfConditionDynamic(prevNode, {
+      ifExp: !!el.elseif,
+      block: el,
+      __exp: el.elseif ? parseExp(el.elseif.exp) : ''
+    })
+    removeNode(el)
+  }
+}
+
+function processClassDynamic (el, meta) {
+  const type = 'class'
+  const targetType = type
+  const dynamicClass = getAndRemoveAttr(el, config[mode].directive.dynamicClass).val
+  let staticClass = getAndRemoveAttr(el, type).val || ''
+  staticClass = staticClass.replace(/\s+/g, ' ')
+  if (dynamicClass) {
+    const staticClassExp = parseMustacheWithContext(staticClass).result
+    const dynamicClassExp = transDynamicClassExpr(parseMustacheWithContext(dynamicClass).result, {
+      error: error$1
+    })
+    addAttrs(el, [{
+      name: targetType,
+      value: `{{[${staticClassExp},${dynamicClassExp}]}}`
+    }])
+  } else if (staticClass) {
+    addAttrs(el, [{
+      name: targetType,
+      value: staticClass
+    }])
+  }
+}
+
+function processStyleDynamic (el, meta) {
+  const type = 'style'
+  const targetType = type
+  const dynamicStyle = getAndRemoveAttr(el, config[mode].directive.dynamicStyle).val
+  let staticStyle = getAndRemoveAttr(el, type).val || ''
+  staticStyle = staticStyle.replace(/\s+/g, ' ')
+  if (dynamicStyle) {
+    const staticStyleExp = parseMustacheWithContext(staticStyle).result
+    const dynamicStyleExp = parseMustacheWithContext(dynamicStyle).result
+    addAttrs(el, [{
+      name: targetType,
+      value: `{{[${staticStyleExp},${dynamicStyleExp}]}}`
+    }])
+  } else if (staticStyle) {
+    addAttrs(el, [{
+      name: targetType,
+      value: staticStyle
+    }])
+  }
+}
+
+function processTextDynamic (vnode) {
+  if (vnode.type !== 3 || vnode.isComment) {
+    return
+  }
+  const parsed = parseMustacheWithContext(vnode.text)
+  if (parsed.hasBinding) {
+    vnode.__exp = parseExp(parsed.result)
+    delete vnode.text
+  }
+}
+
+function postProcessIfDynamic (vnode, config) {
+  if (vnode.if) {
+    const parsedExp = vnode.if.exp
+    addIfConditionDynamic(vnode, {
+      ifExp: true,
+      block: 'self',
+      __exp: parseExp(parsedExp)
+    })
+    getAndRemoveAttr(vnode, config.directive.if)
+    vnode.if = true
+  } else if (vnode.elseif || vnode.else) {
+    const directive = vnode.elseif
+      ? config.directive.elseif
+      : config.directive.else
+    getAndRemoveAttr(vnode, directive)
+    processIfConditionsDynamic(vnode)
+    delete vnode.elseif
+    delete vnode.else
+  }
+}
+
+function postProcessForDynamic (vnode) {
+  if (vnode.for) {
+    vnode.for.__exp = parseExp(vnode.for.exp)
+    delete vnode.for.raw
+    delete vnode.for.exp
+    popForScopes()
+  }
+}
+
+function postProcessAttrsDynamic (vnode, config) {
+  const exps = vnode.exps?.filter(v => v.attrName) || []
+  const expsMap = Object.fromEntries(exps.map(v => ([v.attrName, v])))
+  const directives = Object.values(config.directive)
+  if (vnode.attrsList && vnode.attrsList.length) {
+    // 后序遍历，主要为了做剔除的操作
+    for (let i = vnode.attrsList.length - 1; i >= 0; i--) {
+      const attr = vnode.attrsList[i]
+      if (config.event.parseEvent(attr.name) || directives.includes(attr.name)) {
+        // 原本的事件代理直接剔除，主要是基础模版的事件直接走代理形式，事件绑定名直接写死的，优化 astJson 体积
+        getAndRemoveAttr(vnode, attr.name)
+      } else if (attr.value == null) {
+        attr.__exp = parseExp('true')
+      } else {
+        const expInfo = expsMap[attr.name]
+        if (expInfo && expInfo.exp) {
+          attr.__exp = parseExp(expInfo.exp)
         }
       }
-      leftIndex--
-    }
-    if (grammarMap.checkState() && haveNotGetValue) {
-      // 值查找结束但是语法未闭合或者处理到边界还未结束，抛异常
-      throw new Error('[optionChain] option value illegal!!!')
-    }
-    haveNotGetValue = true
-    let keyValue = ''
-    // 查 ?. 右边key
-    while (haveNotGetValue && rightIndex < strLength) {
-      const right = str[rightIndex]
-      const grammar = grammarMap[right]
-      if (notCheck) {
-        // 处于表达式内
-        if (grammar) {
-          grammar()
-          if (grammarMap.checkState()) {
-            keyValue += right
-          } else {
-            // 表达式结束
-            notCheck = false
-            chainKey += `,${keyValue}`
-            keyValue = ''
-          }
-        } else {
-          keyValue += right
-        }
-      } else if (~['[', '('].indexOf(right)) {
-        // 命中表达式，开始记录表达式
-        grammar()
-        if (keyValue) {
-          chainKey += `,'${keyValue}'`
-          keyValue = ''
-        }
-        notCheck = true
-      } else if (!/[A-Za-z0-9_$.?]/.test(right)) {
-        // 结束
-        haveNotGetValue = false
-        rightIndex--
-      } else if (right !== '?') {
-        // 正常语法
-        if (right === '.') {
-          if (keyValue) {
-            chainKey += `,'${keyValue}'`
-          }
-          keyValue = ''
-        } else {
-          keyValue += right
-        }
+      if (attr.__exp) {
+        delete attr.value
       }
-      rightIndex++
-    }
-    if (grammarMap.checkState() && haveNotGetValue) {
-      // key值查找结束但是语法未闭合或者处理到边界还未结束，抛异常
-      throw new Error('[optionChain] option key illegal!!!')
-    }
-    if (keyValue) {
-      chainKey += `,'${keyValue}'`
-    }
-    str = str.slice(0, leftIndex) + `${wxsName}(${chainValue},[${chainKey.slice(1)}])` + str.slice(rightIndex)
-    if (!hasOptionalChain) {
-      hasOptionalChain = true
     }
   }
-  return str
+}
+
+function processShowStyleDynamic (el, show) {
+  if (show !== undefined) {
+    const showExp = parseMustacheWithContext(show).result
+    const oldStyle = getAndRemoveAttr(el, 'style').val
+    const displayExp = `${showExp}? '' : "display:none;"`
+    const isArray = oldStyle?.endsWith(']}}')
+    const value = isArray ? oldStyle?.replace(']}}', `,${displayExp}]}}`) : `${oldStyle ? `${oldStyle};` : ''}{{${displayExp}}}`
+    addAttrs(el, [{
+      name: 'style',
+      value: value
+    }])
+  }
 }
 
 module.exports = {
@@ -2572,5 +2755,10 @@ module.exports = {
   parseMustache,
   parseMustacheWithContext,
   stringifyWithResolveComputed,
-  addAttrs
+  addAttrs,
+  getAndRemoveAttr,
+  findPrevNode,
+  removeNode,
+  replaceNode,
+  createASTElement
 }