@astro-dx/attributes

Attribute directives

dx-if, dx-show, dx-for — decorate existing elements directly. No wrapper needed.

dx-show — toggle visibility

Toggle

Visible! Node stays in DOM.

dx-if — create / destroy

Toggle

Mounted! Node created and destroyed.

dx-for — reactive list

Add

Code example

 "code-keyword">import { bootstrap, register } "code-keyword">from '@astro-dx/attributes';
"code-keyword">import { signal } "code-keyword">from '@astro-dx/core';

"code-keyword">const isVisible = "code-function">signal("code-type">true);
"code-keyword">const isMounted = "code-function">signal("code-type">true);
"code-keyword">const listItems = "code-function">signal([{ id: 1, label: 'First item' }]);

"code-function">register({ isVisible, isMounted, listItems });
"code-function">bootstrap(); 

Playground

dx-if, dx-show, dx-for — edit and run.