@jqhtml/core 2.3.2 → 2.3.4

package/dist/index.js

@@ -1848,6 +1848,14 @@ class Jqhtml_Component {
      * @private
      */
     async _wait_for_children_ready() {
+        // Server-rendered components (created via jqhtml.boot()) may have children
+        // that were hydrated asynchronously during the 'render' event callback.
+        // Those children couldn't register via _find_dom_parent() because they were
+        // created after the parent's lifecycle started. Force DOM traversal fallback
+        // to reliably discover all children, including boot-hydrated ones.
+        if (this.args._inner_html !== undefined) {
+            this._use_dom_fallback = true;
+        }
         const children = this._get_dom_children();
         if (children.length === 0) {
             return; // No children, nothing to wait for
@@ -2953,6 +2961,136 @@ function escape_html(str) {
     return div.innerHTML;
 }
 
+/**
+ * JQHTML Boot - Component Hydration System
+ *
+ * Bridges server-rendered HTML and client-side jqhtml components.
+ *
+ * Server output:   <div class="_Component_Init" data-component-init-name="User_Card" data-component-args='{"id":1}'></div>
+ * After boot():    <div class="User_Card Component">...rendered template...</div>
+ *
+ * Usage:
+ *   await jqhtml.boot();           // Hydrate all placeholders, wait for ready
+ *   jqhtml.boot($('#container'));  // Hydrate within scope
+ */
+/**
+ * Hydrate all _Component_Init placeholders within a scope.
+ *
+ * @param scope - jQuery object, HTMLElement, or undefined (defaults to body)
+ * @returns Promise that resolves when all components (including nested) are ready
+ */
+function boot(scope) {
+    const jQ = typeof jQuery !== 'undefined' ? jQuery : $;
+    if (!scope) {
+        scope = jQ('body');
+    }
+    else if (!(scope instanceof jQ)) {
+        scope = jQ(scope);
+    }
+    const readyPromises = [];
+    // Find top-level placeholders only (skip those nested inside other placeholders)
+    scope.find('._Component_Init').each(function () {
+        const $element = jQ(this);
+        // Skip if removed from DOM
+        if (!document.contains($element[0])) {
+            return;
+        }
+        // Skip nested placeholders - they'll be hydrated by parent's render callback
+        let parent = $element[0].parentElement;
+        while (parent) {
+            if (parent.classList.contains('_Component_Init')) {
+                return;
+            }
+            parent = parent.parentElement;
+        }
+        // Hydrate this placeholder
+        const component = hydrateElement($element);
+        if (!component)
+            return;
+        // On render, recursively hydrate any nested placeholders
+        component.on('render', function () {
+            hydrateNested(component.$, jQ);
+        });
+        // Collect ready promise - parent.ready() waits for all children via _wait_for_children_ready()
+        readyPromises.push(component.ready());
+    });
+    // Fire jqhtml:ready event when all top-level components are ready
+    const result = Promise.all(readyPromises);
+    result.then(() => {
+        document.dispatchEvent(new CustomEvent('jqhtml:ready'));
+    });
+    return result;
+}
+/**
+ * Hydrate nested _Component_Init placeholders within a component's DOM.
+ * Called from parent's 'render' event.
+ */
+function hydrateNested($scope, jQ) {
+    $scope.find('._Component_Init').each(function () {
+        const $element = jQ(this);
+        if (!document.contains($element[0])) {
+            return;
+        }
+        // Skip if nested inside another placeholder
+        let parent = $element[0].parentElement;
+        while (parent && parent !== $scope[0]) {
+            if (parent.classList.contains('_Component_Init')) {
+                return;
+            }
+            parent = parent.parentElement;
+        }
+        const component = hydrateElement($element);
+        if (!component)
+            return;
+        // Recursively handle deeper nesting
+        component.on('render', function () {
+            hydrateNested(component.$, jQ);
+        });
+    });
+}
+/**
+ * Hydrate a single _Component_Init element into a live component.
+ */
+function hydrateElement($element, jQ) {
+    const componentName = $element.attr('data-component-init-name');
+    if (!componentName)
+        return null;
+    // Parse args
+    const argsString = $element.attr('data-component-args');
+    let args = {};
+    if (argsString) {
+        try {
+            args = JSON.parse(argsString);
+        }
+        catch (e) {
+            console.error(`[jqhtml.boot] Failed to parse args for ${componentName}:`, e);
+        }
+    }
+    // Strip data- prefix from args if present
+    const filteredArgs = {};
+    for (const [key, value] of Object.entries(args)) {
+        filteredArgs[key.startsWith('data-') ? key.substring(5) : key] = value;
+    }
+    // Capture innerHTML for content() and mark as boot-created
+    filteredArgs._inner_html = $element.html();
+    filteredArgs._component_name = componentName;
+    // Cleanup placeholder
+    $element.removeAttr('data-component-init-name');
+    $element.removeAttr('data-component-args');
+    $element.removeData('component-init-name');
+    $element.removeData('component-args');
+    $element.removeClass('_Component_Init');
+    $element.empty();
+    // Create component
+    try {
+        return $element.component(componentName, filteredArgs).component();
+    }
+    catch (error) {
+        console.error(`[jqhtml.boot] Failed to create ${componentName}:`, error);
+        return null;
+    }
+}
+
 /**
  * JQHTML Debug Overlay
  *
@@ -4233,7 +4371,7 @@ function init(jQuery) {
     }
 }
 // Version - will be replaced during build with actual version from package.json
-const version = '2.2.222';
+const version = '2.3.4';
 // Default export with all functionality
 const jqhtml = {
     // Core
@@ -4325,7 +4463,9 @@ const jqhtml = {
     // Cache key setter - enables component caching via local storage
     set_cache_key(cache_key) {
         Jqhtml_Local_Storage.set_cache_key(cache_key);
-    }
+    },
+    // Boot - hydrate server-rendered component placeholders
+    boot
 };
 // Auto-register on window for browser environments
 // This is REQUIRED for compiled templates which use window.jqhtml.register_template()
@@ -4343,5 +4483,5 @@ if (typeof window !== 'undefined' && !window.jqhtml) {
     }
 }
 
-export { DebugOverlay, Jqhtml_Component, LifecycleManager as Jqhtml_LifecycleManager, Jqhtml_Local_Storage, LifecycleManager, Load_Coordinator, applyDebugDelay, create_component, jqhtml as default, devWarn, escape_html, extract_slots, get_component_class, get_component_names, get_registered_templates, get_template, get_template_by_class, handleComponentError, has_component, hideDebugOverlay, init, init_jquery_plugin, isSequentialProcessing, list_components, logDataChange, logDispatch, logInstruction, logLifecycle, process_instructions, register_component, register_template, render_template, showDebugOverlay, version };
+export { DebugOverlay, Jqhtml_Component, LifecycleManager as Jqhtml_LifecycleManager, Jqhtml_Local_Storage, LifecycleManager, Load_Coordinator, applyDebugDelay, boot, create_component, jqhtml as default, devWarn, escape_html, extract_slots, get_component_class, get_component_names, get_registered_templates, get_template, get_template_by_class, handleComponentError, has_component, hideDebugOverlay, init, init_jquery_plugin, isSequentialProcessing, list_components, logDataChange, logDispatch, logInstruction, logLifecycle, process_instructions, register_component, register_template, render_template, showDebugOverlay, version };
 //# sourceMappingURL=index.js.map