@teloce/runtime-dom

Author: Aldane Hutchinson

teloce: A JavaScript template engine for Python web developers.

DOM runtime for Teloce — reconciler, directives, keyed loops, and event handling.

Installation

npm install @teloce/runtime-dom

Keyed Loops

Efficient list rendering using a Map cache and insertBefore moves.

Template Syntax

<for key="id" item="product" in="products">
  <div>{{ product.name }}</div>
</for>

JavaScript API

import { For, createFor } from '@teloce/runtime-dom';

const { update, unmount } = createFor(
  container,
  productsSignal,
  (item, index) => {
    const div = document.createElement('div');
    div.textContent = item.name;
    return div;
  },
  (item) => item.id
);

Conditional Rendering

Render different content based on a reactive condition.

Template Syntax

<if loggedIn>
  <h1>Welcome back!</h1>
  <else>
    <button>Login</button>
  </else>
</if>

JavaScript API

import { If, createIf } from '@teloce/runtime-dom';

const { update } = createIf(
  container,
  loggedInSignal,
  () => document.createElement('h1'),
  () => document.createElement('button')
);

Two-Way Binding

Bind form controls to reactive signals using :model.

Template Syntax

<input :model="username">
<h2>Hello {{ username }}</h2>

JavaScript API

import { Model, createModel } from '@teloce/runtime-dom';

const { update, unmount } = createModel(
  inputElement,
  usernameSignal
);

Dynamic Classes

Apply classes dynamically based on reactive state.

Template Syntax

<div :class="{ active: isActive, 'text-bold': isBold }"></div>

JavaScript API

import { Class, createClass } from '@teloce/runtime-dom';

const { update } = createClass(
  divElement,
  classSignal
);

Events

Bind DOM events with support for event modifiers.

Template Syntax

<button @click.prevent="handleClick">
  Click
</button>

JavaScript API

import {
  bindEvents,
  createEventHandlerWithModifiers,
} from '@teloce/runtime-dom';

const unbind = bindEvents(button, [
  createEventHandlerWithModifiers(
    button,
    'click.prevent',
    handleClick
  ),
]);

License

MIT