@cedarjs/eslint-config 2.0.4-next.0 → 2.0.4-next.16

package/README.md

@@ -7,11 +7,14 @@
   - [Package Leads](#package-leads)
   - [Roadmap](#roadmap)
   - [Contributing](#contributing)
-  - [Overriding Default Configuration](#overriding-default-configuration)
+  - [Usage (Flat Config - Recommended)](#usage-flat-config---recommended)
+  - [Overriding Default Configuration (Flat Config)](#overriding-default-configuration-flat-config)
+  - [Migration Guide (Optional)](#migration-guide-optional)
+  - [Legacy Configuration (Still Supported)](#legacy-configuration-still-supported)
 
 ## Purpose and Vision
 
-This package contains a shareable set of ESLint rules and configuration that can be re-used on all RedwoodJS projects. The framework [`eslint-config`](https://github.com/redwoodjs/redwood/tree/main/packages/eslint-config) package is used both for framework configuration and RedwoodJS app (created with the [CRWA](https://github.com/redwoodjs/redwood/tree/main/packages/create-cedar-app) package) configuration.
+This package contains a shareable set of ESLint rules and configuration that can be re-used on all CedarJS projects. The framework [`eslint-config`](https://github.com/cedarjs/cedar/tree/main/packages/eslint-config) package is used both for framework configuration and CedarJS app (created with the [create-cedar-app](https://github.com/cedarjs/cedar/tree/main/packages/create-cedar-app) package) configuration.
 
 Our configuration uses recommended rule presets, including those from [ESLint](https://eslint.org/docs/rules/), [React](https://www.npmjs.com/package/eslint-plugin-react#list-of-supported-rules), the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html), and [Jest](https://github.com/testing-library/eslint-plugin-jest-dom#supported-rules). We also override the presets with some stylistic preferences. Some of them are:
 
@@ -34,25 +37,120 @@ Peter Pistorius (@peterp), David Price (@thedavidprice), Dominic Saadi (@jtoar),
 
 This package doesn't depend on other Redwood Framework packages. To contribute, you should be familiar with the ESLint package. Keep in mind that any rules added should not conflict with code formatting tools (e.g. [Prettier](https://prettier.io/docs/en/integrating-with-linters.html)).
 
-## Overriding Default Configuration
+## Usage (Flat Config - Recommended)
 
-In a Redwood App, you can override default config in your root `package.json` file by adding the rules after the include for this package:
+CedarJS uses ESLint's flat config format by default. Create an `eslint.config.js` file in your project root:
 
 ```javascript
-// redwood-app/package.json
-"eslintConfig": {
-  "extends": "@redwoodjs/eslint-config",
-  "root": true,
-  "jsx-a11y/no-onchange": "off",
-},
+// cedar-app/eslint.config.js
+import cedarConfig from '@cedarjs/eslint-config'
+
+export default await cedarConfig()
 ```
 
-If you need script in your configuration, you can remove the `eslintConfig` block from your root `package.json` file and add an `.eslintrc.js` file:
+Note: The config is async because it needs to load your Cedar project configuration.
+
+## Overriding Default Configuration (Flat Config)
+
+To override rules in your CedarJS app, add additional config objects after the Cedar config:
 
 ```javascript
-// redwood-app/.eslintrc.js
+// cedar-app/eslint.config.js
+import cedarConfig from '@cedarjs/eslint-config'
+
+export default [
+  ...(await cedarConfig()),
+  {
+    rules: {
+      'jsx-a11y/no-onchange': 'off',
+      'no-console': 'warn',
+    },
+  },
+]
+```
+
+You can also add file-specific overrides:
+
+```javascript
+// cedar-app/eslint.config.js
+import cedarConfig from '@cedarjs/eslint-config'
+
+export default [
+  ...(await cedarConfig()),
+  {
+    files: ['web/src/**/*.tsx'],
+    rules: {
+      'react/prop-types': 'off',
+    },
+  },
+]
+```
+
+To ignore specific files or directories:
+
+```javascript
+// cedar-app/eslint.config.js
+import cedarConfig from '@cedarjs/eslint-config'
+
+export default [
+  {
+    ignores: ['scripts/**', 'generated/**'],
+  },
+  ...(await cedarConfig()),
+]
+```
+
+## Migration Guide (Optional)
+
+**The legacy `.eslintrc.js` format still works** - you don't have to migrate. However, if you want to use the new flat config format, follow these steps:
+
+1. **Create a new flat config file** in your project root:
+
+   ```javascript
+   // eslint.config.mjs (for CommonJS projects)
+   // or eslint.config.js (for ESM projects with "type": "module")
+   import cedarConfig from '@cedarjs/eslint-config'
+
+   export default await cedarConfig()
+   ```
+
+2. **Remove old config**:
+   - Delete `.eslintrc.js` if it exists
+   - Remove `eslintConfig` field from `package.json` if it exists
+
+3. **Update your package.json scripts** (if needed):
+
+   ```json
+   {
+     "scripts": {
+       "lint": "eslint .",
+       "lint:fix": "eslint . --fix"
+     }
+   }
+   ```
+
+4. **Migrate custom rules**: If you had custom rules in your old config, add them to your new flat config:
+   ```javascript
+   export default [
+     ...(await cedarConfig()),
+     {
+       rules: {
+         // Your custom rules here
+       },
+     },
+   ]
+   ```
+
+That's it! Your linting should work the same as before.
+
+## Legacy Configuration (Still Supported)
+
+The legacy `.eslintrc.js` format is still fully supported. You can continue using it:
+
+```javascript
+// cedar-app/.eslintrc.js
 module.exports = {
-  extends: ['@redwoodjs/eslint-config'],
+  extends: ['@cedarjs/eslint-config'],
   root: true,
   rules: {
     'jsx-a11y/no-onchange': 'off',
@@ -60,15 +158,15 @@ module.exports = {
 }
 ```
 
-By default, ESLint will recurse through all project directories looking for configuration files and directives, and override those specified in multiple places according to a prioritization formula. The `root` directive tells ESLint to stop searching for configuration lower in the tree at the file this directive is encountered.
-
-In a different Redwood Framework package or in a Redwood App, you can provide configuration that applies only to that package or side by omitting the `root` directive. For example, to apply a directive only to the client code of an app:
+Or in `package.json`:
 
-```javascript
-// e.g. redwood/packages/auth or redwood-app/web/package.json
-"eslintConfig": {
-  "jsx-a11y/no-onchange": "off",
-},
+```json
+{
+  "eslintConfig": {
+    "extends": "@cedarjs/eslint-config",
+    "root": true
+  }
+}
 ```
 
-In this case, ESLint will still load the configuration from the `@redwoodjs/eslint-config` package as the default value of `root` is `false`.
+**Note:** While both formats are supported, we recommend migrating to flat config when convenient. See the [Migration Guide](#migration-guide-optional) above.

package/index.mjs

@@ -0,0 +1,180 @@
+// This is the ESLint configuration used by Cedar projects.
+// Shared eslint config (projects and framework) is located in ./shared.mjs
+// Framework main config is in monorepo root ./eslint.config.js
+
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'
+import reactCompilerPlugin from 'eslint-plugin-react-compiler'
+import globals from 'globals'
+
+import {
+  getCommonPlugins,
+  getApiSideDefaultBabelConfig,
+  getWebSideDefaultBabelConfig,
+} from '@cedarjs/babel-config'
+import { getConfig, isTypeScriptProject } from '@cedarjs/project-config'
+
+import sharedConfigs from './shared.mjs'
+
+// Note: This config is async to support getConfig()
+export default async function createConfig() {
+  const config = await 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['react-compiler'] = reactCompilerPlugin
+    rules['react-compiler/react-compiler'] = 2
+  }
+
+  const configs = [
+    ...sharedConfigs,
+    {
+      ignores: ['!.storybook/'],
+    },
+    {
+      files: ['**/*.js', '**/*.jsx'],
+      languageOptions: {
+        parserOptions: {
+          requireConfigFile: false,
+          babelOptions: getProjectBabelOptions(),
+        },
+      },
+      plugins,
+      rules,
+    },
+  ]
+
+  // Add jsx-a11y if enabled
+  if (config.web.a11y) {
+    configs.push({
+      plugins: {
+        'jsx-a11y': jsxA11yPlugin,
+      },
+      rules: {
+        ...jsxA11yPlugin.configs.recommended.rules,
+      },
+    })
+  }
+
+  // Routes.js/jsx/tsx specific config
+  configs.push({
+    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 configuration
+  configs.push({
+    files: ['api/src/**'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        gql: 'readonly',
+        context: 'readonly',
+      },
+      sourceType: 'module',
+    },
+  })
+
+  // API services type annotations
+  configs.push({
+    files: ['api/src/services/**/*.ts'],
+    plugins: {
+      '@cedarjs': sharedConfigs[1].plugins['@cedarjs'],
+    },
+    rules: {
+      '@cedarjs/service-type-annotations': 'off',
+    },
+  })
+
+  // Seed and scripts
+  configs.push({
+    files: ['api/db/seed.js', 'scripts/**'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.commonjs,
+      },
+      sourceType: 'commonjs',
+    },
+  })
+
+  // Web side configuration
+  configs.push({
+    files: ['web/src/**'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        React: 'readonly',
+        gql: 'readonly',
+        process: 'readonly',
+        require: 'readonly',
+        // Developers should use `global` instead of window
+        window: 'off',
+      },
+      sourceType: 'module',
+    },
+  })
+
+  // Test, stories, scenarios, and mock files
+  configs.push({
+    files: [
+      '*.test.*',
+      '**/__mocks__/**',
+      '*.scenarios.*',
+      '*.stories.*',
+      '*.mock.*',
+    ],
+    languageOptions: {
+      globals: {
+        mockGraphQLQuery: 'readonly',
+        mockGraphQLMutation: 'readonly',
+        mockCurrentUser: 'readonly',
+        scenario: 'readonly',
+        defineScenario: 'readonly',
+      },
+    },
+  })
+
+  return configs
+}

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "@cedarjs/eslint-config",
-  "version": "2.0.4-next.0+00038dc70",
+  "version": "2.0.4-next.16+45e20cca7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cedarjs/cedar.git",
     "directory": "packages/eslint-config"
   },
   "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    },
+    "./shared": {
+      "import": "./shared.mjs",
+      "require": "./shared.js"
+    }
+  },
   "main": "index.js",
   "scripts": {
     "build": "echo 'Nothing to build..'",
@@ -16,9 +26,11 @@
     "@babel/core": "^7.26.10",
     "@babel/eslint-parser": "7.27.5",
     "@babel/eslint-plugin": "7.27.1",
-    "@cedarjs/eslint-plugin": "2.0.4-next.0+00038dc70",
-    "@cedarjs/internal": "2.0.4-next.0+00038dc70",
-    "@cedarjs/project-config": "2.0.4-next.0+00038dc70",
+    "@cedarjs/babel-config": "2.0.4-next.16+45e20cca7",
+    "@cedarjs/eslint-plugin": "2.0.4-next.16+45e20cca7",
+    "@cedarjs/internal": "2.0.4-next.16+45e20cca7",
+    "@cedarjs/project-config": "2.0.4-next.16+45e20cca7",
+    "@eslint/js": "8.57.1",
     "@typescript-eslint/eslint-plugin": "8.44.0",
     "@typescript-eslint/parser": "8.44.0",
     "eslint": "8.57.1",
@@ -30,8 +42,10 @@
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.36.1",
+    "eslint-plugin-react-compiler": "19.1.0-rc.1",
     "eslint-plugin-react-hooks": "4.6.2",
-    "prettier": "3.6.2"
+    "prettier": "3.6.2",
+    "typescript-eslint": "8.44.0"
   },
   "devDependencies": {
     "@babel/cli": "7.27.2",
@@ -40,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "00038dc70453efcdfbf5d3b23fe50aaaf4f9de70"
+  "gitHead": "45e20cca7a9b55ac486af5503f118df99311c309"
 }

package/shared.mjs

@@ -0,0 +1,265 @@
+// 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
+
+import babelParser from '@babel/eslint-parser'
+import babelPlugin from '@babel/eslint-plugin'
+import js from '@eslint/js'
+import importPlugin from 'eslint-plugin-import'
+import jestDomPlugin from 'eslint-plugin-jest-dom'
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'
+import prettierPlugin from 'eslint-plugin-prettier'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+
+import cedarjsPlugin from '@cedarjs/eslint-plugin'
+
+export default [
+  // Base recommended config
+  js.configs.recommended,
+
+  // Base configuration
+  {
+    plugins: {
+      '@babel': babelPlugin,
+      prettier: prettierPlugin,
+      import: importPlugin,
+      'jsx-a11y': jsxA11yPlugin,
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      'jest-dom': jestDomPlugin,
+      '@cedarjs': cedarjsPlugin,
+    },
+    languageOptions: {
+      parser: babelParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    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/internal-regex': '^src/',
+    },
+    rules: {
+      // React recommended rules
+      ...reactPlugin.configs.recommended.rules,
+      // Jest DOM recommended rules
+      ...jestDomPlugin.configs.recommended.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/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',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  // React hooks rules for JSX/TSX files (excluding api)
+  {
+    files: ['**/*.tsx', '**/*.js', '**/*.jsx'],
+    ignores: ['api/src/**'],
+    plugins: {
+      'react-hooks': reactHooksPlugin,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+    },
+  },
+  // TypeScript-specific configuration
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: tseslint.parser,
+      globals: {
+        ...globals.browser,
+        JSX: 'readonly',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+    },
+    rules: {
+      ...tseslint.configs.recommended.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: '^_' },
+      ],
+      // Disable base rule as it conflicts with @typescript-eslint/no-unused-vars
+      'no-unused-vars': 'off',
+    },
+  },
+  // Test files
+  {
+    files: [
+      '**/*.test.*',
+      '**/__mocks__/**',
+      '**/*.scenarios.*',
+      '**/*.stories.*',
+      '**/*.mock.*',
+    ],
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+        // Cedar test globals
+        mockCurrentUser: 'readonly',
+        defineScenario: 'readonly',
+        scenario: 'readonly',
+        describeScenario: 'readonly',
+        mockGraphQLQuery: 'readonly',
+        mockGraphQLMutation: 'readonly',
+      },
+    },
+  },
+  // Config files
+  {
+    files: [
+      '.babelrc.js',
+      'babel.config.js',
+      '.eslintrc.js',
+      '**/*.config.js',
+      '**/*.config.cjs',
+      '**/*.config.mjs',
+      '**/jest.setup.js',
+    ],
+    languageOptions: {
+      parser: babelParser,
+      parserOptions: {
+        requireConfigFile: false,
+        ecmaVersion: 'latest',
+      },
+      globals: {
+        ...globals.node,
+        ...globals.commonjs,
+      },
+      sourceType: 'commonjs',
+    },
+  },
+  // Route hooks and entry server - allow $api imports
+  {
+    files: [
+      'web/src/**/*.routeHooks.{js,ts}',
+      'web/src/entry.server.{jsx,tsx}',
+    ],
+    rules: {
+      'no-restricted-imports': 'off',
+    },
+  },
+]