@mpxjs/webpack-plugin 2.10.6 → 2.10.7-beta.2

package/lib/react/script-helper.js

@@ -3,30 +3,74 @@ 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 getAsyncChunkName (chunkName) {
-//   if (chunkName && typeof chunkName !== 'boolean') {
-//     return `/* webpackChunkName: "${chunkName}" */`
-//   }
-//   return ''
-// }
+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 buildPagesMap ({ localPagesMap, loaderContext, jsonConfig }) {
+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 }) {
   let firstPage = ''
   const pagesMap = {}
   Object.keys(localPagesMap).forEach((pagePath) => {
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
-    // 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 {
+    if (pageCfg.async) {
+      pagesMap[pagePath] = getAsyncPage(pagePath, pageRequest, pageCfg.async, rnConfig.asyncChunk && rnConfig.asyncChunk.fallback, rnConfig.asyncChunk && rnConfig.asyncChunk.loading)
+    } 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
     }
@@ -42,16 +86,45 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig }) {
 
 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)
-      // 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 (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)}})`
+      }
     })
   }
   if (builtInComponentsMap) {
@@ -107,6 +180,7 @@ 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

@@ -0,0 +1,217 @@
+import { ComponentType, ReactNode, 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'
+
+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: {
+    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: any) => ReactNode | ReactNode
+}
+
+interface StateType {
+  hasError: boolean,
+  key: number
+}
+
+interface ComponentError extends Error {
+  request?: string
+  type: 'timeout' | 'fail'
+}
+
+export 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 interface DefaultFallbackProps {
+  onReload: () => void
+}
+
+export 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) {
+      if (this.props.type === 'component') {
+        return this.errorFallback
+      } else {
+        return (<PageWrapper>{this.errorFallback}</PageWrapper>)
+      }
+    } 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)} */}
+        </Suspense>
+      )
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+import { useState, ComponentType, useEffect, useCallback, useRef } from 'react'
+import { DefaultFallback, DefaultLoading, PageWrapper } from './AsyncContainer'
+import type { DefaultFallbackProps } from './AsyncContainer'
+
+const asyncChunkMap = new Map()
+
+interface props {
+  type: 'component' | 'page'
+  chunkName: string
+  request: string
+  props: any,
+  loading: ComponentType<unknown>
+  fallback: ComponentType<unknown>
+  getChildren: () => Promise<unknown>
+}
+
+const AsyncSuspense: React.FC<props> = ({ type, props, chunkName, request, loading, fallback, getChildren }) => {
+  const [status, setStatus] = useState('pending')
+  const loaded = asyncChunkMap.has(request)
+  const [, setKey] = useState(0)
+  const chunkPromise = useRef<null | Promise<unknown>>(null)
+
+  const reloadPage = useCallback(() => {
+    setKey((preV) => preV + 1)
+    console.log('[mpxAsyncSuspense]: reload page')
+    setStatus('pending')
+  }, [])
+
+  useEffect(() => {
+    if (!loaded && status === 'pending') {
+      // todo 清楚副作用？
+      console.log('the current :', chunkPromise.current)
+      chunkPromise.current!
+        .then((m: any) => {
+          console.log('[mpxAsyncSuspense]: load sucess')
+          asyncChunkMap.set(request, m.__esModule ? m.default : m)
+          setStatus('loaded')
+        })
+        .catch((e) => {
+          if (type === 'component') {
+            console.log(11111, e)
+            global.onLazyLoadError({
+              type: 'subpackage',
+              subpackage: [chunkName],
+              errMsg: `loadSubpackage: ${e.type}`
+            })
+          }
+          console.log('[mpxAsyncSuspense]: load eror', e)
+          chunkPromise.current = null
+          setStatus('error')
+        })
+    }
+  })
+
+  if (loaded) {
+    const Comp = asyncChunkMap.get(request)
+    return <Comp {...props}></Comp>
+  } else if (status === 'error') {
+    console.log('the status is:', status)
+    if (type === 'page') {
+      const Fallback = fallback as ComponentType<DefaultFallbackProps> || DefaultFallback
+      return <><PageWrapper><Fallback onReload={reloadPage}></Fallback></PageWrapper></>
+    } else {
+      const Fallback = loading
+      return <Fallback {...props}></Fallback>
+    }
+  } else {
+    if (!chunkPromise.current) {
+      chunkPromise.current = getChildren()
+    }
+    if (type === 'page') {
+      const Fallback = loading || DefaultLoading
+      return <PageWrapper><Fallback /></PageWrapper>
+    } else {
+      const Fallback = loading
+      return <Fallback {...props}></Fallback>
+    }
+  }
+}
+
+export default AsyncSuspense

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

@@ -1,5 +1,6 @@
 import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
+import { NativeSyntheticEvent, Animated } from 'react-native'
+import { noop } from '@mpxjs/utils'
 
 export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
@@ -42,7 +43,8 @@ export interface PortalContextValue {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any> | null
+  gestureRef: React.RefObject<any> | null,
+  scrollOffset: Animated.Value
 }
 
 export interface RouteContextValue {
@@ -50,6 +52,11 @@ export interface RouteContextValue {
   navigation: Record<string, any>
 }
 
+export interface StickyContextValue {
+  registerStickyHeader: Function,
+  unregisterStickyHeader: Function
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -72,6 +79,8 @@ export const SwiperContext = createContext({})
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
-export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null, scrollOffset: new Animated.Value(0) })
 
 export const PortalContext = createContext<PortalContextValue>(null as any)
+
+export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })

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

@@ -0,0 +1,160 @@
+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,
+        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'
+    }
+});
+export 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 }) => {
+    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) {
+            if (this.props.type === 'component') {
+                return this.errorFallback;
+            }
+            else {
+                return (<PageWrapper>{this.errorFallback}</PageWrapper>);
+            }
+        }
+        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)} */}
+        </Suspense>);
+        }
+    }
+}