@lunit/eslint-config 1.0.0 → 2.0.0

package/README.md

@@ -1,6 +1,8 @@
 # @lunit/eslint-config
 
-A TypeScript ESLint ruleset designed for lunit projects based on [@rushstack/eslint-config](https://github.com/microsoft/rushstack/tree/main/eslint/eslint-config).
+A TypeScript ESLint ruleset designed for Lunit projects based on [@rushstack/eslint-config](https://github.com/microsoft/rushstack/tree/main/eslint/eslint-config).
+
+This ESLint configuration is only available for TypeScript projects.
 
 ## Installation
 
@@ -10,72 +12,246 @@ npm install --save-dev @lunit/eslint-config
 
 ## Usage
 
-Referring to the [sapmple-project](./sample-project/) folder, create [eslint-config](./sample-project/eslint-config/) folder in the project repository root folder, add [index.js](./sample-project/eslint-config/index.js) file, and then extend the **eslint-config** folder to the [.eslintrc.cjs](./sample-project/.eslintrc.cjs) file.
+### Getting Started
 
-```shell
-# Project folder structure
-sample-project/
-├── .eslintrc.cjs
-└── eslint-config
-    ├── index.js
-    └── mixins
-        └── react.js
-```
+`@lunit/eslint-config v2.x` is configured using the ESLint Flat Config approach.
+
+For information regarding ESLint Flat Config, please refer to the relevant ESLint Blog post.
+- https://eslint.org/blog/2022/08/new-config-system-part-2/
+
+
+To use it, add @lunit/eslint-config to your eslint.config.js file as follows.
+If you are using TypeScript ESLint rules, please remove them.
+This is already being used in Rushstack ESLint, causing conflict issues.
+
+
+#### ESM
 
 ```javascript
-// .eslintrc.cjs
-module.exports = {
-  ...
-  extends: [
-    './eslint-config', // Extend common ESLint config
-  ],
-  settings: {
-    react: {
-      // Specifies the current React version (e.g. version: '18.2')
-      // If not specified (default 'detect'), the entire React library will be loaded,
-      // which may slow down the linting process.
-      version: 'detect',
+// eslint.config.js
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig, globalIgnores } from "eslint/config";
+import eslintConfig from '@lunit/eslint-config';
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
     },
   },
-  ...
-};
+  lunitEslintConfig,
+]);
 ```
 
-If necessary, add your own mixin to the [eslint-config/mixins](./sample-project/eslint-config/mixins/) folder and use it, or use the mixins in [@rushstack/eslint-config/mixins](https://github.com/microsoft/rushstack/tree/main/eslint/eslint-config/mixins). (Refer to [eslint-config/index.js](./sample-project/eslint-config/index.js))
+#### CommonJS
 
 ```javascript
-// eslint-config/index.js
-module.exports = {
-  ...
-  extends: [
-    // (required) Extend the @lunit/eslint-config.
-    // (@rushstack/eslint-config/profile/web-app is included by default.)
-    '@lunit/eslint-config',
-    // React mixin provided by rushstack (requires installation of @rushstack/eslint-config package)
-    // '@rushstack/eslint-config/mixins/react',
-    // You can create and use your own mixin as follows.
-    './mixins/react',
-  ],
-  ...
-};
+// eslint.config.cjs
+const js = require("@eslint/js");
+const  globals = require("globals");
+const reactHooks = require("eslint-plugin-react-hooks");
+const reactRefresh = require("eslint-plugin-react-refresh");
+const { defineConfig, globalIgnores } = require("eslint/config");
+const lunitEslintConfig = require('@lunit/eslint-config');
+
+module.exports = defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+  // You can add the ESLint Config rules as follows.
+  lunitEslintConfig,
+]);
 ```
 
-<!--
-To use [@rushstack/eslint-config/mixins/react](https://github.com/microsoft/rushstack/blob/main/eslint/eslint-config/mixins/react.js) mixin, you need to install the package as follow.
+> If you created the app using vite,
+> please refer to the information below.
 
-```shell
-npm install --save-dev @rushstack/eslint-config
+If the tsconfig.json file is separate and the actual rules are applied in `tsconfig.app.json`,
+please configure it as follows.
+
+rushstack eslint config internally follows the rules set in tsconfig,
+so you must link the corresponding JSON file.
+
+#### ESM
+```js
+// eslint.config.js
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig, globalIgnores } from "eslint/config";
+import eslintConfig from '@lunit/eslint-config';
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+  {
+    ...eslintConfig,
+    // You must integrate the tsconfig.app.json file applied to the actual ts and tsx files as shown below.
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.app.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  }
+]);
 ```
--->
 
-Refer to the default settings in [@lunit/eslint-config/index.js](./index.js) & [@rushstack/eslint-config/profile/web-app](https://github.com/microsoft/rushstack/blob/main/eslint/eslint-config/profile/_common.js) and add your own rules to the config if necessary.
-Any esconfig rule entries added must have a valid **RATIONALE**.
+#### CommonJS
 
-```javascript
-rules: {
-  ...
-  // RATIONALE : Enforce consistent function types for function components.
-  'react/function-component-definition': 'error',
-  ...
-},
+```js
+// eslint.config.cjs
+const js = require("@eslint/js");
+const  globals = require("globals");
+const reactHooks = require("eslint-plugin-react-hooks");
+const reactRefresh = require("eslint-plugin-react-refresh");
+const { defineConfig, globalIgnores } = require("eslint/config");
+const lunitEslintConfig = require('@lunit/eslint-config');
+
+module.exports = defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+  {
+    ...lunitEslintConfig,
+    // You must integrate the tsconfig.app.json file applied to the actual ts and tsx files as shown below.
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.app.json"],
+        tsconfigRootDir: __dirname,
+      },
+    },
+  }
+]);
+```
+
+### Advanced
+
+#### Override rushstack eslint rule
+
+If you wish to modify the Rushstack ESLint rule, please refer to the code below.
+
+#### ESM
+```js
+// eslint.config.js
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig, globalIgnores } from "eslint/config";
+import eslintConfig from '@lunit/eslint-config';
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+  {
+    // Using Spread Operator lunit Eslint Config
+    ...lunitEslintConfig,
+    rules: {
+      // Using Spread Operator lunit Eslint Config Rules
+      ...lunitEslintConfig.rules,
+      // And apply the target rule
+      '@rushstack/no-new-null': 'error',
+    },
+  }
+]);
 ```
+
+#### CommonJS
+
+```js
+// eslint.config.cjs
+const js = require("@eslint/js");
+const  globals = require("globals");
+const reactHooks = require("eslint-plugin-react-hooks");
+const reactRefresh = require("eslint-plugin-react-refresh");
+const { defineConfig, globalIgnores } = require("eslint/config");
+const lunitEslintConfig = require('@lunit/eslint-config');
+
+module.exports = defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+  {
+    // Using Spread Operator lunit Eslint Config
+    ...lunitEslintConfig,
+    rules: {
+      // Using Spread Operator lunit Eslint Config Rules
+      ...lunitEslintConfig.rules,
+      // And apply the target rule
+      '@rushstack/no-new-null': 'error',
+    },
+  }
+]);
+```
+
+#### Migrate 1.x to 2.x
+
+Since migration to the ESLint flat config is required,
+please refer to the official ESLint documentation guide below.
+
+- https://eslint.org/docs/latest/use/configure/migration-guide

package/dist/index.js

@@ -0,0 +1,110 @@
+"use strict";
+const react = require("@rushstack/eslint-config/flat/mixins/react.js");
+const webApp = require("@rushstack/eslint-config/flat/profile/web-app.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const react__namespace = /* @__PURE__ */ _interopNamespaceDefault(react);
+const webApp__namespace = /* @__PURE__ */ _interopNamespaceDefault(webApp);
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+function getAugmentedNamespace(n) {
+  if (Object.prototype.hasOwnProperty.call(n, "__esModule")) return n;
+  var f = n.default;
+  if (typeof f == "function") {
+    var a = function a2() {
+      var isInstance = false;
+      try {
+        isInstance = this instanceof a2;
+      } catch {
+      }
+      if (isInstance) {
+        return Reflect.construct(f, arguments, this.constructor);
+      }
+      return f.apply(this, arguments);
+    };
+    a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, "__esModule", { value: true });
+  Object.keys(n).forEach(function(k) {
+    var d = Object.getOwnPropertyDescriptor(n, k);
+    Object.defineProperty(a, k, d.get ? d : {
+      enumerable: true,
+      get: function() {
+        return n[k];
+      }
+    });
+  });
+  return a;
+}
+const require$$0 = /* @__PURE__ */ getAugmentedNamespace(react__namespace);
+const require$$1 = /* @__PURE__ */ getAugmentedNamespace(webApp__namespace);
+var eslintConfig;
+var hasRequiredEslintConfig;
+function requireEslintConfig() {
+  if (hasRequiredEslintConfig) return eslintConfig;
+  hasRequiredEslintConfig = 1;
+  const rushStackReactConfig = require$$0;
+  const rushStackWebAppConfig = require$$1;
+  function cleanConfig(config) {
+    if (Array.isArray(config)) {
+      return config.map(cleanConfig);
+    }
+    if (config && typeof config === "object" && config.default) {
+      return cleanConfig(config.default);
+    }
+    return config;
+  }
+  const cleanedExtends = [rushStackWebAppConfig, rushStackReactConfig].map(cleanConfig);
+  eslintConfig = {
+    files: ["**/*.ts", "**/*.tsx"],
+    extends: cleanedExtends,
+    rules: {
+      /**
+       * RATIONALE : The null type is universally used, so it is excluded.
+       * docs: https://www.npmjs.com/package/@rushstack/eslint-plugin
+       */
+      "@rushstack/no-new-null": "off",
+      /**
+       * RATIONALE : Rushstack's policy enforces explicit types for top-level variables for readability,
+       * but our project prefers to leverage TypeScript's type inference.
+       * docs: https://github.com/microsoft/rushstack/tree/main/eslint/eslint-plugin#rushstacktypedef-var
+       */
+      "@rushstack/typedef-var": "off",
+      /**
+       * RATIONALE : According to the documentation, it can be used in projects that use many classes,
+       * but it is unnecessary because the development pattern is functional.
+       * docs: https://typescript-eslint.io/rules/explicit-member-accessibility/
+       */
+      "@typescript-eslint/explicit-member-accessibility": "off",
+      /**
+       * RATIONALE : Depending on the situation, it may be better to leave the return type to type inference.
+       * docs: https://typescript-eslint.io/rules/explicit-function-return-type/
+       */
+      "@typescript-eslint/explicit-function-return-type": "off"
+    },
+    settings: {
+      react: {
+        version: "detect"
+      }
+    }
+  };
+  return eslintConfig;
+}
+var eslintConfigExports = requireEslintConfig();
+const index = /* @__PURE__ */ getDefaultExportFromCjs(eslintConfigExports);
+module.exports = index;

package/dist/index.mjs

@@ -0,0 +1,91 @@
+import * as react from "@rushstack/eslint-config/flat/mixins/react.js";
+import * as webApp from "@rushstack/eslint-config/flat/profile/web-app.js";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+function getAugmentedNamespace(n) {
+  if (Object.prototype.hasOwnProperty.call(n, "__esModule")) return n;
+  var f = n.default;
+  if (typeof f == "function") {
+    var a = function a2() {
+      var isInstance = false;
+      try {
+        isInstance = this instanceof a2;
+      } catch {
+      }
+      if (isInstance) {
+        return Reflect.construct(f, arguments, this.constructor);
+      }
+      return f.apply(this, arguments);
+    };
+    a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, "__esModule", { value: true });
+  Object.keys(n).forEach(function(k) {
+    var d = Object.getOwnPropertyDescriptor(n, k);
+    Object.defineProperty(a, k, d.get ? d : {
+      enumerable: true,
+      get: function() {
+        return n[k];
+      }
+    });
+  });
+  return a;
+}
+const require$$0 = /* @__PURE__ */ getAugmentedNamespace(react);
+const require$$1 = /* @__PURE__ */ getAugmentedNamespace(webApp);
+var eslintConfig;
+var hasRequiredEslintConfig;
+function requireEslintConfig() {
+  if (hasRequiredEslintConfig) return eslintConfig;
+  hasRequiredEslintConfig = 1;
+  const rushStackReactConfig = require$$0;
+  const rushStackWebAppConfig = require$$1;
+  function cleanConfig(config) {
+    if (Array.isArray(config)) {
+      return config.map(cleanConfig);
+    }
+    if (config && typeof config === "object" && config.default) {
+      return cleanConfig(config.default);
+    }
+    return config;
+  }
+  const cleanedExtends = [rushStackWebAppConfig, rushStackReactConfig].map(cleanConfig);
+  eslintConfig = {
+    files: ["**/*.ts", "**/*.tsx"],
+    extends: cleanedExtends,
+    rules: {
+      /**
+       * RATIONALE : The null type is universally used, so it is excluded.
+       * docs: https://www.npmjs.com/package/@rushstack/eslint-plugin
+       */
+      "@rushstack/no-new-null": "off",
+      /**
+       * RATIONALE : Rushstack's policy enforces explicit types for top-level variables for readability,
+       * but our project prefers to leverage TypeScript's type inference.
+       * docs: https://github.com/microsoft/rushstack/tree/main/eslint/eslint-plugin#rushstacktypedef-var
+       */
+      "@rushstack/typedef-var": "off",
+      /**
+       * RATIONALE : According to the documentation, it can be used in projects that use many classes,
+       * but it is unnecessary because the development pattern is functional.
+       * docs: https://typescript-eslint.io/rules/explicit-member-accessibility/
+       */
+      "@typescript-eslint/explicit-member-accessibility": "off",
+      /**
+       * RATIONALE : Depending on the situation, it may be better to leave the return type to type inference.
+       * docs: https://typescript-eslint.io/rules/explicit-function-return-type/
+       */
+      "@typescript-eslint/explicit-function-return-type": "off"
+    },
+    settings: {
+      react: {
+        version: "detect"
+      }
+    }
+  };
+  return eslintConfig;
+}
+var eslintConfigExports = requireEslintConfig();
+const index = /* @__PURE__ */ getDefaultExportFromCjs(eslintConfigExports);
+export default index;

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "@lunit/eslint-config",
-  "version": "1.0.0",
-  "description": "Lunit ESLnt Config",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/lunit-io/eslint-config.git"
+  "version": "2.0.0",
+  "description": "Lunit ESLint Config",
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
   },
+  "repository": "lunit-io/eslint-config",
   "author": {
     "name": "Larry Kim",
     "email": "larry@lunit.io"
@@ -14,6 +21,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "vite build"
+  },
   "license": "MIT",
   "peerDependencies": {
     "eslint": ">= 8",
@@ -21,7 +31,12 @@
     "typescript": ">= 5"
   },
   "dependencies": {
-    "@rushstack/eslint-config": "^4.0.2",
-    "@rushstack/eslint-patch": "^1.10.4"
+    "@rushstack/eslint-config": "^4.4.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "eslint": "^9.36.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.1.7"
   }
 }

