@qlover/create-app 0.1.15 → 0.1.16

package/templates/react-app/src/uikit/controllers/RequestController.ts

@@ -1,7 +1,10 @@
-import { OpenAIClient } from '@lib/openAiApi/OpenAIClient';
-import { FeController } from '@lib/fe-react-controller';
-import { FeApi } from '@/base/apis/feApi';
+import { FeApi } from '@/base/apis/feApi/FeApi';
 import { logger } from '@/core/globals';
+import { UserApi } from '@/base/apis/userApi/UserApi';
+import { aiHello } from '@/base/apis/AiApi';
+import { inject } from 'inversify';
+import { injectable } from 'inversify';
+import { SliceStore } from '@qlover/slice-store-react';
 
 function createDefaultState() {
   return {
@@ -24,25 +27,39 @@ function createDefaultState() {
       loading: false,
       result: null as unknown,
       error: null as unknown
+    },
+    apiCatchResultState: {
+      loading: false,
+      result: null as unknown,
+      error: null as unknown
     }
   };
 }
 
 export type RequestControllerState = ReturnType<typeof createDefaultState>;
 
-export class RequestController extends FeController<RequestControllerState> {
+@injectable()
+export class RequestController extends SliceStore<RequestControllerState> {
   constructor(
-    private readonly aiApi: OpenAIClient,
-    private readonly feApi: FeApi
+    @inject(FeApi) private readonly feApi: FeApi,
+    @inject(UserApi) private readonly userApi: UserApi
   ) {
     super(createDefaultState);
   }
 
+  setState(state: Partial<RequestControllerState>): void {
+    this.emit({ ...this.state, ...state });
+  }
+
   onHello = async () => {
+    if (this.state.helloState.loading) {
+      return;
+    }
+
     this.setState({ helloState: { loading: true, result: '', error: null } });
 
     try {
-      const result = await this.aiApi.completion({
+      const result = await aiHello({
         messages: [{ role: 'user', content: 'Hello, world!' }]
       });
       this.setState({ helloState: { loading: false, result, error: null } });
@@ -53,9 +70,14 @@ export class RequestController extends FeController<RequestControllerState> {
   };
 
   onIpInfo = async () => {
+    if (this.state.ipInfoState.loading) {
+      return;
+    }
+
     this.setState({
       ipInfoState: { loading: true, result: null, error: null }
     });
+
     try {
       const result = await this.feApi.getIpInfo();
       this.setState({ ipInfoState: { loading: false, result, error: null } });
@@ -66,11 +88,15 @@ export class RequestController extends FeController<RequestControllerState> {
   };
 
   onRandomUser = async () => {
+    if (this.state.randomUserState.loading) {
+      return;
+    }
+
     this.setState({
       randomUserState: { loading: true, result: null, error: null }
     });
     try {
-      const result = await this.feApi.getRandomUser();
+      const result = await this.userApi.getRandomUser();
       this.setState({
         randomUserState: { loading: false, result, error: null }
       });
@@ -82,6 +108,30 @@ export class RequestController extends FeController<RequestControllerState> {
     }
   };
 
+  onTriggerApiCatchResult = async () => {
+    if (this.state.apiCatchResultState.loading) {
+      return;
+    }
+
+    this.setState({
+      apiCatchResultState: { loading: true, result: null, error: null }
+    });
+    try {
+      const result = await this.userApi.testApiCatchResult();
+      this.setState({
+        apiCatchResultState: {
+          loading: false,
+          result,
+          error: result.apiCatchResult
+        }
+      });
+    } catch (error) {
+      this.setState({
+        apiCatchResultState: { loading: false, result: null, error }
+      });
+    }
+  };
+
   onTriggerAbortRequest = async () => {
     if (this.state.abortState.loading) {
       this.stopAbortRequest();
@@ -90,9 +140,11 @@ export class RequestController extends FeController<RequestControllerState> {
 
     this.setState({ abortState: { loading: true, result: null, error: null } });
     try {
-      await this.feApi.request({
+      await this.userApi.request({
         method: 'GET',
-        url: 'https://api.example.com/users'
+        url: 'https://api.example.com/users',
+        disabledMock: true,
+        requestId: 'onTriggerAbortRequest'
       });
     } catch (error) {
       this.setState({ abortState: { loading: false, result: null, error } });
@@ -100,6 +152,8 @@ export class RequestController extends FeController<RequestControllerState> {
   };
 
   stopAbortRequest = async () => {
-    this.feApi.stop({ method: 'GET', url: 'https://api.example.com/users' });
+    this.userApi.stop({
+      requestId: 'onTriggerAbortRequest'
+    });
   };
 }

package/templates/react-app/src/uikit/controllers/RouterController.ts

@@ -1,16 +1,17 @@
-import { I18nService } from '@/services/I18nService';
-import { UIDependenciesInterface } from '@/base/port/UIDependenciesInterface';
-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';
+import type { RouteConfigValue } from '@/base/cases/router-loader';
+import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
+import type { UIDependenciesInterface } from '@/base/port/UIDependenciesInterface';
+import { I18nService } from '@/base/services/I18nService';
+import { Logger } from '@qlover/fe-corekit';
 
 export type RouterControllerDependencies = {
   navigate: NavigateFunction;
 };
 
 export type RouterControllerOptions = {
-  config: RouteConfig;
+  config: {
+    routes: RouteConfigValue[];
+  };
   logger: Logger;
 };
 

package/templates/react-app/src/uikit/controllers/UserController.ts

@@ -1,66 +1,58 @@
-import { ExecutorPlugin } from '@qlover/fe-utils';
-import { sleep } from '@/uikit/utils/thread';
-import { FeController } from '@lib/fe-react-controller';
-import { FeApi } from '@/base/apis/feApi';
-import { FeApiGetUserInfo, FeApiLogin } from '@/base/apis/feApi/FeApiType';
+import { ExecutorPlugin } from '@qlover/fe-corekit';
+import type {
+  UserApiGetUserInfoTransaction,
+  UserApiLoginTransaction
+} from '@/base/apis/userApi/UserApiType';
 import { RouterController } from './RouterController';
-import { StorageTokenInterface } from '@/base/port/StorageTokenInterface';
-
-export interface UserControllerState {
-  success: boolean;
-  userInfo: FeApiGetUserInfo['response']['data'];
-}
-
-export interface UserControllerOptions {
-  userToken: StorageTokenInterface;
-  feApi: FeApi;
-  routerController: RouterController;
-}
-
-interface LoginInterface {
-  login(
-    params: FeApiLogin['request']
-  ): Promise<FeApiGetUserInfo['response']['data']>;
-  logout(): void;
-}
-
-function createDefaultState(
-  options: UserControllerOptions
-): UserControllerState {
-  const { userToken } = options;
-  const token = userToken.getToken();
-
-  return {
-    success: !!token,
-    userInfo: {
-      name: '',
-      email: '',
-      picture: ''
-    }
+import { ThreadUtil, type StorageTokenInterface } from '@qlover/corekit-bridge';
+import { inject, injectable } from 'inversify';
+import { IOCIdentifier } from '@/core/IOC';
+import { LoginInterface } from '@/base/port/LoginInterface';
+import { UserApi } from '@/base/apis/userApi/UserApi';
+import { AppError } from '@/base/cases/appError/AppError';
+import { LOCAL_NO_USER_TOKEN } from '@config/ErrorIdentifier';
+import { SliceStore } from '@qlover/slice-store-react';
+
+class UserControllerState {
+  success: boolean = false;
+  userInfo: UserApiGetUserInfoTransaction['response']['data'] = {
+    name: '',
+    email: '',
+    picture: ''
   };
 }
 
+@injectable()
 export class UserController
-  extends FeController<UserControllerState>
+  extends SliceStore<UserControllerState>
   implements ExecutorPlugin, LoginInterface
 {
   readonly pluginName = 'UserController';
 
-  constructor(private options: UserControllerOptions) {
-    super(() => createDefaultState(options));
+  constructor(
+    @inject(UserApi) private userApi: UserApi,
+    @inject(RouterController) private routerController: RouterController,
+    @inject(IOCIdentifier.FeApiToken)
+    private userToken: StorageTokenInterface<string>
+  ) {
+    super(() => new UserControllerState());
+  }
+
+  setState(state: Partial<UserControllerState>): void {
+    this.emit({ ...this.state, ...state });
   }
 
   /**
    * @override
    */
   async onBefore(): Promise<void> {
-    await sleep(1000);
+    await ThreadUtil.sleep(1000);
 
-    if (!this.options.userToken.getToken()) {
-      throw new Error('User not logged in');
+    if (!this.userToken.getToken()) {
+      throw new AppError(LOCAL_NO_USER_TOKEN);
     }
 
-    const userInfo = await this.options.feApi.getUserInfo();
+    const userInfo = await this.userApi.getUserInfo();
 
     this.setState({
       success: true,
@@ -74,29 +66,31 @@ export class UserController
   async onError(): Promise<void> {
     this.logout();
 
-    this.options.routerController.gotoLogin();
+    this.routerController.gotoLogin();
   }
 
   /**
    * @override
    */
   async login(
-    params: FeApiLogin['request']
-  ): Promise<FeApiGetUserInfo['response']['data']> {
-    const { feApi } = this.options;
+    params: UserApiLoginTransaction['data']
+  ): Promise<UserApiGetUserInfoTransaction['response']> {
+    const response = await this.userApi.login(params);
 
-    const result = await feApi.login(params);
+    if (response.apiCatchResult) {
+      throw response.apiCatchResult;
+    }
 
-    this.options.userToken.setToken(result.data.token);
+    this.userToken.setToken(response.data.token);
 
-    const userInfo = await feApi.getUserInfo();
+    const userInfo = await this.userApi.getUserInfo();
 
     this.setState({
       success: true,
       userInfo: userInfo.data
     });
 
-    return userInfo.data;
+    return userInfo;
   }
 
   /**
@@ -110,7 +104,7 @@ export class UserController
    * @override
    */
   reset(): void {
-    this.options.userToken.removeToken();
+    this.userToken.removeToken();
     super.reset();
   }
 

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

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

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

@@ -2,12 +2,12 @@ import { createContext, useEffect } from 'react';
 import { IOC } from '@/core/IOC';
 import { useLanguageGuard } from '@/uikit/hooks/useLanguageGuard';
 import { useStrictEffect } from '@/uikit/hooks/useStrictEffect';
-import { ProcesserService } from '@/services/processer/ProcesserService';
+import { ProcesserService } from '@/base/services/ProcesserService';
 import { Navigate, useNavigate } from 'react-router-dom';
-import { useControllerState } from '@lib/fe-react-controller';
-import { Loading } from '@/components/Loading';
+import { Loading } from '@/uikit/components/Loading';
 import { RouterController } from '../controllers/RouterController';
 import { UserController } from '../controllers/UserController';
+import { useSliceStore } from '@qlover/slice-store-react';
 
 const PageProcesserContext = createContext<ProcesserService>(
   IOC(ProcesserService)
@@ -17,7 +17,7 @@ export function ProcessProvider({ children }: { children: React.ReactNode }) {
   useLanguageGuard();
   const userController = IOC(UserController);
   const pageProcesser = IOC(ProcesserService);
-  const { success } = useControllerState(userController);
+  const success = useSliceStore(userController, (state) => state.success);
 
   const navigate = useNavigate();
 

package/templates/react-app/src/uikit/styles/css/index.css

@@ -1,2 +1,2 @@
 @import './tailwind.css';
-@import './page.css';
+@import './page.css';

package/templates/react-app/src/uikit/styles/css/page.css

@@ -1,3 +1,3 @@
 html {
   @apply bg-white;
-}
+}

package/templates/react-app/tailwind.config.js

@@ -1,5 +1,5 @@
-import root10px from './lib/tw-root10px';
-import themeCreate from './lib/fe-react-theme/tw-generator';
+import root10px from './lib/tailwind/root10px';
+import themeCreate from './lib/tailwind/theme-generator';
 import themeConfig from './config/theme.json';
 
 const theme = themeCreate(themeConfig.override);

package/templates/react-app/tsconfig.json

@@ -20,7 +20,6 @@
     "types": ["vite/client"],
     "paths": {
       "@/*": ["./src/*"],
-      "@lib/*": ["./lib/*"],
       "@config/*": ["./config/*"]
     },
     "experimentalDecorators": true

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

@@ -6,9 +6,8 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "paths": {
-      "@lib/*": ["./lib/*"],
       "@config/*": ["./config/*"]
     }
   },
-  "include": ["vite.config.ts", "lib", "config"]
+  "include": ["vite.config.ts", "fe-prod", "config"]
 }

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

@@ -1,38 +1,33 @@
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
-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('/*', ''));
-  return acc;
-}, {});
+import tsconfigPaths from 'vite-tsconfig-paths';
+import envConfig from '@qlover/corekit-bridge/build/vite-env-config';
+import ts2Locales from '@qlover/corekit-bridge/build/vite-ts-to-locales';
+import i18nConfig from './config/i18n';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
+    envConfig({
+      envPops: true,
+      envPrefix,
+      records: [
+        ['APP_NAME', name],
+        ['APP_VERSION', version]
+      ]
+    }),
     react(),
-    alias({
-      entries
+    tsconfigPaths(),
+    ts2Locales({
+      locales: i18nConfig.supportedLngs as unknown as string[],
+      options: [
+        {
+          source: './config/ErrorIdentifier.ts',
+          target: './public/locales/{{lng}}/common.json'
+        }
+      ]
     })
   ],
   envPrefix: envPrefix,

package/templates/react-app/.env.local

@@ -1,24 +0,0 @@
-NODE_ENV=local
-
-# ci
-NPM_TOKEN=
-GITHUB_TOKEN=
-
-# fe-scripts
-FE_RELEASE_BRANCH=master
-FE_RELEASE=false
-FE_RELEASE_ENV=production
-
-# ===== build
-VITE_PUBLIC_PATH=
-VITE_SERVER_PORT=3200
-
-# ===== app config
-VITE_USER_TOKEN_STORAGE_KEY=fe_user_token
-VITE_OPEN_AI_MODELS='["gpt-4o-mini","gpt-3.5-turbo","gpt-3.5-turbo-2","gpt-4","gpt-4-32k"]'
-VITE_OPEN_AI_BASE_URL=https://openai-proxy.brain.loocaa.com:1443/v1/
-VITE_OPEN_AI_TOKEN=DlJYSkMVj1x4zoe8jZnjvxfHG6z5yGxK
-VITE_OPEN_AI_TOKEN_PREFIX=Bearer
-VITE_OPEN_AI_REQUIRE_TOKEN=true
-VITE_LOGIN_USER=admin
-VITE_LOGIN_PASSWORD=123456

package/templates/react-app/lib/bootstrap/Bootstrap.ts

@@ -1,36 +0,0 @@
-import type { IOCContainerInterface } from './IOCContainerInterface';
-import { SyncExecutor } from '@qlover/fe-utils';
-import { BootstrapExecutorPlugin } from './BootstrapExecutorPlugin';
-
-export class Bootstrap extends SyncExecutor {
-  constructor(private IOCContainer: IOCContainerInterface) {
-    super();
-  }
-
-  getIOCContainer(): IOCContainerInterface {
-    return this.IOCContainer;
-  }
-
-  use(plugin: BootstrapExecutorPlugin | BootstrapExecutorPlugin[]): this {
-    if (Array.isArray(plugin)) {
-      plugin.forEach((p) => super.use(p));
-      return this;
-    }
-
-    super.use(plugin);
-
-    return this;
-  }
-
-  start(root: unknown): void {
-    this.exec({ root, ioc: this.IOCContainer }, () => {
-      // nothing to do
-    });
-  }
-
-  startNoError(root: unknown): void {
-    this.execNoError({ root, ioc: this.IOCContainer }, () => {
-      // nothing to do
-    });
-  }
-}

package/templates/react-app/lib/bootstrap/BootstrapExecutorPlugin.ts

@@ -1,20 +0,0 @@
-import { IOCContainerInterface } from './IOCContainerInterface';
-import { ExecutorContext, ExecutorPlugin } from '@qlover/fe-utils';
-
-export type BootstrapArgs = {
-  /**
-   * starup global object
-   *
-   * maybe window or globalThis
-   */
-  root: unknown;
-  /**
-   * IOC container
-   */
-  ioc: IOCContainerInterface;
-};
-
-export interface BootstrapExecutorPlugin
-  extends ExecutorPlugin<BootstrapArgs> {}
-
-export type BootstrapContext = ExecutorContext<BootstrapArgs>;

package/templates/react-app/lib/bootstrap/IOCContainerInterface.ts

@@ -1,33 +0,0 @@
-/**
- * IOC container
- *
- */
-export interface IOCContainerInterface {
-  /**
-   * configure IOC container
-   *
-   * eg. may need to manually bind implementation classes
-   */
-  configure(): void;
-  configure<Container>(registers?: IOCRegisterInterface<Container>[]): void;
-
-  /**
-   * bind instance
-   *
-   * @param serviceIdentifier
-   * @param value
-   */
-  bind<T>(serviceIdentifier: unknown, value: T): void;
-
-  /**
-   * get instance
-   *
-   * @param serviceIdentifier
-   * @returns
-   */
-  get<T>(serviceIdentifier: unknown): T;
-}
-
-export interface IOCRegisterInterface<T> {
-  register(container: T, thisArg: IOCContainerInterface): void;
-}

package/templates/react-app/lib/bootstrap/IOCManagerInterface.ts

@@ -1,12 +0,0 @@
-import type { IOCContainerInterface } from './IOCContainerInterface';
-
-export interface IOCManagerInterface {
-  get<T>(identifier: unknown): T;
-
-  /**
-   * implement IOC container
-   */
-  implement(container: IOCContainerInterface): void;
-
-  get implemention(): IOCContainerInterface | null;
-}

package/templates/react-app/lib/bootstrap/index.ts

@@ -1,7 +0,0 @@
-export * from './Bootstrap';
-export * from './BootstrapExecutorPlugin';
-export * from './plugins/InjectIOC';
-export * from './plugins/InjectEnv';
-export * from './plugins/InjectGlobal';
-export * from './IOCContainerInterface';
-export * from './IOCManagerInterface';

package/templates/react-app/lib/bootstrap/plugins/InjectEnv.ts

@@ -1,61 +0,0 @@
-import type { BootstrapExecutorPlugin } from '../BootstrapExecutorPlugin';
-
-export interface EnvConfigInterface {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-}
-
-export class InjectEnv implements BootstrapExecutorPlugin {
-  readonly pluginName = 'InjectEnv';
-
-  constructor(
-    private target: EnvConfigInterface,
-    private source: Record<string, unknown>,
-    private envPrefix: string = '',
-    private envWhiteList: string[] = ['env', 'userNodeEnv']
-  ) {}
-
-  static isJSONString(value: string): boolean {
-    return (
-      typeof value === 'string' &&
-      value !== '' &&
-      (value === 'true' ||
-        value === 'false' ||
-        value.startsWith('{') ||
-        value.startsWith('['))
-    );
-  }
-
-  env<D>(key: string, defaultValue?: D): D {
-    // transform key to env key
-    const formattedKey = key.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase();
-
-    const envKey = `${this.envPrefix}${formattedKey}`;
-    const value = this.source[envKey];
-    // if it is a json string, parse it
-    if (typeof value === 'string' && InjectEnv.isJSONString(value)) {
-      return JSON.parse(value);
-    }
-
-    return (value ?? defaultValue) as D;
-  }
-
-  inject(config: EnvConfigInterface): void {
-    for (const key in config) {
-      if (this.envWhiteList.includes(key)) {
-        continue;
-      }
-
-      const value = config[key as keyof typeof config];
-
-      config[key as keyof typeof config] = this.env(key, value);
-    }
-  }
-
-  onBefore(): void {
-    this.inject(this.target);
-
-    // transform readonly to writable
-    Object.freeze(this.target);
-  }
-}