@qlover/create-app 0.1.9 → 0.1.11

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 
 
+## [0.1.11](https://github.com/qlover/fe-base/compare/create-app-v0.1.10...create-app-v0.1.11) (2025-03-12)
+
+## [0.1.10](https://github.com/qlover/fe-base/compare/create-app-v0.1.9...create-app-v0.1.10) (2025-02-20)
+
 ## [0.1.9](https://github.com/qlover/fe-base/compare/create-app-v0.1.8...create-app-v0.1.9) (2025-02-20)
 
 

package/configs/_common/.github/workflows/release.yml.template

@@ -40,7 +40,7 @@ jobs:
           npm install -g pnpm
           pnpm -v
 
-      - name: Install dependencies
+      - name: Pnpm Install dependencies
         run: pnpm install
 
       - name: Pnpm Lint
@@ -90,6 +90,9 @@ jobs:
           npm install -g pnpm
           pnpm -v
 
+      - name: Pnpm Install dependencies
+        run: pnpm install
+
       - name: Pnpm Lint
         run: pnpm lint
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "type": "module",
   "private": false,
   "main": "./dist/es/index.js",

package/templates/react-app/lib/router-loader/Page.ts

@@ -0,0 +1,64 @@
+import { LazyExoticComponent, PropsWithChildren } from 'react';
+import { RouteObject } from 'react-router-dom';
+
+import { TFunction } from 'i18next';
+import { UseTranslationResponse } from 'react-i18next';
+
+export interface BasePageProvider {
+  meta: RouteMeta;
+  i18n: UseTranslationResponse<string, string>;
+  t: TFunction<string, string>;
+}
+
+export type RouteCategory = 'main' | 'auth' | 'common';
+
+export interface RouteMeta {
+  category?: RouteCategory;
+  /**
+   * from app.router.json
+   */
+  title?: string;
+  icon?: string;
+  /**
+   * from app.router.json
+   *
+   * @default 'common'
+   */
+  localNamespace?: string;
+}
+
+export type RouteType = RouteObject & {
+  meta?: RouteMeta;
+};
+
+export type RouteConfig = {
+  routes: RouteType[];
+};
+
+export type PagesMaps = Record<
+  string,
+  | (() => LazyExoticComponent<React.ComponentType<unknown>>)
+  | (() => React.ComponentType<unknown>)
+>;
+
+export type LoadProps = {
+  pagesMaps: PagesMaps;
+  componentPath: string;
+  route: RouteType;
+  Provider?: React.ComponentType<PropsWithChildren<RouteMeta>>;
+};
+
+
+type ComponentValue = React.ComponentType<unknown> | LazyExoticComponent<React.ComponentType<unknown>>;
+
+export type ComponentMaps = {
+  /**
+   * key: ./xxx/bbb.(jsx,js,tsx,ts)
+   */
+  [key: string]: ComponentValue | (() => Promise<ComponentValue>) | (() => ComponentValue);
+}
+
+// new RouterManager({
+//   routes: [],
+//   componentMaps:
+// });

package/templates/react-app/lib/router-loader/RouterLoader.ts

