@mpxjs/webpack-plugin 2.10.6-beta.3 → 2.10.6-beta.5

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -48,90 +48,6 @@ const InitialValue = Object.assign({
 const TransformOrigin = 'transformOrigin';
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
-// 多value解析
-const parseValues = (str, char = ' ') => {
-    let stack = 0;
-    let temp = '';
-    const result = [];
-    for (let i = 0; i < str.length; i++) {
-        if (str[i] === '(') {
-            stack++;
-        }
-        else if (str[i] === ')') {
-            stack--;
-        }
-        // 非括号内 或者 非分隔字符且非空
-        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
-            temp += str[i];
-        }
-        if ((stack === 0 && str[i] === char) || i === str.length - 1) {
-            result.push(temp);
-            temp = '';
-        }
-    }
-    return result;
-};
-// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
-const parseTransform = (transformStr) => {
-    const values = parseValues(transformStr);
-    const transform = [];
-    values.forEach(item => {
-        const match = item.match(/([/\w]+)\((.+)\)/);
-        if (match && match.length >= 3) {
-            let key = match[1];
-            const val = match[2];
-            switch (key) {
-                case 'translateX':
-                case 'translateY':
-                case 'scaleX':
-                case 'scaleY':
-                case 'rotateX':
-                case 'rotateY':
-                case 'rotateZ':
-                case 'rotate':
-                case 'skewX':
-                case 'skewY':
-                case 'perspective':
-                    // rotate 处理成 rotateZ
-                    key = key === 'rotate' ? 'rotateZ' : key;
-                    // 单个值处理
-                    transform.push({ [key]: global.__formatValue(val) });
-                    break;
-                case 'matrix':
-                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
-                    break;
-                case 'translate':
-                case 'scale':
-                case 'skew':
-                case 'translate3d': // x y 支持 z不支持
-                case 'scale3d': // x y 支持 z不支持
-                    {
-                        // 2 个以上的值处理
-                        key = key.replace('3d', '');
-                        const vals = parseValues(val, ',').splice(0, 3);
-                        // scale(.5) === scaleX(.5) scaleY(.5)
-                        if (vals.length === 1 && key === 'scale') {
-                            vals.push(vals[0]);
-                        }
-                        const xyz = ['X', 'Y', 'Z'];
-                        transform.push(...vals.map((v, index) => {
-                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
-                        }));
-                        break;
-                    }
-            }
-        }
-    });
-    return transform;
-};
-// format style
-const formatStyle = (style) => {
-    if (!style.transform || Array.isArray(style.transform))
-        return style;
-    return Object.assign({}, style, {
-        transform: parseTransform(style.transform)
-    });
-};
 // transform 数组转对象
 function getTransformObj(transforms) {
     'worklet';
@@ -140,7 +56,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props;
+    const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -148,7 +64,6 @@ export default function useAnimationHooks(props) {
     }
     if (!enableAnimationRef.current)
         return { enableStyleAnimation: false };
-    const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
@@ -177,7 +92,7 @@ export default function useAnimationHooks(props) {
     useEffect(() => {
         // style 更新后同步更新 lastStyleRef & shareValMap
         updateStyleVal();
-    }, [style]);
+    }, [originalStyle]);
     // ** 获取动画样式prop & 驱动动画
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {

package/lib/runtime/components/react/dist/utils.jsx

@@ -237,6 +237,88 @@ function transformPosition(styleObj, meta) {
         meta.hasPositionFixed = true;
     }
 }
+// 多value解析
+function parseValues(str, char = ' ') {
+    let stack = 0;
+    let temp = '';
+    const result = [];
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] === '(') {
+            stack++;
+        }
+        else if (str[i] === ')') {
+            stack--;
+        }
+        // 非括号内 或者 非分隔字符且非空
+        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+            temp += str[i];
+        }
+        if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+            result.push(temp);
+            temp = '';
+        }
+    }
+    return result;
+}
+// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
+function parseTransform(transformStr) {
+    const values = parseValues(transformStr);
+    const transform = [];
+    values.forEach(item => {
+        const match = item.match(/([/\w]+)\((.+)\)/);
+        if (match && match.length >= 3) {
+            let key = match[1];
+            const val = match[2];
+            switch (key) {
+                case 'translateX':
+                case 'translateY':
+                case 'scaleX':
+                case 'scaleY':
+                case 'rotateX':
+                case 'rotateY':
+                case 'rotateZ':
+                case 'rotate':
+                case 'skewX':
+                case 'skewY':
+                case 'perspective':
+                    // rotate 处理成 rotateZ
+                    key = key === 'rotate' ? 'rotateZ' : key;
+                    // 单个值处理
+                    transform.push({ [key]: global.__formatValue(val) });
+                    break;
+                case 'matrix':
+                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
+                    break;
+                case 'translate':
+                case 'scale':
+                case 'skew':
+                case 'translate3d': // x y 支持 z不支持
+                case 'scale3d': // x y 支持 z不支持
+                    {
+                        // 2 个以上的值处理
+                        key = key.replace('3d', '');
+                        const vals = parseValues(val, ',').splice(0, 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5)
+                        if (vals.length === 1 && key === 'scale') {
+                            vals.push(vals[0]);
+                        }
+                        const xyz = ['X', 'Y', 'Z'];
+                        transform.push(...vals.map((v, index) => {
+                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
+                        }));
+                        break;
+                    }
+            }
+        }
+    });
+    return transform;
+}
+// format style transform
+function transformTransform(style) {
+    if (!style.transform || Array.isArray(style.transform))
+        return;
+    style.transform = parseTransform(style.transform);
+}
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
@@ -365,6 +447,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     transformPosition(normalStyle, positionMeta);
     // transform number enum stringify
     transformStringify(normalStyle);
