@saolabs/client 1.0.0 → 1.1.0

package/src/core/elements/Fragment.ts

@@ -1,8 +1,8 @@
-import { InitMode, InitModes } from "../contracts/common";
-import type { FragmentInterface, HtmlInterface, OneChildrenFactory, OneChildrenFactoryOutput, OneElementChildren } from "../contracts/ElementInterface";
-import type { ViewControllerInterface } from "../contracts/ViewControllerInterface";
-import { generateUUID } from "../hellpers/utils";
-import type { OneObjectType } from "../types/utils";
+import { InitMode, InitModes } from "../contracts/common.js";
+import type { FragmentInterface, HtmlInterface, SaoChildrenFactory, SaoChildrenFactoryOutput, SaoElementChildren } from "../contracts/ElementInterface.js";
+import type { ViewControllerInterface } from "../contracts/ViewControllerInterface.js";
+import { generateUUID } from "../helpers/utils.js";
+import type { SaoObjectType } from "../types/utils.js";
 
 /**
  * Fragment — renders multiple root nodes into a parent without a wrapping tag.
@@ -14,13 +14,13 @@ import type { OneObjectType } from "../types/utils";
  * similar to Reactive but without the reactivity overhead.
  */
 export class Fragment implements FragmentInterface {
-    oneType: OneObjectType = 'Fragment';
+    saoType: SaoObjectType = 'Fragment';
     public parent: HtmlInterface | null;
     public nodes: Node[] = [];
     /** Tracked child element wrappers (Html, Output, Reactive, TextElement, etc.) */
-    public children: OneElementChildren = [];
+    public children: SaoElementChildren = [];
     private ctx: ViewControllerInterface;
-    private childrenFactory: OneChildrenFactory;
+    private childrenFactory: SaoChildrenFactory;
     public openTag: Comment;
     public closeTag: Comment;
     public id: string; // Unique ID for debugging and marker registry
@@ -39,7 +39,7 @@ export class Fragment implements FragmentInterface {
         id?: string | null, 
         initMode?: InitMode, 
         parentElement?: HtmlInterface | null, 
-        childrenFactory: OneChildrenFactory
+        childrenFactory: SaoChildrenFactory
     }) {
         this.ctx = ctx;
         this.parent = parentElement;
@@ -52,48 +52,64 @@ export class Fragment implements FragmentInterface {
     setParentElement(parent: HtmlInterface | null): void {
         this.parent = parent;
     }
-    render(): void {
-        if (!this.parent || !this.parent.element) return;
-
-        const parentEl = this.parent.element;
+    /** Registry guard — element đã destroy không được reuse */
+    public __destroyed__: boolean = false;
 
-        // Place start marker
-        parentEl.appendChild(this.openTag);
+    /**
+     * Render — idempotent + position-aware (RUNTIME_CONTRACT.md §2),
+     * cùng pattern với Reactive.render().
+     */
+    render(): void {
+        if (this.__destroyed__) return;
+
+        if (!this.openTag.parentNode) {
+            if (!this.parent || !this.parent.element) return;
+            const parentEl = this.parent.element;
+            parentEl.appendChild(this.openTag);
+            parentEl.appendChild(this.closeTag);
+        } else {
+            this.clear(false);
+        }
 
         // Build children — compiled output uses (parentElement) => [...] signature
-        const output: OneChildrenFactoryOutput = this.childrenFactory(this.parent);
+        const output: SaoChildrenFactoryOutput = this.childrenFactory(this.parent);
+        const insertBeforeClose = (node: Node) => {
+            this.closeTag.parentNode?.insertBefore(node, this.closeTag);
+        };
 
         for (const child of output) {
+            if (child === null || child === undefined) continue;
             if (typeof child === 'string' || typeof child === 'number') {
                 const textNode = document.createTextNode(String(child));
-                parentEl.appendChild(textNode);
+                insertBeforeClose(textNode);
                 this.nodes.push(textNode);
-            } else if (child && typeof child === 'object') {
-                if ('element' in child) {
-                    // HtmlInterface, TextInterface — append their DOM element
-                    parentEl.appendChild(child.element);
-                    this.nodes.push(child.element);
+            } else if (child instanceof Node) {
+                insertBeforeClose(child);
+                this.nodes.push(child);
+            } else if (typeof child === 'object') {
+                if ('element' in child && (child as any).element) {
+                    insertBeforeClose((child as any).element);
+                    this.nodes.push((child as any).element);
                     this.children.push(child);
                     child.render();
                 } else if ('openTag' in child) {
-                    // Reactive, nested Fragment, Output — they self-append markers
+                    // Marker-based: đặt markers đúng vị trí trước, render sau
                     if ('parent' in child) {
                         (child as any).parent = this.parent;
                     }
                     if ('parentElement' in child) {
                         (child as any).parentElement = this.parent;
                     }
+                    insertBeforeClose((child as any).openTag);
+                    insertBeforeClose((child as any).closeTag);
                     this.children.push(child);
                     child.render();
                 }
             }
         }
-
-        // Place end marker
-        parentEl.appendChild(this.closeTag);
     }
 
-    setChildrenFactory(factory: OneChildrenFactory): void {
+    setChildrenFactory(factory: SaoChildrenFactory): void {
         this.childrenFactory = factory;
     }
 
@@ -126,7 +142,7 @@ export class Fragment implements FragmentInterface {
     }
 
     /** Remove all nodes between markers from the DOM */
-    clear(): void {
+    clear(_destroyChildren: boolean = true): void {
         // Destroy managed children first
         for (const child of this.children) {
             if ('destroy' in child && typeof child.destroy === 'function') {
@@ -146,23 +162,25 @@ export class Fragment implements FragmentInterface {
     }
 
     destroy(): void {
+        this.__destroyed__ = true;
+        this.ctx.releaseElement?.(this);
         this.clear();
         this.openTag.remove();
         this.closeTag.remove();
         this.parent = null;
     }
 
-    get isOneElement(): boolean {
+    get isSaoElement(): boolean {
         return true;
     }
-    set isOneElement(value: boolean) {
+    set isSaoElement(value: boolean) {
         // No-op setter to satisfy the Interface; this property is always true for Fragment elements
     }
 
-    get isOneFragment(): boolean {
+    get isSaoFragment(): boolean {
         return true;
     }
-    set isOneFragment(value: boolean) {
+    set isSaoFragment(value: boolean) {
         // No-op setter to satisfy the Interface; this property is always true for Fragment elements
     }
 }