@fullstacksjs/eslint-config 9.0.14 → 9.0.15

package/README.md

@@ -40,93 +40,81 @@ $ npm install --save-dev @fullstacksjs/eslint-config eslint prettier
 $ yarn add --dev @fullstacksjs/eslint-config eslint prettier
 ```
 
-optional dependencies (if you need):
-
-* react
-* jest
-* cypress
-
 ## Usage
 
-Just extend from `@fullstacksjs`:
+## Method 1 (recommended)
 
-```json
-{
-  "extends": ["@fullstacksjs"]
-}
-```
+Create `.eslintrc.js` file and init the configuration.
+
+```js
+const { init } = require('@fullstacksjs/eslint-config/init');
 
-It reads your root `package.json` dependencies and includes necessary rules.
+module.exports = init({
+  modules: {
+    auto: true, // If you need auto module detection.
+    // Modules configuration. (optional)
+  },
+  // Your configurations
+});
 
-## NextJS
+```
 
-Our index setup conflicts with the built-in ESLint [NextJS](https://nextjs.org/) configuration. To utilize it in a NextJS project, configure your eslintrc file as follows.
+## Method 2
+extend from `@fullstacksjs`:
 
 ```json
 {
-  "extends": ["next/core-web-vitals", "@fullstacksjs/eslint-config/nextjs"]
+  "extends": ["@fullstacksjs"]
 }
 ```
 
-## Advanced Usage
-
-```jsonc
-{
-  "extends": [
-    "@fullstacksjs/eslint-config/base",
-    "@fullstacksjs/eslint-config/jest",
-    "@fullstacksjs/eslint-config/react",
-    "@fullstacksjs/eslint-config/typescript",
-    "@fullstacksjs/eslint-config/strict",
-    "@fullstacksjs/eslint-config/cypress",
-    "@fullstacksjs/eslint-config/storybook",
-    "@fullstacksjs/eslint-config/graphql", // Need extra config
-    "@fullstacksjs/eslint-config/esm", // for native ESM modules
-    "@fullstacksjs/eslint-config/typecheck" // ⚠️ Needs configurations (not included in default config)
-  ]
+## Auto Module Detection
+When you extend from `@fullstakcjs` or use `modules.auto: true`, it reads your root `package.json` dependencies and includes necessary rules and plugins.
+
+## Modules API
+
+```typescript
+interface Modules {
+    auto?: boolean; // Auto module detection
+    react?: 'next' | 'raw'; // controls react, react-hooks, jsx/a11y plugins
+    typescript?: { parserProject: string[] | string; resolverProject: string[] | string }; // controls typescript plugin
+    node?: boolean; // controls node plugin
+    strict?: boolean; // controls strict plugin
+    import?: boolean; // controls import plugin
+    esm?: boolean; // controls esm plugin
+    graphql?: boolean; // controls graphql plugin
+    test?: boolean; // controls jest/vitest plugin
+    cypress?: boolean; // controls cypress plugin
+    storybook?: boolean; // controls storybook plugin
 }
 ```
 
-## Need more typescript rules?
+## Typescript configuration
 
-If you need more advanced `typescript-eslint` rules, then you can extend from `"@fullstacksjs/eslint-config/typecheck"` and set `parserOptions.project` option:
+If you need more advanced typescript-eslint rule you need to specify `modules.typescript.resolverProject`.
 
 ```json
-{
-  "extends": [
-    "@fullstacksjs",
-    "@fullstacksjs/eslint-config/typecheck"
-  ],
-  "parserOptions": {
-    "project": "<PATH_TO_TSCONFIG>"
-  }
-}
+module.exports = init({
+  modules: {
+    typescript: { resolverProject: "<PATH_TO_TSCONFIG>" }
+  },
+});
 ```
 
 ## Graphql
 
-To enable graphql module you need to extends from `@fullstacksjs/eslint-config/graphql` and configure schema and operations in you eslint config or graphql config. for more information checkout [here](https://github.com/B2o5T/graphql-eslint#configuration).
+To enable graphql module you need to set either have `graphql` dependency installed with auto module detection option, or manually enable it yourself by `modules.graphql` option. for more information checkout [here](https://github.com/B2o5T/graphql-eslint#configuration).
 
 Here is an example:
 
-```jsonc
-// eslintrc
-
-{
-  "extends": [
-    ...
-    "@fullstacksjs/eslint-config/graphql"
-  ],
-}
-```
-
-```yaml
-# .graphqlrc.yml
-
-schema: 'path/to/schema'
+```js
+module.exports = init({
+  modules: {
+    graphql: true
+  },
+});
 ```
 
-
 ## What's included?
 
 * @typescript-eslint/eslint-plugin

package/cypress.js

@@ -6,7 +6,7 @@ const { exts } = require('./utils');
 module.exports = {
   overrides: [
     {
-      files: [`**/cypress/**/*.${exts}`, `**/*.cy.+${exts}`],
+      files: [`**/cypress/**/*.${exts}`, `**/*.cy.${exts}`],
       plugins: ['jest', 'jest-formatting', 'cypress'],
       env: {
         'cypress/globals': true,

package/esm.js

@@ -1,13 +1,13 @@
 /** @type { import('eslint').Linter.Config } */
 module.exports = {
   rules: {
-    'import/extensions': ['error', { mjs: 'ignorePackages' }],
+    ...(global.fullstacksjs?.import && { 'import/extensions': ['error', { mjs: 'ignorePackages' }] }),
   },
   overrides: [
     {
       files: ['*.ts', '*.tsx'],
       rules: {
-        'import/no-unresolved': ['error', { ignore: ['.js$'], caseSensitiveStrict: true }],
+        ...(global.fullstacksjs?.import && { 'import/no-unresolved': ['error', { ignore: ['.js$'], caseSensitiveStrict: true }] }),
       },
     },
   ],

package/index.js

@@ -1,9 +1,8 @@
 require('./registerOpts');
-const { compact } = require('@fullstacksjs/toolbox');
 
 /** @type { import('eslint').Linter.Config } */
 module.exports = {
-  extends: compact([
+  extends: [
     require.resolve('./base'),
     require.resolve('./fp'),
     require.resolve('./import'),
@@ -15,5 +14,5 @@ module.exports = {
     global.fullstacksjs?.typescript && require.resolve('./typescript'),
     global.fullstacksjs?.cypress && require.resolve('./cypress'),
     require.resolve('./prettier'),
-  ]),
+  ].filter(Boolean),
 };

package/init.d.ts

@@ -1,15 +1,18 @@
-export interface Options {
-  react: 'next' | 'raw';
-  typescript: { parserProject: string[] | string; resolverProject: string[] | string };
-  node: boolean;
-  strict: boolean;
-  import: boolean;
-  esm: boolean;
-  graphql: boolean;
-  test: boolean;
-  cypress: boolean;
-  storybook: boolean;
-  overrides: import('eslint').Linter.Config;
+type Config = import('eslint').Linter.Config;
+export interface Options extends Config {
+  modules: {
+    auto?: boolean;
+    react?: 'next' | 'raw';
+    typescript?: { parserProject: string[] | string; resolverProject: string[] | string };
+    node?: boolean;
+    strict?: boolean;
+    import?: boolean;
+    esm?: boolean;
+    graphql?: boolean;
+    test?: boolean;
+    cypress?: boolean;
+    storybook?: boolean;
+  };
 }
 
 export declare const init: (opts: Options) => import('eslint').Linter.Config;

package/init.js

@@ -1,34 +1,38 @@
-require('./registerOpts');
-const { compact } = require('@fullstacksjs/toolbox');
 const merge = require('deepmerge');
 
 /** @param { import('./init.d').Options } opts */
 // eslint-disable-next-line complexity
 function init(opts = {}) {
-  const { extends: extendsOverrides, ...overrides } = opts.overrides;
-  global.fullstacksjs = merge(global.fullstacksjs, opts);
+  const { modules = {}, extends: extraExtends = [], ...eslintConfig } = opts;
+  if (modules.auto) {
+    require('./registerOpts');
+    global.fullstacksjs = merge(global.fullstacksjs, modules);
+  } else {
+    global.fullstacksjs = modules;
+  }
+  opts = global.fullstacksjs;
 
   /** @type { import('eslint').Linter.Config } */
   const config = {
-    extends: compact([
+    extends: [
       require.resolve('./base'),
       require.resolve('./promise'),
       require.resolve('./fp'),
       opts.node && require.resolve('./node'),
-      opts.cypress && require.resolve('./cypress'),
-      opts.test && require.resolve('./jest'),
       opts.graphql && require.resolve('./graphql'),
-      opts.storybook && require.resolve('./storybook'),
-      opts.importModule && require.resolve('./import'),
+      opts.import && require.resolve('./import'),
       opts.typescript && require.resolve('./typescript'),
+      opts.storybook && require.resolve('./storybook'),
+      opts.cypress && require.resolve('./cypress'),
+      opts.test && require.resolve('./jest'),
       opts.esm && require.resolve('./esm'),
       opts.strict && require.resolve('./strict'),
       require.resolve('./prettier'),
-      ...(extendsOverrides ?? []),
-    ]),
+      ...extraExtends,
+    ].filter(Boolean),
     parserOptions: {},
     settings: {},
-    ...overrides,
+    ...eslintConfig,
   };
 
   if (opts.react === 'raw') config.extends.push(require.resolve('./react.js'));

package/jest.js

@@ -68,7 +68,7 @@ module.exports = {
           'jest/no-deprecated-functions': 'error',
         }),
 
-        ...(global.fullstacksjs?.typescript && {
+        ...(global.fullstacksjs?.typescript?.resolverProject && {
           '@typescript-eslint/unbound-method': 'off',
           'jest/unbound-method': 'error',
           'jest/no-untyped-mock-factory': 'warn',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullstacksjs/eslint-config",
-  "version": "9.0.14",
+  "version": "9.0.15",
   "license": "MIT",
   "author": "fullstacks <fullstacksjs@gmail.com>",
   "description": "fullstacks eslint config",

package/registerOpts.js

@@ -6,7 +6,7 @@ const defaultOptions = {
   cypress: hasDep('cypress'),
   graphql: hasDep('graphql'),
   react: hasDep('react') && !hasDep('next'),
-  storybook: hasDep('storybook'),
+  storybook: hasDep('@storybook/react'),
   test: hasDep('jest') || hasDep('vitest'),
   typescript: hasDep('typescript'),
   import: true,

package/storybook.js

@@ -2,8 +2,8 @@
 module.exports = {
   overrides: [
     {
+      files: ['**/*.stories.+(ts|tsx|js|jsx|mjs|cjs|mdx)', '**/*.story.+(ts|tsx|js|jsx|mjs|cjs|mdx)'],
       plugins: ['storybook'],
-      files: ['*.stories.+(ts|tsx|js|jsx|mjs|cjs|mdx)', '*.story.+(ts|tsx|js|jsx|mjs|cjs|mdx)'],
       rules: {
         'storybook/await-interactions': 'error',
         'storybook/context-in-play-function': 'error',