@hs-web-team/eslint-config-node 3.1.0-next.1 → 3.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,17 +2,23 @@ name: Publish Package to npmjs
2
2
  on:
3
3
  release:
4
4
  types: [created]
5
+
6
+ permissions:
7
+ id-token: write # Required for OIDC
8
+ contents: read
9
+
5
10
  jobs:
6
11
  build:
7
12
  runs-on: ubuntu-latest
8
13
  steps:
9
14
  # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
10
- - uses: actions/checkout@v5
15
+ - uses: actions/checkout@v6
11
16
  - uses: actions/setup-node@v6
12
17
  with:
13
18
  node-version: 24
14
19
  registry-url: 'https://registry.npmjs.org'
15
- - run: npm install
20
+ - run: npm ci
21
+ - run: npm run build --if-present
16
22
  - name: Publish to npm
17
23
  run: |
18
24
  VERSION=$(node -p "require('./package.json').version")
@@ -26,5 +32,3 @@ jobs:
26
32
  echo "Publishing stable version $VERSION"
27
33
  npm publish
28
34
  fi
29
- env:
30
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
package/CLAUDE.md CHANGED
@@ -4,14 +4,16 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
4
4
 
5
5
  ## Overview
6
6
 
7
- 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.
7
+ 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.
8
8
 
9
9
  ## Key Commands
10
10
 
11
11
  ### Linting
12
+
12
13
  ```bash
13
14
  npm run lint
14
15
  ```
16
+
15
17
  Runs ESLint on the codebase with auto-fix enabled. Uses the configuration defined in `index.js`.
16
18
 
17
19
  ### Testing in Projects
@@ -23,8 +25,10 @@ When testing changes to this package in downstream projects, you'll typically:
23
25
 
24
26
  ## Architecture
25
27
 
26
- ### Core Configuration File
27
- - **`index.js`**: The main ESLint configuration export using ESLint 9's flat config format
28
+ ### Core Configuration Files
29
+
30
+ #### `index.js` - Node.js Configuration
31
+ - The main ESLint configuration export using ESLint 9's flat config format
28
32
  - Uses `@eslint/js`, `typescript-eslint`, and `globals` packages
29
33
  - Exports an array of configuration objects (flat config format)
30
34
  - Structure:
@@ -37,6 +41,20 @@ When testing changes to this package in downstream projects, you'll typically:
37
41
  - Common ignores: `node_modules`, `.serverless`, `.webpack`, `dist`, `eslint.config.js`
38
42
  - Key custom rules: `no-console` (allows info/warn/error), `max-len` (120 chars), camelcase disabled
39
43
 
44
+ #### `browser.js` - Browser/React Configuration
45
+ - Browser and React-focused ESLint configuration using ESLint 9's flat config format
46
+ - Uses `@eslint/js`, `typescript-eslint`, `globals`, and React-specific plugins
47
+ - Includes `eslint-plugin-react`, `eslint-plugin-react-hooks`, and `eslint-plugin-jsx-a11y`
48
+ - Supports both JavaScript/JSX and TypeScript/TSX files
49
+ - Structure:
50
+ 1. Global ignores (node_modules, dist, build, .next, coverage)
51
+ 2. Base JavaScript/JSX config with browser globals
52
+ 3. React plugin configuration
53
+ 4. TypeScript config with browser globals
54
+ 5. React plugin configuration for TypeScript files
55
+ - Includes browser, ES2021, and Jest globals, plus custom globals ($, jQuery, Invoca)
56
+ - Key custom rules: Similar base rules to Node config, plus React-specific rules
57
+
40
58
  ### Prettier Integration
41
59
  - **`bin/add-prettier-scripts.js`**: Executable script that consuming projects can run to set up Prettier
42
60
  - 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:
51
69
  ### Package Details
52
70
  - **Type**: ESM module (`"type": "module"`)
53
71
  - **Node requirement**: >= 22
54
- - **Main export**: `index.js`
72
+ - **Exports**:
73
+ - Main export (`.`): `index.js` - Node.js configuration
74
+ - Browser export (`./browser`): `browser.js` - Browser/React configuration
55
75
  - **Binary command**: `add-prettier` maps to `bin/add-prettier-scripts.js`
56
76
 
57
77
  ### Migration Context
@@ -61,9 +81,12 @@ This package is currently on v3, which uses ESLint 9's flat config format. The p
61
81
 
62
82
  ## Important Notes
63
83
 
64
- - This package is for **backend Node.js projects only**, not browser environments
84
+ - This package supports both **backend Node.js projects** (default export) and **browser/React projects** (`/browser` export)
65
85
  - The configuration uses ESLint 9's flat config format (not the legacy `.eslintrc` format)
