@taicode/common-web 1.1.1 → 1.1.3

package/output/side-cache/side-cache.test.js

@@ -0,0 +1,271 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { runInAction } from 'mobx';
+import { SideCache } from './side-cache';
+describe('SideCache', () => {
+    let cache;
+    beforeEach(() => {
+        cache = new SideCache();
+    });
+    describe('初始状态', () => {
+        it('应该初始化为空状态', () => {
+            expect(cache.empty).toBe(true);
+            expect(cache.value).toBe(undefined);
+        });
+    });
+    describe('同步缓存', () => {
+        it('应该能够缓存同步函数的结果', () => {
+            const mockFunc = vi.fn(() => 'test-result');
+            const key = 'test-key';
+            const result = cache.handle(key, mockFunc);
+            expect(result).toBe('test-result');
+            expect(mockFunc).toHaveBeenCalledTimes(1);
+            expect(cache.empty).toBe(false);
+            expect(cache.value).toBe('test-result');
+        });
+        it('应该对相同 key 返回缓存的结果', () => {
+            const mockFunc = vi.fn(() => 'cached-result');
+            const key = 'same-key';
+            // 第一次调用
+            const result1 = cache.handle(key, mockFunc);
+            expect(result1).toBe('cached-result');
+            expect(mockFunc).toHaveBeenCalledTimes(1);
+            // 第二次调用相同 key，应该直接返回缓存
+            const result2 = cache.handle(key, mockFunc);
+            expect(result2).toBe('cached-result');
+            expect(mockFunc).toHaveBeenCalledTimes(2); // 函数仍会被调用，但会更新缓存
+            expect(cache.value).toBe('cached-result');
+        });
+        it('应该对不同 key 分别缓存', () => {
+            const mockFunc1 = vi.fn(() => 'result1');
+            const mockFunc2 = vi.fn(() => 'result2');
+            cache.handle('key1', mockFunc1);
+            expect(cache.value).toBe('result1');
+            cache.handle('key2', mockFunc2);
+            expect(cache.value).toBe('result2');
+            // 切换回 key1
+            cache.handle('key1', mockFunc1);
+            expect(cache.value).toBe('result1');
+        });
+    });
+    describe('异步缓存', () => {
+        it('应该能够缓存异步函数的结果', async () => {
+            const mockAsyncFunc = vi.fn(async () => 'async-result');
+            const key = 'async-key';
+            const promise = cache.handle(key, mockAsyncFunc);
+            expect(promise).toBeInstanceOf(Promise);
+            const result = await promise;
+            expect(result).toBe('async-result');
+            expect(mockAsyncFunc).toHaveBeenCalledTimes(1);
+            expect(cache.empty).toBe(false);
+            expect(cache.value).toBe('async-result');
+        });
+        it('应该在异步函数执行期间立即设置 currentKey', async () => {
+            const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+            const mockAsyncFunc = vi.fn(async () => {
+                await delay(10);
+                return 'delayed-result';
+            });
+            const key = 'delayed-key';
+            // 在异步函数开始执行时，currentKey 应该已经设置
+            const promise = cache.handle(key, mockAsyncFunc);
+            // 此时异步函数还在执行，但 currentKey 已设置
+            // 如果之前有缓存，value 应该能立即获取到
+            const result = await promise;
+            expect(result).toBe('delayed-result');
+            expect(cache.value).toBe('delayed-result');
+        });
+        it('应该处理异步函数的错误', async () => {
+            const error = new Error('Async error');
+            const mockAsyncFunc = vi.fn(async () => {
+                throw error;
+            });
+            const key = 'error-key';
+            await expect(cache.handle(key, mockAsyncFunc)).rejects.toThrow('Async error');
+            expect(mockAsyncFunc).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('key 序列化', () => {
+        it('应该正确处理不同类型的 key', () => {
+            const mockFunc = vi.fn(() => 'result');
+            // 字符串 key
+            cache.handle('string-key', mockFunc);
+            expect(cache.value).toBe('result');
+            // 数字 key
+            cache.handle(123, mockFunc);
+            expect(cache.value).toBe('result');
+            // 对象 key
+            cache.handle({ id: 1, name: 'test' }, mockFunc);
+            expect(cache.value).toBe('result');
+            // 数组 key
+            cache.handle([1, 2, 3], mockFunc);
+            expect(cache.value).toBe('result');
+        });
+        it('相同内容的对象 key 应该被视为相同', () => {
+            const mockFunc = vi.fn(() => 'object-result');
+            const key1 = { id: 1, name: 'test' };
+            const key2 = { id: 1, name: 'test' };
+            cache.handle(key1, mockFunc);
+            const result1 = cache.value;
+            cache.handle(key2, mockFunc);
+            const result2 = cache.value;
+            expect(result1).toBe(result2);
+            expect(result1).toBe('object-result');
+        });
+    });
+    describe('缓存时间戳', () => {
+        it('应该为缓存项添加创建时间', () => {
+            const mockFunc = vi.fn(() => 'timestamped-result');
+            const key = 'timestamp-key';
+            const beforeTime = new Date().toISOString();
+            cache.handle(key, mockFunc);
+            const afterTime = new Date().toISOString();
+            // 访问私有属性进行测试（仅用于测试目的）
+            const cacheData = cache.cache;
+            const cachedItem = cacheData[JSON.stringify(key)];
+            expect(cachedItem).toBeDefined();
+            expect(cachedItem.data).toBe('timestamped-result');
+            expect(cachedItem.createTime).toBeDefined();
+            expect(typeof cachedItem.createTime).toBe('string');
+            // 验证时间戳在合理范围内
+            expect(cachedItem.createTime >= beforeTime).toBe(true);
+            expect(cachedItem.createTime <= afterTime).toBe(true);
+        });
+    });
+    describe('边界情况', () => {
+        it('应该处理 null 和 undefined key', () => {
+            const mockFunc1 = vi.fn(() => 'null-key-result');
+            const mockFunc2 = vi.fn(() => 'undefined-key-result');
+            cache.handle(null, mockFunc1);
+            expect(cache.value).toBe('null-key-result');
+            cache.handle(undefined, mockFunc2);
+            expect(cache.value).toBe('undefined-key-result');
+        });
+        it('应该处理返回 null 或 undefined 的函数', () => {
+            const nullFunc = vi.fn(() => null);
+            const undefinedFunc = vi.fn(() => undefined);
+            cache.handle('null-key', nullFunc);
+            expect(cache.value).toBe(null);
+            expect(cache.empty).toBe(false);
+            cache.handle('undefined-key', undefinedFunc);
+            expect(cache.value).toBe(undefined);
+            expect(cache.empty).toBe(false);
+        });
+        it('应该处理返回 Promise.resolve(null) 的异步函数', async () => {
+            const nullAsyncFunc = vi.fn(async () => null);
+            const result = await cache.handle('async-null', nullAsyncFunc);
+            expect(result).toBe(null);
+            expect(cache.value).toBe(null);
+            expect(cache.empty).toBe(false);
+        });
+    });
+    describe('类型检查', () => {
+        it('应该正确识别 Promise-like 对象', async () => {
+            let thenCallback;
+            const promiseLike = {
+                then: vi.fn((callback) => {
+                    thenCallback = callback;
+                    return promiseLike;
+                })
+            };
+            const mockFunc = vi.fn(() => promiseLike);
+            const result = cache.handle('promise-like', mockFunc);
+            expect(result).toBe(promiseLike);
+            expect(promiseLike.then).toHaveBeenCalled();
+            // 模拟 Promise 完成
+            if (thenCallback) {
+                thenCallback('resolved-value');
+            }
+        });
+    });
+    describe('clear 方法', () => {
+        it('应该能够清除指定 key 的缓存', () => {
+            const mockFunc = vi.fn(() => 'test-result');
+            const key = 'test-key';
+            // 先添加缓存
+            cache.handle(key, mockFunc);
+            expect(cache.empty).toBe(false);
+            expect(cache.value).toBe('test-result');
+            // 清除指定 key 的缓存
+            cache.clear(key);
+            expect(cache.empty).toBe(true);
+            expect(cache.value).toBe(undefined);
+        });
+        it('应该能够清除当前激活的缓存', () => {
+            const mockFunc = vi.fn(() => 'active-result');
+            const key = 'active-key';
+            cache.handle(key, mockFunc);
+            expect(cache.value).toBe('active-result');
+            // 清除当前激活的 key
+            cache.clear(key);
+            expect(cache.value).toBe(undefined);
+            expect(cache.empty).toBe(true);
+        });
+        it('应该能够清除所有缓存', () => {
+            const mockFunc1 = vi.fn(() => 'result1');
+            const mockFunc2 = vi.fn(() => 'result2');
+            // 添加多个缓存
+            cache.handle('key1', mockFunc1);
+            cache.handle('key2', mockFunc2);
+            expect(cache.value).toBe('result2');
+            expect(cache.empty).toBe(false);
+            // 清除所有缓存
+            cache.clear();
+            expect(cache.value).toBe(undefined);
+            expect(cache.empty).toBe(true);
+        });
+        it('应该能够清除非当前激活的缓存而不影响当前状态', () => {
+            const mockFunc1 = vi.fn(() => 'result1');
+            const mockFunc2 = vi.fn(() => 'result2');
+            // 添加两个缓存
+            cache.handle('key1', mockFunc1);
+            cache.handle('key2', mockFunc2);
+            expect(cache.value).toBe('result2'); // 当前激活的是 key2
+            // 清除非当前激活的 key1
+            cache.clear('key1');
+            expect(cache.value).toBe('result2'); // 当前值不变
+            expect(cache.empty).toBe(false); // 仍有缓存存在
+        });
+        it('应该正确处理清除不存在的 key', () => {
+            const mockFunc = vi.fn(() => 'test-result');
+            cache.handle('existing-key', mockFunc);
+            // 清除不存在的 key 不应该影响现有缓存
+            cache.clear('non-existing-key');
+            expect(cache.value).toBe('test-result');
+            expect(cache.empty).toBe(false);
+        });
+        it('应该正确处理复杂对象作为 key', () => {
+            const complexKey = { id: 1, data: { nested: 'value' } };
+            const mockFunc = vi.fn(() => 'complex-result');
+            // 使用复杂对象作为 key
+            cache.handle(complexKey, mockFunc);
+            expect(cache.value).toBe('complex-result');
+            // 清除复杂对象 key
+            cache.clear(complexKey);
+            expect(cache.value).toBe(undefined);
+            expect(cache.empty).toBe(true);
+        });
+        it('应该正确处理 undefined 作为 key', () => {
+            const mockFunc = vi.fn(() => 'undefined-key-result');
+            // 使用 undefined 作为 key
+            cache.handle(undefined, mockFunc);
+            expect(cache.value).toBe('undefined-key-result');
+            // 清除 undefined key
+            cache.clear(undefined);
+            expect(cache.value).toBe(undefined);
+            expect(cache.empty).toBe(true);
+        });
+        it('应该在 MobX action 中正确更新状态', () => {
+            const mockFunc = vi.fn(() => 'action-result');
+            const key = 'action-key';
+            runInAction(() => {
+                cache.handle(key, mockFunc);
+            });
+            expect(cache.value).toBe('action-result');
+            runInAction(() => {
+                cache.clear(key);
+            });
+            expect(cache.value).toBe(undefined);
+            expect(cache.empty).toBe(true);
+        });
+    });
+});

package/output/use-observer/index.d.ts

@@ -0,0 +1,2 @@
+export { useObserver } from './use-observer';
+//# sourceMappingURL=index.d.ts.map

package/output/use-observer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/use-observer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/output/use-observer/index.js

@@ -0,0 +1 @@
+export { useObserver } from './use-observer';

package/output/use-observer/use-observer.d.ts

@@ -0,0 +1,3 @@
+export declare function useObserver<T>(initialValue: T): T;
+export declare function useObserver<T, U>(initialValue: T, selector: (v: T) => U): U;
+//# sourceMappingURL=use-observer.d.ts.map

package/output/use-observer/use-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-observer.d.ts","sourceRoot":"","sources":["../../source/use-observer/use-observer.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,GAAG,CAAC,CAAA;AAClD,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA"}

package/output/use-observer/use-observer.js

@@ -0,0 +1,16 @@
+import { reaction } from 'mobx';
+import React, { useState } from 'react';
+export function useObserver(initialValue, selector) {
+    const [, refresh] = useState({});
+    React.useEffect(() => {
+        if (initialValue == null)
+            return;
+        if (selector == null)
+            return;
+        return reaction(() => selector(initialValue), () => refresh({}));
+    }, [selector, initialValue]);
+    if (selector == null) {
+        return initialValue;
+    }
+    return selector(initialValue);
+}

package/output/use-observer/use-observer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-observer.test.d.ts.map

package/output/use-observer/use-observer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-observer.test.d.ts","sourceRoot":"","sources":["../../source/use-observer/use-observer.test.tsx"],"names":[],"mappings":""}

package/output/use-observer/use-observer.test.jsx

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { observable, action } from 'mobx';
+import { useObserver } from './use-observer';
+describe('useObserver', () => {
+    it('应该返回初始值当没有selector时', () => {
+        const initialValue = '初始值';
+        const { result } = renderHook(() => useObserver(initialValue));
+        expect(result.current).toBe(initialValue);
+    });
+    it('应该使用selector转换值', () => {
+        const initialValue = { count: 5 };
+        const selector = (value) => value.count * 2;
+        const { result } = renderHook(() => useObserver(initialValue, selector));
+        expect(result.current).toBe(10);
+    });
+    it('应该在观察对象变化时重新渲染', async () => {
+        const observableStore = observable({
+            count: 0,
+            increment: action(() => {
+                observableStore.count++;
+            })
+        });
+        const { result } = renderHook(() => useObserver(observableStore, (store) => store.count));
+        expect(result.current).toBe(0);
+        // 改变observable的值
+        act(() => {
+            observableStore.increment();
+        });
+        // 等待React更新
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe(1);
+    });
+    it('应该处理复杂的selector函数', () => {
+        const store = observable({
+            users: [
+                { id: 1, name: '张三', active: true },
+                { id: 2, name: '李四', active: false },
+                { id: 3, name: '王五', active: true }
+            ]
+        });
+        const selector = (store) => store.users.filter((user) => user.active).map((user) => user.name);
+        const { result } = renderHook(() => useObserver(store, selector));
+        expect(result.current).toEqual(['张三', '王五']);
+    });
+    it('应该在observable数组变化时重新渲染', async () => {
+        const store = observable({
+            items: ['项目1', '项目2'],
+            addItem: action((item) => {
+                store.items.push(item);
+            })
+        });
+        const { result } = renderHook(() => useObserver(store, (store) => store.items.length));
+        expect(result.current).toBe(2);
+        act(() => {
+            store.addItem('项目3');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe(3);
+    });
+    it('应该处理null值的初始值', () => {
+        const { result } = renderHook(() => useObserver(null));
+        expect(result.current).toBeNull();
+    });
+    it('应该处理undefined值的初始值', () => {
+        const { result } = renderHook(() => useObserver(undefined));
+        expect(result.current).toBeUndefined();
+    });
+    it('应该在selector为null时返回原值', () => {
+        const initialValue = { data: '测试数据' };
+        const { result } = renderHook(() => useObserver(initialValue, null));
+        expect(result.current).toBe(initialValue);
+    });
+    it('应该处理嵌套observable对象', async () => {
+        const store = observable({
+            user: {
+                profile: {
+                    name: '测试用户',
+                    email: 'test@example.com'
+                }
+            },
+            updateName: action((name) => {
+                store.user.profile.name = name;
+            })
+        });
+        const { result } = renderHook(() => useObserver(store, (store) => store.user.profile.name));
+        expect(result.current).toBe('测试用户');
+        act(() => {
+            store.updateName('新用户名');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe('新用户名');
+    });
+    it('应该处理多个observable属性的变化', async () => {
+        const store = observable({
+            firstName: '张',
+            lastName: '三',
+            updateFirstName: action((name) => {
+                store.firstName = name;
+            }),
+            updateLastName: action((name) => {
+                store.lastName = name;
+            })
+        });
+        const { result } = renderHook(() => useObserver(store, (store) => `${store.firstName}${store.lastName}`));
+        expect(result.current).toBe('张三');
+        act(() => {
+            store.updateFirstName('李');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe('李三');
+        act(() => {
+            store.updateLastName('四');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe('李四');
+    });
+    it('应该在组件卸载时清理reaction', () => {
+        const store = observable({ count: 0 });
+        const { unmount } = renderHook(() => useObserver(store, (store) => store.count));
+        // 卸载组件应该不会抛出错误
+        expect(() => unmount()).not.toThrow();
+    });
+    it('应该处理boolean类型的返回值', () => {
+        const store = observable({ isActive: true });
+        const { result } = renderHook(() => useObserver(store, (store) => store.isActive));
+        expect(result.current).toBe(true);
+    });
+    it('应该处理数字类型的返回值', () => {
+        const store = observable({ count: 42 });
+        const { result } = renderHook(() => useObserver(store, (store) => store.count));
+        expect(result.current).toBe(42);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taicode/common-web",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "author": "Alain",
   "license": "ISC",
   "description": "",