@thomas-siegfried/tapout 0.0.1

package/src/utils.ts

@@ -0,0 +1,123 @@
+import { PureComputed } from './computed.js';
+import { isReadableSubscribable } from './subscribable.js';
+import type { ReadableSubscribable, Subscription } from './subscribable.js';
+import { options } from './options.js';
+
+const MAX_NESTED_OBSERVABLE_DEPTH = 10;
+
+export function unwrapObservable(value: unknown): unknown {
+  for (let i = 0; isReadableSubscribable(value) && i < MAX_NESTED_OBSERVABLE_DEPTH; i++) {
+    value = value.get();
+  }
+  return value;
+}
+
+export function peekObservable(value: unknown): unknown {
+  for (let i = 0; isReadableSubscribable(value) && i < MAX_NESTED_OBSERVABLE_DEPTH; i++) {
+    value = value.peek();
+  }
+  return value;
+}
+
+function canHaveProperties(obj: unknown): obj is Record<string | number, unknown> {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    !(obj instanceof RegExp) &&
+    !(obj instanceof Date) &&
+    !(obj instanceof String) &&
+    !(obj instanceof Number) &&
+    !(obj instanceof Boolean)
+  );
+}
+
+function mapJsObjectGraph(
+  rootObject: unknown,
+  visited: Map<object, unknown>,
+): unknown {
+  rootObject = peekObservable(rootObject);
+
+  if (!canHaveProperties(rootObject)) {
+    return rootObject;
+  }
+
+  const previouslyMapped = visited.get(rootObject);
+  if (previouslyMapped !== undefined) {
+    return previouslyMapped;
+  }
+
+  const isArray = Array.isArray(rootObject);
+  const output: Record<string, unknown> | unknown[] = isArray ? [] as unknown[] : {};
+  visited.set(rootObject, output);
+
+  if (isArray) {
+    const arr = rootObject as unknown as unknown[];
+    const out = output as unknown[];
+    for (let i = 0; i < arr.length; i++) {
+      const propertyValue = peekObservable(arr[i]);
+      out[i] = canHaveProperties(propertyValue)
+        ? (visited.get(propertyValue as object) ?? mapJsObjectGraph(propertyValue, visited))
+        : propertyValue;
+    }
+  } else {
+    const out = output as Record<string, unknown>;
+    for (const key in rootObject) {
+      const propertyValue = peekObservable(rootObject[key]);
+      out[key] = canHaveProperties(propertyValue)
+        ? (visited.get(propertyValue as object) ?? mapJsObjectGraph(propertyValue, visited))
+        : propertyValue;
+    }
+  }
+
+  return output;
+}
+
+export function toJS<T>(rootObject: T): unknown {
+  return mapJsObjectGraph(rootObject, new Map());
+}
+
+export function toJSON(
+  rootObject: unknown,
+  replacer?: (key: string, value: unknown) => unknown,
+  space?: string | number,
+): string {
+  const plainObject = toJS(rootObject);
+  return JSON.stringify(plainObject, replacer as Parameters<typeof JSON.stringify>[1], space);
+}
+
+export function when(
+  predicate: () => unknown,
+  callback?: (value: unknown) => void,
+): Promise<unknown> | Subscription<unknown> {
+  function kowhen(resolve: (value: unknown) => void): Subscription<unknown> {
+    const observable = new PureComputed(predicate);
+    observable.extend({ notify: 'always' });
+    const subscription = observable.subscribe((value: unknown) => {
+      if (value) {
+        subscription.dispose();
+        observable.dispose();
+        resolve(value);
+      }
+    });
+    observable.notifySubscribers(observable.peek());
+    return subscription;
+  }
+
+  if (!callback) {
+    return new Promise(kowhen);
+  } else {
+    return kowhen(callback);
+  }
+}
+
+export function catchFunctionErrors<T extends (...args: never[]) => unknown>(delegate: T): T {
+  if (!options.onError) return delegate;
+  return function (this: unknown, ...args: Parameters<T>) {
+    try {
+      return delegate.apply(this, args);
+    } catch (e) {
+      options.onError?.(e);
+      throw e;
+    }
+  } as unknown as T;
+}

package/src/utilsDom.ts

