@thomas-siegfried/tapout 0.0.1

package/src/subscribable.ts

@@ -0,0 +1,266 @@
+import { begin, end } from './dependencyDetection.js';
+import { getExtenderHandler } from './extenders.js';
+import type { ExtenderOptions } from './extenders.js';
+import { addDisposeCallback } from './domNodeDisposal.js';
+
+export type SubscriptionCallback<T> = (value: T) => void;
+
+const primitiveTypes: Record<string, boolean> = {
+  undefined: true,
+  boolean: true,
+  number: true,
+  string: true,
+};
+
+export function valuesArePrimitiveAndEqual<T>(a: T, b: T): boolean {
+  const oldValueIsPrimitive = a === null || typeof a in primitiveTypes;
+  return oldValueIsPrimitive ? a === b : false;
+}
+
+const DEFAULT_EVENT = 'change';
+
+export class Subscription<T> {
+  private _target: Subscribable<T> | null;
+  private _callback: SubscriptionCallback<T> | null;
+  private _disposeCallback: (() => void) | null;
+  private _isDisposed = false;
+
+  constructor(
+    target: Subscribable<T>,
+    callback: SubscriptionCallback<T>,
+    disposeCallback: () => void,
+  ) {
+    this._target = target;
+    this._callback = callback;
+    this._disposeCallback = disposeCallback;
+  }
+
+  dispose(): void {
+    if (!this._isDisposed) {
+      this._isDisposed = true;
+      this._disposeCallback!();
+      this._target = null;
+      this._callback = null;
+      this._disposeCallback = null;
+    }
+  }
+
+  get closed(): boolean {
+    return this._isDisposed;
+  }
+
+  disposeWhenNodeIsRemoved(node: Node): void {
+    addDisposeCallback(node, () => this.dispose());
+  }
+
+  /** @internal */
+  _notify(value: T): void {
+    if (!this._isDisposed) {
+      this._callback!(value);
+    }
+  }
+}
+
+export class Subscribable<T = unknown> {
+  private _subscriptions: Record<string, Subscription<T>[]> = { [DEFAULT_EVENT]: [] };
+  private _versionNumber = 1;
+
+  /** @internal Lazy unique ID for dependency tracking */
+  _id: number | undefined;
+
+  equalityComparer?: (a: T, b: T) => boolean;
+
+  protected beforeSubscriptionAdd?(event: string): void;
+  protected afterSubscriptionRemove?(event: string): void;
+
+  subscribe(callback: SubscriptionCallback<T>, event?: string): Subscription<T> {
+    const eventName = event ?? DEFAULT_EVENT;
+
+    const subscription = new Subscription<T>(this, callback, () => {
+      const subs = this._subscriptions[eventName];
+      if (subs) {
+        const index = subs.indexOf(subscription);
+        if (index !== -1) {
+          subs.splice(index, 1);
+        }
+      }
+      this.afterSubscriptionRemove?.(eventName);
+    });
+
+    this.beforeSubscriptionAdd?.(eventName);
+
+    if (!this._subscriptions[eventName]) {
+      this._subscriptions[eventName] = [];
+    }
+    this._subscriptions[eventName].push(subscription);
+
+    return subscription;
+  }
+
+  notifySubscribers(value: T, event?: string): void {
+    const eventName = event ?? DEFAULT_EVENT;
+
+    if (eventName === DEFAULT_EVENT) {
+      this.updateVersion();
+    }
+
+    if (this.hasSubscriptionsForEvent(eventName)) {
+      const subs = this._subscriptions[eventName].slice(0);
+      try {
+        begin();
+        for (let i = 0; i < subs.length; i++) {
+          subs[i]._notify(value);
+        }
+      } finally {
+        end();
+      }
+    }
+  }
+
+  getVersion(): number {
+    return this._versionNumber;
+  }
+
+  hasChanged(versionToCheck: number): boolean {
+    return this._versionNumber !== versionToCheck;
+  }
+
+  updateVersion(): void {
+    ++this._versionNumber;
+  }
+
+  hasSubscriptionsForEvent(event: string): boolean {
+    const subs = this._subscriptions[event];
+    return subs != null && subs.length > 0;
+  }
+
+  getSubscriptionsCount(event?: string): number {
+    if (event) {
+      const subs = this._subscriptions[event];
+      return subs ? subs.length : 0;
+    }
+    let total = 0;
+    for (const key of Object.keys(this._subscriptions)) {
+      if (key !== 'dirty') {
+        total += this._subscriptions[key].length;
+      }
+    }
+    return total;
+  }
+
+  isDifferent(oldValue: T, newValue: T): boolean {
+    if (this.equalityComparer) {
+      return !this.equalityComparer(oldValue, newValue);
+    }
+    return true;
+  }
+
+  extend(requestedExtenders: ExtenderOptions): this {
+    for (const [key, value] of Object.entries(requestedExtenders)) {
+      const handler = getExtenderHandler(key);
+      if (typeof handler === 'function') {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        handler(this as Subscribable<any>, value);
+      } else {
+        throw new Error(`Unknown extender: '${key}'`);
+      }
+    }
+    return this;
+  }
+
+  /** @internal */
+  _deferUpdates = false;
+  /** @internal */
+  _origNotifySubscribers?: (value: T, event?: string) => void;
+  /** @internal */
+  _limitChange?: (value: T, isDirty?: boolean) => void;
+  /** @internal */
+  _limitBeforeChange?: (value: T) => void;
+  /** @internal */
+  _recordUpdate?: () => void;
+  /** @internal */
+  _notificationIsPending?: boolean;
+  /** @internal */
+  _changeSubscriptions?: Subscription<T>[];
+  /** @internal */
+  _evalIfChanged?(): T;
+
+  limit(limitFunction: (callback: () => void) => () => void): void {
+    const self = this;
+    let ignoreBeforeChange = false;
+    let previousValue: T;
+    let pendingValue: T;
+    let didUpdate = false;
+
+    if (!self._origNotifySubscribers) {
+      self._origNotifySubscribers = self.notifySubscribers.bind(self);
+      self.notifySubscribers = function limitNotifySubscribers(value: T, event?: string): void {
+        if (!event || event === DEFAULT_EVENT) {
+          self._limitChange!(value);
+        } else if (event === 'beforeChange') {
+          self._limitBeforeChange!(value);
+        } else {
+          self._origNotifySubscribers!(value, event);
+        }
+      };
+    }
+
+    const finish = limitFunction(function () {
+      self._notificationIsPending = false;
+
+      if (pendingValue === (self as unknown) && self._evalIfChanged) {
+        pendingValue = self._evalIfChanged();
+      }
+      const shouldNotify = didUpdate && self.isDifferent(previousValue, pendingValue);
+
+      didUpdate = ignoreBeforeChange = false;
+
+      if (shouldNotify) {
+        previousValue = pendingValue;
+        self._origNotifySubscribers!(pendingValue);
+      }
+    });
+
+    self._limitChange = function (value: T, isDirty?: boolean) {
+      if (!isDirty || !self._notificationIsPending) {
+        didUpdate = !isDirty;
+      }
+      self._changeSubscriptions = self._subscriptions[DEFAULT_EVENT].slice(0);
+      self._notificationIsPending = ignoreBeforeChange = true;
+      pendingValue = value;
+      finish();
+    };
+
+    self._limitBeforeChange = function (value: T) {
+      if (!ignoreBeforeChange) {
+        previousValue = value;
+        self._origNotifySubscribers!(value, 'beforeChange');
+      }
+    };
+
+    self._recordUpdate = function () {
+      didUpdate = true;
+    };
+  }
+}
+
+export function isSubscribable(value: unknown): value is Subscribable {
+  return (
+    value != null &&
+    typeof (value as Subscribable).subscribe === 'function' &&
+    typeof (value as Subscribable).notifySubscribers === 'function'
+  );
+}
+
+export interface ReadableSubscribable<T = unknown> extends Subscribable<T> {
+  get(): T;
+  peek(): T;
+}
+
+export function isReadableSubscribable(value: unknown): value is ReadableSubscribable {
+  return (
+    isSubscribable(value) &&
+    typeof (value as ReadableSubscribable).get === 'function' &&
+    typeof (value as ReadableSubscribable).peek === 'function'
+  );
+}

