@qlover/create-app 0.1.15 → 0.1.16

package/templates/react-app/public/locales/en/common.json

@@ -2,5 +2,9 @@
   "404.notComponent": "Component not found",
   "404.notPage": "Page not found",
   "500.title": "Server Error",
-  "header.theme.label": "Switch Theme"
-}
+  "header.theme.label": "Switch Theme",
+  "err.ioc.not.implemented": "IOC not implemented",
+  "err.local.no.user.token": "Local no user token",
+  "err.global.no.window": "Global no window",
+  "err.within.page.provider": "Must be used in PageProvider"
+}

package/templates/react-app/public/locales/zh/common.json

@@ -2,6 +2,9 @@
   "404.notComponent": "组件不存在",
   "404.notPage": "页面不存在",
   "500.title": "服务器错误",
-  "header.theme.label": "切换主题"
-}
-
+  "header.theme.label": "切换主题",
+  "err.ioc.not.implemented": "IOC 未实现",
+  "err.local.no.user.token": "本地未找到 user token",
+  "err.global.no.window": "全局未找到 window",
+  "err.within.page.provider": "必须在 PageProvider 中使用"
+}

package/templates/react-app/src/App.tsx

@@ -1,10 +1,10 @@
 import '@/uikit/styles/css/index.css';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { lazy, useMemo } from 'react';
-import { RouterLoader } from '@lib/router-loader/RouterLoader';
-import appConfig from '@config/app.router.json';
-import { RouterRenderComponent } from './components/RouterRenderComponent';
-import { PagesMaps } from './base/types/Page';
+import { RouterRenderComponent } from './uikit/components/RouterRenderComponent';
+import { IOC } from './core/IOC';
+import { RouterController } from './uikit/controllers/RouterController';
+import { RouterLoader, type ComponentValue } from '@/base/cases/router-loader';
 
 function getAllPages() {
   const modules = import.meta.glob('./pages/**/*.tsx');
@@ -17,7 +17,7 @@ function getAllPages() {
         }>
       );
     return acc;
