Component

Component turns any value into a callable factory, useful for creating dynamic or untracked components. You can preset props at factory time; calling the factory with more props shallow-merges them over the presets (later wins, key-by-key). For the JSX equivalent see <Dynamic/>; for class-style components, see Pota.

When the second argument is omitted, Component just wraps value so it can be invoked imperatively and keep receiving fresh props on each call.

Arguments

name	type	description
value	string | Function | Element | object | symbol	what to turn into a factory. Strings become intrinsic elements ('div'); functions become user components; Elements are wrapped as-is; anything else renders via toString.
props?	object	preset props. Omitted entirely when you only want the factory. When the factory is later called with overrides, the two are shallow-merged as { ...preset, ...override }.

Returns: a component function (props?) => JSX.Element.

Examples

Component with fixed props

Pre-bake a tag's props once, then drop the result into JSX like any other component. The preset class and type ride along while each usage adds its own children and events.

import { Component, render } from 'pota'

const PrimaryButton = Component('button', {
	class: 'btn primary',
	type: 'button',
})

function App() {
	return (
		<div>
			<PrimaryButton on:click={() => alert('hi')}>save</PrimaryButton>
			<PrimaryButton on:click={() => alert('cancel')}>
				cancel
			</PrimaryButton>
		</div>
	)
}

render(App)

Component as a factory

Capture default props and reuse the factory across several usages.

import { Component, render } from 'pota'

function App() {
	const Element = Component('marquee', {
		children: 'hello world',
		'style:color': 'aqua',
	})

	return (
		<main>
			<Element />
			<Element />
		</main>
	)
}

render(App)

Component with props override

Calling the factory with new props shallow-merges them over the presets, so children and style:color can be overridden per usage.

import { Component, render } from 'pota'

function App() {
	const Element = Component('marquee', {
		children: 'hello world',
		'style:color': 'aqua',
	})

	return (
		<main>
			<Element />
			<Element>bye world</Element>
			<Element style:color="lime" />
		</main>
	)
}

render(App)

Component with no preset props

The props argument may be omitted; the factory then takes all its props at call time.

import { Component, render } from 'pota'

function App() {
	const Fun = Component('marquee')

	return (
		<main>
			<Fun style:color="aqua">Hi there :)</Fun>
			<Fun style:color="aquamarine">Im bender from the future</Fun>
		</main>
	)
}

render(App)