@4399ywkf/cli 0.0.21 → 1.0.2

package/dist/templates/src/types/routes.ts

@@ -0,0 +1,70 @@
+export interface RouteItem {
+  path?: string;
+  wrappers?: string[];
+  component?: string | (() => React.JSX.Element);
+  redirect?: string;
+  routes?: RouteItem[];
+  [any: string]: any;
+}
+
+export interface IRouteConventionExportProps {
+  routeProps?: Record<string, any>;
+}
+
+export interface IRoute extends IRouteConventionExportProps {
+  id: string;
+  path?: string;
+  index?: boolean;
+  parentId?: string;
+  redirect?: string;
+  loading?: string | React.ReactNode;
+  absPath?: string;
+  file?: string;
+  name?: string;
+  title?: string;
+  cname?: string;
+  key?: string;
+  perarr?: string;
+  microApp?: string;
+  entry?: string;
+  [key: string]: any;
+}
+
+export interface IClientRoute extends IRoute {
+  element: React.ReactNode;
+  children?: IClientRoute[];
+  routes?: IClientRoute[];
+}
+
+export interface IRoutesById {
+  [id: string]: IRoute;
+}
+
+export interface IRouteComponents {
+  [id: string]: any;
+}
+
+export interface RenderClientOpts {
+  /**
+   * react dom 渲染的的目标 dom
+   * @doc 一般不需要改，微前端的时候会变化
+   */
+  rootElement?: HTMLElement;
+  /**
+   * 设置路由 base，部署项目到非根目录下时使用。
+   */
+  basename?: string;
+  /**
+   * loading 中展示的组件 dom （全局加载组件）。
+   */
+  loadingComponent?: () => React.ReactNode;
+  /**
+   * 自定义错误边界组件
+   */
+  errorBoundary?: React.ComponentType<{ error: Error; retry: () => void }>;
+}
+
+export interface IMemo {
+  id: number;
+  ret: any;
+}

package/dist/templates/src/utils/__tests__/example.test.ts

@@ -0,0 +1,7 @@
+// 假设您有一些工具函数需要测试
+describe('工具函数测试', () => {
+  it('示例测试', () => {
+    const result = 1 + 1;
+    expect(result).toBe(2);
+  });
+});

package/dist/templates/src/utils/convert.ts

@@ -0,0 +1,40 @@
+/**
+ * 将文件大小从一个单位转换为另一个单位。
+ *
+ * @param {number} size 文件大小。
+ * @param {string} fromUnit 初始单位（'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'）。
+ * @param {string} toUnit 目标单位（'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'）。
+ * @param {number} [decimalPoint=2] 结果保留的小数位数，默认为2。
+ * @return {string} 转换后的文件大小，带单位。
+ */
+export const convertFileSize = (
+  size: number,
+  fromUnit: string,
+  toUnit: string,
+  decimalPoint = 2,
+): string => {
+  // 定义单位与字节之间的转换关系
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  // 获取初始单位和目标单位的索引
+  const fromIndex = units.indexOf(fromUnit);
+  const toIndex = units.indexOf(toUnit);
+
+  // 如果单位不在列表中，抛出错误
+  if (fromIndex === -1 || toIndex === -1) {
+    throw new Error('Invalid units');
+  }
+
+  // 计算初始单位与目标单位之间的转换系数
+  const exponent = toIndex - fromIndex;
+  // 计算结果大小
+  const resultSize = size / 1024 ** exponent;
+
+  // 返回格式化后的结果
+  return `${Number.parseFloat(resultSize.toFixed(decimalPoint))} ${toUnit}`;
+};
+
+// // 示例使用
+// console.log(convertFileSize(1, 'GB', 'MB')); // 输出: 1024.00 MB
+// console.log(convertFileSize(1, 'MB', 'KB')); // 输出: 1024.00 KB
+// console.log(convertFileSize(1, 'KB', 'B'));  // 输出: 1024.00 B
+// console.log(convertFileSize(1, 'MB', 'GB', 5)); // 输出: 0.00098 GB

package/dist/templates/src/utils/cookie.ts

