cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/twisty/model/TwistyPlayerModel.ts

@@ -0,0 +1,222 @@
+import { AlgProp } from "./props/puzzle/state/AlgProp";
+import { BackgroundProp } from "./props/viewer/BackgroundProp";
+import { BackViewProp } from "./props/viewer/BackViewProp";
+import { ControlPanelProp } from "./props/viewer/ControlPanelProp";
+import { HintFaceletProp } from "./props/puzzle/display/HintFaceletProp";
+import { IndexerConstructorRequestProp } from "./props/puzzle/state/IndexerConstructorRequestProp";
+import { LatitudeLimitProp } from "./props/viewer/LatitudeLimit";
+import { OrbitCoordinatesRequestProp } from "./props/viewer/OrbitCoordinatesRequestProp";
+import { PlayingInfoProp } from "./props/timeline/PlayingInfoProp";
+import { PGPuzzleDescriptionStringProp } from "./props/puzzle/structure/PuzzleDescriptionProp";
+import { PuzzleIDRequestProp } from "./props/puzzle/structure/PuzzleIDRequestProp";
+import { PuzzleLoaderProp } from "./props/puzzle/structure/PuzzleLoaderProp";
+import { SetupAnchorProp } from "./props/puzzle/state/SetupAnchorProp";
+import { StickeringProp } from "./props/puzzle/display/StickeringProp";
+import { TempoScaleProp } from "./props/timeline/TempoScaleProp";
+import { TimestampRequestProp } from "./props/timeline/TimestampRequestProp";
+import { URLProp } from "./props/general/URLProp";
+import { ViewerLinkProp } from "./props/viewer/ViewerLinkProp";
+import { VisualizationFormatProp } from "./props/viewer/VisualizationProp";
+import { OrbitCoordinatesProp } from "./props/viewer/OrbitCoordinatesProp";
+import { PuzzleIDProp } from "./props/puzzle/structure/PuzzleIDProp";
+import { SpriteProp } from "./props/puzzle/display/SpriteProp";
+import { VisualizationStrategyProp } from "./props/viewer/VisualizationStrategyProp";
+import { IndexerConstructorProp } from "./props/puzzle/state/IndexerConstructorProp";
+import { PuzzleAlgProp } from "./props/puzzle/state/PuzzleAlgProp";
+import { AlgTransformationProp } from "./props/puzzle/state/AlgTransformationProp";
+import { IndexerProp } from "./props/puzzle/state/IndexerProp";
+import { AnchoredStartProp } from "./props/puzzle/state/AnchoredStartProp";
+import { TimeRangeProp } from "./props/viewer/TimeRangeProp";
+import { DetailedTimelineInfoProp } from "./props/timeline/DetailedTimelineInfoProp";
+import { CoarseTimelineInfoProp } from "./props/timeline/CoarseTimelineInfoProp";
+import { CurrentLeavesProp } from "./props/puzzle/state/CurrentLeavesProp";
+import { ButtonAppearanceProp } from "./props/viewer/ButtonAppearanceProp";
+import { CurrentLeavesSimplifiedProp } from "./props/puzzle/state/CurrentLeavesSimplified";
+import { CurrentTransformationProp } from "./props/puzzle/state/CurrentTransformationProp";
+import { LegacyPositionProp } from "./props/puzzle/state/LegacyPositionProp";
+import { PuzzleDefProp } from "./props/puzzle/structure/PuzzleDefProp";
+import { UserVisibleErrorTracker } from "./UserVisibleErrorTracker";
+
+export class TwistyPlayerModel {
+  // TODO: incorporate error handling into the entire prop graph.
+  // TODO: Make this something that can't get confused with normal props?
+  userVisibleErrorTracker = new UserVisibleErrorTracker();
+
+  // TODO: Redistribute and group props with controllers.
+
+  // Depth 0
+  algProp = new AlgProp();
+  backgroundProp = new BackgroundProp();
+  backViewProp = new BackViewProp();
+  controlPanelProp = new ControlPanelProp();
+  foundationStickerSpriteURL = new URLProp();
+  hintFaceletProp = new HintFaceletProp();
+  hintStickerSpriteURL = new URLProp();
+  indexerConstructorRequestProp = new IndexerConstructorRequestProp();
+  latitudeLimitProp = new LatitudeLimitProp();
+  orbitCoordinatesRequestProp: OrbitCoordinatesRequestProp =
+    new OrbitCoordinatesRequestProp();
+
+  playingInfoProp = new PlayingInfoProp();
+  puzzleDescriptionRequestProp = new PGPuzzleDescriptionStringProp();
+  puzzleIDRequestProp = new PuzzleIDRequestProp();
+  setupAnchorProp = new SetupAnchorProp();
+  setupProp = new AlgProp();
+  stickeringProp = new StickeringProp();
+  tempoScaleProp = new TempoScaleProp();
+  timestampRequestProp = new TimestampRequestProp();
+  viewerLinkProp = new ViewerLinkProp();
+  visualizationFormatProp = new VisualizationFormatProp();
+
+  // Depth 1
+  foundationStickerSprite = new SpriteProp({
+    spriteURL: this.foundationStickerSpriteURL,
+  });
+
+  hintStickerSprite = new SpriteProp({
+    spriteURL: this.hintStickerSpriteURL,
+  });
+
+  puzzleLoaderProp = new PuzzleLoaderProp(
+    {
+      puzzleIDRequest: this.puzzleIDRequestProp,
+      puzzleDescriptionRequest: this.puzzleDescriptionRequestProp,
+    },
+    this.userVisibleErrorTracker,
+  );
+
+  // Depth 2
+  puzzleDefProp = new PuzzleDefProp({ puzzleLoader: this.puzzleLoaderProp });
+
+  puzzleIDProp = new PuzzleIDProp({ puzzleLoader: this.puzzleLoaderProp });
+
+  // Depth 3
+
+  puzzleAlgProp = new PuzzleAlgProp({
+    algWithIssues: this.algProp,
+    puzzleDef: this.puzzleDefProp,
+  });
+
+  puzzleSetupProp = new PuzzleAlgProp({
+    algWithIssues: this.setupProp,
+    puzzleDef: this.puzzleDefProp,
+  });
+
+  visualizationStrategyProp = new VisualizationStrategyProp({
+    visualizationRequest: this.visualizationFormatProp,
+    puzzleID: this.puzzleIDProp,
+  });
+
+  // Depth 4
+  indexerConstructorProp = new IndexerConstructorProp({
+    alg: this.algProp,
+    puzzle: this.puzzleIDProp,
+    visualizationStrategy: this.visualizationStrategyProp,
+    indexerConstructorRequest: this.indexerConstructorRequestProp,
+  });
+
+  orbitCoordinatesProp = new OrbitCoordinatesProp({
+    orbitCoordinatesRequest: this.orbitCoordinatesRequestProp,
+    latitudeLimit: this.latitudeLimitProp,
+    puzzleID: this.puzzleIDProp,
+    strategy: this.visualizationStrategyProp,
+  });
+
+  setupTransformationProp = new AlgTransformationProp({
+    alg: this.puzzleSetupProp,
+    def: this.puzzleDefProp,
+  });
+
+  // Depth 5
+  indexerProp = new IndexerProp({
+    indexerConstructor: this.indexerConstructorProp,
+    algWithIssues: this.puzzleAlgProp,
+    def: this.puzzleDefProp,
+  });
+
+  // Depth 6
+  anchoredStartProp = new AnchoredStartProp({
+    setupAnchor: this.setupAnchorProp,
+    setupTransformation: this.setupTransformationProp,
+    indexer: this.indexerProp,
+    def: this.puzzleDefProp,
+  });
+
+  timeRangeProp = new TimeRangeProp({
+    indexer: this.indexerProp,
+  });
+
+  // Depth 7
+  detailedTimelineInfoProp: DetailedTimelineInfoProp =
+    new DetailedTimelineInfoProp({
+      timestampRequest: this.timestampRequestProp,
+      timeRange: this.timeRangeProp,
+      setupAnchor: this.setupAnchorProp,
+    });
+
+  // Depth 8
+  coarseTimelineInfoProp = new CoarseTimelineInfoProp({
+    detailedTimelineInfo: this.detailedTimelineInfoProp,
+    playingInfo: this.playingInfoProp,
+  });
+
+  currentLeavesProp = new CurrentLeavesProp({
+    indexer: this.indexerProp,
+    detailedTimelineInfo: this.detailedTimelineInfoProp,
+  });
+
+  // Depth 9
+  // TODO: Inline Twisty3D management.
+  buttonAppearanceProp = new ButtonAppearanceProp({
+    coarseTimelineInfo: this.coarseTimelineInfoProp,
+    viewerLink: this.viewerLinkProp,
+  });
+
+  currentLeavesSimplifiedProp = new CurrentLeavesSimplifiedProp({
+    currentMoveInfo: this.currentLeavesProp,
+  });
+
+  // Depth 10
+  currentTransformationProp = new CurrentTransformationProp({
+    anchoredStart: this.anchoredStartProp,
+    currentLeavesSimplified: this.currentLeavesSimplifiedProp,
+    indexer: this.indexerProp,
+    def: this.puzzleDefProp,
+  });
+
+  // Depth 11
+  legacyPositionProp = new LegacyPositionProp({
+    currentMoveInfo: this.currentLeavesProp,
+    transformation: this.currentTransformationProp,
+  });
+
+  public async twizzleLink(): Promise<string> {
+    const url = new URL("https://alpha.twizzle.net/edit/");
+
+    const [puzzle, alg, setup, anchor] = await Promise.all([
+      this.puzzleIDProp.get(),
+      this.algProp.get(),
+      this.setupProp.get(),
+      this.setupAnchorProp.get(),
+    ]);
+
+    if (!alg.alg.experimentalIsEmpty()) {
+      url.searchParams.set("alg", alg.alg.toString());
+    }
+    if (!setup.alg.experimentalIsEmpty()) {
+      url.searchParams.set("setup-alg", setup.alg.toString());
+    }
+    if (anchor !== "start") {
+      url.searchParams.set("setup-anchor", anchor);
+    }
+    // if (this.experimentalStickering !== "full") {
+    //   url.searchParams.set(
+    //     "experimental-stickering",
+    //     this.experimentalStickering,
+    //   );
+    if (puzzle !== "3x3x3") {
+      url.searchParams.set("puzzle", puzzle);
+    }
+    return url.toString();
+  }
+}

