Update component loader to support keeping script tags in views

Author: ralyodio

public/js/router.js

@@ -1,9 +1,8 @@
 /**
  * Router module for SPA navigation
  */
-import { Router, transitions, renderer } from 'https://esm.sh/@profullstack/[email protected]';
+import { Router, transitions, renderer, componentLoader } from 'https://esm.sh/@profullstack/[email protected]';
 import { localizer } from './i18n-setup.js';
-import { detectAndImportModules, executeInlineScripts, filterScriptTags } from './utils/component-loader.js';
 import {
   initLoginPage, 
   initRegisterPage, 
@@ -42,13 +41,13 @@ async function loadPage(url) {
     const doc = parser.parseFromString(html, 'text/html');
 
     // Import any modules
-    await detectAndImportModules(doc);
+    await componentLoader.detectAndImportModules(doc);
 
     // Execute any inline scripts
-    await executeInlineScripts(doc);
+    await componentLoader.executeInlineScripts(doc);
 
-    // Filter out script tags
-    const contentWithoutScripts = filterScriptTags(doc.body);
+    // Filter out script tags, but keep them for views
+    const contentWithoutScripts = componentLoader.filterScriptTags(doc.body, true); // Keep script tags
     const content = contentWithoutScripts.innerHTML;
 
     // Pre-translate the content
@@ -133,7 +132,8 @@ export function createRouter(options = {}) {
     transition: customFade,
     renderer: renderer.createRenderer({
       translateContainer: localizer.translateContainer.bind(localizer),
-      applyRTLToDocument: localizer.applyRTLToDocument.bind(localizer)
+      applyRTLToDocument: localizer.applyRTLToDocument.bind(localizer),
+      keepScripts: true // Keep script tags in views
     }),
     errorHandler: (path) => {
       console.log('Custom error handler called for path:', path);

public/js/utils/component-loader.js

@@ -91,14 +91,15 @@ export async function executeInlineScripts(doc) {
 /**
  * Filters out script tags from HTML content
  * @param {HTMLElement} element - Element to filter scripts from
- * @returns {DocumentFragment} - Document fragment with scripts removed
+ * @param {boolean} keepScripts - Whether to keep script tags in the output (default: false)
+ * @returns {DocumentFragment} - Document fragment with scripts removed or preserved
  */
-export function filterScriptTags(element) {
+export function filterScriptTags(element, keepScripts = false) {
   const tempDiv = document.createElement('div');
 
-  // Clone all child nodes except script tags
+  // Clone all child nodes, optionally excluding script tags
   Array.from(element.children).forEach(child => {
-    if (child.tagName !== 'SCRIPT') {
+    if (keepScripts || child.tagName !== 'SCRIPT') {
       tempDiv.appendChild(child.cloneNode(true));
     }
   });