Monster 1.26 released
Tags: javascript, dom, node
Published: 2021-12-02 09:05:41

---
title: Monster 1.26 released
published: true
description: Monsterjs Release  
tags: javascript, dom, nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx78x659eany3lw8mflf.png
series: Monster-Release
---

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](https://www.schukai.com/en/) 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](https://monsterjs.org/en/doc/1.26.0/).

## Node

There is now a new `Node` class. With it, trees, can be mapped. 

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
// 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. 

```javascript
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!_



## References

- [buildMap](https://monsterjs.org/en/doc/1.26.0/Monster.Data.html#.buildMap)
- [Text-Formatter](https://monsterjs.org/en/doc/1.26.0/Monster.Text.Formatter.html)
- [npm](https://www.npmjs.com/package/@schukai/monster) 
- [jsdelivr](https://www.jsdelivr.com/package/npm/@schukai/monster)
* [we are hiring](https://about.schukai.com/de/jobs/)