DEV Community

Cover image for Monster 1.26 released
Volker Schukai for schukai GmbH

Posted on • Updated on

Monster 1.26 released

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!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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']


Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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!     

Enter fullscreen mode Exit fullscreen mode

Fixes

  • updater: replaces more than one sub path

hope you enjoy it!

References

Discussion (0)