@@ -0,0 +1,25 @@
+import dayjs from 'dayjs';
+
+export const COOKIE_CACHE_DAYS = 30;
+
+export const setCookie = (
+  key: string,
+  value: string | undefined,
+  expireDays: string | number = COOKIE_CACHE_DAYS,
+) => {
+  if (typeof value === 'undefined') {
+    // Set the expiration time to yesterday (expire immediately)
+    const expiredDate = new Date(0).toUTCString(); // 1970-01-01T00:00:00Z
+
+    // eslint-disable-next-line unicorn/no-document-cookie
+    document.cookie = `${key}=; expires=${expiredDate}; path=/;`;
+  } else {
+    const expires =
+      typeof expireDays === 'string'
+        ? expireDays
+        : dayjs().add(expireDays, 'day').toDate().toUTCString();
+
+    // eslint-disable-next-line unicorn/no-document-cookie
+    document.cookie = `${key}=${value};expires=${expires};path=/;`;
+  }
+};

package/dist/templates/src/utils/copyToClipboard.ts

@@ -0,0 +1,13 @@
+export const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    document.body.append(textArea);
+    textArea.focus();
+    textArea.select();
+    document.execCommand('copy');
+    textArea.remove();
+  }
+};

package/dist/templates/src/utils/difference.ts

@@ -0,0 +1,26 @@
+import isEqual from 'fast-deep-equal';
+import { isArray, isObject, transform } from 'lodash-es';
+
+/**
+ * Compare two objects and return the difference.
+ * when there are difference in array, just return the new value.
+ * it's used mostly in settings
+ */
+export const difference = <T extends object>(object: T, base: T) => {
+  const changes = (object: any, base: any) =>
+    transform(object, (result: any, value, key) => {
+      // First, check if value and base[key] are both arrays.
+      // If they are arrays, we directly use isEqual to compare their values.
+      if (isArray(value) && isArray(base[key])) {
+        if (!isEqual(value, base[key])) {
+          result[key] = value;
+        }
+      }
+      // If they are objects, we recursively call changes to compare their values.
+      else if (!isEqual(value, base[key])) {
+        result[key] = isObject(value) && isObject(base[key]) ? changes(value, base[key]) : value;
+      }
+    });
+
+  return changes(object, base);
+};

package/dist/templates/src/utils/env.ts

@@ -0,0 +1,3 @@
+export const isDev = process.env.NODE_ENV === 'development';
+
+export const isOnServerSide = typeof window === 'undefined';

package/dist/templates/src/utils/format.ts

@@ -0,0 +1,21 @@
+/**
+ * 字节转换函数
+ * @param kb
+ * @returns
+ */
+interface FormatSizeUnitsProps {
+  kb: number;
+  units?: string[];
+}
+export function formatSizeUnits(props: FormatSizeUnitsProps) {
+  const { kb, units = ['KB', 'MB', 'GB', 'TB', 'PB'] } = props;
+  let newKb = kb;
+  let unitIndex = 0;
+
+  while (kb >= 1024 && unitIndex < units.length - 1) {
+    newKb = newKb / 1024;
+    unitIndex++;
+  }
+
+  return `${kb.toFixed(2)} ${units[unitIndex]}`;
+}

package/dist/templates/src/utils/genCdnUrl.ts

@@ -0,0 +1,30 @@
+import urlJoin from 'url-join';
+
+const UNPKG_API = 'https://unpkg.com';
+const ALIYUN_API = 'https://registry.npmmirror.com';
+
+export type CDN = 'aliyun' | 'unpkg';
+export interface CdnApi {
+  path: string;
+  pkg: string;
+  proxy?: CDN;
+  version?: string;
+}
+
+export const genCdnUrl = ({
+  pkg,
+  version = 'latest',
+  path,
+  proxy,
+}: CdnApi): string => {
+  switch (proxy) {
+    case 'unpkg': {
+      return urlJoin(UNPKG_API, `${pkg}@${version}`, path);
+    }
+    default: {
+      return urlJoin(ALIYUN_API, pkg, version, 'files', path);
+    }
+  }
+};
+
+export { ALIYUN_API, UNPKG_API };

package/dist/templates/src/utils/getMicroApp.ts

