@astro-dx/attributes
dx-if, dx-show, dx-for — add reactive behaviour directly to any HTML element.
Setup — register + bootstrap
"code-keyword">import { signal } "code-keyword">from '@astro-dx/core';
"code-keyword">import { register, bootstrap } "code-keyword">from '@astro-dx/attributes';
"code-keyword">const isOpen = "code-function">signal("code-type">false);
"code-keyword">const items = signal<{ name: "code-type">string }[]>([]);
"code-function">register({ isOpen, items });
"code-function">bootstrap();dx-show
Toggles visibility. The element stays in the DOM.
<div dx-show="isOpen">Content</div>dx-if
Creates and destroys the element based on signal value.
<div dx-"code-keyword">if="isOpen">Content</div>dx-for + dx-text
Renders a list reactively. Each item property is accessible via dx-text.
<ul>
<li dx-"code-keyword">for="items" dx-text="name"></li>
</ul>