@mpxjs/webpack-plugin 2.10.7-beta.8 → 2.10.7

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

@@ -1,189 +0,0 @@
-import { ComponentType, ReactNode, Component, Fragment, Suspense } from 'react'
-import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
-import FastImage from '@d11/react-native-fast-image'
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: '#fff'
-  },
-  loadingImage: {
-    width: 100,
-    height: 100,
-    marginTop: 220,
-    alignSelf: 'center'
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '500',
-    textAlign: 'center'
-  },
-  errorImage: {
-    marginTop: 80,
-    width: 220,
-    aspectRatio: 1,
-    alignSelf: 'center'
-  },
-  errorText: {
-    fontSize: 16,
-    textAlign: 'center',
-    color: '#333',
-    marginBottom: 20
-  },
-  retryButton: {
-    position: 'absolute',
-    bottom: 54,
-    left: 20,
-    right: 20,
-    backgroundColor: '#fff',
-    paddingVertical: 15,
-    borderRadius: 30,
-    marginTop: 40,
-    borderWidth: 1,
-    borderColor: '#FF5F00'
-  },
-  retryButtonText: {
-    color: '#FF5F00',
-    fontSize: 16,
-    fontWeight: '500',
-    textAlign: 'center'
-  }
-})
-
-type AsyncType = 'page' | 'component'
-
-interface PropsType<T extends AsyncType> {
-  type: T
-  props: object
-  loading: ComponentType<unknown>
-  fallback: ComponentType<unknown>
-  children: (props: unknown) => ReactNode
-}
-
-interface StateType {
-  hasError: boolean,
-  key: number
-}
-
-interface ComponentError extends Error {
-  request?: string
-  type: 'timeout' | 'fail'
-}
-
-const DefaultLoading = () => {
-  return (
-    <View style={styles.container}>
-      <FastImage
-        style={styles.loadingImage}
-        source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif' }}
-        resizeMode={FastImage.resizeMode.contain}></FastImage>
-    </View>
-  )
-}
-
-interface DefaultFallbackProps {
-  onReload: () => void
-}
-
-const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
-  return (
-    <View style={styles.container}>
-      <Image
-        source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png' }}
-        style={styles.errorImage}
-        resizeMode="contain"
-      />
-      <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
-      <TouchableOpacity
-        style={styles.retryButton}
-        onPress={onReload}
-        activeOpacity={0.7}
-      >
-        <Text style={styles.retryButtonText}>点击重试</Text>
-      </TouchableOpacity>
-    </View>
-  )
-}
-
-export default class AsyncContainer extends Component<PropsType<AsyncType>, StateType> {
-  private suspenseFallback: ReactNode
-  private errorFallback: ReactNode
-
-  constructor (props: PropsType<AsyncType>) {
-    super(props)
-    this.state = {
-      hasError: false,
-      key: 0
-    }
-    this.suspenseFallback = this.getSuspenseFallback()
-    this.errorFallback = this.getErrorFallback()
-  }
-
-  // render 阶段收集到的错误
-  static getDerivedStateFromError (error: ComponentError): StateType | undefined {
-    if (error.name === 'ChunkLoadError') {
-      return {
-        hasError: true,
-        key: 0
-      }
-    } else {
-      // 被外层捕获
-      throw error
-    }
-  }
-
-  componentDidCatch (error: ComponentError): void {
-    if (error.name === 'ChunkLoadError' && this.props.type === 'component') {
-      const request = error.request || ''
-      const subpackage = request.split('/').filter((i: string) => !!i)[0]
-      global.onLazyLoadError({
-        type: 'subpackage',
-        subpackage: [subpackage],
-        errMsg: `loadSubpackage: ${error.type}`
-      })
-    }
-  }
-
-  reloadPage () {
-    this.setState((prevState) => {
-      return {
-        hasError: false,
-        key: prevState.key + 1
-      }
-    })
-  }
-
-  getSuspenseFallback () {
-    if (this.props.type === 'page') {
-      const Fallback = this.props.loading || DefaultLoading
-      return <Fallback />
-    } else {
-      const Fallback = this.props.loading
-      return <Fallback {...this.props.props}></Fallback>
-    }
-  }
-
-  getErrorFallback () {
-    if (this.props.type === 'page') {
-      const Fallback = this.props.fallback as ComponentType<DefaultFallbackProps> || DefaultFallback
-      return <Fallback onReload={this.reloadPage.bind(this)}></Fallback>
-    } else {
-      const Fallback = this.props.loading
-      return <Fallback {...this.props.props}></Fallback>
-    }
-  }
-
-  render () {
-    if (this.state.hasError) {
-      return this.errorFallback
-    } else {
-      return (
-        <Suspense fallback={this.suspenseFallback} key={this.state.key}>
-          {this.props.children(this.props.props)}
-        </Suspense>
-      )
-    }
-  }
-}

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

