Skip to content

Commit

Permalink
feat: rm exports and mv legacy.js to index.js
Browse files Browse the repository at this point in the history
  • Loading branch information
jjangga0214 committed Sep 15, 2022
1 parent 204da75 commit 6da5609
Show file tree
Hide file tree
Showing 10 changed files with 259 additions and 252 deletions.
74 changes: 44 additions & 30 deletions README.md
Expand Up @@ -17,7 +17,7 @@ npm install eslint eslint-plugin-react --save-dev

It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.

## Configuration (legacy: eslintrc)
## Configuration (legacy: `.eslintrc*`)

Use [our preset](#recommended) to get reasonable defaults:

Expand Down Expand Up @@ -141,7 +141,7 @@ This pairs well with the `eslint:all` rule.

**Note**: These configurations will import `eslint-plugin-react` and enable JSX in [parser options](https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options).

## Configuration (new: eslint.config.js)
## Configuration (new: `eslint.config.js`)

From [`v8.21.0`](https://github.com/eslint/eslint/releases/tag/v8.21.0), eslint announced a new config system.
In the new system, `.eslintrc*` is no longer used. `eslint.config.js` would be the default config file name.
Expand All @@ -162,10 +162,9 @@ and the [official docs](https://eslint.org/docs/latest/user-guide/configuring/co

The default export of `eslint-plugin-react` is a plugin object.

If your `eslint.config.js` is ESM, you can import and use the plugin like this.

```js
import react from 'eslint-plugin-react'
import globals from 'globals'

export default [
// --- snip ---
Expand All @@ -180,6 +179,9 @@ export default [
jsx: true,
},
},
globals: {
...globals.browser
},
},
rules: {
// ... any rules you want
Expand All @@ -192,21 +194,6 @@ export default [
]
```

If your `eslint.config.js` is CJS, you can `require()` different entrypoint like this.

```js
const react = require('eslint-plugin-react/new') // <== trailing '/new'

module.exports = [
{
// ... others are omitted for brevity
plugins: {
react,
},
},
]
```

### Configuring shared settings

Refer to the [official docs](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuring-shared-settings).
Expand All @@ -222,17 +209,15 @@ There're also 3 shareable configs.
- `eslint-plugin-react/recommended`
- `eslint-plugin-react/jsx-runtime`

Unlike plugin, entrypoints of these shareable configs are same no matter whether you use ESM or CJS.
If your eslint.config.js is ESM, put `.js` extension, like `eslint-plugin-react/recommended.js`

**Note**: These configurations will import `eslint-plugin-react` and enable JSX in [`languageOptions.parserOptions`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects).

In the new config system, `plugin:` protocol(e.g. `plugin:react/recommended`) is no longer valid.
As eslint does not automatically import the preset config (shareable config), you explicitly do it by yourself.

**Note**: The new plugin object does not have `configs` property as well.

```js
import react from 'eslint-plugin-react/recommended' // <== trailing '/recommended'
import react from 'eslint-plugin-react/recommended.js'

export default [
// --- snip ---
Expand All @@ -243,22 +228,51 @@ export default [

You can of course add/override some properties.

**Note**: Our shareable configs does not preconfigure `files`, which means it's `['**/*.js']` by default.
For most of the cases, you probably want to configure by yourself.
**Note**: Our shareable configs does not preconfigure `files` or [`languageOptions.globals`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects).
For most of the cases, you probably want to configure some properties by yourself.

```js
import react from 'eslint-plugin-react/recommended'
import react from 'eslint-plugin-react/recommended.js'
import globals from 'globals'

export default [
// --- snip ---
{
...react,
files: ['**/*.{jsx,tsx}'],
globals: {
...globals.serviceworker,
...globals.browser
},
languageOptions: {
...react.languageOptions,
globals: {
...globals.serviceworker,
...globals.browser
},
}

},
// --- snip ---
]
```

The above example is same as the example below, as the new config system is based on chaining.

```js
import jsxA11y from 'eslint-plugin-react/recommended.js'
import globals from 'globals'

export default [
// --- snip ---
{
...jsxA11y,
files: ['**/*.{jsx,tsx}'],
},
{
files: ['**/*.{jsx,tsx}'],
languageOptions: {
globals: {
...globals.serviceworker,
...globals.browser
},
}
},
// --- snip ---
]
Expand Down
3 changes: 3 additions & 0 deletions all.js
@@ -0,0 +1,3 @@
'use strict';

module.exports = require('./configs/all');
22 changes: 17 additions & 5 deletions configs/all.js
@@ -1,8 +1,20 @@
'use strict';

const recommended = require('./recommended');
const legacy = require('../legacy');
const react = require('../index');

module.exports = Object.assign({}, recommended, {
rules: legacy.configs.all.rules,
});
const plugin = Object.assign({}, react);
delete plugin.configs;

module.exports = {
plugins: {
react: plugin,
},
languageOptions: {
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
rules: react.configs.all.rules,
};
4 changes: 2 additions & 2 deletions configs/jsx-runtime.js
@@ -1,8 +1,8 @@
'use strict';

const recommended = require('./recommended');
const all = require('./all');

module.exports = Object.assign({}, recommended, {
module.exports = Object.assign({}, all, {
rules: {
'react/react-in-jsx-scope': 0,
'react/jsx-uses-react': 0,
Expand Down
18 changes: 4 additions & 14 deletions configs/recommended.js
@@ -1,18 +1,8 @@
'use strict';

const all = require('./all');
const react = require('../index');
const legacy = require('../legacy');

module.exports = {
plugins: {
react,
},
languageOptions: {
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
rules: legacy.configs.recommended.rules,
};
module.exports = Object.assign({}, all, {
rules: react.configs.recommended.rules,
});
185 changes: 182 additions & 3 deletions index.js
@@ -1,8 +1,187 @@
'use strict';

const legacy = require('./legacy');
const fromEntries = require('object.fromentries');
const entries = require('object.entries');

/* eslint-disable global-require */
const allRules = {
'boolean-prop-naming': require('./lib/rules/boolean-prop-naming'),
'button-has-type': require('./lib/rules/button-has-type'),
'default-props-match-prop-types': require('./lib/rules/default-props-match-prop-types'),
'destructuring-assignment': require('./lib/rules/destructuring-assignment'),
'display-name': require('./lib/rules/display-name'),
'forbid-component-props': require('./lib/rules/forbid-component-props'),
'forbid-dom-props': require('./lib/rules/forbid-dom-props'),
'forbid-elements': require('./lib/rules/forbid-elements'),
'forbid-foreign-prop-types': require('./lib/rules/forbid-foreign-prop-types'),
'forbid-prop-types': require('./lib/rules/forbid-prop-types'),
'function-component-definition': require('./lib/rules/function-component-definition'),
'hook-use-state': require('./lib/rules/hook-use-state'),
'iframe-missing-sandbox': require('./lib/rules/iframe-missing-sandbox'),
'jsx-boolean-value': require('./lib/rules/jsx-boolean-value'),
'jsx-child-element-spacing': require('./lib/rules/jsx-child-element-spacing'),
'jsx-closing-bracket-location': require('./lib/rules/jsx-closing-bracket-location'),
'jsx-closing-tag-location': require('./lib/rules/jsx-closing-tag-location'),
'jsx-curly-spacing': require('./lib/rules/jsx-curly-spacing'),
'jsx-curly-newline': require('./lib/rules/jsx-curly-newline'),
'jsx-equals-spacing': require('./lib/rules/jsx-equals-spacing'),
'jsx-filename-extension': require('./lib/rules/jsx-filename-extension'),
'jsx-first-prop-new-line': require('./lib/rules/jsx-first-prop-new-line'),
'jsx-handler-names': require('./lib/rules/jsx-handler-names'),
'jsx-indent': require('./lib/rules/jsx-indent'),
'jsx-indent-props': require('./lib/rules/jsx-indent-props'),
'jsx-key': require('./lib/rules/jsx-key'),
'jsx-max-depth': require('./lib/rules/jsx-max-depth'),
'jsx-max-props-per-line': require('./lib/rules/jsx-max-props-per-line'),
'jsx-newline': require('./lib/rules/jsx-newline'),
'jsx-no-bind': require('./lib/rules/jsx-no-bind'),
'jsx-no-comment-textnodes': require('./lib/rules/jsx-no-comment-textnodes'),
'jsx-no-constructed-context-values': require('./lib/rules/jsx-no-constructed-context-values'),
'jsx-no-duplicate-props': require('./lib/rules/jsx-no-duplicate-props'),
'jsx-no-leaked-render': require('./lib/rules/jsx-no-leaked-render'),
'jsx-no-literals': require('./lib/rules/jsx-no-literals'),
'jsx-no-script-url': require('./lib/rules/jsx-no-script-url'),
'jsx-no-target-blank': require('./lib/rules/jsx-no-target-blank'),
'jsx-no-useless-fragment': require('./lib/rules/jsx-no-useless-fragment'),
'jsx-one-expression-per-line': require('./lib/rules/jsx-one-expression-per-line'),
'jsx-no-undef': require('./lib/rules/jsx-no-undef'),
'jsx-curly-brace-presence': require('./lib/rules/jsx-curly-brace-presence'),
'jsx-pascal-case': require('./lib/rules/jsx-pascal-case'),
'jsx-fragments': require('./lib/rules/jsx-fragments'),
'jsx-props-no-multi-spaces': require('./lib/rules/jsx-props-no-multi-spaces'),
'jsx-props-no-spreading': require('./lib/rules/jsx-props-no-spreading'),
'jsx-sort-default-props': require('./lib/rules/jsx-sort-default-props'),
'jsx-sort-props': require('./lib/rules/jsx-sort-props'),
'jsx-space-before-closing': require('./lib/rules/jsx-space-before-closing'),
'jsx-tag-spacing': require('./lib/rules/jsx-tag-spacing'),
'jsx-uses-react': require('./lib/rules/jsx-uses-react'),
'jsx-uses-vars': require('./lib/rules/jsx-uses-vars'),
'jsx-wrap-multilines': require('./lib/rules/jsx-wrap-multilines'),
'no-invalid-html-attribute': require('./lib/rules/no-invalid-html-attribute'),
'no-access-state-in-setstate': require('./lib/rules/no-access-state-in-setstate'),
'no-adjacent-inline-elements': require('./lib/rules/no-adjacent-inline-elements'),
'no-array-index-key': require('./lib/rules/no-array-index-key'),
'no-arrow-function-lifecycle': require('./lib/rules/no-arrow-function-lifecycle'),
'no-children-prop': require('./lib/rules/no-children-prop'),
'no-danger': require('./lib/rules/no-danger'),
'no-danger-with-children': require('./lib/rules/no-danger-with-children'),
'no-deprecated': require('./lib/rules/no-deprecated'),
'no-did-mount-set-state': require('./lib/rules/no-did-mount-set-state'),
'no-did-update-set-state': require('./lib/rules/no-did-update-set-state'),
'no-direct-mutation-state': require('./lib/rules/no-direct-mutation-state'),
'no-find-dom-node': require('./lib/rules/no-find-dom-node'),
'no-is-mounted': require('./lib/rules/no-is-mounted'),
'no-multi-comp': require('./lib/rules/no-multi-comp'),
'no-namespace': require('./lib/rules/no-namespace'),
'no-set-state': require('./lib/rules/no-set-state'),
'no-string-refs': require('./lib/rules/no-string-refs'),
'no-redundant-should-component-update': require('./lib/rules/no-redundant-should-component-update'),
'no-render-return-value': require('./lib/rules/no-render-return-value'),
'no-this-in-sfc': require('./lib/rules/no-this-in-sfc'),
'no-typos': require('./lib/rules/no-typos'),
'no-unescaped-entities': require('./lib/rules/no-unescaped-entities'),
'no-unknown-property': require('./lib/rules/no-unknown-property'),
'no-unsafe': require('./lib/rules/no-unsafe'),
'no-unstable-nested-components': require('./lib/rules/no-unstable-nested-components'),
'no-unused-class-component-methods': require('./lib/rules/no-unused-class-component-methods'),
'no-unused-prop-types': require('./lib/rules/no-unused-prop-types'),
'no-unused-state': require('./lib/rules/no-unused-state'),
'no-will-update-set-state': require('./lib/rules/no-will-update-set-state'),
'prefer-es6-class': require('./lib/rules/prefer-es6-class'),
'prefer-exact-props': require('./lib/rules/prefer-exact-props'),
'prefer-read-only-props': require('./lib/rules/prefer-read-only-props'),
'prefer-stateless-function': require('./lib/rules/prefer-stateless-function'),
'prop-types': require('./lib/rules/prop-types'),
'react-in-jsx-scope': require('./lib/rules/react-in-jsx-scope'),
'require-default-props': require('./lib/rules/require-default-props'),
'require-optimization': require('./lib/rules/require-optimization'),
'require-render-return': require('./lib/rules/require-render-return'),
'self-closing-comp': require('./lib/rules/self-closing-comp'),
'sort-comp': require('./lib/rules/sort-comp'),
'sort-prop-types': require('./lib/rules/sort-prop-types'),
'state-in-constructor': require('./lib/rules/state-in-constructor'),
'static-property-placement': require('./lib/rules/static-property-placement'),
'style-prop-object': require('./lib/rules/style-prop-object'),
'void-dom-elements-no-children': require('./lib/rules/void-dom-elements-no-children'),
};
/* eslint-enable */

function filterRules(rules, predicate) {
return fromEntries(entries(rules).filter((entry) => predicate(entry[1])));
}

function configureAsError(rules) {
return fromEntries(Object.keys(rules).map((key) => [`react/${key}`, 2]));
}

const activeRules = filterRules(allRules, (rule) => !rule.meta.deprecated);
const activeRulesConfig = configureAsError(activeRules);

const deprecatedRules = filterRules(allRules, (rule) => rule.meta.deprecated);

module.exports = {
deprecatedRules: legacy.deprecatedRules,
rules: legacy.rules,
deprecatedRules,
rules: allRules,
configs: {
recommended: {
plugins: [
'react',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
rules: {
'react/display-name': 2,
'react/jsx-key': 2,
'react/jsx-no-comment-textnodes': 2,
'react/jsx-no-duplicate-props': 2,
'react/jsx-no-target-blank': 2,
'react/jsx-no-undef': 2,
'react/jsx-uses-react': 2,
'react/jsx-uses-vars': 2,
'react/no-children-prop': 2,
'react/no-danger-with-children': 2,
'react/no-deprecated': 2,
'react/no-direct-mutation-state': 2,
'react/no-find-dom-node': 2,
'react/no-is-mounted': 2,
'react/no-render-return-value': 2,
'react/no-string-refs': 2,
'react/no-unescaped-entities': 2,
'react/no-unknown-property': 2,
'react/no-unsafe': 0,
'react/prop-types': 2,
'react/react-in-jsx-scope': 2,
'react/require-render-return': 2,
},
},
all: {
plugins: [
'react',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
rules: activeRulesConfig,
},
'jsx-runtime': {
plugins: [
'react',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
jsxPragma: null, // for @typescript/eslint-parser
},
rules: {
'react/react-in-jsx-scope': 0,
'react/jsx-uses-react': 0,
},
},
},
};
3 changes: 3 additions & 0 deletions jsx-runtime.js
@@ -0,0 +1,3 @@
'use strict';

module.exports = require('./configs/jsx-runtime');

0 comments on commit 6da5609

Please sign in to comment.