@mpxjs/webpack-plugin 2.10.7-beta.9 → 2.10.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/LICENSE +433 -0
  2. package/lib/dependencies/RequireExternalDependency.js +61 -0
  3. package/lib/file-loader.js +3 -2
  4. package/lib/index.js +60 -15
  5. package/lib/json-compiler/index.js +1 -0
  6. package/lib/parser.js +1 -1
  7. package/lib/platform/json/wx/index.js +43 -25
  8. package/lib/platform/template/wx/component-config/fix-component-name.js +2 -2
  9. package/lib/platform/template/wx/component-config/movable-view.js +10 -1
  10. package/lib/platform/template/wx/index.js +2 -1
  11. package/lib/react/LoadAsyncChunkModule.js +74 -0
  12. package/lib/react/index.js +3 -1
  13. package/lib/react/processJSON.js +74 -13
  14. package/lib/react/processScript.js +6 -6
  15. package/lib/react/script-helper.js +100 -41
  16. package/lib/runtime/components/react/context.ts +2 -12
  17. package/lib/runtime/components/react/dist/context.js +1 -1
  18. package/lib/runtime/components/react/dist/getInnerListeners.js +1 -1
  19. package/lib/runtime/components/react/dist/mpx-async-suspense.jsx +135 -0
  20. package/lib/runtime/components/react/dist/mpx-movable-area.jsx +9 -63
  21. package/lib/runtime/components/react/dist/mpx-movable-view.jsx +58 -301
  22. package/lib/runtime/components/react/dist/mpx-swiper.jsx +27 -53
  23. package/lib/runtime/components/react/dist/mpx-web-view.jsx +14 -28
  24. package/lib/runtime/components/react/dist/useAnimationHooks.js +2 -87
  25. package/lib/runtime/components/react/getInnerListeners.ts +1 -1
  26. package/lib/runtime/components/react/mpx-async-suspense.tsx +180 -0
  27. package/lib/runtime/components/react/mpx-movable-area.tsx +11 -98
  28. package/lib/runtime/components/react/mpx-movable-view.tsx +60 -350
  29. package/lib/runtime/components/react/mpx-swiper.tsx +25 -53
  30. package/lib/runtime/components/react/mpx-web-view.tsx +13 -33
  31. package/lib/runtime/components/react/types/global.d.ts +15 -0
  32. package/lib/runtime/components/react/useAnimationHooks.ts +2 -85
  33. package/lib/runtime/optionProcessorReact.d.ts +18 -0
  34. package/lib/runtime/optionProcessorReact.js +30 -0
  35. package/lib/script-setup-compiler/index.js +27 -5
  36. package/lib/template-compiler/compiler.js +4 -3
  37. package/lib/utils/dom-tag-config.js +17 -3
  38. package/lib/utils/trans-async-sub-rules.js +19 -0
  39. package/lib/web/script-helper.js +1 -1
  40. package/package.json +4 -4
  41. package/lib/runtime/components/react/AsyncContainer.tsx +0 -189
  42. package/lib/runtime/components/react/dist/AsyncContainer.jsx +0 -141
@@ -23,7 +23,6 @@ import Portal from './mpx-portal'
23
23
  * ✔ easing-function ="easeOutCubic"
24
24
  * ✘ display-multiple-items
25
25
  * ✘ snap-to-edge
26
- * ✔ disableGesture
27
26
  */
28
27
  type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
29
28
  type StrAbsoType = 'absoluteX' | 'absoluteY'
@@ -207,10 +206,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
207
206
  const moveTranstion = useSharedValue(0)
208
207
  // 记录从onBegin 到 onTouchesUp 的时间
209
208
  const moveTime = useSharedValue(0)
210
- // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
211
- const anotherDirectionMove = useSharedValue(0)
212
- // 另一个方向的
213
- const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase() as StrAbsoType
214
209
  const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
215
210
  const intervalTimer = props.interval || 500
216
211
 
@@ -509,11 +504,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
509
504
  }, [children.length])
510
505
 
511
506
  useEffect(() => {
512
- // 1. 如果用户在touch的过程中, 外部更新了current以外部为准(小程序表现)
513
- // 2. 手指滑动过程中更新索引,外部会把current再穿进来,导致offset直接更新了
514
- if (props.current !== currentIndex.value) {
515
- updateCurrent(props.current || 0, step.value)
516
- }
507
+ updateCurrent(props.current || 0, step.value)
517
508
  }, [props.current])