-  }, {} as PagesMaps);
+  }, {} as ComponentValue);
 }
 
 const routerLoader = new RouterLoader({
@@ -27,9 +27,9 @@ const routerLoader = new RouterLoader({
 
 function App() {
   const routerBase = useMemo(() => {
-    const routes = appConfig.base.routes.map((route) =>
-      routerLoader.toRoute(route)
-    );
+    const routes = IOC(RouterController)
+      .getRoutes()
+      .map((route) => routerLoader.toRoute(route));
     const router = createBrowserRouter(routes);
     return router;
   }, []);

package/templates/react-app/src/base/apis/AiApi.ts

@@ -0,0 +1,55 @@
+import AppConfig from '@/core/AppConfig';
+import {
+  FetchURLPlugin,
+  RequestAdapterFetch,
+  RequestScheduler
+} from '@qlover/fe-corekit';
+import {
+  type BootstrapExecutorPlugin,
+  RequestCommonPlugin
+} from '@qlover/corekit-bridge';
+import { RequestLogger } from '../cases/RequestLogger';
+import { IOCIdentifier } from '@/core/IOC';
+
+const apiApiAdapter = new RequestAdapterFetch({
+  baseURL: AppConfig.aiApiBaseUrl
+});
+
+// 使用 RequestScheduler
+const apiApi = new RequestScheduler(apiApiAdapter);
+
+// 直接使用 adapter
+// const apiApi = apiApiAdapter;
+
+export const AiApiBootstarp: BootstrapExecutorPlugin = {
+  pluginName: 'AiApiBootstarp',
+  onBefore({ parameters: { ioc } }) {
+    apiApiAdapter.usePlugin(new FetchURLPlugin());
+    apiApiAdapter.usePlugin(
+      new RequestCommonPlugin({
+        tokenPrefix: AppConfig.aiApiTokenPrefix,
+        token: AppConfig.aiApiToken
+      })
+    );
+    apiApiAdapter.usePlugin(ioc.get(IOCIdentifier.ApiMockPlugin));
+    apiApiAdapter.usePlugin(ioc.get(RequestLogger));
+  }
+};
+
+export function aiHello(data: {
+  messages: { role: string; content: string }[];
+}) {
+  return apiApi.request<
+    typeof data,
+    {
+      id: string;
+      object: string;
+      created: number;
+      choices: { message: { role: string; content: string } }[];
+    }
+  >({
+    url: '/chat/completions',
+    method: 'POST',
+    data
+  });
+}

package/templates/react-app/src/base/apis/feApi/FeApi.ts

@@ -1,51 +1,20 @@
-import {
-  RequestAdapterFetch,
-  RequestAdapterConfig,
-  RequestScheduler,
-  FetchAbortPlugin,
-  RequestAdapterFetchConfig
-} from '@qlover/fe-utils';
-import {
-  FeApiGetIpInfo,
-  FeApiGetRandomUser,
-  FeApiGetUserInfo,
-  FeApiLogin
-} from './FeApiType';
+import { RequestAdapterFetch, RequestScheduler } from '@qlover/fe-corekit';
+import { FeApiGetIpInfo } from './FeApiType';
+import { inject, injectable } from 'inversify';
+import { FeApiAdapter } from './FeApiAdapter';
+import { FeApiConfig } from './FeApiBootstarp';
 
-export class FeApi extends RequestScheduler<RequestAdapterConfig> {
-  private abortPlugin: FetchAbortPlugin;
-
-  constructor({
-    abortPlugin,
-    config
-  }: {
-    abortPlugin: FetchAbortPlugin;
-    config?: Partial<RequestAdapterFetchConfig>;
-  }) {
-    super(new RequestAdapterFetch(config));
-    this.abortPlugin = abortPlugin;
+@injectable()
+export class FeApi extends RequestScheduler<FeApiConfig> {
+  constructor(@inject(FeApiAdapter) adapter: RequestAdapterFetch) {
+    super(adapter);
   }
 
-  stop(config: RequestAdapterConfig): void {
-    this.abortPlugin.abort(config);
-  }
+  stop(_config: FeApiConfig): void {}
 
   async getIpInfo(): Promise<FeApiGetIpInfo['response']> {
-    return this.get('http://ip-api.com/json/');
-  }
-
-  async getRandomUser(): Promise<FeApiGetRandomUser['response']> {
-    return this.get('https://randomuser.me/api/');
-  }
-
-  async getUserInfo(): Promise<FeApiGetUserInfo['response']> {
-    return this.get('/api/userinfo');
-  }
-
-  async login(params: FeApiLogin['request']): Promise<FeApiLogin['response']> {
-    return this.post('/api/login', {
-      // FIXME: RequestAdapterResponse response type error
-      data: params as unknown as FeApiLogin['response']['data']
-    });
+    return this.get('http://ip-api.com/json/') as unknown as Promise<
+      FeApiGetIpInfo['response']
+    >;
   }
 }

package/templates/react-app/src/base/apis/feApi/FeApiAdapter.ts

@@ -0,0 +1,14 @@
+import { IOCIdentifier } from '@/core/IOC';
+import { RequestAdapterFetch } from '@qlover/fe-corekit';
+import { inject, injectable } from 'inversify';
+import { AppConfigImpl } from '@/core/AppConfig';
+
+@injectable()
+export class FeApiAdapter extends RequestAdapterFetch {
+  constructor(@inject(IOCIdentifier.AppConfig) appConfig: AppConfigImpl) {
+    super({
+      responseType: 'json',
+      baseURL: appConfig.feApiBaseUrl
+    });
+  }
+}

package/templates/react-app/src/base/apis/feApi/FeApiBootstarp.ts

@@ -0,0 +1,67 @@
+import type {
+  RequestAdapterConfig,
+  RequestAdapterResponse,
+  RequestTransactionInterface
+} from '@qlover/fe-corekit';
+import { FetchURLPlugin } from '@qlover/fe-corekit';
+import {
+  type BootstrapContext,
+  type BootstrapExecutorPlugin,
+  type ApiMockPluginConfig,
+  ApiPickDataPlugin
+} from '@qlover/corekit-bridge';
+import { FeApi } from './FeApi';
+import { IOCIdentifier } from '@/core/IOC';
+import { RequestLogger } from '@/base/cases/RequestLogger';
+
+/**
+ * FeApiConfig
+ *
+ * @description
+ * FeApiConfig is the config for the FeApi.
+ *
+ * extends:
+ */
+export interface FeApiConfig<Request = unknown>
+  extends RequestAdapterConfig<Request>,
+    ApiMockPluginConfig {}
+
+/**
+ * FeApiResponse
+ *
+ * @description
+ * FeApiResponse is the response for the FeApi.
+ *
+ * extends:
+ * - RequestAdapterResponse<Request, Response>
+ */
+export interface FeApiResponse<Request = unknown, Response = unknown>
+  extends RequestAdapterResponse<Request, Response> {}
+
+/**
+ * FeApi common transaction
+ *
+ * FIXME: maybe we can add data to RequestTransactionInterface
+ *
+ * add data property
+ */
+export interface FeApiTransaction<Request = unknown, Response = unknown>
+  extends RequestTransactionInterface<
+    FeApiConfig<Request>,
+    FeApiResponse<Request, Response>['data']
+  > {
+  data: FeApiConfig<Request>['data'];
+}
+
+export class FeApiBootstarp implements BootstrapExecutorPlugin {
+  readonly pluginName = 'FeApiBootstarp';
+
+  onBefore({ parameters: { ioc } }: BootstrapContext): void {
+    ioc
+      .get<FeApi>(FeApi)
+      .usePlugin(new FetchURLPlugin())
+      .usePlugin(ioc.get(IOCIdentifier.FeApiCommonPlugin))
+      .usePlugin(ioc.get(RequestLogger))
+      .usePlugin(ioc.get(ApiPickDataPlugin));
+  }
+}

package/templates/react-app/src/base/apis/feApi/FeApiType.ts

@@ -1,10 +1,6 @@
-import { RequestAdapterResponse } from '@qlover/fe-utils';
+import { FeApiTransaction } from './FeApiBootstarp';
 
-export type FeApiType<Request, Response> = {
-  request: Request;
-  response: RequestAdapterResponse<Request, Response>;
-};
-export type FeApiGetIpInfo = FeApiType<
+export type FeApiGetIpInfo = FeApiTransaction<
   undefined,
   {
     status: string;
@@ -23,32 +19,3 @@ export type FeApiGetIpInfo = FeApiType<
     query: string;
   }
 >;
-
-export type FeApiGetRandomUser = FeApiType<
-  undefined,
-  {
-    results: unknown[];
-    info: {
-      seed: string;
-      results: number;
-      page: number;
-      version: string;
-    };
-  }
->;
-
-export type FeApiGetUserInfo = FeApiType<
-  string,
-  {
-    name: string;
-    email: string;
-    picture: string;
-  }
->;
-
-export type FeApiLogin = FeApiType<
-  { username: string; password: string },
-  {
-    token: string;
-  }
->;

package/templates/react-app/src/base/apis/userApi/UserApi.ts

@@ -0,0 +1,64 @@
+import {
+  FetchAbortPlugin,
+  RequestAdapterFetch,
+  RequestTransaction
+} from '@qlover/fe-corekit';
+import {
+  GetIpInfoTransaction,
+  UserApiGetUserInfoTransaction,
+  UserApiLoginTransaction,
+  UserApiTestApiCatchResultTransaction
+} from './UserApiType';
+import { inject, injectable } from 'inversify';
+import { UserApiAdapter } from './UserApiAdapter';
+import { UserApiConfig } from './UserApiBootstarp';
+
+/**
+ * UserApi
+ *
+ * @description
+ * UserApi is a client for the user API.
+ *
+ */
+@injectable()
+export class UserApi extends RequestTransaction<UserApiConfig> {
+  constructor(
+    @inject(FetchAbortPlugin) private abortPlugin: FetchAbortPlugin,
+    @inject(UserApiAdapter) adapter: RequestAdapterFetch
+  ) {
+    super(adapter);
+  }
+
+  stop(request: UserApiConfig): Promise<void> | void {
+    this.abortPlugin.abort(request);
+  }
+
+  async getRandomUser(): Promise<GetIpInfoTransaction['response']> {
+    return this.request<GetIpInfoTransaction>({
+      url: 'https://randomuser.me/api/',
+      method: 'GET',
+      disabledMock: true
+    });
+  }
+
+  async testApiCatchResult(): Promise<
+    UserApiTestApiCatchResultTransaction['response']
+  > {
+    return this.request<UserApiTestApiCatchResultTransaction>({
+      url: 'https://randomuser.me/api/?_name=ApiCatchResult',
+      method: 'GET',
+      disabledMock: true,
+      openApiCatch: true
+    });
+  }
+
+  async getUserInfo(): Promise<UserApiGetUserInfoTransaction['response']> {
+    return this.get<UserApiGetUserInfoTransaction>('/api/userinfo');
+  }
+
+  async login(
+    params: UserApiLoginTransaction['data']
+  ): Promise<UserApiLoginTransaction['response']> {
+    return this.post<UserApiLoginTransaction>('/api/login', params);
+  }
+}

package/templates/react-app/src/base/apis/userApi/UserApiAdapter.ts

@@ -0,0 +1,14 @@
+import { IOCIdentifier } from '@/core/IOC';
+import { RequestAdapterFetch } from '@qlover/fe-corekit';
+import { inject, injectable } from 'inversify';
+import { AppConfigImpl } from '@/core/AppConfig';
+
+@injectable()
+export class UserApiAdapter extends RequestAdapterFetch {
+  constructor(@inject(IOCIdentifier.AppConfig) appConfig: AppConfigImpl) {
+    super({
+      responseType: 'json',
+      baseURL: appConfig.feApiBaseUrl
+    });
+  }
+}

package/templates/react-app/src/base/apis/userApi/UserApiBootstarp.ts

@@ -0,0 +1,75 @@
+import {
+  FetchAbortPlugin,
+  RequestAdapterConfig,
+  RequestAdapterResponse,
+  RequestTransactionInterface
+} from '@qlover/fe-corekit';
+import { IOC, IOCIdentifier } from '@/core/IOC';
+import { RequestLogger } from '@/base/cases/RequestLogger';
+import { FetchURLPlugin } from '@qlover/fe-corekit';
+import {
+  type BootstrapContext,
+  type BootstrapExecutorPlugin,
+  type ApiMockPluginConfig,
+  type ApiCatchPluginConfig,
+  type ApiCatchPluginResponse
+} from '@qlover/corekit-bridge';
+import { UserApi } from './UserApi';
+
+/**
+ * UserApiConfig
+ *
+ * @description
+ * UserApiConfig is the config for the UserApi.
+ *
+ * extends:
+ * - ApiMockPluginConfig
+ * - ApiCatchPluginConfig
+ */
+export interface UserApiConfig<Request = unknown>
+  extends RequestAdapterConfig<Request>,
+    ApiMockPluginConfig,
+    ApiCatchPluginConfig {}
+
+/**
+ * UserApiResponse
+ *
+ * @description
+ * UserApiResponse is the response for the UserApi.
+ *
+ * extends:
+ * - RequestAdapterResponse<Request, Response>
+ */
+export interface UserApiResponse<Request = unknown, Response = unknown>
+  extends RequestAdapterResponse<Request, Response>,
+    ApiCatchPluginResponse {}
+
+/**
+ * UserApi common transaction
+ *
+ * FIXME: maybe we can add data to RequestTransactionInterface
+ *
+ * add data property
+ */
+export interface UserApiTransaction<Request = unknown, Response = unknown>
+  extends RequestTransactionInterface<
+    UserApiConfig<Request>,
+    UserApiResponse<Request, Response>
+  > {
+  data: UserApiConfig<Request>['data'];
+}
+
+export class UserApiBootstarp implements BootstrapExecutorPlugin {
+  readonly pluginName = 'UserApiBootstarp';
+
+  onBefore({ parameters: { ioc } }: BootstrapContext): void {
+    ioc
+      .get<UserApi>(UserApi)
+      .usePlugin(new FetchURLPlugin())
+      .usePlugin(IOC.get(IOCIdentifier.FeApiCommonPlugin))
+      .usePlugin(IOC.get(IOCIdentifier.ApiMockPlugin))
+      .usePlugin(IOC.get(RequestLogger))
+      .usePlugin(IOC.get(FetchAbortPlugin))
+      .usePlugin(IOC.get(IOCIdentifier.ApiCatchPlugin));
+  }
+}

package/templates/react-app/src/base/apis/userApi/UserApiType.ts

@@ -0,0 +1,52 @@
+import { UserApiTransaction } from './UserApiBootstarp';
+
+export type GetIpInfoTransaction = UserApiTransaction<
+  undefined,
+  {
+    status: string;
+    country: string;
+    countryCode: string;
+    region: string;
+    regionName: string;
+    city: string;
+    zip: string;
+    lat: number;
+    lon: number;
+    timezone: string;
+    isp: string;
+    org: string;
+    as: string;
+    query: string;
+  }
+>;
+
+export type UserApiGetRandomUser = UserApiTransaction<
+  undefined,
+  {
+    results: unknown[];
+    info: {
+      seed: string;
+      results: number;
+      page: number;
+      version: string;
+    };
+  }
+>;
+
+export type UserApiGetUserInfoTransaction = UserApiTransaction<
+  string,
+  {
+    name: string;
+    email: string;
+    picture: string;
+  }
+>;
+
+export type UserApiLoginTransaction = UserApiTransaction<
+  { username: string; password: string },
+  {
+    token: string;
+  }
+>;
+
+export type UserApiTestApiCatchResultTransaction = UserApiGetRandomUser;

package/templates/react-app/src/base/cases/RequestLogger.ts

@@ -0,0 +1,71 @@
+import { IOCIdentifier } from '@/core/IOC';
+import {
+  type ExecutorPlugin,
+  type ExecutorContext,
+  type RequestAdapterFetchConfig,
+  type RequestAdapterResponse,
+  Logger
+} from '@qlover/fe-corekit';
+import {
+  type ApiCatchPluginConfig,
+  type ApiCatchPluginResponse
+} from '@qlover/corekit-bridge';
+import { injectable, inject } from 'inversify';
+
+@injectable()
+export class RequestLogger
+  implements ExecutorPlugin<RequestAdapterFetchConfig>
+{
+  readonly pluginName = 'RequestLogger';
+
+  constructor(@inject(IOCIdentifier.Logger) public logger: Logger) {}
+
+  onBefore(context: ExecutorContext<RequestAdapterFetchConfig<unknown>>): void {
+    this.logger.log(
+      `%c[Request before]%c [${new Date().toLocaleString()}] ${context.parameters.method} ${context.parameters.url}`,
+      'color: #0ff;',
+      'color: inherit;',
+      context.parameters
+    );
+  }
+
+  async onSuccess({
+    parameters,
+    returnValue
+  }: ExecutorContext<
+    RequestAdapterFetchConfig & ApiCatchPluginConfig
+  >): Promise<void> {
+    const _returnValue = returnValue as RequestAdapterResponse &
+      ApiCatchPluginResponse;
+
+    // If the apiCatchResult is not null, it means that the error has been caught
+    // from `ApiCatchPlugin`
+    if (_returnValue.apiCatchResult) {
+      this.loggerError(parameters, _returnValue.apiCatchResult);
+      return;
+    }
+
+    this.logger.log(
+      `%c[Request success]%c [${new Date().toLocaleString()}] ${parameters.method} ${parameters.url}`,
+      'color: #0f0;',
+      'color: inherit;',
+      _returnValue
+    );
+  }
+
+  onError({
+    parameters,
+    error
+  }: ExecutorContext<RequestAdapterFetchConfig>): void {
+    this.loggerError(parameters, error);
+  }
+
+  loggerError(config: RequestAdapterFetchConfig, error: unknown): void {
+    this.logger.log(
+      `%c[Request error]%c [${new Date().toLocaleString()}] ${config.method} ${config.url}`,
+      'color: #f00;',
+      'color: inherit;',
+      error
+    );
+  }
+}

package/templates/react-app/src/base/cases/RequestStatusCatcher.ts

@@ -0,0 +1,41 @@
+import type { RequestCatcherInterface } from '@/base/port/RequestCatcherInterface';
+import { IOCIdentifier } from '@/core/IOC';
+import type { Logger, RequestAdapterResponse } from '@qlover/fe-corekit';
+import { inject, injectable } from 'inversify';
+
+@injectable()
+export class RequestStatusCatcher
+  implements RequestCatcherInterface<RequestAdapterResponse>
+{
+  constructor(
+    @inject(IOCIdentifier.Logger)
+    private readonly logger: Logger
+  ) {}
+  /**
+   * default handler
+   * @override
+   */
+  default(context: RequestAdapterResponse<unknown, unknown>): void {
+    this.logger.warn(`RequestStatusCatcher default handler`, context);
+  }
+
+  /**
+   * handler
+   * @override
+   */
+  handler(context: RequestAdapterResponse<unknown, unknown>): void {
+    const { status } = context;
+
+    const _handler = this[`case${status}` as keyof RequestStatusCatcher];
+
+    if (typeof _handler === 'function') {
+      return _handler.call(this, context);
+    }
+
+    return this.default(context);
+  }
+
+  case200(_context: RequestAdapterResponse<unknown, unknown>): void {
+    // this.logger.info(`RequestStatusCatcher case200 handler`, context);
+  }
+}

package/templates/react-app/src/base/cases/appError/AppError.ts

@@ -0,0 +1,13 @@
+import { ExecutorError } from '@qlover/fe-corekit';
+
+/**
+ * 统一当前项目中开发的错误
+ */
+export class AppError extends ExecutorError {
+  constructor(
+    public readonly id: string,
+    public readonly source?: string | Error
+  ) {
+    super(id, source);
+  }
+}

package/templates/react-app/{lib/router-loader/RouterLoader.ts → src/base/cases/router-loader/index.ts}

@@ -2,7 +2,7 @@ import { RouteObject } from 'react-router-dom';
 import isString from 'lodash/isString';
 import type { ComponentType, LazyExoticComponent, ReactNode } from 'react';
 
-type ComponentValue = Record<string, () => unknown>;
+export type ComponentValue = Record<string, () => unknown>;
 
 type RouteComponentType<T = unknown> =
   | ComponentType<T>

package/templates/react-app/src/base/port/ApiTransactionInterface.ts

@@ -0,0 +1,7 @@
+/**
+ * Use for describe the unified format of Api request
+ */
+export interface ApiTransactionInterface<Request, Response> {
+  request: Request;
+  response: Response;
+}

package/templates/react-app/src/base/port/InversifyIocInterface.ts

@@ -1,4 +1,4 @@
-import type { IOCRegisterInterface } from '@lib/bootstrap';
+import type { IOCRegisterInterface } from '@qlover/corekit-bridge';
 import type { Container } from 'inversify';
 
 export type InversifyRegisterContainer = Container;

package/templates/react-app/src/base/port/LoginInterface.ts

@@ -0,0 +1,4 @@
+export interface LoginInterface {
+  login(params: { username: string; password: string }): Promise<unknown>;
+  logout(): void;
+}