@@ -0,0 +1,87 @@
+import { cleanNode, removeNode } from './domNodeDisposal.js';
+
+export function cloneNodes(nodesArray: Node[], shouldCleanNodes?: boolean): Node[] {
+  const result: Node[] = [];
+  for (let i = 0; i < nodesArray.length; i++) {
+    const cloned = nodesArray[i].cloneNode(true);
+    result.push(shouldCleanNodes ? cleanNode(cloned) : cloned);
+  }
+  return result;
+}
+
+export function fixUpContinuousNodeArray(continuousNodeArray: Node[], parentNode: Node): Node[] {
+  if (continuousNodeArray.length) {
+    parentNode = (parentNode.nodeType === 8 && parentNode.parentNode) || parentNode;
+
+    // Rule [A]: Strip detached leading nodes
+    while (continuousNodeArray.length && continuousNodeArray[0].parentNode !== parentNode)
+      continuousNodeArray.splice(0, 1);
+
+    // Rule [B]: Strip detached trailing nodes
+    while (continuousNodeArray.length > 1 && continuousNodeArray[continuousNodeArray.length - 1].parentNode !== parentNode)
+      continuousNodeArray.length--;
+
+    // Rule [C]: Fill in to maintain continuity
+    if (continuousNodeArray.length > 1) {
+      const first = continuousNodeArray[0];
+      const last = continuousNodeArray[continuousNodeArray.length - 1];
+      continuousNodeArray.length = 0;
+      let current: Node | null = first;
+      while (current !== last) {
+        continuousNodeArray.push(current!);
+        current = current!.nextSibling;
+      }
+      continuousNodeArray.push(last);
+    }
+  }
+  return continuousNodeArray;
+}
+
+export function replaceDomNodes(nodeToReplaceOrNodeArray: Node | Node[], newNodesArray: Node[]): void {
+  const nodesToReplace = 'nodeType' in nodeToReplaceOrNodeArray
+    ? [nodeToReplaceOrNodeArray as Node]
+    : nodeToReplaceOrNodeArray as Node[];
+  if (nodesToReplace.length > 0) {
+    const insertionPoint = nodesToReplace[0];
+    const parent = insertionPoint.parentNode!;
+    for (let i = 0; i < newNodesArray.length; i++)
+      parent.insertBefore(newNodesArray[i], insertionPoint);
+    for (let i = 0; i < nodesToReplace.length; i++)
+      removeNode(nodesToReplace[i]);
+  }
+}
+
+export function moveCleanedNodesToContainerElement(nodes: ArrayLike<Node>): HTMLElement {
+  const nodesArray = Array.from(nodes);
+  const doc = (nodesArray[0] && nodesArray[0].ownerDocument) || document;
+  const container = doc.createElement('div');
+  for (let i = 0; i < nodesArray.length; i++) {
+    container.appendChild(cleanNode(nodesArray[i]));
+  }
+  return container;
+}
+
+export function parseHtmlFragment(html: string, documentContext?: Document): Node[] {
+  const doc = documentContext || document;
+  const div = doc.createElement('div');
+  div.innerHTML = html;
+  return Array.from(div.childNodes);
+}
+
+export function domNodeIsAttachedToDocument(node: Node): boolean {
+  let current: Node | null = node;
+  const root = node.ownerDocument?.documentElement;
+  if (!root) return false;
+  while (current) {
+    if (current === root) return true;
+    current = current.parentNode;
+  }
+  return false;
+}
+
+export function anyDomNodeIsAttachedToDocument(nodes: Node[]): boolean {
+  for (let i = 0; i < nodes.length; i++) {
+    if (domNodeIsAttachedToDocument(nodes[i])) return true;
+  }
+  return false;
+}

package/src/virtualElements.ts

