bobe-dom 0.0.62 → 0.0.64

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('bobe')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'bobe'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BobeDom = {}, global.Bobe));
-})(this, (function (exports, bobe) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('bobe'), require('htmlparser2')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'bobe', 'htmlparser2'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BobeDom = {}, global.Bobe, global.Htmlparser2));
+})(this, (function (exports, bobe, htmlparser2) { 'use strict';
 
   const BOOLEAN_ATTRS$1 = new Set(['disabled', 'readonly', 'checked', 'selected', 'hidden', 'multiple', 'required', 'autofocus', 'autoplay', 'controls', 'loop', 'muted', 'defer', 'async', 'reversed', 'open', 'itemscope', 'ismap', 'nohref', 'noshade', 'nowrap', 'compact', 'default']);
   const VALUE_PROP_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
@@ -120,8 +120,8 @@
       return false;
     }
   };
-  const leaveNode$1 = () => {};
-  const leaveLogicNode$1 = () => {};
+  const leaveNode = () => {};
+  const leaveLogicNode = () => {};
   const render = bobe.customRender({
     createNode: createNode$1,
     setProp: setProp$1,
@@ -131,68 +131,98 @@
     firstChild: firstChild$1,
     nextSib: nextSib$1,
     beforeIndent: beforeIndent$1,
-    leaveNode: leaveNode$1,
-    leaveLogicNode: leaveLogicNode$1
+    leaveNode,
+    leaveLogicNode
   });
 
-  let ctx = {
-    root: null,
-    current: null
-  };
-  const cleanCtx = () => Object.keys(ctx).forEach(key => {
-    ctx[key] = null;
-  });
-
-  class SSRNode {
-    parent = null;
-    firstChild = null;
-    lastChild = null;
-    nextSibling = null;
-    prevSibling = null;
-    closed = false;
-    startClosed = false;
-    _innerHtml = null;
-  }
-  let SSRNodeType = function (SSRNodeType) {
+  (function (SSRNodeType) {
     SSRNodeType[SSRNodeType["Element"] = 0] = "Element";
     SSRNodeType[SSRNodeType["Text"] = 1] = "Text";
     SSRNodeType[SSRNodeType["Anchor"] = 2] = "Anchor";
     SSRNodeType[SSRNodeType["Root"] = 3] = "Root";
     return SSRNodeType;
-  }({});
-  class Element extends SSRNode {
-    type = SSRNodeType.Element;
-    textContent = null;
-    attrs = {};
-    constructor(value, parent) {
-      super();
-      this.value = value;
-      this.parent = parent;
-    }
-  }
-  class Text extends SSRNode {
-    type = SSRNodeType.Text;
-    constructor(textContent, parent) {
-      super();
-      this.textContent = textContent;
-      this.parent = parent;
+  })({});
+  class SSRFiber {
+    parent = undefined;
+    next = undefined;
+    child = undefined;
+    html = undefined;
+    openTagEnd = undefined;
+    constructor(type, props = {}) {
+      this.type = type;
+      this.props = props;
+    }
+    querySelector(selector) {
+      const idMatch = selector.match(/#([\w-]+)/);
+      const id = idMatch ? idMatch[1] : null;
+      const classMatches = selector.match(/\.[\w-]+/g);
+      const classes = classMatches ? classMatches.map(c => c.slice(1)) : [];
+      const tag = selector.replace(/#[\w-]+/g, '').replace(/\.[\w-]+/g, '').trim() || null;
+      const walk = node => {
+        if (!node) return null;
+        if (node.type !== 'root' && node.type !== 'anchor' && node.type !== 'text') {
+          if (!tag || node.type === tag) {
+            if (!id || node.props['id'] === id) {
+              if (classes.length === 0 || classes.every(c => (node.props['class'] || '').split(/\s+/).includes(c))) {
+                return node;
+              }
+            }
+          }
+        }
+        return walk(node.child) || walk(node.next);
+      };
+      return walk(this.child);
     }
-  }
-  class Anchor extends SSRNode {
-    type = SSRNodeType.Anchor;
-    constructor(value, parent) {
-      super();
-      this.value = value;
-      this.parent = parent;
+    getElementById(id) {
+      return this.querySelector(`#${id}`);
     }
   }
-  class Root extends SSRNode {
-    type = SSRNodeType.Root;
-    constructor(value, parent) {
-      super();
-      this.value = value;
-      this.parent = parent;
-    }
+
+  function parseHtmlToFibers(html, root) {
+    const stack = [{
+      parent: root,
+      lastChild: null
+    }];
+    const append = node => {
+      const frame = stack[stack.length - 1];
+      if (!frame.parent.child) {
+        frame.parent.child = node;
+      } else if (frame.lastChild) {
+        frame.lastChild.next = node;
+      }
+      frame.lastChild = node;
+      node.parent = frame.parent;
+    };
+    let parserRef;
+    const parser = new htmlparser2.Parser({
+      onparserinit(p) {
+        parserRef = p;
+      },
+      onopentag(name, attribs) {
+        const fiber = new SSRFiber(name, {
+          ...attribs
+        });
+        fiber.openTagEnd = parserRef.endIndex;
+        append(fiber);
+        stack.push({
+          parent: fiber,
+          lastChild: null
+        });
+      },
+      ontext(text) {
+        const fiber = new SSRFiber('text', {
+          text
+        });
+        append(fiber);
+      },
+      onclosetag() {
+        stack.pop();
+        const top = stack[stack.length - 1];
+        top.lastChild ?? null;
+      }
+    });
+    parser.write(html);
+    parser.end();
   }
 
   const VOID_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
@@ -219,161 +249,150 @@
     return TEXT_RE.test(s) ? s.replace(TEXT_RE, m => TEXT_MAP[m]) : s;
   };
   const createNode = name => {
-    if (name === 'text') {
-      return new Text('');
-    }
-    ctx.root.value += `<${name}`;
-    return new Element(name);
+    return new SSRFiber(name);
   };
   const setProp = (node, key, value) => {
-    if (node.startClosed) return;
-    if (key.startsWith('on') || key === 'ref') return;
-    if (key === 'text') {
-      if (value == null) return;
-      node.textContent = value;
-      return;
-    }
+    node.props[key] = value;
     if (key === 'html') {
-      if (value == null) return;
-      node._innerHtml = String(value);
-      return;
+      parseHtmlToFibers(value, node);
     }
-    if (key === 'class') {
-      if (value == null) return;
-      let classStr;
-      if (typeof value === 'object' && !Array.isArray(value)) {
-        classStr = Object.entries(value).filter(([, v]) => !!v).map(([k]) => k).join(' ');
-      } else {
-        classStr = typeof value === 'boolean' ? value ? 'true' : '' : String(value);
-      }
-      if (classStr) ctx.root.value += ` class="${escapeAttr(classStr)}"`;
-      return;
-    }
-    if (key === 'style') {
-      if (value == null) return;
-      ctx.root.value += ` style="${escapeAttr(String(value))}"`;
-      return;
-    }
-    if (BOOLEAN_ATTRS.has(key)) {
-      if (value !== false && value !== null && value !== undefined) {
-        ctx.root.value += ` ${key}`;
-      }
-      return;
-    }
-    if (key.startsWith('data-') || key.startsWith('aria-')) {
-      if (value == null) return;
-      ctx.root.value += ` ${key}="${escapeAttr(value)}"`;
-      return;
-    }
-    if (value == null) return;
-    ctx.root.value += ` ${key}="${escapeAttr(value)}"`;
-  };
-  const appendInnerContent = node => {
-    if (node._innerHtml != null) {
-      ctx.root.value += node._innerHtml;
-      return true;
-    }
-    if (node.textContent != null) {
-      ctx.root.value += escapeText(node.textContent);
-      return true;
-    }
-    return false;
   };
   const beforeIndent = node => {
-    if (node instanceof Text) return true;
-    const hasText = node.textContent != null;
-    const hasHtml = node._innerHtml != null;
-    if (VOID_TAGS.has(node.value)) {
-      ctx.root.value += `/>`;
-      console.warn(`<${node.value}> can't have children`);
-      node.startClosed = true;
-      node.closed = true;
+    if (node.props.html != null) {
       return false;
     }
-    if (hasText || hasHtml) {
-      console.warn(`<${node.value}> has ${hasHtml ? 'html' : 'text'} content and child elements — children ignored`);
-      ctx.root.value += `>`;
-      appendInnerContent(node);
-      ctx.root.value += `</${node.value}>`;
-      node.startClosed = true;
-      node.closed = true;
-      return false;
-    }
-    ctx.root.value += `>`;
-    node.startClosed = true;
-    return true;
-  };
-  const leaveLogicNode = node => {
-    const realAfter = node.realAfter;
-    ctx.root.value += `<!--${realAfter.value}-->`;
-  };
-  const leaveNode = (node, isDedent) => {
-    if (node.closed) return;
-    if (node instanceof Text) {
-      ctx.root.value += escapeText(node.textContent);
-    } else {
-      if (node.startClosed) {
-        if (VOID_TAGS.has(node.value)) ; else {
-          ctx.root.value += `</${node.value}>`;
-        }
-      } else {
-        if (VOID_TAGS.has(node.value)) {
-          ctx.root.value += ` />`;
-        } else {
-          ctx.root.value += `>`;
-          appendInnerContent(node);
-          ctx.root.value += `</${node.value}>`;
-        }
-      }
-    }
   };
   const insertAfter = (parent, node, prev) => {
-    const next = prev ? prev.nextSibling : parent.firstChild;
-    node.nextSibling = next;
-    node.prevSibling = prev;
+    let next;
     if (prev) {
-      prev.nextSibling = node;
-    } else {
-      parent.firstChild = node;
-    }
-    if (next) {
-      next.prevSibling = node;
+      next = prev.next;
+      prev.next = node;
     } else {
-      parent.lastChild = node;
+      next = parent.child;
+      parent.child = node;
     }
+    node.next = next;
     node.parent = parent;
   };
   const createAnchor = (name, isBefore) => {
-    if (isBefore) {
-      ctx.root.value += `<!--${name}-->`;
-    }
-    return new Anchor(name);
+    return new SSRFiber('anchor', {
+      name,
+      isBefore
+    });
   };
-  const remove = node => {
+  const remove = (node, prev) => {
     const parent = node.parent,
-      prevSibling = node.prevSibling,
-      nextSibling = node.nextSibling;
-    if (prevSibling) {
-      prevSibling.nextSibling = nextSibling;
-    }
-    if (nextSibling) {
-      nextSibling.prevSibling = prevSibling;
+      next = node.next;
+    node.next = null;
+    if (prev) {
+      prev.next = next;
+    } else {
+      parent.child = next;
     }
-    if (parent) {
-      if (parent.firstChild === node) {
-        parent.firstChild = nextSibling;
+    node.parent = null;
+  };
+  const firstChild = node => node.child;
+  const nextSib = node => node.next;
+  function walkFiber(root) {
+    let point = root;
+    let shouldSink = true;
+    sink: do {
+      if (point.type === 'root') {
+        point.html = '';
+      } else if (point.type === 'anchor') {
+        point.html = `<!--${point.props.name}-->`;
+      } else if (point.type === 'text') {
+        const text = point.props.text;
+        if (text != null) {
+          point.html = escapeText(point.props.text);
+        }
+      } else {
+        point.html = `<${point.type}`;
+        const props = point.props;
+        let text;
+        for (const key in props) {
+          const value = props[key];
+          if (key.startsWith('on') || key === 'ref') continue;
+          if (key === 'html') {
+            continue;
+          }
+          if (key === 'text') {
+            text = value;
+            continue;
+          }
+          if (key === 'class') {
+            if (value == null) continue;
+            let classStr;
+            if (typeof value === 'object' && !Array.isArray(value)) {
+              classStr = Object.entries(value).filter(([, v]) => !!v).map(([k]) => k).join(' ');
+            } else {
+              classStr = typeof value === 'boolean' ? value ? 'true' : '' : String(value);
+            }
+            if (classStr) {
+              point.html += ` class="${escapeAttr(classStr)}"`;
+            }
+            continue;
+          }
+          if (key === 'style') {
+            if (value == null) continue;
+            point.html += ` style="${escapeAttr(String(value))}"`;
+            continue;
+          }
+          if (BOOLEAN_ATTRS.has(key)) {
+            if (value !== false && value !== null && value !== undefined) {
+              point.html += ` ${key}`;
+            }
+            continue;
+          }
+          if (key.startsWith('data-') || key.startsWith('aria-')) {
+            if (value == null) continue;
+            point.html += ` ${key}="${escapeAttr(value)}"`;
+            continue;
+          }
+          if (value == null) continue;
+          point.html += ` ${key}="${escapeAttr(value)}"`;
+        }
+        if (text != null && props.html == null) {
+          const content = escapeText(text);
+          point.html += `>${content}</${point.type}>`;
+          if (point.child) console.warn(`<${point.type}> has text content and child elements — children ignored`);
+          shouldSink = false;
+        } else {
+          if (VOID_TAGS.has(point.type)) {
+            point.html += `/>`;
+            if (point.child) console.warn(`<${point.type}> can't have children`);
+            shouldSink = false;
+          } else {
+            point.html += `>`;
+          }
+        }
       }
-      if (parent.lastChild === node) {
-        parent.lastChild = prevSibling;
+      if (point.child && shouldSink) {
+        point = point.child;
+        continue;
       }
-    }
-  };
-  const firstChild = node => node.firstChild;
-  const nextSib = node => node.nextSibling;
+      do {
+        const notRoot = point !== root;
+        const notAnchor = point.type !== 'anchor';
+        const notText = point.type !== 'text';
+        if (shouldSink && notRoot && notAnchor && notText) {
+          point.html += `</${point.type}>`;
+        }
+        if (notRoot) {
+          point.parent.html += point.html;
+        }
+        shouldSink = true;
+        if (!notRoot) break sink;
+        if (point.next) {
+          point = point.next;
+          break;
+        }
+        point = point.parent;
+      } while (true);
+    } while (true);
+  }
   const renderHtmlStr = ComponentClass => {
-    cleanCtx();
-    const root = new Root('');
-    ctx.root = ctx.current = root;
+    const root = new SSRFiber('root');
     const render = bobe.customRender({
       createNode,
       setProp,
@@ -383,34 +402,42 @@
       firstChild,
       nextSib,
       beforeIndent,
-      leaveNode,
-      leaveLogicNode,
       noopEffect: true
     });
     render(ComponentClass, root);
-    return {
-      html: ctx.root.value
-    };
+    walkFiber(root);
+    return root.html;
   };
 
   class TreeCursor {
     claimed = new WeakSet();
+    current = null;
     constructor(container) {
       this.parent = container;
     }
     enterChildren(node) {
       this.parent = node;
+      this.current = null;
+    }
+    setParent(node) {
+      this.parent = node;
+      this.current = null;
+    }
+    setCurrent(node) {
+      this.current = node;
     }
     leaveToParent(node) {
       if (node === this.parent && this.parent.parentNode) {
         this.parent = this.parent.parentNode;
+        this.current = node;
       }
     }
     findUnclaimed(predicate) {
-      let node = this.parent.firstChild;
+      let node = this.current?.nextSibling || this.parent.firstChild;
       while (node) {
         if (!this.claimed.has(node) && predicate(node)) {
           this.claimed.add(node);
+          this.current = node;
           return node;
         }
         node = node.nextSibling;
@@ -469,7 +496,21 @@
     const leaveNode = node => {
       if (isFirstRender) cursor.leaveToParent(node);
     };
-    const leaveLogicNode = node => {
+    const beforeLogicIndent = node => {
+      if (isFirstRender && node.tpData) {
+        const targetDom = node.tpData.node;
+        if (targetDom) cursor.enterChildren(targetDom);
+      }
+    };
+    const leaveLogicNode = (node, _isDedent) => {
+      if (isFirstRender && node.tpData) {
+        const parentDom = node.realAfter?.parentNode;
+        if (parentDom) {
+          cursor.setParent(parentDom);
+          if (node.realAfter) cursor.setCurrent(node.realAfter);
+        }
+        return;
+      }
       if (isFirstRender) cursor.leaveToParent(node);
     };
     const render = bobe.customRender({
@@ -481,6 +522,7 @@
       firstChild: firstChild$1,
       nextSib: nextSib$1,
       beforeIndent,
+      beforeLogicIndent,
       leaveNode,
       leaveLogicNode,
       onBeforeFlush: () => {
@@ -498,13 +540,14 @@
   exports.firstChild = firstChild$1;
   exports.hydrate = hydrate;
   exports.insertAfter = insertAfter$1;
-  exports.leaveLogicNode = leaveLogicNode$1;
-  exports.leaveNode = leaveNode$1;
+  exports.leaveLogicNode = leaveLogicNode;
+  exports.leaveNode = leaveNode;
   exports.nextSib = nextSib$1;
   exports.remove = remove$1;
   exports.render = render;
   exports.renderHtmlStr = renderHtmlStr;
   exports.setProp = setProp$1;
+  exports.walkFiber = walkFiber;
 
 }));
 //# sourceMappingURL=index.umd.js.map