# ts-refs

> Create a reference object that can be monitored.

Latest version **0.0.11** (published 2024-01-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install ts-refs
pnpm add ts-refs
yarn add ts-refs
bun add ts-refs
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2024-01-12 |
| First published | 2022-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | clarewu |
| Maintainers | clarewu |
| Keywords | ref, computed, rxjs, data driven |

## Links

- npm: https://www.npmjs.com/package/ts-refs
- Repository: https://github.com/babyblue94520/ref
- Issues: https://github.com/babyblue94520/ref/issues
- npm.io page: https://npm.io/package/ts-refs

## Recent versions

- 0.0.11 (latest) — 2024-01-12
- 0.0.10 — 2024-01-11
- 0.0.9 — 2023-08-07
- 0.0.8 — 2023-07-27
- 0.0.7 — 2023-01-07
- 0.0.6 — 2022-12-27
- 0.0.5 — 2022-12-07
- 0.0.4 — 2022-12-07
- 0.0.3 — 2022-11-29
- 0.0.2 — 2022-11-24

## 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
        <script type="application/javascript" src="ref.min.js"></script>
        <script type="application/javascript">

            var refs = new RefModule.default();

            // Set cache storage.
            refs.setLocalStorage(localStorage);
            refs.setSessionStorage(sessionStorage);
        </script>
        ```

### Value Ref

* Create

    ```typescript
    const valueRef = refs.of(0); // RefValue<number>
    ```

* 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<number>
    ```

* 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<number>
    ```

* 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(...)
    });
    ```

---
_Source: https://npm.io/package/ts-refs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._