Yhtml

Overview

If you’re looking for a lightweight solution for rendering Web Component templates, yhtmlTiny might just be the tool you need. This library packs a punch in just 481 bytes, providing powerful interpolation and efficient event binding specifically designed for custom elements. With its clean and straightforward API, it makes building dynamic web applications simpler and more enjoyable.

What sets yhtmlTiny apart is its event delegation mechanism, which ensures that event handlers remain effective even after the innerHTML of components is updated. This is particularly useful for developers who are concerned about performance but still want to maintain interactivity in their applications.

Features

• Lightweight Design: At only 481 bytes, this library offers a compact solution for rendering templates without compromising on functionality.

• Sensible Interpolation: Utilize short-circuit logic with '&&' to test for truthiness, making it easier to handle conditions inline.

• Array Iteration: Simplify the rendering of lists with built-in support for iterating over arrays using the map method.

• HTML Escaping: Automatically escape interpolated values by default, ensuring protection against XSS vulnerabilities.

• Raw HTML Insertion: Include raw HTML content by invoking the html function, allowing for greater control over template rendering.

• Event Binding: Bind events effortlessly using @event attributes, with event handlers set on the window to enhance performance through event delegation.

• Robust Event Handling: Focus on events that bubble, such as focusin and focusout, to ensure that your event bindings work seamlessly even after updates to the component's innerHTML.

yhtmlTiny is a clever solution for developers looking for a straightforward way to create interactive, performant web components with ease.