Retree - v1.0.0
    Preparing search index...

    Function select

    • Decorator that makes a getter's owning ReactiveNode react to an ordered dependency list.

      Type Parameters

      Parameters

      Returns (this: This) => Value

      @select is the class-side companion to Retree.select and useSelect. Use it when a getter exposes a narrow value but depends on broader reactive sources. When called with no selector, @select and @select() are interchangeable. Both run the getter under a dependency trapper. Whole Retree-managed values read by the getter are subscribed to broadly. Property reads subscribe to the owner node but compare the specific property value, so task.isCompleted can update when the task slot is replaced or isCompleted changes without reacting to unrelated task.text changes. Primitive values read by the getter are compared. Pass an explicit selector when you want to choose or customize the dependency slots yourself. Wrap a slot with self.dependency(node, comparisons) when that slot needs custom comparison cells. When a selected slot changes, Retree reproxies the owning node and emits nodeChanged for that owner. Pass { equals } to customize the final getter-output comparison. The function receives (self, previous, next) and should return true when the outputs are equivalent, meaning the owner should not emit or reproxy.

      The dependency list is ordered and may change length at runtime. Retree treats additions, removals, and reordering as invalidation and refreshes the underlying subscriptions. Put every value that can change the getter result in the list. Use memo for expensive intermediate getters, then select the memoized value here.

      class AttributeView extends ReactiveNode {
          public attributeId!: string;

          @memo
          private get _attribute() {
              return this.attributes.find((check) => check.id === this.attributeId);
          }

          @select((self) => [
              self.attributes,
              self.attributeId,
              self.dependency(self._attribute, [self._attribute?.id]),
          ])
          get attribute() {
              return this._attribute;
          }
      }

      class TaskRow extends ReactiveNode {
          @link public task!: Task;
          @link public filter!: TaskFilter;

          @select
          get isVisible() {
              return (
                  this.filter.isComplete === null ||
                  this.task.isCompleted === this.filter.isComplete
              );
          }
      }

      class VisibleTaskList extends ReactiveNode {
          public tasks: Task[] = [];

          @select({
              equals: (self, previous, next) =>
                  previous.length === next.length &&
                  previous.every((task, index) => task.id === next[index].id),
          })
          get visibleTasks() {
              return this.tasks.filter((task) => !task.isArchived);
          }
      }

    • Decorator that makes a getter's owning ReactiveNode react to an ordered dependency list.

      Type Parameters

      Parameters

      Returns (
          target: (this: This) => Value,
          context: ClassGetterDecoratorContext<This, Value>,
      ) => (this: This) => Value

      @select is the class-side companion to Retree.select and useSelect. Use it when a getter exposes a narrow value but depends on broader reactive sources. When called with no selector, @select and @select() are interchangeable. Both run the getter under a dependency trapper. Whole Retree-managed values read by the getter are subscribed to broadly. Property reads subscribe to the owner node but compare the specific property value, so task.isCompleted can update when the task slot is replaced or isCompleted changes without reacting to unrelated task.text changes. Primitive values read by the getter are compared. Pass an explicit selector when you want to choose or customize the dependency slots yourself. Wrap a slot with self.dependency(node, comparisons) when that slot needs custom comparison cells. When a selected slot changes, Retree reproxies the owning node and emits nodeChanged for that owner. Pass { equals } to customize the final getter-output comparison. The function receives (self, previous, next) and should return true when the outputs are equivalent, meaning the owner should not emit or reproxy.

      The dependency list is ordered and may change length at runtime. Retree treats additions, removals, and reordering as invalidation and refreshes the underlying subscriptions. Put every value that can change the getter result in the list. Use memo for expensive intermediate getters, then select the memoized value here.

      class AttributeView extends ReactiveNode {
          public attributeId!: string;

          @memo
          private get _attribute() {
              return this.attributes.find((check) => check.id === this.attributeId);
          }

          @select((self) => [
              self.attributes,
              self.attributeId,
              self.dependency(self._attribute, [self._attribute?.id]),
          ])
          get attribute() {
              return this._attribute;
          }
      }

      class TaskRow extends ReactiveNode {
          @link public task!: Task;
          @link public filter!: TaskFilter;

          @select
          get isVisible() {
              return (
                  this.filter.isComplete === null ||
                  this.task.isCompleted === this.filter.isComplete
              );
          }
      }

      class VisibleTaskList extends ReactiveNode {
          public tasks: Task[] = [];

          @select({
              equals: (self, previous, next) =>
                  previous.length === next.length &&
                  previous.every((task, index) => task.id === next[index].id),
          })
          get visibleTasks() {
              return this.tasks.filter((task) => !task.isArchived);
          }
      }

    • Decorator that makes a getter's owning ReactiveNode react to an ordered dependency list.

      Type Parameters

      Parameters

      Returns <Value>(
          target: (this: This) => Value,
          context: ClassGetterDecoratorContext<This, Value>,
      ) => (this: This) => Value

      @select is the class-side companion to Retree.select and useSelect. Use it when a getter exposes a narrow value but depends on broader reactive sources. When called with no selector, @select and @select() are interchangeable. Both run the getter under a dependency trapper. Whole Retree-managed values read by the getter are subscribed to broadly. Property reads subscribe to the owner node but compare the specific property value, so task.isCompleted can update when the task slot is replaced or isCompleted changes without reacting to unrelated task.text changes. Primitive values read by the getter are compared. Pass an explicit selector when you want to choose or customize the dependency slots yourself. Wrap a slot with self.dependency(node, comparisons) when that slot needs custom comparison cells. When a selected slot changes, Retree reproxies the owning node and emits nodeChanged for that owner. Pass { equals } to customize the final getter-output comparison. The function receives (self, previous, next) and should return true when the outputs are equivalent, meaning the owner should not emit or reproxy.

      The dependency list is ordered and may change length at runtime. Retree treats additions, removals, and reordering as invalidation and refreshes the underlying subscriptions. Put every value that can change the getter result in the list. Use memo for expensive intermediate getters, then select the memoized value here.

      class AttributeView extends ReactiveNode {
          public attributeId!: string;

          @memo
          private get _attribute() {
              return this.attributes.find((check) => check.id === this.attributeId);
          }

          @select((self) => [
              self.attributes,
              self.attributeId,
              self.dependency(self._attribute, [self._attribute?.id]),
          ])
          get attribute() {
              return this._attribute;
          }
      }

      class TaskRow extends ReactiveNode {
          @link public task!: Task;
          @link public filter!: TaskFilter;

          @select
          get isVisible() {
              return (
                  this.filter.isComplete === null ||
                  this.task.isCompleted === this.filter.isComplete
              );
          }
      }

      class VisibleTaskList extends ReactiveNode {
          public tasks: Task[] = [];

          @select({
              equals: (self, previous, next) =>
                  previous.length === next.length &&
                  previous.every((task, index) => task.id === next[index].id),
          })
          get visibleTasks() {
              return this.tasks.filter((task) => !task.isArchived);
          }
      }

    • Decorator that makes a getter's owning ReactiveNode react to an ordered dependency list.

      Type Parameters

      Parameters

      Returns (
          target: (this: This) => Value,
          context: ClassGetterDecoratorContext<This, Value>,
      ) => (this: This) => Value

      @select is the class-side companion to Retree.select and useSelect. Use it when a getter exposes a narrow value but depends on broader reactive sources. When called with no selector, @select and @select() are interchangeable. Both run the getter under a dependency trapper. Whole Retree-managed values read by the getter are subscribed to broadly. Property reads subscribe to the owner node but compare the specific property value, so task.isCompleted can update when the task slot is replaced or isCompleted changes without reacting to unrelated task.text changes. Primitive values read by the getter are compared. Pass an explicit selector when you want to choose or customize the dependency slots yourself. Wrap a slot with self.dependency(node, comparisons) when that slot needs custom comparison cells. When a selected slot changes, Retree reproxies the owning node and emits nodeChanged for that owner. Pass { equals } to customize the final getter-output comparison. The function receives (self, previous, next) and should return true when the outputs are equivalent, meaning the owner should not emit or reproxy.

      The dependency list is ordered and may change length at runtime. Retree treats additions, removals, and reordering as invalidation and refreshes the underlying subscriptions. Put every value that can change the getter result in the list. Use memo for expensive intermediate getters, then select the memoized value here.

      class AttributeView extends ReactiveNode {
          public attributeId!: string;

          @memo
          private get _attribute() {
              return this.attributes.find((check) => check.id === this.attributeId);
          }

          @select((self) => [
              self.attributes,
              self.attributeId,
              self.dependency(self._attribute, [self._attribute?.id]),
          ])
          get attribute() {
              return this._attribute;
          }
      }

      class TaskRow extends ReactiveNode {
          @link public task!: Task;
          @link public filter!: TaskFilter;

          @select
          get isVisible() {
              return (
                  this.filter.isComplete === null ||
                  this.task.isCompleted === this.filter.isComplete
              );
          }
      }

      class VisibleTaskList extends ReactiveNode {
          public tasks: Task[] = [];

          @select({
              equals: (self, previous, next) =>
                  previous.length === next.length &&
                  previous.every((task, index) => task.id === next[index].id),
          })
          get visibleTasks() {
              return this.tasks.filter((task) => !task.isArchived);
          }
      }

    Settings

    Member Visibility