fix: DockerSecretsResolver - don't normalize absolute paths like /var/www/html/...

resources/js/modules/livecomponent/LazyComponentLoader.js

@@ -53,11 +53,23 @@ export class LazyComponentLoader {
      * Scan DOM for lazy components
      */
     scanLazyComponents() {
+        // Scan for regular lazy components
         const lazyElements = document.querySelectorAll('[data-live-component-lazy]');
-
         lazyElements.forEach(element => {
             this.registerLazyComponent(element);
         });
+
+        // Scan for Island components (both lazy and non-lazy)
+        const islandElements = document.querySelectorAll('[data-island-component]');
+        islandElements.forEach(element => {
+            if (element.dataset.liveComponentLazy) {
+                // Lazy Island - register for lazy loading
+                this.registerLazyComponent(element);
+            } else if (element.dataset.liveComponentIsland) {
+                // Non-lazy Island - load immediately
+                this.loadIslandComponentImmediately(element);
+            }
+        });
     }
 
     /**
@@ -193,8 +205,14 @@ export class LazyComponentLoader {
             // Show loading indicator
             this.showLoadingIndicator(config.element);
 
+            // Check if this is an Island component
+            const isIsland = config.element.dataset.islandComponent === 'true';
+            const endpoint = isIsland 
+                ? `/live-component/${config.componentId}/island`
+                : `/live-component/${config.componentId}/lazy-load`;
+
             // Request component HTML from server
-            const response = await fetch(`/live-component/${config.componentId}/lazy-load`, {
+            const response = await fetch(endpoint, {
                 method: 'GET',
                 headers: {
                     'X-Requested-With': 'XMLHttpRequest',
@@ -218,6 +236,11 @@ export class LazyComponentLoader {
             // Mark element as regular LiveComponent (no longer lazy)
             config.element.setAttribute('data-live-component', config.componentId);
             config.element.removeAttribute('data-live-component-lazy');
+            
+            // Keep island-component attribute for isolated initialization
+            if (isIsland) {
+                config.element.setAttribute('data-island-component', 'true');
+            }
 
             // Copy CSRF token to element
             if (data.csrf_token) {
@@ -231,8 +254,8 @@ export class LazyComponentLoader {
                 config.element.dataset.state = stateJson;
             }
 
-            // Initialize as regular LiveComponent
-            this.liveComponentManager.init(config.element);
+            // Initialize as regular LiveComponent (or Island if isolated)
+            this.liveComponentManager.init(config.element, { isolated: isIsland });
 
             // Mark as loaded
             config.loaded = true;
@@ -241,11 +264,11 @@ export class LazyComponentLoader {
             // Stop observing
             this.observer.unobserve(config.element);
 
-            console.log(`[LazyLoader] Loaded: ${config.componentId}`);
+            console.log(`[LazyLoader] Loaded: ${config.componentId}${isIsland ? ' (Island)' : ''}`);
 
             // Dispatch custom event
             config.element.dispatchEvent(new CustomEvent('livecomponent:lazy:loaded', {
-                detail: { componentId: config.componentId }
+                detail: { componentId: config.componentId, isIsland }
             }));
 
         } catch (error) {
@@ -266,6 +289,88 @@ export class LazyComponentLoader {
         }
     }
 
+    /**
+     * Load Island component immediately (non-lazy)
+     *
+     * @param {HTMLElement} element - Island component element
+     */
+    async loadIslandComponentImmediately(element) {
+        const componentId = element.dataset.liveComponentIsland;
+        if (!componentId) {
+            console.warn('[LazyLoader] Island component missing componentId:', element);
+            return;
+        }
+
+        try {
+            console.log(`[LazyLoader] Loading Island immediately: ${componentId}`);
+
+            // Show loading indicator
+            this.showLoadingIndicator(element);
+
+            // Request component HTML from Island endpoint
+            const response = await fetch(`/live-component/${componentId}/island`, {
+                method: 'GET',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'Accept': 'application/json'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+
+            if (!data.success) {
+                throw new Error(data.error || 'Failed to load Island component');
+            }
+
+            // Replace placeholder with component HTML
+            element.innerHTML = data.html;
+
+            // Mark element as Island component
+            element.setAttribute('data-live-component', componentId);
+            element.setAttribute('data-island-component', 'true');
+            element.removeAttribute('data-live-component-island');
+
+            // Copy CSRF token to element
+            if (data.csrf_token) {
+                element.dataset.csrfToken = data.csrf_token;
+            }
+
+            // Copy state to element
+            if (data.state) {
+                const stateJson = JSON.stringify(data.state);
+                element.dataset.state = stateJson;
+            }
+
+            // Initialize as isolated Island component
+            this.liveComponentManager.init(element, { isolated: true });
+
+            console.log(`[LazyLoader] Loaded Island: ${componentId}`);
+
+            // Dispatch custom event
+            element.dispatchEvent(new CustomEvent('livecomponent:island:loaded', {
+                detail: { componentId }
+            }));
+
+        } catch (error) {
+            console.error(`[LazyLoader] Failed to load Island ${componentId}:`, error);
+
+            // Show error state
+            this.showError(element, error.message);
+
+            // Dispatch error event
+            element.dispatchEvent(new CustomEvent('livecomponent:island:error', {
+                detail: {
+                    componentId,
+                    error: error.message
+                }
+            }));
+        }
+    }
+
     /**
      * Show placeholder
      *
@@ -415,3 +520,4 @@ export class LazyComponentLoader {
 
 // Export for use in LiveComponent module
 export default LazyComponentLoader;
+