@easrng/elements

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

1import {render, signal, computed, type Component} from '@easrng/elements';
2
3const Counter: Component = ({html}) => {
4  const value = signal(0);
5  return html`
6    <div>
7      Counter: ${value} is ${computed(() => (value.value % 2 ? 'odd' : 'even'))}
8    </div>
9    <button onClick=${() => value.value++}>Increment</button>${" "}
10    <button onClick=${() => value.value--}>Decrement</button>
11  `;
12};
13
14document.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:

1import elementsMinify from '@easrng/elements/minify';
2
3export default {
4  plugins: [
5    elementsMinify(),
6  ],
7};

 

More docs coming Soon™.