518
509
 
519
510
  useEffect(() => {
@@ -575,25 +566,18 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
575
566
  targetOffset: -moveToTargetPos
576
567
  }
577
568
  }
578
- function checkUnCircular (eventData: EventDataType) {
569
+ function canMove (eventData: EventDataType) {
579
570
  'worklet'
580
571
  const { translation } = eventData
581
572
  const currentOffset = Math.abs(offset.value)
582
- // 向右滑动swiper
583
- if (translation < 0) {
584
- const boundaryOffset = step.value * (childrenLength.value - 1)
585
- const gestureMovePos = Math.abs(translation) + currentOffset
586
- return {
587
- // 防止快速连续向右滑动时,手势移动的距离 加 当前的offset超出边界
588
- targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
589
- canMove: currentOffset < boundaryOffset
573
+ if (!circularShared.value) {
574
+ if (translation < 0) {
575
+ return currentOffset < step.value * (childrenLength.value - 1)
576
+ } else {
577
+ return currentOffset > 0
590
578
  }
591
579
  } else {
592
- const gestureMovePos = currentOffset - translation
593
- return {
594
- targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
595
- canMove: currentOffset > 0
596
- }
580
+ return true
597
581
  }
598
582
  }
599
583
  function handleEnd (eventData: EventDataType) {
@@ -652,7 +636,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
652
636
  }
653
637
  })
654
638
  }
