@cedarjs/eslint-config 5.0.4-next.167 → 5.0.4

package/index.js

@@ -0,0 +1,142 @@
+// This is the ESLint configuration used by Cedar projects.
+// Shared eslint config (projects and framework) is located in ./shared.js
+// Framework main config is in monorepo root ./eslint.config.js
+
+const {
+  getCommonPlugins,
+  getApiSideDefaultBabelConfig,
+  getWebSideDefaultBabelConfig,
+} = require('@cedarjs/babel-config')
+const { getConfig, isTypeScriptProject } = require('@cedarjs/project-config')
+
+const config = getConfig()
+
+const getProjectBabelOptions = () => {
+  // We can't nest the web overrides inside the overrides block
+  // So we just take it out and put it as a separate item
+  // Ignoring overrides, as I don't think it has any impact on linting
+  const { overrides: _webOverrides, ...otherWebConfig } =
+    getWebSideDefaultBabelConfig({
+      // We have to enable certain presets like `@babel/preset-react` for JavaScript projects
+      forJavaScriptLinting: !isTypeScriptProject(),
+    })
+
+  const { overrides: _apiOverrides, ...otherApiConfig } =
+    getApiSideDefaultBabelConfig()
+
+  return {
+    plugins: getCommonPlugins(),
+    overrides: [
+      {
+        test: ['./api/', './scripts/'],
+        ...otherApiConfig,
+      },
+      {
+        test: ['./web/'],
+        ...otherWebConfig,
+      },
+    ],
+  }
+}
+
+const plugins = []
+const rules = {}
+
+// Add react compiler plugin & rules if enabled
+const reactCompilerEnabled =
+  config.experimental?.reactCompiler?.enabled ?? false
+if (reactCompilerEnabled) {
+  plugins.push('react-compiler')
+  rules['react-compiler/react-compiler'] = 2
+}
+
+module.exports = {
+  extends: [
+    './shared.js',
+    config.web.a11y && 'plugin:jsx-a11y/recommended',
+  ].filter(Boolean),
+  // This is merged with `ignorePatterns` in shared.js
+  ignorePatterns: ['!.storybook/'],
+  parserOptions: {
+    requireConfigFile: false,
+    babelOptions: getProjectBabelOptions(),
+  },
+  plugins,
+  rules,
+  overrides: [
+    {
+      files: ['web/src/Routes.js', 'web/src/Routes.jsx', 'web/src/Routes.tsx'],
+      rules: {
+        'no-undef': 'off',
+        'jsx-a11y/aria-role': [
+          2,
+          {
+            ignoreNonDOM: true,
+          },
+        ],
+        '@cedarjs/unsupported-route-components': 'error',
+      },
+    },
+    // `api` side
+    {
+      files: 'api/src/**',
+      env: {
+        node: true,
+        es6: true,
+      },
+      globals: {
+        gql: 'readonly',
+        context: 'readonly',
+      },
+    },
+    {
+      files: ['api/src/services/**/*.ts'],
+      plugins: ['@cedarjs'],
+      rules: {
+        '@cedarjs/service-type-annotations': 'off',
+      },
+    },
+    {
+      files: ['api/db/seed.js', 'scripts/**'],
+      env: {
+        node: true,
+        commonjs: true,
+      },
+      globals: {
+        Promise: 'readonly',
+      },
+    },
+    // `web` side
+    {
+      files: 'web/src/**',
+      env: {
+        browser: true,
+        es6: true,
+        'shared-node-browser': true,
+      },
+      globals: {
+        React: 'readonly',
+        gql: 'readonly',
+        process: 'readonly',
+        require: 'readonly',
+      },
+    },
+    // Test, stories, scenarios, and mock files
+    {
+      files: [
+        '*.test.*',
+        '**/__mocks__/**',
+        '*.scenarios.*',
+        '*.stories.*',
+        '*.mock.*',
+      ],
+      globals: {
+        mockGraphQLQuery: 'readonly',
+        mockGraphQLMutation: 'readonly',
+        mockCurrentUser: 'readonly',
+        scenario: 'readonly',
+        defineScenario: 'readonly',
+      },
+    },
+  ],
+}

package/index.mjs

@@ -6,6 +6,7 @@ import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'
 import globals from 'globals'
 
 import {
+  getCommonPlugins,
   getApiSideDefaultBabelConfig,
   getWebSideDefaultBabelConfig,
 } from '@cedarjs/babel-config'
