fix: Refactor inspector.js into ES modules (#161)

Author: dermatz

src/view/frontend/templates/inspector.phtml

@@ -20,42 +20,47 @@ $alpineBootstrap = <<<JS
 (function() {
     'use strict';
 
-    // Check if Alpine.js is already loaded (Hyvä themes) to avoid conflicts
-    if (typeof Alpine !== 'undefined') {
-        console.log('[MageForge Inspector] Alpine.js already loaded');
-        return;
+    function loadAlpineFromCDN() {
+        // Check if Alpine.js is already loaded (Hyvä themes) to avoid conflicts
+        if (typeof Alpine !== 'undefined') {
+            console.log('[MageForge Inspector] Alpine.js already loaded');
+            return;
+        }
+
+        console.log('[MageForge Inspector] Loading Alpine.js from CDN');
+
+        var alpineScript = document.createElement('script');
+        alpineScript.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.15.11/dist/cdn.min.js';
+        alpineScript.integrity = 'sha256-vuumPQiVb2T6Bg9rainIejQb8Gn7lslFnCIsb9QuWK4=';
+        alpineScript.crossOrigin = 'anonymous';
+        alpineScript.onload = function() {
+            console.log('[MageForge Inspector] Alpine.js loaded successfully');
+        };
+        alpineScript.onerror = function() {
+            console.error('[MageForge Inspector] Failed to load Alpine.js');
+        };
+
+        document.head.appendChild(alpineScript);
     }
 
-    console.log('[MageForge Inspector] Loading Alpine.js from CDN');
-
-    var alpineScript = document.createElement('script');
-    alpineScript.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.15.11/dist/cdn.min.js';
-    alpineScript.integrity = 'sha256-vuumPQiVb2T6Bg9rainIejQb8Gn7lslFnCIsb9QuWK4=';
-    alpineScript.crossOrigin = 'anonymous';
-    alpineScript.onload = function() {
-        console.log('[MageForge Inspector] Alpine.js loaded successfully');
-    };
-    alpineScript.onerror = function() {
-        console.error('[MageForge Inspector] Failed to load Alpine.js');
-    };
-
-    // Defer injection until DOMContentLoaded so that all <script defer> tags
-    // (including inspector.js) have already executed and registered their
-    // alpine:init listener before Alpine starts.
+    // Use a short microtask delay after DOMContentLoaded so that all deferred
+    // and module scripts (including Hyvä's Alpine bundle) have had a chance to
+    // run before we decide to load Alpine from CDN.
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', function() {
-            document.head.appendChild(alpineScript);
+            // setTimeout(0) yields to the script queue, giving defer/module
+            // scripts priority over this CDN fallback.
+            setTimeout(loadAlpineFromCDN, 0);
         });
     } else {
-        // DOMContentLoaded already fired (e.g. script injected late)
-        document.head.appendChild(alpineScript);
+        setTimeout(loadAlpineFromCDN, 0);
     }
 })();
 JS;
 ?>
 <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $alpineBootstrap, false) ?>
 
-<script defer src="<?= $escaper->escapeUrl($block->getJsUrl()) ?>"></script>
+<script type="module" src="<?= $escaper->escapeUrl($block->getJsUrl()) ?>"></script>
 
 <!-- MageForge Inspector Component Wrapper -->
 <div class="mageforge-inspector"