diff --git a/.eslintrc.js b/.eslintrc.js index 2bbe301f0..9e965791b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -9,6 +9,7 @@ module.exports = { 'plugin:import/recommended', 'plugin:promise/recommended', 'plugin:jsdoc/recommended', + 'plugin:prettier/recommended', ], env: { @@ -62,20 +63,9 @@ module.exports = { }, rules: { - 'brace-style': 'warn', - 'comma-dangle': ['error', 'always-multiline'], - 'comma-spacing': [ - 'warn', - { - before: false, - after: true, - }, - ], - 'comma-style': ['warn', 'last'], 'consistent-return': 'error', 'dot-notation': 'error', eqeqeq: ['error', 'always', { 'null': 'ignore' }], - indent: ['warn', 2], 'jsx-quotes': ['error', 'prefer-single'], 'no-case-declarations': 'off', 'no-catch-shadow': 'error', @@ -95,7 +85,6 @@ module.exports = { { property: 'substr', message: 'Use .slice instead of .substr.' }, ], 'no-self-assign': 'off', - 'no-trailing-spaces': 'warn', 'no-unused-expressions': 'error', 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': [ @@ -107,29 +96,14 @@ module.exports = { ignoreRestSiblings: true, }, ], - 'object-curly-spacing': ['error', 'always'], - 'padded-blocks': [ - 'error', - { - classes: 'always', - }, - ], - quotes: ['error', 'single'], - semi: 'error', 'valid-typeof': 'error', 'react/jsx-filename-extension': ['error', { extensions: ['.jsx', 'tsx'] }], 'react/jsx-boolean-value': 'error', - 'react/jsx-closing-bracket-location': ['error', 'line-aligned'], - 'react/jsx-curly-spacing': 'error', 'react/display-name': 'off', 'react/jsx-equals-spacing': 'error', - 'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'], - 'react/jsx-indent': ['error', 2], 'react/jsx-no-bind': 'error', 'react/jsx-no-target-blank': 'off', - 'react/jsx-tag-spacing': 'error', - 'react/jsx-wrap-multilines': 'error', 'react/no-deprecated': 'off', 'react/no-unknown-property': 'off', 'react/self-closing-comp': 'error', @@ -291,6 +265,7 @@ module.exports = { 'plugin:import/typescript', 'plugin:promise/recommended', 'plugin:jsdoc/recommended', + 'plugin:prettier/recommended', ], rules: { diff --git a/.prettierignore b/.prettierignore index 36ba57bfb..af0411e9c 100644 --- a/.prettierignore +++ b/.prettierignore @@ -70,8 +70,6 @@ app/javascript/styles/mastodon/reset.scss # Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631 *.js *.jsx -*.ts -*.tsx # Ignore HTML till cleaned and included in CI *.html diff --git a/.prettierrc.js b/.prettierrc.js index 1d70813d5..af39b253f 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,3 +1,4 @@ module.exports = { - singleQuote: true + singleQuote: true, + jsxSingleQuote: true } diff --git a/app/javascript/mastodon/blurhash.ts b/app/javascript/mastodon/blurhash.ts index cb1c3b2c8..dadf2b7f2 100644 --- a/app/javascript/mastodon/blurhash.ts +++ b/app/javascript/mastodon/blurhash.ts @@ -98,9 +98,9 @@ export const decode83 = (str: string) => { }; export const intToRGB = (int: number) => ({ - r: Math.max(0, (int >> 16)), + r: Math.max(0, int >> 16), g: Math.max(0, (int >> 8) & 255), - b: Math.max(0, (int & 255)), + b: Math.max(0, int & 255), }); export const getAverageFromBlurhash = (blurhash: string) => { diff --git a/app/javascript/mastodon/compare_id.ts b/app/javascript/mastodon/compare_id.ts index 3ddfb7635..30b057248 100644 --- a/app/javascript/mastodon/compare_id.ts +++ b/app/javascript/mastodon/compare_id.ts @@ -1,4 +1,4 @@ -export function compareId (id1: string, id2: string) { +export function compareId(id1: string, id2: string) { if (id1 === id2) { return 0; } diff --git a/app/javascript/mastodon/components/animated_number.tsx b/app/javascript/mastodon/components/animated_number.tsx index 20ffa1a4d..f6c77d35f 100644 --- a/app/javascript/mastodon/components/animated_number.tsx +++ b/app/javascript/mastodon/components/animated_number.tsx @@ -16,13 +16,10 @@ const obfuscatedCount = (count: number) => { type Props = { value: number; obfuscate?: boolean; -} -export const AnimatedNumber: React.FC = ({ - value, - obfuscate, -})=> { +}; +export const AnimatedNumber: React.FC = ({ value, obfuscate }) => { const [previousValue, setPreviousValue] = useState(value); - const [direction, setDirection] = useState<1|-1>(1); + const [direction, setDirection] = useState<1 | -1>(1); if (previousValue !== value) { setPreviousValue(value); @@ -30,24 +27,45 @@ export const AnimatedNumber: React.FC = ({ } const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]); - const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]); + const willLeave = useCallback( + () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), + [direction] + ); if (reduceMotion) { - return obfuscate ? <>{obfuscatedCount(value)} : ; + return obfuscate ? ( + <>{obfuscatedCount(value)} + ) : ( + + ); } - const styles = [{ - key: `${value}`, - data: value, - style: { y: spring(0, { damping: 35, stiffness: 400 }) }, - }]; + const styles = [ + { + key: `${value}`, + data: value, + style: { y: spring(0, { damping: 35, stiffness: 400 }) }, + }, + ]; return ( - - {items => ( + + {(items) => ( {items.map(({ key, data, style }) => ( - 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : } + 0 ? 'absolute' : 'static', + transform: `translateY(${style.y * 100}%)`, + }} + > + {obfuscate ? obfuscatedCount(data) : } + ))} )} diff --git a/app/javascript/mastodon/components/avatar_overlay.tsx b/app/javascript/mastodon/components/avatar_overlay.tsx index e8dc88896..1dbd53323 100644 --- a/app/javascript/mastodon/components/avatar_overlay.tsx +++ b/app/javascript/mastodon/components/avatar_overlay.tsx @@ -18,13 +18,19 @@ export const AvatarOverlay: React.FC = ({ baseSize = 36, overlaySize = 24, }) => { - const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif); - const accountSrc = hovering ? account?.get('avatar') : account?.get('avatar_static'); - const friendSrc = hovering ? friend?.get('avatar') : friend?.get('avatar_static'); + const { hovering, handleMouseEnter, handleMouseLeave } = + useHovering(autoPlayGif); + const accountSrc = hovering + ? account?.get('avatar') + : account?.get('avatar_static'); + const friendSrc = hovering + ? friend?.get('avatar') + : friend?.get('avatar_static'); return (
diff --git a/app/javascript/mastodon/components/blurhash.tsx b/app/javascript/mastodon/components/blurhash.tsx index 181e2183d..700513676 100644 --- a/app/javascript/mastodon/components/blurhash.tsx +++ b/app/javascript/mastodon/components/blurhash.tsx @@ -8,7 +8,7 @@ type Props = { dummy?: boolean; // Whether dummy mode is enabled. If enabled, nothing is rendered and canvas left untouched children?: never; [key: string]: any; -} +}; const Blurhash: React.FC = ({ hash, width = 32, diff --git a/app/javascript/mastodon/components/check.tsx b/app/javascript/mastodon/components/check.tsx index 57b810a0e..73d65595e 100644 --- a/app/javascript/mastodon/components/check.tsx +++ b/app/javascript/mastodon/components/check.tsx @@ -1,7 +1,15 @@ import React from 'react'; export const Check: React.FC = () => ( - - + + ); diff --git a/app/javascript/mastodon/components/gifv.tsx b/app/javascript/mastodon/components/gifv.tsx index 5d9f235e1..72914ba74 100644 --- a/app/javascript/mastodon/components/gifv.tsx +++ b/app/javascript/mastodon/components/gifv.tsx @@ -8,7 +8,7 @@ type Props = { width: number; height: number; onClick?: () => void; -} +}; export const GIFV: React.FC = ({ src, @@ -17,19 +17,23 @@ export const GIFV: React.FC = ({ width, height, onClick, -})=> { +}) => { const [loading, setLoading] = useState(true); - const handleLoadedData: React.ReactEventHandler = useCallback(() => { - setLoading(false); - }, [setLoading]); + const handleLoadedData: React.ReactEventHandler = + useCallback(() => { + setLoading(false); + }, [setLoading]); - const handleClick: React.MouseEventHandler = useCallback((e) => { - if (onClick) { - e.stopPropagation(); - onClick(); - } - }, [onClick]); + const handleClick: React.MouseEventHandler = useCallback( + (e) => { + if (onClick) { + e.stopPropagation(); + onClick(); + } + }, + [onClick] + ); return (
diff --git a/app/javascript/mastodon/components/icon.tsx b/app/javascript/mastodon/components/icon.tsx index f74437b55..4eb948dc7 100644 --- a/app/javascript/mastodon/components/icon.tsx +++ b/app/javascript/mastodon/components/icon.tsx @@ -7,6 +7,15 @@ type Props = { fixedWidth?: boolean; children?: never; [key: string]: any; -} -export const Icon: React.FC = ({ id, className, fixedWidth, ...other }) => - ; +}; +export const Icon: React.FC = ({ + id, + className, + fixedWidth, + ...other +}) => ( + +); diff --git a/app/javascript/mastodon/components/icon_button.tsx b/app/javascript/mastodon/components/icon_button.tsx index f9db287bb..178641400 100644 --- a/app/javascript/mastodon/components/icon_button.tsx +++ b/app/javascript/mastodon/components/icon_button.tsx @@ -25,13 +25,12 @@ type Props = { obfuscateCount?: boolean; href?: string; ariaHidden: boolean; -} +}; type States = { - activate: boolean, - deactivate: boolean, -} + activate: boolean; + deactivate: boolean; +}; export class IconButton extends React.PureComponent { - static defaultProps = { size: 18, active: false, @@ -47,7 +46,7 @@ export class IconButton extends React.PureComponent { deactivate: false, }; - UNSAFE_componentWillReceiveProps (nextProps: Props) { + UNSAFE_componentWillReceiveProps(nextProps: Props) { if (!nextProps.animate) return; if (this.props.active && !nextProps.active) { @@ -57,7 +56,7 @@ export class IconButton extends React.PureComponent { } } - handleClick: React.MouseEventHandler = (e) => { + handleClick: React.MouseEventHandler = (e) => { e.preventDefault(); if (!this.props.disabled && this.props.onClick != null) { @@ -83,7 +82,7 @@ export class IconButton extends React.PureComponent { } }; - render () { + render() { const style = { fontSize: `${this.props.size}px`, width: `${this.props.size * 1.28571429}px`, @@ -109,10 +108,7 @@ export class IconButton extends React.PureComponent { ariaHidden, } = this.props; - const { - activate, - deactivate, - } = this.state; + const { activate, deactivate } = this.state; const classes = classNames(className, 'icon-button', { active, @@ -130,7 +126,12 @@ export class IconButton extends React.PureComponent { let contents = ( - ); @@ -162,5 +163,4 @@ export class IconButton extends React.PureComponent { ); } - } diff --git a/app/javascript/mastodon/components/icon_with_badge.tsx b/app/javascript/mastodon/components/icon_with_badge.tsx index a4af86ca9..bf86814c0 100644 --- a/app/javascript/mastodon/components/icon_with_badge.tsx +++ b/app/javascript/mastodon/components/icon_with_badge.tsx @@ -1,18 +1,25 @@ import React from 'react'; import { Icon } from './icon'; -const formatNumber = (num: number): number | string => num > 40 ? '40+' : num; +const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num); type Props = { id: string; count: number; issueBadge: boolean; className: string; -} -export const IconWithBadge: React.FC = ({ id, count, issueBadge, className }) => ( +}; +export const IconWithBadge: React.FC = ({ + id, + count, + issueBadge, + className, +}) => ( - {count > 0 && {formatNumber(count)}} + {count > 0 && ( + {formatNumber(count)} + )} {issueBadge && } ); diff --git a/app/javascript/mastodon/components/image.tsx b/app/javascript/mastodon/components/image.tsx index b332d4115..490543424 100644 --- a/app/javascript/mastodon/components/image.tsx +++ b/app/javascript/mastodon/components/image.tsx @@ -7,9 +7,14 @@ type Props = { srcSet?: string; blurhash?: string; className?: string; -} +}; -export const Image: React.FC = ({ src, srcSet, blurhash, className }) => { +export const Image: React.FC = ({ + src, + srcSet, + blurhash, + className, +}) => { const [loaded, setLoaded] = useState(false); const handleLoad = useCallback(() => { @@ -17,7 +22,10 @@ export const Image: React.FC = ({ src, srcSet, blurhash, className }) => }, [setLoaded]); return ( -
+
{blurhash && }
diff --git a/app/javascript/mastodon/components/not_signed_in_indicator.tsx b/app/javascript/mastodon/components/not_signed_in_indicator.tsx index 3bfee6ae9..53945d6a7 100644 --- a/app/javascript/mastodon/components/not_signed_in_indicator.tsx +++ b/app/javascript/mastodon/components/not_signed_in_indicator.tsx @@ -4,7 +4,10 @@ import { FormattedMessage } from 'react-intl'; export const NotSignedInIndicator: React.FC = () => (
- +
); diff --git a/app/javascript/mastodon/components/radio_button.tsx b/app/javascript/mastodon/components/radio_button.tsx index 194b67afe..829f47174 100644 --- a/app/javascript/mastodon/components/radio_button.tsx +++ b/app/javascript/mastodon/components/radio_button.tsx @@ -9,7 +9,13 @@ type Props = { label: React.ReactNode; }; -export const RadioButton: React.FC = ({ name, value, checked, onChange, label }) => { +export const RadioButton: React.FC = ({ + name, + value, + checked, + onChange, + label, +}) => { return (