@hyperfrontend/ui-utils/component

component

Styled DOM-component factory: pairs a creator function with a styling function for one self-contained component definition.

component(create, style) accepts a CreateFn that builds the DOM tree and a StyleFn that produces the per-instance CSS. The returned factory pairs the two so callers get a single function that yields a styled element ready to mount. Designed for small, framework-agnostic components in static pages, demos, and DOM-driven utilities; pick a real framework when you need lifecycle, state, or reactivity.

API Reference§

ƒ Functions

§function

component<T, Args>(create: CreateFn<T, Args>, style?: StyleFn): (args: Args) => ElementMethods<T>

Creates a component wrapper that applies styles once and returns element methods.

Parameters

Name	Type	Description
§create	`CreateFn<T, Args>`	Factory function to create element methods
§style?	`StyleFn`	Optional style function to apply component styles

Returns

(args: Args) => ElementMethods<T>

A run-once function that creates the component

Example

Creating styled component

const createButton = (label: string) => createElement('button', { className: 'btn' })
const buttonStyles = () => addStylesheet({ '.btn': { padding: '8px 16px' } }, 'btn-styles')

const Button = component(createButton, buttonStyles)

// First call applies styles and creates button
const btn1 = Button('Submit')

// Subsequent calls return same instance (styles only applied once)
const btn2 = Button('Cancel')
// btn1 === btn2

View source →

◆ Types

§type

CreateFn

Factory function that creates element methods from arguments

type CreateFn = (args: Args) => ElementMethods<T>

View source →

§type

StyleFn

Function that returns a style element and a cleanup function

type StyleFn = () => [HTMLStyleElement, () => void]

View source →