Investigate binding usage

[jeluard]

Investigate how (one?) way binding could be provided. This is not about implementing a new binding mechanism but allowing existing ones to be used. The main goal is to unify the syntax to define the default document with the incorporation of changes triggered over time by external events.

An idea would be to rely on separated phases:

• change observation
• detection of impact on a element instance
• change propagation

Change sources include:

• lifecycle events
• host element events
• property changes
• attribute changes
• media queries

Some sources of inspiration include:

• Polymer data binding
• Dart observables
• om
• reagent
• clidget
• reagi
• reflex
• javelin / hoplon
• famous

Potential syntax:

dynamic function indicates a value that will change over time. It can be used for document definition. It accepts a key part (type/value) and a function that extracts some value from what is provided by the change observer. Each time dynamic changes a propagation is triggered. How the propagation is incorporated in the existing document is user definable (react integration). A change observer has a simple lifecycle hooking on element lifecyle. e.g. this allows events observers to register/unregister when an element instance is attached/detached.

on allows to register to events and call functions accordingly. It supersedes on-* style callbacks.

For simplicity all events could use a per instance core.async chan. It could also allow for easy filtering/debouncing. See this.

(defwebcomponent my-dynamic-element
  :document [:ul
             (for [p (dynamic {:property :ids} #(str "item " o))]
               [:li p])]
  :properties {:ids []}
  :on {
    {:lifecycle :created} #(.log js/console "Instance created")
    {:event :resize} #(.log js/console "Instance resized" %)})

(let [el (node :my-dynamic-element)] ;; el document is <ul></ul>
  (append! (sel1 :body) el)
  ;; time passes
  (set-property! el :ids [1 2])) ;; el document is <ul><li>item 1</li><li>item 2</li></ul>

It should play nicely with nested components.

Style

It might be interesting to animate css values too. In this case will-change could be injected automatically.

[jeluard]

Out of scope.