@qlover/create-app 0.3.2 → 0.3.4

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

@@ -1,79 +1,58 @@
-import {
-  Bootstrap,
-  type BootstrapExecutorPlugin,
-  InjectEnv,
-  InjectIOC,
-  InjectGlobal
-} from '@qlover/corekit-bridge';
-import AppConfig from '@/core/AppConfig';
-import { envPrefix, browserGlobalsName, envBlackList } from '@config/common';
+import { Bootstrap } from '@qlover/corekit-bridge';
+import { envBlackList, envPrefix, browserGlobalsName } from '@config/common';
 import { IOC } from './IOC';
 import * as globals from '@/core/globals';
-import { I18nService } from '@/base/services/I18nService';
-import { registerList } from './registers';
-import { appBootstrapList } from './bootstraps';
-import { GLOBAL_NO_WINDOW } from '@config/ErrorIdentifier';
+import { IocRegister } from './registers';
+import { BootstrapsRegistry } from './bootstraps';
+import { GLOBAL_NO_WINDOW } from '@config/Identifier.Error';
 
-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
- *
- * 1. inject env config to AppConfig
- * 2. inject IOC to Application
- * 3. inject globals to window
- *
- */
-export default function startup({
-  window,
+export default async function startup({
+  root,
   envSource
 }: {
-  window: unknown;
+  root: unknown;
   envSource: Record<string, unknown>;
 }) {
-  if (!(typeof window !== 'undefined' && window instanceof Window)) {
+  if (!(typeof root !== 'undefined' && root instanceof Window)) {
     throw new Error(GLOBAL_NO_WINDOW);
   }
 
-  const { logger } = globals;
-
-  const bootstrap = new Bootstrap(window, IOC.implemention!, logger);
-
-  /**
-   * 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, envSource, envPrefix, envBlackList),
-    new InjectIOC(IOC, registerList),
-    new InjectGlobal(globals, browserGlobalsName),
-    new I18nService(window.location.pathname),
-    ...appBootstrapList
-  ];
-
-  if (AppConfig.env !== 'production') {
-    bootstrapList.push(printBootstrap);
-  }
+  const { logger, appConfig } = globals;
+
+  const iocRegister = new IocRegister({
+    pathname: root.location.pathname,
+    appConfig
+  });
+
+  const bootstrap = new Bootstrap({
+    root,
+    logger,
+    ioc: {
+      manager: IOC,
+      register: iocRegister
+    },
+    envOptions: {
+      target: appConfig,
+      source: envSource,
+      prefix: envPrefix,
+      blackList: envBlackList
+    },
+    globalOptions: {
+      sources: globals,
+      target: browserGlobalsName
+    }
+  });
 
   try {
     logger.info('bootstrap start...');
 
-    bootstrap.use(bootstrapList).start();
+    // init bootstrap
+    await bootstrap.initialize();
+
+    const bootstrapsRegistry = new BootstrapsRegistry(IOC);
+
+    await bootstrap.use(bootstrapsRegistry.register()).start();
   } catch (error) {
-    logger.error(`${AppConfig.appName} starup error:`, error);
+    logger.error(`${appConfig.appName} starup error:`, error);
   }
 }

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

@@ -0,0 +1,14 @@
+import { browserGlobalsName } from '@config/common';
+import { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+
+export 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;'
+    );
+  }
+};

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

@@ -1,12 +1,41 @@
-import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+import type {
+  BootstrapExecutorPlugin,
+  EnvConfigInterface,
+  IOCContainerInterface,
+  IOCFunctionInterface
+} 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';
+import { printBootstrap } from './PrintBootstrap';
+import { IOCIdentifier, type IOCIdentifierMap } from '../IOC';
+import { I18nService } from '@/base/services/I18nService';
 
-export const appBootstrapList: BootstrapExecutorPlugin[] = [
-  new UserApiBootstarp(),
-  new FeApiBootstarp(),
-  AiApiBootstarp,
-  new BootstrapApp()
-];
+export class BootstrapsRegistry {
+  constructor(
+    protected IOC: IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface>
+  ) {}
+
+  get appConfig(): EnvConfigInterface {
+    return this.IOC(IOCIdentifier.AppConfig);
+  }
+
+  register(): BootstrapExecutorPlugin[] {
+    const IOC = this.IOC;
+
+    const bootstrapList = [
+      IOC(I18nService),
+      new UserApiBootstarp(),
+      new FeApiBootstarp(),
+      AiApiBootstarp,
+      new BootstrapApp()
+    ];
+
+    if (this.appConfig.env !== 'production') {
+      bootstrapList.push(printBootstrap);
+    }
+
+    return bootstrapList;
+  }
+}

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

@@ -1,14 +1,21 @@
 // ! global variables, don't import any dependencies and don't have side effects
 import { JSONStorage, JSONSerializer, SyncStorage } from '@qlover/fe-corekit';
 import { ColorFormatter, ConsoleHandler, Logger } from '@qlover/corekit-bridge';
+import { DialogHandler } from '@/base/cases/DialogHandler';
+import { loggerStyles } from '@config/common';
+import { AppConfig } from '@/base/cases/AppConfig';
 
 const isProduction = import.meta.env.VITE_USER_NODE_ENV === 'production';
 
+export const appConfig = new AppConfig();
+
+export const dialogHandler = new DialogHandler();
+
 /**
  * Global logger
  */
 export const logger = new Logger({
-  handlers: new ConsoleHandler(new ColorFormatter()),
+  handlers: new ConsoleHandler(new ColorFormatter(loggerStyles)),
   silent: isProduction
 });
 

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

@@ -1,8 +1,5 @@
-import type {
-  InversifyRegisterInterface,
-  InversifyRegisterContainer
-} from '@/base/port/InversifyIocInterface';
+import { InversifyContainer, InversifyRegisterInterface } from '../IOC';
 
 export class RegisterApi implements InversifyRegisterInterface {
-  register(_container: InversifyRegisterContainer): void {}
+  register(_container: InversifyContainer): void {}
 }

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

@@ -1,25 +1,33 @@
-import type {
-  InversifyRegisterInterface,
-  InversifyRegisterContainer
-} from '@/base/port/InversifyIocInterface';
 import { FetchAbortPlugin, JSONStorage } from '@qlover/fe-corekit';
-import { Logger }from '@qlover/logger';
-import AppConfig from '@/core/AppConfig';
-import { IOCIdentifier } from '@/core/IOC';
+import { Logger } from '@qlover/logger';
+import {
+  InversifyContainer,
+  InversifyRegisterInterface,
+  IOCIdentifier,
+  IocRegisterOptions
+} from '@/core/IOC';
 import {
   UserToken,
   RequestCommonPlugin,
   ApiMockPlugin,
   ApiCatchPlugin,
-  ThemeService
+  ThemeService,
+  IOCManagerInterface
 } 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 themeConfig from '@config/theme.json';
 import { localJsonStorage } from '../globals';
+import { I18nService } from '@/base/services/I18nService';
 
 export class RegisterCommon implements InversifyRegisterInterface {
-  register(container: InversifyRegisterContainer): void {
+  register(
+    container: InversifyContainer,
+    _: IOCManagerInterface<InversifyContainer>,
+    options: IocRegisterOptions
+  ): void {
+    const AppConfig = container.get(IOCIdentifier.AppConfig);
+
     const userToken = new UserToken(
       AppConfig.userTokenStorageKey,
       container.get(JSONStorage)
@@ -31,30 +39,31 @@ export class RegisterCommon implements InversifyRegisterInterface {
       token: () => userToken.getToken()
     });
 
-    container.bind(FetchAbortPlugin).toConstantValue(feApiAbort);
-    container.bind(UserToken).toConstantValue(userToken);
+    container.bind(FetchAbortPlugin, feApiAbort);
+    container.bind(UserToken, 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(IOCIdentifier.FeApiToken, userToken);
+    container.bind(IOCIdentifier.FeApiCommonPlugin, feApiRequestCommonPlugin);
+    container.bind(
+      IOCIdentifier.ApiMockPlugin,
+      new ApiMockPlugin(mockDataJson, container.get(Logger))
+    );
+    container.bind(
+      IOCIdentifier.ApiCatchPlugin,
+      new ApiCatchPlugin(
+        container.get(Logger),
+        container.get(RequestStatusCatcher)
+      )
+    );
 
-    container.bind(ThemeService).toConstantValue(
+    container.bind(
+      ThemeService,
       new ThemeService({
-        ...themeOverride,
+        ...themeConfig,
         storage: localJsonStorage
       })
     );
+
+    container.bind(I18nService, new I18nService(options.pathname));
   }
 }

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

@@ -1,17 +1,14 @@
-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';
 import { ProcesserService } from '@/base/services/ProcesserService';
 import { UserController } from '@/uikit/controllers/UserController';
 import { base as baseRoutes } from '@config/app.router.json';
+import { InversifyRegisterInterface } from '../IOC';
+import { InversifyContainer } from '../IOC';
 
 export class RegisterControllers implements InversifyRegisterInterface {
-  register(container: InversifyRegisterContainer): void {
+  register(container: InversifyContainer): void {
     const routerController = new RouterController({
       config: baseRoutes,
       logger
@@ -19,10 +16,8 @@ export class RegisterControllers implements InversifyRegisterInterface {
 
     const jsonStorageController = new JSONStorageController(localJsonStorage);
 
-    container.bind(RouterController).toConstantValue(routerController);
-    container
-      .bind(JSONStorageController)
-      .toConstantValue(jsonStorageController);
+    container.bind(RouterController, routerController);
+    container.bind(JSONStorageController, jsonStorageController);
 
     container.get(ProcesserService).use(container.get(UserController));
   }

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

@@ -1,27 +1,31 @@
 import { JSONSerializer, JSONStorage } 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 { IOCIdentifier } from '@/core/IOC';
+import type { IOCManagerInterface } from '@qlover/corekit-bridge';
+import { dialogHandler, JSON, localJsonStorage, logger } from '../globals';
+import {
+  type InversifyContainer,
+  type InversifyRegisterInterface,
+  IOCIdentifier,
+  IocRegisterOptions
+} from '@/core/IOC';
 import { Logger } from '@qlover/logger';
 
 export class RegisterGlobals implements InversifyRegisterInterface {
-  constructor(private appConfig: EnvConfigInterface) {}
-
-  register(container: InversifyRegisterContainer): void {
+  register(
+    container: InversifyContainer,
+    _: IOCManagerInterface<InversifyContainer>,
+    options: IocRegisterOptions
+  ): void {
     // inject AppConfig to IOC
-    container.bind(IOCIdentifier.AppConfig).toConstantValue(this.appConfig);
+    container.bind(IOCIdentifier.AppConfig, options.appConfig);
+    container.bind(IOCIdentifier.DialogHandler, dialogHandler);
 
-    container.bind(JSONSerializer).toConstantValue(JSON);
-    container.bind(IOCIdentifier.JSON).toConstantValue(JSON);
+    container.bind(JSONSerializer, JSON);
+    container.bind(IOCIdentifier.JSON, JSON);
 
-    container.bind(Logger).toConstantValue(logger);
-    container.bind(IOCIdentifier.Logger).toConstantValue(logger);
+    container.bind(Logger, logger);
+    container.bind(IOCIdentifier.Logger, logger);
 
-    container.bind(JSONStorage).toConstantValue(localJsonStorage);
-    container.bind(IOCIdentifier.JSONStorage).toConstantValue(localJsonStorage);
+    container.bind(JSONStorage, localJsonStorage);
+    container.bind(IOCIdentifier.JSONStorage, localJsonStorage);
   }
 }

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

@@ -1,18 +1,32 @@
-import type { InversifyRegisterInterface } from '@/base/port/InversifyIocInterface';
 import { RegisterGlobals } from './RegisterGlobals';
 import { RegisterCommon } from './RegisterCommon';
 import { RegisterApi } from './RegisterApi';
 import { RegisterControllers } from './RegisterControllers';
-import AppConfig from '../AppConfig';
+import {
+  InversifyContainer,
+  InversifyRegisterInterface,
+  IocRegisterOptions
+} from '../IOC';
+import { IOCManagerInterface } from '@qlover/corekit-bridge';
 
-/**
- * Register List
- *
- * Register List is used to register dependencies in bootstrap
- */
-export const registerList: InversifyRegisterInterface[] = [
-  new RegisterGlobals(AppConfig),
-  new RegisterCommon(),
-  new RegisterApi(),
-  new RegisterControllers()
-];
+export class IocRegister implements InversifyRegisterInterface {
+  constructor(protected options: IocRegisterOptions) {}
+
+  getRegisterList(): InversifyRegisterInterface[] {
+    return [
+      new RegisterGlobals(),
+      new RegisterCommon(),
+      new RegisterApi(),
+      new RegisterControllers()
+    ];
+  }
+
+  register(
+    ioc: InversifyContainer,
+    manager: IOCManagerInterface<InversifyContainer>
+  ): void {
+    this.getRegisterList().forEach((register) => {
+      register.register(ioc, manager, this.options);
+    });
+  }
+}

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

@@ -6,7 +6,7 @@ import App from './App.tsx';
 import startup from './core/bootstrap';
 
 startup({
-  window: window,
+  root: window,
   envSource: import.meta.env
 });
 

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

@@ -5,7 +5,7 @@ export default function NotFound({ route }: { route?: string }) {
   return (
     <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
       <div className="relative py-3 mx-auto sm:max-w-xl">
-        <h1 className="text-primary text-2xl font-bold text-center">
+        <h1 className="text-text text-2xl font-bold text-center">
           404 -{route ? `${t('404.notComponent')}: ${route}` : t('404.notPage')}
         </h1>
       </div>

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

@@ -5,7 +5,7 @@ export default function NotFound500() {
   return (
     <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
       <div className="relative py-3 mx-auto sm:max-w-xl">
-        <h1 className="text-primary text-2xl font-bold text-center">
+        <h1 className="text-text text-2xl font-bold text-center">
           500 - {t('500.title')}
         </h1>
       </div>