@mpxjs/webpack-plugin 2.10.16-beta.9 → 2.10.16-xp.1

package/lib/runtime/components/react/mpx-picker-view-column/index.tsx

@@ -5,8 +5,7 @@ import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAn
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
-import MpxPickerViewColumnItem from './pickerViewColumnItem'
-import MpxPickerViewColumnItemLite from './pickerViewColumnItemLite'
+import MpxPickerVIewColumnItem from './pickerViewColumnItem'
 import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext'
 import { calcHeightOffsets } from './pickerViewFaces'
 
@@ -26,7 +25,6 @@ interface ColumnProps {
   }
   pickerMaskStyle: Record<string, any>
   pickerIndicatorStyle: Record<string, any>
-  enableWheelAnimation?: boolean
 }
 
 const visibleCount = 5
@@ -41,7 +39,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     wrapperStyle,
     pickerMaskStyle,
     pickerIndicatorStyle,
-    enableWheelAnimation = true,
     'enable-var': enableVar,
     'external-var-context': externalVarContext
   } = props
@@ -98,11 +95,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     return [{ paddingVertical: paddingHeight }]
   }, [paddingHeight])
 
-  const initialContentOffsetY = useMemo(
-    () => initialIndex * itemRawH,
-    [initialIndex, itemRawH]
-  )
-
   const getIndex = useCallback((y: number) => {
     const calc = Math.round(y / itemRawH)
     return Math.max(0, Math.min(calc, maxIndex))
@@ -160,6 +152,17 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }, isIOS ? 0 : 200)
   }, [itemRawH, maxIndex, initialIndex])
 
+  const onContentSizeChange = useCallback((_w: number, h: number) => {
+    const y = initialIndex * itemRawH
+    if (y <= h) {
+      clearTimerScrollTo()
+      timerScrollTo.current = setTimeout(() => {
+        scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
+        activeIndex.current = initialIndex
+      }, 0)
+    }
+  }, [itemRawH, initialIndex])
+
   const onItemLayout = useCallback((e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
     const roundedH = Math.round(rawH)
@@ -284,8 +287,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const renderInnerchild = () =>
     columnData.map((item: React.ReactElement, index: number) => {
-      return enableWheelAnimation
-        ? (<MpxPickerViewColumnItem
+      return (
+        <MpxPickerVIewColumnItem
           key={index}
           item={item}
           index={index}
@@ -294,16 +297,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           textProps={textProps}
           visibleCount={visibleCount}
           onItemLayout={onItemLayout}
-        />)
-        : (<MpxPickerViewColumnItemLite
-          key={index}
-          item={item}
-          index={index}
-          itemHeight={itemHeight}
-          textStyle={textStyle}
-          textProps={textProps}
-          onItemLayout={onItemLayout}
-        />)
+        />
+      )
     })
 
   const renderScollView = () => {
@@ -325,8 +320,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
       onScrollEndDrag,
       onMomentumScrollBegin,
       onMomentumScrollEnd,
-      contentContainerStyle,
-      contentOffset: { x: 0, y: initialContentOffsetY }
+      onContentSizeChange,
+      contentContainerStyle
     }) as React.ComponentProps<typeof Reanimated.ScrollView>
 
     return createElement(
@@ -356,9 +351,9 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   return (
     <View style={[styles.wrapper, normalStyle]}>
-      {renderScollView()}
-      {renderMask()}
-      {renderIndicator()}
+        {renderScollView()}
+        {renderMask()}
+        {renderIndicator()}
     </View>
   )
 })

package/lib/runtime/components/react/mpx-picker-view-column/pickerViewColumnItem.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react'
+import React, { useEffect } from 'react'
 import { LayoutChangeEvent } from 'react-native'
-import Reanimated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated'
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 import { extendObject } from '../utils'
 import { createFaces } from './pickerViewFaces'
 import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext'
@@ -28,16 +28,20 @@ const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
 }) => {
   const textStyleFromAncestor = usePickerViewStyleContext()
   const offsetYShared = usePickerViewColumnAnimationContext()
-  const facesShared = useMemo(() => createFaces(itemHeight, visibleCount), [itemHeight, visibleCount])
+  const facesShared = useSharedValue(createFaces(itemHeight, visibleCount))
+
+  useEffect(() => {
+    facesShared.value = createFaces(itemHeight, visibleCount)
+  }, [itemHeight])
 
   const animatedStyles = useAnimatedStyle(() => {
-    const inputRange = facesShared.map((f) => itemHeight * (index + f.index))
+    const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index))
     return {
-      opacity: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.opacity), Extrapolation.CLAMP),
+      opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
       transform: [
-        { translateY: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.offsetY), Extrapolation.EXTEND) },
-        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
-        { scale: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.scale), Extrapolation.EXTEND) }
+        { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+        { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
       ]
     }
   })

