@qlover/create-app 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "private": false,
   "main": "./dist/index.cjs",
@@ -26,11 +26,6 @@
   "bin": {
     "create-app": "bin/create-app.js"
   },
-  "scripts": {
-    "build": "rollup -c",
-    "create:app:build": "npm run build && npm run create:app",
-    "create:app": "node ./bin/create-app.js"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/qlover/fe-base.git",
@@ -52,11 +47,16 @@
   },
   "dependencies": {
     "@qlover/fe-corekit": "^1.2.2",
-    "@qlover/scripts-context": "^0.0.8",
+    "@qlover/scripts-context": "^0.0.11",
     "commander": "^13.1.0",
     "ignore": "^7.0.3",
     "inquirer": "^12.3.2",
     "ora": "^8.1.1",
     "lodash": "^4.17.21"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "create:app:build": "npm run build && npm run create:app",
+    "create:app": "node ./bin/create-app.js"
   }
-}
+}

package/templates/node-lib/package.json

@@ -61,6 +61,6 @@
     "rollup-plugin-typescript2": "^0.36.0"
   },
   "dependencies": {
-    "@qlover/fe-utils": "latest"
+    "@qlover/fe-corekit": "latest"
   }
 }

package/templates/pack-app/package.json

@@ -32,7 +32,7 @@
   "devDependencies": {
     "@qlover/fe-scripts": "latest",
     "@qlover/fe-standard": "workspace:*",
-    "@qlover/fe-utils": "latest",
+    "@qlover/fe-corekit": "latest",
     "@qlover/fe-release": "latest",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",

package/templates/react-app/.env

@@ -22,3 +22,4 @@ VITE_OPEN_AI_TOKEN_PREFIX=Bearer
 VITE_OPEN_AI_REQUIRE_TOKEN=true
 VITE_LOGIN_USER=admin
 VITE_LOGIN_PASSWORD=123456
+VITE_FE_API_BASE_URL=https://feapi.example.com/

package/templates/react-app/README.md

@@ -112,7 +112,6 @@
 - Vite
 - Tailwind CSS
 - i18next
-- @qlover/fe-utils
 
 ## 开发
 

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

@@ -0,0 +1,27 @@
+/**
+ * @description IOC 未实现
+ * @localZh IOC 未实现
+ * @localEn IOC not implemented
+ */
+export const APP_IOC_NOT_IMPLEMENTED = 'err.ioc.not.implemented';
+
+/**
+ * @description 本地未找到 user token
+ * @localZh 本地未找到 user token
+ * @localEn Local no user token
+ */
+export const LOCAL_NO_USER_TOKEN = 'err.local.no.user.token';
+
+/**
+ * @description 全局未找到 window
+ * @localZh 全局未找到 window
+ * @localEn Global no window
+ */
+export const GLOBAL_NO_WINDOW = 'err.global.no.window';
+
+/**
+ * @description 必须在 PageProvider 中使用
+ * @localZh 必须在 PageProvider 中使用
+ * @localEn Must be used in PageProvider
+ */
+export const WITHIN_PAGE_PROVIDER = 'err.within.page.provider';

package/templates/react-app/config/app.router.json

@@ -60,6 +60,15 @@
               "localNamespace": "executor"
             }
           },
+          {
+            "path": "errorIdentifier",
+            "element": "base/ErrorIdentifier",
+            "meta": {
+              "title": "FE-Utils ErrorIdentifier",
+              "icon": "info",
+              "localNamespace": "common"
+            }
+          },
           {
             "path": "404",
             "element": "404",

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

@@ -1,3 +1,15 @@
 export const envPrefix = 'VITE_';
 
 export const browserGlobalsName = 'feGlobals';
+
+/**
+ * bootstrap ,not inject env
+ */
+export const envBlackList = ['env', 'userNodeEnv'];
+
+export const loggerStyles = {
+  INFO: 'color: blue;',
+  WARN: 'color: orange; font-weight: bold;',
+  ERROR: 'color: red; font-weight: bold;',
+  DEBUG: 'color: #8d7'
+};

package/templates/react-app/config/feapi.mock.json

@@ -3,12 +3,25 @@
     "mock": true,
     "noUrl": true
   },
