dominiq

A happy medium between classic DOMs and upcoming new ES features

Usage no npm install needed!

<script type="module">
  import dominiq from 'https://cdn.skypack.dev/dominiq';
</script>

README

Dominiq

Travis CI Codecov npm

A happy medium between classic DOMs and upcoming new ES features:

  • listen() DOM events and extract data from them in Observable way.
  • App class provides an easy way to handle states and actions:
    • app.commit() to mutate its state
    • app.dispatch() to call an action

Dominiq found a natural way to build an application with modern methods. We fully respect these native JavaScript features and just combined them:

Contents

  • Core concept (see below)
  • Basic usages (see below)
  • Installation
  • Extraction
    • Nested names / From events / Via Observables / Full or partial data / Event delegation
  • State
    • Set and get / Flat or nested / Computed properties / Input validations / Sanitization
  • Action
    • Dispatch / Mutation / Async operation / Separated code
  • Events
    • render / rendered / started / stopped / changed:*
  • APIs

Core concept

From such a DOM tree:

<body>
  <input name="first" value="John">
  <input name="last" value="Doe">
</body>

Extract the data:

const data = extract(document.body) // { first: "John", last: "Doe" }

Or, merge them into the state continuously in Observable way:

const state = { first: "", last: "" }
listen(document.body, "change") // Create event observable
  .subscribe(e => merge(state, toData(e))) // Extract the data

Basic usages

Prepare such a view file:

// view.js
import { html } from "lit-html/lib/lit-extended"
export default state => html`
  <h1>Hello ${ state.first }!</h1>
  <input name="first" value="${ state.first }">
  <input name="last" value="${ state.last }">
  <button name="submit">Click me!</button>
`

Note: In the example, we use lit-html as a HTML renderer, but you can choose any library/framework for it.

import { render } from "lit-html"
import { listen, App } from "dominiq"
import view from "./view.js"

const initialState = { first: "", last: "" }
const actions = {
  submit (state) { console.log(`Hello ${ state.first }!`) }
}
const dom = document.body
const app = new App({ initialState, actions })

// Listen <input> and commit changes into the state
listen(dom, "change").subscribe(app.commit)
// Listen <button> and dispatch actions
listen(dom, "click").subscribe(app.dispatch)
// Listen app and render the view
listen(app, "render").subscribe(state => render(view(state), dom))
app.start()

Note: listen() is just a thin helper and equivalent to RxJS's fromEvent()

License

MIT