Add RouterHelperTrait::finalize_path() helper function to add prefi…

…x path

Bump library `berlioz/router` to ^2.5
Update JavaScript dependencies update
Console and toolbar are compatibles with a `X-Forwarded-Prefix` header
Fix toolbar background
Fix default config

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file. This projec
 to [Semantic Versioning] (http://semver.org/). For change log format,
 use [Keep a Changelog] (http://keepachangelog.com/).
 
+## [2.4.0] - 2024-11-04
+
+### Added
+
+- `RouterHelperTrait::finalize_path()` helper function to add prefix path
+
+### Changed
+
+- Bump library `berlioz/router` to ^2.5
+- JavaScript dependencies update
+- Console and toolbar are compatibles with a `X-Forwarded-Prefix` header
+
+### Fixed
+
+- Toolbar background
+- Default config
+
 ## [2.3.0] - 2024-11-04
 
 ### Changed

composer.json

@@ -35,8 +35,8 @@
     "berlioz/core": "^2.2",
     "berlioz/flash-bag": "^1.0",
     "berlioz/http-message": "^2.0",
-    "berlioz/router": "^2.4",
-    "berlioz/twig-package": "^2.1",
+    "berlioz/router": "^2.5",
+    "berlioz/twig-package": "^2.4",
     "psr/http-server-handler": "^1.0",
     "psr/http-server-middleware": "^1.0"
   },

package.json

@@ -21,33 +21,31 @@
   "homepage": "https://getberlioz.com",
   "dependencies": {
     "@popperjs/core": "^2.9.2",
-    "bootstrap": "^5.0.1",
+    "bootstrap": "^5.0 <5.1",
     "bootstrap-icons": "^1.5.0",
     "highlight.js": "^10.7.3",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
+    "@babel/core": "^7.20.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.14.4",
+    "@babel/preset-env": "^7.20.2",
     "assets-webpack-plugin": "^6.0.6",
-    "autoprefixer": "^10.2.6",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^3.0.0",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^9.1.0",
+    "css-loader": "^6.7.2",
+    "css-minimizer-webpack-plugin": "^4.2.2",
     "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^1.6.0",
-    "node-sass": "^5.0.0",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.3.0",
-    "resolve-url-loader": "^3.1.3",
-    "sass-loader": "^11.1.1",
-    "style-loader": "^2.0.0",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.2",
-    "webpack-manifest-plugin": "^3.1.1",
-    "webpack-notifier": "^1.13.0"
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.4.19",
+    "postcss-loader": "^7.0.1",
+    "postcss-preset-env": "^7.8.3",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-manifest-plugin": "^5.0.0",
+    "webpack-notifier": "^1.15.0"
   }
 }

resources/Public/dist/entrypoints.json

@@ -1 +1 @@
-{"debug":{"css":"/_console/dist/css/debug.feb9704a.css","js":"/_console/dist/js/debug.07f97f44.js"},"debug-toolbar":{"css":"/_console/dist/css/debug-toolbar.feb9704a.css","js":"/_console/dist/js/debug-toolbar.9dd4536f.js"},"debug-caller":{"js":"/_console/dist/js/debug-caller.617030da.js"}}
+{"debug":{"css":"/_console/dist/css/debug.a6c50277.css","js":"/_console/dist/js/debug.492f33b5.js"},"debug-toolbar":{"css":"/_console/dist/css/debug-toolbar.a6c50277.css","js":"/_console/dist/js/debug-toolbar.9dd4536f.js"},"debug-caller":{"js":"/_console/dist/js/debug-caller.1ce22e83.js"}}

resources/Public/dist/js/debug.07f97f44.js.LICENSE.txt → resources/Public/dist/js/debug.492f33b5.js.LICENSE.txt

@@ -10,7 +10,7 @@
  */
 
 /*!
-  * Bootstrap v5.0.1 (https://getbootstrap.com/)
+  * Bootstrap v5.0.2 (https://getbootstrap.com/)
   * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */

resources/Public/dist/manifest.json

@@ -1,9 +1,9 @@
 {
-  "debug.css": "/_console/dist/css/debug.feb9704a.css",
-  "debug.js": "/_console/dist/js/debug.07f97f44.js",
-  "debug-toolbar.css": "/_console/dist/css/debug-toolbar.feb9704a.css",
+  "debug.css": "/_console/dist/css/debug.a6c50277.css",
+  "debug.js": "/_console/dist/js/debug.492f33b5.js",
+  "debug-toolbar.css": "/_console/dist/css/debug-toolbar.a6c50277.css",
   "debug-toolbar.js": "/_console/dist/js/debug-toolbar.9dd4536f.js",
-  "debug-caller.js": "/_console/dist/js/debug-caller.617030da.js",
-  "fonts/bootstrap-icons.woff?": "/_console/dist/fonts/bootstrap-icons.94eeade1.woff",
-  "fonts/bootstrap-icons.woff2?": "/_console/dist/fonts/bootstrap-icons.dfd0ea12.woff2"
+  "debug-caller.js": "/_console/dist/js/debug-caller.1ce22e83.js",
+  "fonts/bootstrap-icons.woff?": "/_console/dist/fonts/bootstrap-icons.39795c0b.woff?dd67030699838ea613ee6dbda90effa6",
+  "fonts/bootstrap-icons.woff2?": "/_console/dist/fonts/bootstrap-icons.b7bcc075.woff2?dd67030699838ea613ee6dbda90effa6"
 }

