@mpxjs/webpack-plugin 2.10.6 → 2.10.7-beta.10

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

@@ -23,6 +23,7 @@ import Portal from './mpx-portal'
  * ✔ easing-function  ="easeOutCubic"
  * ✘ display-multiple-items
  * ✘ snap-to-edge
+ * ✔ disableGesture
  */
 type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
 type StrAbsoType = 'absoluteX' | 'absoluteY'
@@ -206,6 +207,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTranstion = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 的时间
   const moveTime = useSharedValue(0)
+  // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
+  const anotherDirectionMove = useSharedValue(0)
+  // 另一个方向的
+  const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase() as StrAbsoType
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
 
@@ -504,7 +509,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [children.length])
 
   useEffect(() => {
-    updateCurrent(props.current || 0, step.value)
+    // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+    // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
+    if (props.current !== currentIndex.value) {
+      updateCurrent(props.current || 0, step.value)
+    }
   }, [props.current])
 
   useEffect(() => {
@@ -566,18 +575,25 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         targetOffset: -moveToTargetPos
       }
     }
-    function canMove (eventData: EventDataType) {
+    function checkUnCircular (eventData: EventDataType) {
       'worklet'
       const { translation } = eventData
       const currentOffset = Math.abs(offset.value)
-      if (!circularShared.value) {
-        if (translation < 0) {
-          return currentOffset < step.value * (childrenLength.value - 1)
-        } else {
-          return currentOffset > 0
+      // 向右滑动swiper
+      if (translation < 0) {
+        const boundaryOffset = step.value * (childrenLength.value - 1)
+        const gestureMovePos = Math.abs(translation) + currentOffset
+        return {
+          // 防止快速连续向右滑动时，手势移动的距离 加 当前的offset超出边界
+          targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
+          canMove: currentOffset < boundaryOffset
         }
       } else {
-        return true
+        const gestureMovePos = currentOffset - translation
+        return {
+          targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
+          canMove: currentOffset > 0
+        }
       }
     }
     function handleEnd (eventData: EventDataType) {
@@ -636,7 +652,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
       })
     }
-    function handleLongPress () {
+    function computeHalf () {
       'worklet'
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
@@ -646,6 +662,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
       const diffOffset = preOffset - currentOffset
       const half = Math.abs(diffOffset) > step.value / 2
+      return {
+        diffOffset,
+        half
+      }
+    }
+    function handleLongPress () {
+      'worklet'
+      const { diffOffset, half } = computeHalf()
       if (+diffOffset === 0) {
         runOnJS(resumeLoop)()
       } else if (half) {
@@ -701,18 +725,29 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         runOnJS(pauseLoop)()
         preAbsolutePos.value = e[strAbso]
         moveTranstion.value = e[strAbso]
+        anotherDirectionMove.value = e[anotherAbso]
         moveTime.value = new Date().getTime()
       })
-      .onTouchesMove((e) => {
+      .onUpdate((e) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - preAbsolutePos.value
+        const moveDistance = e[strAbso] - preAbsolutePos.value
         const eventData = {
           translation: moveDistance
         }
-        // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-        if (!circularShared.value && !canMove(eventData)) {
+        // 1. 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
+        const { half } = computeHalf()
+        if (half) {
+          const { selectedIndex } = getTargetPosition(eventData)
+          currentIndex.value = selectedIndex
+        }
+        // 2. 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+        const { canMove, targetOffset } = checkUnCircular(eventData)
+        if (!circularShared.value) {
+          if (canMove) {
+            offset.value = targetOffset
+            preAbsolutePos.value = e[strAbso]
+          }
           return
         }
         const { isBoundary, resetOffset } = reachBoundary(eventData)
@@ -721,28 +756,21 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         } else {
           offset.value = moveDistance + offset.value
         }
-        preAbsolutePos.value = touchEventData[strAbso]
+        preAbsolutePos.value = e[strAbso]
       })
-      .onTouchesUp((e) => {
+      .onFinalize((e) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - moveTranstion.value
+        const moveDistance = e[strAbso] - moveTranstion.value
         touchfinish.value = true
         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()
         } else {
+          // 如果触发了onTouchesCancelled，不会触发onUpdate不会更新offset值, 索引不会变更
           handleEnd(eventData)
         }
       })

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

@@ -143,7 +143,7 @@ const isPercent = (val: string | number | undefined): val is string => typeof va
 const isBackgroundSizeKeyword = (val: string | number): boolean => typeof val === 'string' && /^cover|contain$/.test(val)
 
 const isNeedLayout = (preImageInfo: PreImageInfo): boolean => {
-  const { sizeList, backgroundPosition, linearInfo } = preImageInfo
+  const { sizeList, backgroundPosition, linearInfo, type } = preImageInfo
   const [width, height] = sizeList
   const bp = backgroundPosition
 
@@ -153,7 +153,8 @@ const isNeedLayout = (preImageInfo: PreImageInfo): boolean => {
     (isPercent(width) && height === 'auto') ||
     isPercent(bp[1]) ||
     isPercent(bp[3]) ||
-    isDiagonalAngle(linearInfo)
+    isDiagonalAngle(linearInfo) ||
+    (type === 'linear' && (isPercent(height) || isPercent(width)))
 }
 
 const checkNeedLayout = (preImageInfo: PreImageInfo) => {
@@ -246,7 +247,7 @@ function backgroundPosition (imageProps: ImageProps, preImageInfo: PreImageInfo,
 
 // background-size 转换
 function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) {
-  const sizeList = preImageInfo.sizeList
+  const { sizeList, type } = preImageInfo
   if (!sizeList) return
   const { width: layoutWidth, height: layoutHeight } = layoutInfo || {}
   const { width: imageSizeWidth, height: imageSizeHeight } = imageSize || {}
@@ -286,10 +287,22 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       imageProps.resizeMode = 'stretch'
-      dimensions = {
-        width: isPercent(width) ? width : +width,
-        height: isPercent(height) ? height : +height
-      } as { width: NumberVal, height: NumberVal }
+      if (type === 'linear') {
+        const dimensionWidth = calcPercent(width as NumberVal, layoutWidth) || 0
+        const dimensionHeight = calcPercent(height as NumberVal, layoutHeight) || 0
+        // ios 上 linear 组件只要重新触发渲染，在渲染过程中 width 或者 height 被设置为 0，即使后面再更新为正常宽高，也会渲染不出来
+        if (dimensionWidth && dimensionHeight) {
+          dimensions = {
+            width: dimensionWidth,
+            height: dimensionHeight
+          } as { width: NumberVal, height: NumberVal }
+        }
+      } else {
+        dimensions = {
+          width: isPercent(width) ? width : +width,
+          height: isPercent(height) ? height : +height
+        } as { width: NumberVal, height: NumberVal }
+      }
     }
   }
 

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

@@ -122,17 +122,17 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
   const navigation = useNavigation()
 
-  useEffect(() => {
-    let beforeRemoveSubscription:any
-    if (__mpx_mode__ !== 'ios') {
-      beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
-    }
-    return () => {
-      if (isFunction(beforeRemoveSubscription)) {
-        beforeRemoveSubscription()
-      }
-    }
-  }, [])
+  // useEffect(() => {
+  //   let beforeRemoveSubscription:any
+  //   if (__mpx_mode__ !== 'ios') {
+  //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+  //   }
+  //   return () => {
+  //     if (isFunction(beforeRemoveSubscription)) {
+  //       beforeRemoveSubscription()
+  //     }
+  //   }
+  // }, [])
 
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
@@ -212,7 +212,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         { // case下不允许直接声明，包个块解决该问题
           const title = postData._documentTitle?.trim()
           if (title !== undefined) {
-            navigation && navigation.setOptions({ title })
+            navigation && navigation.setPageConfig({ navigationBarTitleText: title })
           }
         }
         break

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

@@ -285,6 +285,93 @@ 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)
+}
+
+function transformBoxShadow (styleObj: Record<string, any>) {
+  if (!styleObj.boxShadow) return
+  styleObj.boxShadow = parseValues(styleObj.boxShadow).reduce((res, i, idx) => {
+    return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`
+  }, '')
+}
 
 interface TransformStyleConfig {
   enableVar?: boolean
@@ -427,6 +514,11 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   transformPosition(normalStyle, positionMeta)
   // transform number enum stringify
   transformStringify(normalStyle)
+  // transform rpx to px
+  transformBoxShadow(normalStyle)
+
+  // transform 字符串格式转化数组格式
+  transformTransform(normalStyle)
 
   return {
     hasVarDec,
@@ -525,7 +617,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       }
       if (enableOffset) {
         nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-          const { y: navigationY = 0 } = navigation?.layout || {}
+          const { top: navigationY = 0 } = navigation?.layout || {}
           layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY }
         })
       }

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -1,4 +1,5 @@
 <script>
+  import { computed } from 'vue'
   import getInnerListeners, { getCustomEvent } from './getInnerListeners'
   import { processSize } from '../../utils'
   import BScroll from '@better-scroll/core'
@@ -44,6 +45,7 @@
       enhanced: Boolean,
       refresherEnabled: Boolean,
       refresherTriggered: Boolean,
+      enableSticky: Boolean,
       refresherThreshold: {
         type: Number,
         default: 45
@@ -57,6 +59,12 @@
         default: ''
       }
     },
+    provide () {
+      return {
+        scrollOffset: computed(() => -this.lastY || 0),
+        refreshVersion: computed(() => this.refreshVersion || 0)
+      }
+    },
     data () {
       return {
         isLoading: false,
@@ -68,7 +76,8 @@
         lastContentWidth: 0,
         lastContentHeight: 0,
         lastWrapperWidth: 0,
-        lastWrapperHeight: 0
+        lastWrapperHeight: 0,
+        refreshVersion: 0
       }
     },
     computed: {
@@ -222,6 +231,9 @@
             stop: 56
           }
         }
+        if(this.enableSticky) {
+          originBsOptions.useTransition = false
+        }
         const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions, { observeDOM: false })
         this.bs = new BScroll(this.$refs.wrapper, bsOptions)
         this.lastX = -this.currentX
@@ -251,7 +263,7 @@
           }
           this.lastX = x
           this.lastY = y
-        }, 30, {
+        }, this.enableSticky ? 0 : 30, {
           leading: true,
           trailing: true
         }))
@@ -392,6 +404,7 @@
           this.lastContentHeight = scrollContentHeight
           this.lastWrapperWidth = scrollWrapperWidth
           this.lastWrapperHeight = scrollWrapperHeight
+          this.refreshVersion++
           if (this.bs) this.bs.refresh()
         }
       },
@@ -458,7 +471,8 @@
       }
 
       const innerWrapper = createElement('div', {
-        ref: 'innerWrapper'
+        ref: 'innerWrapper',
+        class: 'mpx-inner-wrapper'
       }, this.$slots.default)
 
       const pullDownContent = this.refresherDefaultStyle !== 'none' ? createElement('div', {
@@ -568,4 +582,4 @@
               background: rgba(255, 255, 255, .7)
             100%
               background: rgba(255, 255, 255, .3)
-</style>
+</style>

package/lib/runtime/components/web/mpx-sticky-header.vue

@@ -0,0 +1,99 @@
+<script>
+import { warn } from '@mpxjs/utils'
+import { getCustomEvent } from './getInnerListeners'
+
+  export default {
+    name: 'mpx-sticky-header',
+    inject: ['scrollOffset', 'refreshVersion'],
+    props: {
+      offsetTop: {
+        type: Number,
+        default: 0
+      },
+      padding: Array
+    },
+    data() {
+      return {
+        headerTop: 0,
+        isStickOnTop: false
+      }
+    },
+    watch: {
+      scrollOffset: {
+        handler(newScrollOffset) {
+          const newIsStickOnTop = newScrollOffset > this.headerTop
+          if (newIsStickOnTop !== this.isStickOnTop) {
+            this.isStickOnTop = newIsStickOnTop
+            this.$emit('stickontopchange', getCustomEvent('stickontopchange', {
+              isStickOnTop: newIsStickOnTop
+            }, this))
+          }
+
+          this.setTransformStyle()
+        },
+        immediate: true
+      },
+      refreshVersion: {
+        handler() {
+          this.setHeaderTop()
+          this.setTransformStyle()
+        },
+      }
+    },
+    mounted() {
+      this.setPaddingStyle()
+      this.setHeaderTop()
+    },
+    methods: {
+      setHeaderTop () {
+        const parentElement = this.$el.parentElement
+          if (!parentElement) return
+          
+          const parentClass = parentElement.className || ''
+          const isStickySection = /mpx-sticky-section/.test(parentClass)
+          const isScrollViewWrapper = /mpx-inner-wrapper/.test(parentClass)
+          
+          if (!isStickySection && !isScrollViewWrapper) {
+            warn('sticky-header only supports being a direct child of a scroll-view or sticky-section component.')
+            return
+          }
+          this.headerTop = isStickySection 
+            ? this.$el.offsetTop + parentElement.offsetTop
+            : this.$el.offsetTop
+      },
+      setPaddingStyle() {
+        const stickyHeader = this.$refs.stickyHeader
+        if (!stickyHeader) return
+        
+        if (this.padding && Array.isArray(this.padding)) {
+          const [top = 0, right = 0, bottom = 0, left = 0] = this.padding
+          stickyHeader.style.padding = `${top}px ${right}px ${bottom}px ${left}px`
+        }
+      },
+      setTransformStyle () {
+        const stickyHeader = this.$refs.stickyHeader
+        if (!stickyHeader) return
+        
+        // 设置 transform
+        if (this.scrollOffset > this.headerTop) {
+          stickyHeader.style.transform = `translateY(${this.scrollOffset - this.headerTop + this.offsetTop}px)`
+        } else {
+          stickyHeader.style.transform = 'none'
+        }
+      }
+    },
+    render(h) {
+      const style = {
+        width: '100%',
+        boxSizing: 'border-box',
+        position: 'relative',
+        zIndex: 10
+      }
+
+      return h('div', {
+        style,
+        ref: 'stickyHeader'
+      }, this.$slots.default)
+    }
+  }
+</script>

package/lib/runtime/components/web/mpx-sticky-section.vue

@@ -0,0 +1,15 @@
+<script>
+  export default {
+    name: 'mpx-sticky-section',
+    render(h) {
+      const style = {
+        position: 'relative'
+      }
+
+      return h('div', {
+        style,
+        class: 'mpx-sticky-section'
+      }, this.$slots.default)
+    }
+  }
+</script>

package/lib/runtime/optionProcessor.js

@@ -181,7 +181,6 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     global.__mpxRouter.lastStack = null
     global.__mpxRouter.needCache = null
     global.__mpxRouter.needRemove = []
-    global.__mpxRouter.eventChannelMap = {}
     global.__mpxRouter.currentActionType = null
     // 处理reLaunch中传递的url并非首页时的replace逻辑
     global.__mpxRouter.beforeEach(function (to, from, next) {
@@ -241,7 +240,6 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
         case 'to':
           stack.push(insertItem)
           global.__mpxRouter.needCache = insertItem
-          if (action.eventChannel) global.__mpxRouter.eventChannelMap[to.path.slice(1)] = action.eventChannel
           break
         case 'back':
           global.__mpxRouter.needRemove = stack.splice(stack.length - action.delta, action.delta)

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

@@ -1,5 +1,6 @@
 const babylon = require('@babel/parser')
 const MagicString = require('magic-string')
+const { SourceMapConsumer, SourceMapGenerator } = require('source-map')
 const traverse = require('@babel/traverse').default
 const t = require('@babel/types')
 const formatCodeFrame = require('@babel/code-frame')
@@ -625,7 +626,12 @@ function compileScriptSetup (
   _s.appendRight(endOffset, '})')
 
   return {
-    content: _s.toString()
+    content: _s.toString(),
+    map: _s.generateMap({
+      source: filePath,
+      hires: true,
+      includeContent: true
+    })
   }
 }
 
@@ -1165,14 +1171,30 @@ function getCtor (ctorType) {
   return ctor
 }
 
-module.exports = function (content) {
+module.exports = async function (content, sourceMap) {
   const { queryObj } = parseRequest(this.resource)
   const { ctorType, lang } = queryObj
   const filePath = this.resourcePath
-  const { content: callbackContent } = compileScriptSetup({
+  const callback = this.async()
+  let finalSourceMap = null
+  const {
+    content: callbackContent,
+    map
+  } = compileScriptSetup({
     content,
     lang
   }, ctorType, filePath)
-
-  this.callback(null, callbackContent)
+  finalSourceMap = map
+  if (sourceMap) {
+    const compiledMapConsumer = await new SourceMapConsumer(map)
+    const compiledMapGenerator = SourceMapGenerator.fromSourceMap(compiledMapConsumer)
+
+    const originalConsumer = await new SourceMapConsumer(sourceMap)
+    compiledMapGenerator.applySourceMap(
+      originalConsumer,
+      filePath // 需要确保与原始映射的source路径一致
+    )
+    finalSourceMap = compiledMapGenerator.toJSON()
+  }
+  callback(null, callbackContent, finalSourceMap)
 }

package/lib/template-compiler/bind-this.js

@@ -2,6 +2,7 @@ const babylon = require('@babel/parser')
 const traverse = require('@babel/traverse').default
 const t = require('@babel/types')
 const generate = require('@babel/generator').default
+const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 
 const names = 'Infinity,undefined,NaN,isFinite,isNaN,' +
   'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
@@ -41,7 +42,7 @@ function getCollectPath (path) {
     if (current.node.computed) {
       if (t.isLiteral(current.node.property)) {
         if (t.isStringLiteral(current.node.property)) {
-          if (dangerousKeyMap[current.node.property.value]) {
+          if (dangerousKeyMap[current.node.property.value] || !isValidIdentifierStr(current.node.property.value)) {
             break
           }
           keyPath += `.${current.node.property.value}`

package/lib/template-compiler/compiler.js

@@ -581,7 +581,8 @@ function parseComponent (content, options) {
       let text = content.slice(currentBlock.start, currentBlock.end)
       // pad content so that linters and pre-processors can output correct
       // line numbers in errors and warnings
-      if (options.pad) {
+      // stylus编译遇到大量空行时会出现栈溢出，故针对stylus不走pad
+      if (options.pad && !(currentBlock.tag === 'style' && currentBlock.lang === 'stylus')) {
         text = padContent(currentBlock, options.pad) + text
       }
       currentBlock.content = text
@@ -1849,7 +1850,7 @@ function processRefReact (el, meta) {
     }])
   }
 
-  if (el.tag === 'mpx-scroll-view' && el.attrsMap['scroll-into-view']) {
+  if (el.tag === 'mpx-scroll-view') {
     addAttrs(el, [
       {
         name: '__selectRef',
@@ -2725,8 +2726,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)