@qlover/create-app 0.1.15 → 0.1.17

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;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * RequestCatcherInterface
+ *
+ * @description
+ * RequestCatcherInterface is a interface that catches the request error
+ *
+ */
+export interface RequestCatcherInterface<Context> {
+  handler(context: Context): void;
+
+  default(context: Context): void;
+}

package/templates/react-app/src/{services → base/services}/I18nService.ts

@@ -3,23 +3,28 @@ import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import HttpApi from 'i18next-http-backend';
 import merge from 'lodash/merge';
-import { i18nConfig, I18nServiceLocale } from '@config/i18n';
-import type { BootstrapExecutorPlugin } from '@lib/bootstrap';
+import i18nConfig from '@config/i18n';
+import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
 
 const { supportedLngs, fallbackLng } = i18nConfig;
 
+export type I18nServiceLocale = (typeof supportedLngs)[number];
+
 export class I18nService implements BootstrapExecutorPlugin {
   readonly pluginName = 'I18nService';
 
   constructor(private pathname: string) {}
 
   onBefore(): void {
+    const debug = false;
+
     i18n
       .use(HttpApi)
       .use(LanguageDetector)
       .use(initReactI18next)
       .init(
         merge({}, i18nConfig, {
+          debug,
           detection: {
             order: ['pathLanguageDetector', 'navigator'], // use custom detector
             caches: []

package/templates/react-app/src/{services/processer → base/services}/ProcesserService.ts

@@ -1,16 +1,15 @@
-import { AsyncExecutor, ExecutorPlugin, Logger } from '@qlover/fe-utils';
-
-export interface ProcesserServiceOptions {
-  logger: Logger;
-}
+import { AsyncExecutor, ExecutorPlugin, Logger } from '@qlover/fe-corekit';
+import { IOCIdentifier } from '@/core/IOC';
+import { injectable, inject } from 'inversify';
 
+@injectable()
 export class ProcesserService {
-  private executor: AsyncExecutor;
-  constructor(private options: ProcesserServiceOptions) {
-    this.executor = new AsyncExecutor();
-  }
+  constructor(
+    @inject(IOCIdentifier.Logger) private logger: Logger,
+    @inject(AsyncExecutor) private executor: AsyncExecutor
+  ) {}
 
-  usePlugin(plugin: ExecutorPlugin): this {
+  use(plugin: ExecutorPlugin): this {
     this.executor.use(plugin);
     return this;
   }
@@ -23,7 +22,7 @@ export class ProcesserService {
 
   init(): Promise<unknown> {
     return this.executor.exec(this.handler).catch((err) => {
-      this.options.logger.error('PageProcesser init failed', err);
+      this.logger.error('PageProcesser init failed', err);
     });
   }
 }

package/templates/react-app/src/base/types/Page.ts

@@ -1,7 +1,5 @@
-import type { LazyExoticComponent, PropsWithChildren } from 'react';
 import type { TFunction } from 'i18next';
 import type { UseTranslationResponse } from 'react-i18next';
-import type { RouteConfigValue } from '@lib/router-loader/RouterLoader';
 
 export interface BasePageProvider {
   meta: RouteMeta;
@@ -9,7 +7,7 @@ export interface BasePageProvider {
   t: TFunction<string, string>;
 }
 
-export type RouteCategory = 'main' | 'auth' | 'common';
+type RouteCategory = 'main' | 'auth' | 'common';
 
 export interface RouteMeta {
   category?: RouteCategory;
@@ -25,13 +23,3 @@ export interface RouteMeta {
    */
   localNamespace?: string;
 }
-
-export type RouteConfig = {
-  routes: RouteConfigValue[];
-};
-
-export type PagesMaps = Record<
-  string,
-  | (() => LazyExoticComponent<React.ComponentType<unknown>>)
-  | (() => React.ComponentType<unknown>)
->;

package/templates/react-app/src/core/AppConfig.ts

@@ -1,14 +1,15 @@
-import type { EnvConfigInterface } from '@lib/bootstrap';
+import type { EnvConfigInterface } from '@qlover/corekit-bridge';
 
-class AppConfig implements EnvConfigInterface {
+export class AppConfigImpl implements EnvConfigInterface {
   readonly appName = '';
   readonly appVersion = '';
   /**
    * vite mode
+   *
    */
-  readonly env = import.meta.env.VITE_USER_NODE_ENV;
+  readonly env: string = '';
 
-  readonly userTokenStorageKey = 'fe_user_token';
+  readonly userTokenStorageKey = '';
   readonly openAiModels = [
     'gpt-4o-mini',
     'gpt-3.5-turbo',
@@ -22,6 +23,14 @@ class AppConfig implements EnvConfigInterface {
   readonly openAiRequireToken = true;
   readonly loginUser = '';
   readonly loginPassword = '';
+
+  readonly feApiBaseUrl = '';
+  readonly userApiBaseUrl = '';
+
+  readonly aiApiBaseUrl = 'https://api.openai.com/v1';
+  readonly aiApiToken = '';
+  readonly aiApiTokenPrefix = 'Bearer';
+  readonly aiApiRequireToken = true;
 }
 
-export default new AppConfig();
+export default new AppConfigImpl();

package/templates/react-app/src/core/IOC.ts

@@ -1,48 +1,88 @@
 // ! dont't import tsx, only ts file
-import type { IOCContainerInterface } from '@lib/bootstrap';
-import type {
-  IOCIdentifierMap,
-  IOCFunctionInterface
-} from '@/base/port/IOCFunctionInterface';
-import type { ServiceIdentifier } from 'inversify';
-
-let implemention: IOCContainerInterface | null;
-
-function ioc<T>(serviceIdentifier: ServiceIdentifier<T>): T;
-function ioc<K extends keyof IOCIdentifierMap>(
-  serviceIdentifier: K
-): IOCIdentifierMap[K];
-function ioc<T, K extends keyof IOCIdentifierMap>(
-  serviceIdentifier: ServiceIdentifier<T> | K
-): T | IOCIdentifierMap[K] {
-  if (!implemention) {
-    throw new Error('IOC is not implemented');
+import {
+  ApiMockPlugin,
+  EnvConfigInterface,
+  StorageTokenInterface,
+  RequestCommonPlugin,
+  ApiCatchPlugin,
+  IOCContainerInterface,
+  createIOCFunction,
+  ServiceIdentifier
+} from '@qlover/corekit-bridge';
+import type { JSONSerializer, JSONStorage, Logger } from '@qlover/fe-corekit';
+import { Container } from 'inversify';
+import { InversifyRegisterInterface } from '@/base/port/InversifyIocInterface';
+
+export class InversifyContainer implements IOCContainerInterface {
+  private container: Container;
+
+  constructor() {
+    this.container = new Container({
+      // allow `@injectable` decorator, auto bind injectable classes
+      autobind: true,
+      // use singleton scope
+      defaultScope: 'Singleton'
+    });
+  }
+
+  configure(registers?: InversifyRegisterInterface[]): void {
+    if (registers) {
+      registers.forEach((register) => register.register(this.container, this));
+    }
+  }
+
+  bind<T>(key: ServiceIdentifier<T>, value: T): void {
+    this.container.bind<T>(key).toConstantValue(value);
+  }
+
+  get<K extends keyof IOCIdentifierMap>(
+    serviceIdentifier: K
+  ): IOCIdentifierMap[K];
+  get<T>(serviceIdentifier: ServiceIdentifier<T>): T;
+  get<T, K extends keyof IOCIdentifierMap>(
+    serviceIdentifier: ServiceIdentifier<T> | K
+  ): T | IOCIdentifierMap[K] {
+    return this.container.get<T>(serviceIdentifier);
   }
-  return implemention.get(serviceIdentifier);
 }
 
 /**
- * IOC manager function.
+ * IOC identifier
  *
- * eg.
- * ```ts
- * class A {}
- * const a = IOC(A);
- * ```
+ * @description
+ * IOC identifier is used to identify the service in the IOC container.
  *
- * or
+ * @example
  * ```ts
- * const a = IOC<A>();
+ * const a = IOC(IOCIdentifier.JSON);
+ * const b = IOC('JSON');
  * ```
- *
- * or use get(),
  */
-export const IOC: IOCFunctionInterface = Object.assign(ioc, {
-  get implemention() {
-    return implemention;
-  },
-  implement: (container: IOCContainerInterface) => {
-    implemention = container;
-  },
-  get: ioc
+export const IOCIdentifier = Object.freeze({
+  JSON: 'JSON',
+  JSONStorage: 'JSONStorage',
+  Logger: 'Logger',
+  FeApiToken: 'FeApiToken',
+  FeApiCommonPlugin: 'FeApiCommonPlugin',
+  AppConfig: 'AppConfig',
+  ApiMockPlugin: 'ApiMockPlugin',
+  ApiCatchPlugin: 'ApiCatchPlugin'
 });
+
+/**
+ * IOC identifier map
+ */
+export interface IOCIdentifierMap {
+  [IOCIdentifier.JSON]: JSONSerializer;
+  [IOCIdentifier.JSONStorage]: JSONStorage;
+  [IOCIdentifier.Logger]: Logger;
+  [IOCIdentifier.FeApiToken]: StorageTokenInterface<string>;
+  [IOCIdentifier.FeApiCommonPlugin]: RequestCommonPlugin;
+  [IOCIdentifier.AppConfig]: EnvConfigInterface;
+  [IOCIdentifier.ApiMockPlugin]: ApiMockPlugin;
+  [IOCIdentifier.ApiCatchPlugin]: ApiCatchPlugin;
+}
+
+export const IOC = createIOCFunction<IOCIdentifierMap>(
+  new InversifyContainer()
+);

package/templates/react-app/src/core/bootstrap.ts

@@ -1,17 +1,30 @@
 import {
   Bootstrap,
-  BootstrapExecutorPlugin,
+  type BootstrapExecutorPlugin,
   InjectEnv,
   InjectIOC,
   InjectGlobal
-} from '@lib/bootstrap';
-import { AppIOCContainer } from '@/core/AppIOCContainer';
+} from '@qlover/corekit-bridge';
 import AppConfig from '@/core/AppConfig';
-import { envPrefix, browserGlobalsName } from '@config/common';
+import { envPrefix, browserGlobalsName, envBlackList } from '@config/common';
 import { IOC } from './IOC';
 import * as globals from '@/core/globals';
-import { I18nService } from '@/services/I18nService';
+import { I18nService } from '@/base/services/I18nService';
 import { registerList } from './registers';
+import { appBootstrapList } from './bootstraps';
+import { GLOBAL_NO_WINDOW } from '@config/ErrorIdentifier';
+
+const printBootstrap: BootstrapExecutorPlugin = {
+  pluginName: 'PrintBootstrap',
+  onSuccess({ parameters: { logger } }) {
+    logger.info(
+      'bootstrap success!\n\n' +
+        `You can use \`%cwindow.${browserGlobalsName}%c\` to access the globals`,
+      'color: #0ff; font-weight: bold;',
+      'all: unset;'
+    );
+  }
+};
 
 /**
  * Bootstrap
@@ -21,15 +34,20 @@ import { registerList } from './registers';
  * 3. inject globals to window
  *
  */
-export default function startup(root: typeof globalThis) {
-  const window =
-    typeof root !== 'undefined' && root instanceof Window ? root : undefined;
-
-  if (!window) {
-    throw new Error('Not Found Window');
+export default function startup({
+  window,
+  envSource
+}: {
+  window: unknown;
+  envSource: Record<string, unknown>;
+}) {
+  if (!(typeof window !== 'undefined' && window instanceof Window)) {
+    throw new Error(GLOBAL_NO_WINDOW);
   }
 
-  const bootstrap = new Bootstrap(new AppIOCContainer());
+  const { logger } = globals;
+
+  const bootstrap = new Bootstrap(window, IOC.implemention!, logger);
 
   /**
    * bootstrap start list
@@ -40,27 +58,22 @@ export default function startup(root: typeof globalThis) {
    * - inject i18n service to Application
    */
   const bootstrapList: BootstrapExecutorPlugin[] = [
-    new InjectEnv(AppConfig, import.meta.env, envPrefix),
+    new InjectEnv(AppConfig, envSource, envPrefix, envBlackList),
     new InjectIOC(IOC, registerList),
     new InjectGlobal(globals, browserGlobalsName),
-    new I18nService(window.location.pathname)
+    new I18nService(window.location.pathname),
+    ...appBootstrapList
   ];
 
   if (AppConfig.env !== 'production') {
-    bootstrapList.push({
-      pluginName: 'InjectDevTools',
-      onBefore() {
-        console.log(AppConfig);
-      },
-      onError({ error }) {
-        console.error(`${AppConfig.appName} starup error:`, error);
-      }
-    });
+    bootstrapList.push(printBootstrap);
   }
 
   try {
-    bootstrap.use(bootstrapList).start(root);
+    logger.info('bootstrap start...');
+
+    bootstrap.use(bootstrapList).start();
   } catch (error) {
-    console.error(`${AppConfig.appName} starup error:`, error);
+    logger.error(`${AppConfig.appName} starup error:`, error);
   }
 }

package/templates/react-app/src/core/bootstraps/BootstrapApp.ts

@@ -0,0 +1,7 @@
+import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+
+export class BootstrapApp implements BootstrapExecutorPlugin {
+  readonly pluginName = 'BootstrapApp';
+
+  onBefore(): void {}
+}