Today we released the latest edition of our Monster project. Monster is a collection of javascript classes that we need for daily work in our web projects.
Besides small helper functions and classes, it also provides useful functions to enable reactive programming.
Monster is available via jsdelivr and npm.
Only the changes are described here. The full functionality can be found in the documentation.
Node
There is now a new Node class. With it, trees, can be mapped.
import {Node} from
'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/type/node.js';
const node = new Node('hello!');
console.log(node.value); // ↦ hello!
NodeList
The NodeList class extends the internal Set class with a check for nodes, so that you can be sure that only nodes are in the set.
import {NodeList} from
'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/type/node.js';
const node = new NodeList();
node.add(1); // ↦ Error
NodeRecursiveIterator
This new class implements a recursive iterator. This allows all nodes of the tree to be looped through.
import {NodeRecursiveIterator} from
'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/type/noderecursiveiterator.js';
// 1
// 2
// ├ 2.1
// ├ 2.2
// └ 2.3
// 3
// 4
// ├ 4.1
// └ 4.2
new Node('1').appendChild(
(new Node('2'))
.appendChild(new Node('2.1'))
.appendChild(new Node('2.2'))
.appendChild(new Node('2.3')))
.appendChild(new Node('3'))
.appendChild(new Node('4')
.appendChild(new Node('4.1'))
.appendChild(new Node('4.2')));
const iterator = new NodeRecursiveIterator(node);
const result = [];
// here we are now running through the tree structure
for (const n of iterator) {
result.push(n.value);
}
// ↦ ['1', '2', '2.1', '2.2', '2.3', '3', '4', '4.1', '4.2']
buildTree Function
This function brings everything together. Based on the function buildMap this function creates a NodeList which contains all values from a dataset.
buildTree(subject, selector, id, parentID, filter)
subject is the dataset that came from a REST API, for example. The selector is used to select the desired entries. id and parentID define which keys are to be taken as ID and reference to the parent dataset, respectively. filter finally allows the data length to be filtered.
// dataset from API
const objects = {
dataset: {
"1": {
id: "1",
name: "vehicle",
parent: null
},
"2": {
id: "2",
name: "car",
parent: "1"
},
"3": {
id: "3",
name: "truck",
parent: "1"
},
"4": {
id: "4",
name: "motorcycle",
parent: "1"
},
"5": {
id: "5",
name: "SUV",
parent: "2"
},
"6": {
id: "6",
name: "sports car",
parent: "2"
}
}
}
// build a tree with nodes
const nodes = buildTree(
objects,
'dataset.*',
'id', // key
'parent' // key );
// issue of the tree with the NodeRecursiveIterator
nodes.forEach(node => {
new NodeRecursiveIterator(node).forEach(n => {
console.log("".padStart(n.level*2, '.')+(n.value.name));
});
});
// vehicle
// ..car
// ....SUV
// ....sports car
// ..truck
// ..motorcycle
I18n Formatter
The new formatter extends the standard text formatter by the possibility to pass a translation.
import {Formatter} from
'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/i18n/formatter.js';
const translations = new Translations('en')
.assignTranslations({
message:
"${animal} has eaten the ${food}!"
});
new Formatter({}, translations).
format("message::animal=dog::food=cake");
// ↦ dog has eaten the cake!
Fixes
- updater: replaces more than one sub path
hope you enjoy it!
Top comments (0)