Merge remote-tracking branch 'upstream/main' into feat/issue5245-nega…

…ted-or-optional-chaining---fixed
typescript-eslint · Sep 29, 2022 · 585e197 · 585e197
2 parents a7a6d5b + fab9974
commit 585e197
Show file tree

Hide file tree

Showing 15 changed files with 148 additions and 81 deletions.
diff --git a/packages/website/.eslintrc.js b/packages/website/.eslintrc.js
@@ -22,7 +22,6 @@ module.exports = {
     'react/jsx-no-target-blank': 'off',
     'react/no-unescaped-entities': 'off',
     '@typescript-eslint/internal/prefer-ast-types-enum': 'off',
-    'react-hooks/exhaustive-deps': 'off', // TODO: enable it later
   },
   settings: {
     react: {

diff --git a/packages/website/src/components/ASTViewerTS.tsx b/packages/website/src/components/ASTViewerTS.tsx
@@ -53,7 +53,17 @@ export default function ASTViewerTS({
       ['TypeFlags', typeFlags],
     );
     setModel(serialize(value, scopeSerializer));
-  }, [value, syntaxKind]);
+  }, [
+    value,
+    syntaxKind,
+    nodeFlags,
+    tokenFlags,
+    modifierFlags,
+    objectFlags,
+    symbolFlags,
+    flowFlags,
+    typeFlags,
+  ]);
 
   return (
     <ASTViewer position={position} onSelectNode={onSelectNode} value={model} />

diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
@@ -51,7 +51,7 @@ function OptionsSelectorContent({
       .then(() => {
         setCopyLink(true);
       });
-  }, []);
+  }, [setCopyLink]);
 
   const copyMarkdownToClipboard = useCallback(() => {
     if (isLoading) {
@@ -60,7 +60,7 @@ function OptionsSelectorContent({
     void navigator.clipboard.writeText(createMarkdown(state)).then(() => {
       setCopyMarkdown(true);
     });
-  }, [state, isLoading]);
+  }, [isLoading, state, setCopyMarkdown]);
 
   const openIssue = useCallback(() => {
     if (isLoading) {

diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
@@ -84,6 +84,15 @@ function Playground(): JSX.Element {
     [setState],
   );
 
+  const onLoaded = useCallback(
+    (ruleNames: RuleDetails[], tsVersions: readonly string[]): void => {
+      setRuleNames(ruleNames);
+      setTSVersion(tsVersions);
+      setIsLoading(false);
+    },
+    [],
+  );
+
   return (
     <div className={styles.codeContainer}>
       {ruleNames.length > 0 && (
@@ -150,11 +159,7 @@ function Playground(): JSX.Element {
                 onMarkersChange={setMarkers}
                 decoration={selectedRange}
                 onChange={setState}
-                onLoaded={(ruleNames, tsVersions): void => {
-                  setRuleNames(ruleNames);
-                  setTSVersion(tsVersions);
-                  setIsLoading(false);
-                }}
+                onLoaded={onLoaded}
                 onSelect={setPosition}
               />
             </div>

diff --git a/packages/website/src/components/ast/Elements.tsx b/packages/website/src/components/ast/Elements.tsx
@@ -30,7 +30,7 @@ export function ComplexItem({
         }
       }
     },
-    [data],
+    [data.model.range, onSelectNode],
   );
 
   useEffect(() => {
@@ -44,10 +44,10 @@ export function ComplexItem({
       level !== 'ast' && selected && !hasChildInRange(selection, data.model),
     );
 
-    if (selected && !isExpanded) {
+    if (selected) {
       setIsExpanded(selected);
     }
-  }, [selection, data]);
+  }, [selection, data, level]);
 
   return (
     <ItemGroup

diff --git a/packages/website/src/components/ast/PropertyName.tsx b/packages/website/src/components/ast/PropertyName.tsx
@@ -11,21 +11,23 @@ export interface PropertyNameProps {
 }
 
 export default function PropertyName(props: PropertyNameProps): JSX.Element {
+  const { onClick: onClickProps, onHover } = props;
+
   const onClick = useCallback(
     (e: MouseEvent<HTMLElement>) => {
       e.preventDefault();
-      props.onClick?.(e);
+      onClickProps?.(e);
     },
-    [props.onClick],
+    [onClickProps],
   );
 
   const onMouseEnter = useCallback(() => {
-    props.onHover?.(true);
-  }, [props.onHover]);
+    onHover?.(true);
+  }, [onHover]);
 
   const onMouseLeave = useCallback(() => {
-    props.onHover?.(false);
-  }, [props.onHover]);
+    onHover?.(false);
+  }, [onHover]);
 
   return props.onClick || props.onHover ? (
     <>

diff --git a/packages/website/src/components/ast/SimpleItem.tsx b/packages/website/src/components/ast/SimpleItem.tsx
@@ -20,7 +20,7 @@ export function SimpleItem({
         onSelectNode(state ? data.model.range : null);
       }
     },
-    [data],
+    [data.model.range, onSelectNode],
   );
 
   return (

diff --git a/packages/website/src/components/config/ConfigEditor.tsx b/packages/website/src/components/config/ConfigEditor.tsx
@@ -89,26 +89,27 @@ function isDefault(value: unknown, defaults?: unknown[]): boolean {
 }
 
 function ConfigEditor(props: ConfigEditorProps): JSX.Element {
+  const { onClose: onCloseProps, isOpen, values } = props;
   const [filter, setFilter] = useState<string>('');
   const [config, setConfig] = useReducer(reducerObject, {});
   const [filterInput, setFilterFocus] = useFocus();
 
   const onClose = useCallback(() => {
-    props.onClose(config);
-  }, [props.onClose, config]);
+    onCloseProps(config);
+  }, [onCloseProps, config]);
 
   useEffect(() => {
-    setConfig({ type: 'init', config: props.values });
-  }, [props.values]);
+    setConfig({ type: 'init', config: values });
+  }, [values]);
 
   useEffect(() => {
-    if (props.isOpen) {
+    if (isOpen) {
       setFilterFocus();
     }
-  }, [props.isOpen]);
+  }, [isOpen, setFilterFocus]);
 
   return (
-    <Modal header={props.header} isOpen={props.isOpen} onClose={onClose}>
+    <Modal header={props.header} isOpen={isOpen} onClose={onClose}>
       <div className={styles.searchBar}>
         <Text
           ref={filterInput}

diff --git a/packages/website/src/components/config/ConfigEslint.tsx b/packages/website/src/components/config/ConfigEslint.tsx
@@ -28,20 +28,21 @@ function checkOptions(rule: [string, unknown]): rule is [string, RuleEntry] {
 }
 
 function ConfigEslint(props: ConfigEslintProps): JSX.Element {
+  const { isOpen, config, onClose: onCloseProps, ruleOptions } = props;
   const [options, updateOptions] = useState<ConfigOptionsType[]>([]);
   const [configObject, updateConfigObject] = useState<EslintRC>();
 
   useEffect(() => {
-    if (props.isOpen) {
-      updateConfigObject(parseESLintRC(props.config));
+    if (isOpen) {
+      updateConfigObject(parseESLintRC(config));
     }
-  }, [props.isOpen, props.config]);
+  }, [isOpen, config]);
 
   useEffect(() => {
     updateOptions([
       {
         heading: 'Rules',
-        fields: props.ruleOptions
+        fields: ruleOptions
           .filter(item => item.name.startsWith('@typescript'))
           .map(item => ({
             key: item.name,
@@ -52,7 +53,7 @@ function ConfigEslint(props: ConfigEslintProps): JSX.Element {
       },
       {
         heading: 'Core rules',
-        fields: props.ruleOptions
+        fields: ruleOptions
           .filter(item => !item.name.startsWith('@typescript'))
           .map(item => ({
             key: item.name,
@@ -62,7 +63,7 @@ function ConfigEslint(props: ConfigEslintProps): JSX.Element {
           })),
       },
     ]);
-  }, [props.ruleOptions]);
+  }, [ruleOptions]);
 
   const onClose = useCallback(
     (newConfig: Record<string, unknown>) => {
@@ -76,22 +77,22 @@ function ConfigEslint(props: ConfigEslintProps): JSX.Element {
           .filter(checkOptions),
       );
       if (!shallowEqual(cfg, configObject?.rules)) {
-        props.onClose({
+        onCloseProps({
           eslintrc: toJson({ ...(configObject ?? {}), rules: cfg }),
         });
       } else {
-        props.onClose();
+        onCloseProps();
       }
     },
-    [props.onClose, configObject],
+    [onCloseProps, configObject],
   );
 
   return (
     <ConfigEditor
       header="Eslint Config"
       options={options}
       values={configObject?.rules ?? {}}
-      isOpen={props.isOpen}
+      isOpen={isOpen}
       onClose={onClose}
     />
   );

diff --git a/packages/website/src/components/config/ConfigTypeScript.tsx b/packages/website/src/components/config/ConfigTypeScript.tsx
@@ -13,14 +13,15 @@ interface ConfigTypeScriptProps {
 }
 
 function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element {
+  const { onClose: onCloseProps, isOpen, config } = props;
   const [tsConfigOptions, updateOptions] = useState<ConfigOptionsType[]>([]);
   const [configObject, updateConfigObject] = useState<TSConfig>();
 
   useEffect(() => {
-    if (props.isOpen) {
-      updateConfigObject(parseTSConfig(props.config));
+    if (isOpen) {
+      updateConfigObject(parseTSConfig(config));
     }
-  }, [props.isOpen, props.config]);
+  }, [isOpen, config]);
 
   useEffect(() => {
     if (window.ts) {
@@ -54,28 +55,28 @@ function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element {
         ),
       );
     }
-  }, [props.isOpen]);
+  }, [isOpen]);
 
   const onClose = useCallback(
     (newConfig: Record<string, unknown>) => {
       const cfg = { ...newConfig };
       if (!shallowEqual(cfg, configObject?.compilerOptions)) {
-        props.onClose({
+        onCloseProps({
           tsconfig: toJson({ ...(configObject ?? {}), compilerOptions: cfg }),
         });
       } else {
-        props.onClose();
+        onCloseProps();
       }
     },
-    [props.onClose, configObject],
+    [onCloseProps, configObject],
   );
 
   return (
     <ConfigEditor
       header="TypeScript Config"
       options={tsConfigOptions}
       values={configObject?.compilerOptions ?? {}}
-      isOpen={props.isOpen}
+      isOpen={isOpen}
       onClose={onClose}
     />
   );