@qlover/create-app 0.1.11 → 0.1.14

package/templates/react-app/src/base/consts/IOCIdentifier.ts

@@ -0,0 +1,16 @@
+/**
+ * IOC identifier
+ *
+ * @description
+ * IOC identifier is used to identify the service in the IOC container.
+ *
+ * @example
+ * ```ts
+ * const a = IOC(IOCIdentifier.JSON);
+ * ```
+ */
+export const IOCIdentifier = Object.freeze({
+  JSON: 'JSON',
+  JSONStorage: 'JSONStorage',
+  Logger: 'Logger'
+});

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

@@ -0,0 +1,39 @@
+import type { IOCManagerInterface } from '@lib/bootstrap';
+import type { JSONSerializer, JSONStorage, Logger } from '@qlover/fe-utils';
+import type { ServiceIdentifier } from 'inversify';
+import type { IOCIdentifier } from '@/base/consts/IOCIdentifier';
+
+export type IOCIdentifierMap = {
+  [IOCIdentifier.JSON]: JSONSerializer;
+  [IOCIdentifier.JSONStorage]: JSONStorage;
+  [IOCIdentifier.Logger]: Logger;
+};
+
+/**
+ * IOC function
+ *
+ * eg.
+ * ```ts
+ * const a = IOC(A);
+ * const logger = IOC(ConstanstIdentifier.Logger);
+ * ```
+ *
+ */
+export interface IOCFunctionInterface extends IOCManagerInterface {
+  /**
+   * get constant identifier
+   *
+   * Preferred match for simple types
+   */
+  <K extends keyof IOCIdentifierMap>(serviceIdentifier: K): IOCIdentifierMap[K];
+
+  /**
+   * get service identifier
+   */
+  <T>(serviceIdentifier: ServiceIdentifier<T>): T;
+
+  get<K extends keyof IOCIdentifierMap>(
+    serviceIdentifier: K
+  ): IOCIdentifierMap[K];
+  get<T>(serviceIdentifier: ServiceIdentifier<T>): T;
+}

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

@@ -0,0 +1,9 @@
+import type { IOCRegisterInterface } from '@lib/bootstrap';
+import type { Container } from 'inversify';
+
+export type InversifyRegisterContainer = Container;
+/**
+ * Inversify register interface.
+ */
+export interface InversifyRegisterInterface
+  extends IOCRegisterInterface<InversifyRegisterContainer> {}

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

@@ -1,5 +1,27 @@
+/**
+ * Storage token interface
+ *
+ * @description
+ * Storage token interface is used to store and retrieve token from the storage.
+ */
 export interface StorageTokenInterface {
+  /**
+   * Get token
+   *
+   * @returns {string} token
+   */
   getToken(): string;
+
+  /**
+   * Set token
+   *
+   * @param {string} token
+   * @param {number} expireTime
+   */
   setToken(token: string, expireTime?: number): void;
+
+  /**
+   * Remove token
+   */
   removeToken(): void;
 }

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

@@ -1,9 +1,7 @@
-import { LazyExoticComponent, PropsWithChildren } from 'react';
-import { RouteObject } from 'react-router-dom';
-
-import { TFunction } from 'i18next';
-import { UseTranslationResponse } from 'react-i18next';
-import { RouteConfigValue } from '@lib/router-loader/RouterLoader';
+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;
@@ -37,10 +35,3 @@ export type PagesMaps = Record<
   | (() => LazyExoticComponent<React.ComponentType<unknown>>)
   | (() => React.ComponentType<unknown>)
 >;
-
-export type LoadProps = {
-  pagesMaps: PagesMaps;
-  componentPath: string;
-  route: RouteType;
-  Provider?: React.ComponentType<PropsWithChildren<RouteMeta>>;
-};

package/templates/react-app/src/base/types/global.d.ts

@@ -1,7 +1,8 @@
 import * as feGlobals from '@/core/globals';
+import type { browserGlobalsName } from '@config/common';
 
 declare global {
   interface Window {
-    feGlobals: Readonly<typeof feGlobals>;
+    [browserGlobalsName]: Readonly<typeof feGlobals>;
   }
 }

package/templates/react-app/src/components/ThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import { IOC } from '@/core';
+import { IOC } from '@/core/IOC';
 import { useController } from '@lib/fe-react-controller';
 import { ThemeController } from '@lib/fe-react-theme/ThemeController';
 import { useTranslation } from 'react-i18next';

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

