hydroxide-dom

DOM renderer for Hydroxide Framework

It exposes a set of APIs that is used by the Hydroxide Compiler to render JSX to DOM elements and a set of APIs for Library users.

APIs for Library Users

render

renders the given Component inside the given container element

render(component: Component<any>, container: HTMLElement)

Example

import { render } from 'hydroxide-dom'

// component
const Hello = () => <p> Hello World </p>

// container where we want to render the component
const container = document.querySelector('#app')

render(Hello, container)

<List />

A component that maps a given list of items to DOM elements and updates them whenever the list is updated.

Note: A List component requires that it is wrapped with a containing element.

export type ListProps<T> = {
  each: Array<T>
  as: (item: ReadonlyReactive<T>) => JSX.Element
}

List<T>(props: ListProps<T>): JSX.Element

Example

import { List } from 'hydroxide-dom'
import { reactive } from 'hydroxide'

function Names() {
  const names = reactive(['John', 'Jane', 'Mary'])

  return (
    <ul>
      <List each={names()} as={name => <li>{name()}</li>} />
    </ul>
  )
}

APIs for Hydroxide Compiler

These APIs are NOT meant to be used by Library users, they are only for Hydroxide Compiler.

Checkout the Hydroxide Compiler Playground to see how the compiler uses these APIs.

template, svg

Creates an HTML Element from given HTML markup. If the markup is of an SVG element, svg should be used instead of template as SVG element needs to be created a bit differently.

template(html: string): HTMLElement

svg(html: string): HTMLElement

setAttribute

sets attribute of given HTMLElement.

If the value is falsy, the attribute is removed from the element

setAttribute(element: HTMLElement, attrName: string, value: string)

insert

inserts an expression in place of given marker comment element

the expression can be either a stringifiable value, HTMLElement or an array of them.

insert(marker: Comment, expr: any)

component

Initializes a component with given props

component(comp: Component<any>, props?: Record<string, any>): JSX.Element

delegateEvents

delegates given events for the application

delegateEvents(eventNames: string[])

branch

creates a branching logic

export type Branch = [condition: Function, renderer: () => HTMLElement]

branch(...branches: Branch[])