@mpxjs/webpack-plugin 2.9.69 → 2.9.70

package/lib/template-compiler/compiler.js

@@ -117,6 +117,7 @@ let hasOptionalChaining = false
 let processingTemplate = false
 const rulesResultMap = new Map()
 let usingComponents = []
+let usingComponentsInfo = {}
 
 function updateForScopesMap () {
   forScopesMap = {}
@@ -636,6 +637,7 @@ function parse (template, options) {
 
   if (typeof options.usingComponentsInfo === 'string') options.usingComponentsInfo = JSON.parse(options.usingComponentsInfo)
   usingComponents = Object.keys(options.usingComponentsInfo)
+  usingComponentsInfo = options.usingComponentsInfo
 
   const _warn = content => {
     const currentElementRuleResult = rulesResultMap.get(currentEl) || rulesResultMap.set(currentEl, {
@@ -725,7 +727,7 @@ function parse (template, options) {
         stack.push(element)
       } else {
         element.unary = true
-        closeElement(element, meta, options)
+        closeElement(element, options, meta)
       }
     },
 
@@ -740,7 +742,7 @@ function parse (template, options) {
         // pop stack
         stack.pop()
         currentParent = stack[stack.length - 1]
-        closeElement(element, meta, options)
+        closeElement(element, options, meta)
       }
     },
 
@@ -765,7 +767,7 @@ function parse (template, options) {
           parent: currentParent
         }
         children.push(el)
-        runtimeCompile ? processTextDynamic(el) : processText(el)
+        runtimeCompile ? processTextDynamic(el) : processText(el, options, meta)
       }
     },
     comment: function comment (text) {
@@ -1164,7 +1166,7 @@ function processEventReact (el) {
             configs: []
           }
         }
-        eventConfigMap[type].configs.push(Object.assign({ name }, parsedFunc))
+        eventConfigMap[type].configs.push(Object.assign({ name, value }, parsedFunc))
       }
     }
   })
@@ -1205,26 +1207,32 @@ function processEventReact (el) {
 
   // let wrapper
   for (const type in eventConfigMap) {
-    let { configs } = eventConfigMap[type]
-    configs.forEach(({ name }) => {
-      if (name) {
-        // 清空原始事件绑定
-        let has
-        do {
-          has = getAndRemoveAttr(el, name).has
-        } while (has)
-      }
-    })
-    configs = configs.map((item) => {
-      return item.expStr
-    })
-    const value = `{{(e)=>this.__invoke(e, [${configs}])}}`
-    addAttrs(el, [
-      {
-        name: type,
-        value
-      }
-    ])
+    const { configs } = eventConfigMap[type]
+    if (!configs.length) continue
+    const needBind = configs.length > 1 || configs[0].hasArgs
+    if (needBind) {
+      configs.forEach(({ name }) => {
+        if (name) {
+          // 清空原始事件绑定
+          let has
+          do {
+            has = getAndRemoveAttr(el, name).has
+          } while (has)
+        }
+      })
+      const value = `{{(e)=>this.__invoke(e, [${configs.map(item => item.expStr)}])}}`
+      addAttrs(el, [
+        {
+          name: type,
+          value
+        }
+      ])
+    } else {
+      const { name, value } = configs[0]
+      const { result } = parseMustacheWithContext(value)
+      modifyAttr(el, name, `{{this[${result}]}}`)
+    }
+
     // 非button的情况下，press/longPress时间需要包裹TouchableWithoutFeedback进行响应，后续可支持配置
     // if ((type === 'press' || type === 'longPress') && el.tag !== 'mpx-button') {
     //   if (!wrapper) {
@@ -1922,7 +1930,7 @@ 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')
+      addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key)}, ${el.for.index || 'index'})`, false, 'key')
       addAttrs(el, [{
         name: 'key',
         value: el.for.key
@@ -2036,7 +2044,7 @@ function postProcessIfReact (el) {
   }
 }
 
-function processText (el) {
+function processText (el, options, meta) {
   if (el.type !== 3 || el.isComment) {
     return
   }
@@ -2046,17 +2054,38 @@ function processText (el) {
   }
   el.text = parsed.val
   if (isReact(mode)) {
-    processWrapTextReact(el)
+    processWrapTextReact(el, options, meta)
   }
 }
 
-// RN中文字需被Text包裹
-function processWrapTextReact (el) {
-  const parentTag = el.parent.tag
+// RN中裸文字需被Text包裹
+// 为了批量修改Text默认属性，如allowFontScaling，使用mpx-simple-text进行包裹
+function processWrapTextReact (el, options, meta) {
+  const parent = el.parent
+  const parentTag = parent.tag
   if (parentTag !== 'mpx-text' && parentTag !== 'Text' && parentTag !== 'wxs') {
-    const wrapper = createASTElement('Text')
+    const wrapper = createASTElement('mpx-simple-text')
+    wrapper.isBuiltIn = true
+    const inheritAttrs = []
+    parent.attrsList.forEach(({ name, value }) => {
+      if (/^data-/.test(name)) {
+        inheritAttrs.push({
+          name,
+          value
+        })
+      }
+      if (/^id$/.test(name)) {
+        inheritAttrs.push({
+          name: 'parentId',
+          value
+        })
+      }
+    })
+    addAttrs(wrapper, inheritAttrs)
     replaceNode(el, wrapper, true)
     addChild(wrapper, el)
+    processBuiltInComponents(wrapper, meta)
+    processAttrs(wrapper, options)
   }
 }
 
@@ -2158,16 +2187,20 @@ function isRealNode (el) {
   return !virtualNodeTagMap[el.tag]
 }
 
-function isComponentNode (el, options) {
+function isComponentNode (el) {
   return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
 }
 
-function isReactComponent (el, options) {
-  return !isComponentNode(el, options) && isRealNode(el) && !el.isBuiltIn
+function getComponentInfo (el) {
+  return usingComponentsInfo[el.tag] || {}
+}
+
+function isReactComponent (el) {
+  return !isComponentNode(el) && isRealNode(el) && !el.isBuiltIn
 }
 
 function processExternalClasses (el, options) {
-  const isComponent = isComponentNode(el, options)
+  const isComponent = isComponentNode(el)
   const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class']
 
   classLikeAttrNames.forEach((classLikeAttrName) => {
@@ -2281,8 +2314,7 @@ function postProcessAliComponentRootView (el, options, meta) {
     { condition: /^style$/, action: 'move' },
     { condition: /^slot$/, action: 'move' }
   ]
-  const tagName = el.tag
-  const mid = options.usingComponentsInfo[tagName]?.mid || moduleId
+  const mid = getComponentInfo(el).mid
   const processAppendAttrsRules = [
     { name: 'class', value: `${MPX_ROOT_VIEW} host-${mid}` }
   ]
@@ -2361,12 +2393,11 @@ function getVirtualHostRoot (options, meta) {
           {
             name: 'class',
             value: `${MPX_ROOT_VIEW} host-${moduleId}`
+          },
+          {
+            name: 'ishost',
+            value: '{{true}}'
           }
-          // todo 运行时通过root标识确定是否合并rootProps
-          // {
-          //   name: 'is-root',
-          //   value: '{{true}}'
-          // }
         ])
         processElement(rootView, rootView, options, meta)
         return rootView
@@ -2390,7 +2421,7 @@ function processShow (el, options, root) {
     show = has ? `{{${parseMustacheWithContext(show).result}&&mpxShow}}` : '{{mpxShow}}'
   }
   if (show === undefined) return
-  if (isComponentNode(el, options)) {
+  if (isComponentNode(el) && getComponentInfo(el).hasVirtualHost) {
     if (show === '') {
       show = '{{false}}'
     }
@@ -2663,7 +2694,7 @@ function processElement (el, root, options, meta) {
   processAttrs(el, options)
 }
 
-function closeElement (el, meta, options) {
+function closeElement (el, options, meta) {
   postProcessAtMode(el)
   postProcessWxs(el, meta)
 
@@ -2682,14 +2713,14 @@ function closeElement (el, meta, options) {
   if (!isTemplate) {
     if (!isNative) {
       postProcessComponentIs(el, (child) => {
-        if (!hasVirtualHost && mode === 'ali') {
+        if (!getComponentInfo(el).hasVirtualHost && mode === 'ali') {
           postProcessAliComponentRootView(child, options)
         } else {
           postProcessIf(child)
         }
       })
     }
-    if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali' && el.tag !== 'component') {
+    if (isComponentNode(el) && !getComponentInfo(el).hasVirtualHost && mode === 'ali' && el.tag !== 'component') {
       postProcessAliComponentRootView(el, options, meta)
     }
   }

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

@@ -19,7 +19,7 @@ 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)}})`
+  return `this.__iter(${node.for.exp}, function(${item},${index}){return ${genNode(node)}})`
 }
 
 const s = JSON.stringify