@@ -15,11 +16,9 @@ import { getConfig, isTypeScriptProject } from '@cedarjs/project-config'
 import sharedConfigs from './shared.mjs'
 
 // Note: This config is async to support getConfig()
-/** @returns {Promise<import('eslint').Linter.FlatConfig[]>} */
 export default async function createConfig() {
   const config = await getConfig()
 
-  /** @returns {import('@babel/core').TransformOptions} */
   const getProjectBabelOptions = () => {
     // We can't nest the web overrides inside the overrides block
     // So we just take it out and put it as a separate item
@@ -34,7 +33,7 @@ export default async function createConfig() {
       getApiSideDefaultBabelConfig()
 
     return {
-      plugins: [],
+      plugins: getCommonPlugins(),
       overrides: [
         {
           test: ['./api/', './scripts/'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarjs/eslint-config",
-  "version": "5.0.4-next.167",
+  "version": "5.0.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cedarjs/cedar.git",
@@ -9,17 +9,31 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./dist/index.d.mts",
-      "default": "./index.mjs"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./index.js"
+      }
     },
     "./shared": {
-      "types": "./dist/shared.d.mts",
-      "default": "./shared.mjs"
+      "import": {
+        "types": "./dist/shared.d.mts",
+        "default": "./shared.mjs"
+      },
+      "require": {
+        "types": "./dist/shared.d.ts",
+        "default": "./shared.js"
+      }
     }
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/index.d.ts",
   "files": [
+    "index.js",
     "index.mjs",
+    "shared.js",
     "shared.mjs",
     "dist"
   ],
@@ -32,13 +46,18 @@
     "@babel/core": "^7.26.10",
     "@babel/eslint-parser": "7.29.7",
     "@babel/eslint-plugin": "7.29.7",
-    "@cedarjs/babel-config": "5.0.4-next.167",
-    "@cedarjs/eslint-plugin": "5.0.4-next.167",
-    "@cedarjs/project-config": "5.0.4-next.167",
+    "@cedarjs/babel-config": "5.0.4",
+    "@cedarjs/eslint-plugin": "5.0.4",
+    "@cedarjs/internal": "5.0.4",
+    "@cedarjs/project-config": "5.0.4",
     "@eslint/js": "8.57.1",
+    "@typescript-eslint/eslint-plugin": "8.60.1",
+    "@typescript-eslint/parser": "8.60.1",
     "eslint": "8.57.1",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-import-x": "4.17.1",
+    "eslint-import-resolver-babel-module": "5.3.2",
+    "eslint-plugin-babel": "5.3.1",
+    "eslint-plugin-import-x": "4.16.2",
     "eslint-plugin-jest-dom": "5.5.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.5.6",
@@ -48,6 +67,7 @@
     "typescript-eslint": "8.60.1"
   },
   "devDependencies": {
+    "@babel/cli": "7.29.7",
     "typescript": "5.9.3"
   },
   "peerDependencies": {

package/shared.js

@@ -0,0 +1,202 @@
+// This ESLint configuration is shared between the Redwood framework,
+// and Redwood projects.
+//
+// Our ESLint configuration is a mixture between ESLint's recommended
+// rules [^1], React's recommended rules [^2], and a bit of our own stylistic
+// flair:
+// - no semicolons
+// - comma dangle when multiline
+// - single quotes
+// - always use parenthesis around arrow functions
+// - enforced import sorting
+//
+// [^1] https://eslint.org/docs/rules/
+// [^2] https://www.npmjs.com/package/eslint-plugin-react#list-of-supported-rules
+
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+    'plugin:jest-dom/recommended',
+  ],
+  // @NOTE parserOptions defined separately for project and framework
+  parser: '@babel/eslint-parser',
+  plugins: [
+    'prettier',
+    '@babel',
+    'import-x',
+    'jsx-a11y',
+    'react',
+    'react-hooks',
+    'jest-dom',
+    '@cedarjs',
+  ],
+  // In addition to this, eslint also has some implicit ignore patterns, like
+  // `node_modules`.
+  // See https://eslint.org/docs/latest/use/configure/ignore-deprecated
+  ignorePatterns: ['dist'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    // For the import/order rule. Configures how it tells if an import is "internal" or not.
+    // An "internal" import is basically just one that's aliased.
+    //
+    // See...
+    // - https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md#groups-array
+    // - https://github.com/import-js/eslint-plugin-import/blob/main/README.md#importinternal-regex
+    'import-x/internal-regex': '^src/',
+  },
+  rules: {
+    '@cedarjs/process-env-computed': 'error',
+    'prettier/prettier': 'warn',
+    'no-console': 'off',
+    'prefer-object-spread': 'warn',
+    'prefer-spread': 'warn',
+    'no-unused-expressions': [
+      'error',
+      { allowShortCircuit: true, allowTernary: true },
+    ],
+    'no-useless-escape': 'off',
+    camelcase: ['warn', { properties: 'never' }],
+    'no-new': 'warn',
+    'new-cap': ['error', { newIsCap: true, capIsNew: false }],
+    'no-unused-vars': [
+      'error',
+      { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
+    ],
+    // React rules
+    'react/prop-types': 'off',
+    'react/display-name': 'off',
+    'react-hooks/exhaustive-deps': 'warn',
+    'import-x/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        // We set this to an empty array to override the default value, which is `['builtin', 'external', 'object']`.
+        // Judging by the number of issues on the repo, this option seems to be notoriously tricky to understand.
+        // From what I can tell, if the value of this is `['builtin']` that means it won't sort builtins.
+        // But we have a rule for builtins below (react), so that's not what we want.
+        //
+        // See...
+        // - https://github.com/import-js/eslint-plugin-import/pull/1570
+        // - https://github.com/import-js/eslint-plugin-import/issues/1565
+        pathGroupsExcludedImportTypes: [],
+        // Only doing this to add internal. The order here maters.
+        // See https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md#groups-array
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+        ],
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'builtin',
+            position: 'after',
+          },
+          {
+            pattern: '@cedarjs/**',
+            group: 'external',
+            position: 'after',
+          },
+          {
+            // Matches...
+            // - src/directives/**/*.{js,ts}
+            // - src/services/**/*.{js,ts}
+            // - src/graphql/**/*.sdl.{js,ts}
+            //
+            // Uses https://github.com/isaacs/minimatch under the hood
+            // See https://github.com/isaacs/node-glob#glob-primer for syntax
+            pattern: 'src/*/**/*.?(sdl.){js,ts}',
+            patternOptions: {
+              nobrace: true,
+              noglobstar: true,
+            },
+            group: 'internal',
+            position: 'before',
+          },
+        ],
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['$api/*'],
+            message:
+              'Importing from $api is only supported in *.routeHooks.{js,ts} files',
+          },
+        ],
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['*.tsx', '*.js', '*.jsx'],
+      excludedFiles: ['api/src/**'],
+      rules: {
+        'react-hooks/rules-of-hooks': 'error',
+      },
+    },
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
+      rules: {
+        // TODO: look into enabling these eventually
+        '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/prefer-function-type': 'off',
+
+        // Specific 'recommended' rules we alter
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/no-require-imports': 'off',
+        '@typescript-eslint/no-empty-object-type': 'off',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
+        ],
+      },
+    },
+    {
+      files: ['*.test.*', '**/__mocks__/**'],
+      env: {
+        node: true,
+        es6: true,
+        commonjs: true,
+        jest: true,
+      },
+    },
+    {
+      files: [
+        '.babelrc.js',
+        'babel.config.js',
+        '.eslintrc.js',
+        '*.config.js',
+        '*.config.cjs',
+        'jest.setup.js',
+      ],
+      env: {
+        node: true,
+        commonjs: true,
+        jest: true,
+      },
+    },
+    {
+      files: [
+        'web/src/**/*.routeHooks.{js,ts}',
+        'web/src/entry.server.{jsx,tsx}',
+      ],
+      rules: { 'no-restricted-imports': 'off' },
+    },
+  ],
+}

package/shared.mjs

@@ -26,10 +26,7 @@ import tseslint from 'typescript-eslint'
 
 import cedarjsPlugin from '@cedarjs/eslint-plugin'
 
-// Using a const here rather than directly doing `export default [...]` becuase
-// otherwise the JSDoc below wouldn't attach it's type info properly
-/** @type {import('eslint').Linter.FlatConfig[]} */
-const sharedConfigs = [
+export default [
   // Base recommended config
   js.configs.recommended,
 
@@ -273,5 +270,3 @@ const sharedConfigs = [
     },
   },
 ]
-
-export default sharedConfigs