@@ -0,0 +1,90 @@
+import { RouteObject } from 'react-router-dom';
+import isString from 'lodash/isString';
+import type { ComponentType, LazyExoticComponent, ReactNode } from 'react';
+
+type ComponentValue = Record<string, () => unknown>;
+
+type RouteComponentType<T = unknown> =
+  | ComponentType<T>
+  | LazyExoticComponent<ComponentType<T>>;
+
+export type RouteConfigValue = Omit<RouteObject, 'element' | 'children'> & {
+  /**
+   * 路径
+   * 
+   * FIXME: support `ReactNode`
+   */
+  element?: string;
+  children?: RouteConfigValue[];
+  meta?: Record<string, unknown>;
+};
+
+export type RouterLoaderRender = (
+  route: Omit<RouteConfigValue, 'element'> & {
+    element: () => RouteComponentType;
+  }
+) => ReactNode;
+
+export type RouterLoaderOptions = {
+  /**
+   * 路由配置
+   */
+  routes?: RouteConfigValue[];
+
+  /**
+   * 组件映射表
+   */
+  componentMaps?: ComponentValue;
+
+  /**
+   * 渲染路由
+   */
+  render: RouterLoaderRender;
+};
+
+export class RouterLoader {
+  constructor(private readonly options: RouterLoaderOptions) {
+    if (!options.render) {
+      throw new Error('RouterLoader render is required');
+    }
+  }
+
+  getComponentMaps(): ComponentValue {
+    const { componentMaps = {} } = this.options;
+
+    return componentMaps;
+  }
+
+  getComponent(element: string): () => RouteComponentType {
+    const maps = this.getComponentMaps();
+
+    const component = maps[element];
+
+    if (!component) {
+      throw new Error(`Component not found: ${element}`);
+    }
+
+    return component as () => RouteComponentType;
+  }
+
+  toRoute(route: RouteConfigValue): RouteObject {
+    const { render } = this.options;
+    const { element, children, ...rest } = route;
+
+    if (!element || !isString(element)) {
+      console.warn(
+        `Invalid route, path is: ${route.path}, element is: ${element}`
+      );
+    }
+
+    const componet = this.getComponent(element || '404');
+    const Element = render({ ...rest, element: componet });
+
+    // @ts-expect-error
+    return {
+      ...rest,
+      element: Element,
+      children: children?.map((child) => this.toRoute(child))
+    };
+  }
+}

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

@@ -1,14 +1,35 @@
 import '@/uikit/styles/css/index.css';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { createFeReactRoutes } from './pages';
