@vyke/taggy NPM

A simple and small library for creating and manipulating HTML elements in a declarative way.

Installation

npm i @vyke/taggy

Hello world

A simple example showing reactive text updates based on input:

import { createRenderer, Html } from '@vyke/taggy'
import { signal, syncValue } from '@vyke/taggy/signals'

const { div, h1, input, label } = Html

const renderer = createRenderer(document.body)

function HelloWorld() {
	const $name = signal('world')

	return div([
		h1(['Hello, ', $name, '!']),
		label(['Name: ',
			input({
				type: 'text',
				// a helper to sync the input value with the signal
				...syncValue($name),
			}),
		]),
	])
}

renderer.render(HelloWorld())

API

createRenderer

Create a renderer with given root element

const renderer = createRenderer(document.body)
renderer.render(App())

$access

Creates an access signal helper to access nested signals

import { $access } from '@vyke/taggy/signals'

const $value = signal({
	nested: {
		count: 0,
	}
})
const $nested = $access($value)
// where $count is a computed signal
const $count = $nested.nested.count

$list

Create a reactive list using signal values

import { $list, li, ul } from '@vyke/taggy'
import { signal } from '@vyke/taggy/signals'

const $items = signal([1, 2, 3])
const elements = ul([
	$list($items, (item) => li([item])),
])

$when

Render the given element based on given cases

import { $when } from '@vyke/taggy'
import { signal } from '@vyke/taggy/signals'

const $value = signal(1)

const content = div([
	$when($value,
		[1, (value) => `One: ${value}`],
		[2, (value) => `Two: ${value}`],
		$when.case((value) => value === 3, (value) => `Three: ${value}`),
	)
])

loadSignal

creates a loader signal that will render a loader based on the status of the promise

import { loadSignal } from '@vyke/taggy'
import { signal } from '@vyke/taggy/signals'

const $user = signal({
	username: 'john_doe',
	age: 30,
})

const $profile = loadSignal(async () => {
	await getProfile($user().username)
})

const content = div([
	$profile.match({
		loading: () => 'Loading...',
		loaded: ($value) => $value().name,
		error: ($error) => `Error: ${$error()}`,
	})
])

$t

Create a signal that updates the text content of a tag

import { signal } from '@vyke/taggy/signals'
import { $t } from '@vyke/taggy/text'

const $name = signal('John Doe')
const $text = $t(() => `Hello, ${$name()}!`)

const content = div([$text])