ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dev] Define custom static dependencies (#2462)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-02-28 18:43:28 +01:00
parent ad576da6ce
commit 568b23b6fe
39 changed files with 63 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.eslintrc
View File

@ -10,6 +10,7 @@
"no-async-without-await",
"teactn",
"no-null",
"react-hooks-static-deps",
"eslint-multitab-tt"
],
"rules": {
@ -40,10 +41,17 @@
"no-console": "error",
"semi": "error",
"no-implicit-coercion": "error",
"react-hooks/exhaustive-deps": [
"react-hooks/exhaustive-deps": "off",
"react-hooks-static-deps/exhaustive-deps": [
"error",
{
"additionalHooks": "(useSyncEffect|useAsync|useDebouncedCallback|useThrottledCallback|useEffectWithPrevDeps|useLayoutEffectWithPrevDeps|useDerivedState|useDerivedSignal|useThrottledResolver|useDebouncedResolver)$"
"additionalHooks": "(useSyncEffect|useAsync|useDebouncedCallback|useThrottledCallback|useEffectWithPrevDeps|useLayoutEffectWithPrevDeps|useDerivedState|useDerivedSignal|useThrottledResolver|useDebouncedResolver)$",
"staticHooks": {
"getActions": true,
"useFlag": [false, true, true],
"useForceUpdate": true,
"useReducer": [false, true]
}
}
],
"arrow-body-style": "off",

7
package-lock.json generated
View File

@ -66,6 +66,7 @@
"eslint-plugin-no-null": "^1.0.2",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-hooks-static-deps": "^1.0.7",
"eslint-plugin-teactn": "git+https://github.com/korenskoy/eslint-plugin-teactn#c2c39dd005d58c07c24c4361de804dce1c6261b5",
"git-revision-webpack-plugin": "^5.0.0",
"gitlog": "^4.0.4",
@ -7413,6 +7414,12 @@
"eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
}
},
"node_modules/eslint-plugin-react-hooks-static-deps": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks-static-deps/-/eslint-plugin-react-hooks-static-deps-1.0.7.tgz",
"integrity": "sha512-K34LqdZaeqt9y9jsOmvkOUJT5ViTMYsHYm/7eV0WBGztOU36xxDTBZJS3hfJBW8tzzZcxSgsMvZIORzOkyojKQ==",
"dev": true
},
"node_modules/eslint-plugin-react/node_modules/doctrine": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",

1
package.json
View File

@ -86,6 +86,7 @@
"eslint-plugin-no-null": "^1.0.2",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-hooks-static-deps": "^1.0.7",
"eslint-plugin-teactn": "git+https://github.com/korenskoy/eslint-plugin-teactn#c2c39dd005d58c07c24c4361de804dce1c6261b5",
"git-revision-webpack-plugin": "^5.0.0",
"gitlog": "^4.0.4",

2
src/components/calls/group/GroupCallParticipantMenu.tsx
View File

@ -80,7 +80,7 @@ const GroupCallParticipantMenu: FC<OwnProps & StateProps> = ({
? VOLUME_ZERO
: ((participant?.volume || GROUP_CALL_DEFAULT_VOLUME) / GROUP_CALL_VOLUME_MULTIPLIER));
// We only want to initialize local volume when switching participants and ignore following updates from server
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, [id]);
const runThrottled = useRunThrottled(VOLUME_CHANGE_THROTTLE);

1
src/components/left/main/StatusButton.tsx
View File