-  "GET https://api.example.com/api/userinfo": {
+  "GET https://feapi.example.com/api/userinfo": {
     "name": "John Doe",
     "email": "john.doe@example.com",
     "picture": "https://randomuser.me/api/portraits/men/1.jpg"
   },
-  "POST https://api.example.com/api/login": {
+  "POST https://feapi.example.com/api/login": {
     "token": "asdfasdf123123asdfasdf"
+  },
+  "POST https://api.openai.com/v1/chat/completions": {
+    "id": "chatcmpl-1234567890",
+    "object": "chat.completion",
+    "created": 1721702400,
+    "choices": [
+      {
+        "message": {
+          "role": "assistant",
+          "content": "Hello, how can I help you today?"
+        }
+      }
+    ]
   }
 }

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

@@ -1,14 +1,8 @@
-import { isProduction } from '@/core/globals';
-
-/** @type {import('i18next').InitOptions} */
-export const i18nConfig = {
-  /**
-   * default language
-   */
+export default {
   fallbackLng: 'en',
-  debug: !isProduction,
+  debug: false,
   interpolation: {
-    escapeValue: false // React already does escaping
+    escapeValue: false
   },
   ns: ['common'],
   defaultNS: 'common',
@@ -17,5 +11,3 @@ export const i18nConfig = {
   },
   supportedLngs: ['en', 'zh']
 } as const;
-
-export type I18nServiceLocale = (typeof i18nConfig.supportedLngs)[number];

package/templates/react-app/package.json

@@ -51,7 +51,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@qlover/fe-utils": "latest",
+    "@qlover/corekit-bridge": "^0.0.5",
+    "@qlover/fe-corekit": "^1.2.5",
     "@qlover/slice-store-react": "^1.0.8",
     "i18next": "^24.2.0",
     "i18next-browser-languagedetector": "^8.0.2",
@@ -65,17 +66,16 @@
     "reflect-metadata": "^0.2.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
     "@qlover/env-loader": "latest",
     "@qlover/eslint-plugin-fe-dev": "^0.2.0",
     "@qlover/fe-scripts": "latest",
-    "@rollup/plugin-alias": "^5.1.1",
+    "@qlover/fe-standard": "^0.0.4",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/typo-js": "^1.2.2",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.15.0",
@@ -83,14 +83,17 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-vitest": "^0.5.4",
     "globals": "^15.12.0",
     "postcss": "^8.4.49",
+    "prettier": "^3.5.3",
     "sass-embedded": "^1.79.4",
     "tailwindcss": "^3.4.16",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.15.0",
     "vite": "^5.4.8",
     "vite-plugin-cross-origin-isolation": "^0.1.6",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.5"
   }
 }

package/templates/react-app/public/locales/en/common.json

@@ -2,5 +2,9 @@
   "404.notComponent": "Component not found",
   "404.notPage": "Page not found",
   "500.title": "Server Error",
-  "header.theme.label": "Switch Theme"
-}
+  "header.theme.label": "Switch Theme",
+  "err.ioc.not.implemented": "IOC not implemented",
+  "err.local.no.user.token": "Local no user token",
+  "err.global.no.window": "Global no window",
+  "err.within.page.provider": "Must be used in PageProvider"
+}

package/templates/react-app/public/locales/zh/common.json

@@ -2,6 +2,9 @@
   "404.notComponent": "组件不存在",
   "404.notPage": "页面不存在",
   "500.title": "服务器错误",
-  "header.theme.label": "切换主题"
-}
-
+  "header.theme.label": "切换主题",
+  "err.ioc.not.implemented": "IOC 未实现",
+  "err.local.no.user.token": "本地未找到 user token",
+  "err.global.no.window": "全局未找到 window",
+  "err.within.page.provider": "必须在 PageProvider 中使用"
+}

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

@@ -1,10 +1,10 @@
 import '@/uikit/styles/css/index.css';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { lazy, useMemo } from 'react';