package/lib/runtime/components/react/mpx-portal/index.tsx

@@ -1,25 +1,19 @@
 import { ReactNode, useContext, useEffect, useRef } from 'react'
-import { PortalContext, ProviderContext, RouteContext, VarContext } from '../context'
+import { PortalContext, RouteContext, VarContext } from '../context'
 import PortalHost, { portal } from './portal-host'
 
 export type PortalProps = {
   children?: ReactNode
 }
 
-const Portal = ({ children }: PortalProps): null => {
+const Portal = ({ children }:PortalProps): null => {
   const manager = useContext(PortalContext)
   const keyRef = useRef<any>(null)
   const { pageId } = useContext(RouteContext) || {}
   const varContext = useContext(VarContext)
-  const parentProvides = useContext(ProviderContext)
-
   if (varContext) {
     children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>)
   }
-  if (parentProvides) {
-    children = (<ProviderContext.Provider value={parentProvides} key='providerContextWrap'>{children}</ProviderContext.Provider>)
-  }
-
   useEffect(() => {
     manager.update(keyRef.current, children)
   }, [children])

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -159,6 +159,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
 
+  const snapScrollTop = useRef(0)
+  const snapScrollLeft = useRef(0)
+
   const [refreshing, setRefreshing] = useState(false)
 
   const [enableScroll, setEnableScroll] = useState(true)
@@ -265,12 +268,16 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion')
   }
   useEffect(() => {
-    initialTimeout.current = setTimeout(() => {
-      scrollToOffset(scrollLeft, scrollTop)
-    }, 0)
-
-    return () => {
-      initialTimeout.current && clearTimeout(initialTimeout.current)
+    if (
+      snapScrollTop.current !== scrollTop || snapScrollLeft.current !== scrollLeft
+    ) {
+      initialTimeout.current = setTimeout(() => {
+        scrollToOffset(scrollLeft, scrollTop)
+      }, 0)
+
+      return () => {
+        initialTimeout.current && clearTimeout(initialTimeout.current)
+      }
     }
   }, [scrollTop, scrollLeft])
 
@@ -474,6 +481,10 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   function scrollToOffset (x = 0, y = 0, animated = scrollWithAnimation) {
     if (scrollViewRef.current) {
       scrollViewRef.current.scrollTo({ x, y, animated })
+      scrollOptions.current.scrollLeft = x
+      scrollOptions.current.scrollTop = y
+      snapScrollLeft.current = x
+      snapScrollTop.current = y
     }
   }
 

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

@@ -148,7 +148,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     autoplay = false,
     circular = false,
     disableGesture = false,
-    current: propCurrent = 0,
+    current: propCurrent,
     bindchange
   } = props
   const easeingFunc = props['easing-function'] || 'default'
@@ -199,10 +199,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 每个元素的宽度 or 高度，有固定值直接初始化无则0
   const step = useSharedValue(initStep)
   // 记录选中元素的索引值
-  const currentIndex = useSharedValue(propCurrent)
+  const currentIndex = useSharedValue(propCurrent || 0)
   // const initOffset = getOffset(props.current || 0, initStep)
   // 记录元素的偏移量
-  const offset = useSharedValue(getOffset(propCurrent, initStep))
+  const offset = useSharedValue(getOffset(propCurrent || 0, initStep))
   const strAbso = 'absolute' + dir.toUpperCase() as StrAbsoType
   const strVelocity = 'velocity' + dir.toUpperCase() as StrVelocityType
   // 标识手指触摸和抬起, 起点在onBegin
@@ -271,7 +271,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     const iStep = dir === 'x' ? realWidth : realHeight
     if (iStep !== step.value) {
       step.value = iStep
-      updateCurrent(propCurrent, iStep)
+      updateCurrent(propCurrent || 0, iStep)
       updateAutoplay()
     }
   }
@@ -520,7 +520,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
     // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
     if (propCurrent !== currentIndex.value) {
-      updateCurrent(propCurrent, step.value)
+      updateCurrent(propCurrent || 0, step.value)
     }
   }, [propCurrent])
 
