src/state/ViewModel.ts

/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
*/

import { ObservableScope } from "./ObservableScope";

/**
 * An MVVM view model.
 */
export abstract class ViewModel {
  protected readonly scope = new ObservableScope();

  /**
   * Instructs the ViewModel to clean up its resources. If you forget to call
   * this, there may be memory leaks!
   */
  public destroy(): void {
    this.scope.end();
  }
}
Start refactoring some business logic into view models As Element Call grows in complexity, it has become a pain point that our business logic remains so tightly coupled to the UI code. In particular, this has made testing difficult, and the complex semantics of React hooks are not a great match for arbitrary business logic. Here, I show the beginnings of what it would look like for us to adopt the MVVM pattern. I've created a CallViewModel and TileViewModel that expose their state to the UI as rxjs Observables, as well as a couple of helper functions for consuming view models in React code. This should contain no user-visible changes, but we need to watch out for regressions particularly around focus switching and promotion of speakers, because this was the logic I chose to refactor first. 2023-11-30 22:59:19 -05:00			`/*`
Update file headers copyright and change licence to AGPL-3.0-only 2024-09-06 10:22:13 +02:00			`Copyright 2023, 2024 New Vector Ltd.`
Start refactoring some business logic into view models As Element Call grows in complexity, it has become a pain point that our business logic remains so tightly coupled to the UI code. In particular, this has made testing difficult, and the complex semantics of React hooks are not a great match for arbitrary business logic. Here, I show the beginnings of what it would look like for us to adopt the MVVM pattern. I've created a CallViewModel and TileViewModel that expose their state to the UI as rxjs Observables, as well as a couple of helper functions for consuming view models in React code. This should contain no user-visible changes, but we need to watch out for regressions particularly around focus switching and promotion of speakers, because this was the logic I chose to refactor first. 2023-11-30 22:59:19 -05:00
Update file headers copyright and change licence to AGPL-3.0-only 2024-09-06 10:22:13 +02:00			`SPDX-License-Identifier: AGPL-3.0-only`
			`Please see LICENSE in the repository root for full details.`
Start refactoring some business logic into view models As Element Call grows in complexity, it has become a pain point that our business logic remains so tightly coupled to the UI code. In particular, this has made testing difficult, and the complex semantics of React hooks are not a great match for arbitrary business logic. Here, I show the beginnings of what it would look like for us to adopt the MVVM pattern. I've created a CallViewModel and TileViewModel that expose their state to the UI as rxjs Observables, as well as a couple of helper functions for consuming view models in React code. This should contain no user-visible changes, but we need to watch out for regressions particularly around focus switching and promotion of speakers, because this was the logic I chose to refactor first. 2023-11-30 22:59:19 -05:00			`*/`

Add data models for the new call layouts This is a start at implementing the call layouts from the new designs. I've added data types to model the contents of each possible layout, and begun implementing the business logic to produce these layouts in the call view model. 2024-01-20 20:39:12 -05:00			`import { ObservableScope } from "./ObservableScope";`
Start refactoring some business logic into view models As Element Call grows in complexity, it has become a pain point that our business logic remains so tightly coupled to the UI code. In particular, this has made testing difficult, and the complex semantics of React hooks are not a great match for arbitrary business logic. Here, I show the beginnings of what it would look like for us to adopt the MVVM pattern. I've created a CallViewModel and TileViewModel that expose their state to the UI as rxjs Observables, as well as a couple of helper functions for consuming view models in React code. This should contain no user-visible changes, but we need to watch out for regressions particularly around focus switching and promotion of speakers, because this was the logic I chose to refactor first. 2023-11-30 22:59:19 -05:00
			`/**`
			`* An MVVM view model.`
			`*/`
			`export abstract class ViewModel {`
Add data models for the new call layouts This is a start at implementing the call layouts from the new designs. I've added data types to model the contents of each possible layout, and begun implementing the business logic to produce these layouts in the call view model. 2024-01-20 20:39:12 -05:00			`protected readonly scope = new ObservableScope();`
Start refactoring some business logic into view models As Element Call grows in complexity, it has become a pain point that our business logic remains so tightly coupled to the UI code. In particular, this has made testing difficult, and the complex semantics of React hooks are not a great match for arbitrary business logic. Here, I show the beginnings of what it would look like for us to adopt the MVVM pattern. I've created a CallViewModel and TileViewModel that expose their state to the UI as rxjs Observables, as well as a couple of helper functions for consuming view models in React code. This should contain no user-visible changes, but we need to watch out for regressions particularly around focus switching and promotion of speakers, because this was the logic I chose to refactor first. 2023-11-30 22:59:19 -05:00
			`/**`
			`* Instructs the ViewModel to clean up its resources. If you forget to call`
			`* this, there may be memory leaks!`
			`*/`
			`public destroy(): void {`
Add data models for the new call layouts This is a start at implementing the call layouts from the new designs. I've added data types to model the contents of each possible layout, and begun implementing the business logic to produce these layouts in the call view model. 2024-01-20 20:39:12 -05:00			`this.scope.end();`
Start refactoring some business logic into view models As Element Call grows in complexity, it has become a pain point that our business logic remains so tightly coupled to the UI code. In particular, this has made testing difficult, and the complex semantics of React hooks are not a great match for arbitrary business logic. Here, I show the beginnings of what it would look like for us to adopt the MVVM pattern. I've created a CallViewModel and TileViewModel that expose their state to the UI as rxjs Observables, as well as a couple of helper functions for consuming view models in React code. This should contain no user-visible changes, but we need to watch out for regressions particularly around focus switching and promotion of speakers, because this was the logic I chose to refactor first. 2023-11-30 22:59:19 -05:00			`}`
			`}`