@thomas-siegfried/tapout 0.0.1

package/src/attributeInterpolationMarkup.ts

@@ -0,0 +1,91 @@
+import { addNodePreprocessor, getBindingHandler } from './bindingProvider.js';
+import type { NodePreprocessFn } from './bindingProvider.js';
+import { options } from './options.js';
+import { parseInterpolationMarkup } from './interpolationMarkup.js';
+
+const DATA_BIND_ATTR = 'data-bind';
+
+// Determines the binding expression for an attribute.
+// If a binding handler exists for the attribute name, use it directly.
+// Otherwise, fall back to `attr.name` (namespaced binding syntax).
+export function attributeBinding(
+  name: string,
+  value: string,
+  _node: Element,
+): string {
+  if (getBindingHandler(name)) {
+    return name + ':' + value;
+  } else {
+    return 'attr.' + name + ':' + value;
+  }
+}
+
+// Customizable hook — override to change how attribute names map to bindings.
+let _attributeBindingFn = attributeBinding;
+
+export function setAttributeBinding(
+  fn: (name: string, value: string, node: Element) => string,
+): void {
+  _attributeBindingFn = fn;
+}
+
+export const attributeInterpolationMarkupPreprocessor: NodePreprocessFn = function (node: Node): void {
+  if (node.nodeType !== 1 || !(node as Element).attributes?.length) return;
+
+  const element = node as Element;
+  let dataBindAttribute = element.getAttribute(DATA_BIND_ATTR);
+
+  const attrs: Attr[] = [];
+  for (let i = 0; i < element.attributes.length; i++) {
+    attrs.push(element.attributes[i]);
+  }
+
+  for (const attr of attrs) {
+    if (
+      attr.specified !== false &&
+      attr.name !== DATA_BIND_ATTR &&
+      attr.value.indexOf('{{') !== -1
+    ) {
+      const parts: string[] = [];
+      let attrValue = '';
+
+      function addText(text: string): void {
+        if (text) {
+          parts.push('"' + text.replace(/"/g, '\\"') + '"');
+        }
+      }
+
+      function addExpr(expressionText: string): void {
+        if (expressionText) {
+          attrValue = expressionText;
+          parts.push('$unwrap(' + expressionText + ')');
+        }
+      }
+
+      parseInterpolationMarkup(attr.value, addText, addExpr);
+
+      if (parts.length > 1) {
+        attrValue = '""+' + parts.join('+');
+      }
+
+      if (attrValue) {
+        const attrName = attr.name.toLowerCase();
+        const binding = _attributeBindingFn(attrName, attrValue, element);
+
+        if (!dataBindAttribute) {
+          dataBindAttribute = binding;
+        } else {
+          dataBindAttribute += ',' + binding;
+        }
+
+        element.setAttribute(DATA_BIND_ATTR, dataBindAttribute);
+        element.removeAttribute(attr.name);
+      }
+    }
+  }
+};
+
+export function enableAttributeInterpolationMarkup(): void {
+  options.attributeInterpolation = true;
+  addNodePreprocessor(attributeInterpolationMarkupPreprocessor);
+}

package/src/bindingContext.ts

@@ -0,0 +1,207 @@
+import { PureComputed } from './computed.js';
+import type { Computed } from './computed.js';
+import { isReadableSubscribable } from './subscribable.js';
+import { domDataGet } from './domData.js';
+import { getDependencies } from './dependencyDetection.js';
+
+function unwrapObservable(value: unknown): unknown {
+  return isReadableSubscribable(value) ? value.get() : value;
+}
+
+const SUBSCRIBABLE = Symbol('subscribable');
+const ANCESTOR_BINDING_INFO = Symbol('ancestorBindingInfo');
+const DATA_DEPENDENCY = Symbol('dataDependency');
+const INHERIT = Symbol('inheritParentVm');
+
+export { SUBSCRIBABLE, ANCESTOR_BINDING_INFO, DATA_DEPENDENCY };
+
+export interface BindingContextOptions {
+  exportDependencies?: boolean;
+  dataDependency?: Computed<unknown>;
+}
+
+export interface CreateChildContextOptions {
+  as?: string;
+  extend?: (context: BindingContext) => void;
+  noChildContext?: boolean;
+  exportDependencies?: boolean;
+  dataDependency?: Computed<unknown>;
+}
+
+export type ExtendCallback = (
+  self: BindingContext,
+  parentContext: BindingContext | undefined,
+  dataItem: unknown,
+) => void;
+
+export class BindingContext {
+  $data: unknown;
+  $rawData: unknown;
+  $root: unknown;
+  $parent?: unknown;
+  $parentContext?: BindingContext;
+  $parents: unknown[] = [];
+
+  [SUBSCRIBABLE]?: PureComputed<unknown>;
+  [ANCESTOR_BINDING_INFO]?: unknown;
+  [DATA_DEPENDENCY]?: Computed<unknown>;
+
+  // Allow dynamic alias properties set by createChildContext/extend
+  [key: string | symbol]: unknown;
+
+  constructor(
+    dataItemOrAccessor: unknown,
+    parentContext?: BindingContext,
+    dataItemAlias?: string | null,
+    extendCallback?: ExtendCallback,
+    options?: BindingContextOptions,
+  ) {
+    const self = this;
+    const shouldInheritData = dataItemOrAccessor === INHERIT;
+    const realDataItemOrAccessor = shouldInheritData ? undefined : dataItemOrAccessor;
+    const isFunc = typeof realDataItemOrAccessor === 'function' && !isReadableSubscribable(realDataItemOrAccessor);
+    const dataDependency = options?.dataDependency;
+
+    function updateContext() {
+      const dataItemOrObservable = isFunc
+        ? (realDataItemOrAccessor as () => unknown)()
+        : realDataItemOrAccessor;
+      const dataItem = unwrapObservable(dataItemOrObservable);
+
+      if (parentContext) {
+        Object.assign(self, parentContext);
+
+        if (ANCESTOR_BINDING_INFO in parentContext) {
+          self[ANCESTOR_BINDING_INFO] = parentContext[ANCESTOR_BINDING_INFO];
+        }
+      } else {
+        self.$parents = [];
+        self.$root = dataItem;
+      }
+
+      self[SUBSCRIBABLE] = subscribable;
+
+      if (shouldInheritData) {
+        // $data is already set from parent via Object.assign
+      } else {
+        self.$rawData = dataItemOrObservable;
+        self.$data = dataItem;
+      }
+
+      if (dataItemAlias) {
+        self[dataItemAlias] = dataItem;
+      }
+
+      if (extendCallback) {
+        extendCallback(self, parentContext, dataItem);
+      }
+
+      // Ensure child depends on parent context's data dependencies.
+      // Reading the parent subscribable registers it as a dependency of
+      // the current PureComputed. Dependency deduplication makes this safe
+      // even if updateContext already transitively depends on it.
+      if (parentContext?.[SUBSCRIBABLE]) {
+        parentContext[SUBSCRIBABLE]!.get();
+      }
+
+      if (dataDependency) {
+        self[DATA_DEPENDENCY] = dataDependency;
+      }
+
+      return self.$data;
+    }
+
+    let subscribable: PureComputed<unknown> | undefined;
+
+    if (options?.exportDependencies) {
+      updateContext();
+    } else {
+      subscribable = new PureComputed(updateContext);
+      subscribable.peek();
+
+      if (subscribable.isActive()) {
+        subscribable.equalityComparer = undefined;
+      } else {
+        self[SUBSCRIBABLE] = undefined;
+      }
+    }
+  }
+
+  createChildContext(
+    dataItemOrAccessor: unknown,
+    aliasOrOptions?: string | CreateChildContextOptions,
+    extendCallback?: (context: BindingContext) => void,
+    options?: BindingContextOptions,
+  ): BindingContext {
+    let dataItemAlias: string | undefined;
+
+    if (!options && aliasOrOptions && typeof aliasOrOptions === 'object') {
+      options = aliasOrOptions;
+      dataItemAlias = aliasOrOptions.as;
+      extendCallback = aliasOrOptions.extend;
+    } else if (typeof aliasOrOptions === 'string') {
+      dataItemAlias = aliasOrOptions;
+    }
+
+    const childOptions = options as CreateChildContextOptions | undefined;
+
+    if (dataItemAlias && childOptions?.noChildContext) {
+      const isFunc = typeof dataItemOrAccessor === 'function' && !isReadableSubscribable(dataItemOrAccessor);
+      return new BindingContext(INHERIT, this, null, (self) => {
+        if (extendCallback) {
+          extendCallback(self);
+        }
+        self[dataItemAlias!] = isFunc ? (dataItemOrAccessor as () => unknown)() : dataItemOrAccessor;
+      }, options);
+    }
+
+    return new BindingContext(dataItemOrAccessor, this, dataItemAlias, (self, parentCtx) => {
+      self.$parentContext = parentCtx;
+      self.$parent = parentCtx?.$data;
+      self.$parents = (parentCtx?.$parents || []).slice(0);
+      self.$parents.unshift(self.$parent);
+      if (extendCallback) {
+        extendCallback(self);
+      }
+    }, options);
+  }
+
+  extend(
+    properties: Record<string, unknown> | ((self: BindingContext) => Record<string, unknown>) | null,
+    options?: BindingContextOptions,
+  ): BindingContext {
+    return new BindingContext(INHERIT, this, null, (self) => {
+      if (properties) {
+        Object.assign(
+          self,
+          typeof properties === 'function' ? properties(self) : properties,
+        );
+      }
+    }, options);
+  }
+}
+
+// DOM data key for storing binding info on nodes (shared with applyBindings)
+export const BINDING_INFO_KEY = '__tapout_bindingInfo';
+
+interface BindingInfo {
+  context?: BindingContext;
+  alreadyBound?: boolean;
+}
+
+export function storedBindingContextForNode(node: Node): BindingContext | undefined {
+  const info = domDataGet(node, BINDING_INFO_KEY) as BindingInfo | undefined;
+  return info?.context;
+}
+
+export function contextFor(node: Node): BindingContext | undefined {
+  if (node && (node.nodeType === 1 || node.nodeType === 8)) {
+    return storedBindingContextForNode(node);
+  }
+  return undefined;
+}
+
+export function dataFor(node: Node): unknown {
+  const context = contextFor(node);
+  return context ? context.$data : undefined;
+}

package/src/bindingEvent.ts

@@ -0,0 +1,198 @@
+import { Subscribable, Subscription } from './subscribable.js';
+import { BindingContext, ANCESTOR_BINDING_INFO, BINDING_INFO_KEY } from './bindingContext.js';
+import { domDataGet, domDataGetOrSet } from './domData.js';
+import { addDisposeCallback, removeDisposeCallback } from './domNodeDisposal.js';
+import { ignore } from './dependencyDetection.js';
+import { virtualChildNodes, virtualFirstChild } from './virtualElements.js';
+
+// ---- Binding Info (shared shape stored per-node via domData) ----
+
+export interface BindingInfo {
+  alreadyBound?: boolean;
+  context?: BindingContext;
+  eventSubscribable?: Subscribable;
+  notifiedEvents?: Record<string, boolean>;
+  asyncContext?: AsyncCompleteContext | null;
+}
+
+export function getBindingInfoForNode(node: Node): BindingInfo {
+  return domDataGetOrSet(node, BINDING_INFO_KEY, {}) as BindingInfo;
+}
+
+// ---- AsyncCompleteContext ----
+
+function asyncContextDispose(node: Node): void {
+  const info = domDataGet(node, BINDING_INFO_KEY) as BindingInfo | undefined;
+  const asyncContext = info?.asyncContext;
+  if (asyncContext) {
+    info!.asyncContext = null;
+    asyncContext.notifyAncestor();
+  }
+}
+
+class AsyncCompleteContext {
+  node: Node;
+  bindingInfo: BindingInfo;
+  asyncDescendants: Node[] = [];
+  childrenComplete = false;
+  ancestorBindingInfo?: BindingInfo;
+
+  constructor(node: Node, bindingInfo: BindingInfo, ancestorBindingInfo?: BindingInfo) {
+    this.node = node;
+    this.bindingInfo = bindingInfo;
+
+    if (!bindingInfo.asyncContext) {
+      addDisposeCallback(node, asyncContextDispose);
+    }
+
+    if (ancestorBindingInfo?.asyncContext) {
+      ancestorBindingInfo.asyncContext.asyncDescendants.push(node);
+      this.ancestorBindingInfo = ancestorBindingInfo;
+    }
+  }
+
+  notifyAncestor(): void {
+    if (this.ancestorBindingInfo?.asyncContext) {
+      this.ancestorBindingInfo.asyncContext.descendantComplete(this.node);
+    }
+  }
+
+  descendantComplete(node: Node): void {
+    const idx = this.asyncDescendants.indexOf(node);
+    if (idx !== -1) {
+      this.asyncDescendants.splice(idx, 1);
+    }
+    if (this.asyncDescendants.length === 0 && this.childrenComplete) {
+      this.completeChildren();
+    }
+  }
+
+  completeChildren(): void {
+    this.childrenComplete = true;
+    if (this.bindingInfo.asyncContext && this.asyncDescendants.length === 0) {
+      this.bindingInfo.asyncContext = null;
+      removeDisposeCallback(this.node, asyncContextDispose);
+      bindingEvent.notify(this.node, bindingEvent.descendantsComplete);
+      this.notifyAncestor();
+    }
+  }
+}
+
+// ---- Binding Event API ----
+
+export const bindingEvent = {
+  childrenComplete: 'childrenComplete' as const,
+  descendantsComplete: 'descendantsComplete' as const,
+
+  subscribe(
+    node: Node,
+    event: string,
+    callback: (value: unknown) => void,
+    context?: unknown,
+    options?: { notifyImmediately?: boolean },
+  ): Subscription<unknown> {
+    const bindingInfo = getBindingInfoForNode(node);
+    if (!bindingInfo.eventSubscribable) {
+      bindingInfo.eventSubscribable = new Subscribable();
+    }
+
+    if (options?.notifyImmediately && bindingInfo.notifiedEvents?.[event]) {
+      ignore(() => callback.call(context, node));
+    }
+
+    const boundCallback = context ? (v: unknown) => callback.call(context, v) : callback;
+    return bindingInfo.eventSubscribable.subscribe(boundCallback, event);
+  },
+
+  notify(node: Node, event: string): void {
+    const bindingInfo = domDataGet(node, BINDING_INFO_KEY) as BindingInfo | undefined;
+    if (bindingInfo) {
+      if (!bindingInfo.notifiedEvents) {
+        bindingInfo.notifiedEvents = {};
+      }
+      bindingInfo.notifiedEvents[event] = true;
+
+      if (bindingInfo.eventSubscribable) {
+        bindingInfo.eventSubscribable.notifySubscribers(node as unknown, event);
+      }
+
+      if (event === bindingEvent.childrenComplete) {
+        if (bindingInfo.asyncContext) {
+          bindingInfo.asyncContext.completeChildren();
+        } else if (
+          bindingInfo.asyncContext === undefined &&
+          bindingInfo.eventSubscribable?.hasSubscriptionsForEvent(bindingEvent.descendantsComplete)
+        ) {
+          throw new Error('descendantsComplete event not supported for bindings on this node');
+        }
+      }
+    }
+  },
+
+  startPossiblyAsyncContentBinding(node: Node, bindingContext: BindingContext): BindingContext {
+    const bindingInfo = getBindingInfoForNode(node);
+
+    if (!bindingInfo.asyncContext) {
+      bindingInfo.asyncContext = new AsyncCompleteContext(
+        node,
+        bindingInfo,
+        bindingContext[ANCESTOR_BINDING_INFO] as BindingInfo | undefined,
+      );
+    }
+
+    if (bindingContext[ANCESTOR_BINDING_INFO] === bindingInfo) {
+      return bindingContext;
+    }
+
+    return bindingContext.extend((ctx) => {
+      ctx[ANCESTOR_BINDING_INFO] = bindingInfo;
+      return {};
+    });
+  },
+};
+
+// ---- Helpers for applyBindings integration ----
+
+export function subscribeToBindingEvent(
+  node: Node,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  bindings: Record<string, any>,
+  bindingContext: BindingContext,
+  evaluateValueAccessor: (v: unknown) => unknown,
+): BindingContext {
+  let contextToExtend = bindingContext;
+
+  if (bindingEvent.childrenComplete in bindings) {
+    bindingEvent.subscribe(node, bindingEvent.childrenComplete, () => {
+      const callback = evaluateValueAccessor(bindings[bindingEvent.childrenComplete]);
+      if (callback) {
+        const nodes = virtualChildNodes(node);
+        if (nodes.length) {
+          (callback as (nodes: Node[] | NodeListOf<ChildNode>, data: unknown) => void)(
+            nodes,
+            dataForFirstChild(node),
+          );
+        }
+      }
+    });
+  }
+
+  if (bindingEvent.descendantsComplete in bindings) {
+    contextToExtend = bindingEvent.startPossiblyAsyncContentBinding(node, bindingContext);
+    bindingEvent.subscribe(node, bindingEvent.descendantsComplete, () => {
+      const callback = evaluateValueAccessor(bindings[bindingEvent.descendantsComplete]);
+      if (callback && virtualFirstChild(node)) {
+        (callback as (node: Node) => void)(node);
+      }
+    });
+  }
+
+  return contextToExtend;
+}
+
+function dataForFirstChild(node: Node): unknown {
+  const first = virtualFirstChild(node);
+  if (!first) return undefined;
+  const info = domDataGet(first, BINDING_INFO_KEY) as BindingInfo | undefined;
+  return info?.context?.$data;
+}