Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-30 01:36:24 +01:00
Code Issues Packages Projects Releases Activity

chore(react): use effects for event handlers to prevent leaks

Browse Source
This commit is contained in:
Elian Doran
2025-08-25 14:27:32 +03:00
parent 1eaeec8100
commit 72b2a5cc0d
1 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/client/src/widgets/react/hooks.tsx
View File

@@ -17,16 +17,18 @@ import { CSSProperties } from "preact/compat";
export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) { export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
const parentComponent = useContext(ParentComponent)!; const parentComponent = useContext(ParentComponent)!;
useEffect(() => {
parentComponent.registerHandler(eventName, handler); parentComponent.registerHandler(eventName, handler);
useDebugValue(eventName);
return (() => parentComponent.removeHandler(eventName, handler)); return (() => parentComponent.removeHandler(eventName, handler));
}, []);
useDebugValue(eventName);
} }
export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler: (data: EventData<T>, eventName: T) => void) { export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler: (data: EventData<T>, eventName: T) => void) {
const parentComponent = useContext(ParentComponent)!; const parentComponent = useContext(ParentComponent)!;
const handlers: ({ eventName: T, callback: (data: EventData<T>) => void })[] = [];
useDebugValue(() => eventNames.join(", "));
useEffect(() => {
const handlers: ({ eventName: T, callback: (data: EventData<T>) => void })[] = [];
for (const eventName of eventNames) { for (const eventName of eventNames) {
handlers.push({ eventName, callback: (data) => { handlers.push({ eventName, callback: (data) => {
handler(data, eventName); handler(data, eventName);
@@ -42,6 +44,8 @@ export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler:
parentComponent.removeHandler(eventName, callback); parentComponent.removeHandler(eventName, callback);
} }
}); });
}, []);
useDebugValue(() => eventNames.join(", "));
} }
export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000) { export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000) {
@@ -202,9 +206,6 @@ export function useNoteContext() {
setNoteContext(noteContext); setNoteContext(noteContext);
setNotePath(noteContext.notePath); setNotePath(noteContext.notePath);
}); });
useTriliumEvent("setNoteContext", ({ noteContext }) => {
setNoteContext(noteContext);
});
useTriliumEvent("noteSwitchedAndActivated", ({ noteContext }) => { useTriliumEvent("noteSwitchedAndActivated", ({ noteContext }) => {
setNoteContext(noteContext); setNoteContext(noteContext);
}); });
@@ -215,6 +216,12 @@ export function useNoteContext() {
setNote(noteContext?.note); setNote(noteContext?.note);
}); });
useLegacyImperativeHandlers({
setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
setNoteContext(noteContext);
}
}, true);
useDebugValue(() => `notePath=${notePath}, ntxId=${noteContext?.ntxId}`); useDebugValue(() => `notePath=${notePath}, ntxId=${noteContext?.ntxId}`);
const parentComponent = useContext(ParentComponent) as ReactWrappedWidget; const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
@@ -506,9 +513,13 @@ export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Toolti
return { showTooltip, hideTooltip }; return { showTooltip, hideTooltip };
} }
export function useLegacyImperativeHandlers(handlers: Record<string, Function>) { export function useLegacyImperativeHandlers(handlers: Record<string, Function>, force?: boolean) {
const parentComponent = useContext(ParentComponent); const parentComponent = useContext(ParentComponent);
if (!force) {
useEffect(() => { useEffect(() => {
Object.assign(parentComponent as any, handlers); Object.assign(parentComponent as any, handlers);
}, [ handlers ]) }, [ handlers ])
} else {
Object.assign(parentComponent as any, handlers);
}
} }