Photo by OpticalNomad on Unsplash
micro hydro is a minimalistic 1.45K hydro-js "subset" to build declarative and reactive UIs.
Proxys for reactive Behaviour and WeakMaps for dependencies. HTM could be used for pure Web usage.
args: JSX args
returns: HTMLElement | DocumentFragment
Receives an JSX object and transforms it to HTML. Used for internal bookkeeping too.
- 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.
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.
const id = reactive(1);
id(20); // Change the value
args:
- elem:
Element
- where?:
Element
returns: void
A very simple render function. No diffing or patching happens here. Just platform replace or insert.
args:
- proxy:
ReturnType<typeof reactive>
- fn:
(newVal, oldVal) => {}
Calls the function whenever the value of reactive Proxy changes. This is only one layer deep.
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; }
const data = reactive([{ id: 4, label: "Red Onions" }])
view('.table', data, (item, i) => <tr>Reactive: {data[i].id}, Non-reactive: {item.id}<tr>)
args: ReturnType<typeof reactive>
returns: currently set value
Returns the value inside of the Proxy.
const person = reactive({ name: "Steve" });
console.log(getValue(person));