@mpxjs/webpack-plugin 2.9.62 → 2.9.65

package/lib/template-compiler/compiler.js

@@ -1,7 +1,7 @@
 const JSON5 = require('json5')
 const he = require('he')
 const config = require('../config')
-const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, PARENT_MODULE_ID } = require('../utils/const')
 const normalize = require('../utils/normalize')
 const { normalizeCondition } = require('../utils/match-condition')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
@@ -15,7 +15,7 @@ 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 { isReact, isWeb } = require('../utils/env')
 
 const no = function () {
   return false
@@ -887,7 +887,7 @@ function postMoveBaseDirective (target, source, isDelete = true) {
 }
 
 function stringify (str) {
-  if (mode === 'web') str = str.replace(/'/g, '"')
+  if (isWeb(mode)) str = str.replace(/'/g, '"')
   return JSON.stringify(str)
 }
 
@@ -1068,7 +1068,10 @@ function processStyleReact (el, options) {
   let staticStyle = getAndRemoveAttr(el, 'style').val || ''
   staticStyle = staticStyle.replace(/\s+/g, ' ')
 
-  const show = getAndRemoveAttr(el, config[mode].directive.show).val
+  const { val: show, has } = getAndRemoveAttr(el, config[mode].directive.show)
+  if (has && show === undefined) {
+    error$1(`Attrs ${config[mode].directive.show} should have a value `)
+  }
 
   if (dynamicClass || staticClass || dynamicStyle || staticStyle || show) {
     const staticClassExp = parseMustacheWithContext(staticClass).result
@@ -1080,14 +1083,14 @@ function processStyleReact (el, options) {
     addAttrs(el, [{
       name: 'style',
       // runtime helper
-      value: `{{this.__getStyle(${staticClassExp}, ${dynamicClassExp}, ${staticStyleExp}, ${dynamicStyleExp}, ${showExp})}}`
+      value: `{{this.__getStyle(${staticClassExp}, ${dynamicClassExp}, ${staticStyleExp}, ${dynamicStyleExp}${show === undefined ? '' : `, !(${showExp})`})}}`
     }])
   }
 
   if (staticHoverClass && staticHoverClass !== 'none') {
     const staticClassExp = parseMustacheWithContext(staticHoverClass).result
     addAttrs(el, [{
-      name: 'hoverStyle',
+      name: 'hover-style',
       value: `{{this.__getStyle(${staticClassExp})}}`
     }])
   }
@@ -1355,11 +1358,13 @@ function processEvent (el, options) {
   }
 }
 
-function processSlotReact (el) {
+function processSlotReact (el, meta) {
   if (el.tag === 'slot') {
     el.slot = {
       name: getAndRemoveAttr(el, 'name').val
     }
+    meta.options = meta.options || {}
+    meta.options.disableMemo = true
   }
 }
 
@@ -1720,34 +1725,33 @@ function processRefReact (el, meta) {
       type
     }
 
+    const selectors = []
+
+    /**
+     * selectorsConf: [type, [[prefix, selector], [prefix, selector]]]
+     */
     if (!val) {
-      refConf.key = `ref_rn_${++refId}`
-      refConf.sKeys = []
       const rawId = el.attrsMap.id
       const rawClass = el.attrsMap.class
       const rawDynamicClass = el.attrsMap[config[mode].directive.dynamicClass]
 
-      meta.computed = meta.computed || []
       if (rawId) {
         const staticId = parseMustacheWithContext(rawId).result
-        const computedIdKey = `_ri${refId}`
-        refConf.sKeys.push({ key: computedIdKey, prefix: '#' })
-        meta.computed.push(`${computedIdKey}() {\n return ${staticId}}`)
+        selectors.push({ prefix: '#', selector: `${staticId}` })
       }
       if (rawClass || rawDynamicClass) {
         const staticClass = parseMustacheWithContext(rawClass).result
         const dynamicClass = parseMustacheWithContext(rawDynamicClass).result
-        const computedClassKey = `_rc${refId}`
-        refConf.sKeys.push({ key: computedClassKey, prefix: '.' })
-        meta.computed.push(`${computedClassKey}() {\n return this.__getClass(${staticClass}, ${dynamicClass})}`)
+        selectors.push({ prefix: '.', selector: `this.__getClass(${staticClass}, ${dynamicClass})` })
       }
+    } else {
+      meta.refs.push(refConf)
+      selectors.push({ prefix: '', selector: `"${refConf.key}"` })
     }
-
-    meta.refs.push(refConf)
-
+    const selectorsConf = selectors.map(item => `["${item.prefix}", ${item.selector}]`)
     addAttrs(el, [{
       name: 'ref',
-      value: `{{ this.__getRefVal('${refConf.key}') }}`
+      value: `{{ this.__getRefVal('${type}', [${selectorsConf}]) }}`
     }])
   }
 }
@@ -2047,7 +2051,7 @@ function processWrapTextReact (el) {
 // }
 
 function injectWxs (meta, module, src) {
-  if (runtimeCompile || addWxsModule(meta, module, src) || isReact(mode)) {
+  if (runtimeCompile || addWxsModule(meta, module, src) || isReact(mode) || isWeb(mode)) {
     return
   }
 
@@ -2135,96 +2139,76 @@ function isComponentNode (el, options) {
   return options.usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
 }
 
-function processAliExternalClassesHack (el, options) {
+function processExternalClasses (el, options) {
   const isComponent = isComponentNode(el, options)
-  // 处理组件externalClass多层传递
   const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class']
+
   classLikeAttrNames.forEach((classLikeAttrName) => {
-    let classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val
+    const classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val
     if (classLikeAttrValue) {
-      options.externalClasses.forEach((className) => {
-        const reg = new RegExp('\\b' + className + '\\b', 'g')
-        const replacement = dash2hump(className)
-        classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacement}||''}}`)
-      })
-      addAttrs(el, [{
-        name: classLikeAttrName,
-        value: classLikeAttrValue
-      }])
+      if (mode === 'web') {
+        processWebClass(classLikeAttrName, classLikeAttrValue, el, options)
+      } else {
+        processAliClass(classLikeAttrName, classLikeAttrValue, el, options)
+      }
     }
   })
 
   if (hasScoped && isComponent) {
-    options.externalClasses.forEach((className) => {
-      const externalClass = getAndRemoveAttr(el, className).val
-      if (externalClass) {
-        addAttrs(el, [{
-          name: className,
-          value: `${externalClass} ${moduleId}`
-        }])
-      }
-    })
-  }
-}
-
-// externalClasses只能模拟静态传递
-function processWebExternalClassesHack (el, options) {
-  const staticClass = getAndRemoveAttr(el, 'class').val
-  if (staticClass) {
-    const classNames = staticClass.split(/\s+/)
-    const replacements = []
-    options.externalClasses.forEach((className) => {
-      const index = classNames.indexOf(className)
-      if (index > -1) {
-        replacements.push(`$attrs[${stringify(className)}]`)
-        classNames.splice(index, 1)
-      }
+    const needAddModuleId = options.externalClasses.some((className) => {
+      return el.attrsMap[className] || (mode === 'web' && el.attrsMap[':' + className])
     })
 
-    if (classNames.length) {
+    if (needAddModuleId) {
       addAttrs(el, [{
-        name: 'class',
-        value: classNames.join(' ')
+        name: PARENT_MODULE_ID,
+        value: `${moduleId}`
       }])
     }
-
-    if (replacements.length) {
+  }
+  function processWebClass (classLikeAttrName, classLikeAttrValue, el, options) {
+    let classNames = classLikeAttrValue.split(/\s+/)
+    let hasExternalClass = false
+    classNames = classNames.map((className) => {
+      if (options.externalClasses.includes(className)) {
+        hasExternalClass = true
+        return `($attrs[${stringify(className)}] || '')`
+      }
+      return stringify(className)
+    })
+    if (hasExternalClass) {
+      classNames.push(`($attrs[${stringify(PARENT_MODULE_ID)}] || '')`)
+    }
+    if (classLikeAttrName === 'class') {
       const dynamicClass = getAndRemoveAttr(el, ':class').val
-      if (dynamicClass) replacements.push(dynamicClass)
-
+      if (dynamicClass) classNames.push(dynamicClass)
       addAttrs(el, [{
         name: ':class',
-        value: `[${replacements}]`
+        value: `[${classNames}]`
+      }])
+    } else {
+      addAttrs(el, [{
+        name: ':' + classLikeAttrName,
+        value: `[${classNames}].join(' ')`
       }])
     }
   }
 
-  // 处理externalClasses多层透传
-  const isComponent = isComponentNode(el, options)
-  if (isComponent) {
-    options.externalClasses.forEach((classLikeAttrName) => {
-      const classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val
-      if (classLikeAttrValue) {
-        const classNames = classLikeAttrValue.split(/\s+/)
-        const replacements = []
-        options.externalClasses.forEach((className) => {
-          const index = classNames.indexOf(className)
-          if (index > -1) {
-            replacements.push(`$attrs[${stringify(className)}]`)
-            classNames.splice(index, 1)
-          }
-        })
-
-        if (classNames.length) {
-          replacements.unshift(stringify(classNames.join(' ')))
-        }
-
-        addAttrs(el, [{
-          name: ':' + classLikeAttrName,
-          value: `[${replacements}].join(' ')`
-        }])
-      }
+  function processAliClass (classLikeAttrName, classLikeAttrValue, el, options) {
+    let hasExternalClass = false
+    options.externalClasses.forEach((className) => {
+      const reg = new RegExp('\\b' + className + '\\b', 'g')
+      const replacementClassName = dash2hump(className)
+      if (classLikeAttrValue.includes(className)) hasExternalClass = true
+      classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacementClassName} || ''}}`)
     })
+    if (hasExternalClass) {
+      classLikeAttrValue += ` {{${PARENT_MODULE_ID} || ''}}`
+    }
+    addAttrs(el, [{
+      name: classLikeAttrName,
+      value: classLikeAttrValue
+    }])
   }
 }
 
@@ -2329,10 +2313,10 @@ function getVirtualHostRoot (options, meta) {
     if (ctorType === 'component') {
       if (mode === 'wx' && hasVirtualHost) {
         // wx组件注入virtualHost配置
-        !meta.options && (meta.options = {})
+        meta.options = meta.options || {}
         meta.options.virtualHost = true
       }
-      if (mode === 'web' && !hasVirtualHost) {
+      if (isWeb(mode) && !hasVirtualHost) {
         // ali组件根节点实体化
         const rootView = createASTElement('view', [
           {
@@ -2353,13 +2337,17 @@ function getVirtualHostRoot (options, meta) {
             name: 'class',
             value: `${MPX_ROOT_VIEW} host-${moduleId}`
           }
+          // todo 运行时通过root标识确定是否合并rootProps
+          // {
+          //   name: 'is-root',
+          //   value: '{{true}}'
+          // }
         ])
-        rootView.isRoot = true
         processElement(rootView, rootView, options, meta)
         return rootView
       }
     }
-    if (mode === 'web' && ctorType === 'page') {
+    if (isWeb(mode) && ctorType === 'page') {
       return createASTElement('page')
     }
   }
@@ -2367,36 +2355,24 @@ function getVirtualHostRoot (options, meta) {
 }
 
 function processShow (el, options, root) {
-  // 开启 virtualhost 全部走 props 传递处理
-  // 未开启 virtualhost 直接绑定 display:none 到节点上
   let { val: show, has } = getAndRemoveAttr(el, config[mode].directive.show)
   if (mode === 'swan') show = wrapMustache(show)
   if (has && show === undefined) {
     error$1(`Attrs ${config[mode].directive.show} should have a value `)
+    return
   }
-  if (hasVirtualHost) {
-    if (ctorType === 'component' && el.parent === root && isRealNode(el)) {
-      if (show !== undefined) {
-        show = `{{${parseMustacheWithContext(show).result}&&mpxShow}}`
-      } else {
-        show = '{{mpxShow}}'
-      }
-    }
-    if (isComponentNode(el, options) && show !== undefined) {
-      if (show === '') {
-        show = '{{false}}'
-      }
-      addAttrs(el, [{
-        name: 'mpxShow',
-        value: show
-      }])
-    } else {
-      if (runtimeCompile) {
-        processShowStyleDynamic(el, show)
-      } else {
-        processShowStyle(el, show)
-      }
+  if (ctorType === 'component' && el.parent === root && isRealNode(el)) {
+    show = has ? `{{${parseMustacheWithContext(show).result}&&mpxShow}}` : '{{mpxShow}}'
+  }
+  if (show === undefined) return
+  if (isComponentNode(el, options)) {
+    if (show === '') {
+      show = '{{false}}'
     }
+    addAttrs(el, [{
+      name: 'mpxShow',
+      value: show
+    }])
   } else {
     if (runtimeCompile) {
       processShowStyleDynamic(el, show)
@@ -2407,15 +2383,13 @@ function processShow (el, options, root) {
 }
 
 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;'}}`
-    }])
-  }
+  const showExp = parseMustacheWithContext(show).result
+  let oldStyle = getAndRemoveAttr(el, 'style').val
+  oldStyle = oldStyle ? oldStyle + ';' : ''
+  addAttrs(el, [{
+    name: 'style',
+    value: `${oldStyle}{{${showExp}?'':'display:none;'}}`
+  }])
 }
 
 function processTemplate (el) {
@@ -2602,12 +2576,14 @@ function processElement (el, root, options, meta) {
 
   const transAli = mode === 'ali' && srcMode === 'wx'
 
-  if (mode === 'web') {
+  if (isWeb(mode)) {
     // 收集内建组件
     processBuiltInComponents(el, meta)
     // 预处理代码维度条件编译
     processIfWeb(el)
-    processWebExternalClassesHack(el, options)
+    processScoped(el)
+    // processWebExternalClassesHack(el, options)
+    processExternalClasses(el, options)
     processComponentGenericsWeb(el, options, meta)
     return
   }
@@ -2622,12 +2598,12 @@ function processElement (el, root, options, meta) {
     processStyleReact(el, options)
     processEventReact(el)
     processComponentIs(el, options)
-    processSlotReact(el)
+    processSlotReact(el, meta)
     processAttrs(el, options)
     return
   }
 
-  const pass = isNative || processTemplate(el) || processingTemplate
+  const isTemplate = processTemplate(el) || processingTemplate
 
   // 仅ali平台需要scoped模拟样式隔离
   if (mode === 'ali') {
@@ -2635,24 +2611,25 @@ function processElement (el, root, options, meta) {
   }
 
   if (transAli) {
-    processAliExternalClassesHack(el, options)
+    // processAliExternalClassesHack(el, options)
+    processExternalClasses(el, options)
   }
 
   processIf(el)
   processFor(el)
 
-  if (!pass) {
-    processRef(el, options, meta)
+  if (!isNative) {
+    if (!isTemplate) processRef(el, options, meta)
     if (runtimeCompile) {
-      processClassDynamic(el, meta)
-      processStyleDynamic(el, meta)
+      processClassDynamic(el)
+      processStyleDynamic(el)
     } else {
       processClass(el, meta)
       processStyle(el, meta)
     }
     processShow(el, options, root)
     processEvent(el, options)
-    processComponentIs(el, options)
+    if (!isTemplate) processComponentIs(el, options)
   }
 
   processAttrs(el, options)
@@ -2660,23 +2637,21 @@ function processElement (el, root, options, meta) {
 
 function closeElement (el, meta, options) {
   postProcessAtMode(el)
-  collectDynamicInfo(el, options, meta)
+  postProcessWxs(el, meta)
 
-  if (mode === 'web') {
-    postProcessWxs(el, meta)
+  if (isWeb(mode)) {
     // 处理代码维度条件编译移除死分支
     postProcessIf(el)
     return
   }
   if (isReact(mode)) {
-    postProcessWxs(el, meta)
     postProcessForReact(el)
     postProcessIfReact(el)
     return
   }
-  const pass = isNative || postProcessTemplate(el) || processingTemplate
-  postProcessWxs(el, meta)
-  if (!pass) {
+
+  const isTemplate = postProcessTemplate(el) || processingTemplate
+  if (!isNative && !isTemplate) {
     if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali') {
       postProcessAliComponentRootView(el, options, meta)
     }
@@ -2686,6 +2661,7 @@ function closeElement (el, meta, options) {
   if (runtimeCompile) {
     postProcessForDynamic(el, config[mode])
     postProcessIfDynamic(el, config[mode])
+    collectDynamicInfo(el, options, meta)
     postProcessAttrsDynamic(el, config[mode])
   } else {
     postProcessFor(el)
@@ -2788,9 +2764,7 @@ function serialize (root) {
           result += node.text
         }
       }
-      if (node.tag === 'wxs' && mode === 'web') {
-        return result
-      }
+
       if (node.type === 1) {
         if (node.tag !== 'temp-node') {
           result += '<' + node.tag
@@ -2960,11 +2934,11 @@ function processIfConditionsDynamic (el) {
       block: el,
       __exp: el.elseif ? parseExp(el.elseif.exp) : ''
     })
-    removeNode(el)
+    removeNode(el, true)
   }
 }
 
-function processClassDynamic (el, meta) {
+function processClassDynamic (el) {
   const type = 'class'
   const targetType = type
   const dynamicClass = getAndRemoveAttr(el, config[mode].directive.dynamicClass).val
@@ -2987,7 +2961,7 @@ function processClassDynamic (el, meta) {
   }
 }
 
-function processStyleDynamic (el, meta) {
+function processStyleDynamic (el) {
   const type = 'style'
   const targetType = type
   const dynamicStyle = getAndRemoveAttr(el, config[mode].directive.dynamicStyle).val
@@ -3076,17 +3050,15 @@ function postProcessAttrsDynamic (vnode, config) {
 }
 
 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
-    }])
-  }
+  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 = {

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

@@ -60,9 +60,7 @@ function genNode (node) {
             exp += `__getSlot(${name ? s(name) : ''})`
           } else {
             exp += `createElement(${`getComponent(${node.is || s(node.tag)})`}`
-            if (node.isRoot) {
-              exp += `, Object.assign({}, rootProps, {style: Object.assign({}, ${attrExpMap.style}, rootProps.style)})`
-            } else if (node.attrsList.length) {
+            if (node.attrsList.length) {
               const attrs = []
               node.attrsList && node.attrsList.forEach(({ name, value }) => {
                 const attrExp = attrExpMap[name] ? attrExpMap[name] : s(value)

package/lib/utils/const.js

@@ -5,5 +5,6 @@ module.exports = {
   RESOLVE_IGNORED_ERR: new Error('Resolve ignored!'),
   JSON_JS_EXT: '.json.js',
   MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
-  MPX_APP_MODULE_ID: 'mpx-app-scope' // app文件moduleId
+  MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
+  PARENT_MODULE_ID: '__pid'
 }

package/lib/web/processStyles.js

@@ -9,10 +9,11 @@ module.exports = function (styles, options, callback) {
           const attrs = Object.assign({}, style.attrs)
           if (options.autoScope) attrs.scoped = true
           attrs.mpxStyleOptions = JSON.stringify({
-            // scoped: !!options.autoScope,
+            scoped: attrs.scoped,
             // query中包含module字符串会被新版vue-cli中的默认rules当做css-module处理
             mid: options.moduleId
           })
+          delete attrs.scoped
           return attrs
         }
       })

package/lib/web/processTemplate.js

@@ -6,7 +6,7 @@ const { matchCondition } = require('../utils/match-condition')
 
 module.exports = function (template, {
   loaderContext,
-  // hasScoped,
+  hasScoped,
   hasComment,
   isNative,
   srcMode,
@@ -83,8 +83,7 @@ module.exports = function (template, {
           defs,
           decodeHTMLText,
           externalClasses,
-          // todo 后续输出web也采用mpx的scoped处理
-          hasScoped: false,
+          hasScoped,
           moduleId,
           filePath: resourcePath,
           i18n: null,

package/lib/wxml/loader.js

@@ -22,7 +22,7 @@ module.exports = function (content) {
   const { queryObj } = parseRequest(this.resource)
   const hasScoped = false
   const hasComment = false
-  const isNative = true
+  const isNative = false
 
   const mode = mpx.mode
   const localSrcMode = queryObj.mode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.62",
+  "version": "2.9.65",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.9.59",
+    "@mpxjs/utils": "^2.9.65",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -82,16 +82,19 @@
   },
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
-    "@mpxjs/api-proxy": "^2.9.62",
+    "@mpxjs/api-proxy": "^2.9.65",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
     "react-native": "^0.74.5",
     "react-native-gesture-handler": "^2.18.1",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-safe-area-context": "^4.12.0",
+    "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1"
   },
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "c31a343e7ef2c1c1585002752d8c50f016a858ae"
+  "gitHead": "24efa90e90b4d42c285ca61739cb9e4d0696976c"
 }