eilmer

Eilmer MVVM

Eilmer is a toolkit for building MVVM applications and frameworks, specifically targeted for (but not limited to) React.

Example Code

The following code gives a good overview of the capabilities of Eilmer. Full documentation will be provided on release.

The Model

  class PersonModel {
    firstName
    lastName

    constructor(firstName, lastName) {
      this.firstName = firstName
      this.lastName = lastName
    }

    hasName(firstName, lastName) {
      return firstName === this.firstName && lastName === this.lastName
    }

    async setName(firstName, lastName) {
      this.firstName = firstName
      this.lastName = lastName
      // await some REST API call, etc
    }
  }

The View Model

  class PersonViewModel {
    #personModel
    firstName
    lastName

    constructor(personModel) {
      this.#personModel = personModel
      this.firstName = this.#personModel.firstName
      this.lastName = this.#personModel.lastName
      this.save.canExecute = false
    }

    onPropertyChange() {
      this.save.canExecute = (
        !this.#personModel.hasName(this.firstName, this.lastName)
        && this.firstName && this.lastName
      )
    }

    onSaved() {
      this.save.canExecute = false
    }

    async save() {
      this.#personModel.setName(this.firstName, this.lastName)
      this.onSaved()
    }
  }

The View

import { Binder, useEvent } from 'eilmer/react'
import { notConverter } from 'eilmer/converters'

  const personModel = new PersonModel('', '')
  const personViewModel = new PersonViewModel(personModel)

  function PersonView({ viewModel = personViewModel }) {
    useEvent(viewModel, 'onSaved', () => {
      alert('Successfully saved!')
      return true
    })

    return <>
      <div>Model Value: {JSON.stringify(personModel)}</div>
      <Binder.Binding vm={viewModel} value="firstName">
        <input/>
      </Binder.Binding>
      <Binder.Binding vm={viewModel} value="lastName">
        <input/>
      </Binder.Binding>
      <Binder.Binding vm={viewModel} command="save" canExecute={['disabled', notConverter]}>
        <button>Save</button>
      </Binder.Binding>
    </>
  }