This project is now TimberFrameJs see https://github.com/timberframejs/timberframejs/

Just a name change. Everything else is the same.

HTML-AU

HTML-AU is inspired by HTMX. Instead of rendering HTML on the server like HTMX, HTML-AU uses client-side JavaScript native customElements to generate HTML.

Uses the fundamentals of get and post to pass data between attributes and components or attributes and the server.

``

 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





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



    this.append(frag)

  }

}