@4mbl/lint 0.16.0 → 1.0.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @4mbl/lint
 
+## 1.0.0-beta.1
+
+### Patch Changes
+
+- 2c338b1: fix(lint): re-export `OxlintConfig` to make config portable
+
+## 1.0.0-beta.0
+
+### Major Changes
+
+- c65e34e: Add CLI to allow default arguments and easier tool migration in the future
+- c65e34e: Migrate from eslint to oxlint
+
 ## 0.16.0
 
 ### Minor Changes

package/README.md

@@ -2,12 +2,17 @@
 
 > Linting configuration for various environments.
 
-* [Usage](#usage)
-* [Available templates](#available-templates)
-* [Versioning](#versioning)
+- [Usage](#usage)
+  - [Running `lint` CLI wrapper](#running-lint-cli-wrapper)
+  - [Running `oxlint` directly](#running-oxlint-directly)
+- [Available templates](#available-templates)
+- [Versioning](#versioning)
 
 ---
 
+> [!NOTE]
+> This package currently uses [oxlint](https://www.npmjs.com/package/oxlint) as the underlying linting tool. That may change in a future major release.
+
 ## Usage
 
 Install the [`@4mbl/lint`](https://www.npmjs.com/package/@4mbl/lint) package.
@@ -16,27 +21,44 @@ Install the [`@4mbl/lint`](https://www.npmjs.com/package/@4mbl/lint) package.
 npm install -D @4mbl/lint
 ```
 
-Create a `eslint.config.ts` file in the root of your project with the desired configuration. This package currently uses eslint. That might change in a future major release.
+Create a `oxlint.config.ts` file for your package. If you are using a monorepo, create a `oxlint.config.ts` for each package in the monorepo.
 
 ```js
-import defaultConfig, { defineConfig } from '@4mbl/lint/next'; // <-- change `next` to the desired template
+import defineConfig from '@4mbl/lint/next'; // <-- change `next` to the desired template
 
-export default defineConfig([...defaultConfig]);
+export default defineConfig();
 ```
 
-Set a script that uses the linting package.
+### Running `lint` CLI wrapper
+
+This is the recommended way as it abstracts away the underlying linting package and allows us to change it in the future. While we try to keep the CLI wrapper interface stable between possible tooling changes, it is inevitable to have breaking changes if the underlying tooling changes.
+
+Set a script that uses the linting CLI wrapper in your `package.json`. While it may be tempting to just call `lint` directly in CI or locally, it is recommended to use a script as it allows additional arguments to be passed to the CLI wrapper.
 
 ```shell
-npm pkg set scripts.lint="eslint src"
+npm pkg set scripts.lint="lint"
+```
+
+The CLI wrapper uses the `src` directory by default and the following arguments:
+
+- `--max-warnings=0`
+- `--report-unused-disable-directives`
+
+These arguments can be overridden by passing them explicitly to the CLI wrapper.
+
+### Running `oxlint` directly
+
+```shell
+npm pkg set scripts.lint="oxlint src"
 ```
 
 You may need to explicitly allow the underlying linting packages to be used by your scripts.
 
-For example, when using pnpm, you need to set `publicHoistPattern` in your `pnpm-workspace.yaml` for ESLint.
+For example, when using pnpm, you need to set `publicHoistPattern` in your `pnpm-workspace.yaml`.
 
 ```yaml
 publicHoistPattern:
-  - eslint
+  - oxlint
 ```
 
 ## Available templates
@@ -49,8 +71,6 @@ These are the currently available config templates.
 
 ## Versioning
 
-_Until v1.0.0 is released, breaking changes may be introduced in minor releases without prior warnings._
-
 The package follows the following versioning scheme: `X.Y.Z`.
 
 - `X` - Reserved for linting provider changes as those might cause wider backwards compatibility issues.

package/bin/cli.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+
+import { spawnSync } from 'node:child_process';
+
+const args = process.argv.slice(2);
+
+const hasPath = args.some((a) => !a.startsWith('-'));
+const hasMaxWarn = args.some((a) => a.startsWith('--max-warnings'));
+const hasReportUnused = args.some((a) =>
+  a.startsWith('--report-unused-disable-directives'),
+);
+
+const finalArgs = [
+  ...(hasPath ? [] : ['src']),
+  ...(hasMaxWarn ? [] : ['--max-warnings=0']),
+  ...(hasReportUnused ? [] : ['--report-unused-disable-directives']),
+  ...args,
+];
+
+const result = spawnSync('oxlint', finalArgs, {
+  stdio: 'inherit',
+  shell: true,
+});
+
+process.exit(result.status ?? 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4mbl/lint",
-  "version": "0.16.0",
+  "version": "1.0.0-beta.1",
   "description": "Linting configuration for various environments.",
   "type": "module",
   "author": "4mbl",
@@ -11,6 +11,9 @@
     "./node": "./src/node.ts",
     "./react": "./src/react.ts"
   },
+  "bin": {
+    "lint": "./bin/cli.js"
+  },
   "files": [
     "src",
     "package.json",
@@ -26,16 +29,18 @@
     "lint"
   ],
   "dependencies": {
-    "@eslint/js": "^10.0.1",
-    "eslint": "^10.0.2",
-    "eslint-config-next": "^16.1.6",
-    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
     "jiti": "^2.6.1",
-    "typescript-eslint": "^8.56.1"
+    "oxlint": "^1.56.0",
+    "oxlint-tsgolint": "^0.17.0"
+  },
+  "devDependencies": {
+    "@4mbl/tsconfig": "4.4.0"
   },
-  "scripts": {}
+  "scripts": {
+    "build": "tsc --noEmit"
+  }
 }

package/src/base.ts

@@ -0,0 +1,134 @@
+import { defineConfig, type OxlintConfig } from 'oxlint';
+
+type BaseOptions = {
+  uiPath: string;
+};
+
+// const DEFAULT_OPTIONS: BaseOptions = {};
+
+export default function (_options?: Partial<BaseOptions>) {
+  // const opts = { ...DEFAULT_OPTIONS, ...options };
+
+  return defineConfig({
+    plugins: ['typescript', 'unicorn'],
+    jsPlugins: [],
+    categories: {
+      correctness: 'off',
+    },
+    env: {
+      builtin: true,
+    },
+    options: {
+      typeAware: true,
+    },
+    rules: {
+      'constructor-super': 'error',
+      'for-direction': 'error',
+      'getter-return': 'error',
+      'no-async-promise-executor': 'error',
+      'no-case-declarations': 'error',
+      'no-class-assign': 'error',
+      'no-compare-neg-zero': 'error',
+      'no-cond-assign': 'error',
+      'no-const-assign': 'error',
+      'no-constant-binary-expression': 'error',
+      'no-constant-condition': 'error',
+      'no-control-regex': 'error',
+      'no-debugger': 'error',
+      'no-delete-var': 'error',
+      'no-dupe-class-members': 'error',
+      'no-dupe-else-if': 'error',
+      'no-dupe-keys': 'error',
+      'no-duplicate-case': 'error',
+      'no-empty': 'error',
+      'no-empty-character-class': 'error',
+      'no-empty-pattern': 'error',
+      'no-empty-static-block': 'error',
+      'no-ex-assign': 'error',
+      'no-extra-boolean-cast': 'error',
+      'no-fallthrough': 'error',
+      'no-func-assign': 'error',
+      'no-global-assign': 'error',
+      'no-import-assign': 'error',
+      'no-invalid-regexp': 'error',
+      'no-irregular-whitespace': 'error',
+      'no-loss-of-precision': 'error',
+      'no-misleading-character-class': 'error',
+      'no-new-native-nonconstructor': 'error',
+      'no-nonoctal-decimal-escape': 'error',
+      'no-obj-calls': 'error',
+      'no-prototype-builtins': 'error',
+      'no-redeclare': 'error',
+      'no-regex-spaces': 'error',
+      'no-self-assign': 'error',
+      'no-setter-return': 'error',
+      'no-shadow-restricted-names': 'error',
+      'no-sparse-arrays': 'error',
+      'no-this-before-super': 'error',
+      'no-undef': 'error',
+      'no-unreachable': 'error',
+      'no-unsafe-finally': 'error',
+      'no-unsafe-negation': 'error',
+      'no-unsafe-optional-chaining': 'error',
+      'no-unused-labels': 'error',
+      'no-unused-private-class-members': 'error',
+      'no-unused-vars': 'warn',
+      'no-useless-backreference': 'error',
+      'no-useless-catch': 'error',
+      'no-useless-escape': 'error',
+      'no-with': 'error',
+      'require-yield': 'error',
+      'use-isnan': 'error',
+      'valid-typeof': 'error',
+      '@typescript-eslint/ban-ts-comment': 'error',
+      'no-array-constructor': 'error',
+      '@typescript-eslint/no-duplicate-enum-values': 'error',
+      '@typescript-eslint/no-empty-object-type': 'error',
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-extra-non-null-assertion': 'error',
+      '@typescript-eslint/no-misused-new': 'error',
+      '@typescript-eslint/no-namespace': 'error',
+      '@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
+      '@typescript-eslint/no-require-imports': 'error',
+      '@typescript-eslint/no-this-alias': 'error',
+      '@typescript-eslint/no-unnecessary-type-constraint': 'error',
+      '@typescript-eslint/no-unsafe-declaration-merging': 'error',
+      '@typescript-eslint/no-unsafe-function-type': 'error',
+      'no-unused-expressions': 'warn',
+      '@typescript-eslint/no-wrapper-object-types': 'error',
+      '@typescript-eslint/prefer-as-const': 'error',
+      '@typescript-eslint/prefer-namespace-keyword': 'error',
+      '@typescript-eslint/triple-slash-reference': 'error',
+    },
+    overrides: [
+      {
+        files: ['**/*.{ts,tsx,mts,cts}'],
+        rules: {
+          'constructor-super': 'off',
+          'getter-return': 'off',
+          'no-class-assign': 'off',
+          'no-const-assign': 'off',
+          'no-dupe-class-members': 'off',
+          'no-dupe-keys': 'off',
+          'no-func-assign': 'off',
+          'no-import-assign': 'off',
+          'no-new-native-nonconstructor': 'off',
+          'no-obj-calls': 'off',
+          'no-redeclare': 'off',
+          'no-setter-return': 'off',
+          'no-this-before-super': 'off',
+          'no-undef': 'off',
+          'no-unreachable': 'off',
+          'no-unsafe-negation': 'off',
+          'no-var': 'error',
+          'no-with': 'off',
+          'prefer-const': 'error',
+          'prefer-rest-params': 'error',
+          'prefer-spread': 'error',
+        },
+      },
+    ],
+  });
+}
+
+export type { OxlintConfig };

package/src/next.ts

@@ -1,34 +1,81 @@
-// @ts-nocheck
-import js from '@eslint/js';
-import nextVitals from 'eslint-config-next/core-web-vitals';
-import nextTs from 'eslint-config-next/typescript';
-import prettier from 'eslint-config-prettier/flat';
-import * as reactCompiler from 'eslint-plugin-react-compiler';
-import reactHooks from 'eslint-plugin-react-hooks';
-import { type Config, defineConfig, globalIgnores } from 'eslint/config';
-import tseslint from 'typescript-eslint';
+import { defineConfig, type OxlintConfig } from 'oxlint';
+import react, { type ReactOptions } from './react.ts';
+import reactRefresh from 'eslint-plugin-react-refresh';
 
-export { type Config, defineConfig };
+type NextOptions = ReactOptions & {
+  /**
+   * Sets the parent directory of UI components to ignore them in react-refresh.
+   * This allows multiple exports from the same file, which is common when using libraries like class-variance-authority.
+   *
+   * Set to `null` to disable react-refresh suppression for UI components.
+   *
+   * Defaults to `src/components/ui/`.
+   */
+  uiPath: string | null;
+};
 
-export default defineConfig([
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    languageOptions: {
-      parserOptions: {
-        tsconfigRootDir: (import.meta as any).dirname,
-      },
-    },
-  },
-  ...nextVitals,
-  ...nextTs,
-  reactHooks.configs.flat.recommended,
-  reactCompiler.configs.recommended,
-  {
+const DEFAULT_OPTIONS: NextOptions = { uiPath: 'src/components/ui/' };
+
+export default function (options?: Partial<NextOptions>) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+
+  return defineConfig({
+    extends: [react(options)],
+    plugins: ['nextjs'],
     rules: {
-      'react-compiler/react-compiler': 'error',
+      '@next/next/google-font-display': 'warn',
+      '@next/next/google-font-preconnect': 'warn',
+      '@next/next/next-script-for-ga': 'warn',
+      '@next/next/no-async-client-component': 'warn',
+      '@next/next/no-before-interactive-script-outside-document': 'warn',
+      '@next/next/no-css-tags': 'warn',
+      '@next/next/no-head-element': 'warn',
+      '@next/next/no-html-link-for-pages': 'error',
+      '@next/next/no-page-custom-font': 'warn',
+      '@next/next/no-styled-jsx-in-document': 'warn',
+      '@next/next/no-sync-scripts': 'error',
+      '@next/next/no-title-in-document-head': 'warn',
+      '@next/next/no-typos': 'warn',
+      '@next/next/no-unwanted-polyfillio': 'warn',
+      '@next/next/inline-script-id': 'error',
+      '@next/next/no-assign-module-variable': 'error',
+      '@next/next/no-document-import-in-page': 'error',
+      '@next/next/no-duplicate-head': 'error',
+      '@next/next/no-head-import-in-document': 'error',
+      '@next/next/no-script-component-in-head': 'error',
     },
-  },
-  prettier,
-  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
-]) satisfies Config[];
+    ignorePatterns: ['.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+    overrides: [
+      // ignores warnings for special exports in page and layout files
+      // https://github.com/ArnaudBarre/eslint-plugin-react-refresh?tab=readme-ov-file#next-config
+      {
+        files: ['**/*.{js,jsx,mjs,ts,tsx,mts,cts}'],
+        rules: {
+          'react-refresh-js/only-export-components': [
+            'error',
+            {
+              allowExportNames: (reactRefresh.configs.next.rules as any)[
+                'react-refresh/only-export-components'
+              ][1]['allowExportNames'],
+            },
+          ],
+        },
+      },
+      opts.uiPath === null
+        ? { files: [], rules: {} }
+        : {
+            files: [
+              `${opts.uiPath}/**/*.{js,jsx,mjs,ts,tsx,mts,cts}`.replaceAll(
+                '//',
+                '/',
+              ),
+            ],
+            rules: {
+              'react-refresh-js/only-export-components': 'off',
+            },
+          },
+    ],
+  });
+}
+
+export type { OxlintConfig };

package/src/node.ts

@@ -1,14 +1,15 @@
-import js from '@eslint/js';
-import { defineConfig, globalIgnores, type Config } from 'eslint/config';
-import globals from 'globals';
-import tseslint from 'typescript-eslint';
-
-export { type Config, defineConfig };
-
-export default defineConfig([
-  globalIgnores(['dist/**']),
-  { files: ['**/*.{js,mjs,cjs,ts}'] },
-  { languageOptions: { globals: globals.node } },
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-]) satisfies Config[];
+import { defineConfig, type OxlintConfig } from 'oxlint';
+import base from './base.ts';
+
+type NodeOptions = {};
+
+// const DEFAULT_OPTIONS: NodeOptions = {};
+
+export default function (_options?: Partial<NodeOptions>) {
+  // const opts = { ...DEFAULT_OPTIONS, ...options };
+  return defineConfig({
+    extends: [base()],
+  });
+}
+
+export type { OxlintConfig };

package/src/react.ts

@@ -1,34 +1,76 @@
-import js from '@eslint/js';
-import prettier from 'eslint-config-prettier/flat';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import { defineConfig, globalIgnores, type Config } from 'eslint/config';
-import globals from 'globals';
-import tseslint from 'typescript-eslint';
+import { defineConfig, type OxlintConfig } from 'oxlint';
+import base from './base.ts';
 
-export { type Config, defineConfig };
+export type ReactOptions = {};
 
-export default defineConfig([
-  js.configs.recommended,
-  tseslint.configs.recommended,
+// const DEFAULT_OPTIONS: ReactOptions = {};
 
-  reactHooks.configs.flat.recommended,
-  reactRefresh.configs.recommended,
+export default function (_options?: Partial<ReactOptions>) {
+  // const opts = { ...DEFAULT_OPTIONS, ...options };
 
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
+  return defineConfig({
+    extends: [base()],
+    plugins: ['react'],
+    jsPlugins: [
+      { name: 'react-hooks-js', specifier: 'eslint-plugin-react-hooks' },
+      { name: 'react-refresh-js', specifier: 'eslint-plugin-react-refresh' },
+      { name: 'react-compiler-js', specifier: 'eslint-plugin-react-compiler' },
+    ],
     rules: {
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
+      'react-hooks-js/rules-of-hooks': 'error',
+      'react-hooks-js/exhaustive-deps': 'warn',
+      'react-hooks-js/set-state-in-effect': 'warn',
+      'react-refresh-js/only-export-components': 'error',
+      'react-compiler-js/react-compiler': 'error',
     },
-  },
+    overrides: [
+      {
+        files: ['**/*.{js,jsx,mjs,ts,tsx,mts,cts}'],
+        rules: {
+          'react/display-name': 'error',
+          'react/jsx-key': 'error',
+          'react/jsx-no-comment-textnodes': 'error',
+          'react/jsx-no-duplicate-props': 'error',
+          'react/jsx-no-target-blank': 'off',
+          'react/jsx-no-undef': 'error',
+          'react/no-children-prop': 'error',
+          'react/no-danger-with-children': 'error',
+          // "react/no-deprecated": "error", // not implemented yet in oxlint
+          'react/no-direct-mutation-state': 'error',
+          'react/no-find-dom-node': 'error',
+          'react/no-is-mounted': 'error',
+          'react/no-render-return-value': 'error',
+          'react/no-string-refs': 'error',
+          'react/no-unescaped-entities': 'error',
+          'react/no-unknown-property': 'off',
+          'react/no-unsafe': 'off',
+          'react/react-in-jsx-scope': 'off',
+          'react/require-render-return': 'error',
+          'import/no-anonymous-default-export': 'warn',
+          'jsx-a11y/alt-text': ['warn', { elements: ['img'], img: ['Image'] }],
+          'jsx-a11y/aria-props': 'warn',
+          'jsx-a11y/aria-proptypes': 'warn',
+          'jsx-a11y/aria-unsupported-elements': 'warn',
+          'jsx-a11y/role-has-required-aria-props': 'warn',
+          'jsx-a11y/role-supports-aria-props': 'warn',
+        },
+        globals: {
+          AudioWorkletGlobalScope: 'readonly',
+          AudioWorkletProcessor: 'readonly',
+          currentFrame: 'readonly',
+          currentTime: 'readonly',
+          registerProcessor: 'readonly',
+          sampleRate: 'readonly',
+          WorkletGlobalScope: 'readonly',
+        },
+        plugins: ['import', 'jsx-a11y'],
+        env: {
+          browser: true,
+          node: true,
+        },
+      },
+    ],
+  });
+}
 
-  prettier,
-]) satisfies Config[];
+export type { OxlintConfig };