Add client-only ability registration (#69)

* Client only abilities

* fix: Add proper server ability validation in registerAbility

* feat: Add ClientAbility and ServerAbility types for better type safety

* refactor: Remove location field, use callback presence for execution type

* feat: add permissionCallback on the client

* update: check if ability is already registered in registerAbility

* fix: wrap client errors in i18n

* Add client library tests and code quality infrastructure  (#70)

* Add testing & linting infa

* Remove uncessary combined checks

* Add client tests

* test: Use proper TypeScript types instead of 'as any' in tests

* Fix typescript check for extra server check

* test: update tests for client-only abilities API changes

* chore: add build:client and dev:client scripts to root package.json

* fix: formatting

* fix: prettier issues

* fix: apply Prettier formatting to README and validation.ts

* deps: remove 		@types/wordpress__api-fetch since types are already shipped

* fix: move validation to the store

* fix: validate ability name uses same format as server

* tests: clean up CI checks

* deps: fix dev dependencies and remove extra package-lock.json

* fix: rename main dev and build commands

* fix: better match server validation rules for schema

* Fix remaining validation issues

Co-authored-by: emdashcodes <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: justlevine <[email protected]>
Co-authored-by: jonathanbossenger <[email protected]>

---------

Co-authored-by: emdashcodes <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: justlevine <[email protected]>
Co-authored-by: jonathanbossenger <[email protected]>
Co-authored-by: swissspidy <[email protected]>

Author: 6 people

.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: