Reactive viewmodel implementation with observable state management and computed properties.

Install

- npm

``bash
npm install --save @guanghechen/viewmodel
`

- yarn

`bash
yarn add @guanghechen/viewmodel
`

Usage

| Name | Description |
| :-----------------: | :-------------------------------------------------------: |
| ViewModel | Abstract base class for reactive view models |
| State | Observable state with React-like setState API |
| Computed | Computed values derived from other observables |
| ObservableMap | Observable immutable map with change notifications |
| ObservableSet | Observable immutable set with change notifications |

Examples

$3

`typescript
import { ViewModel, State } from '@guanghechen/viewmodel'
import { Subscriber } from '@guanghechen/subscriber'

class CounterViewModel extends ViewModel {
public readonly count$ = new State(0)
public readonly message$ = new State('Hello')

constructor() {
super()
this.registerDisposable(this.count$)
this.registerDisposable(this.message$)
}

public increment(): void {
this.count$.updateState(prev => prev + 1)
}

public setMessage(msg: string): void {
this.message$.updateState(msg)
}
}

const viewModel = new CounterViewModel()

// Subscribe to state changes
const subscriber = new Subscriber({
onNext: (count) => console.log('Count:', count)
})
viewModel.count$.subscribe(subscriber)

viewModel.increment() // Output: "Count: 1"
viewModel.increment() // Output: "Count: 2"
`

$3

`typescript
import { ViewModel, State, Computed } from '@guanghechen/viewmodel'

class UserViewModel extends ViewModel {
public readonly firstName$ = new State('John')
public readonly lastName$ = new State('Doe')
public readonly fullName$: Computed

constructor() {
super()
this.registerDisposable(this.firstName$)
this.registerDisposable(this.lastName$)

// Create computed property
this.fullName$ = Computed.fromObservables(
[this.firstName$, this.lastName$],
([first, last]) => ${first} ${last}
)
}

public setFirstName(name: string): void {
this.firstName$.updateState(name)
}

public setLastName(name: string): void {
this.lastName$.updateState(name)
}
}

const userVM = new UserViewModel()
console.log(userVM.fullName$.getSnapshot()) // "John Doe"

userVM.setFirstName('Jane')
console.log(userVM.fullName$.getSnapshot()) // "Jane Doe"
`

$3

`typescript
import { ViewModel, ObservableMap, ObservableSet } from '@guanghechen/viewmodel'
import { Map, Set } from 'immutable'

class TodoViewModel extends ViewModel {
public readonly todos$ = new ObservableMap(Map())
public readonly tags$ = new ObservableSet(Set())

constructor() {
super()
this.registerDisposable(this.todos$)
this.registerDisposable(this.tags$)
}

public addTodo(id: string, todo: Todo): void {
this.todos$.set(id, todo)
}

public removeTodo(id: string): void {
this.todos$.delete(id)
}

public addTag(tag: string): void {
this.tags$.add(tag)
}

public addMultipleTags(tags: string[]): void {
this.tags$.addAll(tags)
}
}

interface Todo {
title: string
completed: boolean
}
`

$3

`typescript
import { State } from '@guanghechen/viewmodel'

const userState = new State({ name: 'John', age: 30 })

// React-like setState with function
userState.setState(prev => ({ ...prev, age: prev.age + 1 }))

// Direct state update
userState.updateState({ name: 'Jane', age: 25 })

// Subscribe to changes
const unsubscribe = userState.subscribeStateChange(() => {
console.log('State changed:', userState.getSnapshot())
})

// React integration helpers
const snapshot = userState.getSnapshot() // For client-side
const serverSnapshot = userState.getServerSnapshot() // For SSR
`

$3

`typescript
import { ViewModel, State } from '@guanghechen/viewmodel'
import { Subscriber } from '@guanghechen/subscriber'

class DashboardViewModel extends ViewModel {
public readonly users$ = new State(0)
public readonly orders$ = new State(0)
public readonly revenue$ = new State(0)

constructor() {
super()
this.registerDisposable(this.users$)
this.registerDisposable(this.orders$)
this.registerDisposable(this.revenue$)
}

public observeMetrics(): void {
// Create ticker that combines multiple observables
const metricsTicker = this.ticker(['users$', 'orders$', 'revenue$'])

const subscriber = new Subscriber({
onNext: () => {
const metrics = {
users: this.users$.getSnapshot(),
orders: this.orders$.getSnapshot(),
revenue: this.revenue$.getSnapshot()
}
console.log('Metrics updated:', metrics)
}
})

metricsTicker.ticker.subscribe(subscriber)
}

public updateMetrics(users: number, orders: number, revenue: number): void {
this.users$.updateState(users)
this.orders$.updateState(orders)
this.revenue$.updateState(revenue)
}
}
``

Reference

- [homepage][homepage]

[homepage]:
https://github.com/guanghechen/sora/tree/@guanghechen/viewmodel@2.0.0/packages/viewmodel#readme