@reckona/mreact-compat 0.0.90 → 0.0.92

package/src/dom-children.ts

@@ -4,31 +4,185 @@ export function syncChildNodes(parent: ParentNode, nextNodes: readonly Node[]):
   syncScopedChildNodes(parent, null, null, nextNodes);
 }
 
+export function syncOwnedChildNodes(
+  parent: ParentNode,
+  previousNodes: readonly Node[],
+  nextNodes: readonly Node[],
+): void {
+  const nextSet = new Set(nextNodes);
+
+  for (const node of nextNodes) {
+    if (node.parentNode !== parent || node.nextSibling !== null) {
+      parent.appendChild(node);
+    }
+  }
+
+  for (const child of previousNodes) {
+    if (!nextSet.has(child)) {
+      removeChildIfPresent(parent, child);
+    }
+  }
+}
+
 export function syncScopedChildNodes(
   parent: ParentNode,
   before: ChildNode | null,
   after: ChildNode | null,
   nextNodes: readonly Node[],
 ): void {
+  if (replaceDisjointFullChildList(parent, before, after, nextNodes)) {
+    return;
+  }
+
+  if (
+    nextNodes.length > 16 &&
+    hasSingleExtraScopedChild(parent, before, after, nextNodes.length) &&
+    removeSingleMissingChild(parent, before, after, nextNodes)
+  ) {
+    return;
+  }
+
   let cursor = parent.firstChild;
 
   if (before !== null) {
     cursor = before.nextSibling;
   }
 
+  let changed = false;
+
   for (const node of nextNodes) {
     if (node !== cursor) {
       parent.insertBefore(node, cursor === after ? after : cursor);
+      changed = true;
     }
 
     cursor = node.nextSibling;
   }
 
+  if (!changed && cursor === after) {
+    return;
+  }
+
+  if (!changed && after === null && cursor === null) {
+    return;
+  }
+
   const nextSet = new Set(nextNodes);
 
   for (const child of collectScopedNodes(parent, before, after)) {
     if (!nextSet.has(child)) {
-      parent.removeChild(child);
+      removeChildIfPresent(parent, child);
+    }
+  }
+}
+
+function replaceDisjointFullChildList(
+  parent: ParentNode,
+  before: ChildNode | null,
+  after: ChildNode | null,
+  nextNodes: readonly Node[],
+): boolean {
+  if (before !== null || after !== null || nextNodes.length <= 16) {
+    return false;
+  }
+
+  const currentNodes = parent.childNodes;
+
+  if (currentNodes.length <= 16 || currentNodes.length !== nextNodes.length) {
+    return false;
+  }
+
+  const nextSet = new Set(nextNodes);
+
+  for (let index = 0; index < currentNodes.length; index += 1) {
+    if (nextSet.has(currentNodes[index]!)) {
+      return false;
     }
   }
+
+  parent.replaceChildren(...nextNodes);
+  return true;
+}
+
+function hasSingleExtraScopedChild(
+  parent: ParentNode,
+  before: ChildNode | null,
+  after: ChildNode | null,
+  nextCount: number,
+): boolean {
+  if (before === null && after === null) {
+    return parent.childNodes.length === nextCount + 1;
+  }
+
+  let cursor = before === null ? parent.firstChild : before.nextSibling;
+  let currentCount = 0;
+
+  while (cursor !== null && cursor !== after && currentCount <= nextCount + 1) {
+    currentCount += 1;
+    cursor = cursor.nextSibling;
+  }
+
+  return currentCount === nextCount + 1 && (cursor === null || cursor === after);
+}
+
+function removeSingleMissingChild(
+  parent: ParentNode,
+  before: ChildNode | null,
+  after: ChildNode | null,
+  nextNodes: readonly Node[],
+): boolean {
+  let cursor = before === null ? parent.firstChild : before.nextSibling;
+  let removed = false;
+
+  for (const nextNode of nextNodes) {
+    if (cursor === nextNode) {
+      cursor = cursor.nextSibling;
+      continue;
+    }
+
+    if (removed || cursor === null || cursor === after || cursor.nextSibling !== nextNode) {
+      return false;
+    }
+
+    const missing = cursor;
+    cursor = nextNode.nextSibling;
+    removeChildIfPresent(parent, missing);
+    removed = true;
+  }
+
+  if (cursor === after || cursor === null) {
+    return removed;
+  }
+
+  if (removed || cursor.nextSibling !== after) {
+    return false;
+  }
+
+  removeChildIfPresent(parent, cursor);
+  return true;
+}
+
+export function removeChildIfPresent(parent: ParentNode, child: Node): void {
+  if (child.parentNode !== parent) {
+    return;
+  }
+
+  try {
+    parent.removeChild(child);
+  } catch (error) {
+    if (child.parentNode !== parent && isNotFoundError(error)) {
+      return;
+    }
+
+    throw error;
+  }
+}
+
+function isNotFoundError(error: unknown): boolean {
+  const maybeError = error as { message?: unknown; name?: unknown };
+
+  return (
+    maybeError.name === "NotFoundError" ||
+    (typeof maybeError.message === "string" && maybeError.message.includes("not a child"))
+  );
 }

package/src/dom-host-rules.ts

@@ -0,0 +1,115 @@
+export type HostElement = HTMLElement | SVGElement;
+export type HostNamespace = "html" | "svg";
+
+const htmlNamespace = "http://www.w3.org/1999/xhtml";
+const svgNamespace = "http://www.w3.org/2000/svg";
+
+const isUnitlessNumberStyle = new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexPositive",
+  "flexShrink",
+  "flexNegative",
+  "flexOrder",
+  "gridArea",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "fontWeight",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "scale",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth",
+]);
+
+export function createHostElement(
+  documentRef: Document,
+  tagName: string,
+  namespace: HostNamespace,
+): HostElement {
+  if (namespaceForHostElement(namespace, tagName) === "svg") {
+    return documentRef.createElementNS(svgNamespace, tagName);
+  }
+
+  return documentRef.createElement(tagName);
+}
+
+export function isHostElement(value: unknown): value is HostElement {
+  return value instanceof HTMLElement || value instanceof SVGElement;
+}
+
+export function namespaceForHostElement(
+  parentNamespace: HostNamespace,
+  tagName: string,
+): HostNamespace {
+  if (tagName === "svg") {
+    return "svg";
+  }
+
+  return parentNamespace;
+}
+
+export function namespaceForHostChildren(
+  elementNamespace: HostNamespace,
+  tagName: string,
+): HostNamespace {
+  return elementNamespace === "svg" && tagName === "foreignObject" ? "html" : elementNamespace;
+}
+
+export function hostElementMatches(
+  element: HostElement,
+  tagName: string,
+  namespace: HostNamespace,
+): boolean {
+  return element.tagName.toLowerCase() === tagName && element.namespaceURI === namespaceUri(namespace);
+}
+
+export function serializeClientStyleValue(name: string, value: unknown): string {
+  if (typeof value === "number" && value !== 0 && !name.startsWith("--") && !isUnitlessNumberStyle.has(name)) {
+    return `${value}px`;
+  }
+
+  return String(value);
+}
+
+export function styleNameToCssName(name: string): string {
+  if (name.startsWith("--")) {
+    return name;
+  }
+
+  const cssName = name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+  return cssName.startsWith("ms-") ? `-${cssName}` : cssName;
+}
+
+function namespaceUri(namespace: HostNamespace): string {
+  return namespace === "svg" ? svgNamespace : htmlNamespace;
+}