@hs-web-team/eslint-config-node 3.1.1 → 3.1.3

package/CLAUDE.md

@@ -4,14 +4,16 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Overview
 
-This is an ESLint configuration package (`@hs-web-team/eslint-config-node`) for HubSpot Marketing WebTeam Node.js projects. It provides shared ESLint rules and Prettier configuration for backend Node.js projects.
+This is an ESLint configuration package (`@hs-web-team/eslint-config-node`) for HubSpot Marketing WebTeam projects. It provides shared ESLint rules and Prettier configuration for both backend Node.js projects and browser/React applications.
 
 ## Key Commands
 
 ### Linting
+
 ```bash
 npm run lint
 ```
+
 Runs ESLint on the codebase with auto-fix enabled. Uses the configuration defined in `index.js`.
 
 ### Testing in Projects
@@ -23,8 +25,10 @@ When testing changes to this package in downstream projects, you'll typically:
 
 ## Architecture
 
-### Core Configuration File
-- **`index.js`**: The main ESLint configuration export using ESLint 9's flat config format
+### Core Configuration Files
+
+#### `index.js` - Node.js Configuration
+- The main ESLint configuration export using ESLint 9's flat config format
   - Uses `@eslint/js`, `typescript-eslint`, and `globals` packages
   - Exports an array of configuration objects (flat config format)
   - Structure:
@@ -37,6 +41,20 @@ When testing changes to this package in downstream projects, you'll typically:
   - Common ignores: `node_modules`, `.serverless`, `.webpack`, `dist`, `eslint.config.js`
   - Key custom rules: `no-console` (allows info/warn/error), `max-len` (120 chars), camelcase disabled
 
+#### `browser.js` - Browser/React Configuration
+- Browser and React-focused ESLint configuration using ESLint 9's flat config format
+  - Uses `@eslint/js`, `typescript-eslint`, `globals`, and React-specific plugins
+  - Includes `eslint-plugin-react`, `eslint-plugin-react-hooks`, and `eslint-plugin-jsx-a11y`
+  - Supports both JavaScript/JSX and TypeScript/TSX files
+  - Structure:
+    1. Global ignores (node_modules, dist, build, .next, coverage)
+    2. Base JavaScript/JSX config with browser globals
+    3. React plugin configuration
+    4. TypeScript config with browser globals
+    5. React plugin configuration for TypeScript files
+  - Includes browser, ES2021, and Jest globals, plus custom globals ($, jQuery, Invoca)
+  - Key custom rules: Similar base rules to Node config, plus React-specific rules
+
 ### Prettier Integration
 - **`bin/add-prettier-scripts.js`**: Executable script that consuming projects can run to set up Prettier
   - Uses CommonJS (`require`) syntax (different from the main package which is ESM)
@@ -51,7 +69,9 @@ When testing changes to this package in downstream projects, you'll typically:
 ### Package Details
 - **Type**: ESM module (`"type": "module"`)
 - **Node requirement**: >= 22
-- **Main export**: `index.js`
+- **Exports**:
+  - Main export (`.`): `index.js` - Node.js configuration
+  - Browser export (`./browser`): `browser.js` - Browser/React configuration
 - **Binary command**: `add-prettier` maps to `bin/add-prettier-scripts.js`
 
 ### Migration Context
@@ -61,9 +81,12 @@ This package is currently on v3, which uses ESLint 9's flat config format. The p
 
 ## Important Notes
 
-- This package is for **backend Node.js projects only**, not browser environments
+- This package supports both **backend Node.js projects** (default export) and **browser/React projects** (`/browser` export)
 - The configuration uses ESLint 9's flat config format (not the legacy `.eslintrc` format)
-- Downstream projects extend this config in their `eslint.config.js` by spreading the imported config using `...wtConfig`
+- Downstream projects extend this config in their `eslint.config.js` by spreading the imported config:
+  - Node.js: `...wtConfig`
+  - Browser: `...wtBrowserConfig`
 - Mixed module systems: `bin/add-prettier-scripts.js` uses CommonJS (`require`) while the main package is ESM
 - CI runs on Node 22 and 24 (see `.github/workflows/pr.yml`)
 - No automated tests currently (`npm test` will fail with "Error: no test specified")
+- Detailed browser configuration documentation available in `examples/browser-usage.md`

package/README.md

@@ -1,17 +1,18 @@
-# Hubspot Marketing WebTeam ESLint rules for Node.js
+# Hubspot Marketing WebTeam ESLint Configuration
 
-This is a list of ESLint rules that are recommended for use with **Hubspot Marketing WebTeam** projects.
+This package provides ESLint rules and configurations for **Hubspot Marketing WebTeam** projects, supporting both Node.js backend and browser/React applications.
 
 <!-- index-start -->
 
 ## Index
 
-- [Setup](#setup)
+- [Node.js Setup](#nodejs-setup)
+- [Browser/React Setup](#browserreact-setup)
 - [Where to use it](#where-to-use-it)
 - [Using the Prettier Scripts](#using-the-prettier-scripts)
 <!-- index-end -->
 
-## Setup
+## Node.js Setup
 
 1. Install as dev dependency
 
@@ -49,9 +50,42 @@ This is a list of ESLint rules that are recommended for use with **Hubspot Marke
     ];
     ```
 
+## Browser/React Setup
+
+1. Install as dev dependency
+
+    ```sh
+    npm i -D @hs-web-team/eslint-config-node@latest
+    ```
+
+2. Add to `eslint.config.js` in project root directory
+
+    ```typescript
+    import wtBrowserConfig from '@hs-web-team/eslint-config-node/browser';
+
+    export default [
+      ...wtBrowserConfig,
+    ];
+    ```
+
+3. The browser configuration includes:
+   - ESLint recommended rules for JavaScript
+   - TypeScript support with typescript-eslint
+   - React support with eslint-plugin-react
+   - React Hooks rules with eslint-plugin-react-hooks
+   - Accessibility rules with eslint-plugin-jsx-a11y
+   - Browser globals (window, document, etc.) and custom globals (jQuery, $, Invoca)
+
+For detailed browser configuration documentation and migration guides, see [examples/browser-usage.md](./examples/browser-usage.md).
+
 ## Where to use it
 
-This package is intended to be used as a starting point for ESLint rules for Backend Node.js projects, and not for use in browser environments.
+This package provides two configurations:
+
+- **Node.js configuration** (default export): For backend Node.js projects
+- **Browser configuration** (`/browser` export): For browser-based projects including React applications
+
+Choose the appropriate configuration based on your project type.
 
 ## Using the Prettier Scripts
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@hs-web-team/eslint-config-node",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "HubSpot Marketing WebTeam ESLint rules for Node.js",
   "main": "index.js",
   "type": "module",
   "exports": {
     ".": "./index.js",
-    "./browser": "./browser.js"
+    "./browser": "./browser.js",
+    "./.prettierrc.json": "./.prettierrc.json"
   },
   "scripts": {
     "lint": "npx eslint -c ./index.js *.js --fix",
@@ -41,7 +42,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "globals": "^17.0.0",
+    "globals": "^17.1.0",
     "jiti": "^2.6.1",
     "prettier": "^3.8.1",
     "typescript-eslint": "^8.53.1"