package/src/tasks.ts

@@ -0,0 +1,79 @@
+import { options } from './options.js';
+
+type TaskCallback = () => void;
+
+let taskQueue: (TaskCallback | null)[] = [];
+let taskQueueLength = 0;
+let nextHandle = 1;
+let nextIndexToProcess = 0;
+
+export let scheduler: (callback: TaskCallback) => void =
+  typeof queueMicrotask === 'function'
+    ? (cb) => queueMicrotask(cb)
+    : (cb) => setTimeout(cb, 0);
+
+function deferError(error: unknown): void {
+  if (options.onError) {
+    options.onError(error);
+  } else {
+    setTimeout(() => { throw error; }, 0);
+  }
+}
+
+function processTasks(): void {
+  if (taskQueueLength) {
+    let mark = taskQueueLength;
+    let countMarks = 0;
+
+    for (let task: TaskCallback | null; nextIndexToProcess < taskQueueLength; ) {
+      task = taskQueue[nextIndexToProcess++];
+      if (task) {
+        if (nextIndexToProcess > mark) {
+          if (++countMarks >= 5000) {
+            nextIndexToProcess = taskQueueLength;
+            deferError(new Error("'Too much recursion' after processing " + countMarks + " task groups."));
+            break;
+          }
+          mark = taskQueueLength;
+        }
+        try {
+          task();
+        } catch (ex) {
+          deferError(ex);
+        }
+      }
+    }
+  }
+}
+
+function scheduledProcess(): void {
+  processTasks();
+  nextIndexToProcess = taskQueueLength = taskQueue.length = 0;
+}
+
+function scheduleTaskProcessing(): void {
+  scheduler(scheduledProcess);
+}
+
+export function schedule(func: TaskCallback): number {
+  if (!taskQueueLength) {
+    scheduleTaskProcessing();
+  }
+  taskQueue[taskQueueLength++] = func;
+  return nextHandle++;
+}
+
+export function cancel(handle: number): void {
+  const index = handle - (nextHandle - taskQueueLength);
+  if (index >= nextIndexToProcess && index < taskQueueLength) {
+    taskQueue[index] = null;
+  }
+}
+
+export function resetForTesting(): number {
+  const length = taskQueueLength - nextIndexToProcess;
+  nextIndexToProcess = taskQueueLength = taskQueue.length = 0;
+  return length;
+}
+
+export const runEarly: () => void = processTasks;

