Dominiq
A happy medium between classic DOMs and upcoming new ES features:
-
listen()DOM events and extract data from them in Observable way. -
Appclass 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
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 dataBasic 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