@qlover/create-app 0.7.14 → 0.8.0

package/dist/templates/react-app/src/base/services/UserService.ts

@@ -1,22 +1,22 @@
-import { type SyncStorageInterface } from '@qlover/fe-corekit';
-import type {
-  UserApiLoginTransaction,
-  UserInfo
-} from '@/base/apis/userApi/UserApiType';
+import * as errKeys from '@config/Identifier/common/common.error';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import {
   type UserAuthApiInterface,
   type UserAuthState,
   LoginResponseData,
   UserAuthStore
 } from '@qlover/corekit-bridge';
+import { type SyncStorageInterface } from '@qlover/fe-corekit';
 import { inject, injectable } from 'inversify';
 import { UserApi } from '@/base/apis/userApi/UserApi';
+import type {
+  UserApiLoginTransaction,
+  UserInfo
+} from '@/base/apis/userApi/UserApiType';
 import { AppError } from '@/base/cases/AppError';
-import * as errKeys from '@config/Identifier/common.error';
-import { IOCIdentifier } from '@config/IOCIdentifier';
 import { AppConfig } from '../cases/AppConfig';
-import { UserServiceInterface } from '../port/UserServiceInterface';
 import { RouteServiceInterface } from '../port/RouteServiceInterface';
+import { UserServiceInterface } from '../port/UserServiceInterface';
 
 export interface UserApiState extends UserAuthState<UserInfo> {}
 

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

@@ -1,10 +1,17 @@
 import type { TFunction } from 'i18next';
 import type { UseTranslationResponse } from 'react-i18next';
 
