@cedarjs/eslint-config 0.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Cedar
+
+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.

package/README.md

@@ -0,0 +1,74 @@
+# ESLint Config
+
+<!-- toc -->
+
+- [ESLint Config](#eslint-config)
+  - [Purpose and Vision](#purpose-and-vision)
+  - [Package Leads](#package-leads)
+  - [Roadmap](#roadmap)
+  - [Contributing](#contributing)
+  - [Overriding Default Configuration](#overriding-default-configuration)
+
+## 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.
+
+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:
+
+- [No semicolons](https://eslint.org/docs/rules/semi) at the end of statements
+- [Trailing commas](https://eslint.org/docs/rules/comma-dangle) in object and array literals
+- [Use single quotes](https://eslint.org/docs/rules/quotes) on strings wherever possible
+- [Use parentheses](https://eslint.org/docs/rules/arrow-parens) around arrow function parameters
+- [Sort import declarations](https://eslint.org/docs/rules/sort-imports) by name
+- [Wrap block statements](https://eslint.org/docs/rules/curly) in curly braces
+
+## Package Leads
+
+Peter Pistorius (@peterp), David Price (@thedavidprice), Dominic Saadi (@jtoar), Daniel Choudhury (@dac09)
+
+## Roadmap
+
+- Lint for case-sensitive imports (issue [#2806](https://github.com/redwoodjs/redwood/issues/2806))
+
+## Contributing
+
+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
+
+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:
+
+```javascript
+// redwood-app/package.json
+"eslintConfig": {
+  "extends": "@redwoodjs/eslint-config",
+  "root": true,
+  "jsx-a11y/no-onchange": "off",
+},
+```
+
+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:
+
+```javascript
+// redwood-app/.eslintrc.js
+module.exports = {
+  extends: ['@redwoodjs/eslint-config'],
+  root: true,
+  rules: {
+    'jsx-a11y/no-onchange': 'off',
+  },
+}
+```
+
+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:
+
+```javascript
+// e.g. redwood/packages/auth or redwood-app/web/package.json
+"eslintConfig": {
+  "jsx-a11y/no-onchange": "off",
+},
+```
+
+In this case, ESLint will still load the configuration from the `@redwoodjs/eslint-config` package as the default value of `root` is `false`.

package/index.js

@@ -0,0 +1,142 @@
+// This is the ESLint configuration used by Redwood projects.
+// Shared eslint config (projects and framework) is located in ./shared.js
+// Framework main config is in monorepo root ./.eslintrc.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/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@cedarjs/eslint-config",
+  "version": "0.0.4",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cedarjs/cedar.git",
+    "directory": "packages/eslint-config"
+  },
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": {
+    "build": "echo 'Nothing to build..'",
+    "build:pack": "yarn pack -o cedar-eslint-config.tgz"
+  },
+  "dependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/eslint-parser": "7.25.7",
+    "@babel/eslint-plugin": "7.25.7",
+    "@cedarjs/eslint-plugin": "0.0.4",
+    "@cedarjs/internal": "0.0.4",
+    "@cedarjs/project-config": "0.0.4",
+    "@typescript-eslint/eslint-plugin": "8.19.1",
+    "@typescript-eslint/parser": "8.19.1",
+    "eslint": "8.57.1",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-babel-module": "5.3.2",
+    "eslint-plugin-babel": "5.3.1",
+    "eslint-plugin-import": "2.30.0",
+    "eslint-plugin-jest-dom": "4.0.3",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-react": "7.36.1",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "prettier": "3.5.3"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.26.4",
+    "typescript": "5.6.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "5b4f77f985bd86ee31ee7338312627accf0cb85b"
+}

package/shared.js

@@ -0,0 +1,201 @@
+// 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',
+    '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/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/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',
+        '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' },
+    },
+  ],
+}