v0.16.163 - 42.7 / 8.5

HTML

Set of utilities to create components from cached tagged templates. Inspired and influenced by @trusktr

Unlike HTML, attributes, tags and components are case sensitive. The html function matches the use of JSX.

# Snippet

# Value

Used to return a real element, but not anymore.

# Defining a Global User Component

By defining a user component on the exported html it will make the component global (accessible when importing html from other files)

# Defining a Local User Component

To not pollute the registry one may import HTML and create a an instance of html that its local to the file

# Predefined Components

Predefined components are: Collapse, Dynamic, For, Head, Portal, Show, Switch

# htmlEffect

An htmlEffect is similar to a regular effect. It creates and cache the html for the output updating anything that has changed using signals for the interpolated values. Updates trigger automatically when using reactive values.

The function re-runs whenever data.test changes.
The effect re-runs because reading data.test causes tracking even if unused in the template. Even tho the template doesnt re-render as it didn't change.
Nested html. Templates render once. If you inspect the source, only the numbers change.
htmlEffect demo working with 2 instances of a class
Test for return types and diposal
The html passed on the effect uses the global registry.

# Notes

  1. children as an attribute will be used as long as the node doesnt have any childNodes (just like in JSX). It must be totally empty, or else the children attribute will be ignored
  2. on html.define the registry is case sensitive
  3. on html.define it is possible to define a component named div, and make all divs behave differently. This is a warning, not a recommendation.

# No JSX

Making a tagged component

# Reactive Tagged Template

Making a reactive tagged template without using JSX

# Reactive Tagged Template With JSX

Making a reactive tagged template that uses JSX

# Custom Component

Making a custom component

# Show Off

Testing the Show component

# Nested Show

Nesting components with callbacks

# Attributes test

Attributes and properties

# Two html

One calling the other

# Custom Element

When is called the custom element constructor?

# Context

Display context value while nested

# Custom Element

Custom Element Tracking Test