-export interface BasePageProvider {
-  meta: RouteMeta;
+export interface BasePageProvider<T extends Record<string, string>> {
+  meta: Omit<RouteMeta, 'i18nInterface'> & {
+    i18nInterface?: T;
+  };
   i18n: UseTranslationResponse<string, string>;
   t: TFunction<string, string>;
+  /**
+   * 已经翻译后的 i18n interface
+   */
+  i18nInterface: T;
+  tt: T;
 }
 
 type RouteCategory = 'main' | 'auth' | 'common';
@@ -32,4 +39,9 @@ export interface RouteMeta {
    * @default 'common'
    */
   localNamespace?: string;
+
+  /**
+   * The i18n interface of the route
+   */
+  i18nInterface?: Record<string, string>;
 }

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

@@ -1,4 +1,4 @@
-import * as feGlobals from '@/core/globals';
+import type * as feGlobals from '@/core/globals';
 import type { browserGlobalsName } from '@config/common';
 
 declare global {

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

@@ -1,49 +1,14 @@
 // ! dont't import tsx, only ts file
-import type { AppConfig } from '@/base/cases/AppConfig';
-import type { IOCRegisterInterface } from '@qlover/corekit-bridge';
-import { createIOCFunction } from '@qlover/corekit-bridge';
-import { InversifyContainer } from '@/base/cases/InversifyContainer';
-import { IOCIdentifierMap } from '@config/IOCIdentifier';
-
-/**
- * IOC register options
- */
-export type IocRegisterOptions = {
-  /**
-   * The pathname of the current page
-   */
-  pathname: string;
-
-  /**
-   * The app config
-   */
-  appConfig: AppConfig;
-};
-
-/**
- * IOC container
- *
- * This is a alias of IOCContainerInterface, use it without care about the implementation.
- *
- * Need to achieve the effect: when the implementation class on the right side of the equal sign changes, the IOCContainer will change automatically
- */
-export type IOCContainer = InversifyContainer;
-
-/**
- * IOC register interface.
- *
- * This is shortcut interface, implement this interface, you can use any IOC container.
- *
- * Need to achieve the effect: when the implementation class on the right side of the equal sign changes, the IOCContainer will change automatically
- */
-export interface IOCRegister
-  extends IOCRegisterInterface<IOCContainer, IocRegisterOptions> {}
+import { clientIOC } from './clientIoc/ClientIOC';
 
 /**
  * IOC function
  *
  * This is the only and main exported content of the file
  *
+ * - This is a global singleton instance of ClientIOC, and it is equivalent to clientIOC
+ * - It is not recommended to use this global variable, but to recommend using the useIOC hook in the ui component
+ *
  * @example use A class
  * ```ts
  * const userService = IOC(UserService);
@@ -60,10 +25,4 @@ export interface IOCRegister
  * const logger = IOC(IOCIdentifier.Logger);
  * ```
  */
-export const IOC = createIOCFunction<IOCIdentifierMap>(
-  /**
-   * If not inversify, you can use any IOC container,
-   * then replace the InversifyContainer with your own IOC container
-   */
-  new InversifyContainer()
-);
+export const IOC = clientIOC.create();

package/dist/templates/react-app/src/core/bootstraps/{BootstrapApp.ts → BootstrapClient.ts}

@@ -1,16 +1,17 @@
-import {
-  Bootstrap,
-  IOCContainerInterface,
-  IOCFunctionInterface
-} from '@qlover/corekit-bridge';
-import type { IOCIdentifierMap } from '@config/IOCIdentifier';
 import { envBlackList, envPrefix, browserGlobalsName } from '@config/common';
+import { Bootstrap } from '@qlover/corekit-bridge';
+import { isObject } from 'lodash';
+import type { IOCInterface, IOCRegister } from '@/base/port/IOCInterface';
+import type { IOCIdentifierMap } from '@config/IOCIdentifier';
 import * as globals from '../globals';
-import { IocRegisterImpl } from '../IocRegisterImpl';
 import { BootstrapsRegistry } from './BootstrapsRegistry';
-import { isObject } from 'lodash';
+import type { BootstrapsRegistryInterface } from './BootstrapsRegistry';
+import type {
+  IOCContainerInterface,
+  IOCFunctionInterface
+} from '@qlover/corekit-bridge';
 
-export type BootstrapAppArgs = {
+export type BootstrapClientArgs = {
   /**
    * 启动的根节点，通常是window
    */
@@ -19,15 +20,36 @@ export type BootstrapAppArgs = {
    * 启动的web地址
    */
   bootHref: string;
+
+  /**
+   * IOC容器对象
+   */
+  ioc: IOCInterface<IOCIdentifierMap, IOCContainerInterface>;
+
+  /**
+   * IOC注册器对象，用于注册IOC容器
+   *
+   * 可能在ioc create 中已经注册，这里可以额外注册
+   */
+  iocRegister?: IOCRegister;
+
   /**
-   * IOC容器
+   * 注册器类，用于注册注册器
    */
-  IOC: IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface>;
+  RegistryClass?: new (
+    ioc: IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface>
+  ) => BootstrapsRegistryInterface;
 };
 
-export class BootstrapApp {
-  static async main(args: BootstrapAppArgs): Promise<BootstrapAppArgs> {
-    const { root, bootHref, IOC } = args;
+export class BootstrapClient {
+  static async main(args: BootstrapClientArgs): Promise<BootstrapClientArgs> {
+    const {
+      root,
+      bootHref,
+      ioc,
+      iocRegister,
+      RegistryClass = BootstrapsRegistry
+    } = args;
 
     if (!isObject(root)) {
       throw new Error('root is not an object');
@@ -35,12 +57,17 @@ export class BootstrapApp {
 
     const { logger, appConfig } = globals;
 
+    const IOC = ioc.create({
+      pathname: bootHref,
+      appConfig: appConfig
+    });
+
     const bootstrap = new Bootstrap({
       root,
       logger,
       ioc: {
         manager: IOC,
-        register: new IocRegisterImpl({ pathname: bootHref, appConfig })
+        register: iocRegister
       },
       envOptions: {
         target: appConfig,
@@ -62,9 +89,9 @@ export class BootstrapApp {
       // init bootstrap
       await bootstrap.initialize();
 
-      const bootstrapsRegistry = new BootstrapsRegistry(IOC);
+      const bootstrapsRegistry = new RegistryClass(IOC);
 
-      await bootstrap.use(bootstrapsRegistry.register()).start();
+      await bootstrap.use(bootstrapsRegistry.register(IOC)).start();
     } catch (error) {
       logger.error(`${appConfig.appName} starup error:`, error);
     }

package/dist/templates/react-app/src/core/bootstraps/BootstrapsRegistry.ts

@@ -1,17 +1,24 @@
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import { AiApiBootstarp } from '@/base/apis/AiApi';
+import { FeApiBootstarp } from '@/base/apis/feApi/FeApiBootstarp';
+import { UserApiBootstarp } from '@/base/apis/userApi/UserApiBootstarp';
+import type { IOCIdentifierMap } from '@config/IOCIdentifier';
+import { IocIdentifierTest } from './IocIdentifierTest';
+import { printBootstrap } from './PrintBootstrap';
 import type {
   BootstrapExecutorPlugin,
   EnvConfigInterface,
   IOCContainerInterface,
   IOCFunctionInterface
 } from '@qlover/corekit-bridge';
-import { UserApiBootstarp } from '@/base/apis/userApi/UserApiBootstarp';
-import { FeApiBootstarp } from '@/base/apis/feApi/FeApiBootstarp';
-import { AiApiBootstarp } from '@/base/apis/AiApi';
-import { printBootstrap } from './PrintBootstrap';
-import { IOCIdentifier, IOCIdentifierMap } from '@config/IOCIdentifier';
-import { IocIdentifierTest } from './IocIdentifierTest';
 
-export class BootstrapsRegistry {
+export interface BootstrapsRegistryInterface {
+  register(
+    ioc: IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface>
+  ): BootstrapExecutorPlugin[];
+}
+
+export class BootstrapsRegistry implements BootstrapsRegistryInterface {
   constructor(
     protected IOC: IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface>
   ) {}

package/dist/templates/react-app/src/core/bootstraps/IocIdentifierTest.ts

@@ -1,5 +1,5 @@
 import { IOCIdentifier } from '@config/IOCIdentifier';
-import { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
 
 export const IocIdentifierTest: BootstrapExecutorPlugin = {
   pluginName: 'IocIdentifierTest',

package/dist/templates/react-app/src/core/bootstraps/PrintBootstrap.ts

@@ -1,5 +1,5 @@
 import { browserGlobalsName } from '@config/common';
-import { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
 
 export const printBootstrap: BootstrapExecutorPlugin = {
   pluginName: 'PrintBootstrap',

package/dist/templates/react-app/src/core/clientIoc/ClientIOC.ts

@@ -0,0 +1,40 @@
+import {
+  createIOCFunction,
+  type IOCContainerInterface,
+  type IOCFunctionInterface
+} from '@qlover/corekit-bridge';
+import { InversifyContainer } from '@/base/cases/InversifyContainer';
+import type { IOCInterface } from '@/base/port/IOCInterface';
+import type { IOCIdentifierMap } from '@config/IOCIdentifier';
+import { ClientIOCRegister } from './ClientIOCRegister';
+import { appConfig } from '../globals';
+
+export class ClientIOC
+  implements IOCInterface<IOCIdentifierMap, IOCContainerInterface>
+{
+  protected ioc: IOCFunctionInterface<
+    IOCIdentifierMap,
+    IOCContainerInterface
+  > | null = null;
+
+  create(): IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface> {
+    if (this.ioc) {
+      return this.ioc;
+    }
+
+    this.ioc = createIOCFunction<IOCIdentifierMap>(new InversifyContainer());
+
+    // move to BootstrapClient
+    const register = new ClientIOCRegister({
+      // eslint-disable-next-line no-restricted-globals
+      pathname: window.location.pathname,
+      appConfig: appConfig
+    });
+
+    register.register(this.ioc.implemention!, this.ioc);
+
+    return this.ioc;
+  }
+}
+
+export const clientIOC = new ClientIOC();

package/dist/templates/react-app/src/core/{IocRegisterImpl.ts → clientIoc/ClientIOCRegister.ts}

@@ -1,30 +1,39 @@
-import type { IOCContainer, IOCRegister, IocRegisterOptions } from './IOC';
+import { baseNoLocaleRoutes, baseRoutes } from '@config/app.router';
+import { routerPrefix, useLocaleRoutes } from '@config/common';
+import mockDataJson from '@config/feapi.mock.json';
+import { IOCIdentifier as I } from '@config/IOCIdentifier';
+import { themeConfig } from '@config/theme';
 import {
   ApiCatchPlugin,
   ApiMockPlugin,
   RequestCommonPlugin,
-  ThemeService,
-  type IOCManagerInterface
+  ThemeService
 } from '@qlover/corekit-bridge';
-import * as globals from './globals';
-import { IOCIdentifier as I } from '@config/IOCIdentifier';
-import mockDataJson from '@config/feapi.mock.json';
+import { I18nKeyErrorPlugin } from '@/base/cases/I18nKeyErrorPlugin';
+import { RequestStatusCatcher } from '@/base/cases/RequestStatusCatcher';
+import type { IocRegisterOptions } from '@/base/port/IOCInterface';
+import type { UserServiceInterface } from '@/base/port/UserServiceInterface';
 import { I18nService } from '@/base/services/I18nService';
-import { themeConfig } from '@config/theme';
-import { useLocaleRoutes } from '@config/common';
-import { baseNoLocaleRoutes, baseRoutes } from '@config/app.router';
-import { SyncStorageInterface } from '@qlover/fe-corekit';
+import { ProcesserExecutor } from '@/base/services/ProcesserExecutor';
 import { RouteService } from '@/base/services/RouteService';
-import { RequestStatusCatcher } from '@/base/cases/RequestStatusCatcher';
 import { UserService } from '@/base/services/UserService';
-import { I18nKeyErrorPlugin } from '@/base/cases/I18nKeyErrorPlugin';
-import { ProcesserExecutor } from '@/base/services/ProcesserExecutor';
-import { NavigateBridge } from '@/uikit/bridges/NavigateBridge';
 import { ExecutorPageBridge } from '@/uikit/bridges/ExecutorPageBridge';
 import { JSONStoragePageBridge } from '@/uikit/bridges/JSONStoragePageBridge';
+import { NavigateBridge } from '@/uikit/bridges/NavigateBridge';
 import { RequestPageBridge } from '@/uikit/bridges/RequestPageBridge';
+import * as globals from '../globals';
+import type {
+  ThemeServiceProps,
+  IOCManagerInterface,
+  IOCContainerInterface,
+  IOCRegisterInterface
+} from '@qlover/corekit-bridge';
+import type { SyncStorageInterface } from '@qlover/fe-corekit';
+import type { LoggerInterface } from '@qlover/logger';
 
-export class IocRegisterImpl implements IOCRegister {
+export class ClientIOCRegister
+  implements IOCRegisterInterface<IOCContainerInterface, IocRegisterOptions>
+{
   constructor(protected options: IocRegisterOptions) {}
 
   /**
@@ -34,7 +43,7 @@ export class IocRegisterImpl implements IOCRegister {
    *
    * @param ioc - IOC container
    */
-  protected registerGlobals(ioc: IOCContainer): void {
+  protected registerGlobals(ioc: IOCContainerInterface): void {
     const { appConfig } = this.options;
     const { dialogHandler, localStorageEncrypt, JSON, logger } = globals;
 
@@ -60,7 +69,7 @@ export class IocRegisterImpl implements IOCRegister {
    *
    * @param ioc
    */
-  protected registerImplement(ioc: IOCContainer): void {
+  protected registerImplement(ioc: IOCContainerInterface): void {
     ioc.bind(I.I18nServiceInterface, new I18nService(this.options.pathname));
     ioc.bind(
       I.RouteServiceInterface,
@@ -70,14 +79,15 @@ export class IocRegisterImpl implements IOCRegister {
         {
           routes: useLocaleRoutes ? baseRoutes : baseNoLocaleRoutes,
           logger: ioc.get(I.Logger),
-          hasLocalRoutes: useLocaleRoutes
+          hasLocalRoutes: useLocaleRoutes,
+          routerPrefix: routerPrefix
         }
       )
     );
     ioc.bind(
       I.ThemeService,
       new ThemeService({
-        ...themeConfig,
+        ...(themeConfig as unknown as ThemeServiceProps),
         storage: ioc.get<SyncStorageInterface<string, string>>(I.LocalStorage)
       })
     );
@@ -91,14 +101,15 @@ export class IocRegisterImpl implements IOCRegister {
     ioc.bind(I.RequestPageBridgeInterface, ioc.get(RequestPageBridge));
   }
 
-  protected registerCommon(ioc: IOCContainer): void {
+  protected registerCommon(ioc: IOCContainerInterface): void {
     const { appConfig } = this.options;
-    const logger = ioc.get(I.Logger);
+    const logger = ioc.get<LoggerInterface>(I.Logger);
 
     const feApiRequestCommonPlugin = new RequestCommonPlugin({
       tokenPrefix: appConfig.openAiTokenPrefix,
       requiredToken: true,
-      token: () => ioc.get(UserService).getToken()
+      token: () =>
+        ioc.get<UserServiceInterface>(I.UserServiceInterface).getToken()
     });
     const apiMockPlugin = new ApiMockPlugin(mockDataJson, logger);
     const apiCatchPlugin = new ApiCatchPlugin(
@@ -115,8 +126,8 @@ export class IocRegisterImpl implements IOCRegister {
    * @override
    */
   register(
-    ioc: IOCContainer,
-    _manager: IOCManagerInterface<IOCContainer>
+    ioc: IOCContainerInterface,
+    _manager: IOCManagerInterface<IOCContainerInterface>
   ): void {
     this.registerGlobals(ioc);
     this.registerCommon(ioc);

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

@@ -1,20 +1,20 @@
 // ! global variables, don't import any dependencies and don't have side effects
-import {
-  Base64Serializer,
-  JSONSerializer,
-  ObjectStorage,
-  SyncStorage,
-  SyncStorageInterface
-} from '@qlover/fe-corekit';
+import { loggerStyles } from '@config/common';
 import {
   ColorFormatter,
   ConsoleHandler,
   CookieStorage,
   Logger
 } from '@qlover/corekit-bridge';
-import { DialogHandler } from '@/base/cases/DialogHandler';
-import { loggerStyles } from '@config/common';
+import {
+  Base64Serializer,
+  JSONSerializer,
+  ObjectStorage,
+  SyncStorage
+} from '@qlover/fe-corekit';
 import { AppConfig } from '@/base/cases/AppConfig';
+import { DialogHandler } from '@/base/cases/DialogHandler';
+import type { SyncStorageInterface } from '@qlover/fe-corekit';
 
 export const appConfig = new AppConfig();
 

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

@@ -3,13 +3,13 @@ import 'reflect-metadata';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
-import { BootstrapApp } from './core/bootstraps/BootstrapApp';
-import { IOC } from './core/IOC.ts';
+import { BootstrapClient } from './core/bootstraps/BootstrapClient';
+import { clientIOC } from './core/clientIoc/ClientIOC.ts';
 
-BootstrapApp.main({
+BootstrapClient.main({
   root: window,
   bootHref: window.location.href,
-  IOC: IOC
+  ioc: clientIOC
 });
 
 createRoot(document.getElementById('root')!).render(

package/dist/templates/react-app/src/pages/404.tsx

@@ -1,11 +1,14 @@
+import { PAGE_404_TITLE } from '@config/Identifier/common/common';
+import { NOT_FOUND_COMPONENT } from '@config/Identifier/common/common.error';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { PAGE_404_TITLE } from '@config/Identifier/common';
-import { NOT_FOUND_COMPONENT } from '@config/Identifier/common.error';
 
 export default function NotFound({ route }: { route?: string }) {
   const { t } = useBaseRoutePage();
   return (
-    <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
+    <div
+      data-testid="NotFound"
+      className="text-base bg-primary flex flex-col justify-center min-h-screen py-6 sm:py-12"
+    >
       <div className="relative py-3 mx-auto sm:max-w-xl">
         <h1 className="text-text text-2xl font-bold text-center">
           {route ? `${t(NOT_FOUND_COMPONENT)}: ${route}` : t(PAGE_404_TITLE)}

package/dist/templates/react-app/src/pages/500.tsx

@@ -1,10 +1,13 @@
+import { PAGE_500_TITLE } from '@config/Identifier/common/common';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { PAGE_500_TITLE } from '@config/Identifier/common';
 
 export default function NotFound500() {
   const { t } = useBaseRoutePage();
   return (
-    <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
+    <div
+      data-testid="NotFound500"
+      className="text-base bg-primary flex flex-col justify-center min-h-screen py-6 sm:py-12"
+    >
       <div className="relative py-3 mx-auto sm:max-w-xl">
         <h1 className="text-text text-2xl font-bold text-center">
           {t(PAGE_500_TITLE)}

package/dist/templates/react-app/src/pages/NoRouteFound.tsx

@@ -0,0 +1,5 @@
+import { Navigate } from 'react-router-dom';
+
+export default function NoRouteFound() {
+  return <Navigate data-testid="NoRouteFound" to="/404" replace />;
+}

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

@@ -1,16 +1,19 @@
-import { IOC } from '@/core/IOC';
-import { Navigate, Outlet } from 'react-router-dom';
-import { useStore } from '@/uikit/hooks/useStore';
-import BaseHeader from '../../uikit/components/BaseHeader';
+import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { Navigate, Outlet } from 'react-router-dom';
+import { useI18nGuard } from '@/uikit/hooks/useI18nGuard';
+import { useIOC } from '@/uikit/hooks/useIOC';
+import { BaseHeader } from '../../uikit/components/BaseHeader';
 
 export default function Layout() {
-  const userService = IOC(IOCIdentifier.UserServiceInterface);
+  const userService = useIOC(IOCIdentifier.UserServiceInterface);
   useStore(userService.store);
 
+  useI18nGuard();
+
   // If user is authenticated, redirect to home page
   if (userService.isAuthenticated()) {
-    return <Navigate to="/" replace />;
+    return <Navigate data-testid="Layout" to="/" replace />;
   }
 
   return (