clxx 2.1.4 → 2.1.6

package/build/utils/ago.js

@@ -6,80 +6,67 @@ import dayjs from 'dayjs';
 export function ago(date) {
     const now = dayjs();
     const input = dayjs(date);
-    const aYearAgo = now.subtract(1, 'year');
-    const aMonthAgo = now.subtract(1, 'month');
-    const aDayAgo = now.subtract(1, 'day');
-    const aHourAgo = now.subtract(1, 'hour');
-    const aMinuteAgo = now.subtract(1, 'minute');
-    // 多少年前
-    if (input.isBefore(aYearAgo)) {
-        const diff = now.year() - input.year();
-        const nYearsAgo = now.subtract(diff, 'year');
-        let showNum = diff;
-        if (input.isAfter(nYearsAgo)) {
-            showNum = diff - 1;
-        }
+    if (!input.isValid()) {
         return {
-            num: showNum,
+            num: 0,
+            unit: 's',
+            format: '刚刚',
+        };
+    }
+    const isFuture = input.isAfter(now);
+    const from = isFuture ? now : input;
+    const to = isFuture ? input : now;
+    const years = to.diff(from, 'year');
+    if (years >= 1) {
+        return {
+            num: years,
             unit: 'y',
-            format: `${showNum}年前`,
+            format: `${years}年${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少月前
-    if (input.isBefore(aMonthAgo)) {
-        let showNum = 1;
-        for (let n = 2; n <= 12; n++) {
-            const nMonthAgo = now.subtract(n, 'month');
-            if (input.isAfter(nMonthAgo)) {
-                showNum = n - 1;
-                break;
-            }
-        }
+    const months = to.diff(from, 'month');
+    if (months >= 1) {
         return {
-            num: showNum,
+            num: months,
             unit: 'm',
-            format: `${showNum}个月前`,
+            format: `${months}个月${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少天前
-    if (input.isBefore(aDayAgo)) {
-        const showNum = Math.floor((now.unix() - input.unix()) / 86400);
+    const days = to.diff(from, 'day');
+    if (days >= 1) {
         return {
-            num: showNum,
+            num: days,
             unit: 'd',
-            format: `${showNum}天前`,
+            format: `${days}天${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少小时前
-    if (input.isBefore(aHourAgo)) {
-        const showNum = Math.floor((now.unix() - input.unix()) / 3600);
+    const hours = to.diff(from, 'hour');
+    if (hours >= 1) {
         return {
-            num: showNum,
+            num: hours,
             unit: 'h',
-            format: `${showNum}个小时前`,
+            format: `${hours}小时${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少分钟前
-    if (input.isBefore(aMinuteAgo)) {
-        const showNum = Math.floor((now.unix() - input.unix()) / 60);
+    const minutes = to.diff(from, 'minute');
+    if (minutes >= 1) {
         return {
-            num: showNum,
+            num: minutes,
             unit: 'i',
-            format: `${showNum}分钟前`,
+            format: `${minutes}分钟${isFuture ? '后' : '前'}`,
         };
     }
-    // 多少秒前
-    const showNum = now.unix() - input.unix();
-    let format;
-    if (showNum > 10) {
-        format = `${showNum}秒前`;
-    }
-    else {
-        format = '刚刚';
+    const seconds = to.diff(from, 'second');
+    if (seconds < 10) {
+        return {
+            num: seconds,
+            unit: 's',
+            format: isFuture ? '马上' : '刚刚',
+        };
     }
     return {
-        num: showNum,
+        num: seconds,
         unit: 's',
-        format,
+        format: `${seconds}秒${isFuture ? '后' : '前'}`,
     };
 }

package/build/utils/createApp.d.ts

@@ -1,10 +1,9 @@
 import React from "react";
 import { History } from "history";
 import { ContainerProps } from "../Container";
-import { ContextValue } from "../context";
 export type RouterMode = "browser" | "hash" | "memory";
 export type AwaitValue<T> = T | Promise<T>;
-export interface CreateAppOption extends Omit<ContainerProps, "children">, ContextValue {
+export interface CreateAppOption extends Omit<ContainerProps, "children"> {
     onBefore?: (pathname: string) => AwaitValue<void>;
     onAfter?: (pathname: string) => AwaitValue<void>;
     loading?: (pathname: string) => AwaitValue<React.ReactNode>;

package/build/utils/createApp.js

@@ -12,7 +12,6 @@ import { useCallback, useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserHistory, createHashHistory, createMemoryHistory, } from "history";
 import { Container } from "../Container";
-import { setContextValue } from "../context";
 import pick from "lodash/pick";
 // 存储历史记录对象
 export let history = null;
@@ -46,14 +45,11 @@ export function createApp(option) {
         // 这里是为了确保历史记录对象在组件渲染之前一定存在
         history = getHistory(option.mode);
         // 提取关键数据
-        const context = pick(option, ["minDocWidth", "maxDocWidth"]);
         const containerProps = pick(option, [
             "designWidth",
             "globalStyle",
         ]);
         const { onBefore, onAfter, loading, render, notFound } = option;
-        // 设置上下文属性
-        setContextValue(context);
         // 规范化路径：移除首尾斜杠
         const PATH_TRIM_REGEX = /^\/*|\/*$/g;
         const normalizePath = (path) => {
@@ -79,23 +75,38 @@ export function createApp(option) {
                 yield (onBefore === null || onBefore === void 0 ? void 0 : onBefore(normalizedPath));
                 // 加载并显示页面
                 if (typeof render === "function") {
-                    const pageContent = yield render(normalizedPath);
-                    // 如果返回 null/undefined，视为页面未找到
-                    if (pageContent === null || pageContent === undefined) {
+                    try {
+                        const pageContent = yield render(normalizedPath);
+                        // 如果返回 null/undefined，视为页面未找到
+                        if (pageContent === null || pageContent === undefined) {
+                            if (typeof notFound === "function") {
+                                setPage(yield notFound(normalizedPath));
+                            }
+                            else {
+                                // 默认 404 页面
+                                setPage(_jsxs("div", { children: ["Not Found: ", normalizedPath] }));
+                            }
+                            return;
+                        }
+                        setPage(pageContent);
+                    }
+                    catch (_a) {
+                        // 动态 import 失败等场景
                         if (typeof notFound === "function") {
                             setPage(yield notFound(normalizedPath));
                         }
                         else {
-                            // 默认 404 页面
                             setPage(_jsxs("div", { children: ["Not Found: ", normalizedPath] }));
                         }
                         return;
                     }
-                    setPage(pageContent);
                 }
                 // 页面加载后钩子
                 yield (onAfter === null || onAfter === void 0 ? void 0 : onAfter(normalizedPath));
-            }), [onBefore, onAfter, loading, render, notFound]);
+            }), 
+            // 所有外部变量在闭包创建时已捕获，不会变化
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            []);
             /**
              * 监听路由变化
              */
@@ -119,8 +130,8 @@ export function createApp(option) {
         else if (option.target instanceof HTMLElement) {
             mount = option.target;
         }
-        else {
-            throw new Error("No mounted object is specified");
+        if (!mount) {
+            throw new Error(`Mount target not found: ${typeof option.target === "string" ? option.target : "invalid element"}`);
         }
         const root = createRoot(mount);
         root.render(_jsx(App, {}));

package/build/utils/cssUtil.d.ts

@@ -1,4 +1,3 @@
-import { Interpolation, Theme } from '@emotion/react';
 /**
  * 匹配所有的CSS数值类型的值
  */
@@ -32,11 +31,3 @@ export interface SplitedValue {
  * @param defaultUnit
  */
 export declare function splitValue(value: number | string, defaultUnit?: string): SplitedValue;
-/**
- * 生成自适应的样式，仅供库内部使用
- * 所有内部组件的默认设计尺寸约定为750
- *
- * @param style
- * @returns
- */
-export declare function adaptive(style: Record<string, Interpolation<Theme>>): import("@emotion/react").SerializedStyles;

package/build/utils/cssUtil.js

@@ -1,5 +1,3 @@
-import { css } from '@emotion/react';
-import { getContextValue } from '../context';
 /**
  * 匹配所有的CSS数值类型的值
  */
@@ -51,39 +49,3 @@ export function splitValue(value, defaultUnit = 'px') {
     }
     throw new Error('Invalid numeric format');
 }
-/**
- * 生成自适应的样式，仅供库内部使用
- * 所有内部组件的默认设计尺寸约定为750
- *
- * @param style
- * @returns
- */
-export function adaptive(style) {
-    const ctx = getContextValue();
-    const max = {};
-    const min = {};
-    const normal = {};
-    for (let name in style) {
-        let value = style[name];
-        if (typeof value !== 'number') {
-            normal[name] = value;
-        }
-        else if ([
-            'flex',
-            'flexGrow',
-            'flexShrink',
-            'lineHeight',
-            'fontWeight',
-            'zIndex',
-        ].includes(name) &&
-            typeof value === 'number') {
-            normal[name] = value;
-        }
-        else {
-            normal[name] = (value * 100) / 750 + 'vw';
-            max[name] = (value * ctx.maxDocWidth) / 750 + 'px';
-            min[name] = (value * ctx.minDocWidth) / 750 + 'px';
-        }
-    }
-    return css(Object.assign(Object.assign({}, normal), { [`@media (min-width: ${ctx.maxDocWidth}px)`]: max, [`@media (max-width: ${ctx.minDocWidth}px)`]: min }));
-}

package/build/utils/defaultScroll.d.ts

@@ -1,9 +1,9 @@
-/**
- * 检测是否支持passive事件绑定
- */
-export declare let passiveSupported: boolean;
 /**
  * 禁用和启用默认滚动
+ *
+ * 注意：现代浏览器将 document/documentElement 上的 touchmove 监听器
+ * 默认视为 passive: true，此时 preventDefault() 会静默失效。
+ * 因此必须显式声明 passive: false 才能真正阻止默认滚动行为。
  */
 export declare const defaultScroll: {
     disable(): void;

package/build/utils/defaultScroll.js

@@ -1,16 +1,3 @@
-/**
- * 检测是否支持passive事件绑定
- */
-export let passiveSupported = false;
-try {
-    window.addEventListener('test', () => undefined, Object.defineProperty({}, 'passive', {
-        get: function () {
-            passiveSupported = true;
-        },
-    }));
-    // eslint-disable-next-line no-empty
-}
-catch (err) { }
 /**
  * 触摸移动事件处理器
  */
@@ -19,12 +6,16 @@ const touchMoveHandler = (event) => {
 };
 /**
  * 禁用和启用默认滚动
+ *
+ * 注意：现代浏览器将 document/documentElement 上的 touchmove 监听器
+ * 默认视为 passive: true，此时 preventDefault() 会静默失效。
+ * 因此必须显式声明 passive: false 才能真正阻止默认滚动行为。
  */
 export const defaultScroll = {
     disable() {
-        document.documentElement.addEventListener('touchmove', touchMoveHandler, passiveSupported ? { capture: false, passive: false } : false);
+        document.documentElement.addEventListener('touchmove', touchMoveHandler, { capture: false, passive: false });
     },
     enable() {
-        document.documentElement.removeEventListener('touchmove', touchMoveHandler, passiveSupported ? { capture: false } : false);
+        document.documentElement.removeEventListener('touchmove', touchMoveHandler, { capture: false });
     },
 };

package/build/utils/dom.js

@@ -20,15 +20,12 @@ export function createPortalDOM(point) {
             root.render(component);
         },
         unmount() {
-            root.unmount();
-            if (container instanceof HTMLDivElement) {
-                if (typeof container.remove === 'function') {
-                    container.remove();
-                }
-                else {
-                    mountPoint.removeChild(container);
-                }
+            // 先从 DOM 移除容器，再卸载 React 树
+            // 避免 React 18+ 在已卸载的根上发出警告
+            if (container.parentNode) {
+                container.parentNode.removeChild(container);
             }
+            root.unmount();
         },
     };
 }

package/build/utils/jsonp.js

@@ -25,20 +25,23 @@ export function jsonp(url_1) {
             }
             const urlObject = new URL(url);
             urlObject.searchParams.set(callbackName, funcName);
+            // 清理辅助函数
+            const cleanup = () => {
+                delete window[funcName];
+                script.remove();
+            };
             // 创建全局script
             const script = document.createElement('script');
             script.src = urlObject.href;
             document.body.appendChild(script);
             script.onerror = (error) => {
+                cleanup();
                 reject(error);
             };
             // 创建全局函数
             window[funcName] = (result) => {
+                cleanup();
                 resolve(result);
-                // 删除全局函数
-                delete window[funcName];
-                // 删除临时脚本
-                script.remove();
             };
         });
     });

package/build/utils/request.js

@@ -210,42 +210,32 @@ export function sendRequest(option) {
     return __awaiter(this, void 0, void 0, function* () {
         const { url, fetchOption, timeout } = parseRequestOption(option);
         const controller = new AbortController();
-        return Promise.race([
-            // 网络请求
-            fetch(url, Object.assign(Object.assign({}, fetchOption), { signal: controller.signal }))
-                .then((response) => {
-                return response.json();
-            })
-                .then((result) => {
-                return result;
-            })
-                .catch((error) => {
-                // 如果是主动取消的请求，返回超时错误
-                if (error.name === 'AbortError') {
-                    const result = {
-                        code: -10001,
-                        message: "Network request timeout",
-                    };
-                    return result;
-                }
+        // 超时定时器，请求完成后清除以防泄漏
+        const timeoutId = window.setTimeout(() => {
+            controller.abort();
+        }, timeout !== null && timeout !== void 0 ? timeout : 30000);
+        try {
+            const response = yield fetch(url, Object.assign(Object.assign({}, fetchOption), { signal: controller.signal }));
+            const result = yield response.json();
+            return result;
+        }
+        catch (error) {
+            if (error.name === 'AbortError') {
                 const result = {
-                    code: -10000,
-                    message: "An exception occurred in the network request",
+                    code: -10001,
+                    message: "Network request timeout",
                 };
                 return result;
-            }),
-            // 超时逻辑
-            new Promise((resolve) => {
-                window.setTimeout(() => {
-                    controller.abort(); // 取消请求
-                    const result = {
-                        code: -10001,
-                        message: "Network request timeout",
-                    };
-                    resolve(result);
-                }, timeout !== null && timeout !== void 0 ? timeout : 30000);
-            }),
-        ]);
+            }
+            const result = {
+                code: -10000,
+                message: "An exception occurred in the network request",
+            };
+            return result;
+        }
+        finally {
+            clearTimeout(timeoutId);
+        }
     });
 }
 /**

package/build/utils/tick.js

@@ -4,42 +4,35 @@
  * @param interval
  */
 export function tick(callback, interval) {
-    // 执行状态，是否正在执行
     let isRunning;
     let frame;
     let frameId;
-    // 设置了tick的间隔
-    if (interval && typeof interval === 'number') {
+    // 有效的正整数间隔才走间隔分支
+    if (typeof interval === 'number' && interval > 0) {
         let lastTick = Date.now();
         frame = () => {
-            if (!isRunning) {
+            if (!isRunning)
                 return;
-            }
             frameId = requestAnimationFrame(frame);
             const now = Date.now();
-            // 每次间隔频率逻辑上保持一致，即使帧频不一致
             if (now - lastTick >= interval) {
-                // 本次tick的时间为上次的时间加上频率间隔
-                lastTick = lastTick + interval;
+                // 直接对齐到当前时间，避免长时间后台切回后的追赶风暴
+                lastTick = now;
                 callback();
             }
         };
     }
-    // 没有设置tick的间隔
     else {
+        // 没有设置 interval 或 interval <= 0 时，每帧执行
         frame = () => {
-            if (!isRunning) {
+            if (!isRunning)
                 return;
-            }
             frameId = requestAnimationFrame(frame);
-            // 没有设置interval时，每帧都执行
             callback();
         };
     }
-    // 开始执行
     isRunning = true;
     frameId = requestAnimationFrame(frame);
-    // 返回一个可以立即停止的函数
     return () => {
         isRunning = false;
         cancelAnimationFrame(frameId);

package/build/utils/uniqKey.js

@@ -1,16 +1,16 @@
 let keyIndex = 0;
-let last = Date.now();
+let lastTimestamp = 0;
 /**
  * 生成一个全局唯一的key
  * @returns
  */
 export function uniqKey() {
-    keyIndex += 1;
-    let now = Date.now();
-    if (now !== last && keyIndex > 1e9) {
+    const now = Date.now();
+    // 时间戳变化时重置计数器
+    if (now !== lastTimestamp) {
         keyIndex = 0;
+        lastTimestamp = now;
     }
-    const key = now.toString(36) + keyIndex.toString(36);
-    last = now;
-    return key;
+    keyIndex += 1;
+    return now.toString(36) + keyIndex.toString(36);
 }

package/build/utils/wait.js

@@ -31,13 +31,13 @@ export function waitUntil(condition, maxTime) {
         return new Promise((resolve) => {
             const stop = tick(() => {
                 const now = Date.now();
-                const result = condition();
                 // 超时返回false
                 if (now - start >= maxTime) {
                     stop();
                     resolve(false);
                     return;
                 }
+                const result = condition();
                 // 处理结果
                 const handle = (res) => {
                     if (res) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",
@@ -35,20 +35,20 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.19",
     "history": "^5.3.0",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.23"
   },
   "peerDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.20",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "csstype": "^3.1.3",
-    "rimraf": "^6.0.1",
+    "@types/lodash": "^4.17.24",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "csstype": "^3.2.3",
+    "rimraf": "^6.1.3",
     "typescript": "^5.9.3"
   }
 }

package/test/eslint.config.js

@@ -10,12 +10,15 @@ export default defineConfig([
     files: ['**/*.{js,jsx}'],
     extends: [
       js.configs.recommended,
-      reactHooks.configs['recommended-latest'],
+      reactHooks.configs.flat['recommended-latest'],
       reactRefresh.configs.vite,
     ],
     languageOptions: {
       ecmaVersion: 2020,
-      globals: globals.browser,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
       parserOptions: {
         ecmaVersion: 'latest',
         ecmaFeatures: { jsx: true },

package/test/package.json

@@ -10,18 +10,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
-    "globals": "^16.4.0",
-    "vite": "^7.1.7"
+    "@eslint/js": "^9.39.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^9.39.3",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "vite": "^7.3.1"
   }
 }

package/test/src/ago/index.jsx

@@ -2,6 +2,8 @@ import React from "react";
 import { Ago } from "@";
 
 export default function Index() {
+  const now = 1583314718595;
+
   return (
     <div>
       <p>2019-11-2</p>
@@ -17,7 +19,7 @@ export default function Index() {
       <Ago date="2018/07/06 12:04:36" style={{ color: "red" }} />
       <hr />
       <p>Date.now()</p>
-      <Ago date={Date.now()} style={{ color: "red" }} />
+      <Ago date={now} style={{ color: "red" }} />
       <hr />
       <p>new Date("2012-07-16 12:30:06")</p>
       <Ago date={new Date("2012-07-16 12:30:06")} style={{ color: "red" }} />

package/test/src/dialog/index.module.css

@@ -1,5 +1,5 @@
 .contentBox {
-  width: 7.5rem * 0.8;
+  width: calc(7.5rem * 0.8);
   height: 4rem;
   background: goldenrod;
 }