66
- - Downstream projects extend this config in their `eslint.config.js` by spreading the imported config using `...wtConfig`
86
+ - Downstream projects extend this config in their `eslint.config.js` by spreading the imported config:
87
+ - Node.js: `...wtConfig`
88
+ - Browser: `...wtBrowserConfig`
67
89
  - Mixed module systems: `bin/add-prettier-scripts.js` uses CommonJS (`require`) while the main package is ESM
68
90
  - CI runs on Node 22 and 24 (see `.github/workflows/pr.yml`)
69
91
  - No automated tests currently (`npm test` will fail with "Error: no test specified")
92
+ - Detailed browser configuration documentation available in `examples/browser-usage.md`
package/README.md CHANGED
@@ -1,17 +1,18 @@
1
- # Hubspot Marketing WebTeam ESLint rules for Node.js
1
+ # Hubspot Marketing WebTeam ESLint Configuration
2
2
 
3
- This is a list of ESLint rules that are recommended for use with **Hubspot Marketing WebTeam** projects.
3
+ This package provides ESLint rules and configurations for **Hubspot Marketing WebTeam** projects, supporting both Node.js backend and browser/React applications.
4
4
 
5
5
  <!-- index-start -->
6
6
 
7
7
  ## Index
8
8
 
9
- - [Setup](#setup)
9
+ - [Node.js Setup](#nodejs-setup)
10
+ - [Browser/React Setup](#browserreact-setup)
10
11
  - [Where to use it](#where-to-use-it)
11
12
  - [Using the Prettier Scripts](#using-the-prettier-scripts)
12
13
  <!-- index-end -->
13
14
 
14
- ## Setup
15
+ ## Node.js Setup
15
16
 
16
17
  1. Install as dev dependency
17
18
 
@@ -49,9 +50,42 @@ This is a list of ESLint rules that are recommended for use with **Hubspot Marke
49
50
  ];
50
51
  ```
51
52
 
53
+ ## Browser/React Setup
54
+
55
+ 1. Install as dev dependency
56
+
57
+ ```sh
58
+ npm i -D @hs-web-team/eslint-config-node@latest
59
+ ```
60
+
61
+ 2. Add to `eslint.config.js` in project root directory
62
+
63
+ ```typescript
64
+ import wtBrowserConfig from '@hs-web-team/eslint-config-node/browser';
65
+
66
+ export default [
67
+ ...wtBrowserConfig,
68
+ ];
69
+ ```
70
+
71
+ 3. The browser configuration includes:
72
+ - ESLint recommended rules for JavaScript
73
+ - TypeScript support with typescript-eslint
74
+ - React support with eslint-plugin-react
75
+ - React Hooks rules with eslint-plugin-react-hooks
76
+ - Accessibility rules with eslint-plugin-jsx-a11y
77
+ - Browser globals (window, document, etc.) and custom globals (jQuery, $, Invoca)
78
+
79
+ For detailed browser configuration documentation and migration guides, see [examples/browser-usage.md](./examples/browser-usage.md).
80
+
52
81
  ## Where to use it
53
82
 
54
- 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.
83
+ This package provides two configurations:
84
+
85
+ - **Node.js configuration** (default export): For backend Node.js projects
86
+ - **Browser configuration** (`/browser` export): For browser-based projects including React applications
87
+
88
+ Choose the appropriate configuration based on your project type.
55
89
 
56
90
  ## Using the Prettier Scripts
57
91
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hs-web-team/eslint-config-node",
3
- "version": "3.1.0-next.1",
3
+ "version": "3.1.2",
4
4
  "description": "HubSpot Marketing WebTeam ESLint rules for Node.js",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -36,14 +36,14 @@
36
36
  "@eslint/js": "^9.39.1",
37
37
  "@typescript-eslint/eslint-plugin": "^8.46.3",
38
38
  "@typescript-eslint/parser": "^8.46.3",
39
- "eslint": "^9.39.1",
39
+ "eslint": "^9.39.2",
40
40
  "eslint-formatter-checkstyle": "^9.0.1",
41
41
  "eslint-plugin-jsx-a11y": "^6.10.2",
42
42
  "eslint-plugin-react": "^7.37.5",
43
43
  "eslint-plugin-react-hooks": "^7.0.1",
44
- "globals": "^16.5.0",
44
+ "globals": "^17.0.0",
45
45
  "jiti": "^2.6.1",
46
- "prettier": "^3.7.4",
47
- "typescript-eslint": "^8.48.1"
46
+ "prettier": "^3.8.1",
47
+ "typescript-eslint": "^8.53.1"
48
48
  }
49
49
  }