https://github.com/cloudspeech/sig-html
A micro framework featuring signals + lit-html template syntax
https://github.com/cloudspeech/sig-html
Last synced: about 1 month ago
JSON representation
A micro framework featuring signals + lit-html template syntax
- Host: GitHub
- URL: https://github.com/cloudspeech/sig-html
- Owner: cloudspeech
- License: mit
- Created: 2023-10-02T09:32:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-05T16:39:17.000Z (about 1 year ago)
- Last Synced: 2025-02-03T20:09:59.380Z (3 months ago)
- Language: JavaScript
- Size: 85.9 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sig-html
sig-html is a micro framework for web apps based on plain or computed signals + lit-html template syntax.
How micro? **943** bytes, when maximally Brotli-compressed!
## Status
This is alpha-quality software and as such not ready for production.
## Counter Example
```js
Counter Example in sig-html
import {html, render, Signal} from './index.js';
const container = document.querySelector('.app');
const counter = new Signal(0);
const app = html `<h1 title="${counter}">${document.title}</h1>
<div class="container">
<button @click="${e => counter.value++}">+</button>
<span class="value">${counter}</span>
<button @click="${e => counter.value--}">-</button>
</div>`;
render(container, app);
```
## Supported lit-html syntax
```html
alert(e)}">${5}
```
This is a subset of the [full lit-html syntax](https://lit.dev/docs/templates/expressions/).
## Known restrictions:
- Signals are the only mechanism provided for reactivity
- any template literal variables must span the _entire_ attribute value or text content in which it occurs, i.e. no `some ${aTemplateVariable} followed by other text or template variable` is allowed (for now)
- no HTML validation or sanitizing whatsoever
- no careful memory or performance optimizations (yet)
## How to try it out
1. Install [bun](https://bun.sh)
2. bun install
3. bun start
4. Point your browser to http://localhost:8080/index.html **or** http://localhost:8080/counter.html **or** http://localhost:8080/spreadsheet.html **or** http://localhost:8080/eventlog.html