@@ -57,7 +57,7 @@ function genNode (node) {
           }, {})
           if (node.slot) {
             const { name, slot } = node.slot
-            exp += `__getSlot(${name ? s(name) : ''}${slot ? `, ${s(slot)}` : ''})`
+            exp += `this.__getSlot(${name ? s(name) : ''}${slot ? `, ${s(slot)}` : ''})`
           } else {
             exp += `createElement(${`getComponent(${node.is || s(node.tag)})`}`
             if (node.attrsList.length) {

package/lib/utils/pre-process-json.js

@@ -6,6 +6,7 @@ const addQuery = require('./add-query')
 const resolve = require('./resolve')
 const getJSONContent = require('./get-json-content')
 const getRulesRunner = require('../platform')
+const { matchCondition } = require('./match-condition')
 const async = require('async')
 
 module.exports = function ({
@@ -19,8 +20,7 @@ module.exports = function ({
 }, callback) {
   const mpx = loaderContext.getMpx()
   const context = loaderContext.context
-  const mode = mpx.mode
-  const pagesMap = mpx.pagesMap
+  const { mode, pagesMap, autoVirtualHostRules } = mpx
   async.waterfall([
     (callback) => {
       getJSONContent(json, null, loaderContext, callback)
@@ -78,8 +78,8 @@ module.exports = function ({
           componentGenerics = Object.assign({}, ret.componentGenerics)
         }
         if (usingComponents) {
-          const setUsingComponentInfo = (name, moduleId) => {
-            usingComponentsInfo[name] = { mid: moduleId }
+          const setUsingComponentInfo = (name, info) => {
+            usingComponentsInfo[name] = info
           }
           async.eachOf(usingComponents, (component, name, callback) => {
             if (ctorType === 'app') {
@@ -96,7 +96,11 @@ module.exports = function ({
               if (err) return callback(err)
               const { rawResourcePath } = parseRequest(resource)
               const moduleId = mpx.getModuleId(rawResourcePath, ctorType === 'app')
-              setUsingComponentInfo(name, moduleId)
+              const hasVirtualHost = matchCondition(rawResourcePath, autoVirtualHostRules)
+              setUsingComponentInfo(name, {
+                mid: moduleId,
+                hasVirtualHost
+              })
               callback()
             })
           }, (err) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.69",
+  "version": "2.9.70",
   "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.69",
+    "@mpxjs/utils": "^2.9.70",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -83,7 +83,7 @@
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.9.69",
+    "@mpxjs/api-proxy": "^2.9.70",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -92,11 +92,12 @@
     "react-native-linear-gradient": "^2.8.3",
     "react-native-reanimated": "^3.15.2",
     "react-native-safe-area-context": "^4.12.0",
+    "react-native-svg": "^15.8.0",
     "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1"
   },
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "e23c51acc4c2ffdd31fcc6c27aae1aed42d1ade2"
+  "gitHead": "ad8f04de95865ffc2b50b8c0a7f87b5952fb8647"
 }

package/lib/runtime/components/react/dist/mpx-image/index.jsx

@@ -1,226 +0,0 @@
-/**
- * ✔ src
- * - mode: Partially, Only SVG format do not support
- * ✘ show-menu-by-longpress
- * ✔ binderror
- * ✔ bindload
- * ✘ fade-in
- * ✔ webp
- * ✘ lazy-load
- * ✔ bindtap
- * ✔ DEFAULT_SIZE
- */
-import { useEffect, useMemo, useState, useRef, forwardRef } from 'react';
-import { Image as RNImage, View, StyleSheet } from 'react-native';
-import useInnerProps, { getCustomEvent } from '../getInnerListeners';
-import useNodesRef from '../useNodesRef';
-import { useLayout, useTransformStyle } from '../utils';
-const DEFAULT_IMAGE_WIDTH = 320;
-const DEFAULT_IMAGE_HEIGHT = 240;
-// const REMOTE_SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i
-// const styls = StyleSheet.create({
-//   suspense: {
-//     display: 'flex',
-//     justifyContent: 'center',
-//     alignItems: 'center',
-//     width: '100%',
-//     height: '100%',
-//   },
-// })
-const cropMode = [
-    'top',
-    'bottom',
-    'center',
-    'right',
-    'left',
-    'top left',
-    'top right',
-    'bottom left',
-    'bottom right'
-];
-const ModeMap = new Map([
-    ['scaleToFill', 'stretch'],
-    ['aspectFit', 'contain'],
-    ['aspectFill', 'cover'],
-    ['widthFix', 'stretch'],
-    ['heightFix', 'stretch'],
-    ...cropMode.map(mode => [mode, 'stretch'])
-]);
-const isNumber = (value) => typeof value === 'number';
-const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
-// const Svg = lazy(() => import('./svg'))
-// const Fallback = (
-//   <View style={styls.suspense}>
-//     <Text>loading ...</Text>
-//   </View>
-// )
-const Image = forwardRef((props, ref) => {
-    const { src = '', mode = 'scaleToFill', 
-    // svg = false,
-    style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
-    const defaultStyle = {
-        width: DEFAULT_IMAGE_WIDTH,
-        height: DEFAULT_IMAGE_HEIGHT
-    };
-    const styleObj = {
-        ...defaultStyle,
-        ...style,
-        overflow: 'hidden'
-    };
-    const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {
-        defaultStyle
-    });
-    const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
-        setViewWidth(width);
-        setViewHeight(height);
-    };
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout });
-    const { width, height } = normalStyle;
-    const preSrc = useRef();
-    const resizeMode = ModeMap.get(mode) || 'stretch';
-    const isWidthFixMode = mode === 'widthFix';
-    const isHeightFixMode = mode === 'heightFix';
-    const isCropMode = cropMode.includes(mode);
-    const source = typeof src === 'string' ? { uri: src } : src;
-    const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0);
-    const [viewHeight, setViewHeight] = useState(isNumber(height) ? height : 0);
-    const [imageWidth, setImageWidth] = useState(0);
-    const [imageHeight, setImageHeight] = useState(0);
-    const [ratio, setRatio] = useState(0);
-    const [loaded, setLoaded] = useState(false);
-    const fixedHeight = useMemo(() => {
-        const fixed = viewWidth * ratio;
-        return !fixed ? viewHeight : fixed;
-    }, [ratio, viewWidth, viewHeight]);
-    const fixedWidth = useMemo(() => {
-        if (!ratio)
-            return viewWidth;
-        const fixed = viewHeight / ratio;
-        return !fixed ? viewWidth : fixed;
-    }, [ratio, viewWidth, viewHeight]);
-    const cropModeStyle = useMemo(() => {
-        switch (mode) {
-            case 'top':
-                return { top: 0, left: relativeCenteredSize(viewWidth, imageWidth) };
-            case 'bottom':
-                return { top: 'auto', bottom: 0, left: relativeCenteredSize(viewWidth, imageWidth) };
-            case 'center':
-                return { top: relativeCenteredSize(viewHeight, imageHeight), left: relativeCenteredSize(viewWidth, imageWidth) };
-            case 'left':
-                return { top: relativeCenteredSize(viewHeight, imageHeight), left: 0 };
-            case 'right':
-                return { top: relativeCenteredSize(viewHeight, imageHeight), left: 'auto', right: 0 };
-            case 'top left':
-                return { top: 0, left: 0 };
-            case 'top right':
-                return { top: 0, left: 'auto', right: 0 };
-            case 'bottom left':
-                return { top: 'auto', bottom: 0, left: 0 };
-            case 'bottom right':
-                return { top: 'auto', bottom: 0, left: 'auto', right: 0 };
-            default:
-                return {};
-        }
-    }, [mode, viewWidth, viewHeight, imageWidth, imageHeight]);
-    const onImageLoad = (evt) => {
-        if (!bindload)
-            return;
-        if (typeof src === 'string') {
-            evt.persist();
-            RNImage.getSize(src, (width, height) => {
-                bindload(getCustomEvent('load', evt, {
-                    detail: { width, height },
-                    layoutRef
-                }, props));
-            });
-        }
-        else {
-            const { width = 0, height = 0 } = RNImage.resolveAssetSource(src) || {};
-            bindload(getCustomEvent('load', evt, {
-                detail: { width, height },
-                layoutRef
-            }, props));
-        }
-    };
-    const onImageError = (evt) => {
-        binderror &&
-            binderror(getCustomEvent('error', evt, {
-                detail: { errMsg: evt.nativeEvent.error },
-                layoutRef
-            }, props));
-    };
-    useEffect(() => {
-        if (!isWidthFixMode && !isHeightFixMode && !isCropMode) {
-            setLoaded(true);
-            return;
-        }
-        const changed = preSrc.current !== src;
-        preSrc.current = src;
-        changed && setLoaded(false);
-        if (typeof src === 'string') {
-            RNImage.getSize(src, (width, height) => {
-                if (isWidthFixMode || isHeightFixMode) {
-                    setRatio(width === 0 ? 0 : height / width);
-                }
-                if (isCropMode) {
-                    setImageWidth(width);
-                    setImageHeight(height);
-                }
-                changed && setLoaded(true);
-            });
-        }
-        else {
-            const { width = 0, height = 0 } = RNImage.resolveAssetSource(src) || {};
-            if (isWidthFixMode || isHeightFixMode) {
-                setRatio(width === 0 ? 0 : height / width);
-            }
-            if (isCropMode) {
-                setImageWidth(width);
-                setImageHeight(height);
-            }
-            changed && setLoaded(true);
-        }
-    }, [isWidthFixMode, isHeightFixMode, isCropMode, src]);
-    const innerProps = useInnerProps(props, {
-        ref: nodeRef,
-        style: {
-            ...normalStyle,
-            ...layoutStyle,
-            ...(isHeightFixMode && { width: fixedWidth }),
-            ...(isWidthFixMode && { height: fixedHeight })
-        },
-        ...layoutProps
-    }, [], {
-        layoutRef
-    });
-    // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) {
-    //   return (
-    //     <Suspense fallback={Fallback} {...innerProps}>
-    //       <View {...innerProps}>
-    //         <Svg src={src} style={style} width={width as SvgNumberProp} height={height as SvgNumberProp} />
-    //       </View>
-    //     </Suspense>
-    //   )
-    // }
-    // if (svg) {
-    //   return (
-    //     <Suspense fallback={Fallback}>
-    //       <View {...innerProps}>
-    //         <Svg local src={src} style={style} width={width as SvgNumberProp} height={height as SvgNumberProp} />
-    //       </View>
-    //     </Suspense>
-    //   )
-    // }
-    return (<View {...innerProps}>
-      {loaded && <RNImage source={source} resizeMode={resizeMode} onLoad={onImageLoad} onError={onImageError} style={{
-                ...StyleSheet.absoluteFillObject,
-                width: isCropMode ? imageWidth : '100%',
-                height: isCropMode ? imageHeight : '100%',
-                ...(isCropMode && cropModeStyle)
-            }}/>}
-    </View>);
-});
-Image.displayName = 'MpxImage';
-export default Image;

package/lib/runtime/components/react/dist/mpx-image/svg.jsx

@@ -1,7 +0,0 @@
-import { SvgCssUri, WithLocalSvg } from 'react-native-svg/css';
-const Svg = ({ local = false, src, style, width, height }) => {
-    return local
-        ? (<WithLocalSvg style={style} asset={src} width={width} height={height}/>)
-        : (<SvgCssUri style={style} uri={src} width={width} height={height}/>);
-};
-export default Svg;