@mpxjs/webpack-plugin 2.9.40 → 2.9.41-react.0

package/lib/template-compiler/compiler.js

@@ -14,8 +14,9 @@ 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 { isReact } = require('../utils/env')
+
 const no = function () {
   return false
 }
@@ -37,6 +38,7 @@ const endTag = new RegExp(('^<\\/' + qnameCapture + '[^>]*>'))
 const doctype = /^<!DOCTYPE [^>]+>/i
 const comment = /^<!--/
 const conditionalComment = /^<!\[/
+const hoverClassReg = /^mpx-((cover-)?view|button|navigator)$/
 let IS_REGEX_CAPTURING_BROKEN = false
 'x'.replace(/x(.)?/g, function (m, g) {
   IS_REGEX_CAPTURING_BROKEN = g === ''
@@ -77,11 +79,11 @@ function createASTElement (tag, attrs = [], parent = null) {
 
 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'
+    ))
   )
 }
 
@@ -99,6 +101,7 @@ let moduleId
 let isNative
 let hasScoped
 let hasVirtualHost
+let runtimeCompile
 let rulesRunner
 let currentEl
 let injectNodes = []
@@ -285,8 +288,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)
@@ -425,7 +428,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) {
@@ -616,6 +619,7 @@ function parse (template, options) {
   hasVirtualHost = options.hasVirtualHost
   filePath = options.filePath
   i18n = options.i18n
+  runtimeCompile = options.runtimeCompile
   platformGetTagNamespace = options.getTagNamespace || no
   refId = 0
   injectNodes = []
@@ -688,9 +692,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.'
         )
       }
 
@@ -747,7 +751,7 @@ function parse (template, options) {
             parent: currentParent
           }
           children.push(el)
-          options.runtimeCompile ? processTextDynamic(el) : processText(el)
+          runtimeCompile ? processTextDynamic(el) : processText(el)
         }
       }
     },
@@ -859,20 +863,21 @@ function modifyAttr (el, name, val) {
   }
 }
 