package/index.js

@@ -1,43 +0,0 @@
-/*
- * @rushstack/eslint-patch is used to include plugins as dev
- * dependencies instead of imposing them as peer dependencies
- *
- * https://www.npmjs.com/package/@rushstack/eslint-patch
- */
-require('@rushstack/eslint-patch/modern-module-resolution');
-
-module.exports = {
-  extends: ['@rushstack/eslint-config/profile/web-app'],
-  plugins: [],
-  rules: {},
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
-      rules: {
-        // RATIONALE : Too many parts are initialized to null, so turn it off for now.
-        '@rushstack/no-new-null': 'off',
-      },
-    },
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        // RATIONALE : Enforcing type definitions where type inference is sufficient
-        '@rushstack/typedef-var': 'off',
-        // RATIONALE : According to the documentation, it can be used in projects that use many classes,
-        // but it is unnecessary because the development pattern is functional.
-        '@typescript-eslint/explicit-member-accessibility': 'off',
-        // RATIONALE : Depending on the situation, it may be better to leave the return type to type inference.
-        '@typescript-eslint/explicit-function-return-type': 'off',
-      },
-    },
-    {
-      files: ['*.js', '*.jsx'],
-      rules: {},
-    },
-  ],
-};

package/sample-project/.eslintignore

@@ -1 +0,0 @@
-node_modules