@@ -0,0 +1,27 @@
+import type { EnvConfigInterface } from '@lib/bootstrap';
+
+class AppConfig implements EnvConfigInterface {
+  readonly appName = '';
+  readonly appVersion = '';
+  /**
+   * vite mode
+   */
+  readonly env = import.meta.env.VITE_USER_NODE_ENV;
+
+  readonly userTokenStorageKey = 'fe_user_token';
+  readonly openAiModels = [
+    'gpt-4o-mini',
+    'gpt-3.5-turbo',
+    'gpt-3.5-turbo-2',
+    'gpt-4',
+    'gpt-4-32k'
+  ];
+  readonly openAiBaseUrl = '';
+  readonly openAiToken = '';
+  readonly openAiTokenPrefix = '';
+  readonly openAiRequireToken = true;
+  readonly loginUser = '';
+  readonly loginPassword = '';
+}
+
+export default new AppConfig();

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

@@ -0,0 +1,30 @@
+import type { InversifyRegisterInterface } from '@/base/port/InversifyIocInterface';
+import type { IOCContainerInterface } from '@lib/bootstrap';
+import { ServiceIdentifier, Container } from 'inversify';
+
+export class AppIOCContainer 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<T>(key: string): T {
+    return this.container.get<T>(key);
+  }
+}

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

@@ -0,0 +1,48 @@
+// ! 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');
+  }
+  return implemention.get(serviceIdentifier);
+}
+
+/**
+ * IOC manager function.
+ *
+ * eg.
+ * ```ts
+ * class A {}
+ * const a = IOC(A);
+ * ```
+ *
+ * or
+ * ```ts
+ * const a = IOC<A>();
+ * ```
+ *
+ * or use get(),
+ */
+export const IOC: IOCFunctionInterface = Object.assign(ioc, {
+  get implemention() {
+    return implemention;
+  },
+  implement: (container: IOCContainerInterface) => {
+    implemention = container;
+  },
+  get: ioc
+});

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

@@ -1,21 +1,66 @@
-import * as feGlobals from '@/core/globals';
-import { IOC } from '.';
-import { IOCInterface } from '@/base/port/IOCInterface';
+import {
+  Bootstrap,
+  BootstrapExecutorPlugin,
+  InjectEnv,
+  InjectIOC,
+  InjectGlobal
+} from '@lib/bootstrap';
+import { AppIOCContainer } from '@/core/AppIOCContainer';
+import AppConfig from '@/core/AppConfig';
+import { envPrefix, browserGlobalsName } from '@config/common';
+import { IOC } from './IOC';
+import * as globals from '@/core/globals';
 import { I18nService } from '@/services/I18nService';
+import { registerList } from './registers';
 