-import { useMemo } from 'react';
-import { IOC } from './core';
-import { RouterController } from './uikit/controllers/RouterController';
+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';
+
+function getAllPages() {
+  const modules = import.meta.glob('./pages/**/*.tsx');
+  return Object.keys(modules).reduce((acc, path) => {
+    const componentName = path.replace(/^\.\/pages\/(.*)\.tsx$/, '$1');
+    acc[componentName] = () =>
+      lazy(
+        modules[path] as () => Promise<{
+          default: React.ComponentType<unknown>;
+        }>
+      );
+    return acc;
+  }, {} as PagesMaps);
+}
+
+const routerLoader = new RouterLoader({
+  componentMaps: getAllPages(),
+  render: RouterRenderComponent
+});
 
 function App() {
   const routerBase = useMemo(() => {
-    const routerController = IOC(RouterController);
-    const routes = createFeReactRoutes(routerController.getRoutes());
+    const routes = appConfig.base.routes.map((route) =>
+      routerLoader.toRoute(route)
+    );
     const router = createBrowserRouter(routes);
     return router;
   }, []);

package/templates/react-app/src/base/types/Page.ts

@@ -3,6 +3,7 @@ import { RouteObject } from 'react-router-dom';
 
 import { TFunction } from 'i18next';
 import { UseTranslationResponse } from 'react-i18next';
+import { RouteConfigValue } from '@lib/router-loader/RouterLoader';
 
 export interface BasePageProvider {
   meta: RouteMeta;
@@ -27,12 +28,8 @@ export interface RouteMeta {
   localNamespace?: string;
 }
 
-export type RouteType = RouteObject & {
-  meta?: RouteMeta;
-};
-
 export type RouteConfig = {
-  routes: RouteType[];
+  routes: RouteConfigValue[];
 };
 
 export type PagesMaps = Record<

package/templates/react-app/src/components/RouterRenderComponent.tsx

@@ -0,0 +1,16 @@
+import { Suspense } from 'react';
+import { Loading } from './Loading';
+import { RouterLoaderRender } from '@lib/router-loader/RouterLoader';
+import BaseRouteProvider from '@/uikit/providers/BaseRouteProvider';
+
+export const RouterRenderComponent: RouterLoaderRender = (route) => {
+  const Component = route.element();
+
+  return (
+    <Suspense fallback={<Loading fullscreen />}>
+      <BaseRouteProvider {...route.meta}>
+        <Component />
+      </BaseRouteProvider>
+    </Suspense>
+  );
+};

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

@@ -1,7 +1,7 @@
 import * as feGlobals from '@/core/globals';
 import { IOC } from '.';
 import { IOCInterface } from '@/base/port/IOCInterface';
-import { I18nService } from '@/services/i18n';
+import { I18nService } from '@/services/I18nService';
 
 export class Bootstrap {
   constructor(private IOCContainer: IOCInterface) {}

package/templates/react-app/src/services/{i18n/index.ts → I18nService.ts}

@@ -5,15 +5,15 @@ import HttpApi from 'i18next-http-backend';
 import merge from 'lodash/merge';
 import { i18nConfig, I18nServiceLocale } from '@config/i18n';
 
+const { supportedLngs, fallbackLng } = i18nConfig;
+
 // custom language detector
 const pathLanguageDetector = {
   name: 'pathLanguageDetector',
   lookup() {
     const path = window.location.pathname.split('/');
     const language = path[1];
-    return I18nService.isValidLanguage(language)
-      ? language
-      : i18nConfig.fallbackLng;
+    return I18nService.isValidLanguage(language) ? language : fallbackLng;
   },
   cacheUserLanguage() {
     // no cache, because we get language from URL
@@ -39,12 +39,16 @@ export class I18nService {
     i18n.services.languageDetector.addDetector(pathLanguageDetector);
   }
 
+  static getCurrentLanguage(): I18nServiceLocale {
+    return i18n.language as I18nServiceLocale;
+  }
+
   /**
    * check if the language is supported
    * @param language - language to check
    * @returns true if the language is supported, false otherwise
    */
   static isValidLanguage(language: string): language is I18nServiceLocale {
-    return i18nConfig.supportedLngs.includes(language as I18nServiceLocale);
+    return supportedLngs.includes(language as I18nServiceLocale);
   }
 }

package/templates/react-app/src/services/processer/ProcesserService.ts

@@ -22,8 +22,8 @@ export class ProcesserService {
   }
 
   init(): Promise<unknown> {
-    return this.executor.exec(this.handler).catch(() => {
-      this.options.logger.error('PageProcesser init failed');
+    return this.executor.exec(this.handler).catch((err) => {
+      this.options.logger.error('PageProcesser init failed', err);
     });
   }
 }

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

@@ -1,12 +1,11 @@
-import { I18nService } from '@/services/i18n';
-import { RouteConfig, RouteType } from '@/base/types/Page';
+import { I18nService } from '@/services/I18nService';
 import { UIDependenciesInterface } from '@/base/port/UIDependenciesInterface';
-import { i18nConfig } from '@config/i18n';
 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';
 
 export type RouterControllerDependencies = {
-  location: globalThis.Location;
   navigate: NavigateFunction;
 };
 
@@ -16,7 +15,7 @@ export type RouterControllerOptions = {
 };
 
 export type RouterControllerState = {
-  routes: RouteType[];
+  routes: RouteConfigValue[];
 };
 
 export class RouterController
@@ -49,6 +48,11 @@ export class RouterController
     return navigate;
   }
 
+  static composePath(path: string): string {
+    const targetLang = I18nService.getCurrentLanguage();
+    return `/${targetLang}${path}`;
+  }
+
   /**
    * @override
    */
@@ -59,24 +63,17 @@ export class RouterController
     ) as RouterControllerDependencies;
   }
 
-  getRoutes(): RouteType[] {
+  getRoutes(): RouteConfigValue[] {
     return this.state.routes;
   }
 
-  changeRoutes(routes: RouteType[]): void {
+  changeRoutes(routes: RouteConfigValue[]): void {
     this.state.routes = routes;
   }
 
   goto(path: string, options?: NavigateOptions): void {
-    console.trace('path');
-
-    const tryLng = path.split('/')[0];
-    if (!I18nService.isValidLanguage(tryLng)) {
-      path = i18nConfig.fallbackLng + path.replace(tryLng, '');
-    }
-
-    this.navigate?.(path, options);
-
+    path = RouterController.composePath(path);
+    this.logger.debug('Goto path => ', path);
     this.navigate?.(path, options);
   }
 

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

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

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

@@ -26,9 +26,7 @@ export function ProcessProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   useEffect(() => {
-    IOC(RouterController).setDependencies({
-      navigate
-    });
+    IOC(RouterController).setDependencies({ navigate });
   }, [navigate]);
 
   if (!success) {

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

@@ -1,113 +0,0 @@
-import { lazy, Suspense } from 'react';
-import isString from 'lodash/isString';
-import {
-  LoadProps,
-  PagesMaps,
-  RouteCategory,
-  RouteType
-} from '@/base/types/Page';
-import { Loading } from '@/components/Loading';
-import BaseRouteProvider from '../uikit/providers/BaseRouteProvider';
-import NotFound from './404';
-import NotFound500 from './500';
-
-const staticComponentsMaps: Record<string, () => React.ComponentType<unknown>> =
-  {
-    '404': () => NotFound as React.ComponentType<unknown>,
-    '500': () => NotFound500 as React.ComponentType<unknown>
-  };
-
-const getRealComponents = () => {
-  return import.meta.glob('./*/**/*.tsx');
-};
-
-const getLazyComponentMaps = () => {
-  const modules = getRealComponents();
-
-  const pagesMaps: PagesMaps = {};
-
-  for (const path in modules) {
-    const componentName = path.replace(/^\.\/(.*)\.tsx$/, '$1');
-
-    pagesMaps[componentName] = () =>
-      lazy(
-        modules[path] as () => Promise<{
-          default: React.ComponentType<unknown>;
-        }>
-      );
-  }
-
-  return pagesMaps;
-};
-
-// 懒加载组件
-const lazyLoad = ({ pagesMaps, componentPath, route, Provider }: LoadProps) => {
-  // first try static
-  let loadedComponent = staticComponentsMaps[componentPath];
-  if (!loadedComponent) {
-    loadedComponent = pagesMaps[componentPath];
-  }
-
-  if (!loadedComponent) {
-    console.warn(`Route ${componentPath} not found`);
-    return <NotFound route={componentPath} />;
-  }
-
-  const Component = loadedComponent();
-
-  return (
-    <Suspense fallback={<Loading fullscreen />}>
-      {Provider ? (
-        <Provider {...route.meta}>
-          <Component />
-        </Provider>
-      ) : (
-        <Component />
-      )}
-    </Suspense>
-  );
-};
-
-// 转换单个路由
-const transformRoute = (
-  route: RouteType,
-  options: Pick<LoadProps, 'pagesMaps' | 'Provider'>
-): RouteType => {
-  const result: RouteType = {
-    ...route,
-    path: route.path
-  };
-
-  if (isString(route.element)) {
-    result.element = lazyLoad({
-      ...options,
-      componentPath: route.element,
-      route
-    });
-  }
-
-  if (route.children) {
-    result.children = route.children.map((child) =>
-      transformRoute(child, options)
-    );
-  }
-
-  return result;
-};
-
-export function createFeReactRoutes(routes: RouteType[]) {
-  const pagesMaps = getLazyComponentMaps();
-
-  return routes.map((route) =>
-    transformRoute(route, { pagesMaps, Provider: BaseRouteProvider })
-  );
-}
-
-export function filterRoutesByCategory(
-  routes: RouteType[],
-  category: RouteCategory[]
-): RouteType[] {
-  return routes.filter((route) =>
-    route.meta?.category ? category.includes(route.meta?.category) : true
-  );
-}