@easrng/elements

A tiny framework powered by @preact/signals-core.

import {render, signal, computed, type Component} from '@easrng/elements';

const Counter: Component = ({html}) => {
  const value = signal(0);
  return html`
    <div>
      Counter: ${value} is ${computed(() => (value.value % 2 ? 'odd' : 'even'))}
    </div>
    <button onClick=${() => value.value++}>Increment</button>${" "}
    <button onClick=${() => value.value--}>Decrement</button>
  `;
};

document.body.append(render(Counter));

Don't need signals?

Import @easrng/elements/tiny for an even smaller version with no dependencies.

Minify your html`` template strings for production

Webpack and Rspack

Use @easrng/elements/minify as a loader.

Rollup, Vite, and Rolldown

Add the plugin to your configuration file:

import elementsMinify from '@easrng/elements/minify';

export default {
  plugins: [
    elementsMinify(),
  ],
};

 

More docs coming Soon™.