aeico

Lightweight Web Components framework — reactive elements, declarative DOM rendering, and i18n support.

aeico is a meta package that re-exports everything from aeico-element and aeico-view.

Installation

npm install aeico

For i18n support, also install:

npm install aeico-localize

Quick Start

import { AeicoElement, prop, html } from 'aeico';
import { watch } from 'aeico-element';

class MyCounter extends AeicoElement {
  @prop() accessor count = 0;

  @watch('count')
  onCountChange(next: number) {
    console.log('count is now', next);
  }

  override render() {
    return html(({ button, span }) => {
      button({ onclick: () => this.count++, textContent: '+' });
      span({ textContent: String(this.count) });
    });
  }
}

MyCounter.register('my-counter');

i18n

import { locale, t } from 'aeico-localize';

// update() sets the language and loads translations in one call
locale.update('zh-CN', { save: '保存' });

console.log(t('save', 'Save')); // "保存"

Packages

| Package | Description | |---|---| | aeico-element | Reactive base classes and decorators | | aeico-view | DOM rendering — html(), render(), tags | | aeico-localize | i18n — t(), locale, localeRegistry |

License

ISC