https://github.com/matronator/view-sync

Lightweight alternative to Alpine.js' `x-model` attribute, that is CSP friendly (no 'unsafe-eval' needed).
https://github.com/matronator/view-sync

alpine alpinejs csp-friendly data-attributes data-sync html-input html5-framework input-sync inputs lightweight lightweight-framework lightweight-javascript-library sync-data sync-inputs typescript-library x-model

Last synced: 9 days ago
JSON representation

Lightweight alternative to Alpine.js' `x-model` attribute, that is CSP friendly (no 'unsafe-eval' needed).

• Host: GitHub
• URL: https://github.com/matronator/view-sync
• Owner: matronator
• License: mit
• Created: 2024-07-08T20:02:19.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-02T02:12:07.000Z (2 months ago)
• Last Synced: 2024-10-11T19:49:04.834Z (25 days ago)
• Topics: alpine, alpinejs, csp-friendly, data-attributes, data-sync, html-input, html5-framework, input-sync, inputs, lightweight, lightweight-framework, lightweight-javascript-library, sync-data, sync-inputs, typescript-library, x-model
• Language: TypeScript
• Homepage:
• Size: 1.99 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# view-sync

![View Sync logo](https://raw.githubusercontent.com/matronator/view-sync/main/.github/logo.png)

![NPM Version](https://img.shields.io/npm/v/view-sync)

![NPM Downloads](https://img.shields.io/npm/dw/view-sync)

![npm TypeScript version](https://img.shields.io/npm/dependency-version/view-sync/dev/typescript)

![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/view-sync)

![Dependencies](https://badgen.net/bundlephobia/dependency-count/view-sync)

![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/view-sync)

![Commits](https://badgen.net/github/commits/matronator/view-sync)

![Issues](https://img.shields.io/github/issues/matronator/view-sync.svg)

![License](https://img.shields.io/github/license/matronator/view-sync.svg)

![Follow](https://img.shields.io/github/followers/matronator.svg?style=social&label=Follow&maxAge=2592000)

![GitHub Sponsors](https://img.shields.io/github/sponsors/matronator)

Lightweight alternative to Alpine.js' `x-model` attribute, that is CSP friendly (no 'unsafe-eval' needed).

## Installation

### Using a package manager

Install using your preferred package manager:

#### NPM:

```

npm i view-sync

```

#### Bun:

```

bun i view-sync

```

#### PNPM:

```

pnpm i view-sync

```

#### Yarn:

```

yarn add view-sync

```

And then import it like this:

```js

import { ViewSync } from 'view-sync';

```

### Using a CDN

#### With a `` tag

```html

<script src="https://cdn.jsdelivr.net/npm/view-sync/dist/view-sync.iife.min.js">

    ViewSync.Init();

```

#### With a `` tag using `import`

```html

<script type="module">

    import viewsync from https://cdn.jsdelivr.net/npm/view-sync/+esm

```

## Usage

HTML:

```html



    

    

    


    

    

    

    


        I will be hidden if `hello` is falsy

    



```


JavaScript/TypeScript:

```ts

import { ViewSync } from 'view-sync';

ViewSync.Init();

```