zeno-config 4.0.3 → 5.0.0

package/README.md

@@ -42,8 +42,8 @@ Create an `eslint.config.js` file in your project root:
 import { defineZenoConfig } from 'zeno-config/eslint';
 
 export default defineZenoConfig({
+	reactIncludes: ['src'], // Directories/files with React code (enables React rules)
 	ts: true, // Enable TypeScript support (default: false)
-	react: true, // Enable React support (default: false)
 });
 ```
 
@@ -54,16 +54,16 @@ If you're using or preparing to adopt [React Compiler](https://react.dev/learn/r
 ```javascript
 import { defineZenoConfig } from 'zeno-config/eslint';
 
-// Preparing a codebase — surface compiler violations as warnings
+// Full enforcement — compiler rules as errors
 export default defineZenoConfig({
-	react: true,
-	reactCompiler: 'warn',
+	reactIncludes: ['src'],
+	reactCompiler: true,
 });
 
-// Full enforcement — compiler rules as errors
+// Preparing a codebase — surface compiler violations as warnings
 export default defineZenoConfig({
-	react: true,
-	reactCompiler: true,
+	reactIncludes: ['src'],
+	reactCompiler: 'warn',
 });
 ```
 
@@ -86,17 +86,16 @@ import { defineZenoConfig } from 'zeno-config/eslint';
 
 export default defineZenoConfig(
 	{
-		react: true,
 		ts: true,
 
-		// Additional directories to ignore (added to defaults: node_modules, dist, build, coverage)
-		ignores: ['out', '.next'],
+		// Directories and files containing React code (enables React rules for all file types in these paths)
+		reactIncludes: ['src/client', 'src/components'],
 
-		// If using .js extensions for React files, specify React directories
-		reactDirs: ['src/client', 'src/components'],
+		// Directories and files containing Node.js code (scopes Node rules to these paths)
+		nodeIncludes: ['src/server', 'vite.config.ts', 'eslint.config.js'],
 
-		// Ignore Node.js rules in specific directories (defaults to reactDirs)
-		nodeIgnoreDirs: ['src/client'],
+		// Additional directories to ignore (added to defaults: node_modules, dist, build, coverage)
+		ignores: ['out', '.next'],
 
 		// Patterns to ignore for import/no-unresolved rule
 		ignoreExports: ['^@/'],
@@ -218,7 +217,7 @@ import {
 	reactJsExtensions, // JSX-only extensions: .jsx, .mjsx, .cjsx
 	reactJsExtensionsExtended, // JS + JSX extensions: .js, .mjs, .cjs, .jsx, .mjsx, .cjsx
 	reactExtensions, // React extensions (JSX + TSX): .jsx, .mjsx, .cjsx, .tsx, .mtsx, .ctsx
-	reactExtensionsExtended, // JS + JSX + TSX extensions: .js, .mjs, .cjs, .jsx, .mjsx, .cjsx, .tsx, .mtsx, .ctsx
+	reactExtensionsExtended, // All extensions for React directories: .js, .mjs, .cjs, .jsx, .mjsx, .cjsx, .ts, .cts, .mts, .tsx, .mtsx, .ctsx
 	typescriptExtensions, // TypeScript extensions: .ts, .cts, .mts, .tsx, .mtsx, .ctsx
 
 	// String versions for glob patterns (comma-separated)
@@ -227,7 +226,7 @@ import {
 	reactJsExtensionsString, // ".jsx,.mjsx,.cjsx"
 	reactJsExtensionsExtendedString, // ".js,.mjs,.cjs,.jsx,.mjsx,.cjsx"
 	reactExtensionsString, // ".jsx,.mjsx,.cjsx,.tsx,.mtsx,.ctsx"
-	reactExtensionsExtendedString, // ".js,.mjs,.cjs,.jsx,.mjsx,.cjsx,.tsx,.mtsx,.ctsx"
+	reactExtensionsExtendedString, // ".js,.mjs,.cjs,.jsx,.mjsx,.cjsx,.ts,.cts,.mts,.tsx,.mtsx,.ctsx"
 	typescriptExtensionsString, // ".ts,.cts,.mts,.tsx,.mtsx,.ctsx"
 } from 'zeno-config/extensions';
 ```