package/src/templateEngine.ts

@@ -0,0 +1,108 @@
+import { DomElementSource, AnonymousSource } from './templateSources.js';
+import { parseHtmlFragment } from './utilsDom.js';
+import type { BindingContext } from './bindingContext.js';
+
+export interface TemplateRenderOptions {
+  templateEngine?: TemplateEngine;
+  foreach?: unknown;
+  as?: string;
+  noChildContext?: boolean;
+  includeDestroyed?: boolean;
+  afterRender?: (nodes: Node[], data: unknown) => void;
+  afterAdd?: (node: Node, index: number, item: unknown) => void;
+  beforeRemove?: (node: Node, index: number, item: unknown) => void;
+  beforeMove?: (node: Node, index: number, item: unknown) => void;
+  afterMove?: (node: Node, index: number, item: unknown) => void;
+  if?: unknown;
+  ifnot?: unknown;
+  data?: unknown;
+  exportDependencies?: boolean;
+  dontLimitMoves?: boolean;
+}
+
+export type TemplateSource = DomElementSource | AnonymousSource;
+
+export abstract class TemplateEngine {
+  allowTemplateRewriting = false;
+
+  abstract renderTemplateSource(
+    templateSource: TemplateSource,
+    bindingContext: BindingContext,
+    options: TemplateRenderOptions,
+    templateDocument?: Document,
+  ): Node[];
+
+  createJavaScriptEvaluatorBlock(_script: string): string {
+    throw new Error('Override createJavaScriptEvaluatorBlock');
+  }
+
+  makeTemplateSource(template: string | Node, templateDocument?: Document): TemplateSource {
+    if (typeof template === 'string') {
+      const doc = templateDocument || document;
+      const elem = doc.getElementById(template);
+      if (!elem) throw new Error('Cannot find template with ID ' + template);
+      return new DomElementSource(elem);
+    } else if (template.nodeType === 1 || template.nodeType === 8) {
+      return new AnonymousSource(template as Element | Comment);
+    } else {
+      throw new Error('Unknown template type: ' + template);
+    }
+  }
+
+  renderTemplate(
+    template: string | Node,
+    bindingContext: BindingContext,
+    options: TemplateRenderOptions,
+    templateDocument?: Document,
+  ): Node[] {
+    const source = this.makeTemplateSource(template, templateDocument);
+    return this.renderTemplateSource(source, bindingContext, options, templateDocument);
+  }
+
+  isTemplateRewritten(template: string | Node, templateDocument?: Document): boolean {
+    if (this.allowTemplateRewriting === false) return true;
+    return !!this.makeTemplateSource(template, templateDocument).data('isRewritten');
+  }
+
+  rewriteTemplate(
+    template: string | Node,
+    rewriterCallback: (text: string) => string,
+    templateDocument?: Document,
+  ): void {
+    const templateSource = this.makeTemplateSource(template, templateDocument);
+    const rewritten = rewriterCallback(templateSource.text());
+    templateSource.text(rewritten);
+    templateSource.data('isRewritten', true);
+  }
+}
+
+export class NativeTemplateEngine extends TemplateEngine {
+  override allowTemplateRewriting = false;
+
+  renderTemplateSource(
+    templateSource: TemplateSource,
+    _bindingContext: BindingContext,
+    _options: TemplateRenderOptions,
+    templateDocument?: Document,
+  ): Node[] {
+    const templateNodes = templateSource.nodes();
+    if (templateNodes) {
+      return Array.from(templateNodes.cloneNode(true).childNodes);
+    } else {
+      const templateText = templateSource.text();
+      return parseHtmlFragment(templateText, templateDocument);
+    }
+  }
+}
+
+export const nativeTemplateEngine = new NativeTemplateEngine();
+
+let _templateEngine: TemplateEngine = nativeTemplateEngine;
+
+export function setTemplateEngine(engine: TemplateEngine): void {
+  _templateEngine = engine;
+}
+
+export function getTemplateEngine(): TemplateEngine {
+  return _templateEngine;
+}