Fix CSP issue with new x-json directive

Author: jissereitsma

view/frontend/templates/component/debugger.phtml

@@ -73,8 +73,7 @@ $htmlId = $idConvertor->toElementId($block->getNameInLayout());
                             <code x-text="component.value"></code>
                         </td>
                         <td class="border-b border-gray-300 p-2">
-                            <?php /** @todo Make this CSP compliant */ ?>
-                            <code x-text="component.getDetailsString()"></code>
+                            <code x-json="component.getDetails"></code>
                         </td>
                     </tr>
                 </template>

view/frontend/templates/script/component/debugger-component.phtml

@@ -1,3 +1,13 @@
+<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', () => ({
@@ -52,3 +62,4 @@
         }));
     });
 </script>
+