@@ -0,0 +1,39 @@
+// 创建一个空数组来存储匹配的对象
+let matchedObjects: any[] = [];
+
+// 定义一个递归函数来遍历子路由对象
+function traverseRoutes(routes) {
+  for (const route of routes) {
+    // 检查当前子路由对象是否具有"microApp"属性
+    if (Object.prototype.hasOwnProperty.call(route, 'microApp')) {
+      // 如果有，将该子路由对象添加到结果数组中
+      matchedObjects.push(route);
+    }
+
+    // 检查当前子路由对象是否还有更深层级的子路由
+    if (Object.prototype.hasOwnProperty.call(route, 'routes')) {
+      // 递归调用自身来遍历更深层级的子路由对象
+      traverseRoutes(route.routes);
+    }
+  }
+}
+
+export const getMicroApp = (a: any[]) => {
+  matchedObjects = [];
+  // 遍历变量a中的每个对象
+  for (const obj of a) {
+    // 检查当前对象是否具有"microApp"属性
+    if (Object.prototype.hasOwnProperty.call(obj, 'microApp')) {
+      // 如果有，将该对象添加到结果数组中
+      matchedObjects.push(obj);
+    }
+
+    // 检查当前对象是否具有"routes"属性
+    if (Object.prototype.hasOwnProperty.call(obj, 'routes')) {
+      // 调用递归函数来遍历子路由对象
+      traverseRoutes(obj.routes);
+    }
+  }
+
+  return matchedObjects;
+};

package/dist/templates/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./getMicroApp";

package/dist/templates/src/utils/locale.ts

@@ -0,0 +1,46 @@
+import { resolveAcceptLanguage } from 'resolve-accept-language';
+
+import { DEFAULT_LANG } from '@/const/locale';
+import { locales, normalizeLocale } from '@/locales/resources';
+
+export const getAntdLocale = async (lang?: string) => {
+  let normalLang = normalizeLocale(lang);
+
+  // due to antd only have ar-EG locale, we need to convert ar to ar-EG
+  // refs: https://ant.design/docs/react/i18n
+
+  // And we don't want to handle it in `normalizeLocale` function
+  // because of other locale files are all `ar` not `ar-EG`
+  if (normalLang === 'ar') normalLang = 'ar-EG';
+
+  const { default: locale } = await import(`antd/locale/${normalLang.replace('-', '_')}.js`);
+
+  return locale;
+};
+
+/**
+ * Parse the browser language and return the fallback language
+ */
+export const parseBrowserLanguage = (headers: Headers, defaultLang: string = DEFAULT_LANG) => {
+  // if the default language is not 'en-US', just return the default language as fallback lang
+  if (defaultLang !== 'en-US') return defaultLang;
+
+  /**
+   * The arguments are as follows:
+   *
+   * 1) The HTTP accept-language header.
+   * 2) The available locales (they must contain the default locale).
+   * 3) The default locale.
+   */
+  let browserLang: string = resolveAcceptLanguage(
+    headers.get('accept-language') || '',
+    //  Invalid locale identifier 'ar'. A valid locale should follow the BCP 47 'language-country' format.
+    locales.map((locale) => (locale === 'ar' ? 'ar-EG' : locale)),
+    defaultLang,
+  );
+
+  // if match the ar-EG then fallback to ar
+  if (browserLang === 'ar-EG') browserLang = 'ar';
+
+  return browserLang;
+};

package/dist/templates/src/utils/sentry.ts

