bobe-dom 0.0.62 → 0.0.64

package/dist/bobe-dom.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var bobe = require('bobe');
+var htmlparser2 = require('htmlparser2');
 
 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']);
@@ -118,8 +119,8 @@ const beforeIndent$1 = node => {
     return false;
   }
 };
-const leaveNode$1 = () => {};
-const leaveLogicNode$1 = () => {};
+const leaveNode = () => {};
+const leaveLogicNode = () => {};
 const render = bobe.customRender({
   createNode: createNode$1,
   setProp: setProp$1,
@@ -129,68 +130,98 @@ const render = bobe.customRender({
   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']);
@@ -217,161 +248,150 @@ const escapeText = str => {
   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,
@@ -381,34 +401,42 @@ const renderHtmlStr = ComponentClass => {
     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;
@@ -467,7 +495,21 @@ const hydrate = (ComponentClass, rootEl) => {
   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({
@@ -479,6 +521,7 @@ const hydrate = (ComponentClass, rootEl) => {
     firstChild: firstChild$1,
     nextSib: nextSib$1,
     beforeIndent,
+    beforeLogicIndent,
     leaveNode,
     leaveLogicNode,
     onBeforeFlush: () => {
@@ -496,11 +539,12 @@ exports.createNode = createNode$1;
 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=bobe-dom.cjs.js.map