-function postMoveBaseDirective (target, source, options, isDelete = true) {
+function postMoveBaseDirective (target, source, isDelete = true) {
   target.for = source.for
   target.if = source.if
   target.elseif = source.elseif
   target.else = source.else
-
-  if (options.runtimeCompile) {
+  if (isReact(mode)) {
+    postProcessForReact(target)
+    postProcessIfReact(target)
+  } else if (runtimeCompile) {
     postProcessForDynamic(target, config[mode])
     postProcessIfDynamic(target, config[mode])
   } else {
     postProcessFor(target)
     postProcessIf(target)
   }
-
   if (isDelete) {
     delete source.for
     delete source.if
@@ -1047,6 +1052,128 @@ function stringifyWithResolveComputed (modelValue) {
   return result.join('+')
 }
 
+function processStyleReact (el) {
+  // process class/wx:class/style/wx:style/wx:show for react native
+  const dynamicClass = getAndRemoveAttr(el, config[mode].directive.dynamicClass).val
+  let staticClass = getAndRemoveAttr(el, 'class').val || ''
+  staticClass = staticClass.replace(/\s+/g, ' ')
+
+  let staticHoverClass = ''
+  if (hoverClassReg.test(el.tag)) {
+    staticHoverClass = el.attrsMap['hover-class'] || ''
+    staticHoverClass = staticHoverClass.replace(/\s+/g, ' ')
+  }
+
+  const dynamicStyle = getAndRemoveAttr(el, config[mode].directive.dynamicStyle).val
+  let staticStyle = getAndRemoveAttr(el, 'style').val || ''
+  staticStyle = staticStyle.replace(/\s+/g, ' ')
+
+  const show = getAndRemoveAttr(el, config[mode].directive.show).val
+
+  if (dynamicClass || staticClass || dynamicStyle || staticStyle || show) {
+    const staticClassExp = parseMustacheWithContext(staticClass).result
+    const dynamicClassExp = parseMustacheWithContext(dynamicClass).result
+    const staticStyleExp = parseMustacheWithContext(staticStyle).result
+    const dynamicStyleExp = parseMustacheWithContext(dynamicStyle).result
+    const showExp = parseMustacheWithContext(show).result
+
+    addAttrs(el, [{
+      name: 'style',
+      // runtime helper
+      value: `{{this.__getStyle(${staticClassExp}, ${dynamicClassExp}, ${staticStyleExp}, ${dynamicStyleExp}, ${showExp})}}`
+    }])
+  }
+
+  if (staticHoverClass && staticHoverClass !== 'none') {
+    const staticClassExp = parseMustacheWithContext(staticHoverClass).result
+    addAttrs(el, [{
+      name: 'hoverStyle',
+      // runtime helper
+      value: `{{this.__getStyle(${staticClassExp})}}`
+    }])
+  }
+}
+
+function processEventReact (el, options, meta) {
+  const eventConfigMap = {}
+  el.attrsList.forEach(function ({ name, value }) {
+    const parsedEvent = config[mode].event.parseEvent(name)
+    if (parsedEvent) {
+      const type = parsedEvent.eventName
+      const parsedFunc = parseFuncStr(value)
+      if (parsedFunc) {
+        if (!eventConfigMap[type]) {
+          eventConfigMap[type] = {
+            configs: []
+          }
+        }
+        eventConfigMap[type].configs.push(Object.assign({ name }, parsedFunc))
+      }
+    }
+  })
+
+  let wrapper
+
+  for (const type in eventConfigMap) {
+    let { configs } = eventConfigMap[type]
+
+    let resultName
+    configs.forEach(({ name }) => {
+      if (name) {
+        // 清空原始事件绑定
+        let has
+        do {
+          has = getAndRemoveAttr(el, name).has
+        } while (has)
+
+        if (!resultName) {
+          // 清除修饰符
+          resultName = name.replace(/\..*/, '')
+        }
+      }
+    })
+    configs = configs.map((item) => {
+      return item.expStr
+    })
+    const name = resultName || config[mode].event.getEvent(type)
+    const value = `{{(e)=>this.__invoke(e, [${configs}])}}`
+    addAttrs(el, [
+      {
+        name,
+        value
+      }
+    ])
+    // 非button的情况下，press/longPress时间需要包裹TouchableWithoutFeedback进行响应，后续可支持配置
+    // if ((type === 'press' || type === 'longPress') && el.tag !== 'mpx-button') {
+    //   if (!wrapper) {
+    //     wrapper = createASTElement('TouchableWithoutFeedback')
+    //     wrapper.isBuiltIn = true
+    //     processBuiltInComponents(wrapper, meta)
+    //   }
+    //   addAttrs(el, [
+    //     {
+    //       name,
+    //       value
+    //     }
+    //   ])
+    // } else {
+    //   addAttrs(el, [
+    //     {
+    //       name,
+    //       value
+    //     }
+    //   ])
+    // }
+  }
+
+  if (wrapper) {
+    replaceNode(el, wrapper, true)
+    addChild(wrapper, el)
+    processAttrs(wrapper, options)
+    postMoveBaseDirective(wrapper, el)
+  }
+}
+
 function processEvent (el, options) {
   const eventConfigMap = {}
   el.attrsList.forEach(function ({ name, value }) {
@@ -1057,7 +1184,7 @@ function processEvent (el, options) {
       const modifiers = (parsedEvent.modifier || '').split('.')
       const prefix = parsedEvent.prefix
       // catch 场景下，下发的 eventconfig 里面包含特殊字符，用以运行时的判断
-      const extraStr = options.runtimeCompile && prefix === 'catch' ? `, "__mpx_${prefix}"` : ''
+      const extraStr = runtimeCompile && prefix === 'catch' ? `, "__mpx_${prefix}"` : ''
       const parsedFunc = parseFuncStr(value, extraStr)
       if (parsedFunc) {
         if (!eventConfigMap[type]) {
@@ -1178,6 +1305,14 @@ function processEvent (el, options) {
   }
 }
 
+function processSlotReact (el) {
+  if (el.tag === 'slot') {
+    el.slot = {
+      name: getAndRemoveAttr(el, 'name').val
+    }
+  }
+}
+
 function wrapMustache (val) {
   return val && !tagRE.test(val) ? `{{${val}}}` : val
 }
@@ -1519,6 +1654,27 @@ function processFor (el) {
   }
 }
 
+function processRefReact (el, options, meta) {
+  const val = getAndRemoveAttr(el, config[mode].directive.ref).val
+  const type = isComponentNode(el, options) ? 'component' : 'node'
+  if (val) {
+    if (!meta.refs) {
+      meta.refs = []
+    }
+    const all = !!forScopes.length
+    meta.refs.push({
+      key: val,
+      all,
+      type
+    })
+
+    addAttrs(el, [{
+      name: 'ref',
+      value: `{{ this.__getRefVal('${val}') }}`
+    }])
+  }
+}
+
 function processRef (el, options, meta) {
   const val = getAndRemoveAttr(el, config[mode].directive.ref).val
   const type = isComponentNode(el, options) ? 'component' : 'node'
@@ -1659,6 +1815,19 @@ function postProcessFor (el) {
   }
 }
 
+function postProcessForReact (el) {
+  if (el.for) {
+    if (el.for.key) {
+      addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key)})`, false, 'key')
+      addAttrs(el, [{
+        name: 'key',
+        value: el.for.key
+      }])
+    }
+    popForScopes()
+  }
+}
+
 function evalExp (exp) {
   let result = { success: false }
   try {
@@ -1735,7 +1904,35 @@ function postProcessIf (el) {
   }
 }
 
-function processText (el, meta) {
+function addIfCondition (el, condition) {
+  if (!el.ifConditions) {
+    el.ifConditions = []
+  }
+  el.ifConditions.push(condition)
+}
+
+function postProcessIfReact (el) {
+  let prevNode
+  if (el.if) {
+    addIfCondition(el, {
+      exp: el.if.exp,
+      block: el
+    })
+  } else if (el.elseif || el.else) {
+    prevNode = findPrevNode(el)
+    if (prevNode && prevNode.if) {
+      addIfCondition(prevNode, {
+        exp: el.elseif && el.elseif.exp,
+        block: el
+      })
+      removeNode(el, true)
+    } else {
+      warn$1(`wx:${el.elseif ? `elif="${el.elseif.raw}"` : 'else'} used on element [${el.tag}] without corresponding wx:if.`)
+    }
+  }
+}
+
+function processText (el) {
   if (el.type !== 3 || el.isComment) {
     return
   }
@@ -1744,6 +1941,19 @@ function processText (el, meta) {
     addExp(el, parsed.result)
   }
   el.text = parsed.val
+  if (isReact(mode)) {
+    processWrapTextReact(el)
+  }
+}
+
+// RN中文字需被Text包裹
+function processWrapTextReact (el) {
+  const parentTag = el.parent.tag
+  if (parentTag !== 'mpx-text' && parentTag !== 'Text') {
+    const wrapper = createASTElement('Text')
+    replaceNode(el, wrapper, true)
+    addChild(wrapper, el)
+  }
 }
 
 // function injectComputed (el, meta, type, body) {
@@ -1759,13 +1969,11 @@ function processText (el, meta) {
 //   }])
 // }
 
-function injectWxs (meta, module, src, options) {
-  if (addWxsModule(meta, module, src)) {
-    return
-  }
-  if (options && options.runtimeCompile) {
+function injectWxs (meta, module, src) {
+  if (runtimeCompile || addWxsModule(meta, module, src)) {
     return
   }
+
   const wxsNode = createASTElement(config[mode].wxs.tag, [
     {
       name: config[mode].wxs.module,
@@ -1963,7 +2171,11 @@ function processBuiltInComponents (el, meta) {
     }
     const tag = el.tag
     if (!meta.builtInComponentsMap[tag]) {
-      meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/${mode}/${tag}`
+      if (isReact(mode)) {
+        meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/react/${tag}`
+      } else {
+        meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/${mode}/${tag}`
+      }
     }
   }
 }
@@ -2026,9 +2238,9 @@ function postProcessAliComponentRootView (el, options, meta) {
   replaceNode(el, componentWrapView, true)
   addChild(componentWrapView, el)
   processAttrs(componentWrapView, options)
-  postMoveBaseDirective(componentWrapView, el, options)
+  postMoveBaseDirective(componentWrapView, el)
 
-  if (options.runtimeCompile) {
+  if (runtimeCompile) {
     collectDynamicInfo(componentWrapView, options, meta)
     postProcessAttrsDynamic(componentWrapView, config[mode])
   }
@@ -2058,6 +2270,17 @@ function getVirtualHostRoot (options, meta) {
         processElement(rootView, rootView, options, meta)
         return rootView
       }
+      if (isReact(mode) && !hasVirtualHost) {
+        const rootView = createASTElement('view', [
+          {
+            name: 'class',
+            value: `${MPX_ROOT_VIEW} host-${moduleId}`
+          }
+        ])
+        rootView.isRoot = true
+        processElement(rootView, rootView, options, meta)
+        return rootView
+      }
     }
     if (mode === 'web' && ctorType === 'page') {
       return createASTElement('page')
@@ -2091,14 +2314,14 @@ function processShow (el, options, root) {
         value: show
       }])
     } else {
-      if (options.runtimeCompile) {
+      if (runtimeCompile) {
         processShowStyleDynamic(el, show)
       } else {
         processShowStyle(el, show)
       }
     }
   } else {
-    if (options.runtimeCompile) {
+    if (runtimeCompile) {
       processShowStyleDynamic(el, show)
     } else {
       processShowStyle(el, show)
@@ -2133,7 +2356,7 @@ function postProcessTemplate (el) {
   }
 }
 
-const isValidMode = makeMap('wx,ali,swan,tt,qq,web,qa,jd,dd,tenon,noMode')
+const isValidMode = makeMap('wx,ali,swan,tt,qq,web,qa,jd,dd,tenon,ios,android,noMode')
 
 function isValidModeP (i) {
   return isValidMode(i[0] === '_' ? i.slice(1) : i)
@@ -2241,7 +2464,7 @@ function processInjectWxs (el, meta, options) {
   if (el.injectWxsProps && el.injectWxsProps.length) {
     el.injectWxsProps.forEach((injectWxsProp) => {
       const { injectWxsPath, injectWxsModuleName } = injectWxsProp
-      injectWxs(meta, injectWxsModuleName, injectWxsPath, options)
+      injectWxs(meta, injectWxsModuleName, injectWxsPath)
     })
   }
 }
@@ -2261,6 +2484,12 @@ function processMpxTagName (el) {
   }
 }
 
+function postProcessComponent (el, options) {
+  if (isComponentNode(el, options)) {
+    el.isComponent = true
+  }
+}
+
 function processElement (el, root, options, meta) {
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
@@ -2293,6 +2522,21 @@ function processElement (el, root, options, meta) {
     return
   }
 
+  if (isReact(mode)) {
+    // 收集内建组件
+    processBuiltInComponents(el, meta)
+    // 预处理代码维度条件编译
+    processIf(el)
+    processFor(el)
+    processRefReact(el, options, meta)
+    processStyleReact(el)
+    processEventReact(el, options, meta)
+    processComponentIs(el, options)
+    processSlotReact(el)
+    processAttrs(el, options)
+    return
+  }
+
   const pass = isNative || processTemplate(el) || processingTemplate
 
   // 仅ali平台需要scoped模拟样式隔离
@@ -2307,7 +2551,7 @@ function processElement (el, root, options, meta) {
   processIf(el)
   processFor(el)
   processRef(el, options, meta)
-  if (options.runtimeCompile) {
+  if (runtimeCompile) {
     processClassDynamic(el, meta)
     processStyleDynamic(el, meta)
   } else {
@@ -2334,16 +2578,23 @@ function closeElement (el, meta, options) {
     postProcessIf(el)
     return
   }
+  if (isReact(mode)) {
+    postProcessForReact(el)
+    postProcessIfReact(el)
+    // flag component for react
+    postProcessComponent(el, options)
+    return
+  }
   const pass = isNative || postProcessTemplate(el) || processingTemplate
   postProcessWxs(el, meta)
   if (!pass) {
     if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali') {
       postProcessAliComponentRootView(el, options, meta)
     }
-    postProcessComponentIs(el, options)
+    postProcessComponentIs(el)
   }
 
-  if (options.runtimeCompile) {
+  if (runtimeCompile) {
     postProcessForDynamic(el, config[mode])
     postProcessIfDynamic(el, config[mode])
     postProcessAttrsDynamic(el, config[mode])
@@ -2386,7 +2637,7 @@ function cloneAttrsList (attrsList) {
   })
 }
 
-function postProcessComponentIs (el, options) {
+function postProcessComponentIs (el) {
   if (el.is && el.components) {
     let tempNode
     if (el.for || el.if || el.elseif || el.else) {
@@ -2395,7 +2646,7 @@ function postProcessComponentIs (el, options) {
       tempNode = getTempNode()
     }
     replaceNode(el, tempNode, true)
-    postMoveBaseDirective(tempNode, el, options)
+    postMoveBaseDirective(tempNode, el)
 
     el.components.forEach(function (component) {
       const newChild = createASTElement(component, cloneAttrsList(el.attrsList), tempNode)

package/lib/template-compiler/gen-node-react.js

@@ -0,0 +1,95 @@
+const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
+
+function genIf (node) {
+  node.ifProcessed = true
+  return genIfConditions(node.ifConditions.slice())
+}
+
+function genIfConditions (conditions) {
+  if (!conditions.length) return 'null'
+  const condition = conditions.shift()
+  if (condition.exp) {
+    return `(${condition.exp})?${genNode(condition.block)}:${genIfConditions(conditions)}`
+  } else {
+    return genNode(condition.block)
+  }
+}
+
+function genFor (node) {
+  node.forProcessed = true
+  const index = node.for.index || 'index'
+  const item = node.for.item || 'item'
+  return `_i(${node.for.exp}, function(${item},${index}){return ${genNode(node)}})`
+}
+
+const s = JSON.stringify
+
+function mapAttrName (name) {
+  if (name === 'class') return 'className'
+  if (!isValidIdentifierStr(name)) return s(name)
+  return name
+}
+
+function genNode (node) {
+  let exp = ''
+  if (node) {
+    if (node.type === 3) {
+      if (!node.isComment) {
+        if (node.exps) {
+          exp += `${node.exps[0].exp}`
+        } else {
+          exp += `${s(node.text)}`
+        }
+      }
+    }
+    if (node.type === 1) {
+      if (node.tag !== 'temp-node') {
+        if (node.for && !node.forProcessed) {
+          exp += genFor(node)
+        } else if (node.if && !node.ifProcessed) {
+          exp += genIf(node)
+        } else {
+          const attrExpMap = (node.exps || []).reduce((map, { exp, attrName }) => {
+            if (attrName) {
+              map[attrName] = exp
+            }
+            return map
+          }, {})
+          if (node.slot) {
+            const name = node.slot.name
+            exp += `__getSlot(${name ? s(name) : ''})`
+          } else {
+            exp += `createElement(${node.isComponent || node.isBuiltIn ? `components[${node.is || s(node.tag)}]` : `getNativeComponent(${s(node.tag)})`}`
+            if (node.isRoot) {
+              exp += `, Object.assign({}, rootProps, {style: [${attrExpMap.style}, rootProps.style]})`
+            } else if (node.attrsList.length) {
+              const attrs = []
+              node.attrsList && node.attrsList.forEach(({ name, value }) => {
+                const attrExp = attrExpMap[name] ? attrExpMap[name] : s(value)
+                attrs.push(`${mapAttrName(name)}: ${attrExp}`)
+              })
+              exp += `, { ${attrs.join(', ')} }`
+            } else {
+              exp += ', null'
+            }
+
+            if (!node.unary && node.children.length) {
+              exp += ','
+              node.children.forEach(function (child, index) {
+                exp += `${index === 0 ? '' : ','}${genNode(child)}`
+              })
+            }
+            exp += ')'
+          }
+        }
+      } else {
+        node.children.forEach(function (child, index) {
+          exp += `${index === 0 ? '' : ','}${genNode(child)}`
+        })
+      }
+    }
+  }
+  return exp
+}
+
+module.exports = genNode