Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erkkah/denier
Denier - a tiny lib for weaving web apps
https://github.com/erkkah/denier
css frontend html templates tinylibs typescript
Last synced: about 1 month ago
JSON representation
Denier - a tiny lib for weaving web apps
- Host: GitHub
- URL: https://github.com/erkkah/denier
- Owner: erkkah
- License: mit
- Created: 2023-10-05T17:52:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-11T13:07:06.000Z (10 months ago)
- Last Synced: 2024-10-05T02:35:24.849Z (about 2 months ago)
- Topics: css, frontend, html, templates, tinylibs, typescript
- Language: TypeScript
- Homepage:
- Size: 126 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Denier - a tiny lib for weaving web apps. :thread:
**Denier** is a tiny library for building web frontend stuff.
_Yes — it's yet another kind-of reactive web-UI library.
I guess we should throw in "opiniated" too._
**Denier** has templates, events, context-provided objects, state, efficient DOM updates, typed styles et.c.
All in about 850 lines of code, with no external run-time dependencies.
The minimized and gzipped version (why do we still list this?) is about 3k.
- Simple life-cycle, no magic.
- No extra DOMs or diffing.
- Mixes well with other libraries and frameworks.
- No special syntax, just plain HTML and Javascript/Typescript.
- Nice debug helpers
The name "Denier" refers to the unit for tiny thread sizes, and the fact that we deny the existence of all other similar frameworks. Or not. It's just a name. :socks:
## Getting started
### Basics
A Denier template is created using `html` - tagged strings:
```typescript
const message = "Hello, world!";
const template = html`
${message}
`;
```
Templates are rendered into host tags:
```html
```
```typescript
const host = document.getElementById("my-app");
template.render(host!);
```
This would result in the following:
```html
Hello, world!
```
> Note that the template replaces the host tag!
### Sub templates / components
By using a template within another template, we have a simple method for creating components:
```typescript
function title(t) {
return html`
${t}
`;
}
const template = html`
${title("Hello!")}
`;
```
### Template lifecycle
Templates are plain Javascript raw strings with interpolated values. Once created, they are static.
Templates can have dynamic parts by using functions or directives as interpolated values:
```typescript
const now = () => new Date().toLocaleString("sv");
const dynamic = html`
${now}
`;
```
However, templates are not updated just because time passes. That's what the template `update()` method is for.
By calling `update()`, the template and interpolated values are re-evaluated and updated in place.
Updating a template is shallow - sub-templates are not updated when the parent template is.
### Events
Denier has a simple attribute directive for adding event handlers:
```typescript
function doStuff(e) {
// Stuff being done here
}
const button = html`
doStuff(e))}>PRESS ME
`;
```
### Keyed lists
List items can be keyed to allow for efficient update handling:
```typescript
const list = html`
- ${items.map((item) => html`
- ${item.name} `.key(item.id))}
`
```
### "Reactive" components and state
* state in, UI out
* events in, state out
TBW
### Cleanup
* Cleanup handler
TBW
### Directives
* on
* ref
* flag
* provide
* using
* build
* style
TBW
## User input and safety
* No "safe" or "raw" HTML input
TBW
## TODO
- More docs
- More tests and testing
- More examples
- HMR