Association between a Javascript Proxy and a kind of pubsub pattern
yarn add publisherproxy
Let's say you have an object representing a state. We are going to create a publisher associated with this state
const Publisher = require("publisherproxy");
const state = {
title: "News",
items: [
{ title: "1th", text: "First news" },
{ title: "2nd", text: "Second news" }
]
}
const publisher = new Publisher(state);
This is used for example to trigger a save of the state for any change, or an api call if a filter has changed.
function save(){
//do something to save the state
}
publisher.onInternalMutation(save);
publisher.items[1].text = "Second news Modified";
Dynamically fill an object with each modification.
const fillable = {};
publisher.startDynamicFilling(fillable);
publisher.items[1].text = "Second news Modified";
publisher.stopDynamicFilling(fillable);
publisher.items[1].text = "Second news Modified Again";
console.log(fillable);
The object is a real-time copy of the state.
Identical to the dynamic filling. However, only existing attributes are updated.
const fillableTemplate = { title: "A title to be replaced"};
publisher.startTemplateFilling(fillableTemplate);
state.title = "Good morning";
publisher.stopTemplateFilling(fillableTemplate);
state.title = "Oops";
console.log(fillableTemplate);
This is interesting to use with webComponents with getters setters for example.
You can listen to changes of a particular property or sub-property event if a parent object was replaced.
publisher.items[1].text.onAssign(console.log);
publisher.items[1].text = "Second news Modified";
publisher.items = [
{ title: "Ah Ah", text: "Welcome" },
{ title: "Hello", text: "World" }
];
Please look at the examples for a more in depth view.