+    // transform 字符串格式转化数组格式
+    transformTransform(normalStyle);
     return {
         hasVarDec,
         varContextRef,

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -766,13 +766,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         const eventData = {
           translation: moveDistance
         }
-        if (childrenLength.value === 1) {
-          return handleBackInit()
-        }
-        // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
-        if (!circularShared.value && !canMove(eventData)) {
-          return
-        }
         const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000
         if (Math.abs(strVelocity) < longPressRatio) {
           handleLongPress()

package/lib/runtime/components/react/useAnimationHooks.ts

@@ -84,88 +84,6 @@ const InitialValue: ExtendedViewStyle = Object.assign({
 const TransformOrigin = 'transformOrigin'
 // transform
 const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
-// 多value解析
-const parseValues = (str: string, char = ' ') => {
-  let stack = 0
-  let temp = ''
-  const result = []
-  for (let i = 0; i < str.length; i++) {
-    if (str[i] === '(') {
-      stack++
-    } else if (str[i] === ')') {
-      stack--
-    }
-    // 非括号内 或者 非分隔字符且非空
-    if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
-      temp += str[i]
-    }
-    if ((stack === 0 && str[i] === char) || i === str.length - 1) {
-      result.push(temp)
-      temp = ''
-    }
-  }
-  return result
-}
-// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
-const parseTransform = (transformStr: string) => {
-  const values = parseValues(transformStr)
-  const transform: {[propName: string]: string|number|number[]}[] = []
-  values.forEach(item => {
-    const match = item.match(/([/\w]+)\((.+)\)/)
-    if (match && match.length >= 3) {
-      let key = match[1]
-      const val = match[2]
-      switch (key) {
-        case 'translateX':
-        case 'translateY':
-        case 'scaleX':
-        case 'scaleY':
-        case 'rotateX':
-        case 'rotateY':
-        case 'rotateZ':
-        case 'rotate':
-        case 'skewX':
-        case 'skewY':
-        case 'perspective':
-          // rotate 处理成 rotateZ
-          key = key === 'rotate' ? 'rotateZ' : key
-          // 单个值处理
-          transform.push({ [key]: global.__formatValue(val) })
-          break
-        case 'matrix':
-          transform.push({ [key]: parseValues(val, ',').map(val => +val) })
-          break
-        case 'translate':
-        case 'scale':
-        case 'skew':
-        case 'translate3d': // x y 支持 z不支持
-        case 'scale3d': // x y 支持 z不支持
-        {
-          // 2 个以上的值处理
-          key = key.replace('3d', '')
-          const vals = parseValues(val, ',').splice(0, 3)
-          // scale(.5) === scaleX(.5) scaleY(.5)
-          if (vals.length === 1 && key === 'scale') {
-            vals.push(vals[0])
-          }
-          const xyz = ['X', 'Y', 'Z']
-          transform.push(...vals.map((v, index) => {
-            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) }
-          }))
-          break
-        }
-      }
-    }
-  })
-  return transform
-}
-// format style
-const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
-  if (!style.transform || Array.isArray(style.transform)) return style
-  return Object.assign({}, style, {
-    transform: parseTransform(style.transform)
-  })
-}
 
 // transform 数组转对象
 function getTransformObj (transforms: { [propName: string]: string | number }[]) {
@@ -176,7 +94,7 @@ function getTransformObj (transforms: { [propName: string]: string | number }[])
 }
 
 export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
