@qlover/create-app 0.7.15 → 0.9.0

package/dist/templates/react-app/src/uikit/hooks/useI18nGuard.ts

@@ -1,9 +1,8 @@
-import { I18nServiceLocale } from '@/base/services/I18nService';
-import { IOC } from '@/core/IOC';
 import { IOCIdentifier } from '@config/IOCIdentifier';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import type { LocaleType } from '@config/i18n/i18nConfig';
+import { useIOC } from './useIOC';
 
 /**
  * Language Guard
@@ -13,13 +12,11 @@ import { useParams } from 'react-router-dom';
  * TODO: if language not found, use default language
  */
 export function useI18nGuard() {
-  const { lng } = useParams<{ lng: I18nServiceLocale }>();
+  const { lng } = useParams<{ lng: LocaleType }>();
+  const { pathname } = useLocation();
   const navigate = useNavigate();
-
+  const routeService = useIOC(IOCIdentifier.RouteServiceInterface);
   useEffect(() => {
-    IOC(IOCIdentifier.RouteServiceInterface).i18nGuard(
-      lng as I18nServiceLocale,
-      navigate
-    );
-  }, [lng, navigate]);
+    routeService.i18nGuard(pathname, lng as LocaleType, navigate);
+  }, [lng, navigate, pathname]);
 }

package/dist/templates/react-app/src/uikit/hooks/useI18nInterface.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { TranslateI18nInterface } from '@/base/cases/TranslateI18nInterface';
+import { useAppTranslation } from './useAppTranslation';
+
+/**
+ * Hook to get the i18n interface
+ *
+ * @param i18nInterface - The i18n interface to get
+ * @returns The i18n interface
+ */
+export function useI18nInterface<T extends Record<string, string>>(
+  i18nInterface: T
+): T {
+  const { t } = useAppTranslation('common');
+
+  const i18n = useMemo(() => {
+    if (Object.keys(i18nInterface).length > 0) {
+      return TranslateI18nInterface.translate(i18nInterface, t);
+    }
+
+    return {} as T;
+  }, [i18nInterface, t]);
+
+  return i18n;
+}

package/dist/templates/react-app/src/uikit/hooks/useIOC.ts

@@ -0,0 +1,35 @@
+import { useContext } from 'react';
+import type { IOCIdentifierMap } from '@config/IOCIdentifier';
+import { IOCContext } from './../contexts/IOCContext';
+import type {
+  IOCContainerInterface,
+  IOCFunctionInterface
+} from '@qlover/corekit-bridge';
+
+type IOCIdentifier = keyof IOCIdentifierMap | (new (...args: any[]) => any);
+
+export function useIOC(): IOCFunctionInterface<
+  IOCIdentifierMap,
+  IOCContainerInterface
+>;
+export function useIOC<T extends IOCIdentifier>(
+  identifier: T
+): T extends keyof IOCIdentifierMap
+  ? IOCIdentifierMap[T]
+  : T extends new (...args: any[]) => any
+    ? InstanceType<T>
+    : never;
+
+export function useIOC<T extends IOCIdentifier>(identifier?: T) {
+  const IOC = useContext(IOCContext);
+
+  if (!IOC) {
+    throw new Error('IOC is not found');
+  }
+
+  if (identifier === undefined) {
+    return IOC;
+  }
+
+  return IOC(identifier);
+}

package/dist/templates/react-app/src/uikit/hooks/useNavigateBridge.ts

@@ -1,12 +1,12 @@
-import { IOC } from '@/core/IOC';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useIOC } from './useIOC';
 import { NavigateBridge } from '../bridges/NavigateBridge';
 
 export function useNavigateBridge() {
   const navigate = useNavigate();
-
+  const navigateBridge = useIOC(NavigateBridge);
   useEffect(() => {
-    IOC(NavigateBridge).setUIBridge(navigate);
+    navigateBridge.setUIBridge(navigate);
   }, [navigate]);
 }

package/dist/templates/react-app/src/uikit/hooks/useStrictEffect.ts

