Investigate binding usage
jeluard opened this issue · comments
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.
Out of scope.