@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.
- package/LICENSE +433 -0
- package/lib/dependencies/RequireExternalDependency.js +61 -0
- package/lib/file-loader.js +3 -2
- package/lib/index.js +60 -15
- package/lib/json-compiler/index.js +1 -0
- package/lib/parser.js +1 -1
- package/lib/platform/json/wx/index.js +43 -25
- package/lib/platform/template/wx/component-config/fix-component-name.js +2 -2
- package/lib/platform/template/wx/component-config/movable-view.js +10 -1
- package/lib/platform/template/wx/index.js +2 -1
- package/lib/react/LoadAsyncChunkModule.js +74 -0
- package/lib/react/index.js +3 -1
- package/lib/react/processJSON.js +74 -13
- package/lib/react/processScript.js +6 -6
- package/lib/react/script-helper.js +100 -41
- package/lib/runtime/components/react/context.ts +2 -12
- package/lib/runtime/components/react/dist/context.js +1 -1
- package/lib/runtime/components/react/dist/getInnerListeners.js +1 -1
- package/lib/runtime/components/react/dist/mpx-async-suspense.jsx +135 -0
- package/lib/runtime/components/react/dist/mpx-movable-area.jsx +9 -63
- package/lib/runtime/components/react/dist/mpx-movable-view.jsx +58 -301
- package/lib/runtime/components/react/dist/mpx-swiper.jsx +27 -53
- package/lib/runtime/components/react/dist/mpx-web-view.jsx +14 -28
- package/lib/runtime/components/react/dist/useAnimationHooks.js +2 -87
- package/lib/runtime/components/react/getInnerListeners.ts +1 -1
- package/lib/runtime/components/react/mpx-async-suspense.tsx +180 -0
- package/lib/runtime/components/react/mpx-movable-area.tsx +11 -98
- package/lib/runtime/components/react/mpx-movable-view.tsx +60 -350
- package/lib/runtime/components/react/mpx-swiper.tsx +25 -53
- package/lib/runtime/components/react/mpx-web-view.tsx +13 -33
- package/lib/runtime/components/react/types/global.d.ts +15 -0
- package/lib/runtime/components/react/useAnimationHooks.ts +2 -85
- package/lib/runtime/optionProcessorReact.d.ts +18 -0
- package/lib/runtime/optionProcessorReact.js +30 -0
- package/lib/script-setup-compiler/index.js +27 -5
- package/lib/template-compiler/compiler.js +4 -3
- package/lib/utils/dom-tag-config.js +17 -3
- package/lib/utils/trans-async-sub-rules.js +19 -0
- package/lib/web/script-helper.js +1 -1
- package/package.json +4 -4
- package/lib/runtime/components/react/AsyncContainer.tsx +0 -189
- 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
|
-
|
|
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
|
|
569
|
+
function canMove (eventData: EventDataType) {
|
|
579
570
|
'worklet'
|
|
580
571
|
const { translation } = eventData
|
|
581
572
|
const currentOffset = Math.abs(offset.value)
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
.
|
|
706
|
+
.onTouchesMove((e) => {
|
|
732
707
|
'worklet'
|
|
733
708
|
if (touchfinish.value) return
|
|
734
|
-
const
|
|
709
|
+
const touchEventData = e.changedTouches[0]
|
|
710
|
+
const moveDistance = touchEventData[strAbso] - preAbsolutePos.value
|
|
735
711
|
const eventData = {
|
|
736
712
|
translation: moveDistance
|
|
737
713
|
}
|
|
738
|
-
//
|
|
739
|
-
|
|
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 =
|
|
724
|
+
preAbsolutePos.value = touchEventData[strAbso]
|
|
760
725
|
})
|
|
761
|
-
.
|
|
726
|
+
.onTouchesUp((e) => {
|
|
762
727
|
'worklet'
|
|
763
728
|
if (touchfinish.value) return
|
|
764
|
-
const
|
|
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
|
|
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
|
|
116
|
-
|
|
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
|
-
|
|
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
|
-
}, [
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
+
}
|
package/lib/web/script-helper.js
CHANGED
|
@@ -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.
|
|
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.
|
|
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.
|
|
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": "
|
|
103
|
+
"gitHead": "23f6e6d5fa30e4abdc35e137007edbd38337b36e"
|
|
104
104
|
}
|