ElTag

A blazing fast HTML Tag Component Micro-framework

Supports all of the below in ~6kb!:

Component states
Parent component states
All style variables
All event listeners

Retrieving:

JSDelivr kindly hosts this script here

<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/TSedlar/eltag@1.1.7/eltag.min.js'>

Example usage:

codepen

<script>
  const { renderElement, app, range, p, span, button } = ElTag;

  const main = app({
    state: { ctr: 1 }
  }, [
    p({
      class: 'message',
      condition: () => new Date().getDay() == 5
    }, 'TGIF!'),
    p(range(0, 5, (idx, ctx) => span({ 
      class: 'counter',
      state: { offset: idx },
      render: () => this.parent.state.ctr + this.state.offset
    }))),
    button({
      onclick: () => this.setState({ ctr: Math.max(0, this.state.ctr - 1) })
    }, '-'),
    button({
      onclick: () => this.setState({ ctr: this.state.ctr + 1})
    }, '+')
  ]);

  renderElement(document.body, main);
</script>

Example usage 2:

codepen

<script>
  const { renderElement, app, p } = ElTag;

  const main = app([
    p({
      class: 'message',
      state: { ctr: 0 },
      every: {
        1000: () => this.setState({ ctr: this.state.ctr + 1 })
      },
      render: () => this.state.ctr,
      actions: {
        showCtr: () => alert(this.state.ctr)
      },
      onclick: () => this.actions.showCtr()
    })
  ]);

  renderElement(document.body, main);
</script>

Note: every can be an array! multiple separate functions can be executed from it.

every: {
  1000: [fn1, fn2, () => { /* fn2 */ }]
}

Other Methods:

oninit
onrender

PageSpeed Results:

Portfolio page source

kr-hangul page source

IKJP page source

Other Examples

Basic calculator by Finn Thompson

TSedlar / eltag