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.
renders the given Component inside the given container element
render(component: Component<any>, container: HTMLElement)
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)
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
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>
)
}
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.
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
sets attribute of given HTMLElement.
If the value is falsy, the attribute is removed from the element
setAttribute(element: HTMLElement, attrName: string, value: string)
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)
Initializes a component with given props
component(comp: Component<any>, props?: Record<string, any>): JSX.Element
delegates given events for the application
delegateEvents(eventNames: string[])
creates a branching logic
export type Branch = [condition: Function, renderer: () => HTMLElement]
branch(...branches: Branch[])