DEV Community

Cover image for Monster 1.24 released
Volker Schukai for schukai GmbH

Posted on • Edited on

9 4

Monster 1.24 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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (2)

Collapse
 
p3xrobot profile image
patrikx3

good job!

Collapse
 
volker_schukai profile image
Volker Schukai

thank you for your comment.

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay