Move JSON directive into separate template

jissereitsma · jissereitsma · commit 962055724147 · 2025-08-20T10:10:26.000+02:00
diff --git a/view/frontend/layout/loki_components.xml b/view/frontend/layout/loki_components.xml
@@ -2,11 +2,15 @@
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <body>
         <referenceContainer name="loki-components">
-            <block name="loki-components.script.component.debugger" template="Loki_Debugger::script/component/debugger-component.phtml"/>
+            <block name="loki-debugger.script.component.debugger" template="Loki_Debugger::script/component/debugger-component.phtml"/>
         </referenceContainer>
 
         <referenceContainer name="loki-scripts">
-            <block name="loki-components.debugger" template="Loki_Debugger::component/debugger.phtml" before="-"/>
+            <block name="loki-debugger.json-directive" template="Loki_Debugger::script/json-directive.phtml" />
+        </referenceContainer>
+
+        <referenceContainer name="before.body.end">
+            <block name="loki-debugger.debugger" template="Loki_Debugger::component/debugger.phtml" />
         </referenceContainer>
     </body>
 </page>
diff --git a/view/frontend/templates/component/debugger.phtml b/view/frontend/templates/component/debugger.phtml
@@ -3,6 +3,7 @@ declare(strict_types=1);
 
 /** @version 1.0.2 */
 
+use Loki\CssUtils\Util\CssClass;
 use Magento\Framework\View\Element\Template;
 use Loki\Components\Util\IdConvertor;
 use Loki\Debugger\Component\Debugger\DebuggerViewModel;
@@ -12,6 +13,7 @@ use Loki\Components\Factory\ViewModelFactory;
 /** @var ViewModelFactory $viewModelFactory */
 /** @var DebuggerViewModel $viewModel */
 /** @var IdConvertor $idConvertor */
+/** @var CssClass $css */
 
 $idConvertor = $viewModelFactory->create(IdConvertor::class);
 $htmlId = $idConvertor->toElementId($block->getNameInLayout());
diff --git a/view/frontend/templates/script/component/debugger-component.phtml b/view/frontend/templates/script/component/debugger-component.phtml
@@ -5,16 +5,6 @@ use Magento\Framework\View\Element\Template;
 
 /** @var Template $block */
 ?>
-<script>
-    document.addEventListener('alpine:init', () => {
-        Alpine.directive('json', (el, { value, expression }, { evaluate }) => {
-            if (expression) {
-                el.textContent = JSON.stringify(evaluate(expression));
-            }
-        });
-    });
-</script>
-
 <script>
     document.addEventListener('alpine:init', () => {
         Alpine.data('LokiComponentsDebugger', () => ({
diff --git a/view/frontend/templates/script/json-directive.phtml b/view/frontend/templates/script/json-directive.phtml
@@ -0,0 +1,16 @@
+<?php
+declare(strict_types=1);
+
+use Magento\Framework\View\Element\Template;
+
+/** @var Template $block */
+?>
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.directive('json', (el, { value, expression }, { evaluate }) => {
+            if (expression) {
+                el.textContent = JSON.stringify(evaluate(expression));
+            }
+        });
+    });
+</script>
