1.0.16 ā¢ Published 7 months ago
madronejs v1.0.16
madrone (mah droh nuh)
š³
Madrone is an easy way to make reactive objects in JS.
Installation
// npm
npm install madronejs --save
// pnpm
pnpm install madronejs
// yarn
yarn add madronejs
Quick start
Reactivity
import Madrone, { MadroneState } from 'madronejs'
// add reactivity integration
// MadroneVue2, and MadroneVue3 are also available
Madrone.use(MadroneState);
const PersonFactory = ({ name } = {}) => Madrone.auto({
// When using reactivity integration, getters become cached computeds
// that only get recomputed when a reactive data property changes.
// In this case, `name` is a reactive data property.
name,
get greeting() {
return `Hi, I'm ${this.name}`
},
});
const person = PersonFactory({ name: 'Greg' });
const newVals = [];
const oldVals = [];
// Watch a reactive property when it changes. Any reactive property accessed
// in the first argument will cause the watcher callback to trigger. Anything
// returned from the first argument will define what the newVal/oldVal is.
Madrone.watch(() => person.greeting, (newVal, oldVal) => {
newVals.push(newVal);
oldVals.push(oldVal);
});
person.name; // Greg
person.greeting; // Hi, I'm Greg
person.name = 'Not Greg';
person.greeting; // Hi, I'm Not Greg
// watcher is async...
console.log('New Vals:', newVals); // ["Hi, I'm Not Greg"]
console.log('Old Vals:', oldVals); // ["Hi, I'm Greg"]
Decorator support
import Madrone, { MadroneState, computed, reactive } from 'madronejs'
Madrone.use(MadroneState);
class Person {
@reactive name: string;
@reactive age;
@computed get greeting() {
return `Hi, I'm ${this.name}`;
}
constructor(options) {
this.name = options?.name;
this.age = options?.age;
}
}
const person = new Person({ name: 'Greg' });
person.name; // Greg
person.greeting; // Hi, I'm Greg
person.name = 'Not Greg';
person.greeting; // Hi, I'm Not Greg
1.0.16
7 months ago
1.0.15
7 months ago
1.0.14
7 months ago
1.0.13
7 months ago
1.0.12
8 months ago
1.0.11
11 months ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.9
2 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago