Js decorator that mark properties that need to be reset and reset them at once.
Important! Designed to be used in Vue or React where class has a mounted function
If you'd like to use it in other senero, make sure the class has a mounted method and is called in the constructor (it can be easily achieved with decorator)
You can check the usage in the test folder (it's very simple) or by reading this readme written in shitty English
Usage:
-
Create a resettable instance
const resettable = new Resettable();
-
Decorate the class property that need to be reset in the future
// this.foo after this.mounted() is called will be used as the defualt value @resettable.mark() foo // 2 will be used as the default value @resettable.mark().default(2) foo // assuming this.foo = { bar:0, foobar: 2} after this.mounted() // the default value will be { bar: 1, foobar: 2 } @resettable.mark({ bar:1 }) foo // assuming this.foo = { bar:0, foobar: 2} after this.mounted() // the default value will be { bar: 1, foobar: 2 } // barfoo takes no effect as there is no such a field in the decorated property @resettable.mark({ bar:1, barfoo: 0 }) foo // it works on the array as well // default value will be [0, 2, 2, 3] @resettable.mark({ 1: 2, 9: 0 }) foo = [0, 1, 2, 3]
-
Decorate the class method that used to reset all marked variable
Basic Example:
import Resettable from 'resettable';
const resettable = new Resettable();
class Foo {
constructor() {
// to simulate a mounted behaviour which is used in Vue and React
this.mounted()
}
mounted(){ }
// mark the property that need to be reset
// if no default value is given, the value after mounted() will be used as default value
@resettable.mark() barNum = 2;
@resettable.mark().default('2') barStr = ''
// will be called after reset is done
@resettable.reset reset(){ }
}
const foo = new Foo();
// change foo.barNum and foo.barStr to whatever values
foo.reset();
console.log(foo.barNum); // print 2
console.log(foo.barStr); // print '2'
All function are introduced already.
The aim of this section is to show what can be achieved with deep nested JSON objects
Chances are that you may have multiple set of resettable data and you would like to reset them separately.
That can be easily achieved by creating multiple instance
import Resettable from 'resettable';
const resetGroup1 = new Resettable();
const resetGroup2 = new Resettable();
class Foo {
constructor() { this.mounted() }
mounted(){ }
@resetGroup1.mark() barNum = 2;
@resetGroup2.mark() barStr = ''
@resetGroup1.reset resetGroup1(){ }
@resetGroup2.reset resetGroup2(){ }
}
const foo = new Foo();
foo.barNum = 0;;
foo.barStr = '0';
foo.resetGroup1();
console.log(foo.barNum); // print 2
console.log(foo.barStr); // print '0'
foo.resetGtroup2();
console.log(foo.barStr); // print ''
import Resettable from 'resettable';
const resettable = new Resettable();
class TestObj {
@resettable.mark().default({
a: 2,
c: {
cb: false,
cc: {
1: {
ccb: { 0: 3 },
ccc: true,
ccd: { ccdb: '0' }
}
}
},
d: { 0: '0', 1: 0 }
}) obj: any = {
a: 1,
b: '123',
c: {
ca: 2,
cb: true,
cc: [{
cca: 1,
ccb: [2, 3, 4, 5]
}, {
cca: 2,
ccb: [1, 2, 3, 4],
ccc: false,
ccd: {
ccda: 2,
ccdb: '2',
ccdc: false,
ccdd: [2, 3, 4, 5]
}
}]
},
d: ['123', false, 2]
}
constructor(){ this.mounted(); }
mounted(){ }
change(){ this.obj = undefined; }
@resettable.reset
reset(){ }
}
const testObj = new TestObj();
testObj.change();
testObj.reset();
console.log(testObj.obj)
/*
origin value is
{
a: 1,
b: '123',
c: {
ca: 2,
cb: true,
cc: [{
cca: 1,
ccb: [2, 3, 4, 5]
}, {
cca: 2,
ccb: [1, 2, 3, 4],
ccc: false,
ccd: {
ccda: 2,
ccdb: '2',
ccdc: false,
ccdd: [2, 3, 4, 5]
}
}]
},
d: ['123', false, 2]
}, after reset , should gives
{
a: 2,
b: '123',
c: {
ca: 2,
cb: false,
cc: [{
cca: 1,
ccb: [2, 3, 4, 5]
}, {
cca: 2,
ccb: [3, 2, 3, 4],
ccc: true,
ccd: {
ccda: 2,
ccdb: '0',
ccdc: false,
ccdd: [2, 3, 4, 5]
}
}]
},
d: ['0', false, 0]
}
*/