@qlover/create-app 0.1.15 → 0.1.16

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

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

@@ -0,0 +1,12 @@
+import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+import { BootstrapApp } from './BootstrapApp';
+import { UserApiBootstarp } from '@/base/apis/userApi/UserApiBootstarp';
+import { FeApiBootstarp } from '@/base/apis/feApi/FeApiBootstarp';
+import { AiApiBootstarp } from '@/base/apis/AiApi';
+
+export const appBootstrapList: BootstrapExecutorPlugin[] = [
+  new UserApiBootstarp(),
+  new FeApiBootstarp(),
+  AiApiBootstarp,
+  new BootstrapApp()
+];

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

@@ -1,20 +1,17 @@
 // ! global variables, don't import any dependencies and don't have side effects
-import {
-  JSONStorage,
-  JSONSerializer,
-  Logger,
-  SyncStorage
-} from '@qlover/fe-utils';
+import { JSONStorage, JSONSerializer, SyncStorage } from '@qlover/fe-corekit';
+import { ColorLogger } from '@qlover/corekit-bridge';
+import { loggerStyles } from '@config/common';
 
-export const env = import.meta.env.VITE_USER_NODE_ENV;
-export const isProduction = env === 'production';
+const isProduction = import.meta.env.VITE_USER_NODE_ENV === 'production';
 
 /**
  * Global logger
  */
