@wsxjs/wsx-core 0.0.28 → 0.1.0

package/src/light-component.ts

@@ -10,8 +10,9 @@
 import { h, type JSXChildren } from "./jsx-factory";
 import { BaseComponent, type BaseComponentConfig } from "./base-component";
 import { RenderContext } from "./render-context";
-import { shouldPreserveElement } from "./utils/element-marking";
 import { createLogger } from "@wsxjs/wsx-logger";
+import { updateProps, updateChildren } from "./utils/element-update";
+import { shouldPreserveElement } from "./utils/element-marking";
 
 const logger = createLogger("LightComponent");
 
@@ -94,10 +95,10 @@ export abstract class LightComponent extends BaseComponent {
             } else {
                 // 没有内容，需要渲染
                 // 清空旧内容（保留样式元素）
-                const childrenToRemove = Array.from(this.children).filter(
-                    (child) => child !== styleElement
+                const childrenToRemove = Array.from(this.childNodes).filter(
+                    (node) => node !== styleElement
                 );
-                childrenToRemove.forEach((child) => child.remove());
+                childrenToRemove.forEach((node) => node.remove());
 
                 // 渲染JSX内容到Light DOM
                 const content = RenderContext.runInContext(this, () => this.render());
@@ -156,6 +157,10 @@ export abstract class LightComponent extends BaseComponent {
         return HTMLElement.prototype.querySelectorAll.call(this, selector) as NodeListOf<T>;
     }
 
+    /**
+     * 递归协调子元素
+     * 更新现有子元素的属性和内容，而不是替换整个子树
+     */
     /**
      * 内部重渲染实现
      * 包含从 rerender() 方法迁移的实际渲染逻辑
@@ -170,9 +175,8 @@ export abstract class LightComponent extends BaseComponent {
             return;
         }
 
-        // 1. 捕获焦点状态（在 DOM 替换之前）
-        const focusState = this.captureFocusState();
-        this._pendingFocusState = focusState;
+        // 1. (已移除) 捕获焦点状态
+        // 根据 RFC 0061，手动焦点管理已被弃用，核心协调引擎现在负责通过 DOM 复用来保持焦点。
 
         // 2. 保存 JSX children（通过 JSX factory 直接添加的 children）
         // 这些 children 不是 render() 返回的内容，应该保留
@@ -180,23 +184,7 @@ export abstract class LightComponent extends BaseComponent {
 
         try {
             // 3. 重新渲染JSX内容
-            const content = RenderContext.runInContext(this, () => this.render());
-
-            // 4. 在添加到 DOM 之前恢复值，避免浏览器渲染状态值
-            if (focusState && focusState.key && focusState.value !== undefined) {
-                const target = content.querySelector(
-                    `[data-wsx-key="${focusState.key}"]`
-                ) as HTMLElement;
-
-                if (target) {
-                    if (
-                        target instanceof HTMLInputElement ||
-                        target instanceof HTMLTextAreaElement
-                    ) {
-                        target.value = focusState.value;
-                    }
-                }
-            }
+            const newContent = RenderContext.runInContext(this, () => this.render());
 
             // 5. 确保样式元素存在
             const stylesToApply = this._autoStyles || this.config.styles;
@@ -218,71 +206,97 @@ export abstract class LightComponent extends BaseComponent {
                 }
             }
 
-            // 6. 使用 requestAnimationFrame 批量执行 DOM 操作
-            requestAnimationFrame(() => {
-                // 先添加新内容
-                this.appendChild(content);
+            // 6. 执行 DOM 操作
+            // 获取当前的 childNodes（包括文本节点，排除样式元素和 JSX children）
+            const allShadowChildren = Array.from(this.childNodes);
+            const oldChildren = allShadowChildren.filter((child) => {
+                // 排除样式元素
+                if (
+                    stylesToApply &&
+                    child instanceof HTMLStyleElement &&
+                    child.getAttribute("data-wsx-light-component") === styleName
+                ) {
+                    return false;
+                }
+                // 排除 JSX children (RFC: 这里的 jsxChildren 现在包含 Text 节点)
+                if (jsxChildren.includes(child as any)) {
+                    return false;
+                }
+                // 排除保留元素 (RFC 0058)
+                if (shouldPreserveElement(child)) {
+                    return false;
+                }
+                return true;
+            });
 
-                // 移除旧内容（保留 JSX children、样式元素和未标记元素）
-                // 关键修复：使用 shouldPreserveElement() 来保护手动创建的元素（如第三方库注入的元素）
-                const oldChildren = Array.from(this.children).filter((child) => {
-                    // 保留新添加的内容
-                    if (child === content) {
-                        return false;
-                    }
-                    // 保留样式元素
-                    if (
-                        stylesToApply &&
-                        child instanceof HTMLStyleElement &&
-                        child.getAttribute("data-wsx-light-component") === styleName
-                    ) {
-                        return false;
-                    }
-                    // 保留 JSX children（通过 JSX factory 直接添加的 children）
-                    if (child instanceof HTMLElement && jsxChildren.includes(child)) {
-                        return false;
-                    }
-                    // 保留未标记的元素（手动创建的元素、第三方库注入的元素）
-                    // 这是 RFC 0037 Phase 5 的核心：保护未标记元素
-                    if (shouldPreserveElement(child)) {
-                        return false;
+            // 7. True DOM Reconciliation (RFC 0058) for Light DOM
+            // Similar to WebComponent but handling list of children directly
+
+            // Case 1: Single Root => Single Root
+            if (
+                oldChildren.length === 1 &&
+                newContent instanceof HTMLElement &&
+                oldChildren[0] instanceof HTMLElement &&
+                oldChildren[0].tagName === newContent.tagName
+            ) {
+                const oldRoot = oldChildren[0] as HTMLElement;
+                const newRoot = newContent;
+
+                if (oldRoot !== newRoot) {
+                    const cacheManager = RenderContext.getDOMCache();
+                    if (cacheManager) {
+                        const oldMetadata = cacheManager.getMetadata(oldRoot);
+                        const newMetadata = cacheManager.getMetadata(newRoot);
+                        if (oldMetadata && newMetadata) {
+                            updateProps(
+                                oldRoot,
+                                oldMetadata.props as Record<string, unknown>,
+                                newMetadata.props as Record<string, unknown>,
+                                oldRoot.tagName
+                            );
+                            updateChildren(
+                                oldRoot,
+                                oldMetadata.children as JSXChildren[],
+                                newMetadata.children as JSXChildren[],
+                                cacheManager
+                            );
+                        } else {
+                            oldRoot.replaceWith(newRoot);
+                        }
+                    } else {
+                        oldRoot.replaceWith(newRoot);
                     }
-                    return true;
-                });
+                }
+            } else {
+                // Case 2: Multi-root or mismatch
+                // For now, doing smart replacement
                 oldChildren.forEach((child) => child.remove());
+                this.appendChild(newContent);
+            }
 
-                // 确保样式元素存在并在第一个位置
-                // 关键修复：在元素复用场景中，如果 _autoStyles 存在但样式元素被意外移除，需要重新创建
-                if (stylesToApply) {
-                    let styleElement = this.querySelector(
-                        `style[data-wsx-light-component="${styleName}"]`
-                    ) as HTMLStyleElement | null;
-
-                    if (!styleElement) {
-                        // 样式元素被意外移除，重新创建
-                        styleElement = document.createElement("style");
-                        styleElement.setAttribute("data-wsx-light-component", styleName);
-                        styleElement.textContent = stylesToApply;
-                        this.insertBefore(styleElement, this.firstChild);
-                    } else if (styleElement.textContent !== stylesToApply) {
-                        // 样式内容已变化，更新
-                        styleElement.textContent = stylesToApply;
-                    } else if (styleElement !== this.firstChild) {
-                        // 样式元素存在但不在第一个位置，移动到第一个位置
-                        this.insertBefore(styleElement, this.firstChild);
-                    }
+            // 确保样式元素存在并在第一个位置 (re-verify)
+            if (stylesToApply) {
+                let styleEl = this.querySelector(
+                    `style[data-wsx-light-component="${styleName}"]`
+                ) as HTMLStyleElement | null;
+
+                if (!styleEl) {
+                    styleEl = document.createElement("style");
+                    styleEl.setAttribute("data-wsx-light-component", styleName);
+                    styleEl.textContent = stylesToApply;
+                    this.insertBefore(styleEl, this.firstChild);
+                } else if (styleEl !== this.firstChild) {
+                    this.insertBefore(styleEl, this.firstChild);
                 }
+            }
 
-                // 恢复焦点状态
-                requestAnimationFrame(() => {
-                    this.restoreFocusState(focusState);
-                    this._pendingFocusState = null;
-                    // 调用 onRendered 生命周期钩子
-                    this.onRendered?.();
-                    // 在 onRendered() 完成后清除渲染标志，允许后续的 scheduleRerender()
-                    this._isRendering = false;
-                });
-            });
+            // 恢复焦点状态 (已根据 RFC 0061 移除)
+            // this.restoreFocusState(focusState);
+            // this._pendingFocusState = null;
+            // 调用 onRendered 生命周期钩子
+            this.onRendered?.();
+            // 在 onRendered() 完成后清除渲染标志，允许后续的 scheduleRerender()
+            this._isRendering = false;
         } catch (error) {
             logger.error(`[${this.constructor.name}] Error in _rerender:`, error);
             this.renderError(error);
@@ -297,16 +311,18 @@ export abstract class LightComponent extends BaseComponent {
      * 在 Light DOM 中，JSX children 是通过 JSX factory 直接添加到组件元素的
      * 这些 children 不是 render() 返回的内容，应该保留
      */
-    private getJSXChildren(): HTMLElement[] {
+    private getJSXChildren(): Node[] {
         // 在 connectedCallback 中标记的 JSX children
-        // 使用 data 属性标记：data-wsx-jsx-child="true"
-        const jsxChildren = Array.from(this.children)
-            .filter(
-                (child) =>
-                    child instanceof HTMLElement &&
-                    child.getAttribute("data-wsx-jsx-child") === "true"
-            )
-            .map((child) => child as HTMLElement);
+        // 使用 data 属性或内部属性标记
+        const jsxChildren = Array.from(this.childNodes).filter((node) => {
+            if (node instanceof HTMLElement) {
+                return node.getAttribute("data-wsx-jsx-child") === "true";
+            }
+            if (node.nodeType === Node.TEXT_NODE) {
+                return (node as Text & { __wsxJsxChild?: boolean }).__wsxJsxChild === true;
+            }
+            return false;
+        });
 
         return jsxChildren;
     }
@@ -323,13 +339,15 @@ export abstract class LightComponent extends BaseComponent {
             `style[data-wsx-light-component="${styleName}"]`
         ) as HTMLStyleElement | null;
 
-        Array.from(this.children).forEach((child) => {
-            if (
-                child instanceof HTMLElement &&
-                child !== styleElement &&
-                !(child instanceof HTMLSlotElement)
-            ) {
-                child.setAttribute("data-wsx-jsx-child", "true");
+        Array.from(this.childNodes).forEach((node) => {
+            if (node !== styleElement && !(node instanceof HTMLSlotElement)) {
+                if (node instanceof HTMLElement) {
+                    node.setAttribute("data-wsx-jsx-child", "true");
+                } else if (node.nodeType === Node.TEXT_NODE) {
+                    (node as Text & { __wsxManaged?: boolean }).__wsxManaged = true;
+                    // For text nodes, we also use a custom property to identify them as JSX children
+                    (node as Text & { __wsxJsxChild?: boolean }).__wsxJsxChild = true;
+                }
             }
         });
     }

package/src/utils/cache-key.ts

@@ -22,10 +22,16 @@ const componentElementCounters = new WeakMap<BaseComponent, number>();
 
 /**
  * Component ID cache (using WeakMap to avoid memory leaks)
- * Caches component IDs to avoid recomputing them on every render.
+ * Caches component IDs to avoid recomputing them on every call.
  */
 const componentIdCache = new WeakMap<BaseComponent, string>();
 
+/**
+ * Auto-incremental instance counter for components without a manual ID.
+ */
+const instanceAutoIds = new WeakMap<BaseComponent, number>();
+let globalAutoId = 0;
+
 /**
  * Generates a cache key for a DOM element.
  *
@@ -111,7 +117,16 @@ export function getComponentId(): string {
 
         // Compute and cache
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const instanceId = (component as any)._instanceId || "default";
+        let instanceId = (component as any)._wsxInstanceId;
+
+        // 如果没有显示 ID，分配一个唯一的自动 ID (RFC 0037 增强)
+        if (instanceId === undefined || instanceId === null) {
+            if (!instanceAutoIds.has(component)) {
+                instanceAutoIds.set(component, ++globalAutoId);
+            }
+            instanceId = String(instanceAutoIds.get(component));
+        }
+
         cachedId = `${component.constructor.name}:${instanceId}`;
         componentIdCache.set(component, cachedId);
         return cachedId;

package/src/utils/dom-utils.ts

@@ -11,6 +11,7 @@ export type JSXChildren =
     | HTMLElement
     | SVGElement
     | DocumentFragment
+    | Node
     | JSXChildren[]
     | null
     | undefined
@@ -51,9 +52,15 @@ export function parseHTMLToNodes(html: string): (HTMLElement | SVGElement | stri
     // Text nodes are converted to strings, elements are kept as-is
     return Array.from(temp.childNodes).map((node) => {
         if (node instanceof HTMLElement || node instanceof SVGElement) {
+            // 关键修复：标记解析出的元素为框架管理
+            // 这确保了 shouldPreserveElement 不会错误地保留这些元素
+            // 从而防止了在频繁重渲染（如 Markdown 输入）时的元素堆积
+            (node as HTMLElement & { __wsxManaged?: boolean }).__wsxManaged = true;
             return node;
         } else {
             // Convert text nodes and other node types to strings
+            // Note: When these strings are processed by appendChildrenToElement,
+            // they will be wraped in managed text nodes.
             return node.textContent || "";
         }
     });
@@ -79,7 +86,8 @@ export function isHTMLString(str: string): boolean {
     const looksLikeMath = /^[^<]*<[^>]*>[^>]*$/.test(trimmed) && !htmlTagPattern.test(trimmed);
     if (looksLikeMath) return false;
 
-    return htmlTagPattern.test(trimmed);
+    const result = htmlTagPattern.test(trimmed);
+    return result;
 }
 
 /**
@@ -94,7 +102,7 @@ export function flattenChildren(
     children: JSXChildren[],
     skipHTMLDetection: boolean = false,
     depth: number = 0
-): (string | number | HTMLElement | SVGElement | DocumentFragment | boolean | null | undefined)[] {
+): JSXChildren[] {
     // 防止无限递归：如果深度超过 10，停止处理
     if (depth > 10) {
         console.warn(
@@ -105,16 +113,7 @@ export function flattenChildren(
                 typeof child === "string" || typeof child === "number"
         );
     }
-    const result: (
-        | string
-        | number
-        | HTMLElement
-        | SVGElement
-        | DocumentFragment
-        | boolean
-        | null
-        | undefined
-    )[] = [];
+    const result: JSXChildren[] = [];
 
     for (const child of children) {
         if (child === null || child === undefined || child === false) {
@@ -128,30 +127,17 @@ export function flattenChildren(
                 result.push(child);
             } else if (isHTMLString(child)) {
                 // 自动检测HTML字符串并转换为DOM节点
-                // 使用 try-catch 防止解析失败导致崩溃
                 try {
                     const nodes = parseHTMLToNodes(child);
-                    // 递归处理转换后的节点数组，标记为已解析，避免再次检测HTML
-                    // parseHTMLToNodes 返回的字符串是纯文本节点，不应该再次被检测为HTML
-                    // 但是为了安全，我们仍然设置 skipHTMLDetection = true
                     if (nodes.length > 0) {
                         // 直接添加解析后的节点，不再递归处理（避免无限递归）
-                        // parseHTMLToNodes 已经完成了所有解析工作
                         for (const node of nodes) {
-                            if (typeof node === "string") {
-                                // 文本节点直接添加，不再检测 HTML（已解析）
-                                result.push(node);
-                            } else {
-                                // DOM 元素直接添加
-                                result.push(node);
-                            }
+                            result.push(node);
                         }
                     } else {
-                        // 如果解析失败，回退到纯文本
                         result.push(child);
                     }
                 } catch (error) {
-                    // 如果解析失败，回退到纯文本，避免崩溃
                     console.warn("[WSX] Failed to parse HTML string, treating as text:", error);
                     result.push(child);
                 }
@@ -160,24 +146,10 @@ export function flattenChildren(
             }
         } else if (child instanceof DocumentFragment) {
             // 递归处理 DocumentFragment 中的子节点
-            // 注意：Array.from 会创建子节点的引用副本，
-            // 这样即使 Fragment 在后续过程中被 appendChild 清空，
-            // 我们的 flat children 列表仍然持有正确的节点引用。
-            // 关键：不能递归调用 flattenChildren(Array.from(child.childNodes))，
-            // 因为 DocumentFragment 本身不支持 skipHTMLDetection。
-            // 我们直接将其子节点展平到当前结果中。
             const fragmentChildren = Array.from(child.childNodes);
-            for (const fragChild of fragmentChildren) {
-                if (fragChild instanceof HTMLElement || fragChild instanceof SVGElement) {
-                    result.push(fragChild);
-                } else if (fragChild.nodeType === Node.TEXT_NODE) {
-                    result.push(fragChild.textContent || "");
-                } else if (fragChild instanceof DocumentFragment) {
-                    // 处理嵌套 Fragment（防御性编程）
-                    result.push(...flattenChildren([fragChild], skipHTMLDetection, depth + 1));
-                }
-            }
+            result.push(...flattenChildren(fragmentChildren, skipHTMLDetection, depth + 1));
         } else {
+            // 保持 Node 引用
             result.push(child);
         }
     }

package/src/utils/element-marking.ts

@@ -68,15 +68,17 @@ export function shouldPreserveElement(element: Node): boolean {
     }
 
     // 规则 2: 没有标记的元素保留（自定义元素、第三方库注入）
-    if (!isCreatedByH(element)) {
+    // 关键修正：除了检查是否由 h() 创建，还要检查是否被框架显式标记为托管 (__wsxManaged)
+    // 这主要用于处理从 HTML 字符串解析出的元素 (parseHTMLToNodes)
+    if (!isCreatedByH(element) && (element as any).__wsxManaged !== true) {
         return true;
     }
 
     // 规则 3: 显式标记保留
-    if (element.hasAttribute("data-wsx-preserve")) {
+    if (element instanceof HTMLElement && element.hasAttribute("data-wsx-preserve")) {
         return true;
     }
 
-    // 规则 4: 由 h() 创建的元素 → 不保留（由框架管理）
+    // 规则 4: 由 h() 创建或被标记为托管的元素 → 不保留（由框架管理）
     return false;
 }