@qlover/create-app 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @qlover/create-app
 
+## 0.4.4
+
+### Patch Changes
+
+#### ✨ Features
+
+- **create-app:** add error identifiers and localization support for new components ([0ec3780](https://github.com/qlover/fe-base/commit/0ec3780a7972acd855e1b4d2ae866575534dc094)) ([#434](https://github.com/qlover/fe-base/pull/434))
+
+  - Introduced new error identifiers in Error.ts for handling various application states, including IOC not implemented and token absence.
+  - Added extensive localization keys in I18n.ts for various pages and components, enhancing user experience across different languages.
+  - Improved error handling and messaging consistency throughout the application.
+
+  This update enhances the application's localization capabilities and error management, providing clearer feedback to users.
+
+- **create-app:** enhance TypeScript configuration and linting ([f049395](https://github.com/qlover/fe-base/commit/f049395c90ee2c13a33d7358098a87251ef40913)) ([#434](https://github.com/qlover/fe-base/pull/434))
+
+  - Updated the TypeScript configuration by introducing a new `tsconfig.app.json` for better modularity and organization.
+  - Modified `tsconfig.json` to reference the new app configuration and streamline project structure.
+  - Enhanced `tsconfig.node.json` with improved compiler options for better compatibility and performance.
+  - Updated linting script in `package.json` to include TypeScript checks alongside ESLint, ensuring code quality and type safety.
+  - Refactored imports in `RequestLogger.ts` and `ThemeSwitcher.tsx` to use type imports for better clarity and performance.
+
+  This update improves the TypeScript setup and linting process, enhancing code quality and maintainability across the application.
+
+#### ♻️ Refactors
+
+- **create-app:** remove unused error identifiers and localization keys ([3b19f19](https://github.com/qlover/fe-base/commit/3b19f193b839c1e97fa727c1847a4bbd5ff84211)) ([#434](https://github.com/qlover/fe-base/pull/434))
+
+  - Deleted Error.ts and I18n.ts files as they contained unused error identifiers and localization keys.
+  - This cleanup improves the overall codebase by removing unnecessary files, enhancing maintainability and reducing clutter.
+
+  This update streamlines the application by eliminating redundant localization and error handling resources.
+
+## 0.4.3
+
+### Patch Changes
+
+#### ✨ Features
+
+- **create-app:** enhance environment configuration and localization support ([76e5e22](https://github.com/qlover/fe-base/commit/76e5e22e41fe23ce109c303ca3974103f8a85cf6)) ([#432](https://github.com/qlover/fe-base/pull/432))
+
+  - Updated .gitignore to include .env files and added .env.template to the repository.
+  - Introduced a new .env.template file for environment variable configuration in the react-app template.
+  - Enhanced package.json scripts for development modes: added staging and production modes.
+  - Updated README.md to document environment variable usage with Vite.
+  - Added new error identifiers for token handling in Error.ts and updated UserService to utilize these identifiers.
+  - Improved localization files to include new keys for error messages related to token absence.
+
+  This update improves the application's configuration management and localization, enhancing developer experience and user feedback.
+
 ## 0.4.2
 
 ### Patch Changes

package/configs/_common/.gitignore.template

@@ -1,32 +1,58 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.*
+!.env.template
+
+# vercel
+.vercel
 
-node_modules
-dist
-dist-ssr
-*.local
 # typescript
 *.tsbuildinfo
+next-env.d.ts
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.husky
+!packages/create-app/configs/_common/.husky
+public/robots.txt
+public/sitemap*.xml
+dist
+.eslintcache
+.npmrc
+.secrets
+
+# local output dir
+*.output/
 
-# lock
+# lock file
+package-lock.json
 yarn.lock
-pnpm-lock.yaml
-pnpm-lock.yml
-package-lock.json
+
+rollup.config-*.*js
+
+.nx/cache
+.nx/workspace-data

package/dist/index.js

@@ -2378,7 +2378,7 @@ var Generator = class {
 
 // package.json
 var package_default = {
-  version: "0.4.2",
+  version: "0.4.4",
   description: "Create a new app with a single command"};
 function programArgs() {
   const program = new Command();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Create a new app with a single command",
   "private": false,
   "type": "module",

package/templates/react-app/{.env → .env.template}

@@ -15,7 +15,7 @@ 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://api.openai.com/v1
+VITE_OPEN_AI_BASE_URL=
 VITE_OPEN_AI_TOKEN=sk-proj-1234567890
 VITE_OPEN_AI_TOKEN_PREFIX=Bearer
 VITE_OPEN_AI_REQUIRE_TOKEN=true

package/templates/react-app/README.md

@@ -72,6 +72,25 @@ pnpm test
 - 支持服务自动注册和依赖管理
 - 提供完整的类型推导
 
+### env 配置注入
+
+[vite 环境变量和模式](https://cn.vite.dev/guide/env-and-mode#env-variables-and-modes)
+
+`vite dev` 默认 NODE_ENV 表示为 development, 他会加载可能的 `.env[mode]` 文件, 比如 .env.local -> .env
+
+`vite build`默认 NODE_ENV 表示为 production, 他会加载可能的 `.env[mode]` 文件, 比如 .env.production -> .env
+
+Nodejs NODE_ENV 只支持 development,production,test
+
+这个和 vite 中的 mode 是完全不一样的, mode 可以根据 `--mode` 指定不同模式，来加载不同的 env 配置
+
+比如:
+
+```bash
+vite dev --mode staging # 加载 .env.staging
+vite dev --mode local # 加载 .env.local
+```
+
 ### 国际化支持
 
 - 基于 i18next 的完整国际化解决方案

package/templates/react-app/config/{identifier → Identifier}/Error.ts

@@ -25,3 +25,10 @@ export const GLOBAL_NO_WINDOW = 'err.global.no.window';
  * @localEn Must be used in PageProvider
  */
 export const WITHIN_PAGE_PROVIDER = 'err.within.page.provider';
+
+/**
+ * @description 响应内容没有 token 值
+ * @localZh 响应内容没有 token 值
+ * @localEn Response not token value
+ */
+export const RES_NO_TOKEN = 'response.no.token';

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

@@ -8,9 +8,17 @@
     "email": "john.doe@example.com",
     "picture": "https://randomuser.me/api/portraits/men/1.jpg"
   },
+  "GET /api/userinfo": {
+    "name": "John Doe",
+    "email": "john.doe@example.com",
+    "picture": "https://randomuser.me/api/portraits/men/1.jpg"
+  },
   "POST https://feapi.example.com/api/login": {
     "token": "asdfasdf123123asdfasdf"
   },
+  "POST /api/login": {
+    "token": "/api/login-token-adfasdfasdf"
+  },
   "POST https://api.openai.com/v1/chat/completions": {
     "id": "chatcmpl-1234567890",
     "object": "chat.completion",

package/templates/react-app/package.json

@@ -43,9 +43,11 @@
     "fe-release": "./bin/release.js"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --mode localhost",
+    "dev:staging": "vite --mode staging",
+    "dev:prod": "vite --mode production",
     "build": "vite build",
-    "lint": "eslint ./src --fix",
+    "lint": "tsc -b --noEmit && eslint ./src --fix",
     "prettier": "prettier --write ./src",
     "preview": "vite preview",
     "test": "vitest run"

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

@@ -193,5 +193,6 @@
   "page.404.title": "404 - Page Not Found",
   "page.500.title": "500 - Server Error",
   "page.login.title": "Login",
-  "page.register.title": "Register"
+  "page.register.title": "Register",
+  "response.no.token": "Response not token value"
 }

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

@@ -193,5 +193,6 @@
   "page.404.title": "404 - 页面未找到",
   "page.500.title": "500 - 服务器错误",
   "page.login.title": "登录",
-  "page.register.title": "注册"
+  "page.register.title": "注册",
+  "response.no.token": "响应内容没有 token 值"
 }

package/templates/react-app/src/base/cases/AppConfig.ts

@@ -51,7 +51,7 @@ export class AppConfig implements EnvConfigInterface {
    * Storage key for user authentication token
    * @description Injected from VITE_USER_TOKEN_STORAGE_KEY environment variable
    */
-  readonly userTokenStorageKey = '';
+  readonly userTokenStorageKey = '__fe_user_token__';
 
   /**
    * Available OpenAI model configurations

package/templates/react-app/src/base/cases/RequestLogger.ts

@@ -10,7 +10,8 @@ import {
   type ApiCatchPluginResponse
 } from '@qlover/corekit-bridge';
 import { injectable, inject } from 'inversify';
-import { LoggerInterface } from '@qlover/logger';
+import type { LoggerInterface } from '@qlover/logger';
+
 @injectable()
 export class RequestLogger
   implements ExecutorPlugin<RequestAdapterFetchConfig>

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

@@ -10,8 +10,8 @@ import { IOCIdentifier } from '@/core/IOC';
 import { LoginInterface, RegisterFormData } from '@/base/port/LoginInterface';
 import { UserApi } from '@/base/apis/userApi/UserApi';
 import { AppError } from '@/base/cases/AppError';
-import { LOCAL_NO_USER_TOKEN } from '@config/Identifier/Error';
 import { StoreInterface, StoreStateInterface } from '../port/StoreInterface';
+import * as errKeys from '@config/Identifier/Error';
 
 class UserServiceState implements StoreStateInterface {
   success: boolean = false;
@@ -48,8 +48,10 @@ export class UserService
   async onBefore(): Promise<void> {
     await ThreadUtil.sleep(1000);
 
-    if (!this.userToken.getToken()) {
-      throw new AppError(LOCAL_NO_USER_TOKEN);
+    const userToken = this.userToken.getToken();
+
+    if (!userToken) {
+      throw new AppError(errKeys.LOCAL_NO_USER_TOKEN);
     }
 
     const userInfo = await this.userApi.getUserInfo();
@@ -81,6 +83,10 @@ export class UserService
       throw response.apiCatchResult;
     }
 
+    if (!response.data.token) {
+      throw new AppError(errKeys.RES_NO_TOKEN);
+    }
+
     this.userToken.setToken(response.data.token);
 
     const userInfo = await this.userApi.getUserInfo();

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

@@ -2,6 +2,7 @@ import { IOC } from '@/core/IOC';
 import { UserService } from '@/base/services/UserService';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useStore } from '@/uikit/hooks/useStore';
+import BaseHeader from '../base/components/BaseHeader';
 
 export default function Layout() {
   const userService = IOC(UserService);
@@ -12,5 +13,12 @@ export default function Layout() {
     return <Navigate to="/" replace />;
   }
 
-  return <Outlet />;
+  return (
+    <>
+      <BaseHeader />
+      <div className="flex-1">
+        <Outlet />
+      </div>
+    </>
+  );
 }

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

@@ -2,9 +2,9 @@
   --color-primary: rgba(var(--color-bg-base));
   --color-secondary: rgba(var(--color-bg-secondary));
   --color-elevated: rgba(var(--color-bg-elevated));
-  --color-text: rgba(var(--color-text-primary));
-  --color-text-secondary: rgba(var(--color-text-secondary));
-  --color-text-tertiary: rgba(var(--color-text-tertiary));
+  --color-text: rgba(var(--text-primary));
+  --color-text-secondary: rgba(var(--text-secondary));
+  --color-text-tertiary: rgba(var(--text-tertiary));
   --color-border: rgba(var(--color-border));
   --color-brand: rgba(var(--color-brand));
   --color-brand-hover: rgba(var(--color-brand-hover));

package/templates/react-app/src/styles/css/themes/_default.css

@@ -7,9 +7,9 @@
     --color-bg-elevated: 248 250 252; /* slate-50 */
 
     /* 文字颜色 */
-    --color-text-primary: 15 23 42; /* slate-900 */
-    --color-text-secondary: 71 85 105; /* slate-600 */
-    --color-text-tertiary: 100 116 139; /* slate-500 */
+    --text-primary: 15 23 42; /* slate-900 */
+    --text-secondary: 71 85 105; /* slate-600 */
+    --text-tertiary: 100 116 139; /* slate-500 */
 
     /* 边框颜色 */
     --color-border: 226 232 240; /* slate-200 */

package/templates/react-app/src/styles/css/themes/dark.css

@@ -7,9 +7,9 @@
     --color-bg-elevated: 51 65 85; /* slate-700 */
 
     /* 文字颜色 */
-    --color-text-primary: 255 255 255;
-    --color-text-secondary: 148 163 184; /* slate-400 */
-    --color-text-tertiary: 100 116 139; /* slate-500 */
+    --text-primary: 255 255 255;
+    --text-secondary: 148 163 184; /* slate-400 */
+    --text-tertiary: 100 116 139; /* slate-500 */
 
     /* 边框颜色 */
     --color-border: 51 65 85; /* slate-700 */

package/templates/react-app/src/styles/css/themes/pink.css

@@ -7,9 +7,9 @@
     --color-bg-elevated: 254 205 211; /* rose-200 */
 
     /* 文字颜色 */
-    --color-text-primary: 190 18 60; /* rose-700 */
-    --color-text-secondary: 225 29 72; /* rose-600 */
-    --color-text-tertiary: 244 63 94; /* rose-500 */
+    --text-primary: 190 18 60; /* rose-700 */
+    --text-secondary: 225 29 72; /* rose-600 */
+    --text-tertiary: 244 63 94; /* rose-500 */
 
     /* 边框颜色 */
     --color-border: 254 205 211; /* rose-200 */

package/templates/react-app/src/uikit/components/ThemeSwitcher.tsx

@@ -1,5 +1,5 @@
 import { IOC } from '@/core/IOC';
-import { ThemeService } from '@qlover/corekit-bridge';
+import { ThemeService, ThemeServiceState } from '@qlover/corekit-bridge';
 import { useStore } from '@/uikit/hooks/useStore';
 import { useTranslation } from 'react-i18next';
 import { Select } from 'antd';
@@ -12,6 +12,7 @@ import {
 import clsx from 'clsx';
 import { useMemo } from 'react';
 import * as i18nKeys from '@config/Identifier/I18n';
+import { StoreInterface } from '@/base/port/StoreInterface';
 
 const colorMap: Record<
   string,
@@ -36,7 +37,9 @@ const colorMap: Record<
 
 export default function ThemeSwitcher() {
   const themeService = IOC(ThemeService);
-  const { theme } = useStore(themeService);
+  const { theme } = useStore(
+    themeService as unknown as StoreInterface<ThemeServiceState>
+  );
   const themes = themeService.getSupportedThemes();
   const { t } = useTranslation('common');
 

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

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "baseUrl": ".",
+    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@config/*": ["./config/*"],
+      "@lib/*": ["./lib/*"]
+    }
+  },
+  "include": ["src", "config"]
+}

package/templates/react-app/tsconfig.json

@@ -1,30 +1,10 @@
 {
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "types": ["vite/client"],
-    "paths": {
-      "@/*": ["./src/*"],
-      "@config/*": ["./config/*"],
-      "@lib/*": ["./lib/*"]
-    },
     "experimentalDecorators": true
-  },
-  "include": ["src", "lib/**/*.tsx"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  }
 }

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

@@ -1,14 +1,24 @@
 {
   "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
     "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "paths": {
-      "@config/*": ["./config/*"]
-    }
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts", "config", "lib"],
-  "exclude": ["lib/**/*.tsx"]
+  "include": ["vite.config.ts"]
 }