@yeepay/client-utils 3.1.0 → 4.0.0

package/README.md

@@ -41,8 +41,9 @@ const service = serviceFactory(
   {
     baseUrl: '/xxx-server',
     headers: {},
-    // glob mock 数据文件位置
-    mockModules: import.meta.glob('./mock/**/*.json', { eager: true }),
+    mock: {
+      modules: import.meta.glob('./mock/**/*.json', { eager: true }),
+    },
   },
   successCallback,
   failCallback,
@@ -81,3 +82,34 @@ export default (config: AxiosRequestConfig) => {
   }, { 'new-header-hello': 'world' }]
 }
 ```
+
+### Debug 日志打印
+
+开发者常常使用 console.log 日志打印来调试代码，且往往会忘记删除这些日志，导致线上环境也打印日志，影响性能与潜在安全风险。
+
+`@yeepay/client-utils` 提供了 debug 模块来帮助开发者更好地控制日志打印。
+
+#### 基本使用
+
+```javascript
+import { debug } from '@yeepay/client-utils'
+
+debug.page1('page1 is loaded')
+
+debug.api('fetch user api is called')
+```
+
+![image](http://gitlab.yeepay.com/fex/client-utils/-/raw/master/static/debug-demo.png)
+
+这些日志默认在开发环境打印，而在生产环境不打印。
+
+如果想要在生产环境打印，可以在浏览器控制台执行：
+
+```javascript
+debug.enableAll()
+// 或者打印特定模块
+debug.enable('page1')
+
+// 恢复默认行为
+debug.disable()
+```

package/dist/index.d.ts

@@ -1,7 +1,36 @@
-import { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from "axios";
+import debug from "debug";
+import { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from "axios";
 
+//#region src/debug.d.ts
+declare const logger: Record<string, debug.Debugger> & debug.Debugger;
+declare global {
+  interface Window {
+    debug: {
+      enableAll: () => void;
+      enable: (namespace: string) => void;
+      disable: () => void;
+    };
+  }
+}
+//#endregion
+//#region src/is.d.ts
+declare function isTouchDevice(): boolean;
+declare const BREAKPOINTS: {
+  MOBILE_MAX: number;
+  TABLET_MIN: number;
+  TABLET_MAX: number;
+  DESKTOP_MIN: number;
+};
+declare const MEDIA_QUERIES: {
+  MOBILE: string;
+  TABLET: string;
+  DESKTOP: string;
+};
+declare function isMobile(): boolean;
+declare function isTablet(): boolean;
+declare function isDesktop(): boolean;
+//#endregion
 //#region src/request/mock.d.ts
-
 /**
  * A valid `picomatch` glob pattern, or array of patterns.
  */
@@ -64,11 +93,10 @@ interface ServiceFactoryCallbacks {
   notfoundCallback?: (response: AxiosResponse<any> | any) => any;
   requestInterceptor?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig;
   responseInterceptor?: (response: AxiosResponse<any>) => AxiosResponse<any>;
+  responseInterceptorFailCallback?: (error: AxiosError) => any;
 }
-type ServiceFactoryCallbacksCompatible = [ServiceFactoryCallbacks['successCallback']?, ServiceFactoryCallbacks['failCallback']?, ServiceFactoryCallbacks['unauthorizedCallback']?, ServiceFactoryCallbacks['forbiddenCallback']?, ServiceFactoryCallbacks['notfoundCallback']?, ServiceFactoryCallbacks['requestInterceptor']?, ServiceFactoryCallbacks['responseInterceptor']?];
 declare function verifySuccessCode<T extends string | number>(code: T, customCode?: T): boolean;
 declare function serviceFactory(options: ServiceFactoryOptions, callbacks: ServiceFactoryCallbacks): AxiosInstance;
-declare function serviceFactory(options: ServiceFactoryOptions, ...callbacks: ServiceFactoryCallbacksCompatible): AxiosInstance;
 //#endregion
 //#region src/request/token.d.ts
 declare function getToken(): string | undefined;
@@ -81,4 +109,4 @@ declare function removeToken(): void;
 //#region src/utils.d.ts
 declare function getQueryObject(url?: string): Record<string, string>;
 //#endregion
-export { getQueryObject, getToken, removeToken, serviceFactory, setTokenFromUrl, verifySuccessCode };
+export { BREAKPOINTS, MEDIA_QUERIES, logger as debug, getQueryObject, getToken, isDesktop, isMobile, isTablet, isTouchDevice, removeToken, serviceFactory, setTokenFromUrl, verifySuccessCode };

package/dist/index.js

@@ -1,3 +1,4 @@
+import debug from "debug";
 import { interopDefault, toArray } from "@imyangyong/utils";
 import axios from "axios";
 import { bold, cyan, gray, green, red, yellow } from "ansis";
@@ -5,6 +6,90 @@ import AxiosMockAdapter from "axios-mock-adapter";
 import picomatch from "picomatch/posix";
 import Cookie from "js-cookie";
 
+//#region src/debug.ts
+function createLogger(namespace) {
+	return debug(namespace);
+}
+const loggers = {};
+const logger = new Proxy(function() {}, {
+	get(_, prop) {
+		if (prop in loggers) return loggers[prop];
+		const newLogger = createLogger(`${prop}`);
+		loggers[prop] = newLogger;
+		return newLogger;
+	},
+	apply(_, thisArg, args) {
+		return (loggers.app || (loggers.app = createLogger("app"))).apply(thisArg, args);
+	}
+});
+window.debug = {
+	enableAll: () => {
+		localStorage.setItem("debug", "*");
+		location.reload();
+	},
+	enable: (namespace) => {
+		if (!namespace) {
+			window.debug.enableAll();
+			return;
+		}
+		const namespaces = (localStorage.getItem("debug") || "").split(",").filter(Boolean);
+		namespaces.push(`${namespace}`);
+		localStorage.setItem("debug", namespaces.join(","));
+		location.reload();
+	},
+	disable: () => {
+		try {
+			if (process?.env?.NODE_ENV === "development") localStorage.setItem("debug", "null");
+			else localStorage.removeItem("debug");
+		} finally {
+			location.reload();
+		}
+	}
+};
+try {
+	if (process.env.NODE_ENV === "development") {
+		if (!localStorage.getItem("debug")) window.debug.enableAll();
+	}
+} catch (error) {
+	console.error("Error enabling logger:", error);
+}
+
+//#endregion
+//#region src/is.ts
+function isTouchDevice() {
+	if (typeof navigator === "undefined" || typeof window === "undefined") return false;
+	if ("maxTouchPoints" in navigator) return navigator.maxTouchPoints > 0;
+	if (typeof window.matchMedia === "function") return window.matchMedia("(pointer: coarse)").matches;
+	const ua = navigator.userAgent || "";
+	return /android|iphone|ipad|ipod|windows phone|blackberry|mobile/i.test(ua);
+}
+const BREAKPOINTS = {
+	MOBILE_MAX: 767,
+	TABLET_MIN: 768,
+	TABLET_MAX: 1023,
+	DESKTOP_MIN: 1024
+};
+const MEDIA_QUERIES = {
+	MOBILE: `(max-width: ${BREAKPOINTS.MOBILE_MAX}px)`,
+	TABLET: `(min-width: ${BREAKPOINTS.TABLET_MIN}px) and (max-width: ${BREAKPOINTS.TABLET_MAX}px)`,
+	DESKTOP: `(min-width: ${BREAKPOINTS.DESKTOP_MIN}px)`
+};
+function isMobile() {
+	if (!isTouchDevice()) return false;
+	if (typeof window.matchMedia === "function") return window.matchMedia(MEDIA_QUERIES.MOBILE).matches;
+	return false;
+}
+function isTablet() {
+	if (!isTouchDevice()) return false;
+	if (typeof window.matchMedia === "function") return window.matchMedia(MEDIA_QUERIES.TABLET).matches;
+	return false;
+}
+function isDesktop() {
+	if (typeof navigator === "undefined" || typeof window === "undefined") return false;
+	return window.matchMedia(MEDIA_QUERIES.DESKTOP).matches;
+}
+
+//#endregion
 //#region src/request/mock.ts
 /**
 * 查找数组中最长相同前缀连续子序列
@@ -28,8 +113,7 @@ function matchesPattern(str, pattern) {
 	if (pattern instanceof RegExp) return pattern.test(str);
 	if (typeof pattern === "string") {
 		if (pattern === "*") return true;
-		const isMatch = picomatch(pattern);
-		return isMatch(str);
+		return picomatch(pattern)(str);
 	}
 	return false;
 }
@@ -38,11 +122,8 @@ function matchesPattern(str, pattern) {
 */
 function shouldIncludeModule(uri, includes, excludes) {
 	const includePatterns = includes ? Array.isArray(includes) ? includes : [includes] : ["*"];
-	const excludePatterns = excludes ? Array.isArray(excludes) ? excludes : [excludes] : [];
-	const isExcluded = excludePatterns.some((pattern) => pattern && matchesPattern(uri, pattern));
-	if (isExcluded) return false;
-	const isIncluded = includePatterns.some((pattern) => pattern && matchesPattern(uri, pattern));
-	return isIncluded;
+	if ((excludes ? Array.isArray(excludes) ? excludes : [excludes] : []).some((pattern) => pattern && matchesPattern(uri, pattern))) return false;
+	return includePatterns.some((pattern) => pattern && matchesPattern(uri, pattern));
 }
 async function setupMockAdapter(axiosInstance, mock) {
 	if (!mock) return;
@@ -55,16 +136,14 @@ async function setupMockAdapter(axiosInstance, mock) {
 	});
 	const allPaths = Object.keys(modules);
 	const longestPrefix = longestCommonPrefix(allPaths);
-	const paths = allPaths.map((path) => {
+	const filteredPaths = allPaths.map((path) => {
 		const longestPrefixIndex = longestPrefix.lastIndexOf("/");
 		const dotIndex = path.lastIndexOf(".");
-		const uri = path.slice(longestPrefixIndex, dotIndex);
 		return {
-			uri,
+			uri: path.slice(longestPrefixIndex, dotIndex),
 			path
 		};
-	});
-	const filteredPaths = paths.filter(({ uri }) => shouldIncludeModule(uri, includes, excludes));
+	}).filter(({ uri }) => shouldIncludeModule(uri, includes, excludes));
 	if (filteredPaths.length === 0) return;
 	filteredPaths.forEach(({ uri, path }) => {
 		const registerMock = (mod) => {
@@ -92,8 +171,7 @@ function getQueryObject(url) {
 	url = !url ? window.location.href : url;
 	const search = url.substring(url.lastIndexOf("?") + 1);
 	const obj = {};
-	const reg = /([^?&=]+)=([^?&=]*)/g;
-	search.replace(reg, (rs, $1, $2) => {
+	search.replace(/([^?&=]+)=([^?&=]*)/g, (rs, $1, $2) => {
 		const name = decodeURIComponent($1);
 		let val = decodeURIComponent($2);
 		val = String(val);
@@ -134,26 +212,13 @@ function verifySuccessCode(code, customCode) {
 	if (customCode) return toArray(customCode).includes(code) || !code;
 	return code === 0 || code === "0" || code === "000000" || code === 200 || !code;
 }
-function compatibleCallback(compatibleCallbacks = []) {
-	if (Array.isArray(compatibleCallbacks) && compatibleCallbacks.length && typeof compatibleCallbacks[0] === "function") return {
-		successCallback: compatibleCallbacks[0] || (() => ({})),
-		failCallback: compatibleCallbacks[1] || (() => ({})),
-		unauthorizedCallback: compatibleCallbacks[2] || (() => ({})),
-		forbiddenCallback: compatibleCallbacks[3] || (() => ({})),
-		notfoundCallback: compatibleCallbacks[4] || (() => ({})),
-		requestInterceptor: compatibleCallbacks[5] || ((c) => c),
-		responseInterceptor: compatibleCallbacks[6] || ((r) => r)
-	};
-	else return compatibleCallbacks[0];
-}
 function blobToJson(blob) {
 	return new Promise((resolve, reject) => {
 		const reader = new FileReader();
 		reader.onload = (event) => {
 			try {
 				const jsonString = event.target?.result;
-				const jsonObject = JSON.parse(jsonString);
-				resolve(jsonObject);
+				resolve(JSON.parse(jsonString));
 			} catch (error) {
 				reject(error);
 			}
@@ -164,16 +229,13 @@ function blobToJson(blob) {
 		reader.readAsText(blob);
 	});
 }
-function serviceFactory(options, ...callbacks) {
-	const { baseUrl = "/", timeout = 12e5, headers, code, debug, mock } = options;
-	const { successCallback = (_response) => ({}), failCallback = (_error) => ({}), unauthorizedCallback = (_response) => ({}), forbiddenCallback = (_response) => ({}), notfoundCallback = (_response) => ({}), requestInterceptor = (c) => c, responseInterceptor = (r) => r } = compatibleCallback(callbacks);
+function serviceFactory(options, callbacks) {
+	const { baseUrl = "/", timeout = 12e5, headers, code, debug: debug$1, mock } = options;
+	const { successCallback = (_response) => ({}), failCallback = (_error) => ({}), unauthorizedCallback = (_response) => ({}), forbiddenCallback = (_response) => ({}), notfoundCallback = (_response) => ({}), requestInterceptor = (c) => c, responseInterceptor = (r) => r, responseInterceptorFailCallback = (error) => Promise.reject(error) } = callbacks;
 	const service = axios.create({
 		baseURL: baseUrl,
 		timeout,
-		headers,
-		validateStatus(status) {
-			return status >= 200 && status < 300 || status === 401 || status === 403 || status === 400 || status === 500;
-		}
+		headers
 	});
 	/**
 	* request拦截器, 先入栈后执行
@@ -186,7 +248,7 @@ function serviceFactory(options, ...callbacks) {
 		config.headers.Authorization = getToken();
 		const { method, url = "" } = config;
 		if (method === "get") {
-			if (!debug) if (url.includes("?")) config.url = `${url}&_t=${(/* @__PURE__ */ new Date()).getTime()}`;
+			if (!debug$1) if (url.includes("?")) config.url = `${url}&_t=${(/* @__PURE__ */ new Date()).getTime()}`;
 			else config.url = `${url}?_t=${(/* @__PURE__ */ new Date()).getTime()}`;
 		}
 		return config;
@@ -205,16 +267,12 @@ function serviceFactory(options, ...callbacks) {
 		}
 		return response;
 	}, async (error) => {
-		if (error.response.data instanceof Blob && error.response.headers["content-type"]?.split(";")[0]?.trim() === "application/json") error.response.data = await blobToJson(error.response.data);
+		try {
+			if (error.response.data instanceof Blob && error.response.headers["content-type"]?.split(";")[0]?.trim() === "application/json") error.response.data = await blobToJson(error.response.data);
+		} catch (error$1) {}
 		return Promise.reject(error);
 	});
 	service.interceptors.response.use((response) => {
-		if (response.status && response.status === 401) return unauthorizedCallback(response);
-		if (response.status && response.status === 403) return forbiddenCallback(response);
-		if (response.status && (response.status === 400 || response.status === 500)) {
-			failCallback(response);
-			return Promise.reject(response);
-		}
 		if (verifySuccessCode(response.data.code, code)) {
 			successCallback(response);
 			return response;
@@ -224,24 +282,21 @@ function serviceFactory(options, ...callbacks) {
 		}
 	}, (error) => {
 		if (axios.isCancel(error)) return Promise.reject(error);
-		let status = 0;
 		try {
-			status = error.response.status || error.response.data.status;
-		} catch {
-			if (error.toString().includes("Error: timeout")) return Promise.reject(error);
+			const status = error.response.status || error.response.data.status;
+			if (status === 401) unauthorizedCallback(error);
+			else if (status === 403) forbiddenCallback(error);
+			else if (status === 404) notfoundCallback(error);
+			else failCallback(error);
+		} catch (_) {
+			failCallback(error);
 		}
-		if (status) if (status === 403) forbiddenCallback(error);
-		else if (status === 404) notfoundCallback(error);
-		else failCallback(error);
-		else failCallback(error);
-		return Promise.reject(error);
-	});
-	service.interceptors.response.use(responseInterceptor, (error) => {
 		return Promise.reject(error);
 	});
+	service.interceptors.response.use(responseInterceptor, responseInterceptorFailCallback);
 	if (mock) setupMockAdapter(service, mock);
 	return service;
 }
 
 //#endregion
-export { getQueryObject, getToken, removeToken, serviceFactory, setTokenFromUrl, verifySuccessCode };
+export { BREAKPOINTS, MEDIA_QUERIES, logger as debug, getQueryObject, getToken, isDesktop, isMobile, isTablet, isTouchDevice, removeToken, serviceFactory, setTokenFromUrl, verifySuccessCode };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yeepay/client-utils",
   "type": "module",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "shared utilities for yeepay client packages",
   "author": "Yong Yang",
   "homepage": "http://gitlab.yeepay.com/ued/client-utils#readme",
@@ -21,20 +21,24 @@
   ],
   "dependencies": {
     "@imyangyong/utils": "^0.8.0",
+    "@yeepay/client-utils": "link:",
     "ansis": "^4.1.0",
-    "axios": "^1.7.0",
+    "axios": "^1.13.2",
     "axios-mock-adapter": "^2.1.0",
+    "debug": "^4.4.3",
     "js-cookie": "^3.0.5",
     "picomatch": "^4.0.3"
   },
   "devDependencies": {
     "@antfu/ni": "^0.21.12",
+    "@types/debug": "^4.1.12",
     "@types/js-cookie": "^3.0.6",
     "@types/picomatch": "^4.0.2",
     "@yeepay/eslint-config": "^4.17.0",
     "bumpp": "^9.4.1",
     "eslint": "^9.32.0",
     "eslint-plugin-format": "^0.1.1",
+    "happy-dom": "^18.0.1",
     "lint-staged": "^15.2.2",
     "simple-git-hooks": "^2.11.1",
     "tsdown": "^0.14.1",
@@ -53,6 +57,7 @@
     "watch": "tsdown --watch",
     "lint": "eslint .",
     "release": "bumpp && pnpm publish",
-    "test": "vitest"
+    "test": "vitest",
+    "play": "npm -C playground run dev"
   }
 }