reactivity-ts ·
Reactive membrane written in Typescript.
Features:
- No thirdparty dependecies
- Easy to use
- ES Modules and CommonJS format
- Support
reactive
,readonly
,ref
- Nice test
Credits
The implementation of this module is inspired by Observable Membrane and vue-next.
If you feel confused for "Membrane", you can check these articles:
Usage
The following example illustrates how to create a Reactive Membrane
and reactive proxy:
; const raw = a: 1 b: c: 2 const membrane = const wet = membrane;
Observing Access and Mutations
; const raw = a: 1 b: c: 2 const membrane = { console; } { console; }const wet = membrane; weta; // access!weta = 3; // mutation
Distortion
You can use distortions to avoid leaking non-observable objects and distorting values observed through the membrane:
; const raw = a: 1 ;const membrane = { if typeof value === "number" return value * 10 return value; }const wet = membrane; weta; // 10
Readonly proxy
; const raw = a: 1 b: c: 2 const membrane = { console; }const wet = membrane; weta; // access!weta = 3; // throw error in development mode, and does nothing in production mode.
ref proxy
Internally, we wrap raw
as an object which has getter and setter function.
; const membrane = { console; } { console; }const wet = membrane; wet; // access!wetvalue = 2; // mutation!
Shallow Reactive Proxy
Only create reactive proxy for root level properties.
; const raw = a: 1 b: c: 2 const membrane = { console; }const wet = membrane; weta = 3; // mutation!wetbc = 3;
NOTE: If you want to change the value of raw.b.c
, you will access raw.b
first. So the accessObserver
will always be trigger.
Shallow Readonly Proxy
Only create readonly proxy for root level properties.
; const raw = a: 1 b: c: 2 const membrane = ;const wet = membrane; weta = 3; // throw error in development mode, and does nothing in production mode.wetbc = 3;
NOTE: If you want to change the value of raw.b.c
, you will access raw.b
first. So the accessObserver
will always be trigger.