@@ -236,13 +235,12 @@ import {
 
 | Option                      | Type                    | Default     | Description                                                                                                           |
 | --------------------------- | ----------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
-| `react`                     | `boolean`               | `false`     | Enable React-specific rules                                                                                           |
-| `reactCompiler`             | `boolean \| 'warn'`     | `false`     | Enable React Compiler rules. Set to `'warn'` to surface violations as warnings (for preparing a codebase), or `true` to enforce as errors |
+| `reactIncludes`             | `string[]`              | `[]`        | Directories and files containing React code. Setting this enables all React rules (hooks, JSX, a11y, etc.) for all file types in these paths. |
+| `reactCompiler`             | `boolean \| 'warn'`     | `false`     | Enable React Compiler rules. Set to `true` to enforce as errors, or `'warn'` to surface violations as warnings (recommended when preparing a codebase for React Compiler adoption). |
 | `ts`                        | `boolean`               | `false`     | Enable TypeScript-specific rules                                                                                      |
 | `performanceMode`           | `boolean`               | `false`     | Disables expensive rules for better performance                                                                       |
 | `ignores`                   | `string[]`              | `[]`        | Additional directories to ignore (added to defaults: node_modules, dist, build, coverage)                             |
-| `reactDirs`                 | `string[]`              | `[]`        | Directories containing React files (for projects using .js for both React and Node)                                   |
-| `nodeIgnoreDirs`            | `string[]`              | `[]`        | Directories to ignore for Node-specific rules (defaults to `reactDirs` if not set)                                    |
+| `nodeIncludes`              | `string[]`              | `[]`        | Directories and files containing Node.js code. When set, Node-specific rules only apply to these paths. When not set but `reactIncludes` is set, `reactIncludes` directories are automatically excluded from Node rules. |
 | `ignoreExports`             | `string[]`              | `[]`        | Export patterns to ignore for import/no-unresolved rule                                                               |
 | `additionalDevDependencies` | `string[]`              | `[]`        | Additional file patterns to allow dev dependencies in (for import/no-extraneous-dependencies)                         |
 | `extensionsIgnorePattern`   | `object`                | `{}`        | Extension patterns to ignore for import/extensions rule                                                               |
@@ -261,9 +259,9 @@ const { configs, rules, extensions } = zenoInternals;
 
 export default [
 	...configs.getBase(),
-	...configs.getNode(),
-	...configs.getReact(),
-	...configs.getTypescript(),
+	...configs.getNode({ includes: ['src/server'] }),
+	...configs.getReact({ includes: ['src'] }),
+	...configs.getTypescript({ react: true }),
 	// Your custom configs
 ];
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zeno-config",
-  "version": "4.0.3",
+  "version": "5.0.0",
   "description": "Preconfigured and opinionated ESLint, Prettier, and TypeScript setup",
   "author": "Rick Brenn <brenn.rick@gmail.com>",
   "license": "MIT",
@@ -76,6 +76,7 @@
     "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.5.2",
     "eslint-plugin-react-you-might-not-need-an-effect": "0.9.2",
     "eslint-plugin-unicorn": "63.0.0",
     "globals": "17.4.0",

package/src/eslint/index.d.ts

@@ -16,16 +16,18 @@ interface BaseConfigOptions {
 }
 
 interface NodeConfigOptions {
-	/** Additional directories to ignore for Node-specific rules */
+	/** Directories and files to apply Node-specific rules to. When set, Node rules only apply to these paths. */
+	includes?: string[];
+	/** Directories to exclude from Node-specific rules (used internally for auto-exclude) */
 	ignoreDirs?: string[];
 }
 
 interface ReactConfigOptions {
-	/** Directories containing React files (for projects using .js for both React and Node) */
-	reactDirs?: string[];
+	/** Directories and files containing React code. Setting this enables React rules for all file types in these paths. */
+	includes?: string[];
 	/** Extension patterns to ignore for import rules */
 	extensionsIgnorePattern?: Record<string, string>;
-	/** Enable React Compiler rules. Set to 'warn' for warnings or true for errors. */
+	/** Enable React Compiler rules. Set to true to enforce as errors, or 'warn' for warnings (recommended when preparing a codebase for React Compiler adoption). */
 	reactCompiler?: boolean | 'warn';
 }
 
@@ -35,20 +37,18 @@ interface TypescriptConfigOptions {
 }
 
 interface DefineZenoConfigOptions {
-	/** Enable React-specific rules */
-	react?: boolean;
-	/** Enable React Compiler rules. Set to 'warn' for warnings or true for errors. */
+	/** Directories and files containing React code. Setting this enables React rules for all file types in these paths. */
+	reactIncludes?: string[];
+	/** Enable React Compiler rules. Set to true to enforce as errors, or 'warn' for warnings (recommended when preparing a codebase for React Compiler adoption). */
 	reactCompiler?: boolean | 'warn';
 	/** Enable TypeScript-specific rules */
 	ts?: boolean;
 	/** Disables expensive rules for performance */
 	performanceMode?: boolean;
-	/** Additional directories to ignore (added to defaults: dist, build) */
+	/** Additional directories to ignore (added to defaults: node_modules, dist, build, coverage) */
 	ignores?: string[];
-	/** Directories containing React files (for projects using .js for both React and Node) */
-	reactDirs?: string[];
-	/** Directories to ignore for Node-specific rules only */
-	nodeIgnoreDirs?: string[];
+	/** Directories and files containing Node.js code. When set, Node-specific rules only apply to these paths. */
+	nodeIncludes?: string[];
 	/** Export patterns to ignore for import rules */
 	ignoreExports?: string[];
 	/** Additional file patterns to allow dev dependencies in (for no-extraneous-dependencies rule) */
@@ -119,12 +119,12 @@ declare const internals: Internals;
  * @returns ESLint flat config array.
  *
  * @example
- * // With options object (using default export)
- * export default defineZenoConfig({ react: true, ts: true })
+ * // React + TypeScript
+ * export default defineZenoConfig({ reactIncludes: ['src'], ts: true })
  *
  * @example
  * // With additional config
- * export default defineZenoConfig({ react: true }, [customConfig])
+ * export default defineZenoConfig({ reactIncludes: ['src'], ts: true }, [customConfig])
  *
  * @example
  * // With config array only

package/src/eslint/index.js

@@ -9,6 +9,7 @@ import unicornPlugin from 'eslint-plugin-unicorn';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import reactRefreshPlugin from 'eslint-plugin-react-refresh';
 import reactYouMightNotNeedAnEffectPlugin from 'eslint-plugin-react-you-might-not-need-an-effect';
 import typescriptEslint from 'typescript-eslint';
 import getBaseRules from './rules/baseRules.js';
@@ -18,6 +19,7 @@ import getReactHooksPluginRules from './rules/reactHooksPluginRules.js';
 import getReactCompilerPluginRules from './rules/reactCompilerPluginRules.js';
 import getStylisticPluginRules from './rules/stylisticPluginRules.js';
 import getNodePluginRules from './rules/nodePluginRules.js';
+import getReactRefreshPluginRules from './rules/reactRefreshPluginRules.js';
 import getReactYouMightNotNeedAnEffectPluginRules from './rules/reactYouMightNotNeedAnEffectPluginRules.js';
 import getJsxA11yPluginRules from './rules/jsxA11yPluginRules.js';
 import getUnicornPluginRules from './rules/unicornPluginRules.js';
@@ -46,6 +48,17 @@ const defaultIgnoreDirs = [
 	'**/coverage/*',
 ];
 
+const isFile = (entry) => /\.\w+$/.test(entry);
+
+const buildFilePatterns = (includes, extensionsString) => {
+	return includes.flatMap((entry) => {
+		if (isFile(entry)) {
+			return [entry];
+		}
+		return [`${entry}/**/*{${extensionsString}}`];
+	});
+};
+
 /**
  * Creates the base ESLint configuration.
  *
@@ -108,22 +121,29 @@ const baseConfig = (options = {}) => {
  * Creates the Node.js-specific ESLint configuration.
  *
  * @param {Object} [options={}] - Configuration options.
- * @param {string[]} [options.ignoreDirs] - Additional directories to ignore for Node-specific rules.
+ * @param {string[]} [options.includes] - Directories and files to apply Node-specific rules to. When set, Node rules only apply to these paths.
+ * @param {string[]} [options.ignoreDirs] - Directories to exclude from Node-specific rules (used internally for auto-exclude).
  * @returns {Array} ESLint flat config array.
  */
 const nodeConfig = (options = {}) => {
+	let files = [`**/*{${nodeExtensionsString}}`];
 	let ignores = [...defaultIgnoreDirs];
-	if (options.ignoreDirs && options.ignoreDirs.length > 0) {
+
+	if (options.includes?.length > 0) {
+		files = buildFilePatterns(options.includes, nodeExtensionsString);
+		ignores = [];
+	} else if (options.ignoreDirs?.length > 0) {
 		const optionsIgnoreDirs = options.ignoreDirs.map((dir) => {
 			return `${dir}/**/*{${nodeExtensionsString}}`;
 		});
 		ignores = [...ignores, ...optionsIgnoreDirs];
 	}
+
 	return [
 		{
 			name: 'zeno/node',
-			files: [`**/*{${nodeExtensionsString}}`],
-			ignores,
+			files,
+			...(ignores.length > 0 ? { ignores } : {}),
 			languageOptions: {
 				ecmaVersion: 'latest',
 				sourceType: 'module',
@@ -143,24 +163,21 @@ const nodeConfig = (options = {}) => {
  * Creates the React-specific ESLint configuration.
  *
  * @param {Object} [options={}] - Configuration options.
- * @param {string[]} [options.reactDirs] - Directories containing React files (for projects using .js for both React and Node).
+ * @param {string[]} [options.includes] - Directories and files containing React code. Setting this enables React rules for all file types in these paths.
  * @param {Object} [options.extensionsIgnorePattern] - Extension patterns to ignore for import rules.
  * @param {boolean|string} [options.reactCompiler=false] - Enable React Compiler rules. Set to 'warn' for warnings or true for errors.
  * @returns {Array} ESLint flat config array.
  */
 const reactConfig = (options = {}) => {
-	let files = [`**/*{${reactExtensionsString}}`];
-	let extensions = reactExtensions;
+	let files;
+	let extensions;
 
-	if (
-		options.reactDirs &&
-		Array.isArray(options.reactDirs) &&
-		options.reactDirs.length > 0
-	) {
-		files = options.reactDirs.map((dir) => {
-			return `${dir}/**/*{${reactExtensionsExtendedString}}`;
-		});
+	if (options.includes?.length > 0) {
+		files = buildFilePatterns(options.includes, allExtensionsString);
 		extensions = reactExtensionsExtended;
+	} else {
+		files = [`**/*{${reactExtensionsString}}`];
+		extensions = reactExtensions;
 	}
 
 	return [
@@ -188,6 +205,7 @@ const reactConfig = (options = {}) => {
 				...(options.reactCompiler
 					? getReactCompilerPluginRules(options.reactCompiler)
 					: {}),
+				...getReactRefreshPluginRules(),
 				...getReactYouMightNotNeedAnEffectPluginRules(),
 				...getJsxA11yPluginRules(),
 
@@ -208,6 +226,7 @@ const reactConfig = (options = {}) => {
 				reactPlugin.configs.flat.recommended,
 				reactPlugin.configs.flat['jsx-runtime'],
 				reactHooksPlugin.configs.flat.recommended,
+				reactRefreshPlugin.configs.recommended,
 				reactYouMightNotNeedAnEffectPlugin.configs.recommended,
 				jsxA11yPlugin.flatConfigs.recommended,
 			],
@@ -304,6 +323,7 @@ const internals = {
 		getReactPluginRules,
 		getReactHooksPluginRules,
 		getReactCompilerPluginRules,
+		getReactRefreshPluginRules,
 		getReactYouMightNotNeedAnEffectPluginRules,
 		getJsxA11yPluginRules,
 	},
@@ -313,13 +333,12 @@ const internals = {
  * Defines a Zeno ESLint configuration.
  *
  * @param {Object|Array} arg1 - Options object or additional config array. If an array, treated as additional config.
- * @param {boolean} [arg1.react=false] - Enable React-specific rules.
- * @param {boolean|string} [arg1.reactCompiler=false] - Enable React Compiler rules. Set to 'warn' for warnings or true for errors.
- * @param {boolean} [arg1.ts=true] - Enable TypeScript-specific rules.
+ * @param {string[]} [arg1.reactIncludes=[]] - Directories and files containing React code. Setting this enables React rules for all file types in these paths.
+ * @param {boolean|string} [arg1.reactCompiler=false] - Enable React Compiler rules. Set to true to enforce as errors, or 'warn' for warnings (recommended when preparing a codebase for React Compiler adoption).
+ * @param {boolean} [arg1.ts=false] - Enable TypeScript-specific rules.
  * @param {boolean} [arg1.performanceMode=false] - Disables expensive rules for performance.
  * @param {string[]} [arg1.ignores=[]] - Additional directories to ignore (added to defaults: dist, build).
- * @param {string[]} [arg1.reactDirs=[]] - Directories containing React files (for projects using .js for both React and Node).
- * @param {string[]} [arg1.nodeIgnoreDirs=[]] - Directories to ignore for Node-specific rules only.
+ * @param {string[]} [arg1.nodeIncludes=[]] - Directories and files containing Node.js code. When set, Node-specific rules only apply to these paths.
  * @param {string[]} [arg1.ignoreExports=[]] - Export patterns to ignore for import rules.
  * @param {string[]} [arg1.additionalDevDependencies=[]] - Additional file patterns to allow dev dependencies in (for no-extraneous-dependencies rule).
  * @param {Object} [arg1.extensionsIgnorePattern={}] - Extension patterns to ignore for import rules.
@@ -328,12 +347,12 @@ const internals = {
  * @returns {Array} ESLint flat config array.
  *
  * @example
- * // With options object
- * defineZenoConfig({ react: true, ts: true })
+ * // React + TypeScript
+ * defineZenoConfig({ reactIncludes: ['src'], ts: true })
  *
  * @example
  * // With additional config
- * defineZenoConfig({ react: true }, [customConfig])
+ * defineZenoConfig({ reactIncludes: ['src'], ts: true }, [customConfig])
  *
  * @example
  * // With config array only
@@ -341,17 +360,14 @@ const internals = {
  */
 const defineZenoConfig = (arg1, arg2) => {
 	let options = {
-		react: false,
 		reactCompiler: false,
 		ts: false,
 		performanceMode: false,
 
-		// additional directories to ignore (added to defaults: dist, build)
 		ignores: [],
 
-		// if a project uses .js file extension for both react and node files this will help separate the rules for each
-		reactDirs: [],
-		nodeIgnoreDirs: [],
+		reactIncludes: [],
+		nodeIncludes: [],
 
 		ignoreExports: [],
 		additionalDevDependencies: [],
@@ -371,11 +387,11 @@ const defineZenoConfig = (arg1, arg2) => {
 	if (!Array.isArray(options.ignores)) {
 		options.ignores = [];
 	}
-	if (!Array.isArray(options.reactDirs)) {
-		options.reactDirs = [];
+	if (!Array.isArray(options.reactIncludes)) {
+		options.reactIncludes = [];
 	}
-	if (!Array.isArray(options.nodeIgnoreDirs)) {
-		options.nodeIgnoreDirs = [];
+	if (!Array.isArray(options.nodeIncludes)) {
+		options.nodeIncludes = [];
 	}
 	if (!Array.isArray(options.ignoreExports)) {
 		options.ignoreExports = [];
@@ -390,25 +406,31 @@ const defineZenoConfig = (arg1, arg2) => {
 		options.extensionsIgnorePattern = {};
 	}
 
-	// use the reactDirs as the nodeIgnoreDirs if they are not set since they would likely be the same
-	if (
-		options.react &&
-		options.reactDirs.length > 0 &&
-		options.nodeIgnoreDirs.length === 0
-	) {
-		options.nodeIgnoreDirs = [...options.reactDirs];
+	const isReact = options.reactIncludes.length > 0;
+
+	// Determine Node config options
+	let nodeOptions = {};
+	if (options.nodeIncludes.length > 0) {
+		nodeOptions = { includes: options.nodeIncludes };
+	} else if (isReact) {
+		// Auto-exclude reactIncludes directories from Node rules
+		const reactDirs = options.reactIncludes.filter(
+			(entry) => !isFile(entry)
+		);
+		if (reactDirs.length > 0) {
+			nodeOptions = { ignoreDirs: reactDirs };
+		}
 	}
 
-	// Load optional configs if needed
-	const reactConfigResult = options.react
+	const reactConfigResult = isReact
 		? configs.getReact({
-				reactDirs: options.reactDirs,
+				includes: options.reactIncludes,
 				extensionsIgnorePattern: options.extensionsIgnorePattern,
 				reactCompiler: options.reactCompiler,
 			})
 		: [];
 	const tsConfigResult = options.ts
-		? configs.getTypescript({ react: options.react })
+		? configs.getTypescript({ react: isReact })
 		: [];
 
 	return defineConfig([
@@ -421,9 +443,7 @@ const defineZenoConfig = (arg1, arg2) => {
 			extensionsIgnorePattern: options.extensionsIgnorePattern,
 			performanceMode: options.performanceMode,
 		}),
-		...configs.getNode({
-			ignoreDirs: options.nodeIgnoreDirs,
-		}),
+		...configs.getNode(nodeOptions),
 		...reactConfigResult,
 		...tsConfigResult,
 

package/src/eslint/rules/importPluginRules.js

@@ -119,6 +119,7 @@ const getImportPluginRules = (options = {}) => {
 				commonjs: true,
 				caseSensitive: true,
 				caseSensitiveStrict: true,
+				ignore: ['\\?'], // ignore query params (example: svg imports in vite)
 			},
 		],
 
@@ -154,7 +155,7 @@ const getImportPluginRules = (options = {}) => {
 		'import-x/max-dependencies': 'off',
 
 		// https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/newline-after-import.md
-		'import-x/newline-after-import': ['warn', { considerComments: true }],
+		'import-x/newline-after-import': ['warn', { considerComments: false }],
 
 		// https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/no-anonymous-default-export.md
 		'import-x/no-anonymous-default-export': 'off',

package/src/eslint/rules/reactRefreshPluginRules.js

@@ -0,0 +1,8 @@
+const getReactRefreshPluginRules = () => {
+	return {
+		// https://github.com/ArnaudBarre/eslint-plugin-react-refresh
+		'react-refresh/only-export-components': 'warn',
+	};
+};
+
+export default getReactRefreshPluginRules;

package/src/extensions.d.ts

@@ -23,7 +23,7 @@ declare const reactJsExtensionsExtended: string[];
 /** String version of reactJsExtensionsExtended for use in glob patterns */
 declare const reactJsExtensionsExtendedString: string;
 
-/** Extended React extensions (includes .js, .jsx, and .tsx) */
+/** Extended React extensions (includes .js, .jsx, .ts, and .tsx) */
 declare const reactExtensionsExtended: string[];
 /** String version of reactExtensionsExtended for use in glob patterns */
 declare const reactExtensionsExtendedString: string;

package/src/extensions.js

@@ -18,6 +18,7 @@ const reactJsExtensionsExtended = [...jsExtensions, ...jsxExtensions];
 const reactExtensionsExtended = [
 	...jsExtensions,
 	...jsxExtensions,
+	...tsExtensions,
 	...tsxExtensions,
 ];
 const typescriptExtensions = [...tsExtensions, ...tsxExtensions];