@ -43,6 +43,7 @@ const StatusButton: FC<StateProps> = ({ emojiStatus }) => {
showEffect();
unmarkShouldShowEffect();
}
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, [emojiStatus, shouldShowEffect, showEffect, unmarkShouldShowEffect] as const);
const handleEmojiStatusSet = useCallback((sticker: ApiSticker) => {

2
src/components/left/search/AudioResults.tsx
View File

@ -54,7 +54,7 @@ const AudioResults: FC<OwnProps & StateProps> = ({
});
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
}, [currentType, lastSyncTime, searchMessagesGlobal, searchQuery]);
const foundMessages = useMemo(() => {

2
src/components/left/search/ChatMessageResults.tsx
View File

@ -64,7 +64,7 @@ const ChatMessageResults: FC<OwnProps & StateProps> = ({
});
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
}, [lastSyncTime, searchMessagesGlobal, searchQuery]);
const handleTopicClick = useCallback(

2
src/components/left/search/ChatResults.tsx
View File

@ -84,7 +84,7 @@ const ChatResults: FC<OwnProps & StateProps> = ({
});
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
}, [lastSyncTime, searchMessagesGlobal, searchQuery]);
const handleChatClick = useCallback(

2
src/components/left/search/FileResults.tsx
View File

@ -66,7 +66,7 @@ const FileResults: FC<OwnProps & StateProps> = ({
});
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
}, [lastSyncTime, searchMessagesGlobal, searchQuery]);
const foundMessages = useMemo(() => {

2
src/components/left/search/LinkResults.tsx
View File

@ -64,7 +64,7 @@ const LinkResults: FC<OwnProps & StateProps> = ({
});
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
}, [lastSyncTime, searchMessagesGlobal, searchQuery]);
const foundMessages = useMemo(() => {

2
src/components/left/search/MediaResults.tsx
View File

@ -62,7 +62,7 @@ const MediaResults: FC<OwnProps & StateProps> = ({
});
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- `searchQuery` is required to prevent infinite message loading
}, [lastSyncTime, searchMessagesGlobal, searchQuery]);
const foundMessages = useMemo(() => {

2
src/components/main/ConfettiContainer.tsx
View File

@ -181,7 +181,7 @@ const ConfettiContainer: FC<StateProps> = ({ confetti }) => {
return () => {
clearTimeout(hideTimeout);
};
// eslint-disable-next-line react-hooks/exhaustive-deps -- Old timeout should be cleared only if new confetti is generated
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- Old timeout should be cleared only if new confetti is generated
}, [lastConfettiTime, forceUpdate, updateCanvas]);
if (!lastConfettiTime || Date.now() - lastConfettiTime > CONFETTI_FADEOUT_TIMEOUT) {

4
src/components/middle/MessageList.tsx
View File

@ -268,7 +268,7 @@ const MessageList: FC<OwnProps & StateProps> = ({
}
return debounce(() => loadViewportMessages({ direction: LoadMoreDirection.Around }), 1000, true, false);
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, [loadViewportMessages, messageIds]);
const { isScrolled, updateStickyDates } = useStickyDates();
@ -491,7 +491,7 @@ const MessageList: FC<OwnProps & StateProps> = ({
console.timeEnd('scrollTop');
}
// This should match deps for `useSyncEffect` above
// eslint-disable-next-line react-hooks/exhaustive-deps -- `as const` not yet supported by linter
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- `as const` not yet supported by linter
}, [messageIds, isViewportNewest, containerHeight, hasTools] as const);
useEffectWithPrevDeps(([prevIsSelectModeActive]) => {

4
src/components/middle/composer/Composer.tsx
View File

@ -582,9 +582,9 @@ const Composer: FC<OwnProps & StateProps> = ({
const stopRecordingVoiceRef = useStateRef(stopRecordingVoice);
useEffect(() => {
return () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
stopRecordingVoiceRef.current();
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
resetComposerRef.current();
};
}, [chatId, threadId, resetComposerRef, stopRecordingVoiceRef]);

6
src/components/middle/composer/hooks/useDraft.ts
View File

@ -98,7 +98,7 @@ const useDraft = (
}
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, [
chatId, threadId, draft, setHtml, editedMessage, loadCustomEmojis,
] as const);
@ -106,9 +106,9 @@ const useDraft = (
// Save draft on chat change
useEffect(() => {
return () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
if (!isEditing) {
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
updateDraftRef.current({ chatId, threadId });
}

2
src/components/middle/composer/hooks/useEditing.ts
View File

@ -58,7 +58,7 @@ const useEditing = (
focusEditableElement(messageInput, true);
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps -- `as const` not yet supported by linter
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- `as const` not yet supported by linter
}, [editedMessage, replyingToId, setHtml] as const);
useEffect(() => {

2
src/components/middle/composer/hooks/useInlineBotTooltip.ts
View File

@ -45,7 +45,7 @@ export default function useInlineBotTooltip(
if (prevUsername) {
resetInlineBot({ username: prevUsername });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, [username, resetInlineBot] as const);
useEffect(() => {

2
src/components/middle/hooks/useScrollHooks.ts
View File

@ -34,7 +34,7 @@ export default function useScrollHooks(
debounce(() => loadViewportMessages({ direction: LoadMoreDirection.Backwards }), 1000, true, false),
debounce(() => loadViewportMessages({ direction: LoadMoreDirection.Forwards }), 1000, true, false),
] : []),
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
[loadViewportMessages, messageIds],
);

2
src/components/right/RightColumn.tsx
View File

@ -235,7 +235,7 @@ const RightColumn: FC<OwnProps & StateProps> = ({
if (isOpen && isOverlaying) {
close();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, [isOverlaying]);
// We need to clear profile state and management screen state, when changing chats

4
src/components/right/hooks/useAsyncRendering.ts
View File

@ -20,7 +20,7 @@ export default function useAsyncRendering<T extends any[]>(dependencies: T, dela
clearTimeout(timeoutRef.current);
timeoutRef.current = undefined;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, dependencies);
useEffect(() => {
@ -38,7 +38,7 @@ export default function useAsyncRendering<T extends any[]>(dependencies: T, dela
} else {
exec();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, dependencies);
return shouldRenderRef.current;

2
src/components/ui/InfiniteScroll.tsx
View File

@ -86,7 +86,7 @@ const InfiniteScroll: FC<OwnProps> = ({
onLoadMore({ direction: LoadMoreDirection.Forwards });
}, 1000, true, false),
];
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, [onLoadMore, items]);
// Initial preload

2
src/hooks/useAsync.ts
View File

@ -19,7 +19,7 @@ const useAsync = <T>(fn: () => Promise<T>, deps: any[], defaultValue?: T) => {
return () => {
wasCancelled = true;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, deps);
return { isLoading, error, result };
};

4
src/hooks/useAsyncResolvers.ts
View File

@ -4,13 +4,13 @@ import useDebouncedCallback from './useDebouncedCallback';
export function useThrottledResolver<T>(resolver: () => T, deps: any[], ms: number, noFirst = false) {
return useThrottledCallback((setValue: (newValue: T) => void) => {
setValue(resolver());
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, deps, ms, noFirst);
}
export function useDebouncedResolver<T>(resolver: () => T, deps: any[], ms: number, noFirst = false, noLast = false) {
return useDebouncedCallback((setValue: (newValue: T) => void) => {
setValue(resolver());
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, deps, ms, noFirst, noLast);
}

2
src/hooks/useAudioPlayer.ts
View File

@ -106,7 +106,7 @@ const useAudioPlayer = (
if (!isPlaying && !proxy.paused) {
setIsPlaying(true);
// `isPlayingSync` is only needed to help `setIsPlaying` because it is asynchronous
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
isPlayingSync = true;
}

2
src/hooks/useBlurSync.ts
View File

@ -14,7 +14,7 @@ export default function useBlurSync(dataUri: string | false | undefined) {
let isChanged = false;
useSyncEffect(() => {
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
isChanged = true;
blurredRef.current = undefined;

2
src/hooks/useDebouncedCallback.ts
View File

@ -9,7 +9,7 @@ export default function useDebouncedCallback<T extends AnyToVoidFunction>(
noFirst = false,
noLast = false,
) {
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
const fnMemo = useCallback(fn, deps);
return useMemo(() => {

2
src/hooks/useDebouncedMemo.ts
View File

@ -21,7 +21,7 @@ export default function useDebouncedMemo<R extends any, D extends any[]>(
runDebounced(() => {
setValue(resolverFn());
});
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, [...dependencies, isFrozen]);
return value;

4
src/hooks/useDerivedSignal.ts
View File

@ -31,10 +31,10 @@ function useDerivedSignal<T>(resolverOrDependency: Resolver<T> | T, dependencies
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
useSyncEffect(runCurrentResolver, dependencies);
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
useSignalEffect(runCurrentResolver, dependencies);
return getValue as Signal<T>;

4
src/hooks/useDerivedState.ts
View File

@ -48,10 +48,10 @@ function useDerivedState<T>(resolverOrSignal: Resolver<T> | T, dependencies?: re
useSyncEffect(() => {
runCurrentResolver(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, dependencies);
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
useSignalEffect(runCurrentResolver, dependencies);
return valueRef.current as T;

2
src/hooks/useEffectOnce.ts
View File

@ -1,7 +1,7 @@
import { useEffect } from '../lib/teact/teact';
function useEffectOnce(effect: React.EffectCallback) {
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
useEffect(effect, []);
}

2
src/hooks/useEffectWithPrevDeps.ts
View File

@ -7,7 +7,7 @@ const useEffectWithPrevDeps = <T extends readonly any[]>(
const prevDeps = usePrevious<T>(dependencies);
return useEffect(() => {
return cb(prevDeps || []);
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, dependencies, debugKey);
};

2
src/hooks/useIntersectionObserver.ts
View File

@ -147,7 +147,7 @@ export function useIntersectionObserver({
controller.observer.unobserve(target);
};
// Arguments should never change
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, [isDisabled]);
return { observe, freeze, unfreeze };

2
src/hooks/useLayoutEffectWithPrevDeps.ts
View File

@ -7,7 +7,7 @@ const useLayoutEffectWithPrevDeps = <T extends readonly any[]>(
const prevDeps = usePrevious<T>(dependencies);
return useLayoutEffect(() => {
return cb(prevDeps || []);
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, dependencies, debugKey);
};

2
src/hooks/useReducer.ts
View File

@ -17,7 +17,7 @@ export default function useReducer<State, Actions>(
const dispatch = useCallback((action: ReducerAction<Actions>) => {
state.current = reducerRef.current(state.current, action);
forceUpdate();
}, [forceUpdate]);
}, []);
return [
state.current,

2
src/hooks/useRunDebounced.ts
View File

@ -3,6 +3,6 @@ import useDebouncedCallback from './useDebouncedCallback';
export default function useRunDebounced(ms: number, noFirst?: boolean, noLast?: boolean, deps: any = []) {
return useDebouncedCallback((cb: NoneToVoidFunction) => {
cb();
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, deps, ms, noFirst, noLast);
}

2
src/hooks/useRunThrottled.ts
View File

@ -3,6 +3,6 @@ import useThrottledCallback from './useThrottledCallback';
export default function useRunThrottled(ms: number, noFirst?: boolean, deps: any = []) {
return useThrottledCallback((cb: NoneToVoidFunction) => {
cb();
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, deps, ms, noFirst);
}

2
src/hooks/useThrottledCallback.ts
View File

@ -9,7 +9,7 @@ export default function useThrottledCallback<T extends AnyToVoidFunction>(
msOrRaf: number | typeof fastRaf,
noFirst = false,
) {
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
const fnMemo = useCallback(fn, deps);
return useMemo(() => {

2
src/hooks/useVideoCleanup.ts
View File

@ -16,6 +16,6 @@ export default function useVideoCleanup(videoRef: RefObject<HTMLVideoElement>, d
});
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
}, dependencies);
}

4
src/lib/teact/teact.ts
View File

@ -759,7 +759,7 @@ export function useMemo<T extends any>(resolver: () => T, dependencies: any[], d
}
export function useCallback<F extends AnyFunction>(newCallback: F, dependencies: any[], debugKey?: string): F {
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
return useMemo(() => newCallback, dependencies, debugKey);
}
@ -782,7 +782,7 @@ export function useRef<T>(initial?: T | null) {
export function memo<T extends FC>(Component: T, debugKey?: string) {
return function TeactMemoWrapper(props: Props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks-static-deps/exhaustive-deps
return useMemo(() => createElement(Component, props), Object.values(props), debugKey);
} as T;
}