@@ -1,141 +0,0 @@
-import { Component, Suspense } from 'react';
-import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
-import FastImage from '@d11/react-native-fast-image';
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        padding: 20,
-        backgroundColor: '#fff'
-    },
-    loadingImage: {
-        width: 100,
-        height: 100,
-        marginTop: 220,
-        alignSelf: 'center'
-    },
-    buttonText: {
-        color: '#fff',
-        fontSize: 16,
-        fontWeight: '500',
-        textAlign: 'center'
-    },
-    errorImage: {
-        marginTop: 80,
-        width: 220,
-        aspectRatio: 1,
-        alignSelf: 'center'
-    },
-    errorText: {
-        fontSize: 16,
-        textAlign: 'center',
-        color: '#333',
-        marginBottom: 20
-    },
-    retryButton: {
-        position: 'absolute',
-        bottom: 54,
-        left: 20,
-        right: 20,
-        backgroundColor: '#fff',
-        paddingVertical: 15,
-        borderRadius: 30,
-        marginTop: 40,
-        borderWidth: 1,
-        borderColor: '#FF5F00'
-    },
-    retryButtonText: {
-        color: '#FF5F00',
-        fontSize: 16,
-        fontWeight: '500',
-        textAlign: 'center'
-    }
-});
-const DefaultLoading = () => {
-    return (<View style={styles.container}>
-      <FastImage style={styles.loadingImage} source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif' }} resizeMode={FastImage.resizeMode.contain}></FastImage>
-    </View>);
-};
-const DefaultFallback = ({ onReload }) => {
-    return (<View style={styles.container}>
-      <Image source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png' }} style={styles.errorImage} resizeMode="contain"/>
-      <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
-      <TouchableOpacity style={styles.retryButton} onPress={onReload} activeOpacity={0.7}>
-        <Text style={styles.retryButtonText}>点击重试</Text>
-      </TouchableOpacity>
-    </View>);
-};
-export default class AsyncContainer extends Component {
-    suspenseFallback;
-    errorFallback;
-    constructor(props) {
-        super(props);
-        this.state = {
-            hasError: false,
-            key: 0
-        };
-        this.suspenseFallback = this.getSuspenseFallback();
-        this.errorFallback = this.getErrorFallback();
-    }
-    // render 阶段收集到的错误
-    static getDerivedStateFromError(error) {
-        if (error.name === 'ChunkLoadError') {
-            return {
-                hasError: true,
-                key: 0
-            };
-        }
-        else {
-            // 被外层捕获
-            throw error;
-        }
-    }
-    componentDidCatch(error) {
-        if (error.name === 'ChunkLoadError' && this.props.type === 'component') {
-            const request = error.request || '';
-            const subpackage = request.split('/').filter((i) => !!i)[0];
-            global.onLazyLoadError({
-                type: 'subpackage',
-                subpackage: [subpackage],
-                errMsg: `loadSubpackage: ${error.type}`
-            });
-        }
-    }
-    reloadPage() {
-        this.setState((prevState) => {
-            return {
-                hasError: false,
-                key: prevState.key + 1
-            };
-        });
-    }
-    getSuspenseFallback() {
-        if (this.props.type === 'page') {
-            const Fallback = this.props.loading || DefaultLoading;
-            return <Fallback />;
-        }
-        else {
-            const Fallback = this.props.loading;
-            return <Fallback {...this.props.props}></Fallback>;
-        }
-    }
-    getErrorFallback() {
-        if (this.props.type === 'page') {
-            const Fallback = this.props.fallback || DefaultFallback;
-            return <Fallback onReload={this.reloadPage.bind(this)}></Fallback>;
-        }
-        else {
-            const Fallback = this.props.loading;
-            return <Fallback {...this.props.props}></Fallback>;
-        }
-    }
-    render() {
-        if (this.state.hasError) {
-            return this.errorFallback;
-        }
-        else {
-            return (<Suspense fallback={this.suspenseFallback} key={this.state.key}>
-          {this.props.children(this.props.props)}
-        </Suspense>);
-        }
-    }
-}

package/lib/runtime/components/react/dist/mpx-sticky-header.jsx

