HTML driven reactivity with customElements
npm install @attributes-unlimited/html-auThis project is now TimberFrameJs see https://github.com/timberframejs/timberframejs/
Just a name change. Everything else is the same.
html
// before click
// after click
Hello World
`
Post to the SERVER first, to translate the message, then post to the component to render on the page
` html
// before click
// after click
Hallo Welt
`
Install
`npm i @attributes-unlimited/html-au`
Project Technical Summary
HTML-AU is an attribute-based 'reactive' (really re-rendering) framework for web components. Inspired by HTMX.
HTML-AU renders HTML on the client using the ES6 customElement specification. HTMX renders html on the server.
CED Component Element Description
CED explained
MDN CreateElement for web components
` html
click
`
Translates to
` js
const helloWorldCED = {
tagName:'div',
attributes:{
is:'hello-world',
msg:'nice to meet you'
}
}
createElement(helloWorldCED)
`
Which is equivalent to
` js
const ele = document.createElement('div', {is: 'hello-world'} )
ele.setAttribute('msg','nice to meet you')
ele.setAttribute('is', 'hello-world')
// before render
// rendered
nice to meet you
`
customElement
` js
export class HelloWorld extends HTMLElement{
connectedCallback(){
this.textContent = this.getAttribute('msg')
}
}
`
Example Click Counter
` js
// simple input and button. Clicking the button updates the input value.
// the rendered live html
au-trigger="click"
au-ced="click-counter"
au-include="closest click-counter"
// au-server="post ./api/click" // to post the data to a server, then send the results to the component
au-target="post closest click-counter">add one
`
Click counter custom element
html is a simple template literal sanitization library that returns a document fragment
` js
import { html } from '../../src/utils/index.js'
export const CLICK_COUNTER = 'click-counter'
export class ClickCounter extends HTMLElement {
body: FormData;
connectedCallback() {
const previousCount = Number(this?.body?.get('counter') ?? 0)
const frag = html
au-trigger='click'
au-ced='${CLICK_COUNTER}'
au-include='closest ${CLICK_COUNTER}'
au-target='post closest ${CLICK_COUNTER}'>click me
this.append(frag)
}
}
``