https://github.com/babyblue94520/ref
Create a reference object that can be monitored.
https://github.com/babyblue94520/ref
computed data-driven ref rxjs
Last synced: 10 months ago
JSON representation
Create a reference object that can be monitored.
- Host: GitHub
- URL: https://github.com/babyblue94520/ref
- Owner: babyblue94520
- Created: 2022-11-16T13:41:49.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-12T02:50:38.000Z (over 2 years ago)
- Last Synced: 2025-06-02T14:22:39.717Z (about 1 year ago)
- Topics: computed, data-driven, ref, rxjs
- Language: TypeScript
- Homepage:
- Size: 143 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ref
Create a reference object that can be monitored.
[npm](https://www.npmjs.com/package/ts-refs)
## Browser support
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | Deno | Node.js |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 1 | 12 | 1.5 | 9.5 | 3 | 18 | 4 | 10.1 | 1 | 1.0 | 37 | 1.0 | 0.10.0
## Install
```cmd
npm i ts-refs
```
## Usage
### Refs
* Create
* typescript
```typescript
import Refs from "ts-refs";
const refs = new Refs();
// Set cache storage.
refs.setLocalStorage(localStorage);
refs.setSessionStorage(sessionStorage);
```
* javascript
[ref.min.js](lib/ref.min.js)
```html
var refs = new RefModule.default();
// Set cache storage.
refs.setLocalStorage(localStorage);
refs.setSessionStorage(sessionStorage);
```
### Value Ref
* Create
```typescript
const valueRef = refs.of(0); // RefValue
```
* get
```typescript
valueRef.get(); // 0
```
* set
```typescript
valueRef.set(1);
```
* listen
```typescript
valueRef.listen((value)=>{
// TODO
},this);
```
* interrupt
Interrupt `Ref` listen by target.
```typescript
valueRef.interrupt(this);
```
* clear
Reset to default value.
```typescript
valueRef.clear();
```
### Computed Ref
Save the computed results. Recompute when `Ref` changes.
* Create
```typescript
const valueRef = refs.of(0);
const computedRef = refs.ofComputed(()=>{
return valueRef.get()+1;
}); // RefComputed
```
* get
Changed by dependent on other `Ref`.
```typescript
computedRef.get(); // 0+1
```
* listen
Change by o
```typescript
computedRef.listen((value)=>{
// TODO
},this);
```
* interrupt
Interrupt ref listen by target.
```typescript
computedRef.interrupt(this);
```
* clear
Clear computed results.
```typescript
computedRef.clear();
```
### Cache Ref
Cache the last value in storage.
* Create
```typescript
const valueRef = refs.ofCache({
name:'string'
, local:false // switch storage type
, value: 0
}); // RefCache
```
* get
```typescript
valueRef.get(); // 0
```
* set
```typescript
valueRef.set(1);
```
* listen
```typescript
valueRef.listen((value)=>{
// TODO
},this);
```
* interrupt
Interrupt `Ref` listen by target.
```typescript
valueRef.interrupt(this);
```
* clear
Reset to default value.
```typescript
valueRef.clear();
```
## Advanced
### Refs
* off
Remove all dependencies and listener by scope.
```typescript
refs.off(this);
```
* runInScope
```typescript
let a = {};
refs.runInScope(()=>{
// The default scope for all operations is `a`.
ref1.listen(()=>{});
ref2.listen(()=>{});
ref3.listen(()=>{});
},a);
```
* tx
Post notifications after processing all `Ref` updates.
```typescript
refs.tx(()=>{
ref1.set(...)
ref2.set(...)
ref3.set(...)
});
```