@@ -790,6 +790,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
         preAbsolutePos.value = e[strAbso]
       })
+      .onEnd((e) => {
+        // 修复部分安卓机型下onFinalize拿到的absolute值 和 onUpdate不一致的情况，通过onEnd进行修正为最终的位置
+        preAbsolutePos.value = e[strAbso]
+      })
       .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
         if (touchfinish.value) return

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

@@ -2,41 +2,15 @@
 /**
  * ✔ selectable
  * ✘ space
- * ✔ decode
+ * ✘ decode
  */
 import { Text, TextStyle, TextProps } from 'react-native'
-import { useRef, forwardRef, ReactNode, JSX, createElement, Children } from 'react'
+import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react'
 import Portal from './mpx-portal'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, wrapChildren, extendObject } from './utils'
 
-const decodeMap = {
-  '&lt;': '<',
-  '&gt;': '>',
-  '&quot;': '"',
-  '&amp;': '&',
-  '&#39;': '\'',
-  '&nbsp;': ' '
-}
-
-const encodedRe = /&(?:lt|gt|quot|amp|#39|nbsp);/g
-function decode (value: string) {
-  if (value != null) {
-    return value.replace(encodedRe, function (match) {
-      return decodeMap[match as keyof typeof decodeMap]
-    })
-  }
-}
-
-function getDecodedChildren (children: ReactNode) {
-  return Children.map(children, (child) => {
-    if (typeof child === 'string') {
-      return decode(child)
-    }
-    return child
-  })
-}
 interface _TextProps extends TextProps {
   style?: TextStyle
   children?: ReactNode
@@ -47,7 +21,6 @@ interface _TextProps extends TextProps {
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
-  decode?: boolean
 }
 
 const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref): JSX.Element => {
@@ -60,8 +33,7 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     'user-select': userSelect,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
-    'parent-height': parentHeight,
-    decode
+    'parent-height': parentHeight
   } = props
 
   const {
@@ -94,17 +66,12 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
       }
     ),
     [
-      'user-select',
-      'decode'
+      'user-select'
     ]
   )
 