@@ -1,115 +0,0 @@
-import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, useId } from 'react';
-import { Animated, StyleSheet, useAnimatedValue } from 'react-native';
-import { ScrollViewContext, StickyContext } from './context';
-import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
-import { error } from '@mpxjs/utils';
-import useInnerProps, { getCustomEvent } from './getInnerListeners';
-const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
-    const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps);
-    const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const scrollViewContext = useContext(ScrollViewContext);
-    const stickyContext = useContext(StickyContext);
-    const { scrollOffset } = scrollViewContext;
-    const { registerStickyHeader, unregisterStickyHeader } = stickyContext;
-    const headerRef = useRef(null);
-    const isStickOnTopRef = useRef(false);
-    const id = useId();
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout });
-    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const headerTopAnimated = useAnimatedValue(0);
-    // harmony animatedValue 不支持通过 _value 访问
-    const headerTopRef = useRef(0);
-    useEffect(() => {
-        registerStickyHeader({ key: id, updatePosition });
-        return () => {
-            unregisterStickyHeader(id);
-        };
-    }, []);
-    function updatePosition() {
-        if (headerRef.current) {
-            const scrollViewRef = scrollViewContext.gestureRef;
-            if (scrollViewRef && scrollViewRef.current) {
-                headerRef.current.measureLayout(scrollViewRef.current, (left, top) => {
-                    Animated.timing(headerTopAnimated, {
-                        toValue: top,
-                        duration: 0,
-                        useNativeDriver: true
-                    }).start();
-                    headerTopRef.current = top;
-                });
-            }
-            else {
-                error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference');
-            }
-        }
-    }
-    function onLayout(e) {
-        updatePosition();
-    }
-    useNodesRef(props, ref, headerRef, {
-        style: normalStyle
-    });
-    useEffect(() => {
-        if (!bindstickontopchange)
-            return;
-        const listener = scrollOffset.addListener((state) => {
-            const currentScrollValue = state.value;
-            const newIsStickOnTop = currentScrollValue > headerTopRef.current;
-            if (newIsStickOnTop !== isStickOnTopRef.current) {
-                isStickOnTopRef.current = newIsStickOnTop;
-                bindstickontopchange(getCustomEvent('stickontopchange', {}, {
-                    detail: {
-                        isStickOnTop: newIsStickOnTop
-                    },
-                    layoutRef
-                }, props));
-            }
-        });
-        return () => {
-            scrollOffset.removeListener(listener);
-        };
-    }, []);
-    const animatedStyle = useMemo(() => {
-        const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, 1],
-            extrapolateLeft: 'clamp',
-            extrapolateRight: 'extend'
-        });
-        const finalTranslateY = offsetTop === 0
-            ? translateY
-            : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, offsetTop],
-                extrapolate: 'clamp'
-            }));
-        return {
-            transform: [{ translateY: finalTranslateY }]
-        };
-    }, [scrollOffset, headerTopAnimated, offsetTop]);
-    const innerProps = useInnerProps(extendObject({}, props, {
-        ref: headerRef,
-        style: extendObject({}, styles.content, innerStyle, animatedStyle, {
-            paddingTop: padding[0] || 0,
-            paddingRight: padding[1] || 0,
-            paddingBottom: padding[2] || 0,
-            paddingLeft: padding[3] || 0
-        })
-    }, layoutProps), [], { layoutRef });
-    return (createElement(Animated.View, innerProps, wrapChildren(props, {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-    })));
-});
-const styles = StyleSheet.create({
-    content: {
-        width: '100%',
-        zIndex: 10
-    }
-});
-_StickyHeader.displayName = 'MpxStickyHeader';
-export default _StickyHeader;

package/lib/runtime/components/react/dist/mpx-sticky-section.jsx

@@ -1,45 +0,0 @@
-import { useRef, forwardRef, createElement, useCallback, useMemo } from 'react';
-import { View } from 'react-native';
-import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
-import { StickyContext } from './context';
-import useInnerProps from './getInnerListeners';
-const _StickySection = forwardRef((stickySectionProps = {}, ref) => {
-    const { textProps, innerProps: props = {} } = splitProps(stickySectionProps);
-    const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const sectionRef = useRef(null);
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout });
-    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const stickyHeaders = useRef(new Map());
-    const registerStickyHeader = useCallback((item) => {
-        stickyHeaders.current.set(item.id, item);
-    }, []);
-    const unregisterStickyHeader = useCallback((id) => {
-        stickyHeaders.current.delete(id);
-    }, []);
-    const contextValue = useMemo(() => ({
-        registerStickyHeader,
-        unregisterStickyHeader
-    }), []);
-    useNodesRef(props, ref, sectionRef, {
-        style: normalStyle
-    });
-    function onLayout() {
-        stickyHeaders.current.forEach(item => {
-            item.updatePosition();
-        });
-    }
-    const innerProps = useInnerProps(extendObject({}, props, {
-        style: extendObject(innerStyle, layoutStyle),
-        ref: sectionRef
-    }, layoutProps), [], { layoutRef });
-    return (createElement(View, innerProps, createElement(StickyContext.Provider, { value: contextValue }, wrapChildren(props, {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-    }))));
-});
-_StickySection.displayName = 'MpxStickySection';
-export default _StickySection;

package/lib/runtime/components/react/mpx-sticky-header.tsx

