Dominiq NPM | npm.io

Dominiq

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:

Proxy (ES2015): for immutable states
Getter (ES2015): for computed properties
Async Function (ES2017) / Async Iteration (Stage 4): for action handlers
Observable (Stage 1): for DOM events, app events and actions
Event Delegation (old-world): for view / logic separation

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()