perf: eslint cache

.nvmrc

@@ -1 +1 @@
-16
+18

packages/core/package.json

@@ -22,8 +22,8 @@
     "build:es5": "cd src/main && swc ts -d ../../target/es5 --config-file ../../swc.es5.json && cd ../.. && tsc-esm-fix --target=target/es5 --fillBlank",
     "build:es6": "cd src/main && swc ts -d ../../target/es6 --config-file ../../swc.es6.json && cd ../.. && tsc-esm-fix --target=target/es6 --fillBlank",
     "build:dts": "tsc --project tsconfig.dts.json",
-    "format": "eslint --fix src && prettier --loglevel silent --write src",
-    "lint": "eslint src"
+    "format": "DEBUG=eslint:lint-result-cache eslint --cache --cache-strategy content --fix src && prettier --loglevel silent --write src",
+    "lint": "DEBUG=eslint:lint-result-cache eslint --cache --cache-strategy content src && cat .eslintcache"
   },
   "files": [
     "target/dts/**/*",
@@ -59,12 +59,12 @@
     "@types/react-dom": "18.0.6",
     "concurrently": "7.4.0",
     "css-loader": "6.7.1",
-    "eslint": "8.23.0",
-    "eslint-config-qiwi": "1.17.6",
+    "eslint": "8.28.0",
+    "eslint-config-qiwi": "1.17.9",
     "fast-glob": "3.2.11",
     "file-loader": "6.2.0",
-    "prettier": "2.7.1",
-    "prettier-config-qiwi": "1.7.2",
+    "prettier": "2.8.0",
+    "prettier-config-qiwi": "1.7.3",
     "react": "18.2.0",
     "react-docgen-typescript": "patch:react-docgen-typescript@npm%3A2.2.2#~/.yarn/patches/react-docgen-typescript-npm-2.2.2-afb9698a32.patch",
     "react-dom": "18.2.0",

packages/core/src/main/ts/accordion/AccordionControl.ts

@@ -86,13 +86,14 @@ export class AccordionControl<I> extends Component<
   private onKeyDown: KeyboardEventHandler<HTMLElement> = (event) => {
     switch (event.key) {
       case 'Enter':
-      case ' ':
+      case ' ': {
         event.preventDefault()
         event.stopPropagation()
         if (this.state.focused !== -1) {
           this.onChange(this.state.focused)
         }
         break
+      }
     }
   }
 

packages/core/src/main/ts/code-field/CodeFieldControl.ts

@@ -50,7 +50,9 @@ export class CodeFieldControl extends Component<
 
   public state: CodeFieldControlState = {
     focus: this.props.autoFocus ? 0 : -1,
-    refs: new Array(this.props.value.length).fill(1).map(() => createRef()),
+    refs: Array.from({ length: this.props.value.length })
+      .fill(1)
+      .map(() => createRef()),
   }
 
   public componentDidMount() {
@@ -122,23 +124,25 @@ export class CodeFieldControl extends Component<
   private onFieldKeyDown: (index: number) => KeyboardEventHandler =
     (index) => (e) => {
       switch (e.key) {
-        case 'ArrowLeft':
+        case 'ArrowLeft': {
           e.preventDefault()
           const prev = this.state.refs[index - 1]
           if (prev && prev.current) {
             this.preventBlur = true
             prev.current.focus()
           }
           break
-        case 'ArrowRight':
+        }
+        case 'ArrowRight': {
           e.preventDefault()
           const next = this.state.refs[index + 1]
           if (next && next.current) {
             this.preventBlur = true
             next.current.focus()
           }
           break
-        case 'Backspace':
+        }
+        case 'Backspace': {
           if (this.props.value[index] === '') {
             const prev = this.state.refs[index - 1]
             if (prev && prev.current) {
@@ -147,7 +151,8 @@ export class CodeFieldControl extends Component<
             }
           }
           break
-        default:
+        }
+        default: {
           if (this.props.value[index] === e.key) {
             e.preventDefault()
             const next = this.state.refs[index + 1]
@@ -156,6 +161,7 @@ export class CodeFieldControl extends Component<
               next.current.focus()
             }
           }
+        }
       }
     }
 
@@ -197,16 +203,17 @@ export class CodeFieldControl extends Component<
 
   public render() {
     return this.props.children({
-      values: new Array(this.props.value.length).fill(0).map((item, index) => ({
-        ...item,
-        focused: this.state.focus === index,
-        ref: this.state.refs[index],
-        onKeyDown: this.onFieldKeyDown(index),
-        onChange: this.onFieldChange(index),
-        onClick: this.onFieldClick,
-        onFocus: this.onFieldFocus(index),
-        onBlur: this.onFieldBlur,
-      })),
+      values: Array.from({ length: this.props.value.length })
+        .fill(0)
+        .map((_item, index) => ({
+          focused: this.state.focus === index,
+          ref: this.state.refs[index],
+          onKeyDown: this.onFieldKeyDown(index),
+          onChange: this.onFieldChange(index),
+          onClick: this.onFieldClick,
+          onFocus: this.onFieldFocus(index),
+          onBlur: this.onFieldBlur,
+        })),
     })
   }
 }