-  const children = decode ? getDecodedChildren(props.children) : props.children
-
   let finalComponent:JSX.Element = createElement(Text, innerProps, wrapChildren(
-    extendObject({}, props, {
-      children
-    }),
+    props,
     {
       hasVarDec,
       varContext: varContextRef.current

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

@@ -501,7 +501,7 @@ function parseBgImage (text: string): {
   type?: 'image' | 'linear'
   src?: string
 } {
-  if (!text || text === 'none') return {}
+  if (!text) return {}
 
   const src = parseUrl(text)
   if (src) return { src, type: 'image' }

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -226,7 +226,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         }
         break
       case 'postMessage':
-        bindmessage && bindmessage(getCustomEvent('message', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
+        bindmessage && bindmessage(getCustomEvent('messsage', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
           detail: {
             data: params[0]?.data
           }

package/lib/runtime/components/react/types/common.d.ts

@@ -18,22 +18,3 @@ export type ExtendedFunctionComponent = FunctionComponent & {
 }
 
 export type AnyFunc = (...args: ReadonlyArray<any>) => any
-
-declare global {
-  interface PageConfig {
-    /**
-     * 是否自定义导航栏
-     */
-    navigationStyle?: 'custom'
-    /**
-     * 标题栏样式
-     */
-    navigationBarTextStyle?: 'white' | 'black' | '#ffffff' | '#000000'
-    /**
-     * 页面标题
-     */
-    navigationBarTitleText?: string
-
-    [key: string]: any
-  }
-}

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

@@ -215,33 +215,24 @@ function resolveVar (input: string, varContext: Record<string, any>) {
   const parsed = parseFunc(input, 'var')
   const replaced = new ReplaceSource(input)
 
-  for (const { start, end, args } of parsed) {
+  parsed.forEach(({ start, end, args }) => {
     const varName = args[0]
-    const fallback = args[1]
+    const fallback = args[1] || ''
     let varValue = hasOwn(varContext, varName) ? varContext[varName] : fallback
-    if (varValue === undefined) return
     if (varUseRegExp.test(varValue)) {
-      varValue = resolveVar(varValue, varContext)
-      if (varValue === undefined) return
+      varValue = '' + resolveVar(varValue, varContext)
     } else {
-      varValue = global.__formatValue(varValue)
+      varValue = '' + global.__formatValue(varValue)
     }
     replaced.replace(start, end - 1, varValue)
-  }
-
+  })
   return global.__formatValue(replaced.source())
 }
 
 function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<string>>, varContext: Record<string, any>, visitOther: (arg: VisitorArg) => void) {
   varKeyPaths.forEach((varKeyPath) => {
     setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
-      const resolved = resolveVar(value, varContext)
-      if (resolved === undefined) {
-        delete target[key]
-        error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
-        return
-      }
-      target[key] = resolved
+      target[key] = resolveVar(value, varContext)
       visitOther({ target, key, value: target[key], keyPath: varKeyPath })
     })
   })

package/lib/runtime/stringify.wxs

@@ -45,7 +45,7 @@ function objectKeys (obj) {
 }
 
 function genRegExp (str, flags) {
-  if (!__mpx_wxs__ || __mpx_mode__ === 'ks') {
+  if (!__mpx_wxs__) {
     return new RegExp(str, flags)
   } else {
     return getRegExp(str, flags)
@@ -234,4 +234,4 @@ module.exports = {
     var parsedStaticStyle = typeof staticStyle === 'string' ? parseStyleText(staticStyle) : {}
     return genStyleText(extend(parsedStaticStyle, normalizedDynamicStyle))
   }
-}
+}

package/lib/script-setup-compiler/index.js

@@ -98,7 +98,7 @@ function compileScriptSetup (
   ) {
     if (node) {
       throw new Error(
-        `[Mpx script error]: ${msg}\n\n${filePath}\n${formatCodeFrame(
+        `[@mpxjs/webpack-plugin script-setup-compiler] ${msg}\n\n${filePath}\n${formatCodeFrame(
           content,
           node.start + startOffset,
           end
@@ -106,7 +106,7 @@ function compileScriptSetup (
       )
     } else {
       throw new Error(
-        `[Mpx script error]: ${msg}\n\n${filePath}\n`
+        `[@mpxjs/webpack-plugin script-setup-compiler] ${msg}\n\n${filePath}\n`
       )
     }
   }

package/lib/style-compiler/index.js

@@ -18,8 +18,7 @@ module.exports = function (css, map) {
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const mpx = this.getMpx()
   const mpxStyleOptions = (queryObj.mpxStyleOptions && JSON.parse(queryObj.mpxStyleOptions)) || {}
-  const id = queryObj.moduleId || mpxStyleOptions.mid || mpx.getModuleId(resourcePath, false, (queryObj.moduleId || mpxStyleOptions.mid) ? null : this)
-
+  const id = queryObj.moduleId || mpxStyleOptions.mid || mpx.getModuleId(resourcePath)
   const appInfo = mpx.appInfo
   const defs = mpx.defs
   const mode = mpx.mode
@@ -56,7 +55,7 @@ module.exports = function (css, map) {
     }
 
     if (isReact(mode)) {
-      plugins.push(transSpecial({ id, transPage: true }))
+      plugins.push(transSpecial({ id }))
     }
 
     // plugins.push(pluginCondStrip({

package/lib/style-compiler/load-postcss-config.js

@@ -29,7 +29,7 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
       if (err.message.indexOf('No PostCSS Config found') >= 0) {
         return
       }
-      loaderContext.emitWarning(`[Mpx style warning]: Error loading PostCSS config: ${err.message}`)
+      loaderContext.emitWarning(`Error loading PostCSS config: ${err.message}`)
     })
   }
 

package/lib/style-compiler/plugins/trans-special.js

@@ -1,8 +1,7 @@
 const selectorParser = require('postcss-selector-parser')
-const { MPX_TAG_PAGE_SELECTOR } = require('../../utils/const')
 // trans-special
 
-module.exports = ({ id, transPage = false }) => {
+module.exports = ({ id }) => {
   return {
     postcssPlugin: 'trans-special',
     Once: (root) => {
@@ -14,14 +13,7 @@ module.exports = ({ id, transPage = false }) => {
               if (/^:host$/.test(n.value)) {
                 const compoundSelectors = n.nodes
                 n.replaceWith(selectorParser.className({
-                  value: `host-${id}`
-                }))
-                selector.insertAfter(n, compoundSelectors)
-              }
-              if (transPage && /^page$/.test(n.value)) {
-                const compoundSelectors = n.nodes || []
-                n.replaceWith(selectorParser.className({
-                  value: MPX_TAG_PAGE_SELECTOR
+                  value: 'host-' + id
                 }))
                 selector.insertAfter(n, compoundSelectors)
               }