@qlover/create-app 0.1.11 → 0.1.12

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';

package/templates/react-app/src/uikit/utils/RequestLogger.ts

@@ -1,16 +1,19 @@
+import { IOCIdentifier } from '@/base/consts/IOCIdentifier';
 import {
   ExecutorPlugin,
   ExecutorContext,
   RequestAdapterFetchConfig,
   Logger
 } from '@qlover/fe-utils';
+import { injectable, inject } from 'inversify';
 
+@injectable()
 export class RequestLogger
   implements ExecutorPlugin<RequestAdapterFetchConfig>
 {
   readonly pluginName = 'RequestLogger';
 
-  constructor(public logger: Logger) {}
+  constructor(@inject(IOCIdentifier.Logger) public logger: Logger) {}
 
   async onSuccess({
     parameters,

package/templates/react-app/tsconfig.json

@@ -22,7 +22,8 @@
       "@/*": ["./src/*"],
       "@lib/*": ["./lib/*"],
       "@config/*": ["./config/*"]
-    }
+    },
+    "experimentalDecorators": true
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/templates/react-app/tsconfig.node.json

@@ -4,7 +4,11 @@
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "@lib/*": ["./lib/*"],
+      "@config/*": ["./config/*"]
+    }
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "lib", "config"]
 }

package/templates/react-app/vite.config.ts

@@ -4,11 +4,23 @@ import alias from '@rollup/plugin-alias';
 import tsappconfig from './tsconfig.json';
 import { resolve } from 'path';
 import { Env } from '@qlover/env-loader';
+import { envPrefix } from './config/common';
+import { name, version } from './package.json';
+import { injectPkgConfig } from './lib/env-config/injectPkgConfig';
 
 Env.searchEnv();
 
 const tsAppPaths = tsappconfig.compilerOptions.paths || {};
 
