@adobe/aem-cli 16.12.0 → 16.13.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# [16.13.0](https://github.com/adobe/helix-cli/compare/v16.12.0...v16.13.0) (2025-09-16)
+
+
+### Bug Fixes
+
+* add package-lock.json for browser-injectables ([cc55ce9](https://github.com/adobe/helix-cli/commit/cc55ce93d009d897008c28d34d8f249bada9c942))
+* address PR review comments ([dd3ad77](https://github.com/adobe/helix-cli/commit/dd3ad77a612e2a152967e3c433a12426ec6cd3b2))
+* **browser-injectables:** Potential fix for code scanning alert no. 37: Log injection ([5bf707a](https://github.com/adobe/helix-cli/commit/5bf707a9ae35112ef12aa14eb996d23c0b5fafae))
+* install Playwright dependencies in CI instead of skipping WebKit ([0d32a82](https://github.com/adobe/helix-cli/commit/0d32a8276c06d1d5b05549856682ae519f75b6fb))
+* Potential fix for code scanning alert no. 40: Unused variable, import, function or class ([3dcd827](https://github.com/adobe/helix-cli/commit/3dcd827fbe606976a20a26eaf2a61df2bdfa00e3))
+* remove ai workaround ([ec01627](https://github.com/adobe/helix-cli/commit/ec01627ff30582ebfed1f3622f23bf01aaa154df))
+* remove duplicate console-log-forwarding.test.html file ([e2c95cf](https://github.com/adobe/helix-cli/commit/e2c95cff3e38d22da636f5d88bf808e5245b9aab))
+* resolve all ESLint issues in browser log forwarding implementation ([e5dc3cc](https://github.com/adobe/helix-cli/commit/e5dc3cce5c3b1c5a1fff0bcbdc55fee40b901c08))
+* skip WebKit browser tests on Linux CI ([d6dbd2e](https://github.com/adobe/helix-cli/commit/d6dbd2eb5b2883c8d22ab69c525a5a398465ff83))
+* upload browser coverage reports to codecov ([9c5267c](https://github.com/adobe/helix-cli/commit/9c5267c2428465dbe206e1843ad58aea0d65b226))
+* use @esm-bundle/chai for browser-compatible assertions ([4857fe8](https://github.com/adobe/helix-cli/commit/4857fe854be067fd5a82f4779ab47a574224dd3a))
+* use correct @eslint/config-helpers version (0.3.0) ([7d0cb82](https://github.com/adobe/helix-cli/commit/7d0cb822c658e961d076bbdfb31d2a94d004f352))
+* use createRequire for ESM compatibility in LiveReload.js ([319cd98](https://github.com/adobe/helix-cli/commit/319cd988c147fd7634e8d675d126a659eb6d0ac1))
+
+
+### Features
+
+* add remaining browser log forwarding implementation files ([55033a7](https://github.com/adobe/helix-cli/commit/55033a79a47cddefbc784e738944d87dae0ae33e))
+* **test:** add web-test-runner for browser testing ([2a19ec1](https://github.com/adobe/helix-cli/commit/2a19ec1012e12696aaf9f07784cc22338095128f))
+* **up:** add browser console log forwarding to terminal ([c8c6402](https://github.com/adobe/helix-cli/commit/c8c6402249c82f74a06451229bafdeb3ccb1f7a3))
+
+
+### Reverts
+
+* use node modules to serve livereload ([5957400](https://github.com/adobe/helix-cli/commit/5957400e32d238f415a57a646181f39bd97517f4))
+
 # [16.12.0](https://github.com/adobe/helix-cli/compare/v16.11.3...v16.12.0) (2025-09-16)
 
 

package/CONTRIBUTING.md

@@ -28,6 +28,20 @@ For other contributors, a maintainer of the project has to approve the pull requ
 3. Use `npm run check` to make sure your code can run the tests and adheres to the style guide
 4. Create a pull request from your branch
 
+## Testing Browser Features
+
+Browser-specific features are tested separately in `packages/browser-injectables/`. These tests:
+- Run in real browsers via Playwright
+- Are isolated from main CLI tests  
+- Only run in CI when browser code changes
+
+To run browser tests locally:
+```bash
+cd packages/browser-injectables
+npm install
+npm test
+```
+
 In your pull request, outline:
 
 * What the changes intend

package/README.md

@@ -56,6 +56,24 @@ $ aem up
 The `--open` argument takes a path, eg `--open=/products/`, will cause the browser to be openend
 at the specific location. Disable with `--no-open'.`
 
+### browser console log forwarding
+
+The `--forward-browser-logs` flag enables forwarding of browser console messages (log, error, warn, info) to the terminal. This is particularly useful for debugging client-side issues without having to open the browser's developer tools.
+
+```
+$ aem up --forward-browser-logs
+```
+
+When enabled, browser console messages will appear in your terminal with the following format:
+```
+[Browser:error] 2025-07-27T10:30:45.123Z http://localhost:3000/script.js:42 Error message here
+```
+
+This feature is especially helpful when:
+- Debugging JavaScript errors in a headless environment
+- Monitoring client-side behavior during development
+- Working with AI coding assistants that need visibility into both server and client logs
+
 ### setting up a self-signed cert for using https
 
 1. create the certificate
@@ -142,6 +160,7 @@ If present, `ALL_PROXY` is used as fallback if there is no other match.
 | `--addr`          | `AEM_ADDR`          | `127.0.0.1` | Development server bind address                             |
 | `--livereload`    | `AEM_LIVERELOAD`    | `true`      | Enable automatic reloading of modified sources in browser.  |
 | `--no-livereload` | `AEM_NO_LIVERELOAD` | `false`     | Disable live-reload.                                        |
+| `--forward-browser-logs` | `AEM_FORWARD_BROWSER_LOGS` | `false` | Forward browser console logs to terminal.            |
 | `--open`          | `AEM_OPEN`          | `/`         | Open a browser window at specified path after server start. |
 | `--no-open`       | `AEM_NO_OPEN`       | `false`     | Disable automatic opening of browser window.                |
 | `--tls-key`       | `AEM_TLS_KEY`       | undefined   | Path to .key file (for enabling TLS)                        |
@@ -165,6 +184,22 @@ Read the full AEM Importer [documentation](https://github.com/adobe/helix-import
 You can use `npm run check` to run the tests and check whether your code adheres
 to the aem-cli coding style.
 
+### Browser Injectables
+
+Browser-injected scripts (LiveReload and console log forwarding) are maintained in a separate sub-project at `packages/browser-injectables/`. This isolation keeps browser testing dependencies separate from the main CLI.
+
+#### Development
+- Injectable scripts are in `packages/browser-injectables/src/`
+- No build step required - scripts are used directly
+- Browser tests run only when injectable code changes
+
+#### Testing Browser Injectables
+```bash
+cd packages/browser-injectables
+npm install
+npm test
+```
+
 # Troubleshooting
 
 ## `aem up` fails with `unable to get local issuer certificate`

package/eslint.config.js

@@ -22,6 +22,8 @@ export default defineConfig([
     'test/tmp/*',
     'tmp/*',
     'coverage',
+    // Browser-injectables has its own eslint config, so ignore it
+    'packages/browser-injectables/**',
   ]),
   {
     extends: [recommended],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/aem-cli",
-  "version": "16.12.0",
+  "version": "16.13.0",
   "description": "AEM CLI",
   "main": "index.js",
   "type": "module",
@@ -12,8 +12,8 @@
     "check": "npm run lint && npm run test",
     "test": "c8 mocha",
     "test-ci-win": "mocha --reporter spec test -t 300000 --exit",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
+    "lint": "eslint . && (cd packages/browser-injectables 2>/dev/null && npm run lint || true)",
+    "lint:fix": "eslint --fix . && (cd packages/browser-injectables 2>/dev/null && npx eslint --fix . || true)",
     "semantic-release": "semantic-release",
     "semantic-release-dry": "semantic-release --dry-run --branches $CI_BRANCH",
     "prepare": "husky"
@@ -23,7 +23,10 @@
     "recursive": "true",
     "reporter": "mocha-multi-reporters",
     "reporter-options": "configFile=.mocha-multi.json",
-    "loader": "esmock"
+    "loader": "esmock",
+    "exclude": [
+      "test/browser/**"
+    ]
   },
   "repository": {
     "type": "git",

package/packages/browser-injectables/README.md

@@ -0,0 +1,66 @@
+# AEM CLI Browser Injectables
+
+This sub-project contains browser scripts injected by the AEM CLI development server.
+
+## Purpose
+
+This package isolates browser-specific code and testing infrastructure from the main AEM CLI, keeping dependencies like Playwright and web-test-runner separate from the core CLI functionality.
+
+## Scripts
+
+### LiveReload (`vendor/livereload.js`)
+Provides automatic browser refresh when files change during development. This is a vendored copy of the `livereload-js` library.
+
+### Console Interceptor (`src/console-interceptor.js`) 
+Intercepts browser console methods (log, error, warn, info) and forwards them via WebSocket to the development server, allowing browser console output to appear in the terminal.
+
+## Structure
+
+```
+packages/browser-injectables/
+├── src/
+│   └── console-interceptor.js   # Browser console interception script
+├── vendor/
+│   └── livereload.js            # Vendored copy of livereload-js
+├── test/
+│   ├── console-log-forwarding.test.js
+│   └── livereload-integration.test.js
+├── scripts/
+│   └── copy-vendor.js           # Copies livereload.js from node_modules
+└── web-test-runner.config.js    # Browser test configuration
+```
+
+## Development
+
+Scripts are written as self-contained, browser-compatible JavaScript without requiring a build step.
+
+### Installing Dependencies
+```bash
+cd packages/browser-injectables
+npm install
+```
+
+This will:
+1. Install all dependencies
+2. Copy livereload.js to the vendor directory
+3. Install Playwright browsers for testing
+
+### Testing
+```bash
+npm test        # Run all browser tests
+npm test:watch  # Run tests in watch mode
+```
+
+Tests run in real browsers (Chromium, Firefox, WebKit) via Playwright and web-test-runner.
+
+## Integration with Main Project
+
+The main AEM CLI references these scripts directly:
+- `src/server/utils.js` reads `console-interceptor.js` at startup
+- `src/server/LiveReload.js` serves `vendor/livereload.js`
+
+No build process is required - the scripts are used as-is.
+
+## CI/CD
+
+Browser injectable tests run conditionally in the main CI workflow when files in this directory change. This keeps the test overhead minimal while ensuring proper coverage.

package/packages/browser-injectables/eslint.config.js

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { defineConfig, globalIgnores } from '@eslint/config-helpers';
+import { recommended, source, test } from '@adobe/eslint-config-helix';
+
+export default defineConfig([
+  globalIgnores([
+    'vendor/**',
+    'node_modules/**',
+    'coverage/**',
+    'coverage-browser/**',
+    'web-test-runner.config.js',
+  ]),
+  {
+    extends: [recommended],
+  },
+  {
+    files: ['src/**/*.js'],
+    extends: [source],
+    languageOptions: {
+      globals: {
+        // Browser globals needed for injected scripts
+        window: 'readonly',
+        document: 'readonly',
+        WebSocket: 'readonly',
+        location: 'readonly',
+      },
+    },
+    rules: {
+      // Allow console for browser debugging
+      'no-console': 'off',
+      // Allow var for ES5 compatibility in injected scripts
+      'no-var': 'off',
+      'vars-on-top': 'off',
+      // Allow function expressions for ES5 compatibility
+      'prefer-arrow-callback': 'off',
+      'func-names': 'off',
+      // Allow arguments object for ES5
+      'prefer-rest-params': 'off',
+      // Allow non-shorthand for ES5
+      'object-shorthand': 'off',
+      'prefer-destructuring': 'off',
+    },
+  },
+  {
+    files: ['test/**/*.js'],
+    extends: [test],
+    languageOptions: {
+      globals: {
+        // Browser globals for tests
+        window: 'readonly',
+        document: 'readonly',
+        location: 'readonly',
+      },
+    },
+  },
+  {
+    files: ['scripts/**/*.js'],
+    extends: [source],
+    rules: {
+      // Allow __dirname in Node.js scripts
+      'no-underscore-dangle': 'off',
+      // Allow console in build scripts
+      'no-console': 'off',
+    },
+  },
+]);