matronator
view-sync
Lightweight alternative to Alpine.js' x-model attribute, that is CSP friendly (no 'unsafe-eval' needed).
Installation
With npm/yarn/pnpm/bun:
npm i view-syncUsage
HTML:
<!-- Initialize view-sync and set initial value to "world" -->
<div id="app" data-sync-init="hello" data-sync-value="world">
<!-- Value of these will be updated with value of `hello` in sync with each other -->
<input type="text" data-sync="hello">
<textarea data-sync="hello"></textarea>
<!-- Text content of this will be updated with value of `hello` -->
<span data-sync-text="hello"></span>
<!-- This will be hidden if value of `hello` is falsy -->
<div data-sync-state="hello">
I will be hidden if `hello` is falsy
</div>
</div>JavaScript/TypeScript:
import { ViewSync } from 'view-sync';
ViewSync.Init();