@@ -27,6 +27,5 @@ export const useStrictEffect = (
       mountedRef.current = true;
       return effect();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 };

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

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2023"],
+    "types": ["node", "@playwright/test"],
+    "noEmit": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      "@config/*": ["./config/*"]
+    }
+  },
+  "include": ["e2e/**/*.ts", "playwright.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}

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

@@ -1,8 +1,15 @@
 {
   "files": [],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@config/*": ["./config/*"]
+    }
+  },
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" },
-    { "path": "./tsconfig.test.json" }
+    { "path": "./tsconfig.test.json" },
+    { "path": "./tsconfig.e2e.json" }
   ]
 }

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

@@ -20,6 +20,6 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"],
+  "include": ["vite.config.ts", "makes"],
   "exclude": ["node_modules", "dist"]
 }

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

@@ -5,7 +5,9 @@
     "types": ["vitest/globals", "vite/client"],
     "paths": {
       "@/*": ["./src/*"],
-      "@config/*": ["./config/*"]
+      "@config/*": ["./config/*"],
+      "@__tests__/*": ["./__tests__/*"],
+      "@__mocks__/*": ["./__tests__/__mocks__/*"]
     }
   },
   "include": ["__tests__/**/*"],

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

@@ -1,21 +1,19 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import viteDeprecatedAntd from '@brain-toolkit/antd-theme-override/vite';
+import ts2Locales from '@brain-toolkit/ts2locales/vite';
+import envConfig from '@qlover/corekit-bridge/build/vite-env-config';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react-swc';
+import { visualizer } from 'rollup-plugin-visualizer';
+import tsconfigPaths from 'vite-tsconfig-paths';
 import { defineConfig } from 'vitest/config';
-import react from '@vitejs/plugin-react';
 import {
   envPrefix,
   overrideAntdThemeMode,
   routerPrefix
 } from './config/common';
+import { i18nConfig } from './config/i18n/i18nConfig';
+import { generateTs2LocalesOptions } from './makes/generateTs2LocalesOptions';
 import { name, version } from './package.json';
-import tsconfigPaths from 'vite-tsconfig-paths';
-import envConfig from '@qlover/corekit-bridge/build/vite-env-config';
-import ts2Locales from '@brain-toolkit/ts2locales/vite';
-import i18nConfig from './config/i18n';
-import tailwindcss from '@tailwindcss/vite';
-import viteDeprecatedAntd from '@brain-toolkit/antd-theme-override/vite';
-import vitePluginImp from 'vite-plugin-imp';
-import { readdirSync } from 'fs';
-import { join } from 'path';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -73,15 +71,6 @@ export default defineConfig({
   },
   plugins: [
     tailwindcss(),
-    vitePluginImp({
-      libList: [
-        {
-          libName: 'antd',
-          style: (name) => `antd/es/${name}/style/index`,
-          libDirectory: 'es'
-        }
-      ]
-    }),
     envConfig({
       envPops: true,
       envPrefix,
@@ -90,39 +79,66 @@ export default defineConfig({
         ['APP_VERSION', version]
       ]
     }),
-    react(),
+    react({
+      tsDecorators: true
+    }),
     tsconfigPaths(),
     ts2Locales({
       locales: i18nConfig.supportedLngs as unknown as string[],
-      options: readdirSync(join(__dirname, './config/Identifier'))
-        .map((file) => ({
-          file,
-          name: file.replace('.ts', ''),
-          path: join('./config/Identifier', file)
-        }))
-        .map(({ path }) => ({
-          source: path,
-          // You can use namespace
-          // target: `./public/locales/{{lng}}/{{${name}}}.json`
-          target: `./public/locales/{{lng}}/common.json`
-        }))
+      options: generateTs2LocalesOptions()
     }),
     viteDeprecatedAntd({
       mode: overrideAntdThemeMode,
       overriedCssFilePath: './src/styles/css/antd-themes/no-context.css',
       targetPath: './src/base/types/deprecated-antd.d.ts'
+    }),
+    // Bundle size analysis tool
+    visualizer({
+      filename: './dist/stats.html',
+      open: false,
+      gzipSize: true,
+      brotliSize: true,
+      template: 'treemap' // 'sunburst' | 'treemap' | 'network'
     })
   ] as any[],
   base: routerPrefix,
   envPrefix: envPrefix,
   publicDir: 'public',
   server: {
-    port: Number(process.env.VITE_SERVER_PORT || 3200)
+    port: Number(process.env.VITE_SERVER_PORT || 3200),
+    fs: {
+      deny: ['**/playwright-report/**']
+    }
+  },
+  optimizeDeps: {
+    // exclude: ['playwright-report'],
+    esbuildOptions: {
+      tsconfigRaw: {
+        compilerOptions: {
+          /**
+           * Solve the problem, tsconfig.json has already configured experimentalDecorators: true,
+           * esbuild uses a separate configuration when compiling?
+           *
+           * X [ERROR] Parameter decorators only work when experimental decorators are enabled
+           * You can enable experimental decorators by adding "experimentalDecorators": true to your "tsconfig.json" file.
+           */
+          experimentalDecorators: true
+        }
+      }
+    },
+    /**
+     * If current project has other html files, it will automatically scan all html files,
+     * like some automatically generated html files, like: playwright-report/index.html,
+     * so we need to exclude them.
+     */
+    entries: ['index.html']
   },
   test: {
     watch: false,
     environment: 'jsdom',
     globals: true,
+    include: ['__tests__/**/*.test.ts', '__tests__/**/*.test.tsx'],
+    exclude: ['__tests__/**/*.e2e.ts', '__tests__/**/*.e2e.tsx'],
     setupFiles: ['./__tests__/setup/index.ts']
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.7.15",
+  "version": "0.9.0",
   "description": "Create a new app with a single command",
   "private": false,
   "type": "module",
@@ -41,6 +41,7 @@
     "@qlover/scripts-context": "1.1.4"
   },
   "scripts": {
+    "lint": "eslint src --fix",
     "build": "tsup",
     "create:app": "node ./dist/index.js"
   }

package/dist/configs/react-app/eslint.config.js

@@ -1,94 +0,0 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import vitest from 'eslint-plugin-vitest';
-import * as eslintChain from '@qlover/fe-standard/eslint/index.js';
-import qloverEslint from '@qlover/eslint-plugin';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-import prettier from 'eslint-plugin-prettier';
-import prettierConfig from './.prettierrc.js';
-
-const { createCommon, chainEnv } = eslintChain;
-const allGlobals = {
-  ...globals.browser,
-  ...globals.vitest,
-  ...vitest.environments.env.globals
-};
-
-function createVitestConfig() {
-  const config = chainEnv({
-    allGlobals,
-    files: [
-      'packages/**/__tests__/**/*.test.ts',
-      'packages/**/__tests__/**/*.test.tsx'
-    ],
-    plugins: {
-      vitest
-    },
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        ...vitest.environments.env.globals
-      }
-    }
-  });
-  return config;
-}
-
-const commonConfig = createCommon();
-
-/**
- * @type {import('eslint').Linter.Config[]}
- */
-export default tseslint.config([
-  {
-    ignores: ['**/dist/**', '**/build/**', '**/node_modules/**']
-  },
-
-  {
-    files: ['**/*.{js,jsx}'],
-    extends: [js.configs.recommended, commonConfig],
-    plugins: {
-      prettier: prettier
-    },
-    rules: {
-      ...js.configs.recommended.rules,
-      'prettier/prettier': ['error', prettierConfig],
-      'spaced-comment': 'error'
-    }
-  },
-
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [...tseslint.configs.recommended],
-
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-      '@qlover-eslint': qloverEslint
-    },
-    rules: {
-      '@qlover-eslint/ts-class-method-return': 'error',
-      '@typescript-eslint/explicit-function-return-type': 'off',
-      '@typescript-eslint/no-empty-object-type': 'off',
-      '@typescript-eslint/no-unused-vars': [
-        'error',
-        { argsIgnorePattern: '^_' }
-      ],
-      '@typescript-eslint/ban-ts-comment': 'off',
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true }
-      ]
-    }
-  },
-
-  createVitestConfig()
-]);

