@webshum/xdata

Lightweight Alpine.js-like reactivity in ~30 lines.

Install

npm install @webshum/xdata

Usage

<div x-data="{ count: 0 }">
	<span x-text="count"></span>
	<button @click="count++">+</button>
</div>

<div x-data="{ count: 0, active: false }">
	<span x-text="count"></span>
	<span :class="active ? 'text-green-500' : 'text-red-500'"></span>
	<button @click="count++; active = count > 5">+</button>
</div>

CDN

<script src="https://unpkg.com/@webshum/xdata/dist/xdata.js"></script>

ESM / Vite

import { initXData } from '@webshum/xdata';

initXData();

Directives

| Directive | Description | |-----------|-------------| | x-data | Declares reactive state | | x-text | Binds text content | | :class | Dynamically applies CSS classes | | @click | Click event handler |

License

MIT