µ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));