style: add rules for JSX formatting

Author: pionxzh

.eslintrc.js

@@ -68,6 +68,53 @@ module.exports = {
     camelcase: 'off',
     'react/prop-types': 'off',
     'react/display-name': 'off',
+    indent: ['error', 2, {
+      SwitchCase: 1,
+      offsetTernaryExpressions: true,
+      // from: https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js
+      ignoredNodes: [
+        'JSXElement',
+        'JSXElement :not(JSXExpressionContainer, JSXExpressionContainer *)',
+        'JSXAttribute',
+        'JSXIdentifier',
+        'JSXNamespacedName',
+        'JSXMemberExpression',
+        'JSXSpreadAttribute',
+        'JSXOpeningElement',
+        'JSXClosingElement',
+        'JSXFragment',
+        'JSXOpeningFragment',
+        'JSXClosingFragment',
+        'JSXText',
+        'JSXEmptyExpression',
+        'JSXSpreadChild'
+      ]
+    }],
+    'react/jsx-indent': ['error', 2, { checkAttributes: false, indentLogicalExpressions: true }],
+    'react/jsx-indent-props': ['error', 2],
+    'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
+    'react/jsx-closing-bracket-location': ['error', 'tag-aligned'],
+    'react/jsx-max-props-per-line': ['error', { maximum: 1, when: 'multiline' }],
+    'react/jsx-tag-spacing': ['error', {
+      closingSlash: 'never',
+      beforeSelfClosing: 'always',
+      afterOpening: 'never',
+      beforeClosing: 'never'
+    }],
+    'react/jsx-wrap-multilines': ['error', {
+      declaration: 'parens-new-line',
+      assignment: 'parens-new-line',
+      return: 'parens-new-line',
+      arrow: 'parens-new-line',
+      condition: 'parens-new-line',
+      logical: 'parens-new-line',
+      prop: 'parens-new-line'
+    }],
+    'react/jsx-curly-spacing': ['error', 'never', { allowMultiline: true }],
+    'react/jsx-curly-newline': ['error', {
+      multiline: 'consistent',
+      singleline: 'consistent'
+    }],
     '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off',

docs/pages/full/index.tsx

@@ -105,8 +105,9 @@ const example = {
 }
 
 const KeyRenderer: JsonViewerKeyRenderer = ({ path }) => {
-  return <del aria-label='I dont like this number'>&quot;{path.slice(
-    -1)}&quot;</del>
+  return (
+    <del aria-label='I dont like this number'>&quot;{path.slice(-1)}&quot;</del>
+  )
 }
 KeyRenderer.when = (props) => props.value === 114.514
 
@@ -145,36 +146,44 @@ const IndexPage: FC = () => {
           </Typography>
         </Toolbar>
       </AppBar>
-      <Box sx={{
-        display: 'flex',
-        alignItems: 'center',
-        flexWrap: 'wrap',
-        width: '100%',
-        gap: '10px',
-        paddingX: '5px',
-        paddingY: '10px',
-        minHeight: '64px',
-        marginTop: '64px'
-      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          width: '100%',
+          gap: '10px',
+          paddingX: '5px',
+          paddingY: '10px',
+          minHeight: '64px',
+          marginTop: '64px'
+        }}
+      >
         <FormControlLabel
-          control={<Switch
-            checked={editable}
-            onChange={event => setEditable(event.target.checked)}
-          />}
+          control={(
+            <Switch
+              checked={editable}
+              onChange={event => setEditable(event.target.checked)}
+            />
+          )}
           label='Editable'
         />
         <FormControlLabel
-          control={<Switch
-            checked={displayDataTypes}
-            onChange={event => setDisplayDataTypes(event.target.checked)}
-          />}
+          control={(
+            <Switch
+              checked={displayDataTypes}
+              onChange={event => setDisplayDataTypes(event.target.checked)}
+            />
+          )}
           label='DisplayDataTypes'
         />
         <FormControlLabel
-          control={<Switch
-            checked={displayObjectSize}
-            onChange={event => setDisplayObjectSize(event.target.checked)}
-          />}
+          control={(
+            <Switch
+              checked={displayObjectSize}
+              onChange={event => setDisplayObjectSize(event.target.checked)}
+            />
+          )}
           label='DisplayObjectSize'
         />
         <TextField
@@ -252,8 +261,14 @@ const IndexPage: FC = () => {
               return false
             },
             (props) => {
-              return <Image height={50} width={50} src={props.value}
-                alt={props.value} />
+              return (
+                <Image
+                  height={50}
+                  width={50}
+                  src={props.value}
+                  alt={props.value}
+                />
+              )
             }
           )
         ]}

package.json

@@ -50,6 +50,8 @@
   ],
   "scripts": {
     "test": "vitest",
+    "test:run": "vitest run",
+    "dev": "yarn workspace @textea/json-viewer-docs dev",
     "coverage": "vitest run --coverage",
     "postinstall": "husky install",
     "prepack": "pinst --disable",

src/browser.tsx

@@ -23,7 +23,7 @@ export default class JsonViewer {
 
     if (container) {
       this.root = createRoot(container)
-      this.root.render(<JsonViewerComponent {...this.props}/>)
+      this.root.render(<JsonViewerComponent {...this.props} />)
     }
   }