Add client-only ability registration

.github/workflows/test.yml

@@ -247,3 +247,93 @@ jobs:
           name: wp-code-coverage-${{ matrix.php }}-${{ matrix.wp }}
           path: tests/_output/html
           overwrite: true
+
+  # Runs JavaScript code quality checks.
+  #
+  # Performs the following steps:
+  # - Checks out the repository.
+  # - Sets up Node.js.
+  # - Installs NPM dependencies.
+  # - Runs Prettier formatting check.
+  # - Runs JavaScript linting.
+  # - Runs TypeScript type checking.
+  jslint:
+    name: Run JavaScript code quality checks
+    runs-on: ubuntu-24.04
+    permissions:
+      contents: read
+    timeout-minutes: 20
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+          persist-credentials: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: 'npm'
+          node-version-file: '.nvmrc'
+
+      - name: Install NPM dependencies
+        run: npm ci
+
+      - name: Run Prettier format check
+        run: npm run format
+
+      - name: Run JavaScript linting
+        run: npm run lint:js
+
+      - name: Run TypeScript type checking
+        run: npm run typecheck
+
+  # Runs JavaScript tests for the client package.
+  #
+  # Performs the following steps:
+  # - Checks out the repository.
+  # - Sets up Node.js.
+  # - Installs NPM dependencies.
+  # - Runs JavaScript tests with coverage.
+  # - Uploads coverage reports.
+  jstest:
+    name: Run JavaScript tests
+    runs-on: ubuntu-24.04
+    permissions:
+      contents: read
+    timeout-minutes: 20
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+          persist-credentials: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: 'npm'
+          node-version-file: '.nvmrc'
+
+      - name: Install NPM dependencies
+        run: npm ci
+
+      - name: Run JavaScript tests with coverage
+        run: npm run test:client:coverage
+
+      - name: Upload JavaScript coverage to Codecov
+        uses: codecov/codecov-action@0565863a31f2c772f9f0395002a31e3f06189574 # v5.4.0
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: packages/client/coverage/lcov.info
+          flags: javascript
+          fail_ci_if_error: true
+
+      - name: Upload JavaScript coverage report as artifact
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: javascript-coverage-report
+          path: packages/client/coverage/lcov-report
+          overwrite: true

CONTRIBUTING.md

@@ -83,13 +83,39 @@ For more information on using `wp-env`, see the [wp-env documentation](https://d
 
 #### Linting and Formatting
 
+##### PHP Code Quality
+
 - `npm run lint:php`: Runs PHPCS linting on the PHP code.
 - `npm run lint:php:fix`: Autofixes PHPCS linting issues.
 - `npm run lint:php:stan`: Runs PHPStan static analysis.
-- `npm run format`: Formats non-PHP files using Prettier.
+
+##### JavaScript Code Quality
+
+The project uses ESLint for linting and Prettier for code formatting, configured through `@wordpress/scripts`.
+
+```bash
+# Lint all JavaScript/TypeScript files
+npm run lint:js
+
+# Auto-fix linting issues
+npm run lint:js:fix
+
+# Run TypeScript typecheck
+npm run typecheck
+```
+
+##### Formatting Code
+
+Format all files (JavaScript, JSON, Markdown, etc.):
+
+```bash
+npm run format
+```
 
 ### Running Tests
 
+#### PHP Tests
+
 PHPUnit tests can be run using the following command:
 
 ```bash
@@ -106,6 +132,26 @@ npm run test:php
 
 You should see the html coverage report in the `tests/_output/html` directory and the clover XML report in `tests/_output/php-coverage.xml`.
 
+#### JavaScript Tests
+
+The JavaScript client package tests can be run using the following commands:
+
+```bash
+# Run all JavaScript tests
+npm run test:client
+
+# Run tests in watch mode (great for development)
+npm run test:client:watch
+```
+
+To generate a code coverage report, run:
+
+```bash
+npm run test:client:coverage
+```
+
+Coverage reports are generated in the `packages/client/coverage/` directory.
+
 ### Building the plugin for distribution
 
 To build the plugin for distribution, you can use the following command: