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

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

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

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

@@ -2,7 +2,6 @@ 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,' +
@@ -42,7 +41,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] || !isValidIdentifierStr(current.node.property.value)) {
+          if (dangerousKeyMap[current.node.property.value]) {
             break
           }
           keyPath += `.${current.node.property.value}`

package/lib/template-compiler/compiler.js

@@ -180,7 +180,7 @@ const i18nModuleName = '_i'
 const stringifyWxsPath = '~' + normalize.lib('runtime/stringify.wxs')
 const stringifyModuleName = '_s'
 const optionalChainWxsPath = '~' + normalize.lib('runtime/oc.wxs')
-const optionalChainWxsName = '_o'
+const optionalChainWxsName = '_oc' // 改成_oc解决web下_o重名问题
 
 const tagRES = /(\{\{(?:.|\n|\r)+?\}\})(?!})/
 const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
@@ -1849,7 +1849,7 @@ function processRefReact (el, meta) {
     }])
   }
 
-  if (el.tag === 'mpx-scroll-view') {
+  if (el.tag === 'mpx-scroll-view' && el.attrsMap['scroll-into-view']) {
     addAttrs(el, [
       {
         name: '__selectRef',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.7-beta.9",
+  "version": "2.10.7",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.6 | ^2.10.6-beta.1",
+    "@mpxjs/utils": "^2.10.6",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.7 | ^2.10.7-beta.1",
+    "@mpxjs/api-proxy": "^2.10.7",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -100,5 +100,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
+  "gitHead": "3c56726c27464abac9cea343167d1b40933fff0d"
 }

package/lib/platform/template/wx/component-config/sticky-header.js

@@ -1,23 +0,0 @@
-const TAG_NAME = 'sticky-header'
-
-module.exports = function ({ print }) {
-  return {
-    test: TAG_NAME,
-    android (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    },
-    ios (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    },
-    harmony (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    },
-    web (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    }
-  }
-}

package/lib/platform/template/wx/component-config/sticky-section.js

@@ -1,23 +0,0 @@
-const TAG_NAME = 'sticky-section'
-
-module.exports = function ({ print }) {
-  return {
-    test: TAG_NAME,
-    android (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    },
-    ios (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    },
-    harmony (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    },
-    web (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    }
-  }
-}

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,117 +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,
-        // harmony 需要手动设置 relative， zIndex 才生效
-        position: 'relative'
-    }
-});
-_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;