Talia

Overview Repositories

16

Projects Packages

1

Public activity Starred repositories

nyooom (0.2.0)

Published 2025-12-09 13:04:10 +00:00 by darkwiiplayer in darkwiiplayer/nyooom

Installation

Setup this registry in your project .npmrc file:

registry=

To install the package using npm, run the following command:

npm install nyooom@0.2.0

or add it to the package.json file:

"nyooom": "0.2.0"

For more information on the npm registry, see the documentation.

About this package

Nyooom

A lean and hackable front-end micro-framework

import {html} from "nyooom/render"
import {Observable} from "nyooom/observable"

const text = new Observable({value: "Nyooom is cool"})
setTimeout(() => {text.value = "Nyooom is awesome!"}, 1e5)

document.body.append(html.div(
    html.h1("Hello, World!"),
    html.p(text.signal("value"), {class: "amazing"}),
    html.button("Show Proof", {click: event => { alert("It's true!") }})
))

Goals

Arrakis teaches the attitude of the knife - chopping off what's incomplete and saying: "Now, it's complete because it's ended here."

— Frank Herbert, Dune

Nyooom aims to offer as much convenienve as possible within the following constraints:

1. Small, independent modules that can also work on their own
2. Easy to figure out by someone who doesn't normally use nyooom
3. Easy to gradually introduce and remove rather than forcing big re-writes
4. Flexible and hackable

Importmaps

The included file importmaps.html can be used as a starting point for importing nyooom via importmaps in a minimal environment. Search-and-replace ./ to wherever the library should be loaded from if necessary.

A few more examples:

Create a Button that deletes itself:

document.body.append(
	html.button("Delete Me", {click: event => event.target.remove()})
)

Turn a two-dimensional array into an HTML table:

const table = rows =>
	html.table(html.tbody(rows.map(
		row => html.tr(row.map(
			cell => html.rd(cell, {dataset: {
				content: cell.toLowerCase(),
			}})
		))
	)))

A list that you can add items to

let list, input = ""
document.body.append(html.div([
	list=html.ul(),
	html.input({type: 'text', input: e => input = e.target.value}),
	html.button({click: event => list.append(html.li(input))}, "Add"),
]))

A list that you can also delete items from

const listItem = content => html.li(
	html.span(content), " ", html.a("[remove]", {
		click: event => event.target.closest("li").remove(),
		style: { cursor: 'pointer', color: 'red' },
	})
)
let list, input = ""
document.body.append(html.div([
	list=html.ul(),
	html.input({type: 'text', input: e => input = e.target.value}),
	html.button({click: event => list.append(listItem(input))}, "Add"),
]))

Keywords

front-end components framework reactivity

Details

npm

darkwiiplayer/nyooom

2025-12-09 13:04:10 +00:00

1

darkwiiplayer

Project website

Unlicense

latest

25 KiB

Assets (1)

nyooom-0.2.0.tgz 25 KiB

Versions (1) View all

0.2.0 2025-12-09

Issues