resources/Public/src/debug-caller.js

@@ -18,8 +18,8 @@ import Toolbar from './js/Toolbar';
 
 let berliozConsole, berliozToolbar;
 window.berlioz = {
-    console: berliozConsole = new Console(window.berlioz_debug_report),
-    toolbar: berliozToolbar = new Toolbar,
+    console: berliozConsole = new Console(window.berlioz_debug_report, window.berlioz_base_url),
+    toolbar: berliozToolbar = new Toolbar(window.berlioz_base_url),
 }
 
 berliozToolbar.open();

resources/Public/src/js/Console.js

@@ -10,7 +10,8 @@
  */
 
 class Console {
-    constructor(report) {
+    constructor(report, basePath) {
+        this._basePath = (basePath || '').replace(/\/$/, '');
         this._iframe = null;
         this._reports = [report];
         this._windows = [];
@@ -22,7 +23,7 @@ class Console {
     _init() {
         this._iframe = document.createElement('iframe');
         this._iframe.id = 'berlioz-console';
-        this._iframe.src = '/_console/' + this._reports[0];
+        this._iframe.src = this._basePath + '/_console/' + this._reports[0];
         this.refresh();
         document.body.appendChild(this._iframe);
         this._windows.push(this._iframe.contentWindow);
@@ -81,7 +82,7 @@ class Console {
     }
 
     newWindow() {
-        let consoleLocation = '/_console/' + this._reports[0];
+        let consoleLocation = this._basePath + '/_console/' + this._reports[0];
         if (this._iframe) {
             consoleLocation = this._iframe.contentDocument.location;
         }

resources/Public/src/js/Toolbar.js

@@ -12,7 +12,8 @@
 const TOOLBAR_COOKIE = 'berlioz_toolbar_direction';
 
 class Toolbar {
-    constructor() {
+    constructor(basePath) {
+        this._basePath = (basePath || '').replace(/\/$/, '');
         this._iframe = null;
         this._direction = null;
     }
@@ -24,7 +25,7 @@ class Toolbar {
 
         this._iframe = document.createElement('iframe');
         this._iframe.id = 'berlioz-toolbar';
-        this._iframe.src = '/_console/' + window.berlioz_debug_report + '/toolbar';
+        this._iframe.src = this._basePath + '/_console/' + window.berlioz_debug_report + '/toolbar';
         this.refresh();
         document.body.appendChild(this._iframe);
     }

resources/Public/src/scss/debug-toolbar.scss

@@ -20,9 +20,7 @@
 @import "~bootstrap/scss/utilities";
 
 :root {
-  @media (prefers-color-scheme: dark) {
-    --bs-primary: #{$body-bg};
-  }
+  --bs-primary: #{$body-bg};
 }
 
 html, body {

resources/Twig/Debug.twig

@@ -1,4 +1,4 @@
 {% if app.isDebugEnabled -%}
-    {{- '' }}<script>var berlioz_debug_report = '{{ app.debugUniqid }}';</script>
+    {{- '' }}<script>var berlioz_debug_report = '{{ app.debugUniqid }}';var berlioz_base_url = '{{ finalize_path('') }}';</script>
     {{- '' }}<script async src="{{ path('_berlioz/console/toolbar-dist') }}"></script>
 {%- endif %}

resources/Twig/Debug/_toolbar.html.twig

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description" content="">
     <meta name="author" content="">
-    <meta name="color-scheme" content="dark">
 
     <title>Berlioz Debug Toolbar</title>
 

src/Helper/RouterHelperTrait.php

@@ -63,4 +63,16 @@ protected function path(string|RouteInterface $name, array|RouteAttributes $para
     {
         return Uri::createFromString($this->getRouter()->generate($name, $parameters));
     }
+
+    /**
+     * Finalize path.
+     *
+     * @param string $path
+     *
+     * @return string
+     */
+    protected function finalize_path(string $path): string
+    {
+        return $this->getRouter()->finalizePath($path);
+    }
 }

tests/Helper/RouterHelperTraitTest.php

@@ -31,6 +31,7 @@ private function getHelper()
                 getRouter as public;
                 getRoute as public;
                 path as public;
+                finalize_path as public;
             }
         };
         $helper->setApp(new HttpApp(new Core(new FakeDefaultDirectories(), false)));
@@ -92,4 +93,29 @@ public function testPath_missingAttribute()
         $helper = $this->getHelper();
         $helper->path('c2m1');
     }
+
+    public function testFinalizePath_withoutPrefix()
+    {
+        $helper = $this->getHelper();
+
+        $this->assertEquals('foo', (string)$helper->finalize_path('foo'));
+    }
+
+    public function testFinalizePath_withPrefix()
+    {
+        $_SERVER['HTTP_X_FORWARDED_PREFIX'] = '/super-prefix';
+
+        $helper = $this->getHelper();
+
+        $this->assertEquals('/super-prefix/foo', (string)$helper->finalize_path('/foo'));
+    }
+
+    public function testFinalizePath_withPrefixAndEmptyPath()
+    {
+        $_SERVER['HTTP_X_FORWARDED_PREFIX'] = '/super-prefix';
+
+        $helper = $this->getHelper();
+
+        $this->assertEquals('/super-prefix/', (string)$helper->finalize_path(''));
+    }
 }