feat: migrate jsx rules (#17)

.vscode/settings.json

@@ -1,21 +1,20 @@
 {
-  // Enable the flat config support
+  // Enable the ESlint flat config support
   "eslint.experimental.useFlatConfig": true,
 
-  // Disable the default formatter
+  // Disable the default formatter, use eslint instead
   "prettier.enable": false,
   "editor.formatOnSave": false,
 
   // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": false
+    "source.fixAll": "explicit",
+    "source.organizeImports": "never"
   },
 
   // Silent the stylistic rules in you IDE, but still auto fix them
   "eslint.rules.customizations": [
-    { "rule": "@stylistic/*", "severity": "off" },
-    { "rule": "style*", "severity": "off" },
+    { "rule": "style/*", "severity": "off" },
     { "rule": "*-indent", "severity": "off" },
     { "rule": "*-spacing", "severity": "off" },
     { "rule": "*-spaces", "severity": "off" },
@@ -26,6 +25,7 @@
     { "rule": "*semi", "severity": "off" }
   ],
 
+  // Enable eslint for all supported languages
   "eslint.validate": [
     "javascript",
     "javascriptreact",

docs/.vitepress/config.ts

@@ -22,11 +22,13 @@ const PACKAGES: DefaultTheme.NavItemWithLink[] = [
   { text: 'Default', link: '/packages/default' },
   { text: 'JavaScript', link: '/packages/js' },
   { text: 'TypeScript', link: '/packages/ts' },
+  { text: 'JSX', link: '/packages/jsx' },
 ]
 
 const packageNames: Record<string, string> = {
   js: 'JavaScript Rules',
   ts: 'TypeScript Rules',
+  jsx: 'JSX Rules',
 }
 
 // https://vitepress.dev/reference/site-config

docs/packages/jsx.md

@@ -0,0 +1,37 @@
+# @stylistic/eslint-plugin-jsx
+
+JSX stylistic rules for ESLint, migrated from [`eslint-plugin-react`](https://github.com/jsx-eslint/eslint-plugin-react). Decoupled from React and support generic JSX syntax.
+
+Credits to all contributors who have committed to the original rules.
+
+::: tip
+Recommended to use [`@stylistic/eslint-plugin`](/packages/default), which support both JavaScript and TypeScript rules automatically, without the need to manually overrides.
+:::
+
+## Install
+
+```sh
+npm i -D @stylistic/eslint-plugin-jsx
+```
+
+Add `@stylistic/jsx` to your plugins list, and rename [stylistic rules](#rules) adding `@stylistic/js` prefix:
+
+```diff
+// .eslintrc.js
+module.exports = {
+  plugins: [
++   '@stylistic/jsx'
+  ],
+  rules: {
+-   'react/jsx-indent': ['error', 2],
++   '@stylistic/jsx/jsx-indent': ['error', 2],
+    // ...  
+  }
+};
+```
+
+You can also try out our [migration plugin](/guide/migration) to automated the migration process.
+
+## Rules
+
+<RuleList package="jsx" />

eslint.config.js

@@ -23,17 +23,20 @@ export default antfu(
       'jsdoc/no-types': 'off',
       'unicorn/prefer-number-properties': 'off',
 
+      'style/multiline-ternary': 'off',
+
       'ts/no-require-import': 'off',
       'ts/no-var-requires': 'off',
       'ts/no-require-imports': 'off',
     },
   },
   {
     files: [
-      '**/*.test.js',
+      '**/*.test.{js,ts}',
     ],
     rules: {
       'antfu/consistent-list-newline': 'off',
+      'node/prefer-global/process': 'off',
     },
   },
 )

netlify.toml

@@ -1,5 +1,6 @@
 [build.environment]
-  NODE_VERSION = "18"
+  NODE_VERSION = "20"
+  NODE_OPTIONS = "--max_old_space_size=4096"
 
 [build]
   publish = "docs/.vitepress/dist"

packages/eslint-plugin-jsx/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2014 Yannick Croissant
+Copyright (c) 2023-PRESENT eslint-stylistic and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/eslint-plugin-jsx/README.md

@@ -0,0 +1,7 @@
+# @stylistic/eslint-plugin-jsx
+
+JSX stylistic rules for ESLint, migrated from [`eslint-plugin-react`](https://github.com/jsx-eslint/eslint-plugin-react).
+
+Credits to all contributors who have committed to the original rules.
+
+Check the [documentation](https://eslint.style/packages/jsx) for more details.

packages/eslint-plugin-jsx/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@stylistic/eslint-plugin-jsx",
+  "version": "0.0.6",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/eslint-stylistic/eslint-stylistic#readme",
+  "repository": {
+    "directory": "packages/eslint-plugin-jsx",
+    "type": "git",
+    "url": "git+https://github.com/eslint-stylistic/eslint-stylistic.git"
+  },
+  "bugs": {
+    "url": "https://github.com/eslint-stylistic/eslint-stylistic/issues"
+  },
+  "main": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rimraf dist && rollup --config=rollup.config.mts --configPlugin=rollup-plugin-esbuild",
+    "dev": "rollup --config=rollup.config.mts --configPlugin=rollup-plugin-esbuild --watch",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {
+    "@stylistic/eslint-plugin-js": "workspace:^",
+    "estraverse": "^5.3.0",
+    "jsx-ast-utils": "^3.3.5"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/plugin-syntax-decorators": "^7.22.10",
+    "@babel/plugin-syntax-do-expressions": "^7.22.5",
+    "@babel/plugin-syntax-function-bind": "^7.22.5",
+    "@babel/preset-react": "^7.22.15",
+    "@typescript-eslint/parser": "^6.7.4",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^8.50.0",
+    "semver": "^7.5.4",
+    "typescript-eslint-parser": "^22.0.0"
+  }
+}

packages/eslint-plugin-jsx/rollup.config.mts

@@ -0,0 +1,36 @@
+import fs from 'node:fs/promises'
+import { basename, dirname } from 'node:path'
+import { defineConfig } from 'rollup'
+import commonjs from '@rollup/plugin-commonjs'
+
+const pkg = JSON.parse(await fs.readFile(new URL('./package.json', import.meta.url), 'utf-8'))
+
+export default defineConfig({
+  input: 'src/index.js',
+  output: [
+    {
+      dir: 'dist',
+      format: 'cjs',
+      manualChunks(id) {
+        if (id.includes('utils'))
+          return 'utils'
+        if (id.includes('rules')) {
+          const name = basename(dirname(id))
+          if (name !== 'rules')
+            return name
+        }
+      },
+      chunkFileNames: '[name].js',
+    },
+  ],
+  plugins: [
+    commonjs(),
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies || []),
+    ...Object.keys(pkg.peerDependencies || []),
+    'jsx-ast-utils/propName',
+    'jsx-ast-utils/elementType',
+    'node:process',
+  ],
+})

packages/eslint-plugin-jsx/rules.md

@@ -0,0 +1,22 @@
+# @stylistic/eslint-plugin-jsx
+
+| Rule ID | Description | Fixable | Recommended |
+| --- | --- | --- | --- |
+| [`@stylistic/jsx/jsx-child-element-spacing`](./rules/jsx-child-element-spacing) | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions |  |  |
+| [`@stylistic/jsx/jsx-closing-bracket-location`](./rules/jsx-closing-bracket-location) | Enforce closing bracket location in JSX | ✅ |  |
+| [`@stylistic/jsx/jsx-closing-tag-location`](./rules/jsx-closing-tag-location) | Enforce closing tag location for multiline JSX | ✅ |  |
+| [`@stylistic/jsx/jsx-curly-brace-presence`](./rules/jsx-curly-brace-presence) | Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes | ✅ |  |
+| [`@stylistic/jsx/jsx-curly-newline`](./rules/jsx-curly-newline) | Enforce consistent linebreaks in curly braces in JSX attributes and expressions | ✅ |  |
+| [`@stylistic/jsx/jsx-curly-spacing`](./rules/jsx-curly-spacing) | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | ✅ |  |
+| [`@stylistic/jsx/jsx-equals-spacing`](./rules/jsx-equals-spacing) | Enforce or disallow spaces around equal signs in JSX attributes | ✅ |  |
+| [`@stylistic/jsx/jsx-first-prop-new-line`](./rules/jsx-first-prop-new-line) | Enforce proper position of the first property in JSX | ✅ |  |
+| [`@stylistic/jsx/jsx-indent`](./rules/jsx-indent) | Enforce JSX indentation | ✅ |  |
+| [`@stylistic/jsx/jsx-indent-props`](./rules/jsx-indent-props) | Enforce props indentation in JSX | ✅ |  |
+| [`@stylistic/jsx/jsx-max-props-per-line`](./rules/jsx-max-props-per-line) | Enforce maximum of props on a single line in JSX | ✅ |  |
+| [`@stylistic/jsx/jsx-newline`](./rules/jsx-newline) | Require or prevent a new line after jsx elements and expressions. | ✅ |  |
+| [`@stylistic/jsx/jsx-one-expression-per-line`](./rules/jsx-one-expression-per-line) | Require one JSX element per line | ✅ |  |
+| [`@stylistic/jsx/jsx-props-no-multi-spaces`](./rules/jsx-props-no-multi-spaces) | Disallow multiple spaces between inline JSX props | ✅ |  |
+| [`@stylistic/jsx/jsx-sort-props`](./rules/jsx-sort-props) | Enforce props alphabetical sorting | ✅ |  |
+| [`@stylistic/jsx/jsx-space-before-closing`](./rules/jsx-space-before-closing) | Enforce spacing before closing bracket in JSX | ✅ |  |
+| [`@stylistic/jsx/jsx-tag-spacing`](./rules/jsx-tag-spacing) | Enforce whitespace in and around the JSX opening and closing brackets | ✅ |  |
+| [`@stylistic/jsx/jsx-wrap-multilines`](./rules/jsx-wrap-multilines) | Disallow missing parentheses around multiline JSX | ✅ |  |

packages/eslint-plugin-jsx/rules/index.js

@@ -0,0 +1,20 @@
+module.exports = {
+  'jsx-child-element-spacing': require('./jsx-child-element-spacing/jsx-child-element-spacing.js'),
+  'jsx-closing-bracket-location': require('./jsx-closing-bracket-location/jsx-closing-bracket-location.js'),
+  'jsx-closing-tag-location': require('./jsx-closing-tag-location/jsx-closing-tag-location.js'),
+  'jsx-curly-brace-presence': require('./jsx-curly-brace-presence/jsx-curly-brace-presence.js'),
+  'jsx-curly-newline': require('./jsx-curly-newline/jsx-curly-newline.js'),
+  'jsx-curly-spacing': require('./jsx-curly-spacing/jsx-curly-spacing.js'),
+  'jsx-equals-spacing': require('./jsx-equals-spacing/jsx-equals-spacing.js'),
+  'jsx-first-prop-new-line': require('./jsx-first-prop-new-line/jsx-first-prop-new-line.js'),
+  'jsx-indent': require('./jsx-indent/jsx-indent.js'),
+  'jsx-indent-props': require('./jsx-indent-props/jsx-indent-props.js'),
+  'jsx-max-props-per-line': require('./jsx-max-props-per-line/jsx-max-props-per-line.js'),
+  'jsx-newline': require('./jsx-newline/jsx-newline.js'),
+  'jsx-one-expression-per-line': require('./jsx-one-expression-per-line/jsx-one-expression-per-line.js'),
+  'jsx-props-no-multi-spaces': require('./jsx-props-no-multi-spaces/jsx-props-no-multi-spaces.js'),
+  'jsx-sort-props': require('./jsx-sort-props/jsx-sort-props.js'),
+  'jsx-space-before-closing': require('./jsx-space-before-closing/jsx-space-before-closing.js'),
+  'jsx-tag-spacing': require('./jsx-tag-spacing/jsx-tag-spacing.js'),
+  'jsx-wrap-multilines': require('./jsx-wrap-multilines/jsx-wrap-multilines.js'),
+}

packages/eslint-plugin-jsx/rules/jsx-child-element-spacing/README.md

@@ -0,0 +1,45 @@
+# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (`@stylistic/jsx/jsx-child-element-spacing`)
+
+<!-- end auto-generated rule header -->
+
+## Rule Details
+
+Since React removes extraneous new lines between elements when possible, it is possible to end up with inline elements that are not rendered with spaces between them and adjacent text. This is often indicative of an error, so this rule attempts to detect JSX markup with ambiguous spacing.
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<div>
+  Here is a
+  <a>link</a>
+</div>
+```
+
+```jsx
+<div>
+  <b>This text</b>
+  is bold
+</div>
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<div>
+  Spacing is
+  {' '}
+  <a>explicit</a>
+</div>
+```
+
+```jsx
+<div>
+  Lack of spacing is{/*
+  */}<a>explicit</a>
+</div>
+```
+
+## When Not To Use It
+
+You can turn this rule off if you are not concerned with inline elements appearing adjacent to text,
+or if you always explicitly include `{' '}` between elements to denote spacing.