@@ -1,179 +0,0 @@
-import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, ReactNode, useId } from 'react'
-import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle, LayoutChangeEvent, useAnimatedValue } from 'react-native'
-import { ScrollViewContext, StickyContext } from './context'
-import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
-import { error } from '@mpxjs/utils'
-import useInnerProps, { getCustomEvent } from './getInnerListeners'
-
-interface StickyHeaderProps {
-  children?: ReactNode;
-  style?: ViewStyle;
-  padding?: [number, number, number, number];
-  'offset-top'?: number;
-  'enable-var'?: boolean;
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-  bindstickontopchange?: (e: NativeSyntheticEvent<unknown>) => void;
-}
-
-const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHeaderProps>((stickyHeaderProps: StickyHeaderProps = {}, ref): JSX.Element => {
-  const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps)
-  const {
-    style,
-    bindstickontopchange,
-    padding = [0, 0, 0, 0],
-    'offset-top': offsetTop = 0,
-    'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
-    'parent-width': parentWidth,
-    'parent-height': parentHeight
-  } = props
-
-  const scrollViewContext = useContext(ScrollViewContext)
-  const stickyContext = useContext(StickyContext)
-  const { scrollOffset } = scrollViewContext
-  const { registerStickyHeader, unregisterStickyHeader } = stickyContext
-  const headerRef = useRef<View>(null)
-  const isStickOnTopRef = useRef(false)
-  const id = useId()
-
-  const {
-    normalStyle,
-    hasVarDec,
-    varContextRef,
-    hasSelfPercent,
-    setWidth,
-    setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
-
-  const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout })
-
-  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
-
-  const headerTopAnimated = useAnimatedValue(0)
-  // harmony animatedValue 不支持通过 _value 访问
-  const headerTopRef = useRef(0)
-
-  useEffect(() => {
-    registerStickyHeader({ key: id, updatePosition })
-    return () => {
-      unregisterStickyHeader(id)
-    }
-  }, [])
-
-  function updatePosition () {
-    if (headerRef.current) {
-      const scrollViewRef = scrollViewContext.gestureRef
-      if (scrollViewRef && scrollViewRef.current) {
-        headerRef.current.measureLayout(
-          scrollViewRef.current,
-          (left: number, top: number) => {
-            Animated.timing(headerTopAnimated, {
-              toValue: top,
-              duration: 0,
-              useNativeDriver: true
-            }).start()
-            headerTopRef.current = top
-          }
-        )
-      } else {
-        error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference')
-      }
-    }
-  }
-
-  function onLayout (e: LayoutChangeEvent) {
-    updatePosition()
-  }
-
-  useNodesRef(props, ref, headerRef, {
-    style: normalStyle
-  })
-
-  useEffect(() => {
-    if (!bindstickontopchange) return
-
-    const listener = scrollOffset.addListener((state: { value: number }) => {
-      const currentScrollValue = state.value
-      const newIsStickOnTop = currentScrollValue > headerTopRef.current
-      if (newIsStickOnTop !== isStickOnTopRef.current) {
-        isStickOnTopRef.current = newIsStickOnTop
-        bindstickontopchange(
-          getCustomEvent('stickontopchange', {}, {
-            detail: {
-              isStickOnTop: newIsStickOnTop
-            },
-            layoutRef
-          }, props))
-      }
-    })
-
-    return () => {
-      scrollOffset.removeListener(listener)
-    }
-  }, [])
-
-  const animatedStyle = useMemo(() => {
-    const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolateLeft: 'clamp',
-      extrapolateRight: 'extend'
-    })
-
-    const finalTranslateY = offsetTop === 0
-      ? translateY
-      : Animated.add(
-        translateY,
-        Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, offsetTop],
-          extrapolate: 'clamp'
-        })
-      )
-
-    return {
-      transform: [{ translateY: finalTranslateY }]
-    }
-  }, [scrollOffset, headerTopAnimated, offsetTop])
-
-  const innerProps = useInnerProps(extendObject({}, props, {
-    ref: headerRef,
-    style: extendObject({}, styles.content, innerStyle, animatedStyle, {
-      paddingTop: padding[0] || 0,
-      paddingRight: padding[1] || 0,
-      paddingBottom: padding[2] || 0,
-      paddingLeft: padding[3] || 0
-    })
-  }, layoutProps), [], { layoutRef })
-
-  return (
-    createElement(
-      Animated.View,
-      innerProps,
-      wrapChildren(
-        props,
-        {
-          hasVarDec,
-          varContext: varContextRef.current,
-          textStyle,
-          textProps
-        }
-      )
-    )
-  )
-})
-
-const styles = StyleSheet.create({
-  content: {
-    width: '100%',
-    zIndex: 10
-  }
-})
-
-_StickyHeader.displayName = 'MpxStickyHeader'
-export default _StickyHeader