Nemesia

Nemesia is a small DOM-first runtime for server-rendered and CMS-driven websites. Your server owns the HTML, and Nemesia finds components in your HTML markup then attaches your behavior to them.

It provides typed refs and options, DOM contract validation, lifecycle hooks, automatic event cleanup, and optional observation of dynamic DOM changes. It does not render HTML or introduce a client-side application model.

Install

ESM

npm install nemesia

import { Nemesia, createApp } from 'nemesia'

UMD

<script src="https://cdn.jsdelivr.net/npm/nemesia/dist/nemesia.umd.js"></script>
<script>
	const { Component, DistributedComponent, createApp } = Nemesia
</script>

Quick example

import { Nemesia } from 'nemesia'

class Counter extends Nemesia.Component('counter') {
	button = this.ref.button('button')
	value = this.ref.element('value')
	initial = this.option.optional.number('initial', { default: 0 })

	private count = this.initial

	onMount() {
		this.render()
		this.on(this.button, 'click', () => {
			this.count += 1
			this.render()
		})
	}

	private render() {
		this.value.textContent = String(this.count)
	}
}

const app = Nemesia.createApp({ observe: true })
app.register([Counter])
app.mount(document.body)

<div data-nemesia="counter" data-option-initial="10">
	<button data-ref="button">+</button>
	<span data-ref="value"></span>
</div>

Documentation

The complete guide lives in docs:

1. Getting started
2. HTML contract
3. Applications and registration
4. Concrete components
5. Refs
6. Options
7. Events and lifecycle
8. Dynamic DOM observation
9. Distributed components
10. TypeScript and diagnostics
11. Recipes