DEV Community

Cover image for Monster 1.24.0 released
Volker Schukai for schukai GmbH

Posted on • Updated on

Monster 1.24.0 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.

Only the changes are described here. The full functionality can be found in the documentation.

Transformer

The transformer class is used by updater and pipe to parse strings and execute the contained commands.

In this version, the Transformer class has been extended with useful commands:

debug, to-base64, from-base64, path-exists, nth-key, nth-last-key, first, last and optimzed default.

nth-key, nth-last-key, first, last

The commands allow access to certain properties of objects.

The nth-key command allows access to the nth key. The object keys are sorted.

import {Transformer} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/data/transformer.js';

const transformer = new Transformer("nth-key:1")
console.log(transformer.run({a:1,b:2,c:3}))
// ↦ 2
Enter fullscreen mode Exit fullscreen mode

firstis identical to nth-key:0 and last is equivalent to nth-last-key:0.

to-base64, from-base64

As the name suggests, this allows encoding from and to base64 (these are easier to remember aliases for atob and btoa).

import {Transformer} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/data/transformer.js';

const transformer1 = new Transformer("to-base64")
console.log(transformer1.run('hello world!')) 
// ↦ aGVsbG8gd29ybGQh

const transformer2 = new Transformer("from-base64")
console.log(transformer2.run('aGVsbG8gd29ybGQh'))
// ↦ hello world!
Enter fullscreen mode Exit fullscreen mode

debug

The command debug is an auxiliary command that allows to output the current value on the console. This is in interaction with the pipe and DOM Attributes a possibility to debug errors.

import {Transformer} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/data/transformer.js';

const transformer = new Transformer("debug")
console.log(transformer.run({a:true})) 
// ↦ {a: true}
Enter fullscreen mode Exit fullscreen mode

The value is returned both on the console and as the return value of the method.

path-exists

With the command path-exists you can check if a certain path is set in the object. This is useful for example to set a class depending on an existing value.

import { Transformer } from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/data/transformer.js";

const transformer = new Transformer("path-exists:a.b.c");
console.log(transformer.run({ a: { b: { c: true } } }));
// ↦ true
Enter fullscreen mode Exit fullscreen mode

default

The default command can be used to specify a default value whenever the input value is undefined or null.

const transformer = new Transformer("default:true:bool");
console.log(transformer.run(undefined));
// ↦ true
Enter fullscreen mode Exit fullscreen mode

trimSpace

The Javascript trim() function removes all spaces at the beginning and end of a string.

console.log(" test ".trim())
// ↦ "test"
Enter fullscreen mode Exit fullscreen mode

The following string would also be shortened.

// hint: the two \\ become one \ in the string
console.log(" test\\ ".trim())
// ↦ "test\"
Enter fullscreen mode Exit fullscreen mode
import {trimSpaces} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/util/trimspaces.js';
console.log(trimSpaces(' test\\ '))
// ↦ "test\ "
Enter fullscreen mode Exit fullscreen mode

There were also a number of minor improvements and optimizations.

hope you enjoy it!

References

Discussion (2)

Collapse
p3xrobot profile image
patrikx3

good job!

Collapse
volker_schukai profile image
Volker Schukai Author

thank you for your comment.