-export const logger = new Logger({
+export const logger = new ColorLogger({
   silent: isProduction,
-  debug: !isProduction
+  debug: !isProduction,
+  colorsMaps: loggerStyles
 });
 
 /**

package/templates/react-app/src/core/registers/RegisterApi.ts

@@ -3,57 +3,6 @@ import type {
   InversifyRegisterContainer
 } from '@/base/port/InversifyIocInterface';
 
-import { RequestLogger } from '@/uikit/utils/RequestLogger';
-import { localJsonStorage } from '../globals';
-import { FetchAbortPlugin, FetchURLPlugin } from '@qlover/fe-utils';
-import { FeApiMockPlugin } from '@/base/apis/feApi';
-import { OpenAIClient } from '@lib/openAiApi';
-import { FeApi } from '@/base/apis/feApi';
-import { RequestCommonPlugin } from '@lib/request-common-plugin';
-import mockDataJson from '@config/feapi.mock.json';
-import AppConfig from '@/core/AppConfig';
-
 export class RegisterApi implements InversifyRegisterInterface {
-  register(container: InversifyRegisterContainer): void {
-    const openAiApi = new OpenAIClient({
-      baseURL: AppConfig.openAiBaseUrl,
-      models: AppConfig.openAiModels,
-      commonPluginConfig: {
-        tokenPrefix: AppConfig.openAiTokenPrefix,
-        token: AppConfig.openAiToken,
-        defaultHeaders: {
-          'Content-Type': 'application/json'
-        },
-        defaultRequestData: {
-          model: AppConfig.openAiModels[0],
-          stream: true
-        },
-        requiredToken: true,
-        requestDataSerializer: (data) => JSON.stringify(data)
-      }
-    }).usePlugin(container.get(RequestLogger));
-
-    const abortPlugin = container.get(FetchAbortPlugin);
-    const feApi = new FeApi({
-      abortPlugin,
-      config: {
-        responseType: 'json',
-        baseURL: 'https://api.example.com/'
-      }
-    })
-      .usePlugin(new FetchURLPlugin())
-      .usePlugin(
-        new RequestCommonPlugin({
-          tokenPrefix: AppConfig.openAiTokenPrefix,
-          requiredToken: true,
-          token: () => localJsonStorage.getItem('fe_user_token')
-        })
-      )
-      .usePlugin(new FeApiMockPlugin(mockDataJson))
-      .usePlugin(container.get(RequestLogger))
-      .usePlugin(abortPlugin);
-
-    container.bind(OpenAIClient).toConstantValue(openAiApi);
-    container.bind(FeApi).toConstantValue(feApi);
-  }
+  register(_container: InversifyRegisterContainer): void {}
 }

package/templates/react-app/src/core/registers/RegisterCommon.ts

@@ -2,20 +2,58 @@ import type {
   InversifyRegisterInterface,
   InversifyRegisterContainer
 } from '@/base/port/InversifyIocInterface';
-
-import { FetchAbortPlugin, JSONStorage } from '@qlover/fe-utils';
-import { UserToken } from '@/base/cases/UserToken';
+import { FetchAbortPlugin, JSONStorage, Logger } from '@qlover/fe-corekit';
 import AppConfig from '@/core/AppConfig';
+import { IOCIdentifier } from '@/core/IOC';
+import {
+  UserToken,
+  RequestCommonPlugin,
+  ApiMockPlugin,
+  ApiCatchPlugin,
+  ThemeService
+} from '@qlover/corekit-bridge';
+import mockDataJson from '@config/feapi.mock.json';
+import { RequestStatusCatcher } from '@/base/cases/RequestStatusCatcher';
+import { override as themeOverride } from '@config/theme.json';
+import { localJsonStorage } from '../globals';
 
 export class RegisterCommon implements InversifyRegisterInterface {
   register(container: InversifyRegisterContainer): void {
+    const userToken = new UserToken(
+      AppConfig.userTokenStorageKey,
+      container.get(JSONStorage)
+    );
     const feApiAbort = new FetchAbortPlugin();
-    const userToken = new UserToken({
-      storageKey: AppConfig.userTokenStorageKey,
-      storage: container.get(JSONStorage)
+    const feApiRequestCommonPlugin = new RequestCommonPlugin({
+      tokenPrefix: AppConfig.openAiTokenPrefix,
+      requiredToken: true,
+      token: () => userToken.getToken()
     });
 
     container.bind(FetchAbortPlugin).toConstantValue(feApiAbort);
     container.bind(UserToken).toConstantValue(userToken);
+
+    container.bind(IOCIdentifier.FeApiToken).toConstantValue(userToken);
+    container
+      .bind(IOCIdentifier.FeApiCommonPlugin)
+      .toConstantValue(feApiRequestCommonPlugin);
+    container
+      .bind(IOCIdentifier.ApiMockPlugin)
+      .toConstantValue(new ApiMockPlugin(mockDataJson, container.get(Logger)));
+    container
+      .bind(IOCIdentifier.ApiCatchPlugin)
+      .toConstantValue(
+        new ApiCatchPlugin(
+          container.get(Logger),
+          container.get(RequestStatusCatcher)
+        )
+      );
+
+    container.bind(ThemeService).toConstantValue(
+      new ThemeService({
+        ...themeOverride,
+        storage: localJsonStorage
+      })
+    );
   }
 }

package/templates/react-app/src/core/registers/RegisterControllers.ts

@@ -6,53 +6,24 @@ import type {
 import { localJsonStorage, logger } from '../globals';
 import { RouterController } from '@/uikit/controllers/RouterController';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
-import { RequestController } from '@/uikit/controllers/RequestController';
-import { ProcesserService } from '@/services/processer/ProcesserService';
-import { ExecutorController } from '@/uikit/controllers/ExecutorController';
+import { ProcesserService } from '@/base/services/ProcesserService';
 import { UserController } from '@/uikit/controllers/UserController';
-import { ThemeController } from '@lib/fe-react-theme/ThemeController';
-import { RouteConfig } from '@/base/types/Page';
-import { OpenAIClient } from '@lib/openAiApi';
-import { FeApi } from '@/base/apis/feApi';
-import appRouterConfig from '@config/app.router.json';
-import themeConfigJson from '@config/theme.json';
-import { UserToken } from '@/base/cases/UserToken';
+import { base as baseRoutes } from '@config/app.router.json';
 
 export class RegisterControllers implements InversifyRegisterInterface {
   register(container: InversifyRegisterContainer): void {
     const routerController = new RouterController({
-      config: appRouterConfig.base as RouteConfig,
+      config: baseRoutes,
       logger
     });
 
     const jsonStorageController = new JSONStorageController(localJsonStorage);
-    const requestController = new RequestController(
-      container.get(OpenAIClient),
-      container.get(FeApi)
-    );
-    const executorController = new ExecutorController(container.get(FeApi));
-    const userController = new UserController({
-      userToken: container.get(UserToken),
-      feApi: container.get(FeApi),
-      routerController
-    });
-    const themeController = new ThemeController({
-      ...themeConfigJson.override,
-      storage: localJsonStorage
-    });
-
-    const pageProcesser = new ProcesserService({
-      logger
-    }).usePlugin(userController);
 
     container.bind(RouterController).toConstantValue(routerController);
     container
       .bind(JSONStorageController)
       .toConstantValue(jsonStorageController);
-    container.bind(RequestController).toConstantValue(requestController);
-    container.bind(ExecutorController).toConstantValue(executorController);
-    container.bind(UserController).toConstantValue(userController);
-    container.bind(ThemeController).toConstantValue(themeController);
-    container.bind(ProcesserService).toConstantValue(pageProcesser);
+
+    container.get(ProcesserService).use(container.get(UserController));
   }
 }

package/templates/react-app/src/core/registers/RegisterGlobals.ts

@@ -1,13 +1,19 @@
+import { JSONSerializer, JSONStorage, Logger } from '@qlover/fe-corekit';
+import type { EnvConfigInterface } from '@qlover/corekit-bridge';
 import type {
   InversifyRegisterInterface,
   InversifyRegisterContainer
 } from '@/base/port/InversifyIocInterface';
 import { JSON, localJsonStorage, logger } from '../globals';
-import { JSONSerializer, JSONStorage, Logger } from '@qlover/fe-utils';
-import { IOCIdentifier } from '@/base/consts/IOCIdentifier';
+import { IOCIdentifier } from '@/core/IOC';
 
 export class RegisterGlobals implements InversifyRegisterInterface {
+  constructor(private appConfig: EnvConfigInterface) {}
+
   register(container: InversifyRegisterContainer): void {
+    // inject AppConfig to IOC
+    container.bind(IOCIdentifier.AppConfig).toConstantValue(this.appConfig);
+
     container.bind(JSONSerializer).toConstantValue(JSON);
     container.bind(IOCIdentifier.JSON).toConstantValue(JSON);
 

package/templates/react-app/src/core/registers/index.ts

@@ -3,6 +3,7 @@ import { RegisterGlobals } from './RegisterGlobals';
 import { RegisterCommon } from './RegisterCommon';
 import { RegisterApi } from './RegisterApi';
 import { RegisterControllers } from './RegisterControllers';
+import AppConfig from '../AppConfig';
 
 /**
  * Register List
@@ -10,7 +11,7 @@ import { RegisterControllers } from './RegisterControllers';
  * Register List is used to register dependencies in bootstrap
  */
 export const registerList: InversifyRegisterInterface[] = [
-  new RegisterGlobals(),
+  new RegisterGlobals(AppConfig),
   new RegisterCommon(),
   new RegisterApi(),
   new RegisterControllers()

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

@@ -5,7 +5,10 @@ import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import startup from './core/bootstrap';
 
-startup(window);
+startup({
+  window: window,
+  envSource: import.meta.env
+});
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>