react-app-provider

import React from 'react';
import { render } from 'react-dom';
import { createAppProvider } from 'react-app-provider';

const [AppRoot, useAppContext] = createAppProvider();

render((
  <React.StrictMode>
    <AppRoot>
      {/* 你的组件加载入口 */}
    </AppRoot>
  </React.StrictMode>
), document.getElementById('root'));

import { createAppProvider, AppInterface } from 'react-app-provider';

export class YourApp implements AppInterface {
  async onLaunch(): Promise<void> {
    await fetch('http://yourapi/app_launch').then(() => {
      // 程序启动前置
    });
  }
}

export const [AppRoot, useAppContext] = createAppProvider<YourApp>();

import React from 'react';
import { render } from 'react-dom';
import { AppRoot, YourApp } from './App.tsx';

render((
  <React.StrictMode>
    <AppRoot app={new YourApp()}>
      {/* 你的组件加载入口 */}
    </AppRoot>
  </React.StrictMode>
), document.getElementById('root'));

import { createAppProvider, AppInterface } from 'react-app-provider';

export const YourApp: AppInterface = {} as const;

export const [AppRoot, useAppContext] = createAppProvider<typeof YourApp>();

export const [
  AppRoot,       // 应用根节点组件
  useAppContext, // 获取 AppContext 的钩子
  AppConsumer,   // AppContext.Consumer 实际上不怎么用的上
] = createAppProvider<YourApp>();

AppRoot
└─AppContext
   └─ErrorFallback
      └─LoaderFallback
         └─children => your code entry

/**
 * 应用程序接口类
 *
 * 该接口类声明了应用程序（管理）实例的接口定义，声明应用程序组件需要那些接口。
 *
 * 应用程序（管理）实例，可以是一个实现了 AppInterface 的类实例，也可以是一个 Object 结构。
 */
export interface AppInterface {

  /**
   * 应用程序启动接口，运行在 App 组件 componentDidMount
   */
  onLaunch?(): void | Promise<void>;

  /**
   * 当组件渲染接收到错误时的处理接口
   *
   * @param error - 错误实例
   */
  onError?(error: ErrorLike): void;

  /**
   * 当错误发生时，App 渲染是否切换至 ErrorFallback
   *
   * @param error - 错误实例
   */
  shouldErrorFallback?(error: ErrorLike): boolean;

  /**
   * 错误异常回退组件声明，不指定，则使用默认的 ErrorDisplay
   *
   * 可以是一个 Element 实例（自动注入 Error 实例），也可以是一个组件
   */
  readonly ErrorFallback?: ErrorFallbackComponent;

  /**
   * 应用预备中的加载器
   * 可以是一个 Element 实例（自动注入 ready），也可以是一个组件
   */
  readonly Loader?: LoaderComponent;

  // fallback
  [key: string]: unknown;
}

export type AppRootProps<App extends AppInterface> = {
  /**
   * 传入的应用程序实例
   */
  app?: App,
  /**
   * 应用启动接口
   */
  onLaunch?: () => void | Promise<void>,
  /**
   * 错误异常处理接口
   * @param error - 错误实例
   */
  onError?: (error?: ErrorLike) => void,
  /**
   * 错误异常回退组件声明
   * 可以是一个 Element 实例（自动注入 Error 实例），也可以是一个组件
   */
  errorFallback?: ErrorFallbackComponent,
  /**
   * 错误发生时，是否回退，默认值为 `true`
   */
  shouldErrorFallback?: boolean | ((error: ErrorLike) => boolean),
  /**
   * 应用程序准备中的加载器
   */
  loader?: LoaderComponent,
}

import { AppInterface, createAppProvider } from 'react-app-provider';

class AppService implements AppInterface {
  onLaunch(): void {
    // 小程序的 onLaunch 是无法被阻塞的
  }
}

export const [App, useAppContext] = createAppProvider(new AppService);

export const useApp = () => {
  const { app } = useAppContext();
  return app;
};

import { App } from './services/AppService';

export default App;

import { createAppProvider } from 'react-app-provider';

const Loader: React.FC = () => {
  return (
    <SafeAreaView style={{ backgroundColor: Colors.darker }}>
      <View style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: 'white' }}>App Loading...</Text>
      </View>
    </SafeAreaView>
  );
};

const [AppRoot, useAppContext] = createAppProvider({
  onLaunch(): Promise<void> {
    return new Promise<void>(resolve => {
      setTimeout(() => {
        resolve();
      }, 3000);
    });
  },
  Loader,
});

const App = () => {
  return (
    <AppRoot>
      <SafeAreaView>
        {/* ...... */}
      </SafeAreaView>
    </AppRoot>
  )
}

export default App;

import React, { ComponentType, createElement } from 'react';
import { isValidElementType } from 'react-is';
import { useLocation } from 'react-router-dom';
import { SetupPageProps, ErrorBoundary, ErrorFallback } from 'react-app-provider';
import { setupPage } from './setupPage';

// 要注入到页面的属性，
// 比如你的应用环境使用了 react-router-dom，你可能希望为每个页面注入 path, query 两个参数
type YourAppBasePageProps = {
  path: string,
  query: URLSearchParams,
}

// 你的页面初始化时，给定的一些额外的配置属性
type YourAppPageInitOptions = {
  
}

// 这里构建你的应用程序的基准页面，不一定非要用 class 模式，这里只是为了捕获页面错误
class YourAppBasePage extends ErrorBoundary<SetupPageProps<YourAppBasePageProps>> {
  state = {
    error: undefined,
  }

  render() {
    return (
      <ErrorFallback error={this.state.error}>
        {isValidElementType(render) ? createElement(render, props) : null}
      </ErrorFallback>
    );
  }
}

// 这里得到一个 page 函数，用来包装你既有的 Page 组件。
export const page = setupPage(
  (opts?: YourAppPageInitOptions): YourAppBasePageProps => {
    const { pathname, search } = useLocation();
    const query = React.useMemo(() => new URLSearchParams(search), [search]);
    return { path: pathname, query };
  },
  YourAppBasePage
);

// 你原来的首页，可以不去改变他
const IndexPage = () => {
  return (
    <div>
      {/* 首页的代码 */}
    </div>
  );
};

// 页面初始化的配置，非必要
const pageOpts = {};

export default page(IndexPage, pageOpts);

pnpm add react-app-provider

--------------------|---------|----------|---------|---------|-------------------
File                | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------|---------|----------|---------|---------|-------------------
All files           |     100 |       96 |     100 |     100 |                  
 AppRoot.tsx        |     100 |    94.73 |     100 |     100 | 135,138          
 ErrorBoundary.tsx  |     100 |      100 |     100 |     100 |                  
 ErrorFallback.tsx  |     100 |      100 |     100 |     100 |                  
 LoaderFallback.tsx |     100 |    88.88 |     100 |     100 | 19               
 setupPage.tsx      |     100 |      100 |     100 |     100 |                  
--------------------|---------|----------|---------|---------|-------------------