-  const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props
+  const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props
   const enableStyleAnimation = enableAnimation || !!animation
   const enableAnimationRef = useRef(enableStyleAnimation)
   if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -185,7 +103,6 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
 
   if (!enableAnimationRef.current) return { enableStyleAnimation: false }
 
-  const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
@@ -214,7 +131,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   useEffect(() => {
     // style 更新后同步更新 lastStyleRef & shareValMap
     updateStyleVal()
-  }, [style])
+  }, [originalStyle])
   // ** 获取动画样式prop & 驱动动画
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {

package/lib/runtime/components/react/utils.tsx

@@ -285,7 +285,86 @@ function transformPosition (styleObj: Record<string, any>, meta: PositionMeta) {
     meta.hasPositionFixed = true
   }
 }
-
+// 多value解析
+function parseValues (str: string, char = ' ') {
+  let stack = 0
+  let temp = ''
+  const result = []
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '(') {
+      stack++
+    } else if (str[i] === ')') {
+      stack--
+    }
+    // 非括号内 或者 非分隔字符且非空
+    if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+      temp += str[i]
+    }
+    if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+      result.push(temp)
+      temp = ''
+    }
+  }
+  return result
+}
+// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
+function parseTransform (transformStr: string) {
+  const values = parseValues(transformStr)
+  const transform: {[propName: string]: string|number|number[]}[] = []
+  values.forEach(item => {
+    const match = item.match(/([/\w]+)\((.+)\)/)
+    if (match && match.length >= 3) {
+      let key = match[1]
+      const val = match[2]
+      switch (key) {
+        case 'translateX':
+        case 'translateY':
+        case 'scaleX':
+        case 'scaleY':
+        case 'rotateX':
+        case 'rotateY':
+        case 'rotateZ':
+        case 'rotate':
+        case 'skewX':
+        case 'skewY':
+        case 'perspective':
+          // rotate 处理成 rotateZ
+          key = key === 'rotate' ? 'rotateZ' : key
+          // 单个值处理
+          transform.push({ [key]: global.__formatValue(val) })
+          break
+        case 'matrix':
+          transform.push({ [key]: parseValues(val, ',').map(val => +val) })
+          break
+        case 'translate':
+        case 'scale':
+        case 'skew':
+        case 'translate3d': // x y 支持 z不支持
+        case 'scale3d': // x y 支持 z不支持
+        {
+          // 2 个以上的值处理
+          key = key.replace('3d', '')
+          const vals = parseValues(val, ',').splice(0, 3)
+          // scale(.5) === scaleX(.5) scaleY(.5)
+          if (vals.length === 1 && key === 'scale') {
+            vals.push(vals[0])
+          }
+          const xyz = ['X', 'Y', 'Z']
+          transform.push(...vals.map((v, index) => {
+            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) }
+          }))
+          break
+        }
+      }
+    }
+  })
+  return transform
+}
+// format style transform
+function transformTransform (style: Record<string, any>) {
+  if (!style.transform || Array.isArray(style.transform)) return
+  style.transform = parseTransform(style.transform)
+}
 interface TransformStyleConfig {
   enableVar?: boolean
   externalVarContext?: Record<string, any>
@@ -428,6 +507,9 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   // transform number enum stringify
   transformStringify(normalStyle)
 
+  // transform 字符串格式转化数组格式
+  transformTransform(normalStyle)
+
   return {
     hasVarDec,
     varContextRef,

package/lib/runtime/optionProcessorReact.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode, ComponentType } from 'react'
 declare global {
   namespace NodeJS {
     interface Global {
@@ -7,3 +8,20 @@ declare global {
 }
 
 export function getComponent (...args: any): object
+
+interface AsyncModule {
+  __esModule: boolean
+  default: ReactNode
+}
+
+interface AsyncSuspenseProps {
+  type: 'component' | 'page'
+  chunkName: string
+  moduleId: string
+  innerProps: any
+  loading: ComponentType<unknown>
+  fallback: ComponentType<unknown>
+  getChildren: () => Promise<AsyncModule>
+}
+
+export function getAsyncSuspense(props: AsyncSuspenseProps): ReactNode

package/lib/runtime/optionProcessorReact.js

@@ -1,6 +1,30 @@
+import AsyncSuspense from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/AsyncSuspense'
+import { memo, forwardRef, createElement } from 'react'
+import { extend } from './utils'
+
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
   if (extendOptions) Object.assign(component, extendOptions)
   return component
 }
+
+export function getAsyncSuspense (commonProps) {
+  if (commonProps.type === 'component') {
+    return memo(forwardRef(function (props, ref) {
+      return createElement(AsyncSuspense,
+        extend(commonProps, {
+          innerProps: Object.assign({}, props, { ref })
+        })
+      )
+    }))
+  } else {
+    return function (props) {
+      return createElement(AsyncSuspense,
+        extend(commonProps, {
+          innerProps: props
+        })
+      )
+    }
+  }
+}

package/lib/template-compiler/compiler.js

@@ -180,7 +180,7 @@ const i18nModuleName = '_i'
 const stringifyWxsPath = '~' + normalize.lib('runtime/stringify.wxs')
 const stringifyModuleName = '_s'
 const optionalChainWxsPath = '~' + normalize.lib('runtime/oc.wxs')
-const optionalChainWxsName = '_o'
+const optionalChainWxsName = '_oc' // 改成_oc解决web下_o重名问题
 
 const tagRES = /(\{\{(?:.|\n|\r)+?\}\})(?!})/
 const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
@@ -2725,8 +2725,8 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
-    processStyleReact(el, options)
     if (!pass) {
+      processStyleReact(el, options)
       processEventReact(el, options)
       processComponentGenerics(el, meta)
       processComponentIs(el, options)

package/lib/utils/dom-tag-config.js

@@ -72,7 +72,7 @@ const isNativeMiniTag = makeMap(
  * 是否为mpx内置组件
  * collected from packages/webpack-plugin/lib/runtime/components/web/
  */
-const isBuildInTag = makeMap(
+const isBuildInWebTag = makeMap(
   'mpx-image,mpx-picker-view,mpx-slider,mpx-textarea,mpx-input,mpx-picker,' +
   'mpx-swiper-item,mpx-video,mpx-button,mpx-keep-alive,mpx-progress,' +
   'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
@@ -118,7 +118,7 @@ module.exports = {
   isVoidTag,
   isNonPhrasingTag,
   isRichTextTag,
-  isBuildInTag,
+  isBuildInWebTag,
   isUnaryTag,
   isSpace,
   isContWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.6-beta.3",
+  "version": "2.10.6-beta.5",
   "description": "mpx compile core",
   "keywords": [
     "mpx"