@mpxjs/webpack-plugin 2.10.7-beta.1 → 2.10.7-beta.11

package/lib/react/script-helper.js

@@ -3,74 +3,30 @@ const createHelpers = require('../helpers')
 const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
-const addQuery = require('../utils/add-query')
-const path = require('path')
-const { isBuildInReactTag } = require('../utils/dom-tag-config')
 
 function stringifyRequest (loaderContext, request) {
   return loaderUtils.stringifyRequest(loaderContext, request)
 }
 
-function getMpxComponentRequest (component) {
-  return JSON.stringify(addQuery(`@mpxjs/webpack-plugin/lib/runtime/components/react/dist/${component}`, { isComponent: true }))
-}
-
-const mpxAsyncSuspense = getMpxComponentRequest('AsyncSuspense')
-
-function getAsyncChunkName (chunkName) {
-  if (chunkName && typeof chunkName !== 'boolean') {
-    return `/* webpackChunkName: "${chunkName}/index" */`
-  }
-  return ''
-}
+// function getAsyncChunkName (chunkName) {
+//   if (chunkName && typeof chunkName !== 'boolean') {
+//     return `/* webpackChunkName: "${chunkName}" */`
+//   }
+//   return ''
+// }
 
-function getAsyncComponent (componentName, componentRequest, chunkName, fallback) {
-  return `getComponent(memo(forwardRef(function(props, ref) {
-    return createElement(
-      getComponent(require(${mpxAsyncSuspense})),
-      {
-        type: 'component',
-        props: Object.assign({}, props, { ref }),
-        chunkName: ${JSON.stringify(chunkName)},
-        request: ${JSON.stringify(componentRequest)},
-        loading: getComponent(require(${fallback})),
-        getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
-      }
-    )
-  })))`
-}
-
-function getAsyncPage (componentName, componentRequest, chunkName, fallback, loading) {
-  fallback = fallback && `getComponent(require('${fallback}?isComponent=true'))`
-  loading = loading && `getComponent(require('${loading}?isComponent=true'))`
-  return `getComponent(function(props) {
-    return createElement(
-      getComponent(require(${mpxAsyncSuspense})),
-      {
-        type: 'page',
-        props: props,
-        chunkName: ${JSON.stringify(chunkName)},
-        request: ${JSON.stringify(componentRequest)},
-        fallback: ${fallback},
-        loading: ${loading},
-        getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
-      }
-    )
-  })`
-}
-
-function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig }) {
+function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig }) {
   let firstPage = ''
   const pagesMap = {}
   Object.keys(localPagesMap).forEach((pagePath) => {
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
-    if (pageCfg.async) {
-      pagesMap[pagePath] = getAsyncPage(pagePath, pageRequest, pageCfg.async, rnConfig.asyncChunk && rnConfig.asyncChunk.fallback, rnConfig.asyncChunk && rnConfig.asyncChunk.loading)
-    } else {
+    // if (pageCfg.async) {
+    //   pagesMap[pagePath] = `lazy(function(){return import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(function(res){return getComponent(res, {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})})})`
+    // } else {
     // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
-      pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})`
-    }
+    pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})`
+    // }
     if (pagePath === jsonConfig.entryPagePath) {
       firstPage = pagePath
     }
@@ -86,45 +42,16 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig })
 
 function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
   const componentsMap = {}