@@ -0,0 +1,153 @@
+import { domDataGet, domDataSet } from './domData.js';
+import { removeNode } from './domNodeDisposal.js';
+
+const startCommentRegex = /^\s*tap(?:\s+([\s\S]+))?\s*$/;
+const endCommentRegex = /^\s*\/tap\s*$/;
+const matchedEndCommentDataKey = '__tap_matchedEndComment__';
+
+export const allowedVirtualElementBindings: Record<string, boolean> = {};
+
+export function isStartComment(node: Node): boolean {
+  return node.nodeType === 8 && startCommentRegex.test(node.nodeValue || '');
+}
+
+function isEndComment(node: Node): boolean {
+  return node.nodeType === 8 && endCommentRegex.test(node.nodeValue || '');
+}
+
+function isUnmatchedEndComment(node: Node): boolean {
+  return isEndComment(node) && !domDataGet(node, matchedEndCommentDataKey);
+}
+
+function getVirtualChildren(startComment: Node, allowUnbalanced?: boolean): Node[] | null {
+  let currentNode = startComment.nextSibling;
+  let depth = 1;
+  const children: Node[] = [];
+  while (currentNode) {
+    if (isEndComment(currentNode)) {
+      domDataSet(currentNode, matchedEndCommentDataKey, true);
+      depth--;
+      if (depth === 0) return children;
+    }
+    children.push(currentNode);
+    if (isStartComment(currentNode)) depth++;
+    currentNode = currentNode.nextSibling;
+  }
+  if (!allowUnbalanced) {
+    throw new Error('Cannot find closing comment tag to match: ' + startComment.nodeValue);
+  }
+  return null;
+}
+
+function getMatchingEndComment(startComment: Node, allowUnbalanced?: boolean): Node | null {
+  const allVirtualChildren = getVirtualChildren(startComment, allowUnbalanced);
+  if (allVirtualChildren) {
+    if (allVirtualChildren.length > 0) {
+      return allVirtualChildren[allVirtualChildren.length - 1].nextSibling;
+    }
+    return startComment.nextSibling;
+  }
+  return null;
+}
+
+export function virtualChildNodes(node: Node): Node[] | NodeListOf<ChildNode> {
+  return isStartComment(node) ? getVirtualChildren(node)! : node.childNodes;
+}
+
+export function virtualEmptyNode(node: Node): void {
+  if (!isStartComment(node)) {
+    while (node.firstChild) {
+      removeNode(node.firstChild);
+    }
+  } else {
+    const children = getVirtualChildren(node)!;
+    for (let i = 0; i < children.length; i++) {
+      removeNode(children[i]);
+    }
+  }
+}
+
+export function virtualSetChildren(node: Node, childNodes: Node[]): void {
+  if (!isStartComment(node)) {
+    while (node.firstChild) {
+      removeNode(node.firstChild);
+    }
+    for (let i = 0; i < childNodes.length; i++) {
+      node.appendChild(childNodes[i]);
+    }
+  } else {
+    virtualEmptyNode(node);
+    const endCommentNode = node.nextSibling!;
+    for (let i = 0; i < childNodes.length; i++) {
+      endCommentNode.parentNode!.insertBefore(childNodes[i], endCommentNode);
+    }
+  }
+}
+
+export function virtualPrepend(containerNode: Node, nodeToPrepend: Node): void {
+  let insertBeforeNode: Node | null;
+  let parent: Node;
+
+  if (isStartComment(containerNode)) {
+    insertBeforeNode = containerNode.nextSibling;
+    parent = containerNode.parentNode!;
+  } else {
+    insertBeforeNode = containerNode.firstChild;
+    parent = containerNode;
+  }
+
+  if (!insertBeforeNode) {
+    parent.appendChild(nodeToPrepend);
+  } else {
+    parent.insertBefore(nodeToPrepend, insertBeforeNode);
+  }
+}
+
+export function virtualInsertAfter(containerNode: Node, nodeToInsert: Node, insertAfterNode: Node | null): void {
+  if (!insertAfterNode) {
+    virtualPrepend(containerNode, nodeToInsert);
+    return;
+  }
+
+  const insertBeforeNode = insertAfterNode.nextSibling;
+  const parent = isStartComment(containerNode) ? containerNode.parentNode! : containerNode;
+
+  if (!insertBeforeNode) {
+    parent.appendChild(nodeToInsert);
+  } else {
+    parent.insertBefore(nodeToInsert, insertBeforeNode);
+  }
+}
+
+export function virtualFirstChild(node: Node): Node | null {
+  if (!isStartComment(node)) {
+    const first = node.firstChild;
+    if (first && isEndComment(first)) {
+      return first.nextSibling;
+    }
+    return first;
+  }
+  if (!node.nextSibling || isEndComment(node.nextSibling)) {
+    return null;
+  }
+  return node.nextSibling;
+}
+
+export function virtualNextSibling(node: Node): Node | null {
+  if (isStartComment(node)) {
+    node = getMatchingEndComment(node)!;
+  }
+  if (node.nextSibling && isEndComment(node.nextSibling)) {
+    return null;
+  }
+  return node.nextSibling;
+}
+
+export function hasBindingValue(node: Node): boolean {
+  return isStartComment(node);
+}
+
+export function virtualNodeBindingValue(node: Node): string | null {
+  const match = (node.nodeValue || '').match(startCommentRegex);
+  return match ? match[1]?.trim() ?? null : null;
+}

package/src/wireParams.ts

@@ -0,0 +1,49 @@
+import { Observable } from './observable.js';
+import { Computed } from './computed.js';
+import { isSubscribable } from './subscribable.js';
+import type { Subscription } from './subscribable.js';
+import { getObservable, replaceObservable } from './decorators.js';
+import { addDisposeCallback } from './domNodeDisposal.js';
+
+const SKIP_KEYS = new Set(['$raw']);
+
+export interface WireParamsResult {
+  subscriptions: Subscription<unknown>[];
+}
+
+export function wireParams(
+  instance: object,
+  params: Record<string, unknown>,
+  element?: Node,
+): WireParamsResult {
+  const subscriptions: Subscription<unknown>[] = [];
+
+  for (const key of Object.keys(params)) {
+    if (SKIP_KEYS.has(key)) continue;
+
+    const paramValue = params[key];
+    const childObs = getObservable(instance, key);
+    const childIsReactive = childObs !== undefined && isSubscribable(childObs);
+
+    if (paramValue instanceof Observable) {
+      if (childIsReactive) {
+        replaceObservable(instance, key, paramValue);
+      } else {
+        (instance as Record<string, unknown>)[key] = paramValue.get();
+      }
+    } else if (paramValue instanceof Computed) {
+      (instance as Record<string, unknown>)[key] = paramValue.get();
+      const sub = paramValue.subscribe((newValue: unknown) => {
+        (instance as Record<string, unknown>)[key] = newValue;
+      });
+      subscriptions.push(sub);
+      if (element) {
+        addDisposeCallback(element, () => sub.dispose());
+      }
+    } else {
+      (instance as Record<string, unknown>)[key] = paramValue;
+    }
+  }
+
+  return { subscriptions };
+}