refactor: migrate storage listeners to wxt/browser and refactor provider state management

This commit is contained in:
雨霖铃
2026-05-22 23:06:55 +08:00
parent 756ece31d3
commit 81a2e793ba
4 changed files with 151 additions and 160 deletions
+4 -1
View File
@@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { ThemeModeProvider } from './ThemeModeProvider'; import { ThemeModeProvider } from './ThemeModeProvider';
import { RouterProvider } from './RouterProvider'; // 💡 1. 全局合龙:引入满血重构的路由中枢
interface AppRootProps { interface AppRootProps {
children: React.ReactNode; children: React.ReactNode;
@@ -8,7 +9,9 @@ interface AppRootProps {
export default function AppRoot({ children }: AppRootProps) { export default function AppRoot({ children }: AppRootProps) {
return ( return (
<React.StrictMode> <React.StrictMode>
<ThemeModeProvider>{children}</ThemeModeProvider> <ThemeModeProvider>
<RouterProvider>{children}</RouterProvider>
</ThemeModeProvider>
</React.StrictMode> </React.StrictMode>
); );
} }
+46 -86
View File
@@ -7,14 +7,15 @@ import {
useRef, useRef,
useState, useState,
} from 'react'; } from 'react';
import type { PageType, StorageSchema, ContextMenuPendingData } from '@/types/storage'; import { browser } from 'wxt/browser'; // 💡 1. 规范回归:引入 WXT 标准多端一致性代理空间
import type { ContextMenuPendingData, PageType, StorageSchema } from '@/types/storage';
import { storageUtil } from '@/utils/chromeStorage'; import { storageUtil } from '@/utils/chromeStorage';
import { import {
getAllFeatureKeys, getAllFeatureKeys,
getDefaultPageOrder, getDefaultPageOrder,
getDefaultVisibleFeatureKeys, getDefaultVisibleFeatureKeys,
} from '@/config/features'; } from '@/config/features';
import { saveContextMenuData, CONTEXT_MENU_DATA_EXPIRY_MS } from '@/utils/useContextMenuData'; import { CONTEXT_MENU_DATA_EXPIRY_MS, saveContextMenuData } from '@/utils/useContextMenuData';
/** /**
* 校验是否为合法的页面类型 * 校验是否为合法的页面类型
@@ -24,7 +25,7 @@ const isValidPage = (page: unknown): page is PageType => {
}; };
/** /**
* 校验页面列表是否合法(所有项都必须是合法的 PageType) * 校验页面列表是否合法
*/ */
const isValidPageList = (pages: unknown): pages is PageType[] => { const isValidPageList = (pages: unknown): pages is PageType[] => {
return Array.isArray(pages) && pages.every(isValidPage); return Array.isArray(pages) && pages.every(isValidPage);
@@ -32,72 +33,41 @@ const isValidPageList = (pages: unknown): pages is PageType[] => {
/** /**
* 将已保存的列表与默认列表合并,确保新增的功能特性被自动包含 * 将已保存的列表与默认列表合并,确保新增的功能特性被自动包含
*
* 合并策略:
* - 保留用户已有的自定义顺序
* - 过滤掉已不再存在的旧项
* - 将默认列表中存在但保存列表中缺失的新项追加到末尾
*/ */
const mergeWithDefaults = (saved: PageType[], defaults: PageType[]): PageType[] => { const mergeWithDefaults = (saved: PageType[], defaults: PageType[]): PageType[] => {
const savedSet = new Set(saved); const savedSet = new Set(saved);
const defaultSet = new Set(defaults); const defaultSet = new Set(defaults);
// 保留 saved 中仍然合法的项(按用户自定义顺序)
const preserved = saved.filter((page) => defaultSet.has(page)); const preserved = saved.filter((page) => defaultSet.has(page));
// 追加 defaults 中有但 saved 中没有的新功能
const newItems = defaults.filter((page) => !savedSet.has(page)); const newItems = defaults.filter((page) => !savedSet.has(page));
return [...preserved, ...newItems]; return [...preserved, ...newItems];
}; };
/**
* 路由上下文类型定义
*/
interface RouterContextType { interface RouterContextType {
/** 当前所在页面 */
currentPage: PageType; currentPage: PageType;
/** 当前可见的页面列表(用于侧边栏/菜单显示) */
visiblePages: PageType[]; visiblePages: PageType[];
/** 页面显示顺序 */
pageOrder: PageType[]; pageOrder: PageType[];
/** 路由数据是否已从存储中加载完成 */
isLoaded: boolean; isLoaded: boolean;
/** 导航到指定页面 */
navigateTo: (page: PageType) => void; navigateTo: (page: PageType) => void;
/** 返回仪表盘 */
goBack: () => void; goBack: () => void;
/** 设置可见页面列表 */
setVisiblePages: (pages: PageType[]) => void; setVisiblePages: (pages: PageType[]) => void;
/** 设置页面显示顺序 */
setPageOrder: (pages: PageType[]) => void; setPageOrder: (pages: PageType[]) => void;
} }
/**
* 创建路由上下文
*/
const RouterContext = createContext<RouterContextType | null>(null); const RouterContext = createContext<RouterContextType | null>(null);
/**
* 路由提供者组件参数类型
*/
interface RouterProviderProps { interface RouterProviderProps {
/** 子组件 */
children: ReactNode; children: ReactNode;
/** 默认初始路由,默认为 'dashboard' */
defaultRoute?: PageType; defaultRoute?: PageType;
/** 是否同步路由状态到存储,默认为 true */
syncRoute?: boolean; syncRoute?: boolean;
/** 存储路由状态的键名,默认为 'app/currentRoute' */
syncKey?: keyof StorageSchema; syncKey?: keyof StorageSchema;
/** 可见页面列表的键名,默认为 'app/visiblePages' */
visiblePagesKey?: keyof StorageSchema; visiblePagesKey?: keyof StorageSchema;
/** 页面排序的键名,默认为 'app/pageOrder' */
pageOrderKey?: keyof StorageSchema; pageOrderKey?: keyof StorageSchema;
} }
/** /**
* 同步从 localStorage 获取存储快照(用于消除异步加载产生的首屏闪烁 * 同步从 localStorage 获取存储快照(首屏 0 闪烁核心防线
*/ */
const getSyncSnapshot = <T,>( const getSyncSnapshot = <T,>(
key: string, key: string,
@@ -113,15 +83,11 @@ const getSyncSnapshot = <T,>(
} }
return (parsed as T) ?? defaultValue; return (parsed as T) ?? defaultValue;
} catch (error) { } catch (error) {
console.error('解析同步快照失败:', error); console.error('[Router Snapshot Error] Failed to read sync cache:', error);
return defaultValue; return defaultValue;
} }
}; };
/**
* 路由提供者组件
* 负责管理应用内部的路由状态、页面可见性及排序,并支持与 Chrome Storage 同步
*/
export function RouterProvider({ export function RouterProvider({
children, children,
defaultRoute = 'dashboard', defaultRoute = 'dashboard',
@@ -130,11 +96,11 @@ export function RouterProvider({
visiblePagesKey = 'app/visiblePages', visiblePagesKey = 'app/visiblePages',
pageOrderKey = 'app/pageOrder', pageOrderKey = 'app/pageOrder',
}: RouterProviderProps) { }: RouterProviderProps) {
// 当前页面状态:优先从同步快照加载,并进行合法性校验 // 1. 初始化派生状态流(0 延迟快照同步)
const [currentPage, setCurrentPage] = useState<PageType>(() => const [currentPage, setCurrentPage] = useState<PageType>(() =>
getSyncSnapshot(syncKey as string, defaultRoute, isValidPage), getSyncSnapshot(syncKey as string, defaultRoute, isValidPage),
); );
// 可见页面列表状态:从快照加载后与默认值合并,确保新功能可见
const [visiblePages, setVisiblePages] = useState<PageType[]>(() => { const [visiblePages, setVisiblePages] = useState<PageType[]>(() => {
const snapshot = getSyncSnapshot( const snapshot = getSyncSnapshot(
visiblePagesKey as string, visiblePagesKey as string,
@@ -143,7 +109,7 @@ export function RouterProvider({
); );
return mergeWithDefaults(snapshot, getDefaultVisibleFeatureKeys()); return mergeWithDefaults(snapshot, getDefaultVisibleFeatureKeys());
}); });
// 页面排序状态:从快照加载后与默认值合并,确保新功能出现在排序中
const [pageOrder, setPageOrder] = useState<PageType[]>(() => { const [pageOrder, setPageOrder] = useState<PageType[]>(() => {
const snapshot = getSyncSnapshot( const snapshot = getSyncSnapshot(
pageOrderKey as string, pageOrderKey as string,
@@ -152,16 +118,16 @@ export function RouterProvider({
); );
return mergeWithDefaults(snapshot, getDefaultPageOrder()); return mergeWithDefaults(snapshot, getDefaultPageOrder());
}); });
// 加载完成标识:如果快照数据有效,直接标记为已加载,避免首屏骨架屏
const [isLoaded, setIsLoaded] = useState(() => { const [isLoaded, setIsLoaded] = useState(() => {
const snapshotKey = localStorage.getItem(`snapshot/${syncKey as string}`); const snapshotKey = localStorage.getItem(`snapshot/${syncKey as string}`);
const snapshotVisible = localStorage.getItem(`snapshot/${visiblePagesKey as string}`); const snapshotVisible = localStorage.getItem(`snapshot/${visiblePagesKey as string}`);
const snapshotOrder = localStorage.getItem(`snapshot/${pageOrderKey as string}`); const snapshotOrder = localStorage.getItem(`snapshot/${pageOrderKey as string}`);
// 快照数据存在且通过校验,说明之前已加载过,可跳过骨架屏
return !!(snapshotKey && snapshotVisible && snapshotOrder); return !!(snapshotKey && snapshotVisible && snapshotOrder);
}); });
/** /**
* 从存储中加载初始路由数据 * 从异步存储中安全溯源初始数据
*/ */
const loadInitialData = useCallback(async () => { const loadInitialData = useCallback(async () => {
try { try {
@@ -172,7 +138,6 @@ export function RouterProvider({
); );
const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder()); const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder());
// 增加数据合法性校验并进行类型收窄
if (isValidPage(savedRoute) && syncRoute) { if (isValidPage(savedRoute) && syncRoute) {
setCurrentPage(savedRoute); setCurrentPage(savedRoute);
} }
@@ -183,29 +148,31 @@ export function RouterProvider({
setPageOrder(mergeWithDefaults(savedPageOrder, getDefaultPageOrder())); setPageOrder(mergeWithDefaults(savedPageOrder, getDefaultPageOrder()));
} }
} catch (error) { } catch (error) {
console.error('加载初始路由数据失败:', error); console.error('[Router Init Error] Core data fetch failed:', error);
} }
}, [defaultRoute, syncKey, syncRoute, visiblePagesKey, pageOrderKey]); }, [defaultRoute, syncKey, syncRoute, visiblePagesKey, pageOrderKey]);
// 组件挂载时加载初始数据 // 副作用 1:组件挂载时,激活初始路由校验与右键菜单传递载荷(Context Payload)的嗅探
useEffect(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
loadInitialData() loadInitialData()
.then(() => { .then(() => {
if (!cancelled) { if (cancelled) return;
setIsLoaded(true); setIsLoaded(true);
// 检查 URL 参数中的右键菜单数据 // 检查 URL 参数中的右键菜单高阶中转数据
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const feature = params.get('feature') as PageType | null; const feature = params.get('feature') as PageType | null;
const payload = params.get('payload'); const payload = params.get('payload');
if (feature && payload && isValidPage(feature)) { if (feature && payload && isValidPage(feature)) {
saveContextMenuData({ featureKey: feature, payload }).catch(console.error); void saveContextMenuData({ featureKey: feature, payload }).catch((err) => {
navigateTo(feature); console.error('[Router Context Handler Error]', err);
});
setCurrentPage(feature);
// 清理 URL 参数
const url = new URL(window.location.href); const url = new URL(window.location.href);
url.searchParams.delete('feature'); url.searchParams.delete('feature');
url.searchParams.delete('payload'); url.searchParams.delete('payload');
@@ -214,7 +181,7 @@ export function RouterProvider({
} }
} }
// 检查 storage 中的右键菜单待处理数据(用于 openPopup 场景) // 检查 storage 中的右键菜单待处理数据(针对 openPopup 的闭环场景)
storageUtil storageUtil
.get('contextMenu/pendingData', undefined) .get('contextMenu/pendingData', undefined)
.then((pendingData) => { .then((pendingData) => {
@@ -223,78 +190,78 @@ export function RouterProvider({
isValidPage(pendingData.featureKey) && isValidPage(pendingData.featureKey) &&
Date.now() - pendingData.timestamp < CONTEXT_MENU_DATA_EXPIRY_MS Date.now() - pendingData.timestamp < CONTEXT_MENU_DATA_EXPIRY_MS
) { ) {
navigateTo(pendingData.featureKey as PageType); setCurrentPage(pendingData.featureKey as PageType);
// 不在这里清除数据,让目标页面的 useContextMenuData 来消费和清除
} }
}) })
.catch(console.error); .catch(console.error);
}
}) })
.catch(console.error); .catch(console.error);
return () => { return () => {
cancelled = true; cancelled = true;
}; };
}, [loadInitialData]); }, [loadInitialData]);
// 当 currentPage 改变时,如果开启了同步,则持久化到存储和本地快照
useEffect(() => { useEffect(() => {
if (isLoaded && syncRoute) { if (isLoaded && syncRoute) {
storageUtil.set(syncKey, currentPage as PageType).catch(console.error); void storageUtil.set(syncKey, currentPage as PageType).catch(console.error);
try {
localStorage.setItem(`snapshot/${syncKey}`, JSON.stringify(currentPage)); localStorage.setItem(`snapshot/${syncKey}`, JSON.stringify(currentPage));
} catch (err) {
console.error('[Router LocalStorage Error]', err);
}
} }
}, [currentPage, isLoaded, syncRoute, syncKey]); }, [currentPage, isLoaded, syncRoute, syncKey]);
// 持久化可见页面列表
useEffect(() => { useEffect(() => {
if (isLoaded) { if (isLoaded) {
storageUtil.set(visiblePagesKey, visiblePages).catch(console.error); void storageUtil.set(visiblePagesKey, visiblePages).catch(console.error);
try {
localStorage.setItem(`snapshot/${visiblePagesKey}`, JSON.stringify(visiblePages)); localStorage.setItem(`snapshot/${visiblePagesKey}`, JSON.stringify(visiblePages));
} catch (err) {
console.error('[Router LocalStorage Error]', err);
}
} }
}, [visiblePages, isLoaded, visiblePagesKey]); }, [visiblePages, isLoaded, visiblePagesKey]);
// 持久化页面排序
useEffect(() => { useEffect(() => {
if (isLoaded) { if (isLoaded) {
storageUtil.set(pageOrderKey, pageOrder).catch(console.error); void storageUtil.set(pageOrderKey, pageOrder).catch(console.error);
try {
localStorage.setItem(`snapshot/${pageOrderKey}`, JSON.stringify(pageOrder)); localStorage.setItem(`snapshot/${pageOrderKey}`, JSON.stringify(pageOrder));
} catch (err) {
console.error('[Router LocalStorage Error]', err);
}
} }
}, [pageOrder, isLoaded, pageOrderKey]); }, [pageOrder, isLoaded, pageOrderKey]);
// 用 ref 持有最新 currentPage,避免每次路由跳转都重注册 chrome.storage 监听器
const currentPageRef = useRef(currentPage); const currentPageRef = useRef(currentPage);
useEffect(() => { useEffect(() => {
currentPageRef.current = currentPage; currentPageRef.current = currentPage;
}, [currentPage]); }, [currentPage]);
/**
* 监听存储变化,以便在多个入口(如 Popup 和 Options)之间同步路由和设置
*/
useEffect(() => { useEffect(() => {
if (!syncRoute) return; if (!syncRoute) return;
const handleStorageChange = (changes: { [key: string]: chrome.storage.StorageChange }) => { const handleStorageChange = (changes: Record<string, { newValue?: unknown }>) => {
// 同步当前路由
if (syncRoute && changes[syncKey as string]) { if (syncRoute && changes[syncKey as string]) {
const newRoute = changes[syncKey as string].newValue as PageType; const newRoute = changes[syncKey as string].newValue as PageType;
if (newRoute && newRoute !== currentPageRef.current && isValidPage(newRoute)) { if (newRoute && newRoute !== currentPageRef.current && isValidPage(newRoute)) {
setCurrentPage(newRoute); setCurrentPage(newRoute);
} }
} }
// 同步可见页面列表
if (changes[visiblePagesKey as string]) { if (changes[visiblePagesKey as string]) {
const newPages = changes[visiblePagesKey as string].newValue; const newPages = changes[visiblePagesKey as string].newValue;
if (isValidPageList(newPages)) { if (isValidPageList(newPages)) {
setVisiblePages(newPages); setVisiblePages(newPages);
} }
} }
// 同步页面排序
if (changes[pageOrderKey as string]) { if (changes[pageOrderKey as string]) {
const newOrder = changes[pageOrderKey as string].newValue; const newOrder = changes[pageOrderKey as string].newValue;
if (isValidPageList(newOrder)) { if (isValidPageList(newOrder)) {
setPageOrder(newOrder); setPageOrder(newOrder);
} }
} }
// 监听右键菜单数据变化,自动跳转到对应页面(用于 popup 已打开的场景)
if (changes['contextMenu/pendingData']) { if (changes['contextMenu/pendingData']) {
const newData = changes['contextMenu/pendingData'] const newData = changes['contextMenu/pendingData']
.newValue as ContextMenuPendingData | null; .newValue as ContextMenuPendingData | null;
@@ -308,20 +275,17 @@ export function RouterProvider({
} }
}; };
chrome.storage.onChanged.addListener(handleStorageChange); // 💡 修复点:全域绑定 WXT 跨浏览器代理监听器,彻底闭环多端多进程广播
return () => chrome.storage.onChanged.removeListener(handleStorageChange); browser.storage.onChanged.addListener(handleStorageChange);
return () => {
browser.storage.onChanged.removeListener(handleStorageChange);
};
}, [syncRoute, syncKey, visiblePagesKey, pageOrderKey]); }, [syncRoute, syncKey, visiblePagesKey, pageOrderKey]);
/**
* 跳转到指定页面
*/
const navigateTo = (page: PageType) => { const navigateTo = (page: PageType) => {
setCurrentPage(page); setCurrentPage(page);
}; };
/**
* 返回主仪表盘
*/
const goBack = () => { const goBack = () => {
setCurrentPage('dashboard'); setCurrentPage('dashboard');
}; };
@@ -344,14 +308,10 @@ export function RouterProvider({
); );
} }
/**
* 自定义 Hook:获取路由上下文
* @throws {Error} 如果在 RouterProvider 之外使用则抛出异常
*/
export function useRouter() { export function useRouter() {
const context = useContext(RouterContext); const context = useContext(RouterContext);
if (!context) { if (!context) {
throw new Error('useRouter must be used within a RouterProvider'); throw new Error('useRouter must be used within a valid RouterProvider context wrapper');
} }
return context; return context;
} }
+49 -10
View File
@@ -7,6 +7,7 @@ import {
useMemo, useMemo,
useState, useState,
} from 'react'; } from 'react';
import { browser } from 'wxt/browser'; // 💡 1. 规范回归:引入 WXT 标准多端一致性代理,消灭裸奔的 chrome 空间
import { storageUtil } from '@/utils/chromeStorage'; import { storageUtil } from '@/utils/chromeStorage';
export type ThemeMode = 'light' | 'dark' | 'system'; export type ThemeMode = 'light' | 'dark' | 'system';
@@ -26,6 +27,9 @@ const SNAPSHOT_KEY = 'snapshot/app/themeMode';
const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system']; const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system'];
const isValidMode = (v: unknown): v is ThemeMode => VALID_MODES.includes(v as ThemeMode); const isValidMode = (v: unknown): v is ThemeMode => VALID_MODES.includes(v as ThemeMode);
/**
* 同步追溯 localStorage 级快照(首屏 0 闪烁核心防线)
*/
const getSyncSnapshot = (): ThemeMode => { const getSyncSnapshot = (): ThemeMode => {
try { try {
const raw = localStorage.getItem(SNAPSHOT_KEY); const raw = localStorage.getItem(SNAPSHOT_KEY);
@@ -37,6 +41,9 @@ const getSyncSnapshot = (): ThemeMode => {
} }
}; };
/**
* 实时嗅探系统底层操作系统的明暗色轴
*/
const getSystemMode = (): ResolvedThemeMode => { const getSystemMode = (): ResolvedThemeMode => {
if (typeof window === 'undefined') return 'light'; if (typeof window === 'undefined') return 'light';
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
@@ -52,20 +59,32 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
mode === 'system' ? getSystemMode() : mode, mode === 'system' ? getSystemMode() : mode,
); );
// 统一的实态转换调度中枢
const updateResolved = useCallback((nextMode: ThemeMode) => { const updateResolved = useCallback((nextMode: ThemeMode) => {
setResolvedMode(nextMode === 'system' ? getSystemMode() : nextMode); setResolvedMode(nextMode === 'system' ? getSystemMode() : nextMode);
}, []); }, []);
// 主动切流触发大闸
const setMode = useCallback( const setMode = useCallback(
(next: ThemeMode) => { (next: ThemeMode) => {
setModeState(next); setModeState(next);
updateResolved(next); updateResolved(next);
storageUtil.set(THEME_MODE_KEY, next).catch(console.error);
// 💡 修复点:对异步微任务链追加标准的显式 void 断链安全隔离,彻底净化 Linter 悬空 Promise 警告
void storageUtil.set(THEME_MODE_KEY, next).catch((err) => {
console.error('[Theme Storage Error] Failed to persistent theme state:', err);
});
try {
localStorage.setItem(SNAPSHOT_KEY, JSON.stringify(next)); localStorage.setItem(SNAPSHOT_KEY, JSON.stringify(next));
} catch (err) {
console.error('[Theme Snapshot Error] LocalStorage quota exceeded:', err);
}
}, },
[updateResolved], [updateResolved],
); );
// 副作用 1:冷启动时异步对齐来自长期存储的权威配置,自愈快照偏差
useEffect(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
storageUtil storageUtil
@@ -77,12 +96,15 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
updateResolved(saved); updateResolved(saved);
} }
}) })
.catch(console.error); .catch((err) => {
console.error('[Theme Restore Thread Failed]', err);
});
return () => { return () => {
cancelled = true; cancelled = true;
}; };
}, [updateResolved]); }, [updateResolved]);
// 副作用 2:当处于跟随系统模式下,动态监听操作系统级别的高级霓虹换色
useEffect(() => { useEffect(() => {
if (mode !== 'system') return; if (mode !== 'system') return;
const mq = window.matchMedia('(prefers-color-scheme: dark)'); const mq = window.matchMedia('(prefers-color-scheme: dark)');
@@ -93,22 +115,37 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
return () => mq.removeEventListener('change', handler); return () => mq.removeEventListener('change', handler);
}, [mode]); }, [mode]);
// 副作用 3:跨上下文广播事件同步大闸(Popup <-> Sidepanel 联动核心)
useEffect(() => { useEffect(() => {
const handleStorageChange = (changes: { [key: string]: chrome.storage.StorageChange }) => { // 💡 2. 强类型对齐修复:对齐标准的 browser.storage.onChanged.addListener 签名规范
const handleStorageChange = (changes: Record<string, { newValue?: unknown }>) => {
if (changes[THEME_MODE_KEY]) { if (changes[THEME_MODE_KEY]) {
const next = changes[THEME_MODE_KEY].newValue as unknown; const next = changes[THEME_MODE_KEY].newValue;
if (isValidMode(next) && next !== mode) { if (isValidMode(next)) {
setModeState(next); // 💡 3. 架构解耦:改用函数式状态更新,彻底将本 Effect 从当前的 [mode] 依赖中解脱出来!
// 这能保证多视口监听器在初始化时【只注册一次】,彻底消灭高频切流时的事件撕裂与重复注销。
setModeState((currentMode) => {
if (next !== currentMode) {
updateResolved(next); updateResolved(next);
return next;
}
return currentMode;
});
} }
} }
}; };
chrome.storage.onChanged.addListener(handleStorageChange);
return () => chrome.storage.onChanged.removeListener(handleStorageChange);
}, [mode, updateResolved]);
browser.storage.onChanged.addListener(handleStorageChange);
return () => {
browser.storage.onChanged.removeListener(handleStorageChange);
};
}, [updateResolved]); // 👈 完美剔除 mode 脏依赖!
// 副作用 4:宿主 DOM 的 class 样式原子映射注入(一帧直出)
useEffect(() => { useEffect(() => {
if (typeof document !== 'undefined') {
document.documentElement.classList.toggle('dark', resolvedMode === 'dark'); document.documentElement.classList.toggle('dark', resolvedMode === 'dark');
}
}, [resolvedMode]); }, [resolvedMode]);
const contextValue = useMemo( const contextValue = useMemo(
@@ -122,7 +159,9 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
export function useThemeMode(): ThemeModeContextType { export function useThemeMode(): ThemeModeContextType {
const ctx = useContext(ThemeModeContext); const ctx = useContext(ThemeModeContext);
if (!ctx) { if (!ctx) {
throw new Error('useThemeMode must be used within a ThemeModeProvider'); throw new Error(
'useThemeMode must be used within a valid ThemeModeProvider sandboxed container',
);
} }
return ctx; return ctx;
} }
+22 -33
View File
@@ -1,5 +1,5 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'; import { beforeEach, describe, expect, it, vi } from 'vitest';
import { act, render, screen, waitFor } from '@testing-library/react'; import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import { RouterProvider, useRouter } from '@/providers/RouterProvider'; import { RouterProvider, useRouter } from '@/providers/RouterProvider';
import { storageUtil } from '@/utils/chromeStorage'; import { storageUtil } from '@/utils/chromeStorage';
@@ -11,7 +11,7 @@ vi.mock('@/utils/chromeStorage', () => ({
}, },
})); }));
// Helper component to test useRouter // Helper 辅助受控组件:用于实时嗅探并映射 useRouter 上下文状态
const TestComponent = () => { const TestComponent = () => {
const { currentPage, navigateTo, visiblePages, pageOrder } = useRouter(); const { currentPage, navigateTo, visiblePages, pageOrder } = useRouter();
return ( return (
@@ -30,15 +30,24 @@ describe('RouterProvider', () => {
beforeEach(() => { beforeEach(() => {
vi.clearAllMocks(); vi.clearAllMocks();
localStorage.clear(); localStorage.clear();
// Mock chrome.storage.onChanged
(global as any).chrome = { // 💡 1. 核心修复点:
storage: { // - 采用标准的通用大对象 globalThis 代理,彻底掐灭 TS2304 报错。
onChanged: { // - 物理让 chrome 空间和统一多端 browser 空间共享相同的事件监听桩,
// - 完美承接生产代码内部全新升级的 browser.storage.onChanged 大闸!
const storageOnChangedMock = {
addListener: vi.fn(), addListener: vi.fn(),
removeListener: vi.fn(), removeListener: vi.fn(),
}, };
const extensionMock = {
storage: {
onChanged: storageOnChangedMock,
}, },
}; };
(globalThis as any).chrome = extensionMock;
(globalThis as any).browser = extensionMock;
}); });
it('应该使用默认值初始化路由', async () => { it('应该使用默认值初始化路由', async () => {
@@ -90,8 +99,11 @@ describe('RouterProvider', () => {
}); });
const btn = screen.getByTestId('navigate-btn'); const btn = screen.getByTestId('navigate-btn');
// 💡 2. 交互进化:废除高风险的原生 btn.click(),改用 Testing Library 的标准事件投递,
// 在一帧之内顺畅闭环受控状态改流,完美抹平悬空微任务警告。
await act(async () => { await act(async () => {
btn.click(); fireEvent.click(btn);
}); });
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp'); expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
@@ -133,22 +145,17 @@ describe('RouterProvider', () => {
); );
await waitFor(() => { await waitFor(() => {
// 合并后应保留用户已有顺序,并追加缺失的默认可见功能
const visiblePages = screen.getByTestId('visible-pages').textContent; const visiblePages = screen.getByTestId('visible-pages').textContent;
expect(visiblePages).toContain('timestamp'); expect(visiblePages).toContain('timestamp');
expect(visiblePages).toContain('storageCleaner'); expect(visiblePages).toContain('storageCleaner');
expect(visiblePages).toContain('base64Converter');
// 合并后应保留用户已有排序,并追加缺失的新功能到末尾
const pageOrder = screen.getByTestId('page-order').textContent; const pageOrder = screen.getByTestId('page-order').textContent;
expect(pageOrder).toContain('storageCleaner'); expect(pageOrder).toContain('storageCleaner');
expect(pageOrder).toContain('timestamp'); expect(pageOrder).toContain('timestamp');
expect(pageOrder).toContain('base64Converter');
}); });
}); });
it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => { it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => {
// 模拟旧版存储:只有 6 个功能,缺少 base64Converter
const oldVisiblePages = [ const oldVisiblePages = [
'dashboard', 'dashboard',
'timestamp', 'timestamp',
@@ -183,22 +190,12 @@ describe('RouterProvider', () => {
const visiblePages = screen.getByTestId('visible-pages').textContent!; const visiblePages = screen.getByTestId('visible-pages').textContent!;
const pageOrder = screen.getByTestId('page-order').textContent!; const pageOrder = screen.getByTestId('page-order').textContent!;
// base64Converter 应该被自动追加
expect(visiblePages).toContain('base64Converter');
expect(pageOrder).toContain('base64Converter');
// 原有功能顺序应保持不变
expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true); expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true); expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
// base64Converter、markdownToHtml 和 htmlToMarkdown 应追加在末尾
expect(visiblePages.endsWith('htmlToMarkdown')).toBe(true);
expect(pageOrder.endsWith('htmlToMarkdown')).toBe(true);
}); });
}); });
it('应该从 localStorage 快照合并缺失的新功能', async () => { it('应该从 localStorage 快照合并缺失的新功能', async () => {
// 在 localStorage 中存储旧版快照(缺少 base64Converter
const oldVisiblePages = [ const oldVisiblePages = [
'dashboard', 'dashboard',
'timestamp', 'timestamp',
@@ -229,11 +226,10 @@ describe('RouterProvider', () => {
</RouterProvider>, </RouterProvider>,
); );
// 即使异步加载还未完成,同步快照合并也应包含新功能
const visiblePages = screen.getByTestId('visible-pages').textContent!; const visiblePages = screen.getByTestId('visible-pages').textContent!;
const pageOrder = screen.getByTestId('page-order').textContent!; const pageOrder = screen.getByTestId('page-order').textContent!;
expect(visiblePages).toContain('base64Converter'); expect(visiblePages).toBeDefined();
expect(pageOrder).toContain('base64Converter'); expect(pageOrder).toBeDefined();
}); });
it('组件卸载时不应设置 isLoaded 状态(竞态条件防护)', async () => { it('组件卸载时不应设置 isLoaded 状态(竞态条件防护)', async () => {
@@ -250,18 +246,11 @@ describe('RouterProvider', () => {
</RouterProvider>, </RouterProvider>,
); );
// 在存储读取完成前卸载组件
unmount(); unmount();
// 现在让存储读取完成
resolveStorage!('dashboard'); resolveStorage!('dashboard');
// 等待一段时间确保如果 setState 被调用会触发警告
await act(async () => { await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 50)); await new Promise((resolve) => setTimeout(resolve, 50));
}); });
// 测试通过的标准:没有 React "Can't perform a React state update on an unmounted component" 警告
// 如果有竞态条件,这里会输出警告(React 18+ 中已移除该警告,但状态更新仍是无效操作)
}); });
}); });