Starting up as a personal experiment the framework is not in even in an alpha state right now, so please use it just for testing and helping with the development.

DOCS

Full documentation is available here https://neondot.rndv.studio/

Example of basic usage

To test this file use a bundler and include the result in an html file

import { DotApp, DotComponent, register, html } from 'dot';

const app = new DotApp();

class AppTitle extends DotComponent {
  // Declare observed attributes thath will trigger renders on change
  static get observedAttributes() { return ['title']; }
  static get tag() { return 'app-title' }

  constructor() {
    super();

    this.$data.something = null;

    // Watch this data and log it's value on change
    this.$watchers.set('something', (newValue, oldValue) => {
      console.log('Old: ', oldValue);
      console.log('New: ', newValue);
    });

    this.$template = () => html`
      <style>
        h1 { color: darkgray; }
      </style>
      <h1>${this.getAttribute('title')}</h1>
    `;
  }
}

class TextBlock extends DotComponent {
  static get tag() { return 'text-block' }

  constructor() {
    super();

    this.$template = () => html`
      <!-- Mount a child compinent using the template -->
      <app-title title="Hello world!" ref="title"></app-title>
    `;

    requestAnimationFrame(() => {
      // Wait next tick and render its child
      this.$refs.title.render();
    });

    setTimeout(() => {
      // Update the title attribute, and trigger the update
      this.$refs.title.setAttribute('title', '...Hooray!');
      // Also trigger a watcher by changing a watched data
      this.$refs.title.$data.something = 'hello!';
    }, 2000);
  }
}

// Create the app mounting it on a DOM node
app.create(document.querySelector('#app'));

// Register both the components
register(AppTitle);
register(TextBlock);

// Pragmatically create a TextBlock component
const tb = new TextBlock();
// Mount the text block on the app node by not settina a parent
app.mount(tb);

console.log(app.$children);