package/src/cubing/twisty/model/UserVisibleErrorTracker.ts

@@ -0,0 +1,22 @@
+import { arrayEquals } from "./helpers";
+import { SimpleTwistyPropSource } from "./props/TwistyProp";
+
+interface UserVisibleError {
+  errors: string[];
+}
+
+const EMPTY_ERRORS = { errors: [] };
+
+export class UserVisibleErrorTracker extends SimpleTwistyPropSource<UserVisibleError> {
+  override getDefaultValue(): UserVisibleError {
+    return EMPTY_ERRORS;
+  }
+
+  reset() {
+    this.set(this.getDefaultValue());
+  }
+
+  canReuseValue(_v1: UserVisibleError, _v2: UserVisibleError): boolean {
+    return arrayEquals(_v1.errors, _v2.errors);
+  }
+}

package/src/cubing/twisty/model/helpers.ts

@@ -0,0 +1,47 @@
+export function arrayEquals<T>(a: readonly T[], b: readonly T[]): boolean {
+  if (a === b) {
+    return true;
+  }
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function arrayEqualsCompare<T>(
+  a: readonly T[],
+  b: readonly T[],
+  compare: (a: T, b: T) => boolean,
+): boolean {
+  if (a === b) {
+    return true;
+  }
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < a.length; i++) {
+    if (!compare(a[i], b[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// Assumes `offset > 0`. Will produce invalid values if not!
+// We don't check for that, since this can be a hot path.
+export function mod(v: number, m: number, offset = 0): number {
+  return (((v % m) + m + offset) % m) - offset;
+}
+
+export function modIntoRange(
+  v: number,
+  rangeMin: number,
+  rangeMax: number,
+): number {
+  return mod(v - rangeMin, rangeMax - rangeMin) + rangeMin;
+}

package/src/cubing/twisty/model/props/TwistyProp.spec.ts

@@ -0,0 +1,38 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { SimpleTwistyPropSource, TwistyPropDerived } from "./TwistyProp";
+
+describe("operation", () => {
+  it("can set, get, and save prop values", async () => {
+    class NumProp extends SimpleTwistyPropSource<number> {
+      getDefaultValue() {
+        return 4;
+      }
+    }
+    class AddProp extends TwistyPropDerived<{ a: number; b: number }, number> {
+      derive(inputs: { a: number; b: number }): number {
+        return inputs.a + inputs.b;
+      }
+    }
+
+    const a = new NumProp();
+    const b = new NumProp(10);
+    const sum = new AddProp({ a, b });
+
+    expect(await sum.get()).toEqual(14);
+
+    // sum.addFreshListener((value: number) => {
+    //   console.log(value);
+    // });
+
+    a.set(8);
+    const savedSum = sum.get();
+    a.set(10);
+    expect(await savedSum).toEqual(18);
+    expect(await sum.get()).toEqual(20);
+
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  });
+});

package/src/cubing/twisty/model/props/TwistyProp.ts

@@ -0,0 +1,366 @@
+import { from } from "../../../vendor/p-lazy/p-lazy";
+import { StaleDropper } from "../PromiseFreshener";
+import type { UserVisibleErrorTracker } from "../UserVisibleErrorTracker";
+
+/*eslint @typescript-eslint/ban-types:off */
+type InputRecord = {};
+
+export type InputProps<T extends InputRecord> = {
+  [s in keyof T]: TwistyPropParent<T[s]>;
+};
+
+type InputPromises<T extends InputRecord> = {
+  [s in keyof T]: Promise<T[s]>;
+};
+
+interface SourceEventDetail<OutputType> {
+  sourceProp: TwistyPropSource<OutputType, any>;
+  value: Promise<OutputType>; // TODO: remove?
+  generation: number;
+}
+
+type SourceEvent<T> = CustomEvent<SourceEventDetail<T>>;
+
+type PromiseOrValue<T> = T | Promise<T>;
+
+// Values of T must be immutable.
+let globalSourceGeneration = 0; // This is incremented before being used, so 1 will be the first active value.
+export abstract class TwistyPropParent<T> {
+  public abstract get(): Promise<T>;
+
+  // Don't overwrite this. Overwrite `canReuseValue` instead.
+  canReuse(v1: T, v2: T): boolean {
+    return v1 === v2 || this.canReuseValue(v1, v2);
+  }
+
+  // Overwrite with a cheap semantic comparison when possible.
+  // Note that this is not called if `v1 === v2` (in which case the value is automatically reused).
+  canReuseValue(_v1: T, _v2: T): boolean {
+    return false;
+  }
+
+  debugGetChildren(): Array<TwistyPropDerived<any, any>> {
+    return Array.from(this.#children.values());
+  }
+
+  // Propagation
+
+  #children: Set<TwistyPropDerived<any, any>> = new Set();
+  protected addChild(child: TwistyPropDerived<any, any>): void {
+    this.#children.add(child);
+  }
+
+  protected removeChild(child: TwistyPropDerived<any, any>): void {
+    this.#children.delete(child);
+  }
+
+  protected lastSourceGeneration: number = 0;
+  // Synchronously marks all descendants as stale. This doesn't actually
+  // literally mark as stale, but it updates the last source generation, which
+  // is used to tell if a cahced result is stale.
+  protected markStale(sourceEvent: SourceEvent<any>): void {
+    if (sourceEvent.detail.generation !== globalSourceGeneration) {
+      // The full stale propagation is synchronous, so there should not be a new one yet.
+      throw new Error("A TwistyProp was marked stale too late!");
+    }
+    if (this.lastSourceGeneration === sourceEvent.detail.generation) {
+      // Already propagated.
+      return;
+    }
+    this.lastSourceGeneration = sourceEvent.detail.generation;
+    for (const child of this.#children) {
+      child.markStale(sourceEvent);
+    }
+    // We schedule sending out events *after* the (synchronous) propagation has happened, in
+    // case one of the listeners updates a source again.
+    this.#scheduleRawDispatch();
+  }
+
+  #rawListeners: Set<() => void> = new Set();
+  /** @deprecated */
+  addRawListener(listener: () => void, options?: { initial: boolean }): void {
+    this.#rawListeners.add(listener);
+    if (options?.initial) {
+      listener(); // TODO: wrap in a try?
+    }
+  }
+
+  /** @deprecated */
+  removeRawListener(listener: () => void): void {
+    this.#rawListeners.delete(listener);
+  }
+
+  /** @deprecated */
+  #scheduleRawDispatch(): void {
+    if (!this.#rawDispatchPending) {
+      this.#rawDispatchPending = true;
+      setTimeout(() => this.#dispatchRawListeners(), 0);
+    }
+  }
+
+  #rawDispatchPending: boolean = false;
+  #dispatchRawListeners(): void {
+    if (!this.#rawDispatchPending) {
+      throw new Error("Invalid dispatch state!");
+    }
+    for (const listener of this.#rawListeners) {
+      listener(); // TODO: wrap in a try?
+    }
+    this.#rawDispatchPending = false;
+  }
+
+  #freshListeners: Map<(value: T) => void, () => void> = new Map();
+  // TODO: Pick a better name.
+  addFreshListener(listener: (value: T) => void): void {
+    const staleDropper: StaleDropper<T> = new StaleDropper<T>();
+    let lastResult: T | null = null;
+    const callback = async () => {
+      const result = await staleDropper.queue(this.get());
+      if (lastResult !== null && this.canReuse(lastResult, result)) {
+        return;
+      }
+      lastResult = result;
+      listener(result);
+    };
+    this.#freshListeners.set(listener, callback);
+    this.addRawListener(callback, { initial: true });
+  }
+
+  removeFreshListener(listener: (value: T) => void): void {
+    this.removeRawListener(this.#freshListeners.get(listener)!); // TODO: throw a custom error?
+    this.#freshListeners.delete(listener);
+  }
+}
+
+export abstract class TwistyPropSource<
+  OutputType,
+  InputType = OutputType,
+> extends TwistyPropParent<OutputType> {
+  #value: Promise<OutputType>;
+
+  public abstract getDefaultValue(): PromiseOrValue<OutputType>;
+
+  constructor(initialValue?: PromiseOrValue<InputType>) {
+    super();
+    this.#value = from(() => this.getDefaultValue());
+    if (initialValue) {
+      this.#value = this.deriveFromPromiseOrValue(initialValue, this.#value);
+    }
+  }
+
+  set(input: PromiseOrValue<InputType>): void {
+    this.#value = this.deriveFromPromiseOrValue(input, this.#value);
+
+    const sourceEventDetail: SourceEventDetail<OutputType> = {
+      sourceProp: this,
+      value: this.#value,
+      generation: ++globalSourceGeneration,
+    };
+    this.markStale(
+      new CustomEvent<SourceEventDetail<OutputType>>("stale", {
+        detail: sourceEventDetail,
+      }),
+    );
+  }
+
+  async get(): Promise<OutputType> {
+    return this.#value;
+  }
+
+  async deriveFromPromiseOrValue(
+    input: PromiseOrValue<InputType>,
+    oldValuePromise: Promise<OutputType>,
+  ): Promise<OutputType> {
+    return this.derive(await input, oldValuePromise);
+  }
+
+  // TODO: add an indirect layer to cache the derivation?
+  protected abstract derive(
+    input: InputType,
+    oldValuePromise: Promise<OutputType>,
+  ): PromiseOrValue<OutputType>;
+}
+
+export abstract class SimpleTwistyPropSource<
+  SimpleType,
+> extends TwistyPropSource<SimpleType> {
+  derive(input: SimpleType): PromiseOrValue<SimpleType> {
+    return input;
+  }
+}
+
+// TODO: Can we support `null` as a valid output value without loosening type
+// safety?
+export const NO_VALUE = Symbol("no value");
+export type NoValueType = typeof NO_VALUE;
+
+export abstract class TwistyPropDerived<
+  InputTypes extends InputRecord,
+  OutputType,
+> extends TwistyPropParent<OutputType> {
+  // cachedInputs:
+  #parents: InputProps<InputTypes>;
+
+  constructor(
+    parents: InputProps<InputTypes>,
+    protected userVisibleErrorTracker?: UserVisibleErrorTracker,
+  ) {
+    super();
+    this.#parents = parents;
+    for (const parent of Object.values(parents)) {
+      (
+        parent as TwistyPropDerived<InputProps<InputTypes>, OutputType>
+      ).addChild(this);
+    }
+  }
+
+  #cachedLastSuccessfulCalculation: {
+    inputs: InputTypes;
+    output: Promise<OutputType>;
+    generation: number;
+  } | null = null;
+
+  #cachedLatestGenerationCalculation: {
+    output: Promise<OutputType>;
+    generation: number;
+  } | null = null;
+
+  public async get(): Promise<OutputType> {
+    const generation = this.lastSourceGeneration;
+
+    if (this.#cachedLatestGenerationCalculation?.generation === generation) {
+      return this.#cachedLatestGenerationCalculation.output;
+    }
+
+    const latestGenerationCalculation = {
+      generation,
+      output: this.#cacheDerive(
+        this.#getParents(),
+        generation,
+        this.#cachedLastSuccessfulCalculation,
+      ),
+    };
+    this.#cachedLatestGenerationCalculation = latestGenerationCalculation;
+
+    this.userVisibleErrorTracker?.reset();
+    return latestGenerationCalculation.output;
+  }
+
+  async #getParents(): Promise<InputTypes> {
+    const inputValuePromises: InputPromises<InputRecord> = {} as any; // TODO
+    for (const [key, parent] of Object.entries(this.#parents)) {
+      (inputValuePromises as Record<string, Promise<unknown>>)[key] = (
+        parent as TwistyPropParent<unknown>
+      ).get();
+    }
+
+    const inputs: InputTypes = {} as any; // TODO
+    for (const key in this.#parents) {
+      inputs[key] = (await (
+        inputValuePromises as Record<string, Promise<unknown>>
+      )[key]) as any;
+    }
+    return inputs;
+  }
+
+  async #cacheDerive(
+    inputsPromise: PromiseOrValue<InputTypes>,
+    generation: number,
+    cachedLatestGenerationCalculation: {
+      inputs: InputTypes;
+      output: Promise<OutputType>;
+      generation: number;
+    } | null = null,
+  ): Promise<OutputType> {
+    const inputs = await inputsPromise;
+
+    const cache = (output: OutputType): OutputType => {
+      this.#cachedLastSuccessfulCalculation = {
+        inputs,
+        output: Promise.resolve(output),
+        generation,
+      };
+      return output;
+    };
+
+    if (!cachedLatestGenerationCalculation) {
+      return cache(await this.derive(inputs));
+    }
+
+    const cachedInputs = cachedLatestGenerationCalculation.inputs;
+    for (const key in this.#parents) {
+      const parent = this.#parents[key];
+      if (!parent.canReuse(inputs[key], cachedInputs[key])) {
+        return cache(await this.derive(inputs));
+      }
+    }
+
+    return cachedLatestGenerationCalculation.output;
+  }
+
+  protected abstract derive(input: InputTypes): PromiseOrValue<OutputType>;
+}
+
+export class FreshListenerManager {
+  #disconnectionFunctions: (() => void)[] = [];
+
+  addListener<T>(
+    prop: TwistyPropParent<T>,
+    listener: (value: T) => void,
+  ): void {
+    let disconnected = false;
+    const wrappedListener = (value: T) => {
+      if (disconnected) {
+        // TODO
+        // console.warn("Should be disconnected!");
+        return;
+      }
+      listener(value);
+    };
+
+    prop.addFreshListener(wrappedListener);
+
+    this.#disconnectionFunctions.push(() => {
+      prop.removeFreshListener(wrappedListener);
+      disconnected = true;
+    });
+  }
+
+  addMultiListener<U, V>(
+    props: [TwistyPropParent<U>, TwistyPropParent<V>],
+    listener: (values: [U, V]) => void,
+  ) {
+    let disconnected = false;
+    const wrappedListener = async (_: any) => {
+      if (disconnected) {
+        // TODO
+        // console.warn("Should be disconnected!");
+        return;
+      }
+      // We rely on `TwistyProp` caching to give us the full set of latest
+      // values efficiently.
+      const promises = (props as TwistyPropParent<any>[]).map((prop) =>
+        prop.get(),
+      );
+      const values = await Promise.all(promises);
+      listener(values as any); // TODO: fix up types
+    };
+
+    for (const prop of props) {
+      prop.addFreshListener(wrappedListener);
+    }
+
+    this.#disconnectionFunctions.push(() => {
+      for (const prop of props) {
+        prop.removeFreshListener(wrappedListener);
+      }
+      disconnected = true;
+    });
+  }
+
+  disconnect(): void {
+    for (const disconnectionFunction of this.#disconnectionFunctions) {
+      disconnectionFunction();
+    }
+  }
+}