@@ -0,0 +1,187 @@
+import * as Sentry from '@sentry/react';
+
+// 性能监控
+export const sentryPerformance = {
+  // 开始性能追踪
+  startSpan: (name: string, op?: string) => {
+    return Sentry.startSpan(
+      {
+        name,
+        op: op || 'custom',
+      },
+      (span) => {
+        return span;
+      },
+    );
+  },
+
+  // 测量函数执行时间
+  measureFunction: <T extends any[], R>(fn: (...args: T) => R, name: string, op?: string): ((...args: T) => R) => {
+    return (...args: T): R => {
+      return Sentry.startSpan(
+        {
+          name,
+          op: op || 'function',
+        },
+        () => fn(...args),
+      );
+    };
+  },
+
+  // 测量异步函数
+  measureAsyncFunction: <T extends any[], R>(fn: (...args: T) => Promise<R>, name: string, op?: string): ((...args: T) => Promise<R>) => {
+    return async (...args: T): Promise<R> => {
+      return Sentry.startSpan(
+        {
+          name,
+          op: op || 'async_function',
+        },
+        async () => await fn(...args),
+      );
+    };
+  },
+
+  // 添加面包屑
+  addBreadcrumb: (message: string, category?: string, level?: Sentry.SeverityLevel) => {
+    Sentry.addBreadcrumb({
+      message,
+      category: category || 'custom',
+      level: level || 'info',
+      timestamp: Date.now() / 1000,
+    });
+  },
+
+  // 手动创建 span
+  withSpan: <T>(name: string, op: string, callback: () => T): T => {
+    return Sentry.startSpan({ name, op }, callback);
+  },
+};
+
+// 错误报告
+export const sentryError = {
+  // 捕获异常
+  captureException: (error: Error, context?: Record<string, any>) => {
+    Sentry.withScope((scope) => {
+      if (context) {
+        Object.entries(context).forEach(([key, value]) => {
+          scope.setExtra(key, value);
+        });
+      }
+      Sentry.captureException(error);
+    });
+  },
+
+  // 捕获消息
+  captureMessage: (message: string, level?: Sentry.SeverityLevel) => {
+    Sentry.captureMessage(message, level || 'info');
+  },
+
+  // 手动报告错误
+  reportError: (error: Error, tags?: Record<string, string>) => {
+    Sentry.withScope((scope) => {
+      if (tags) {
+        Object.entries(tags).forEach(([key, value]) => {
+          scope.setTag(key, value);
+        });
+      }
+      scope.setLevel('error');
+      Sentry.captureException(error);
+    });
+  },
+};
+
+// 用户上下文
+export const sentryUser = {
+  // 设置用户信息
+  setUser: (user: { id: string; email?: string; username?: string }) => {
+    Sentry.setUser(user);
+  },
+
+  // 清除用户信息
+  clearUser: () => {
+    Sentry.setUser(null);
+  },
+
+  // 设置用户反馈
+  showReportDialog: (options?: Sentry.ReportDialogOptions) => {
+    Sentry.showReportDialog(options);
+  },
+};
+
+// 自定义标签和上下文
+export const sentryContext = {
+  // 设置标签
+  setTag: (key: string, value: string) => {
+    Sentry.setTag(key, value);
+  },
+
+  // 设置上下文
+  setContext: (key: string, context: Record<string, any>) => {
+    Sentry.setContext(key, context);
+  },
+
+  // 设置额外信息
+  setExtra: (key: string, extra: any) => {
+    Sentry.setExtra(key, extra);
+  },
+};
+
+// ✨ 新增：会话管理
+export const sentrySession = {
+  // 开始用户会话
+  startUserSession: (userId: string, userInfo?: { email?: string; username?: string }) => {
+    // 设置用户信息
+    Sentry.setUser({
+      id: userId,
+      ...userInfo,
+    });
+
+    // 开始会话
+    Sentry.startSession();
+
+    // 添加会话开始的面包屑
+    Sentry.addBreadcrumb({
+      message: `User session started for ${userId}`,
+      category: 'session',
+      level: 'info',
+    });
+  },
+
+  // 结束用户会话
+  endUserSession: () => {
+    Sentry.addBreadcrumb({
+      message: 'User session ended',
+      category: 'session',
+      level: 'info',
+    });
+
+    Sentry.endSession();
+    Sentry.setUser(null);
+  },
+
+  // 记录页面访问（会话活动）
+  recordPageView: (pageName: string, url: string) => {
+    Sentry.addBreadcrumb({
+      message: `Page view: ${pageName}`,
+      category: 'navigation',
+      level: 'info',
+      data: {
+        url,
+        timestamp: new Date().toISOString(),
+      },
+    });
+  },
+
+  // 记录用户操作（保持会话活跃）
+  recordUserAction: (action: string, details?: Record<string, any>) => {
+    Sentry.addBreadcrumb({
+      message: `User action: ${action}`,
+      category: 'user',
+      level: 'info',
+      data: {
+        ...details,
+        timestamp: new Date().toISOString(),
+      },
+    });
+  },
+};

package/dist/templates/src/utils/sentryDecorators.ts

@@ -0,0 +1,34 @@
+import { sentryPerformance } from './sentry';
+
+// 函数性能监控装饰器
+export function withSentryPerformance(name: string, op = 'function') {
+  return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
+    const originalMethod = descriptor.value;
+
+    descriptor.value = sentryPerformance.measureFunction(
+      originalMethod,
+      name,
+      op,
+    );
+
+    return descriptor;
+  };
+}
+
+// 异步函数性能监控装饰器
+export function withSentryAsyncPerformance(
+  name: string,
+  op = 'async_function',
+) {
+  return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
+    const originalMethod = descriptor.value;
+
+    descriptor.value = sentryPerformance.measureAsyncFunction(
+      originalMethod,
+      name,
+      op,
+    );
+
+    return descriptor;
+  };
+}