README
µhydro
Photo by OpticalNomad on Unsplash
micro hydro is a minimalistic 1.45K hydro-js "subset" to build declarative and reactive UIs.
Concept
Proxys for reactive Behaviour and WeakMaps for dependencies. HTM could be used for pure Web usage.
Documentation
h
args: JSX args
returns: HTMLElement | DocumentFragment
Receives an JSX object and transforms it to HTML. Used for internal bookkeeping too.
Special Attribute
- data-bind: normally a swap operation would only affect the individual elements. However, it can be useful to target an upper element for a swap. This is possible with the data-bind attribute on the upper element.
reactive
args: any
returns: unique Proxy
This can be used in the JSX. As the name suggests, changes will be applied automatically to the DOM. In order to change the value, the returned Proxy has to be called.
Example
const id = reactive(1);
id(20); // Change the value
render
args:
- elem:
Element
- where?:
Element
returns: void
A very simple render function. No diffing or patching happens here. Just platform replace or insert.
observe
args:
- proxy:
ReturnType<typeof reactive>
- fn:
(newVal, oldVal) => {}
Calls the function whenever the value of reactive Proxy changes. This is only one layer deep.
view
Render the elements whenever the data changes. It will handle the operation for deletion, addition, swapping etc. This defaults to a keyed solution.
args:
- root:
string
(CSS selector) - data:
ReturnType<typeof reactive>
- renderFunction:
(item: any, i: number) => { // return elem; }
Example
const data = reactive([{ id: 4, label: "Red Onions" }])
view('.table', data, (item, i) => <tr>Reactive: {data[i].id}, Non-reactive: {item.id}<tr>)
getValue
args: ReturnType<typeof reactive>
returns: currently set value
Returns the value inside of the Proxy.
Example
const person = reactive({ name: "Steve" });
console.log(getValue(person));