Ref

Create a reference object that can be monitored.

npm

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

npm i ts-refs

Usage

Refs

• Create

  • typescript

    import Refs from "ts-refs";
    
    const refs = new Refs();
    
    // Set cache storage.
    refs.setLocalStorage(localStorage);
    refs.setSessionStorage(sessionStorage);

  • javascript

    ref.min.js

    <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

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

• get

  valueRef.get(); // 0

• set

  valueRef.set(1);

• listen

  valueRef.listen((value)=>{
      // TODO
  },this);

• interrupt Interrupt Ref listen by target.

  valueRef.interrupt(this);

• clear

  Reset to default value.

  valueRef.clear();

Computed Ref

Save the computed results. Recompute when Ref changes.

• Create

  const valueRef = refs.of(0); 
  const computedRef = refs.ofComputed(()=>{
      return valueRef.get()+1;
  }); // RefComputed<number>

• get

  Changed by dependent on other Ref.

  computedRef.get(); // 0+1

• listen

  Change by o

  computedRef.listen((value)=>{
      // TODO
  },this);

• interrupt Interrupt ref listen by target.

  computedRef.interrupt(this);

• clear

  Clear computed results.

  computedRef.clear();

Cache Ref

Cache the last value in storage.

• Create

  const valueRef = refs.ofCache({
      name:'string'
      , local:false // switch storage type
      , value: 0
  }); // RefCache<number>

• get

  valueRef.get(); // 0

• set

  valueRef.set(1);

• listen

  valueRef.listen((value)=>{
      // TODO
  },this);

• interrupt Interrupt Ref listen by target.

  valueRef.interrupt(this);

• clear

  Reset to default value.

  valueRef.clear();

Advanced

Refs

• off

  Remove all dependencies and listener by scope.

  refs.off(this);

• runInScope

  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.

  refs.tx(()=>{
      ref1.set(...)
      ref2.set(...)
      ref3.set(...)
  });