https://github.com/beenotung/lite-s
A simple state manage library with pull-push based design.
https://github.com/beenotung/lite-s
cdn composable dependency-tracking lite reactive s-js state typescript
Last synced: 8 months ago
JSON representation
A simple state manage library with pull-push based design.
- Host: GitHub
- URL: https://github.com/beenotung/lite-s
- Owner: beenotung
- License: bsd-2-clause
- Created: 2022-12-21T23:31:51.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-22T01:30:47.000Z (almost 3 years ago)
- Last Synced: 2025-02-02T20:03:26.489Z (8 months ago)
- Topics: cdn, composable, dependency-tracking, lite, reactive, s-js, state, typescript
- Language: TypeScript
- Homepage:
- Size: 4.88 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lite-s
A simple state manage library with pull-push based design.
[](https://www.npmjs.com/package/lite-s)
[](https://bundlephobia.com/package/lite-s)
[](https://bundlephobia.com/package/lite-s)
Inspired from [S.js](https://github.com/adamhaile/S) and [a talk about SolidJS](https://www.youtube.com/watch?v=qB5jK-KeXOs)
## Installation
### Option 1: Import npm package
Install from npm:
```bash
# install with npm
npm i lite-s
# or pnpm
pnpm i lite-s
# or yarn
yarn add lite-s
```
Import as typescript package / esm package:
```typescript
// using named import
import { S } from 'lite-s'
// or using default import
import S from 'lite-s'
```
Import as commonjs package
```javascript
let { S } = require('lite-s')
```
### Option 2: Import esm package over CDN
```html
import { S } from 'https://cdn.jsdelivr.net/npm/lite-s@1.0.0/core.mjs'
```
### Option 3: Import iife library over CDN
```html
let state = S(1)
```
## Usage Example
```javascript
let a = S(1)
let b = S(2)
let c = () => a.value + b.value
let text = S.map(() => `${a} + ${b} = ${c()}`)
let dom = {
a: document.createElement('input'),
b: document.createElement('input'),
c: document.createTextNode(text),
}
dom.a.type = 'number'
dom.a.value = a.value
dom.a.addEventListener('input', e => (a.value = e.target.valueAsNumber))
dom.b.type = 'number'
dom.b.value = b.value
dom.b.addEventListener('input', e => (b.value = e.target.valueAsNumber))
S.run(() => (dom.c.textContent = text))
document.body.appendChild(dom.a)
document.body.appendChild(dom.b)
document.body.appendChild(dom.c)
```
## License
This project is licensed with [BSD-2-Clause](./LICENSE)
This is free, libre, and open-source software. It comes down to four essential freedoms [[ref]](https://seirdy.one/2021/01/27/whatsapp-and-the-domestication-of-users.html#fnref:2):
- The freedom to run the program as you wish, for any purpose
- The freedom to study how the program works, and change it so it does your computing as you wish
- The freedom to redistribute copies so you can help others
- The freedom to distribute copies of your modified versions to others