-  const mpx = loaderContext.getMpx()
   if (localComponentsMap) {
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
-      if (componentCfg.async) {
-        const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
-        if (placeholder) {
-          if (localComponentsMap[placeholder]) {
-            const placeholderCfg = localComponentsMap[placeholder]
-            const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
-            if (placeholderCfg.async) {
-              loaderContext.emitWarning(
-                new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
-              )
-            }
-            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, placeholderRequest)
-          } else if (mpx.globalComponents[placeholder]) {
-            const { queryObj, rawResourcePath } = parseRequest(mpx.globalComponents[placeholder])
-            const placeholderRequest = JSON.stringify(path.resolve(queryObj.context, rawResourcePath))
-            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, placeholderRequest)
-          } else {
-            const tag = `mpx-${placeholder}`
-            if (!isBuildInReactTag(tag)) {
-              loaderContext.emitError(
-                new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component, please check!`)
-              )
-            }
-            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, getMpxComponentRequest(tag))
-          }
-        } else {
-          loaderContext.emitError(
-            new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
-          )
-          componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async)
-        }
-      } else {
-        componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`
-      }
+      // RN中暂不支持异步加载
+      // if (componentCfg.async) {
+      //   componentsMap[componentName] = `lazy(function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res, {displayName: ${JSON.stringify(componentName)}})})})`
+      // } else {
+      componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`
+      // }
     })
   }
   if (builtInComponentsMap) {
@@ -180,7 +107,6 @@ global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
 global.__getAppComponents = function () {
   return ${shallowStringify(componentsMap)}
 }
-global.__preloadRule = ${JSON.stringify(jsonConfig.preloadRule)}
 global.currentInject.getPages = function () {
   return ${shallowStringify(pagesMap)}
 }

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

@@ -1,29 +1,6 @@
-import { ComponentType, ReactNode, Component, Suspense } from 'react'
+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'
-import Animated, { useAnimatedStyle } from 'react-native-reanimated'
-
-type PageWrapper = {
-  children: ReactNode
-}
-
-export const PageWrapper = ({ children }: PageWrapper) => {
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: -0 }],
-    flexBasis: 'auto',
-    flex: 1
-  }))
-
-  return (
-    <Animated.View
-      style={[
-        animatedStyle
-      ]}
-    >
-      {children}
-    </Animated.View>
-  )
-}
 
 const styles = StyleSheet.create({
   container: {
@@ -82,7 +59,7 @@ interface PropsType<T extends AsyncType> {
   props: object
   loading: ComponentType<unknown>
   fallback: ComponentType<unknown>
-  children: (props: any) => ReactNode | ReactNode
+  children: (props: unknown) => ReactNode
 }
 
 interface StateType {
@@ -95,7 +72,7 @@ interface ComponentError extends Error {
   type: 'timeout' | 'fail'
 }
 
-export const DefaultLoading = () => {
+const DefaultLoading = () => {
   return (
     <View style={styles.container}>
       <FastImage
@@ -106,11 +83,11 @@ export const DefaultLoading = () => {
   )
 }
 
-export interface DefaultFallbackProps {
+interface DefaultFallbackProps {
   onReload: () => void
 }
 
-export const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
+const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
   return (
     <View style={styles.container}>
       <Image
@@ -200,16 +177,11 @@ export default class AsyncContainer extends Component<PropsType<AsyncType>, Stat
 
   render () {
     if (this.state.hasError) {
-      if (this.props.type === 'component') {
-        return this.errorFallback
-      } else {
-        return (<PageWrapper>{this.errorFallback}</PageWrapper>)
-      }
+      return this.errorFallback
     } else {
       return (
         <Suspense fallback={this.suspenseFallback} key={this.state.key}>
-          {typeof this.props.children === 'function' ? this.props.children(this.props.props) : this.props.children}
-          {/* {this.props.children(this.props.props)} */}
+          {this.props.children(this.props.props)}
         </Suspense>
       )
     }

package/lib/runtime/components/react/context.ts

@@ -51,14 +51,24 @@ export interface RouteContextValue {
   pageId: number
   navigation: Record<string, any>
 }
+export interface MovableAreaContextValue {
+  width: number
+  height: number
+  scaleArea: boolean
+  onAreaScale?: (scaleInfo: { scale: number }) => void
+  registerMovableView?: (id: string, callbacks: {
+    onScale: (scaleInfo: { scale: number }) => void
+    onScaleEnd?: () => void
+  }) => void
+  unregisterMovableView?: (id: string) => void
+}
 
+export const MovableAreaContext = createContext<MovableAreaContextValue>({ width: 0, height: 0, scaleArea: false })
 export interface StickyContextValue {
   registerStickyHeader: Function,
   unregisterStickyHeader: Function
 }
 
-export const MovableAreaContext = createContext({ width: 0, height: 0 })
-
 export const FormContext = createContext<FormContextValue | null>(null)
 
 export const CheckboxGroupContext = createContext<GroupContextValue | null>(null)

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

@@ -1,19 +1,6 @@
 import { Component, Suspense } from 'react';
 import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
 import FastImage from '@d11/react-native-fast-image';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-export const PageWrapper = ({ children }) => {
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: -0 }],
-        flexBasis: 'auto',
-        flex: 1
-    }));
-    return (<Animated.View style={[
-            animatedStyle
-        ]}>
-      {children}
-    </Animated.View>);
-};
 const styles = StyleSheet.create({
     container: {
         flex: 1,
@@ -63,12 +50,12 @@ const styles = StyleSheet.create({
         textAlign: 'center'
     }
 });
-export const DefaultLoading = () => {
+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>);
 };
-export const DefaultFallback = ({ onReload }) => {
+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>
@@ -143,17 +130,11 @@ export default class AsyncContainer extends Component {
     }
     render() {
         if (this.state.hasError) {
-            if (this.props.type === 'component') {
-                return this.errorFallback;
-            }
-            else {
-                return (<PageWrapper>{this.errorFallback}</PageWrapper>);
-            }
+            return this.errorFallback;
         }
         else {
             return (<Suspense fallback={this.suspenseFallback} key={this.state.key}>
-          {typeof this.props.children === 'function' ? this.props.children(this.props.props) : this.props.children}
-          {/* {this.props.children(this.props.props)} */}
+          {this.props.children(this.props.props)}
         </Suspense>);
         }
     }

package/lib/runtime/components/react/dist/context.js

@@ -1,7 +1,7 @@
 import { createContext } from 'react';
 import { Animated } from 'react-native';
 import { noop } from '@mpxjs/utils';
-export const MovableAreaContext = createContext({ width: 0, height: 0 });
+export const MovableAreaContext = createContext({ width: 0, height: 0, scaleArea: false });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
 export const RadioGroupContext = createContext(null);

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -8,7 +8,7 @@ const globalEventState = {
 const getTouchEvent = (type, event, config) => {
     const { navigation, propsRef, layoutRef } = config;
     const props = propsRef.current;
-    const { top: navigationY = 0 } = navigation?.layout || {};
+    const { y: navigationY = 0 } = navigation?.layout || {};
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -1,33 +1,87 @@
 /**
- * ✘ scale-area
+ * ✔ scale-area
  */
 import { View } from 'react-native';
-import { forwardRef, useRef, useMemo, createElement } from 'react';
+import { forwardRef, useRef, useMemo, useCallback, createElement } from 'react';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import { useSharedValue } from 'react-native-reanimated';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
 import Portal from './mpx-portal';
 const _MovableArea = forwardRef((props, ref) => {
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, 'scale-area': scaleArea = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const movableViewRef = useRef(null);
-    useNodesRef(props, ref, movableViewRef, {
+    const movableAreaRef = useRef(null);
+    const movableViewsValue = useSharedValue({});
+    useNodesRef(props, ref, movableAreaRef, {
         style: normalStyle
     });
+    // 注册/注销 MovableView 的回调
+    const registerMovableView = useCallback((id, callbacks) => {
+        movableViewsValue.value = extendObject(movableViewsValue.value, { [id]: callbacks });
+    }, []);
+    const unregisterMovableView = useCallback((id) => {
+        delete movableViewsValue.value[id];
+    }, []);
+    // 处理区域缩放手势
+    const handleAreaScale = useCallback((scaleInfo) => {
+        'worklet';
+        if (scaleArea) {
+            // 将缩放信息广播给所有注册的 MovableView
+            Object.values(movableViewsValue.value).forEach((callbacks) => {
+                callbacks.onScale && callbacks.onScale(scaleInfo);
+            });
+        }
+    }, [scaleArea]);
+    // 处理区域缩放结束
+    const handleAreaScaleEnd = useCallback(() => {
+        'worklet';
+        if (scaleArea) {
+            // 通知所有注册的 MovableView 缩放结束
+            Object.values(movableViewsValue.value).forEach((callbacks) => {
+                callbacks.onScaleEnd && callbacks.onScaleEnd();
+            });
+        }
+    }, [scaleArea]);
     const contextValue = useMemo(() => ({
         height: normalStyle.height || 10,
-        width: normalStyle.width || 10
-    }), [normalStyle.width, normalStyle.height]);
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
+        width: normalStyle.width || 10,
+        scaleArea,
+        registerMovableView,
+        unregisterMovableView
+    }), [normalStyle.width, normalStyle.height, scaleArea]);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableAreaRef });
+    // 创建缩放手势
+    const scaleGesture = useMemo(() => {
+        if (!scaleArea)
+            return null;
+        return Gesture.Pinch()
+            .onUpdate((e) => {
+            'worklet';
+            handleAreaScale(e);
+        })
+            .onEnd(() => {
+            'worklet';
+            handleAreaScaleEnd();
+        });
+    }, [scaleArea]);
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
-        ref: movableViewRef
+        ref: movableAreaRef
     }), [], { layoutRef });
     let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     })));
+    // 如果启用了 scale-area，包装一个 GestureDetector
+    if (scaleArea && scaleGesture) {
+        movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(GestureDetector, { gesture: scaleGesture }, createElement(View, innerProps, wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current
+        }))));
+    }
     if (hasPositionFixed) {
         movableComponent = createElement(Portal, null, movableComponent);
     }