@qlover/create-app 0.1.10 → 0.1.12

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

@@ -0,0 +1,16 @@
+import { Suspense } from 'react';
+import { Loading } from './Loading';
+import { RouterLoaderRender } from '@lib/router-loader/RouterLoader';
+import BaseRouteProvider from '@/uikit/providers/BaseRouteProvider';
+
+export const RouterRenderComponent: RouterLoaderRender = (route) => {
+  const Component = route.element();
+
+  return (
+    <Suspense fallback={<Loading fullscreen />}>
+      <BaseRouteProvider {...route.meta}>
+        <Component />
+      </BaseRouteProvider>
+    </Suspense>
+  );
+};

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 { I18nService } from '@/services/i18n';
+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/{i18n/index.ts → 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';
 
-// custom language detector
-const pathLanguageDetector = {
-  name: 'pathLanguageDetector',
-  lookup() {
-    const path = window.location.pathname.split('/');
-    const language = path[1];
-    return I18nService.isValidLanguage(language)
-      ? language
-      : i18nConfig.fallbackLng;
-  },
-  cacheUserLanguage() {
-    // no cache, because we get language from URL
-  }
-};
+const { supportedLngs, fallbackLng } = i18nConfig;
+
+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,15 +28,31 @@ 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);
   }
 
+  static getCurrentLanguage(): I18nServiceLocale {
+    return i18n.language as I18nServiceLocale;
+  }
+
   /**
    * check if the language is supported
    * @param language - language to check
    * @returns true if the language is supported, false otherwise
    */
   static isValidLanguage(language: string): language is I18nServiceLocale {
-    return i18nConfig.supportedLngs.includes(language as I18nServiceLocale);
+    return supportedLngs.includes(language as I18nServiceLocale);
   }
 }

package/templates/react-app/src/services/processer/ProcesserService.ts

@@ -22,8 +22,8 @@ export class ProcesserService {
   }
 
   init(): Promise<unknown> {
-    return this.executor.exec(this.handler).catch(() => {
-      this.options.logger.error('PageProcesser init failed');
+    return this.executor.exec(this.handler).catch((err) => {
+      this.options.logger.error('PageProcesser init failed', err);
     });
   }
 }

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/controllers/RouterController.ts

@@ -1,12 +1,11 @@
-import { I18nService } from '@/services/i18n';
-import { RouteConfig, RouteType } from '@/base/types/Page';
+import { I18nService } from '@/services/I18nService';
 import { UIDependenciesInterface } from '@/base/port/UIDependenciesInterface';
-import { i18nConfig } from '@config/i18n';
 import { Logger } from '@qlover/fe-utils';
 import { NavigateFunction, NavigateOptions } from 'react-router-dom';
+import { RouteConfigValue } from '@lib/router-loader/RouterLoader';
+import { RouteConfig } from '@/base/types/Page';
 
 export type RouterControllerDependencies = {
-  location: globalThis.Location;
   navigate: NavigateFunction;
 };
 
@@ -16,7 +15,7 @@ export type RouterControllerOptions = {
 };
 
 export type RouterControllerState = {
-  routes: RouteType[];
+  routes: RouteConfigValue[];
 };
 
 export class RouterController
@@ -49,6 +48,11 @@ export class RouterController
     return navigate;
   }
 
+  static composePath(path: string): string {
+    const targetLang = I18nService.getCurrentLanguage();
+    return `/${targetLang}${path}`;
+  }
+
   /**
    * @override
    */
@@ -59,24 +63,17 @@ export class RouterController
     ) as RouterControllerDependencies;
   }
 
-  getRoutes(): RouteType[] {
+  getRoutes(): RouteConfigValue[] {
     return this.state.routes;
   }
 
-  changeRoutes(routes: RouteType[]): void {
+  changeRoutes(routes: RouteConfigValue[]): void {
     this.state.routes = routes;
   }
 
   goto(path: string, options?: NavigateOptions): void {
-    console.trace('path');
-
-    const tryLng = path.split('/')[0];
-    if (!I18nService.isValidLanguage(tryLng)) {
-      path = i18nConfig.fallbackLng + path.replace(tryLng, '');
-    }
-
-    this.navigate?.(path, options);
-
+    path = RouterController.composePath(path);
+    this.logger.debug('Goto path => ', path);
     this.navigate?.(path, options);
   }
 

package/templates/react-app/src/uikit/hooks/useLanguageGuard.ts

@@ -1,4 +1,4 @@
-import { I18nService } from '@/services/i18n';
+import { I18nService } from '@/services/I18nService';
 import { I18nServiceLocale } from '@config/i18n';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';

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';
@@ -26,9 +26,7 @@ export function ProcessProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   useEffect(() => {
-    IOC(RouterController).setDependencies({
-      navigate
-    });
+    IOC(RouterController).setDependencies({ navigate });
   }, [navigate]);
 
   if (!success) {