655
- function computeHalf () {
639
+ function handleLongPress () {
656
640
  'worklet'
657
641
  const currentOffset = Math.abs(offset.value)
658
642
  let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
@@ -662,14 +646,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
662
646
  // 正常事件中拿到的transition值(正向滑动<0,倒着滑>0)
663
647
  const diffOffset = preOffset - currentOffset
664
648
  const half = Math.abs(diffOffset) > step.value / 2
665
- return {
666
- diffOffset,
667
- half
668
- }
669
- }
670
- function handleLongPress () {
671
- 'worklet'
672
- const { diffOffset, half } = computeHalf()
673
649
  if (+diffOffset === 0) {
674
650
  runOnJS(resumeLoop)()
675
651
  } else if (half) {
@@ -725,29 +701,18 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
725
701
  runOnJS(pauseLoop)()
726
702
  preAbsolutePos.value = e[strAbso]
727
703
  moveTranstion.value = e[strAbso]
728
- anotherDirectionMove.value = e[anotherAbso]
729
704
  moveTime.value = new Date().getTime()
730
705
  })
731
- .onUpdate((e) => {
706
+ .onTouchesMove((e) => {
732
707
  'worklet'
733
708
  if (touchfinish.value) return
734
- const moveDistance = e[strAbso] - preAbsolutePos.value
709
+ const touchEventData = e.changedTouches[0]
710
+ const moveDistance = touchEventData[strAbso] - preAbsolutePos.value
735
711
  const eventData = {
736
712
  translation: moveDistance
737
713
  }
738
- // 1. 在Move过程中,如果手指一直没抬起来,超过一半的话也会更新索引
739
- const { half } = computeHalf()
740
- if (half) {
741
- const { selectedIndex } = getTargetPosition(eventData)
742
- currentIndex.value = selectedIndex
743
- }
744
- // 2. 处理用户一直拖拽到临界点的场景, 不会执行onEnd
745
- const { canMove, targetOffset } = checkUnCircular(eventData)
746
- if (!circularShared.value) {
747
- if (canMove) {
748
- offset.value = targetOffset
749
- preAbsolutePos.value = e[strAbso]
750
- }
714
+ // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
715
+ if (!circularShared.value && !canMove(eventData)) {
751
716
  return
752
717
  }
753
718
  const { isBoundary, resetOffset } = reachBoundary(eventData)
@@ -756,21 +721,28 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
756
721
  } else {
757
722
  offset.value = moveDistance + offset.value
758
723
  }
759
- preAbsolutePos.value = e[strAbso]
724
+ preAbsolutePos.value = touchEventData[strAbso]
760
725
  })
761
- .onFinalize((e) => {
726
+ .onTouchesUp((e) => {
762
727
  'worklet'
763
728
  if (touchfinish.value) return
764
- const moveDistance = e[strAbso] - moveTranstion.value
729
+ const touchEventData = e.changedTouches[0]
730
+ const moveDistance = touchEventData[strAbso] - moveTranstion.value
765
731
  touchfinish.value = true
766
732
  const eventData = {
767
733
  translation: moveDistance
768
734
  }
735
+ if (childrenLength.value === 1) {
736
+ return handleBackInit()
737
+ }
738
+ // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
739
+ if (!circularShared.value && !canMove(eventData)) {
740
+ return
741
+ }
769
742
  const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000
770
743
  if (Math.abs(strVelocity) < longPressRatio) {
771
744
  handleLongPress()
772
745
  } else {
773
- // 如果触发了onTouchesCancelled,不会触发onUpdate不会更新offset值, 索引不会变更
774
746
  handleEnd(eventData)
775
747
  }
776
748
  })
@@ -1,6 +1,7 @@
1
- import { forwardRef, useRef, useContext, useMemo, useState, useCallback, useEffect } from 'react'
1
+ import { forwardRef, useRef, useContext, useMemo, useState } from 'react'
2
2
  import { warn, isFunction } from '@mpxjs/utils'
3
3
  import Portal from './mpx-portal/index'
4
+ import { usePreventRemove, PreventRemoveEvent } from '@react-navigation/native'
4
5
  import { getCustomEvent } from './getInnerListeners'
5
6
  import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
6
7
  import { WebView } from 'react-native-webview'
@@ -75,7 +76,6 @@ const styles = StyleSheet.create({
75
76
  borderRadius: 10
76
77
  }
77
78
  })
78
-
79
79
  const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element | null => {
80
80
  const { src, bindmessage, bindload, binderror } = props
81
81
  const mpx = global.__mpx
@@ -100,8 +100,8 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
100
100
  const webViewRef = useRef<WebView>(null)
101
101
  const fristLoaded = useRef<boolean>(false)
102
102
  const isLoadError = useRef<boolean>(false)
103
+ const isNavigateBack = useRef<boolean>(false)
103
104
  const statusCode = useRef<string|number>('')
104
- const [isLoaded, setIsLoaded] = useState<boolean>(true)
105
105
  const defaultWebViewStyle = {
106
106
  position: 'absolute' as const,
107
107
  left: 0,
@@ -109,30 +109,18 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
109
109
  top: 0,
110
110
  bottom: 0
111
111
  }
112
- const canGoBack = useRef<boolean>(false)
113
- const isNavigateBack = useRef<boolean>(false)
114
112
 
115
- const beforeRemoveHandle = (e: Event) => {
116
- if (canGoBack.current && !isNavigateBack.current) {
113
+ const navigation = useNavigation()
114
+ const [isIntercept, setIsIntercept] = useState<boolean>(false)
115
+ usePreventRemove(isIntercept, (event: PreventRemoveEvent) => {
116
+ const { data } = event
117
+ if (isNavigateBack.current) {
118
+ navigation?.dispatch(data.action)
119
+ } else {
117
120
  webViewRef.current?.goBack()
118
- e.preventDefault()
119
121
  }
120
122
  isNavigateBack.current = false
121
- }
122
-
123
- const navigation = useNavigation()
124
-
125
- // useEffect(() => {
126
- // let beforeRemoveSubscription:any
127
- // if (__mpx_mode__ !== 'ios') {
128
- // beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
129
- // }
130
- // return () => {
131
- // if (isFunction(beforeRemoveSubscription)) {
132
- // beforeRemoveSubscription()
133
- // }
134
- // }
135
- // }, [])
123
+ })
136
124
 
137
125
  useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
138
126
  style: defaultWebViewStyle
@@ -183,14 +171,14 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
183
171
  }
184
172
  const _changeUrl = function (navState: WebViewNavigation) {
185
173
  if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
186
- canGoBack.current = navState.canGoBack
187
174
  currentPage.__webViewUrl = navState.url
175
+ setIsIntercept(navState.canGoBack)
188
176
  }
189
177
  }
190
178
 
191
179
  const _onLoadProgress = function (event: WebViewProgressEvent) {
192
180
  if (__mpx_mode__ !== 'ios') {
193
- canGoBack.current = event.nativeEvent.canGoBack
181
+ setIsIntercept(event.nativeEvent.canGoBack)
194
182
  }
195
183
  }
196
184
  const _message = function (res: WebViewMessageEvent) {
@@ -279,7 +267,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
279
267
  }
280
268
  const onLoadEndHandle = function (res: WebViewEvent) {
281
269
  fristLoaded.current = true
282
- setIsLoaded(true)
283
270
  const src = res.nativeEvent?.url
284
271
  if (isLoadError.current) {
285
272
  isLoadError.current = false
@@ -325,11 +312,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
325
312
  setPageLoadErr(true)
326
313
  }
327
314
  }
328
- const onLoadStart = function () {
329
- if (!fristLoaded.current) {
330
- setIsLoaded(false)
331
- }
332
- }
333
315
 
334
316
  return (
335
317
  <Portal>
@@ -342,7 +324,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
342
324
  )
343
325
  : (<WebView
344
326
  style={ defaultWebViewStyle }
345
- pointerEvents={ isLoaded ? 'auto' : 'none' }
346
327
  source={{ uri: src }}
347
328
  ref={webViewRef}
348
329
  javaScriptEnabled={true}
@@ -353,7 +334,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
353
334
  onLoadEnd={onLoadEnd}
354
335
  onHttpError={onHttpError}
355
336
  onError={onError}
356
- onLoadStart={onLoadStart}
357
337
  allowsBackForwardNavigationGestures={true}
358
338
  ></WebView>)}
359
339
  </Portal>
@@ -42,6 +42,21 @@ declare let global: {
42
42
 
43
43
  declare module '@react-navigation/native' {
44
44
  export function useNavigation (): Record<string, any>
45
+ export function usePreventRemove(
46
+ enabled: boolean,
47
+ callback: (e: { data: { action: any } }) => void
48
+ ): void;
49
+ export interface PreventRemoveEvent {
50
+ data: {
51
+ action: NavigationAction;
52
+ route: {
53
+ key: string;
54
+ name: string;
55
+ params?: unknown;
56
+ };
57
+ };
58
+ preventDefault(): void;
59
+ }
45
60
  }
46
61
 
47
62
  declare module '*.png'
@@ -84,88 +84,6 @@ const InitialValue: ExtendedViewStyle = Object.assign({
84
84
  const TransformOrigin = 'transformOrigin'
85
85
  // transform
86
86
  const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
87
- // 多value解析
88
- const parseValues = (str: string, char = ' ') => {
89
- let stack = 0
90
- let temp = ''
91
- const result = []
92
- for (let i = 0; i < str.length; i++) {
93
- if (str[i] === '(') {
94
- stack++
95
- } else if (str[i] === ')') {
96
- stack--
97
- }
98
- // 非括号内 或者 非分隔字符且非空
99
- if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
100
- temp += str[i]
101
- }
102
- if ((stack === 0 && str[i] === char) || i === str.length - 1) {
103
- result.push(temp)
104
- temp = ''
105
- }
106
- }
107
- return result
108
- }
109
- // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
110
- const parseTransform = (transformStr: string) => {
111
- const values = parseValues(transformStr)
112
- const transform: {[propName: string]: string|number|number[]}[] = []
113
- values.forEach(item => {
114
- const match = item.match(/([/\w]+)\((.+)\)/)
115
- if (match && match.length >= 3) {
116
- let key = match[1]
117
- const val = match[2]
118
- switch (key) {
119
- case 'translateX':
120
- case 'translateY':
121
- case 'scaleX':
122
- case 'scaleY':
123
- case 'rotateX':
124
- case 'rotateY':
125
- case 'rotateZ':
126
- case 'rotate':
127
- case 'skewX':
128
- case 'skewY':
129
- case 'perspective':
130
- // rotate 处理成 rotateZ
131
- key = key === 'rotate' ? 'rotateZ' : key
132
- // 单个值处理
133
- transform.push({ [key]: global.__formatValue(val) })
134
- break
135
- case 'matrix':
136
- transform.push({ [key]: parseValues(val, ',').map(val => +val) })
137
- break
138
- case 'translate':
139
- case 'scale':
140
- case 'skew':
141
- case 'translate3d': // x y 支持 z不支持
142
- case 'scale3d': // x y 支持 z不支持
143
- {
144
- // 2 个以上的值处理
145
- key = key.replace('3d', '')
146
- const vals = parseValues(val, ',').splice(0, 3)
147
- // scale(.5) === scaleX(.5) scaleY(.5)
148
- if (vals.length === 1 && key === 'scale') {
149
- vals.push(vals[0])
150
- }
151
- const xyz = ['X', 'Y', 'Z']
152
- transform.push(...vals.map((v, index) => {
153
- return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) }
154
- }))
155
- break
156
- }
157
- }
158
- }
159
- })
160
- return transform
161
- }
162
- // format style
163
- const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
164
- if (!style.transform || Array.isArray(style.transform)) return style
165
- return Object.assign({}, style, {
166
- transform: parseTransform(style.transform)
167
- })
168
- }
169
87
 
170
88
  // transform 数组转对象
171
89
  function getTransformObj (transforms: { [propName: string]: string | number }[]) {
@@ -176,7 +94,7 @@ function getTransformObj (transforms: { [propName: string]: string | number }[])
176
94
  }
177
95
 
178
96
  export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
179
- const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props
97
+ const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props
180
98
  const enableStyleAnimation = enableAnimation || !!animation
181
99
  const enableAnimationRef = useRef(enableStyleAnimation)
182
100
  if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -185,7 +103,6 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
185
103
 
186
104
  if (!enableAnimationRef.current) return { enableStyleAnimation: false }
187
105
 
188
- const originalStyle = formatStyle(style)
189
106
  // id 标识
190
107
  const id = animation?.id || -1
191
108
  // 有动画样式的 style key
@@ -214,7 +131,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
214
131
  useEffect(() => {
215
132
  // style 更新后同步更新 lastStyleRef & shareValMap
216
133
  updateStyleVal()
217
- }, [style])
134
+ }, [originalStyle])
218
135
  // ** 获取动画样式prop & 驱动动画