package/dist/templates/next-app/config/Identifier/common.error.ts

@@ -1,41 +0,0 @@
-/**
- * @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';
-
-/**
- * @description 响应内容没有 token 值
- * @localZh 响应内容没有 token 值
- * @localEn Response not token value
- */
-export const RES_NO_TOKEN = 'err__response__no__token';
-
-/**
- * @description 未找到组件
- * @localZh 未找到组件
- * @localEn Not found component
- */
-export const NOT_FOUND_COMPONENT = 'err__not__found__component';
-
-/**
- * @description 服务器认证错误
- * @localZh 服务器认证错误
- * @localEn Server auth error
- */
-export const SERVER_AUTH_ERROR = 'err__server__auth__error';

package/dist/templates/next-app/config/Identifier/common.ts

@@ -1,69 +0,0 @@
-/**
- * @description Theme switcher default theme label
- * @localZh 默认主题
- * @localEn Default Theme
- */
-export const HEADER_THEME_DEFAULT = 'header__theme__default';
-
-/**
- * @description Theme switcher dark theme label
- * @localZh 暗色主题
- * @localEn Dark Theme
- */
-export const HEADER_THEME_DARK = 'header__theme__dark';
-
-/**
- * @description Theme switcher pink theme label
- * @localZh 粉色主题
- * @localEn Pink Theme
- */
-export const HEADER_THEME_PINK = 'header__theme__pink';
-
-/**
- * @description logout dialog title
- * @localZh 登出
- * @localEn Logout
- */
-export const AUTH_LOGOUT_DIALOG_TITLE = 'auth__logout__dialog__title';
-
-/**
- * @description logout dialog content
- * @localZh 确定要登出吗？
- * @localEn Are you sure you want to logout?
- */
-export const AUTH_LOGOUT_DIALOG_CONTENT = 'auth__logout__dialog__content';
-
-/**
- * @description 404 page title
- * @localZh 404 页面未找到
- * @localEn 404 Page Not Found
- */
-export const PAGE_404_TITLE = 'page__404__title';
-
-/**
- * @description 404 page description
- * @localZh 404 页面描述
- * @localEn 404 Page Description
- */
-export const PAGE_404_DESCRIPTION = 'page__404__description';
-
-/**
- * @description 500 page title
- * @localZh 500 页面错误
- * @localEn 500 Page Error
- */
-export const PAGE_500_TITLE = 'page__500__title';
-
-/**
- * @description 500 page description
- * @localZh 500 页面描述
- * @localEn 500 Page Description
- */
-export const PAGE_500_DESCRIPTION = 'page__500__description';
-
-/**
- * @description Admin page title
- * @localZh 管理后台
- * @localEn Admin Backend
- */
-export const PAGE_HEAD_ADMIN_TITLE = 'page__head__admin__title';