+// add version and name to env
+injectPkgConfig(
+  [
+    ['APP_NAME', name],
+    ['APP_VERSION', version]
+  ],
+  envPrefix
+);
+
 // convert tsconfig paths to vite alias
 const entries = Object.entries(tsAppPaths).reduce((acc, [key, value]) => {
   acc[key.replace('/*', '')] = resolve(__dirname, value[0].replace('/*', ''));
@@ -23,10 +35,12 @@ export default defineConfig({
       entries
     })
   ],
+  envPrefix: envPrefix,
   publicDir: 'public',
   server: {
     port: Number(process.env.VITE_SERVER_PORT || 3200)
   },
+  mode: process.env.NODE_ENV,
   test: {
     environment: 'jsdom',
     globals: true,

package/templates/react-app/config/app.common.ts

@@ -1,52 +0,0 @@
-import { i18nConfig } from '@config/i18n';
-import { OpenAIClientConfig } from '@lib/openAiApi';
-import { RequestCommonPluginConfig } from '@lib/request-common-plugin';
-import { RequestAdapterFetchConfig } from '@qlover/fe-utils';
-
-export const openAiModels = [
-  'gpt-3.5-turbo',
-  'gpt-3.5-turbo-2',
-  'gpt-4',
-  'gpt-4-32k'
-];
-
-export const requestCommonPluginConfig: RequestCommonPluginConfig = {
-  tokenPrefix: 'Bearer',
-  defaultHeaders: {
-    'Content-Type': 'application/json'
-  },
-  defaultRequestData: {
-    model: 'gpt-4o-mini',
-    stream: true
-  },
-  requiredToken: true,
-  token: import.meta.env.VITE_OPENAI_API_KEY
-};
-
-export const openAiConfig: OpenAIClientConfig = {
-  baseURL: import.meta.env.VITE_OPENAI_API_URL,
-  models: openAiModels,
-  commonPluginConfig: requestCommonPluginConfig
-};
-
-export const defaultBaseRoutemeta = {
-  localNamespace: i18nConfig.defaultNS,
-  title: '',
-  icon: ''
-} as const;
-
-export const defaultLoginInfo = {
-  name: 'qlover',
-  password: 'q1234566'
-};
-
-export const defaultFeApiConfig: {
-  adapter: Partial<RequestAdapterFetchConfig>;
-  commonPluginConfig: RequestCommonPluginConfig;
-} = {
-  adapter: {
-    responseType: 'json',
-    baseURL: 'https://api.example.com/'
-  },
-  commonPluginConfig: requestCommonPluginConfig
-};

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

@@ -1,53 +0,0 @@
-export interface Abstract<T> {
-  prototype: T;
-}
-export type Newable<T, Args extends unknown[] = unknown[]> = new (
-  ...args: Args
-) => T;
-
-export type ServiceIdentifier<T = unknown> =
-  | string
-  | symbol
-  | Newable<T>
-  | Abstract<T>;
-
-/**
- * IOC container
- *
- */
-export interface IOCInterface {
-  /**
-   * configure IOC container
-   */
-  configure(): void;
-
-  /**
-   * bind instance
-   *
-   * @param serviceIdentifier
-   * @param value
-   */
-  bind<T>(serviceIdentifier: ServiceIdentifier<T>, value: T): void;
-
-  /**
-   * get instance
-   *
-   * @param serviceIdentifier
-   * @returns
-   */
-  get<T>(serviceIdentifier: ServiceIdentifier<T>): T;
-
-  /**
-   * You can also use the override method to specify a replacement at runtime
-   *
-   * However, it may have performance issues because it creates an additional instance
-   *
-   * @param serviceIdentifier
-   * @param value
-   */
-  override<T>(serviceIdentifier: ServiceIdentifier<T>, value: T): void;
-}
-
-export interface IOCRegisterInterface {
-  register(container: IOCInterface): void;
-}

package/templates/react-app/src/core/feIOC/FeIOC.ts

@@ -1,32 +0,0 @@
-import { IOCInterface } from '@/base/port/IOCInterface';
-import { RegisterApi } from './RegisterApi';
-import { RegisterControllers } from './RegisterControllers';
-import { RegisterCommon } from './RegisterCommon';
-
-export class FeIOC implements IOCInterface {
-  private container: Map<string, unknown> = new Map();
-
-  /**
-   * order:
-   * 1. RegisterCommon
-   * 2. RegisterApi
-   * 3. RegisterControllers
-   */
-  configure(): void {
-    new RegisterCommon().register(this);
-    new RegisterApi().register(this);
-    new RegisterControllers().register(this);
-  }
-
-  bind<T>(key: string, value: T): void {
-    this.container.set(key, value);
-  }
-
-  get<T>(key: string): T {
-    return this.container.get(key) as T;
-  }
-
-  override<T>(key: string, value: T): void {
-    this.bind(key, value);
-  }
-}

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

@@ -1,41 +0,0 @@
-import { IOCInterface, IOCRegisterInterface } from '@/base/port/IOCInterface';
-import { RequestLogger } from '@/uikit/utils/RequestLogger';
-import { localJsonStorage } from '../globals';
-import { FetchAbortPlugin, FetchURLPlugin } from '@qlover/fe-utils';
-import { FeApiMockPlugin } from '@/base/apis/feApi';
-import { defaultFeApiConfig } from '@config/app.common';
-import { OpenAIClient } from '@lib/openAiApi';
-import { openAiConfig } from '@config/app.common';
-import { FeApi } from '@/base/apis/feApi';
-import { RequestCommonPlugin } from '@lib/request-common-plugin';
-import mockDataJson from '@config/feapi.mock.json';
-
-export class RegisterApi implements IOCRegisterInterface {
-  register(container: IOCInterface): void {
-    const openAiApi = new OpenAIClient({
-      ...openAiConfig,
-      commonPluginConfig: {
-        ...openAiConfig.commonPluginConfig,
-        requestDataSerializer: (data) => JSON.stringify(data)
-      }
-    }).usePlugin(container.get(RequestLogger));
-
-    const feApi = new FeApi({
-      abortPlugin: container.get(FetchAbortPlugin),
-      config: defaultFeApiConfig.adapter
-    })
-      .usePlugin(new FetchURLPlugin())
-      .usePlugin(
-        new RequestCommonPlugin({
-          ...defaultFeApiConfig.commonPluginConfig,
-          token: () => localJsonStorage.getItem('fe_user_token')
-        })
-      )
-      .usePlugin(new FeApiMockPlugin(mockDataJson))
-      .usePlugin(container.get(RequestLogger))
-      .usePlugin(container.get(FetchAbortPlugin));
-
-    container.bind(OpenAIClient, openAiApi);
-    container.bind(FeApi, feApi);
-  }
-}

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

@@ -1,20 +0,0 @@
-import { IOCInterface, IOCRegisterInterface } from '@/base/port/IOCInterface';
-import { RequestLogger } from '@/uikit/utils/RequestLogger';
-import { localJsonStorage, logger } from '../globals';
-import { FetchAbortPlugin } from '@qlover/fe-utils';
-import { UserToken } from '@/base/cases/UserToken';
-
-export class RegisterCommon implements IOCRegisterInterface {
-  register(container: IOCInterface): void {
-    const requestLogger = new RequestLogger(logger);
-    const feApiAbort = new FetchAbortPlugin();
-    const userToken = new UserToken({
-      storageKey: 'fe_user_token',
-      storage: localJsonStorage
-    });
-
-    container.bind(RequestLogger, requestLogger);
-    container.bind(FetchAbortPlugin, feApiAbort);
-    container.bind(UserToken, userToken);
-  }
-}

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

@@ -1,31 +0,0 @@
-// ! dont't import tsx, only ts file
-import { ServiceIdentifier, IOCInterface } from '@/base/port/IOCInterface';
-
-export type IOCFunction = {
-  <T>(serviceIdentifier: ServiceIdentifier<T>): T;
-  /**
-   * IOC container instance
-   */
-  implemention: IOCInterface | null;
-  /**
-   * implement IOC container
-   */
-  implement(container: IOCInterface): void;
-};
-
-export const IOC: IOCFunction = Object.assign(
-  function <T>(serviceIdentifier: ServiceIdentifier<T>): T {
-    if (!IOC.implemention) {
-      throw new Error('IOC is not implemented');
-    }
-    return IOC.implemention.get(serviceIdentifier);
-  },
-  {
-    implemention: null,
-    implement: (container: IOCInterface) => {
-      // FIXME: maybe runtimes configure
-      container.configure();
-      IOC.implemention = container;
-    }
-  }
-);