package/sample-project/.eslintrc.cjs

@@ -1,16 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  ignorePatterns: ['**/*'],
-  extends: [
-    './eslint-config', // Extend common ESLint config
-  ],
-  settings: {
-    react: {
-      // Specifies the current React version (e.g. version: '18.2')
-      // If not specified (default 'detect'), the entire React library will be loaded,
-      // which may slow down the linting process.
-      version: '18.2',
-    },
-  },
-};

package/sample-project/.prettierignore

@@ -1,4 +0,0 @@
-# Add files here to ignore them from prettier formatting
-
-/dist
-/coverage

package/sample-project/.prettierrc.mjs

@@ -1,12 +0,0 @@
-const config = {
-  printWidth: 100,
-  trailingComma: 'all', // Default
-  tabWidth: 2, // Default
-  semi: true, // Adding a semicolon to the beginning of a line in some code
-  singleQuote: true,
-  bracketSpacing: true, // Default. If true, {foo:bar} is converted to { foo: bar }
-  arrowParens: 'always', // Default
-  useTabs: false, // Default
-};
-
-export default config;

package/sample-project/eslint-config/index.js

@@ -1,34 +0,0 @@
-module.exports = {
-  // Define the required plugins here.
-  plugins: ['prettier'],
-  extends: [
-    // (required) Extend the @lunit/eslint-config.
-    // (@rushstack/eslint-config/profile/web-app is included by default.)
-    '@lunit/eslint-config',
-    // React mixin provided by rushstack (requires installation of @rushstack/eslint-config package)
-    '@rushstack/eslint-config/mixins/react',
-    // You can create and use your own mixin as follows.
-    // './mixins/react',
-  ],
-  rules: {},
-  settings: {
-    // If there are any common settings you would like to add, please add them.
-  },
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
-      rules: {
-        // RATIONALE : Maintain code consistency using prettier settings
-        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
-      },
-    },
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {},
-    },
-    {
-      files: ['*.js', '*.jsx'],
-      rules: {},
-    },
-  ],
-};

package/sample-project/eslint-config/mixins/react.js

@@ -1,30 +0,0 @@
-module.exports = {
-  // https://www.npmjs.com/package/eslint-plugin-react
-  // https://github.com/ArnaudBarre/eslint-plugin-react-refresh
-  // https://www.npmjs.com/package/eslint-plugin-jsx-a11y
-  plugins: ['react', 'react-refresh', 'jsx-a11y'],
-  extends: [
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/jsx-runtime',
-  ],
-  settings: {
-    react: {
-      // Specifies the current React version (e.g. version: '18.2')
-      // If not specified (default 'detect'), the entire React library will be loaded,
-      // which may slow down the linting process.
-      version: 'detect',
-    },
-  },
-  overrides: [],
-  rules: {
-    // RATIONALE : Recommend exporting only React components to use the stable Fast Refresh
-    'react-refresh/only-export-components': [
-      'warn',
-      {
-        allowConstantExport: true,
-        allowExportNames: ['getServerSideProps'],
-      },
-    ],
-  },
-};