-export class Bootstrap {
-  constructor(private IOCContainer: IOCInterface) {}
+/**
+ * Bootstrap
+ *
+ * 1. inject env config to AppConfig
+ * 2. inject IOC to Application
+ * 3. inject globals to window
+ *
+ */
+export default function startup(root: typeof globalThis) {
+  const window =
+    typeof root !== 'undefined' && root instanceof Window ? root : undefined;
 
-  start(): void {
-    // set global feGlobals
-    if (typeof window !== 'undefined') {
-      window.feGlobals = Object.freeze(Object.assign({}, feGlobals));
-    }
+  if (!window) {
+    throw new Error('Not Found Window');
+  }
+
+  const bootstrap = new Bootstrap(new AppIOCContainer());
 
-    // startup IOC
-    IOC.implement(this.IOCContainer);
+  /**
+   * bootstrap start list
+   *
+   * - inject env config to AppConfig
+   * - inject IOC to Application
+   * - inject globals to window
+   * - inject i18n service to Application
+   */
+  const bootstrapList: BootstrapExecutorPlugin[] = [
+    new InjectEnv(AppConfig, import.meta.env, envPrefix),
+    new InjectIOC(IOC, registerList),
+    new InjectGlobal(globals, browserGlobalsName),
+    new I18nService(window.location.pathname)
+  ];
+
+  if (AppConfig.env !== 'production') {
+    bootstrapList.push({
+      pluginName: 'InjectDevTools',
+      onBefore() {
+        console.log(AppConfig);
+      },
+      onError({ error }) {
+        console.error(`${AppConfig.appName} starup error:`, error);
+      }
+    });
+  }
 
-    // startup i18n
-    I18nService.init();
+  try {
+    bootstrap.use(bootstrapList).start(root);
+  } catch (error) {
+    console.error(`${AppConfig.appName} starup error:`, error);
   }
 }

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

@@ -6,7 +6,7 @@ import {
   SyncStorage
 } from '@qlover/fe-utils';
 
-export const env = import.meta.env.VITE_NODE_ENV;
+export const env = import.meta.env.VITE_USER_NODE_ENV;
 export const isProduction = env === 'production';
 
 /**

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

@@ -0,0 +1,59 @@
+import type {
+  InversifyRegisterInterface,
+  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);
+  }
+}

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

@@ -0,0 +1,21 @@
+import type {
+  InversifyRegisterInterface,
+  InversifyRegisterContainer
+} from '@/base/port/InversifyIocInterface';
+
+import { FetchAbortPlugin, JSONStorage } from '@qlover/fe-utils';
+import { UserToken } from '@/base/cases/UserToken';
+import AppConfig from '@/core/AppConfig';
+
+export class RegisterCommon implements InversifyRegisterInterface {
+  register(container: InversifyRegisterContainer): void {
+    const feApiAbort = new FetchAbortPlugin();
+    const userToken = new UserToken({
+      storageKey: AppConfig.userTokenStorageKey,
+      storage: container.get(JSONStorage)
+    });
+
+    container.bind(FetchAbortPlugin).toConstantValue(feApiAbort);
+    container.bind(UserToken).toConstantValue(userToken);
+  }
+}

package/templates/react-app/src/core/{feIOC → registers}/RegisterControllers.ts

@@ -1,4 +1,8 @@
-import { IOCInterface, IOCRegisterInterface } from '@/base/port/IOCInterface';
+import type {
+  InversifyRegisterInterface,
+  InversifyRegisterContainer
+} from '@/base/port/InversifyIocInterface';
+
 import { localJsonStorage, logger } from '../globals';
 import { RouterController } from '@/uikit/controllers/RouterController';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
@@ -10,13 +14,12 @@ 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';
 
-export class RegisterControllers implements IOCRegisterInterface {
-  register(container: IOCInterface): void {
+export class RegisterControllers implements InversifyRegisterInterface {
+  register(container: InversifyRegisterContainer): void {
     const routerController = new RouterController({
       config: appRouterConfig.base as RouteConfig,
       logger
@@ -42,12 +45,14 @@ export class RegisterControllers implements IOCRegisterInterface {
       logger
     }).usePlugin(userController);
 
-    container.bind(RouterController, routerController);
-    container.bind(JSONStorageController, jsonStorageController);
-    container.bind(RequestController, requestController);
-    container.bind(ExecutorController, executorController);
-    container.bind(UserController, userController);
-    container.bind(ThemeController, themeController);
-    container.bind(ProcesserService, pageProcesser);
+    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);
   }
 }

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

@@ -0,0 +1,20 @@
+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';
+
+export class RegisterGlobals implements InversifyRegisterInterface {
+  register(container: InversifyRegisterContainer): void {
+    container.bind(JSONSerializer).toConstantValue(JSON);
+    container.bind(IOCIdentifier.JSON).toConstantValue(JSON);
+
+    container.bind(Logger).toConstantValue(logger);
+    container.bind(IOCIdentifier.Logger).toConstantValue(logger);
+
+    container.bind(JSONStorage).toConstantValue(localJsonStorage);
+    container.bind(IOCIdentifier.JSONStorage).toConstantValue(localJsonStorage);
+  }
+}

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

@@ -0,0 +1,17 @@
+import type { InversifyRegisterInterface } from '@/base/port/InversifyIocInterface';
+import { RegisterGlobals } from './RegisterGlobals';
+import { RegisterCommon } from './RegisterCommon';
+import { RegisterApi } from './RegisterApi';
+import { RegisterControllers } from './RegisterControllers';
+
+/**
+ * Register List
+ *
+ * Register List is used to register dependencies in bootstrap
+ */
+export const registerList: InversifyRegisterInterface[] = [
+  new RegisterGlobals(),
+  new RegisterCommon(),
+  new RegisterApi(),
+  new RegisterControllers()
+];

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

@@ -1,10 +1,11 @@
+// !only this file use `window`, `document` ...global variables
+import 'reflect-metadata';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
-import { Bootstrap } from './core/bootstrap';
-import { FeIOC } from './core/feIOC/FeIOC';
+import startup from './core/bootstrap';
 
-new Bootstrap(new FeIOC()).start();
+startup(window);
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

package/templates/react-app/src/pages/auth/Layout.tsx

@@ -1,4 +1,4 @@
-import { IOC } from '@/core';
+import { IOC } from '@/core/IOC';
 import { UserController } from '@/uikit/controllers/UserController';
 import { useController } from '@lib/fe-react-controller';
 import { Navigate, Outlet } from 'react-router-dom';

package/templates/react-app/src/pages/auth/Login.tsx

@@ -1,16 +1,16 @@
 import { useState } from 'react';
 import { useController } from '@lib/fe-react-controller';
-import { IOC } from '@/core';
+import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { defaultLoginInfo } from '@config/app.common';
 import { RouterController } from '@/uikit/controllers/RouterController';
 import { UserController } from '@/uikit/controllers/UserController';
+import AppConfig from '@/core/AppConfig';
 
 export default function Login() {
   const { t } = useBaseRoutePage();
   const controller = useController(IOC(UserController));
-  const [email, setEmail] = useState(defaultLoginInfo.name);
-  const [password, setPassword] = useState(defaultLoginInfo.password);
+  const [email, setEmail] = useState(AppConfig.loginUser);
+  const [password, setPassword] = useState(AppConfig.loginPassword);
   const [loading, setLoading] = useState(false);
 
   const handleLogin = async () => {

package/templates/react-app/src/pages/base/Executor.tsx

@@ -1,4 +1,4 @@
-import { IOC } from '@/core';
+import { IOC } from '@/core/IOC';
 import { useControllerState } from '@lib/fe-react-controller';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';

package/templates/react-app/src/pages/base/JSONStorage.tsx

@@ -1,4 +1,4 @@
-import { IOC } from '@/core';
+import { IOC } from '@/core/IOC';
 import { useController, useControllerState } from '@lib/fe-react-controller';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import template from 'lodash/template';

package/templates/react-app/src/pages/base/Request.tsx

@@ -1,4 +1,4 @@
-import { IOC } from '@/core';
+import { IOC } from '@/core/IOC';
 import { useControllerState } from '@lib/fe-react-controller';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';

package/templates/react-app/src/services/I18nService.ts

@@ -4,24 +4,16 @@ 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';
 
 const { supportedLngs, fallbackLng } = i18nConfig;
 
-// custom language detector
-const pathLanguageDetector = {
-  name: 'pathLanguageDetector',
-  lookup() {
-    const path = window.location.pathname.split('/');
-    const language = path[1];
-    return I18nService.isValidLanguage(language) ? language : fallbackLng;
-  },
-  cacheUserLanguage() {
-    // no cache, because we get language from URL
-  }
-};
+export class I18nService implements BootstrapExecutorPlugin {
+  readonly pluginName = 'I18nService';
+
+  constructor(private pathname: string) {}
 
-export class I18nService {
-  static init(): void {
+  onBefore(): void {
     i18n
       .use(HttpApi)
       .use(LanguageDetector)
@@ -36,6 +28,18 @@ export class I18nService {
       );
 
     // add custom detector
+    // custom language detector
+    const pathLanguageDetector = {
+      name: 'pathLanguageDetector',
+      lookup: () => {
+        const path = this.pathname.split('/');
+        const language = path[1];
+        return I18nService.isValidLanguage(language) ? language : fallbackLng;
+      },
+      cacheUserLanguage() {
+        // no cache, because we get language from URL
+      }
+    };
     i18n.services.languageDetector.addDetector(pathLanguageDetector);
   }
 

package/templates/react-app/src/uikit/contexts/BaseRouteContext.ts

@@ -3,8 +3,14 @@ import { useContext, useMemo } from 'react';
 import { BasePageProvider } from '@/base/types/Page';
 import { RouteMeta } from '@/base/types/Page';
 import { createContext } from 'react';
-import { defaultBaseRoutemeta } from '@config/app.common';
 import merge from 'lodash/merge';
+import { i18nConfig } from '@config/i18n';
+
+const defaultBaseRoutemeta = {
+  localNamespace: i18nConfig.defaultNS,
+  title: '',
+  icon: ''
+};
 
 export const BaseRoutePageContext = createContext<RouteMeta>({});
 

package/templates/react-app/src/uikit/providers/ProcessProvider.tsx

@@ -1,5 +1,5 @@
 import { createContext, useEffect } from 'react';
-import { IOC } from '@/core';
+import { IOC } from '@/core/IOC';
 import { useLanguageGuard } from '@/uikit/hooks/useLanguageGuard';
 import { useStrictEffect } from '@/uikit/hooks/useStrictEffect';
 import { ProcesserService } from '@/services/processer/ProcesserService';