@saolabs/client 1.0.0 → 1.0.2

package/src/core/elements/Output.ts

@@ -1,8 +1,9 @@
-import { InitMode, InitModes } from "../contracts/common";
-import type { HtmlInterface, OutputInterface } from "../contracts/ElementInterface";
-import type { ViewControllerInterface } from "../contracts/ViewControllerInterface";
-import { escapeHTML, generateUUID } from "../hellpers/utils";
-import type { OneObjectType } from "../types/utils";
+import { InitMode, InitModes } from "../contracts/common.js";
+import type { HtmlInterface, OutputInterface } from "../contracts/ElementInterface.js";
+import type { ViewControllerInterface } from "../contracts/ViewControllerInterface.js";
+import { generateUUID } from "../helpers/utils.js";
+import markerRegistry from "../services/MarkerRegistry.js";
+import type { SaoObjectType } from "../types/utils.js";
 
 /**
  * Output — reactive text output between comment markers.
@@ -14,7 +15,7 @@ import type { OneObjectType } from "../types/utils";
  * Update: Khi stateKeys thay đổi → re-evaluate contentFactory → update textContent
  */
 export class Output implements OutputInterface {
-    oneType: OneObjectType = 'Output';
+    saoType: SaoObjectType = 'Output';
     ctx: ViewControllerInterface;
     parent: HtmlInterface | null;
     openTag: Comment;
@@ -53,10 +54,54 @@ export class Output implements OutputInterface {
         this.contentFactory = contentFactory;
         this.isEscapeHTML = isEscapeHTML;
         this.id = `${ctx.viewId}-${id ?? generateUUID(8)}`;
-        
+
         this.initMode = initMode;
-        this.openTag = document.createComment(`o:${this.id}-s`);
-        this.closeTag = document.createComment(`o:${this.id}-e`);
+
+        if (this.initMode === InitModes.HYDRATE) {
+            // ── SSR Hydration: tìm markers đã có trong DOM ──────────────────
+            // Blade emit: <!--o:{viewId}-{id}-s--> ... <!--o:{viewId}-{id}-e-->
+            // Nếu tìm thấy → claim, kèm text node giữa markers.
+            // Nếu không → tạo mới (partial hydration fallback).
+            const claimed = this.claimSSRMarkers();
+            if (claimed) {
+                this.openTag = claimed.open;
+                this.closeTag = claimed.close;
+                this.textNode = claimed.textNode;
+            } else {
+                this.openTag = markerRegistry.createMarkerStart('output', this.id);
+                this.closeTag = markerRegistry.createMarkerEnd('output', this.id);
+            }
+        } else {
+            // ── CSR: tạo markers mới ─────────────────────────────────────────
+            this.openTag = markerRegistry.createMarkerStart('output', this.id);
+            this.closeTag = markerRegistry.createMarkerEnd('output', this.id);
+        }
+    }
+
+    /**
+     * Tìm cặp comment markers và text node từ server-rendered HTML.
+     *
+     * Duyệt comment nodes trong parent element, tìm cặp khớp format chuẩn §5.1:
+     *   open:  `s:o:{this.id}-s`
+     *   close: `s:o:{this.id}-e`
+     *
+     * Nếu có text node giữa 2 markers → claim luôn để không tạo thừa.
+     */
+    private claimSSRMarkers(): { open: Comment; close: Comment; textNode: Text | null } | null {
+        const pair = markerRegistry.claim('output', this.id, this.parent?.element ?? null);
+        if (!pair) return null;
+
+        // Text node giữa 2 marker — claim luôn để không tạo thừa.
+        let textNode: Text | null = null;
+        let sibling = pair.open.nextSibling;
+        while (sibling && sibling !== pair.close) {
+            if (sibling.nodeType === Node.TEXT_NODE) {
+                textNode = sibling as Text;
+                break;
+            }
+            sibling = sibling.nextSibling;
+        }
+        return { open: pair.open, close: pair.close, textNode };
     }
 
     setParentElement(parent: HtmlInterface | null): void {
@@ -74,23 +119,73 @@ export class Output implements OutputInterface {
         }
     }
 
+    /** Nodes của raw HTML mode ({!! !!}) — track để clear khi update */
+    private rawNodes: Node[] = [];
+
     /**
-     * Render — insert markers + initial text into parent element.
+     * Render — idempotent + position-aware (RUNTIME_CONTRACT.md §2):
+     *   - Markers chưa nằm trong DOM → caller chưa đặt → tự append vào parent
+     *     (đường mountElementList: thứ tự duyệt tuần tự nên vị trí đúng).
+     *   - Markers ĐÃ nằm trong DOM (caller như Reactive đã chèn đúng chỗ)
+     *     → chỉ render nội dung GIỮA markers. FIX(baseline#6).
      */
     render(): void {
-        if (!this.parent?.element || this._isDestroyed) return;
+        if (this._isDestroyed) return;
+
+        // ── Hydrate mode: markers đã trong DOM, text node đã claim ──────
+        // Chỉ cần đảm bảo markers có mặt và text đồng bộ với state hiện tại.
+        // Không tạo thêm node, không clear — giữ nguyên DOM server-rendered.
+        if (this.initMode === InitModes.HYDRATE && this.openTag.parentNode && this.textNode) {
+            return;
+        }
 
-        const parentEl = this.parent.element;
+        if (this.openTag.parentNode && this.textNode) {
+            this.update();
+            return;
+        }
+        if (!this.openTag.parentNode) {
+            const parentEl = this.parent?.element;
+            if (!parentEl) return;
+            parentEl.appendChild(this.openTag);
+            parentEl.appendChild(this.closeTag);
+        }
 
-        // Append markers + text node
-        parentEl.appendChild(this.openTag);
+        this.clearContent();
 
         const rawText = String(this.contentFactory() ?? '');
-        const displayText = this.isEscapeHTML ? escapeHTML(rawText) : rawText;
-        this.textNode = document.createTextNode(displayText);
-        parentEl.appendChild(this.textNode);
+        if (this.isEscapeHTML) {
+            this.textNode = document.createTextNode(rawText);
+            this.insertBeforeClose(this.textNode);
+        } else {
+            this.renderRaw(rawText);
+        }
+    }
+
+    /** Xoá toàn bộ nodes giữa open/close markers */
+    private clearContent(): void {
+        let current: Node | null = this.openTag.nextSibling;
+        while (current && current !== this.closeTag) {
+            const next: Node | null = current.nextSibling;
+            (current as ChildNode).remove();
+            current = next;
+        }
+        this.textNode = null;
+        this.rawNodes = [];
+    }
 
-        parentEl.appendChild(this.closeTag);
+    private insertBeforeClose(node: Node): void {
+        this.closeTag.parentNode?.insertBefore(node, this.closeTag);
+    }
+
+    /** Parse HTML string → DOM nodes thật, chèn giữa markers */
+    private renderRaw(html: string): void {
+        if (!html) return;
+        const range = document.createRange();
+        const container = (this.closeTag.parentNode as HTMLElement) ?? document.body;
+        range.selectNodeContents(container);
+        const fragment = range.createContextualFragment(html);
+        this.rawNodes = Array.from(fragment.childNodes);
+        this.insertBeforeClose(fragment);
     }
 
     /**
@@ -123,33 +218,55 @@ export class Output implements OutputInterface {
     }
 
     /**
-     * Update — re-evaluate contentFactory and update text node in-place.
-     * O(1) — chỉ thay textContent, không tạo/xóa DOM nodes.
+     * Update — re-evaluate contentFactory.
+     * Escaped mode: O(1) — chỉ thay textContent.
+     * Raw mode: clear giữa markers → parse + chèn lại.
      */
     private update(): void {
-        if (!this.textNode || this._isDestroyed) return;
+        if (this._isDestroyed) return;
 
         const rawText = String(this.contentFactory() ?? '');
-        const displayText = this.isEscapeHTML ? escapeHTML(rawText) : rawText;
 
-        if (this.textNode.textContent !== displayText) {
-            this.textNode.textContent = displayText;
+        if (this.isEscapeHTML && this.textNode) {
+            if (this.textNode.textContent !== rawText) {
+                this.textNode.textContent = rawText;
+            }
+            return;
+        }
+
+        // Raw mode hoặc textNode chưa tồn tại → render lại nội dung giữa markers
+        if (this.openTag.parentNode) {
+            this.clearContent();
+            if (this.isEscapeHTML) {
+                this.textNode = document.createTextNode(rawText);
+                this.insertBeforeClose(this.textNode);
+            } else {
+                this.renderRaw(rawText);
+            }
         }
     }
 
     /**
      * Destroy — cleanup everything.
      */
+    /** Registry guard — alias của _isDestroyed cho ViewController.aliveFromRegistry */
+    public get __destroyed__(): boolean { return this._isDestroyed; }
+
     destroy(): void {
         if (this._isDestroyed) return;
         this._isDestroyed = true;
+        this.ctx.releaseElement?.(this);
         this.stop();
 
-        // Remove text node
-        if (this.textNode) {
-            this.textNode.remove();
-            this.textNode = null;
+        // Remove mọi nội dung giữa markers (text node hoặc raw nodes)
+        let current: Node | null = this.openTag.nextSibling;
+        while (current && current !== this.closeTag) {
+            const next: Node | null = current.nextSibling;
+            (current as ChildNode).remove();
+            current = next;
         }
+        this.textNode = null;
+        this.rawNodes = [];
 
         // Remove markers
         this.openTag.remove();
@@ -160,8 +277,8 @@ export class Output implements OutputInterface {
 
     // ─── OneElement markers ─────────────────────────────
 
-    get isOneElement(): boolean { return true; }
-    set isOneElement(_: boolean) {}
+    get isSaoElement(): boolean { return true; }
+    set isSaoElement(_: boolean) {}
     get isOneOutput(): boolean { return true; }
     set isOneOutput(_: boolean) {}
 }