219
136
  // eslint-disable-next-line react-hooks/rules-of-hooks
220
137
  useEffect(() => {
@@ -1,3 +1,4 @@
1
+ import { ReactNode, ComponentType } from 'react'
1
2
  declare global {
2
3
  namespace NodeJS {
3
4
  interface Global {
@@ -7,3 +8,20 @@ declare global {
7
8
  }
8
9
 
9
10
  export function getComponent (...args: any): object
11
+
12
+ interface AsyncModule {
13
+ __esModule: boolean
14
+ default: ReactNode
15
+ }
16
+
17
+ interface AsyncSuspenseProps {
18
+ type: 'component' | 'page'
19
+ chunkName: string
20
+ moduleId: string
21
+ innerProps: any
22
+ loading: ComponentType<unknown>
23
+ fallback: ComponentType<unknown>
24
+ getChildren: () => Promise<AsyncModule>
25
+ }
26
+
27
+ export function getAsyncSuspense(props: AsyncSuspenseProps): ReactNode
@@ -1,6 +1,36 @@
1
+ import AsyncSuspense from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-async-suspense'
2
+ import { memo, forwardRef, createElement } from 'react'
3
+ import { extend } from './utils'
4
+
1
5
  export function getComponent (component, extendOptions) {
2
6
  component = component.__esModule ? component.default : component
3
7
  // eslint-disable-next-line
4
8
  if (extendOptions) Object.assign(component, extendOptions)
5
9
  return component
6
10
  }
11
+
12
+ export function getAsyncSuspense (commonProps) {
13
+ if (commonProps.type === 'component') {
14
+ return memo(forwardRef(function (props, ref) {
15
+ return createElement(AsyncSuspense,
16
+ extend(commonProps, {
17
+ innerProps: Object.assign({}, props, { ref })
18
+ })
19
+ )
20
+ }))
21
+ } else {
22
+ return function (props) {
23
+ return createElement(AsyncSuspense,
24
+ extend(commonProps, {
25
+ innerProps: props
26
+ })
27
+ )
28
+ }
29
+ }
30
+ }
31
+
32
+ export function getLazyPage (getComponent) {
33
+ return function (props) {
34
+ return createElement(getComponent(), props)
35
+ }
36
+ }
@@ -1,5 +1,6 @@
1
1
  const babylon = require('@babel/parser')
2
2
  const MagicString = require('magic-string')
3
+ const { SourceMapConsumer, SourceMapGenerator } = require('source-map')
3
4
  const traverse = require('@babel/traverse').default
4
5
  const t = require('@babel/types')
5
6
  const formatCodeFrame = require('@babel/code-frame')
@@ -625,7 +626,12 @@ function compileScriptSetup (
625
626
  _s.appendRight(endOffset, '})')
626
627
 
627
628
  return {
628
- content: _s.toString()
629
+ content: _s.toString(),
630
+ map: _s.generateMap({
631
+ source: filePath,
632
+ hires: true,
633
+ includeContent: true
634
+ })
629
635
  }
630
636
  }
631
637
 
@@ -1165,14 +1171,30 @@ function getCtor (ctorType) {
1165
1171
  return ctor
1166
1172
  }
1167
1173
 
1168
- module.exports = function (content) {
1174
+ module.exports = async function (content, sourceMap) {
1169
1175
  const { queryObj } = parseRequest(this.resource)
1170
1176
  const { ctorType, lang } = queryObj
1171
1177
  const filePath = this.resourcePath
1172
- const { content: callbackContent } = compileScriptSetup({
1178
+ const callback = this.async()
1179
+ let finalSourceMap = null
1180
+ const {
1181
+ content: callbackContent,
1182
+ map
1183
+ } = compileScriptSetup({
1173
1184
  content,
1174
1185
  lang
1175
1186
  }, ctorType, filePath)
1176
-
1177
- this.callback(null, callbackContent)
1187
+ finalSourceMap = map
1188
+ if (sourceMap) {
1189
+ const compiledMapConsumer = await new SourceMapConsumer(map)
1190
+ const compiledMapGenerator = SourceMapGenerator.fromSourceMap(compiledMapConsumer)
1191
+
1192
+ const originalConsumer = await new SourceMapConsumer(sourceMap)
1193
+ compiledMapGenerator.applySourceMap(
1194
+ originalConsumer,
1195
+ filePath // 需要确保与原始映射的source路径一致
1196
+ )
1197
+ finalSourceMap = compiledMapGenerator.toJSON()
1198
+ }
1199
+ callback(null, callbackContent, finalSourceMap)
1178
1200
  }
@@ -180,7 +180,7 @@ const i18nModuleName = '_i'
180
180
  const stringifyWxsPath = '~' + normalize.lib('runtime/stringify.wxs')
181
181
  const stringifyModuleName = '_s'
182
182
  const optionalChainWxsPath = '~' + normalize.lib('runtime/oc.wxs')
183
- const optionalChainWxsName = '_o'
183
+ const optionalChainWxsName = '_oc' // 改成_oc解决web下_o重名问题
184
184
 
185
185
  const tagRES = /(\{\{(?:.|\n|\r)+?\}\})(?!})/
186
186
  const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
@@ -581,7 +581,8 @@ function parseComponent (content, options) {
581
581
  let text = content.slice(currentBlock.start, currentBlock.end)
582
582
  // pad content so that linters and pre-processors can output correct
583
583
  // line numbers in errors and warnings
584
- if (options.pad) {
584
+ // stylus编译遇到大量空行时会出现栈溢出,故针对stylus不走pad
585
+ if (options.pad && !(currentBlock.tag === 'style' && currentBlock.lang === 'stylus')) {
585
586
  text = padContent(currentBlock, options.pad) + text
586
587
  }
587
588
  currentBlock.content = text
@@ -2002,7 +2003,7 @@ function postProcessFor (el) {
2002
2003
  function postProcessForReact (el) {
2003
2004
  if (el.for) {
2004
2005
  if (el.for.key) {
2005
- addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key)}, ${el.for.index || 'index'})`, false, 'key')
2006
+ addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key === '_' ? 'index' : el.for.key)}, ${el.for.index || 'index'})`, false, 'key')
2006
2007
  addAttrs(el, [{
2007
2008
  name: 'key',
2008
2009
  value: el.for.key
@@ -72,7 +72,7 @@ const isNativeMiniTag = makeMap(
72
72
  * 是否为mpx内置组件
73
73
  * collected from packages/webpack-plugin/lib/runtime/components/web/
74
74
  */
75
- const isBuildInTag = makeMap(
75
+ const isBuildInWebTag = makeMap(
76
76
  'mpx-image,mpx-picker-view,mpx-slider,mpx-textarea,mpx-input,mpx-picker,' +
77
77
  'mpx-swiper-item,mpx-video,mpx-button,mpx-keep-alive,mpx-progress,' +
78
78
  'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
@@ -81,6 +81,19 @@ const isBuildInTag = makeMap(
81
81
  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
82
82
  )
83
83
 
84
+ /**
85
+ * 是否为mpx2rn内置组件
86
+ */
87
+ const isBuildInReactTag = makeMap(
88
+ 'mpx-web-view,mpx-view,mpx-video,mpx-textarea,mpx-text,mpx-switch,' +
89
+ 'mpx-swiper,mpx-swiper-item,mpx-simple-view,mpx-simple-text,mpx-scroll-view,' +
90
+ 'mpx-root-portal,mpx-radio,mpx-radio-group,mpx-navigator,mpx-movable-view,' +
91
+ 'mpx-movable-area,mpx-label,mpx-keyboard-avoiding-view,mpx-input,mpx-inline-text,' +
92
+ 'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
93
+ 'mpx-rich-text,mpx-portal,mpx-popup,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
94
+ 'mpx-icon,mpx-canvas'
95
+ )
96
+
84
97
  const isSpace = makeMap('ensp,emsp,nbsp')
85
98
 
86
99
  const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
@@ -105,11 +118,12 @@ module.exports = {
105
118
  isVoidTag,
106
119
  isNonPhrasingTag,
107
120
  isRichTextTag,
108
- isBuildInTag,
121
+ isBuildInWebTag,
109
122
  isUnaryTag,
110
123
  isSpace,
111
124
  isContWidth,
112
125
  isContHeight,
113
126
  isNativeMiniTag,
114
- isContConRow
127
+ isContConRow,
128
+ isBuildInReactTag
115
129
  }
@@ -0,0 +1,19 @@
1
+ function transSubpackage (asyncSubpackageNameRules, tarRoot) {
2
+ // 如果没有tarRoot,则无需进行tarRoot的修改,因此
3
+ if (tarRoot && Array.isArray(asyncSubpackageNameRules) && asyncSubpackageNameRules.length >= 1) {
4
+ for (const item of asyncSubpackageNameRules) {
5
+ if (item?.from) {
6
+ const fromPaths = Array.isArray(item.from) ? item.from : [item.from]
7
+ if (fromPaths.includes(tarRoot)) {
8
+ tarRoot = item.to
9
+ break
10
+ }
11
+ }
12
+ }
13
+ }
14
+ return tarRoot
15
+ }
16
+
17
+ module.exports = {
18
+ transSubpackage
19
+ }
@@ -13,7 +13,7 @@ function stringifyRequest (loaderContext, request) {
13
13
 
14
14
  function getAsyncChunkName (chunkName) {
15
15
  if (chunkName && typeof chunkName !== 'boolean') {
16
- return `/* webpackChunkName: "${chunkName}" */`
16
+ return `/* webpackChunkName: "${chunkName}/index" */`
17
17
  }
18
18
  return ''
19
19
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mpxjs/webpack-plugin",
3
- "version": "2.10.7-beta.9",
3
+ "version": "2.10.8",
4
4
  "description": "mpx compile core",
5
5
  "keywords": [
6
6
  "mpx"
@@ -28,7 +28,7 @@
28
28
  "@better-scroll/wheel": "^2.5.1",
29
29
  "@better-scroll/zoom": "^2.5.1",
30
30
  "@mpxjs/template-engine": "^2.8.7",
31
- "@mpxjs/utils": "^2.10.6 | ^2.10.6-beta.1",
31
+ "@mpxjs/utils": "^2.10.8",
32
32
  "acorn": "^8.11.3",
33
33
  "acorn-walk": "^7.2.0",
34
34
  "async": "^2.6.0",
@@ -83,7 +83,7 @@
83
83
  },
84
84
  "devDependencies": {
85
85
  "@d11/react-native-fast-image": "^8.6.12",
86
- "@mpxjs/api-proxy": "^2.10.7 | ^2.10.7-beta.1",
86
+ "@mpxjs/api-proxy": "^2.10.8",
87
87
  "@types/babel-traverse": "^6.25.4",
88
88
  "@types/babel-types": "^7.0.4",
89
89
  "@types/react": "^18.2.79",
@@ -100,5 +100,5 @@
100
100
  "engines": {
101
101
  "node": ">=14.14.0"
102
102
  },
103
- "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
103
+ "gitHead": "23f6e6d5fa30e4abdc35e137007edbd38337b36e"
104
104
  }