packages/core/src/main/ts/field/InputField.tsx

@@ -118,7 +118,7 @@ export const InputField: FC<FieldProps> = ({
             height={4}
             children={error}
           />
-        ) : help ? (
+        ) : (help ? (
           <Typo
             display="block"
             color="#666"
@@ -127,7 +127,7 @@ export const InputField: FC<FieldProps> = ({
             height={4}
             children={help}
           />
-        ) : null}
+        ) : null)}
         {action ? (
           <FlexItem pl={6} ml="auto">
             <Typo

packages/core/src/main/ts/field/OptionField.tsx

@@ -21,10 +21,10 @@ export interface OptionFieldProps {
   children?: ReactNode
 }
 
-const InputProps = BoxNonProps.concat(['autoFocus'])
+const InputProps = new Set(BoxNonProps.concat(['autoFocus']))
 
 const Input = styled(Box, {
-  shouldForwardProp: (prop) => !InputProps.includes(prop),
+  shouldForwardProp: (prop) => !InputProps.has(prop),
 })<BoxProps & Pick<OptionFieldProps, 'autoFocus'>>()
 
 Input.displayName = 'Input'

packages/core/src/main/ts/field/SimpleField.tsx

@@ -27,7 +27,7 @@ export const SimpleField: FC<SimpleFieldProps> = ({
           height={4}
           children={error}
         />
-      ) : help ? (
+      ) : (help ? (
         <Typo
           display="block"
           color="#666"
@@ -36,7 +36,7 @@ export const SimpleField: FC<SimpleFieldProps> = ({
           height={4}
           children={help}
         />
-      ) : null}
+      ) : null)}
       {action ? (
         <FlexItem pl={6} ml="auto">
           <Typo

packages/core/src/main/ts/fonts.ts

@@ -3,8 +3,8 @@ const fontFamily = 'Museo Sans'
 const fontWeights: number[] = [100, 300, 500, 700, 900]
 const fontStyles: string[] = ['normal', 'italic']
 
-fontWeights.forEach((fontWeight) => {
-  fontStyles.forEach((fontStyle) => {
+for (const fontWeight of fontWeights) {
+  for (const fontStyle of fontStyles) {
     fontFaces.push(`
       @font-face {
         font-family: '${fontFamily}';
@@ -16,7 +16,7 @@ fontWeights.forEach((fontWeight) => {
              url(https://static.qiwi.com/fonts/museo-sans/v2/${fontWeight}_${fontStyle}.woff) format('woff');
       }
     `)
-  })
-})
+  }
+}
 
 export const fonts = fontFaces.join('\n')

packages/core/src/main/ts/grid/Grid.tsx

@@ -44,7 +44,7 @@ export const Grid: FC<GridProps> = ({
             key={index}
             width={width}
             mt={index >= rowBlocksCount ? `${gutter}px` : 0}
-            ml={index % rowBlocksCount !== 0 ? `${gutter}px` : 0}
+            ml={index % rowBlocksCount === 0 ? 0 : `${gutter}px`}
             children={child}
           />
         )

packages/core/src/main/ts/image/Image.tsx

@@ -75,11 +75,11 @@ export const Image: FC<ImageProps> = ({
                       r={width === height ? '100%' : undefined}
                     />
                   </Pos>
-                ) : isValidElement(stub) && Children.only(stub) ? (
+                ) : (isValidElement(stub) && Children.only(stub) ? (
                   <Pos as="span" type="absolute" width={width} height={height}>
                     {stub}
                   </Pos>
-                ) : null}
+                ) : null)}
                 <Box
                   as="span"
                   opacity={typeof stub === 'string' ? 1 : 0}

packages/core/src/main/ts/image/ImageControl.ts

@@ -68,13 +68,13 @@ export class ImageControl extends Component<
       const image = document.createElement('img')
       image.src = this.props.src
       image.srcset = this.props.srcSet || ''
-      image.onload = () => {
+      image.addEventListener('load', () => {
         clearTimeout(this.viewedTimer)
         clearTimeout(this.cachedTimer)
         this.setState({
           step: Step.LOAD,
         })
-      }
+      })
       this.cachedTimer = setTimeout(() => {
         image.onload = null
         image.src = ''

packages/core/src/main/ts/input/BasicInput.tsx

@@ -56,11 +56,11 @@ export const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>(
       b: 'none',
       bb: props.disabled
         ? theme.input.border.disabled
-        : props.error
+        : (props.error
         ? theme.input.border.error
         : props.focused
         ? theme.input.border.focused
-        : theme.input.border.default,
+        : theme.input.border.default),
       valueSize: 5,
       valueWeight: 300,
       valueColor: props.disabled ? '#666' : '#000',
@@ -73,9 +73,9 @@ export const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>(
       autoComplete:
         typeof props.autoComplete === 'string'
           ? props.autoComplete
-          : props.autoComplete
+          : (props.autoComplete
           ? 'on'
-          : 'off',
+          : 'off'),
       autoFocus: props.autoFocus,
       placeholder: props.placeholder,
       inputMode: props.inputMode,
@@ -93,12 +93,12 @@ export const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>(
         {...common}
         type={
           props.type === undefined
-            ? isMaskDigital(props.mask)
+            ? (isMaskDigital(props.mask)
               ? 'tel'
-              : 'text'
-            : ['text', 'password', 'tel'].includes(props.type)
+              : 'text')
+            : (['text', 'password', 'tel'].includes(props.type)
             ? props.type
-            : 'text'
+            : 'text')
         }
         mask={props.mask}
         pipe={props.pipe}

packages/core/src/main/ts/input/ContentInput.tsx

@@ -58,9 +58,9 @@ export const ContentInput = forwardRef<HTMLInputElement, ContentInputProps>(
       cursor: 'text',
       bg: props.focused
         ? '#fff'
-        : props.hovered
+        : (props.hovered
         ? 'rgba(224, 224, 224, 0.65)'
-        : '#e6e6e6',
+        : '#e6e6e6'),
       transition: 'all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)',
       value: props.value,
       name: props.name,
@@ -83,12 +83,12 @@ export const ContentInput = forwardRef<HTMLInputElement, ContentInputProps>(
         {...common}
         type={
           props.type === undefined
-            ? isMaskDigital(props.mask)
+            ? (isMaskDigital(props.mask)
               ? 'tel'
-              : 'text'
-            : ['text', 'password', 'tel'].includes(props.type)
+              : 'text')
+            : (['text', 'password', 'tel'].includes(props.type)
             ? props.type
-            : 'text'
+            : 'text')
         }
         mask={props.mask}
         pipe={props.pipe}

packages/core/src/main/ts/input/SelectInput.tsx

@@ -41,11 +41,11 @@ export const SelectInput = forwardRef<HTMLInputElement, SelectInputProps>(
       b: 'none',
       bb: props.disabled
         ? '1px dotted #999'
-        : props.error
+        : (props.error
         ? '2px solid #d0021b'
         : props.focused
         ? '2px solid #ff8c00'
-        : '1px solid rgba(0, 0, 0, 0.2)',
+        : '1px solid rgba(0, 0, 0, 0.2)'),
       valueSize: 5,
       valueWeight: 300,
       valueColor: props.disabled ? '#666' : '#000',

packages/core/src/main/ts/inview.ts

@@ -1,3 +1,5 @@
-import { InView } from 'react-intersection-observer'
 
-export { InView }
+
+
+
+export {InView} from 'react-intersection-observer'

packages/core/src/main/ts/link/applyDefaultClickHandler.ts

@@ -10,7 +10,7 @@ const defaultLinkClickHandler: LinkControlProps['onClick'] = (
     a.download = typeof download === 'string' ? download : ''
     a.href = href
     a.target = target || '_blank'
-    document.body.appendChild(a)
+    document.body.append(a)
     a.click()
     a.remove()
   } else {

packages/core/src/main/ts/markdown.ts

@@ -1,3 +1,5 @@
-import MarkdownToJSX from 'markdown-to-jsx'
 
-export { MarkdownToJSX }
+
+
+
+export {default as MarkdownToJSX} from 'markdown-to-jsx'

packages/core/src/main/ts/mask/MaskedInput.tsx

@@ -56,7 +56,7 @@ export function conformToMask(
 }
 
 function isNil(value: any) {
-  return typeof value === 'undefined' || value === null
+  return value === undefined || value === null
 }
 
 export type MaskArray = (string | RegExp)[] | boolean
@@ -169,7 +169,7 @@ class MaskedInputComponent extends PureComponent<MaskedInputProps, {}> {
   }
 
   render() {
-    const exclude = [
+    const exclude = new Set([
       'mask',
       'guide',
       'pipe',
@@ -180,9 +180,9 @@ class MaskedInputComponent extends PureComponent<MaskedInputProps, {}> {
       'onBlur',
       'onChange',
       'inputRef',
-    ]
+    ])
     const props = Object.fromEntries(
-      Object.entries(this.props).filter(([key]) => !exclude.includes(key)),
+      Object.entries(this.props).filter(([key]) => !exclude.has(key)),
     )
     return (
       <input

packages/core/src/main/ts/mask/createFilterMask.ts

@@ -2,9 +2,8 @@ import { Mask } from './MaskedInput'
 
 export const createFilterMask = (pattern: RegExp): Mask => {
   return (value: string) => {
-    return value
-      .split('')
-      .concat('')
+    return [...value
+      .split(''), '']
       .map(() => pattern)
   }
 }