Retree - v1.0.0
    Preparing search index...

    Main entry point for use with Retree package. Exposes utility functions for observing to changes to an object and its children.

    Index

    Constructors

    Methods

    • Clear all listeners for a given node.

      Parameters

      • node: object

        node to clear all listeners for

      • shallow: boolean = true

        when false, will unsubscribe to all child nodes as well.

      Returns void

      Equivalent to calling each unsubscribe function returned by Retree.on.

    • Listen for changes to a node.

      Type Parameters

      Parameters

      • node: T

        the object to listen for changes to.

      • listenerType: TEvent

        the type of TRetreeEvents change events to listen to.

      • callback: TEvent extends TRetreeChangedEvents ? (reproxiedNode: T) => void : () => void

        the callback function for your listener.

      Returns () => void

      an unsubscribe function to cleanup your listners.

      Use listener "nodeChanged" for changes to any leaf child of the node. Use listener "treeChanged" for changes to any leaf child of the node or its child nodes. Use listener "nodeRemoved" for when this node was removed from its parent.

      // Create the root node
      const counter = Retree.root({ count: 0 });
      // Listen for changes to values of the node
      const unsubscribe = Retree.on(counter, "valueChanged", (reproxy) => {
      console.log(reproxy !== counter); // output: false
      console.log(reproxy.count === counter.count); // output: true
      });
      // Make a change
      counter.count = counter.count + 1;
      // Stop listening for changes
      unsubscribe();
    • Get a parent node for a given child node, if it exists

      Parameters

      • node: object

        a child node to get the parent of

      Returns object | null

      the parent node if it exists, otherwise null

      const tree = Retree.root({
      count: 0,
      child: {
      count: 0,
      child: {
      count: 0,
      },
      },
      });
      function recursiveLog(node) {
      console.log(node.count);
      // Get the parent of node, if it exists
      const parent = Retree.parent(node);
      if (!parent) return; // at top of tree
      recursiveLog(parent);
      }
      Retree.on(tree.child.child, "nodeChanged", (child) => {
      // Recursively log the count of this node and all its parents
      recursiveLog(child);
      });
      tree.child.child.count = 1;
    • Builds a Retree compatible root node for the root object of your tree.

      Type Parameters

      • T extends object = object

      Parameters

      • object: T

        a root TreeNode for your tree

      Returns T

      a Retree compatible object of type T

      Use this function only for a root object. This will make the object compatible with Retree.on, Retree.parent, etc. For child objects of this root node, simply set values to them like you normally would in JS/TS.

      const counter = Retree.root({ count: 0 });
      Retree.on(counter, "valueChanged", () => console.log(counter.count));
      counter.count = counter.count + 1;
    • Run a synchronous transaction that will not cause `Retree.on listeners to emit.

      Parameters

      • transaction: () => void

        transaction function to run

      • skipReproxy: boolean = true

        skip reproxying nodes such that subsequent comparisons are equal. defaults to true.

      Returns void

    • Run a synchronous transaction that will not cause Retree.on listeners for changed nodes to emit multiple times.

      Parameters

      • transaction: () => void

        transaction function to run

      Returns void

      If multiple nodes changed during the transaction, Retree.on events will be emitted for each node that changed. If using React, this should still be flattened to a single render, but it is not guaranteed. It may be reasonable to combine this with React.startTransition if this is a concern.

      const counter = Retree.root({ count: 0 });
      Retree.on(counter, "valueChanged", () => console.log(counter.count));
      // Will only emit "valueChanged" once
      Retree.runTransaction(() => {
      counter.count = counter.count + 1;
      counter.count = counter.count * 2;
      });
    • Type Parameters

      • T extends object = object

      Parameters

      • object: T

      Returns T

      Use root instead.