@hyperfrontend/ui-utils/componentcomponent
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
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