snabbdom-intent

Imprint action intent onto snabbdom VirtualDOM nodes.

Usage

This library makes it easy to determine the intent of an action on a node. Because DOM events give you the node that the event was tripped you can imprint information you'll need at the resolution of the event on the DOM node itself. Below we're saying that on changing the data of the input field we want to update in-memory state with the input field plus get autocomplete results and then on submitting the input we want to make a search request.

import intent from "snabbdom-intent"
import {input} from "snabbdom-helpers"
 
const searchWith = intent({
  form: "search",
  field: "query"
})
 
export default function searchField (state) {
  return input(
    searchWith({
      change: ["updateFormField", "fetchAutocomplete"],
      submit: ["fetchSearchResults"]
    })(
      {value: state.ephemeral.forms.search.query}
    )
  )
}