Add component key support

wire-elements · Aug 2, 2024 · 50cbd4b · 50cbd4b
1 parent 032f220
commit 50cbd4b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/js/wire-extender.js b/js/wire-extender.js
@@ -90,7 +90,7 @@ function renderComponents(components)
         .then(response => response.json())
         .then(data => {
             for (let component in data.components) {
-                let el = document.querySelector(`[data-component-id="${component}"]`);
+                let el = document.querySelector(`[data-component-key="${component}"]`);
                 el.innerHTML = data.components[component];
             }
 
@@ -103,12 +103,12 @@ document.addEventListener('DOMContentLoaded', function() {
     let components = [];
 
     document.querySelectorAll('livewire').forEach((el) => {
-        if (!el.hasAttribute('data-component-id')) {
-            el.setAttribute('data-component-id', Math.random().toString(36).substring(2));
+        if (!el.hasAttribute('data-component-key')) {
+            el.setAttribute('data-component-key', Math.random().toString(36).substring(2));
         }
 
         components.push({
-            id: el.getAttribute('data-component-id'),
+            key: el.getAttribute('data-component-key'),
             name: el.getAttribute('data-component'),
             params: el.getAttribute('data-params')
         });

diff --git a/src/Http/Controllers/EmbedController.php b/src/Http/Controllers/EmbedController.php
@@ -12,7 +12,7 @@ class EmbedController
     public function __invoke(Request $request)
     {
         $components = collect($request->json('components', []))->mapWithKeys(function ($component) {
-            $componentId = $component['id'];
+            $componentKey = $component['key'];
             $componentName = $component['name'];
             $componentParams = json_decode($component['params'], true) ?? [];
 
@@ -21,7 +21,8 @@ public function __invoke(Request $request)
             }
 
             return [
-                $componentId => Blade::render('@livewire($component, $params)', [
+                $componentKey => Blade::render('@livewire($component, $params, key($key))', [
+                    'key' => $componentKey,
                     'component' => $componentName,
                     'params' => $componentParams,
                 ]),