Allow multiple component on the same page (#23)

Fixes #3
wire-elements · Aug 2, 2024 · 032f220 · 032f220
1 parent c65c062
commit 032f220
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 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="${component}"]`);
+                let el = document.querySelector(`[data-component-id="${component}"]`);
                 el.innerHTML = data.components[component];
             }
 
@@ -103,7 +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));
+        }
+
         components.push({
+            id: el.getAttribute('data-component-id'),
             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,6 +12,7 @@ class EmbedController
     public function __invoke(Request $request)
     {
         $components = collect($request->json('components', []))->mapWithKeys(function ($component) {
+            $componentId = $component['id'];
             $componentName = $component['name'];
             $componentParams = json_decode($component['params'], true) ?? [];
 
@@ -20,7 +21,7 @@ public function __invoke(Request $request)
             }
 
             return [
-                $componentName => Blade::render('@livewire($component, $params)', [
+                $componentId => Blade::render('@livewire($component, $params)', [
                     'component' => $componentName,
                     'params' => $componentParams,
                 ]),