-import { RouterLoader } from '@lib/router-loader/RouterLoader';
-import appConfig from '@config/app.router.json';
-import { RouterRenderComponent } from './components/RouterRenderComponent';
-import { PagesMaps } from './base/types/Page';
+import { RouterRenderComponent } from './uikit/components/RouterRenderComponent';
+import { IOC } from './core/IOC';
+import { RouterController } from './uikit/controllers/RouterController';
+import { RouterLoader, type ComponentValue } from '@/base/cases/router-loader';
 
 function getAllPages() {
   const modules = import.meta.glob('./pages/**/*.tsx');
@@ -17,7 +17,7 @@ function getAllPages() {
         }>
       );
     return acc;
-  }, {} as PagesMaps);
+  }, {} as ComponentValue);
 }
 
 const routerLoader = new RouterLoader({
@@ -27,9 +27,9 @@ const routerLoader = new RouterLoader({
 
 function App() {
   const routerBase = useMemo(() => {
-    const routes = appConfig.base.routes.map((route) =>
-      routerLoader.toRoute(route)
-    );
+    const routes = IOC(RouterController)
+      .getRoutes()
+      .map((route) => routerLoader.toRoute(route));
     const router = createBrowserRouter(routes);
     return router;
   }, []);

package/templates/react-app/src/base/apis/AiApi.ts

@@ -0,0 +1,55 @@
+import AppConfig from '@/core/AppConfig';
+import {
+  FetchURLPlugin,
+  RequestAdapterFetch,
+  RequestScheduler
+} from '@qlover/fe-corekit';
+import {
+  type BootstrapExecutorPlugin,
+  RequestCommonPlugin
+} from '@qlover/corekit-bridge';
+import { RequestLogger } from '../cases/RequestLogger';
+import { IOCIdentifier } from '@/core/IOC';
+
+const apiApiAdapter = new RequestAdapterFetch({
+  baseURL: AppConfig.aiApiBaseUrl
+});
+
+// 使用 RequestScheduler
+const apiApi = new RequestScheduler(apiApiAdapter);
+
+// 直接使用 adapter
+// const apiApi = apiApiAdapter;
+
+export const AiApiBootstarp: BootstrapExecutorPlugin = {
+  pluginName: 'AiApiBootstarp',
+  onBefore({ parameters: { ioc } }) {
+    apiApiAdapter.usePlugin(new FetchURLPlugin());
+    apiApiAdapter.usePlugin(
+      new RequestCommonPlugin({
+        tokenPrefix: AppConfig.aiApiTokenPrefix,
+        token: AppConfig.aiApiToken
+      })
+    );
+    apiApiAdapter.usePlugin(ioc.get(IOCIdentifier.ApiMockPlugin));
+    apiApiAdapter.usePlugin(ioc.get(RequestLogger));
+  }
+};
+
+export function aiHello(data: {
+  messages: { role: string; content: string }[];
+}) {
+  return apiApi.request<
+    typeof data,
+    {
+      id: string;
+      object: string;
+      created: number;
+      choices: { message: { role: string; content: string } }[];
+    }
+  >({
+    url: '/chat/completions',
+    method: 'POST',
+    data
+  });
+}

package/templates/react-app/src/base/apis/feApi/FeApi.ts

@@ -1,51 +1,20 @@
-import {
-  RequestAdapterFetch,
-  RequestAdapterConfig,
-  RequestScheduler,
-  FetchAbortPlugin,
-  RequestAdapterFetchConfig
-} from '@qlover/fe-utils';
-import {
-  FeApiGetIpInfo,
-  FeApiGetRandomUser,
-  FeApiGetUserInfo,
-  FeApiLogin
-} from './FeApiType';
+import { RequestAdapterFetch, RequestScheduler } from '@qlover/fe-corekit';
+import { FeApiGetIpInfo } from './FeApiType';
+import { inject, injectable } from 'inversify';
+import { FeApiAdapter } from './FeApiAdapter';
+import { FeApiConfig } from './FeApiBootstarp';
 
-export class FeApi extends RequestScheduler<RequestAdapterConfig> {
-  private abortPlugin: FetchAbortPlugin;
-
-  constructor({
-    abortPlugin,
-    config
-  }: {
-    abortPlugin: FetchAbortPlugin;
-    config?: Partial<RequestAdapterFetchConfig>;
-  }) {
-    super(new RequestAdapterFetch(config));
-    this.abortPlugin = abortPlugin;
+@injectable()
+export class FeApi extends RequestScheduler<FeApiConfig> {
+  constructor(@inject(FeApiAdapter) adapter: RequestAdapterFetch) {
+    super(adapter);
   }
 
-  stop(config: RequestAdapterConfig): void {
-    this.abortPlugin.abort(config);
-  }
+  stop(_config: FeApiConfig): void {}
 
   async getIpInfo(): Promise<FeApiGetIpInfo['response']> {
-    return this.get('http://ip-api.com/json/');
-  }
-
-  async getRandomUser(): Promise<FeApiGetRandomUser['response']> {
-    return this.get('https://randomuser.me/api/');
-  }
-
-  async getUserInfo(): Promise<FeApiGetUserInfo['response']> {
-    return this.get('/api/userinfo');
-  }
-
-  async login(params: FeApiLogin['request']): Promise<FeApiLogin['response']> {
-    return this.post('/api/login', {
-      // FIXME: RequestAdapterResponse response type error
-      data: params as unknown as FeApiLogin['response']['data']
-    });
+    return this.get('http://ip-api.com/json/') as unknown as Promise<
+      FeApiGetIpInfo['response']
+    >;
   }
 }

package/templates/react-app/src/base/apis/feApi/FeApiAdapter.ts

@@ -0,0 +1,14 @@
+import { IOCIdentifier } from '@/core/IOC';
+import { RequestAdapterFetch } from '@qlover/fe-corekit';
+import { inject, injectable } from 'inversify';
+import { AppConfigImpl } from '@/core/AppConfig';
+
+@injectable()
+export class FeApiAdapter extends RequestAdapterFetch {
+  constructor(@inject(IOCIdentifier.AppConfig) appConfig: AppConfigImpl) {
+    super({
+      responseType: 'json',
+      baseURL: appConfig.feApiBaseUrl
+    });
+  }
+}

package/templates/react-app/src/base/apis/feApi/FeApiBootstarp.ts

@@ -0,0 +1,67 @@
+import type {
+  RequestAdapterConfig,
+  RequestAdapterResponse,
+  RequestTransactionInterface
+} from '@qlover/fe-corekit';
+import { FetchURLPlugin } from '@qlover/fe-corekit';
+import {
+  type BootstrapContext,
+  type BootstrapExecutorPlugin,
+  type ApiMockPluginConfig,
+  ApiPickDataPlugin
+} from '@qlover/corekit-bridge';
+import { FeApi } from './FeApi';
+import { IOCIdentifier } from '@/core/IOC';
+import { RequestLogger } from '@/base/cases/RequestLogger';
+
+/**
+ * FeApiConfig
+ *
+ * @description
+ * FeApiConfig is the config for the FeApi.
+ *
+ * extends:
+ */
+export interface FeApiConfig<Request = unknown>
+  extends RequestAdapterConfig<Request>,
+    ApiMockPluginConfig {}
+
+/**
+ * FeApiResponse
+ *
+ * @description
+ * FeApiResponse is the response for the FeApi.
+ *
+ * extends:
+ * - RequestAdapterResponse<Request, Response>
+ */
+export interface FeApiResponse<Request = unknown, Response = unknown>
+  extends RequestAdapterResponse<Request, Response> {}
+
+/**
+ * FeApi common transaction
+ *
+ * FIXME: maybe we can add data to RequestTransactionInterface
+ *
+ * add data property
+ */
+export interface FeApiTransaction<Request = unknown, Response = unknown>
+  extends RequestTransactionInterface<
+    FeApiConfig<Request>,
+    FeApiResponse<Request, Response>['data']
+  > {
+  data: FeApiConfig<Request>['data'];
+}
+
+export class FeApiBootstarp implements BootstrapExecutorPlugin {
+  readonly pluginName = 'FeApiBootstarp';
+
+  onBefore({ parameters: { ioc } }: BootstrapContext): void {
+    ioc
+      .get<FeApi>(FeApi)
+      .usePlugin(new FetchURLPlugin())
+      .usePlugin(ioc.get(IOCIdentifier.FeApiCommonPlugin))
+      .usePlugin(ioc.get(RequestLogger))
+      .usePlugin(ioc.get(ApiPickDataPlugin));
+  }
+}

package/templates/react-app/src/base/apis/feApi/FeApiType.ts

@@ -1,10 +1,6 @@
-import { RequestAdapterResponse } from '@qlover/fe-utils';
+import { FeApiTransaction } from './FeApiBootstarp';
 
-export type FeApiType<Request, Response> = {
-  request: Request;
-  response: RequestAdapterResponse<Request, Response>;
-};
-export type FeApiGetIpInfo = FeApiType<
+export type FeApiGetIpInfo = FeApiTransaction<
   undefined,
   {
     status: string;
@@ -23,32 +19,3 @@ export type FeApiGetIpInfo = FeApiType<
     query: string;
   }
 >;
-
-export type FeApiGetRandomUser = FeApiType<
-  undefined,
-  {
-    results: unknown[];
-    info: {
-      seed: string;
-      results: number;
-      page: number;
-      version: string;
-    };
-  }
->;
-
-export type FeApiGetUserInfo = FeApiType<
-  string,
-  {
-    name: string;
-    email: string;
-    picture: string;
-  }
->;
-
-export type FeApiLogin = FeApiType<
-  { username: string; password: string },
-  {
-    token: string;
-  }
->;

package/templates/react-app/src/base/apis/userApi/UserApi.ts

@@ -0,0 +1,64 @@
+import {
+  FetchAbortPlugin,
+  RequestAdapterFetch,
+  RequestTransaction
+} from '@qlover/fe-corekit';
+import {
+  GetIpInfoTransaction,
+  UserApiGetUserInfoTransaction,
+  UserApiLoginTransaction,
+  UserApiTestApiCatchResultTransaction
+} from './UserApiType';
+import { inject, injectable } from 'inversify';
+import { UserApiAdapter } from './UserApiAdapter';
+import { UserApiConfig } from './UserApiBootstarp';
+
+/**
+ * UserApi
+ *
+ * @description
+ * UserApi is a client for the user API.
+ *
+ */
+@injectable()
+export class UserApi extends RequestTransaction<UserApiConfig> {
+  constructor(
+    @inject(FetchAbortPlugin) private abortPlugin: FetchAbortPlugin,
+    @inject(UserApiAdapter) adapter: RequestAdapterFetch
+  ) {
+    super(adapter);
+  }
+
+  stop(request: UserApiConfig): Promise<void> | void {
+    this.abortPlugin.abort(request);
+  }
+
+  async getRandomUser(): Promise<GetIpInfoTransaction['response']> {
+    return this.request<GetIpInfoTransaction>({
+      url: 'https://randomuser.me/api/',
+      method: 'GET',
+      disabledMock: true
+    });
+  }
+
+  async testApiCatchResult(): Promise<
+    UserApiTestApiCatchResultTransaction['response']
+  > {
+    return this.request<UserApiTestApiCatchResultTransaction>({
+      url: 'https://randomuser.me/api/?_name=ApiCatchResult',
+      method: 'GET',
+      disabledMock: true,
+      openApiCatch: true
+    });
+  }
+
+  async getUserInfo(): Promise<UserApiGetUserInfoTransaction['response']> {
+    return this.get<UserApiGetUserInfoTransaction>('/api/userinfo');
+  }
+
+  async login(
+    params: UserApiLoginTransaction['data']
+  ): Promise<UserApiLoginTransaction['response']> {
+    return this.post<UserApiLoginTransaction>('/api/login', params);
+  }
+}

package/templates/react-app/src/base/apis/userApi/UserApiAdapter.ts

@@ -0,0 +1,14 @@
+import { IOCIdentifier } from '@/core/IOC';
+import { RequestAdapterFetch } from '@qlover/fe-corekit';
+import { inject, injectable } from 'inversify';
+import { AppConfigImpl } from '@/core/AppConfig';
+
+@injectable()
+export class UserApiAdapter extends RequestAdapterFetch {
+  constructor(@inject(IOCIdentifier.AppConfig) appConfig: AppConfigImpl) {
+    super({
+      responseType: 'json',
+      baseURL: appConfig.feApiBaseUrl
+    });
+  }
+}