Retree - v1.0.0
    Preparing search index...

    Class ReactiveNodeAbstract

    Declare dependencies for other nodes in the tree to conditionally emit changes for the node.

    Only one dependency needs to change to You can build IReactiveDependency instances with ReactiveNode.dependency.

    import { Retree, ReactiveNode } from "@retree/core";
    // Declare a class that extends ReactiveNode
    class Node extends ReactiveNode {
    numbers: number[] = [];
    constructor() {
    super();
    }
    // Get count of even numbers in the list
    get evenNumberCount(): number {
    return this.numbers.filter((number) => number % 2 === 0).length;
    }
    // Implement abstract dependencies getter
    get dependencies() {
    return [this.dependency(this.numbers, [this.evenNumberCount])];
    }
    }
    // Create root ReactiveNode instance and listen for changes
    const node = Retree.root(new Node());
    Retree.on(node, "nodeChanged", () => {
    console.log(node.evenNumberCount);
    });
    // Will emit "nodeChanged"
    node.list.push(2);
    // Will not emit "nodeChanged"
    node.list.push(3);
    Index

    Constructors

    Accessors

    Methods

    Constructors

    Accessors

    Methods

    • Memoize the result of fn, scoped to this ReactiveNode instance.

      Type Parameters

      • T

      Parameters

      • fn: () => T
      • Optionalcomparisons: unknown[]

      Returns T

      Two forms:

      • Keyless (inside a getter): this.memo(fn, deps?) — derives the cache key from the active getter's property name. Throws if called outside a getter or more than once in the same getter.
      • Explicit key: this.memo(key, fn, deps?) — works anywhere; required when stacking multiple memo cells in one getter, or memoizing inside a method.

      Cache semantics for comparisons:

      • undefined: recompute whenever this ReactiveNode reproxies (a dependency changed or a property was set on it). Useful as a "compute once per render" cache.
      • []: compute once and cache forever for this instance.
      • [a, b, ...]: recompute when any cell shallow-changes using Object.is. Tree-node cells are compared by their latest reproxy identity, so passing this.list correctly invalidates when list mutates.
      class ListFilter extends ReactiveNode {
      list: Card[] = [];
      searchText = "";
      // Keyless form
      get filteredList() {
      return this.memo(
      () => this.list.filter((c) => c.text === this.searchText),
      [this.list, this.searchText]
      );
      }
      // Explicit-key form (e.g. when stacking two memos in one getter)
      get pair() {
      const a = this.memo("a", () => expensiveA(), [this.list]);
      const b = this.memo("b", () => expensiveB(), [this.searchText]);
      return { a, b };
      }
      get dependencies() { return [this.dependency(this.list)]; }
      }
    • Memoize the result of fn, scoped to this ReactiveNode instance.

      Type Parameters

      • T

      Parameters

      • key: string
      • fn: () => T
      • Optionalcomparisons: unknown[]

      Returns T

      Two forms:

      • Keyless (inside a getter): this.memo(fn, deps?) — derives the cache key from the active getter's property name. Throws if called outside a getter or more than once in the same getter.
      • Explicit key: this.memo(key, fn, deps?) — works anywhere; required when stacking multiple memo cells in one getter, or memoizing inside a method.

      Cache semantics for comparisons:

      • undefined: recompute whenever this ReactiveNode reproxies (a dependency changed or a property was set on it). Useful as a "compute once per render" cache.
      • []: compute once and cache forever for this instance.
      • [a, b, ...]: recompute when any cell shallow-changes using Object.is. Tree-node cells are compared by their latest reproxy identity, so passing this.list correctly invalidates when list mutates.
      class ListFilter extends ReactiveNode {
      list: Card[] = [];
      searchText = "";
      // Keyless form
      get filteredList() {
      return this.memo(
      () => this.list.filter((c) => c.text === this.searchText),
      [this.list, this.searchText]
      );
      }
      // Explicit-key form (e.g. when stacking two memos in one getter)
      get pair() {
      const a = this.memo("a", () => expensiveA(), [this.list]);
      const b = this.memo("b", () => expensiveB(), [this.searchText]);
      return { a, b };
      }
      get dependencies() { return [this.dependency(this.list)]; }
      }