Complete panel integration

config/di-web.php

@@ -2,16 +2,20 @@
 
 declare(strict_types=1);
 
+use Yiisoft\Yii\Debug\Viewer\Middleware\DevPanelMiddleware;
 use Yiisoft\Yii\Debug\Viewer\Middleware\ToolbarMiddleware;
 
 /** @var array $params */
 
 return [
     ToolbarMiddleware::class => [
         '__construct()' => [
-            'apiUrl' => $params['yiisoft/yii-debug-viewer']['apiUrl'],
-            'editorUrl' => $params['yiisoft/yii-debug-viewer']['editorUrl'],
             'containerId' => $params['yiisoft/yii-debug-viewer']['containerId'],
         ],
     ],
+    DevPanelMiddleware::class => [
+        '__construct()' => [
+            'viewerUrl' => $params['yiisoft/yii-debug-viewer']['viewerUrl'],
+        ],
+    ],
 ];

config/routes.php

@@ -6,6 +6,7 @@
 use Yiisoft\Router\Group;
 use Yiisoft\Router\Route;
 use Yiisoft\Yii\Debug\Viewer\IndexController;
+use Yiisoft\Yii\Debug\Viewer\Middleware\DevPanelMiddleware;
 use Yiisoft\Yii\Debug\Viewer\Middleware\ToolbarMiddleware;
 use Yiisoft\Yii\Middleware\CorsAllowAll;
 
@@ -21,6 +22,7 @@
         ->routes(
             Route::get('{path:.*}')
                 ->middleware(FormatDataResponseAsHtml::class)
+                ->middleware(DevPanelMiddleware::class)
                 ->action([IndexController::class, 'index'])
                 ->name('debug/index'),
         ),

resources/views/debug.php

@@ -9,8 +9,6 @@
  * @var AssetManager $assetManager
  */
 
-$assetManager->register(DevPanelAsset::class);
-
 $this->addCssFiles($assetManager->getCssFiles());
 $this->addCssStrings($assetManager->getCssStrings());
 $this->addJsFiles($assetManager->getJsFiles());
@@ -48,7 +46,6 @@
     <?php
     $this->beginBody() ?>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" style="flex:1"></div>
     <?php
     $this->endBody() ?>
     </body>

src/Asset/DevPanelAsset.php

@@ -14,13 +14,16 @@ final class DevPanelAsset extends AssetBundle
     public array $js = [
         [
             'https://yiisoft.github.io/yii-dev-panel/bundle.js',
+            //'http://localhost:4173/bundle.js',
             WebView::POSITION_END,
             'type' => 'module',
         ],
         'https://yiisoft.github.io/yii-dev-panel/registerSW.js',
+        //'http://localhost:4173/registerSW.js',
     ];
 
     public array $css = [
         'https://yiisoft.github.io/yii-dev-panel/bundle.css',
+        //'http://localhost:4173/bundle.css',
     ];
 }

src/Middleware/DevPanelMiddleware.php

@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yiisoft\Yii\Debug\Viewer\Middleware;
+
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use Psr\Http\Server\MiddlewareInterface;
+use Psr\Http\Server\RequestHandlerInterface;
+use Yiisoft\Assets\AssetManager;
+use Yiisoft\View\WebView;
+use Yiisoft\Yii\Debug\Viewer\Asset\DevPanelAsset;
+use Yiisoft\Yii\Debug\Viewer\Asset\ToolbarAsset;
+
+final class DevPanelMiddleware implements MiddlewareInterface
+{
+    public function __construct(
+        private string $viewerUrl,
+        private AssetManager $assetManager,
+        private WebView $view,
+    ) {
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
+    {
+        $this->assetManager->register(DevPanelAsset::class);
+        $this->view->registerJs(
+            <<<JS
+            const devPanelContainerId = 'yii-dev-panel';
+            const devPanel = document.createElement('div');
+            devPanel.setAttribute('id', devPanelContainerId);
+            devPanel.style.flex= "1";
+            document.body.append(devPanel);
+
+            console.log('window.YiiDevPanelWidget', window.YiiDevPanelWidget)
+            window['YiiDevPanelWidget'] = window['YiiDevPanelWidget'] ?? {};
+            window['YiiDevPanelWidget'].config = {
+                containerId: devPanelContainerId,
+                options: {
+                    router: {
+                        basename: '{$this->viewerUrl}',
+                    }
+                },
+            };
+            JS,
+            WebView::POSITION_LOAD,
+        );
+
+        return $handler->handle($request);
+    }
+}