DEV Community: Przemyslaw Jan Beigert

Modular monolith with the eslint-boundries

Przemyslaw Jan Beigert — Thu, 26 Sep 2024 11:30:32 +0000

Intro

If your monolith JS/TS application is growing and you're afraid of losing control, this article might be for you.

Problem

Everyone saw something like this:

src/
  components/
  hooks/
  storage/

In smaller projects, it works but with bigger one, it might be annoying. Let's separate the first module from that:

src/
  components/
  hooks/
  storage/
  modules/
    moduleA/
        components/
        hooks/
        storage/

Nice.

All of the logic responsible for moduleA is in one place and the rest of the categories are little bit smaller. So the natural next step will be moduleB:

src/
  ...
  modules/
    moduleA/
    moduleB/

Nice?

Not really, modular monolith is not about the arrangement of files, it's about hard separation. ModuleA should be independent of moduleB. It this case: (one repo and one app) files from moduleA may import stuff from moduleB (and otherwise).

Boundries

Let's apply eslint-boundries plugin.

yarn add eslint-plugin-boundaries @typescript-eslint/parser @typescript-eslint/parser --dev

// eslintrc
{
 "plugins": [
  "boundaries"
  ]
}

Then we have to define elements:

 // eslintrc
{
  "settings": {
    "boundaries/elements": [
     {
        "type": "module-a",
        "pattern": "src/modules/moduleA/**",
        "mode": "file"
      },
       {
        "type": "module-b",
        "pattern": "src/modules/moduleB/**",
        "mode": "file"
      },
    ]
  }
}

All of the files from moduleA are tagged as module-a and moduleB => moduleA

Rules

Now we're able to prevent moduleA from importing from moduleB:

// eslintrc
{
  "rules": {
     "boundaries/element-types": [2, {
        "default": "allow",
        "rules": [
          {
            "from": "module-a",
            "disallow": ["module-b"]
          },
          {
            "from": "module-b",
            "disallow": ["module-a"]
          },
       ]
    }]
  }
}

Now when you try to an illegal import eslint will throw an error: Importing elements of type 'moduleA' is not allowed in elements of type 'module-b'. Disallowed in rule 1

import { } from '../moduleA/fileA';
//  Importing elements of type 'moduleA' is not allowed in elements of type 'module-b'. Disallowed in rule 1

export const bFn = () => {}

Exceptions

What about the case when moduleA needs to import some constant value, like name or URL? Eslint will throw an error, however, this behavior is not against the modular monolith approach. Creating copy of these constants also doesn't sound like a good idea.

In my projects always exists one exception:

{
    "boundaries/ignore": ["**/*.const.ts"]
}

*.const.ts files contain only constant values (no classes of functions). Also, not-primitive, exported objects have forced immutability by as const syntax.

Full example on my sandboxes repo link

Conclusion

Eslint-boundaries plugin is a great way to start the migration to modular-monolith approach. But don't rush. Migration from the monolith is not an easy task. You may make a lot of mistakes and that's fine. Don't try to create many elements, and rules at once. Instead, separate one and wait some time. Wrong boundaries are much worse than too few.

Don't fix problems that should not appear. Of course, utils should not import hooks, and hooks shouldn't import components. But there's no need to declare boundaries for that, focus on more important rules like forcing already-defined borders between modules.

How to run npm scripts concurrently?

Przemyslaw Jan Beigert — Wed, 29 May 2024 09:43:34 +0000

Intro

Before creating a pull request, you probably want to be sure that CI will reject it. So before gh pr create you're running npm run lint or npm run test. npm run build etc.

Script

To avoid manually calling each script you can define a new script in the package.json.

{
  "scripts": {
    "ci:check": "npm run lint && npm run test && npm run build"
  }
}

first && second in bash means: when the first returns success then run the second one. If fails, stop the execution and return this fail value.

Package

There's a package to speed this command up. Concurrently

{
  "scripts": {
    "ci:check": "concurrently \"npm run lint\" \"npm run test\" \"npm run build\""
  }
}

Now ci:check will start each check concurrently. The total execution time will be the longest-running script, rather than the sum of all three.

Bash

But do we need a package for that? Such a simple thing can be done just with a bash language.

first & second will run both commands in the same moment, but the result of that will be the result of the second one. So if the first fails final result will be positive.

FG - Place the job in the foreground, and make it the current job using the fg command.

{
  "scripts": {
    "ci:check": "npm run lint & npm run test & npm run build && fg"
  }
}

However, this approach runs all checks simultaneously but reports the exit status of the last command, similar to a sequential execution.

Summary

Learn bash.

How to minify private methods in a TypeScript class?

Przemyslaw Jan Beigert — Mon, 06 Mar 2023 10:40:22 +0000

Introduction

As you may notice during minification your long and descriptive variable names are changed into e.g.: "a", "rd", "xd". However, when you minify class names of methods stay the same:

class Cls {
  method() {
  }
}

const cls = new Cls();
cls.method();

Will be compiled into

"use strict";(()=>{var c=class{method(){}},e=new c;e.method();})();

Is logical because method has been used in other scripts. But what about private methods?

class Cls {
  public publicMethod() {
    this.privateMethod()
  }
  private privateMethod() {}
}

const cls = new Cls();
cls.publicMethod();

This code with be compiled into:

"use strict";(()=>{var t=class{publicMethod(){this.privateMethod()}privateMethod(){}},e=new t;e.publicMethod();})();

The private method stays the same. Is logical cause code is firstly transpile into JavaScript and then minified. During transpiration information about method privacy will be lost.

Terser

Terser is JavaScript compressor that can minified specific method names.

// terser.config.js
const fs = require('fs');
const terser = require('terser');

(async () => {
    const file = fs.readFileSync('index.js', 'utf8')
    const {code} = await terser.minify(file, {
        mangle: {
            properties: {
                regex: `^(privateMethod)$`,
            },
        },
    });
    fs.writeFileSync('index.js', code)
})();

This code will create something like this:

"use strict";(new class{publicMethod(){this.t()}t(){}}).publicMethod();

Great success? Not yet. We can not manually paste every private method to the config file.

Find all private method

We can use bash to find all names of private methods.

Print all TS files

cat src/**/*.ts

Filter lines by pattern private methodName(...) {

grep -E "^  private (.*?)\("

You can use prettier to be sure that all methods are formatted in the same way.

Map lines like with private methodsName( into methodName by

awk '{split($2,a,"("); print a[1]}'

Join each method with | separator by:

tr '\n' '|'

Merge it with bash pipes:

cat src/**/*.ts | egrep "  private (.*?)\(" | awk '{split($2,a,"("); print a[1]}' | tr '\n' '|'

The output should looks like this: privateMethod|privateMethod1|privateMethod2. It exactly the same that what we can paste to regex in the terser.config.

Fix collision

Unfortunately is public method will have the same name like a private one, both will be minified. How to fix that? Use previous script to find all public methods then just filter in out in the terser.config.js

const methodsToMinify = privateMethods
  .split('|')
  .filter(item => !publicMethods.includes(item))
  .join('|');

Result

In my project helped me reduce bundle size by around 11%. It doesn't sound impressive, however applying this solution is relatively fast

Improve TypeScript Omit type

Przemyslaw Jan Beigert — Fri, 24 Feb 2023 08:41:20 +0000

Introduction

Builded Omit type can be very useful

e.g.:

interface Obj {
  key1: string;
  key2: number;
}

type R1 = Omit<Obj, 'key1'>; // { key2: number }
type R2 = Omit<Obj, 'key2'>; // { key1: string }

However there's one disadvantage.

interface Obj {
  key1: string;
  key2: number;
}

type R1 = Omit<Obj, 'kye1'>; // { key1: string; key2: number }

Omitting a key that doesn't exist is pointless, so I'll expect some error.

Implementation

Omit type looks like this:

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

Problem is that K is not key of anything, it's a key of this object. So let's change it:

// type.utils.ts
export type Omit2<T extends {}, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

interface Obj {
  key1: string;
  key2: number;
}

type R1 = Omit2<Obj, 'kye1'>; // Type '"kye1"' does not satisfy the constraint 'keyof Obj'.(2344)

Installation

Now we have to ensure that Omit2 will be used instead of Omit. I've no idea how to overwrite something from es5.d.ts, however we can ban Omit using eslint.

// eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
    "@typescript-eslint/ban-types": [
      "error",
      {
        "types": {
          "Omit": "Use Omit2 from type.utils instead",
        },
        "extendDefaults": true
      }
    ]
}

Then if someone forgot about the presence of Omit2 eslint will throw an error with a proper message.

Summary

It's not a big improvement but maybe it will catch a bug or two.

Checkout discussion about strict-ness of Omit. https://github.com/microsoft/TypeScript/issues/30825

3 macos settings to boost your productivity

Przemyslaw Jan Beigert — Fri, 05 Aug 2022 10:32:00 +0000

Caps lock position

Unless you're a manager and have to scream on people at the slack caps lock is a useless key. In macos you can easily replace it with the esc key.

Why? To press esc you have to move your wrist.

You only need a finger to press caps lock key.

For some macbook users this is the only way to get the physical esc key ;)

Keyboard speed

Now arrows will move pointers faster.

I know that it doesn't sound like a huge upgrade, but saving a few seconds a day can bring you tangible benefits throughout your career :)

Dock

You don't need the Dock. At all. Unfortunately there's no way to remove it, but we can make him as small as possible.

Instead of Dock I suggest using spotlight/alfred and amethyst - great tiling window manager.

Cursor color [Edited]

When you work on many monitors sometimes detecting cursor position takes some time. You can change the cursor color to more visible, e.g. red.

Summary

I can not guarantee that you will like these options. I'm using it in my daily tasks and I love it.

Turn on TS flag evolutionarily

Przemyslaw Jan Beigert — Thu, 23 Jun 2022 07:24:41 +0000

Introduction

After migration a JavaScript project to TypeScript it is good to turn on some compilerOptions flags. Some of them are easy, like strictBindCallApply but for example strictNullChecks can throw many errors: Found 649 errors in 184 files. Migrating all of them in one pull request can create many bugs or merge conflicts. On the other hand without this migration the amount of strictNullChecks errors can increase.

Unfortunately there's no way to turn a compilerOptions flag on only part of the project. However we can track the amount of these errors.

Implementation

"scripts": {
  "typeCheck": "tsc",
  "typeCheck:checkNulls": "tsc --strictNullChecks true"
}

Now we can check how many errors we have. Of course this script will always fails so we can not add it to the CI process. To add it we have to add some pipes:

yarn typeCheck:checkNulls | grep error | wc -l

Grep will filter files without error and wc -l will reduce lines with errors to just a number. Then simple > operation will check if the amount of errors wasn't increased. In bash it looks like this:

if [ $(yarn typeCheck:checkNulls | grep error | wc -l) -gt 649 ]; then exit 1; fi

Summary

This solution isn't perfect. For example you can fix old one then create a new error and CI will not catch it. Also IDE will not inform about any strictNullChecks error because in the tsconfig.json flag is set as false. I this case simplicity is the main advantage: one line in package.json and one in CI config. But compared to alternatives: migrating all by once or separate modules from the project it doesn't look so bad.

Simple communication between page and browser extension

Przemyslaw Jan Beigert — Fri, 06 May 2022 19:17:40 +0000

Introduction

This will not be a great pattern for a public browser extension. However there is many cases when this will be good enough way. For example some internal debugger tool, or something similar to redux dev tools.

Requirements

In manifest.json:

{
  "action": {
    "default_popup": "index.html"
  },
  "permissions": ["tabs", "activeTab", "scripting"],
  "manifest_version": 3
}

Prepare

We have to have some popup to display received data somewhere and permissions to inject script in active tab.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="index.css" rel="stylesheet">
    <title>Internal Dev Tools</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

// popups index.js
chrome.tabs.query(
  { currentWindow: true, active: true },
  ([tab]) => {
    chrome.scripting.executeScript(
      {
        target: { tabId: tab.id },
        args: [42],
        func: function (arg) {
          // executed in the page
          return arg
        },
      },
      ([{ result }]) => {
        // executed in the extension
        console.log('received data: ', result); // 42
      }
    );
  }
);

In this script, the extension is executing func on active page tab with one argument "42". Return from it is catch in the second argument callback.

Send data from page

Now we have to pass data from the page:

// page
const stateReport = generateDataToSendIntoExtension();
const message = { type: 'DEV_TOOLS_REPORT_MESSAGE_TYPE', payload: stateReport };
window.postMessage(message);

The easiest way to keep it up to date is wrap it with setInterval:

// page
setInterval(() => {
  // postMessage
}, 1_000)

Get data in extension

To receive data from window.postMessage( we have to use window.addEventListener('message', callback);. Unfortunately callback will be called asynchronously so a simple return from previous part wouldn't work, we have to wrap it into a Promise. Also page is calling window.postMessage( every 1 second so in the extension we have to use setInterval as well.

// popups index.js
const intervalTimeout = setInterval(() => {
  chrome.tabs.query(
    { currentWindow: true, active: true },
    ([tab]: [{ id: number }]) => {
      // @ts-expect-error
      chrome.scripting.executeScript(
        {
          target: { tabId: tab.id },
          args: ['DEV_TOOLS_REPORT_MESSAGE_TYPE'],
          func: function (messageType) {
            return new Promise((resolve) => {
              const callback = ({ data }) => {
                window.removeEventListener("message", callback);
                if (data?.type === messageType) {
                  resolve(data.payload);
                }
              };
              window.addEventListener("message", callback);
            });
          },
        },
        ([{ result }]) => {
          setState(result);
        }
      );
    }
  );
}, 1_000);

Because we're using setInterval we have to remember about remove listener after his callback is called. Also to avoid conflicts with another window messages we should add an if statement to filter out another messages. Last thing is to display data from the page in the extensions's popup.html. In my case popup contains a simple react application, so only thing to do is call setState with data from the page.

Summary

For sure this is not a production solution. There's too much permissions, weak reactivity and potential data leaks. However for internal purposes (as e.g. dev tools) this works.

Template literal types in the Vuex

Przemyslaw Jan Beigert — Wed, 02 Feb 2022 14:14:00 +0000

Introduction

TypeScript 4.1 introduced template literal types. On the first look it doesn’t sound interesting, it allows the creation of a union of literal types based on other ones.

type Color = "red" | "blue";
type Quantity = "one" | "two";

type SeussFish = `${Quantity | Color} fish`;
// same as
//   type SeussFish = "one fish" | "two fish"
//                  | "red fish" | "blue fish";

However there’s couple of cases when this feature is very useful.

Vuex with TypeScript

// module1.mutations.ts
interface Module1Mutations {
  mutationA1(state: Module1State, payload: MutationA1Payload): void
  mutationA2(state: Module1State, payload: MutationA2Payload): void
}

export const module1Mutations: MutationTree<Module1State> & Module1Mutations = {
  mutationA1(state, payload) {},
  mutationA2(state, payload) {},
};

// module1.actions.ts
interface Module1Actions {
  actionA1(context: Module1ActionContext, payload: ActionA1Payload): void
  actionA2(context: Module1ActionContext, payload: ActionA2Payload): void
}

type Module1ActionContext = {
  dispatch<K extends keyof Module1Actions>(
     actionType: K,
     payload: Parameters<Module1Actions[K]>[1],
     options?: DispatchOptions,
  ): ReturnType<Module1Actions[K]>;
  commit<K extends keyof Module1Mutations>(
     actionType: K,
     payload Parameters<Module1Mutations[K]>[1]]
  ): ReturnType<Module1Mutations[K]>;
}

After that TypeScript will throw compilation error when someone will dispatch/commit action/mutation with a wrong payload. e.g:

actionA1({ commit, dispatch }, payload) {
   commit('mutationA1', false); // ERROR: Argument of type 'boolean' is not assignable to parameter of type 'MutationA2Payload'.
   dispatch('actionA2', false); // ERROR: Argument of type 'boolean' is not assignable to parameter of type 'ActionA2Payload'.
},

Dispatching actions from another module

But what about the case when we need to dispatch action from module2? Module1ActionContext doesn’t know about actions and mutations from another namespace. To let him know we need to add something like this:

type Module1ActionContext = {
 ...
 dispatch<K extends keyof Module2Actions>(
   actionType: keyof Module2Actions,
   payload?: Parameters<Module2Actions[K]>[1],
   options?: DispatchOptions,
): Promise<void> | void;
  ...
}

Sounds good but we have to call dispatch with ${module2Namespace}/actionB2 not a actionB2. So best we ca do is type cast.

dispatch(
  `${module2Namespace}/actionB2` as 'actionB2',
   payload,
   { root: true },
);

Looks like type safe code however ${module2Namespace}/actionB2 as 'actionB2' is a duplication, compiler should knows which actions we are dispatching. Also we have to remember about { root: true } because TS wouldn’t throw error when this parts is missing.

With template literal types

After update TypeScript to 4.1+ (and prettier to 2.0+) we are allow to declare context like this.

type Module1ActionContext = {
 ...
 dispatch<K extends keyof Module2Actions>(
   actionType: `module2Namespace/${keyof Module2Actions}`,
   payload?: Parameters<Module2Actions[K]>[1],
   options?: DispatchOptions,
): Promise<void> | void;
  ...
}

This syntax means we’re mapping union actionB1 | actionB2 into module2Namespace/actionB1 | module2Namespace/actionB2. It’s almost perfect, almost…

dispatch(
  `${module2Namespace}/actionB2`,
   payload,
   { root: true },
); // ERROR: Argument of type 'string' is not assignable to parameter of type '"module2Namespace/actionB1" | ""module2Namespace/actionB1"'

By default value like this ${module2Namespace}/actionB2 is typed as string not a literal. To change that we can use as const:

dispatch(
  `${module2Namespace}/actionB2` as const,
   payload,
   { root: true },
);

So we changed as actionB2 into as const. Great success? Yes because with as const there’s no duplication and you can not make bug like this: dispatch({module2Namespace}/actionB2 as actionB1, actionB1Payload) with payload from actionB1 without notice that in the compilation message.

Conclusion

This is not first TypeScript feature which looks silly but with time become useful.

Save couple of seconds each day by Alfred's workflow

Przemyslaw Jan Beigert — Tue, 01 Feb 2022 20:26:54 +0000

Assumptions

I'm working on my private laptop. Each day I must run IDE, iTerm, docker, slack, password manager, browser, maybe spotify. It's not a hard or long task but it takes a couple of seconds. Also is repetitive so it sounds like a good candidate to automate.

Tool

I chose alfred for this task. Unfortunately is necessary to buy Alfred Powerpack however it's great tool and I can recommend it event without this workflow.

Implementation

Alfred -> preferences -> workflows -> + -> blank workflow.

On the new workflow create an input trigger and drag some applications from applications catalog.

Then just connect the input trigger with every selected application.

Clean up

Of course closing each application should take a little bit less time, however we can automate it as well.

This workflow will look almost the same as the previous one. But instead of Launch application will be Bash script and paste e.g. pkill webstorm or pkill slack

Result

Summary

Probably you will spend more time configuring this workflow than calling it manually for next couple of years. However you can little bit reduce amount of stuff to think about.

My workflows: [https://github.com/przemyslawjanpietrzak/dotfiles/tree/master/.alfred(https://github.com/przemyslawjanpietrzak/dotfiles/tree/master/.alfred)

Improve $destroy performance in Vue

Przemyslaw Jan Beigert — Mon, 10 Jan 2022 14:04:10 +0000

Introduction

Vue in most of the cases is a fast enough framework. However, the time of nodes destruction can be very long. Of course removing elements from DOM is fast operation but Vue needs to remove all watchers from destruct component and that may take up to several seconds.

Case

Component with nested navigation with 12 groups each has ~20 children. After opening all groups, navigation has ~240 items. After user tries to navigate to another view browser freezes for a couple of seconds.

Navigation
 - Group x12
   - Item x20

Investigation

Open chromium dev tools, go to the performance section and set CPU: 4x slower after that browser will behave as on an average user computer.

Then record the destruction of navigation. The result:

Oh my God almost 7 seconds of destroy and 0.65 s of update (before destroy) o.O

In the main $destroy there’s many shorter $destroys and all of them have many removeSub calls. Each of removeSub takes 7–15 ms, not much but in total it’s much time of browser freeze.

Reason

Component Item.vue is bind to 5 high order vuex getters was rendered around 240 times.

// Item.vue
...mapGetters('namespace', [
  'getA',
  'getB',
  'getC',
  'getD',
  'getE',
});

Also Item.vue has 8 computed properties and 5 of them use vuex getters. All this operations are not expensive, however create many subscriptions. And these subscriptions have to be cleared.

Solution

Moving all computed props and vuex bindings from Item.vue into Group.vue . Group.vue is rendering many Item.vues so we have to map collection of item like this:

Result

Time of $destroy reduced from ~7s to 0.3s (-96%). Also update before it wad reduced from 0.65s to 0.45 (-30%). Notice that is not a perfect solution: because mapper should move to Navigation.vue add pass Group.vue as prop. However moving calculation of a, b, c, d, e will “only” reduced bindings by 55 (12 * 5 – 5). This performance is not great but not terrible.

Conclusion

In vue loading data from store to component is pretty easy: just ...mapGetters('namespace', ['getter']), but not all components should know about the store. Before React’s hooks was very popular to write container that connect data from Redux by mapStateToProps and mapDispatchToPros with a component. It was a lot of boilerplate and thank goodness we can use now useReducer however it has one advantage: get the developer to think about where to put the connection with store. In my opinion we still must care about it because separation of components into logic and presentation is important not only to keep code clean but also for performance purposes.

How to write a constant in the TypeScript?

Przemyslaw Jan Beigert — Wed, 05 Jan 2022 09:15:44 +0000

Introduction

TypeScript was designed as a superset of JavaScript, so TS types should not affect JS’s runtime. However there’s couple ways to define constant value.

Object as const:

export const BUTTON_SIZES = {
  SMALL: 'small',
  MEDIUM: 'medium',
  LARGE: 'large',
} as const;

as const will be removed in the compilation time, so only an object will exists in the run time. Adding as const will change type definition from:

{ 
  SMALL: string,
  MEDIUM: string,
  LARGE: string,
}

into:

{
  readonly SMALL: 'small',
  readonly MEDIUM: 'medium',
  readonly LARGE: 'large',
}

Looks pretty simple however it wouldn’t be so easy to create a type definition of BUTTON_SIZES value.

type ButonSizeKey = keyof typeof BUTTON_SIZES; // "SMALL" | "MEDIUM" | "LARGE"
type ButonSizeValue = typeof BUTTON_SIZES[ButonSizeKey] // "small" | "medium" | "large"

Enum:

export enum BUTTON_SIZES_ENUM {
  SMALL = 'small',
  MEDIUM = 'medium',
  LARGE = 'large',
};

Looks similar to the previous case however this code will be complied into:

export var BUTTON_SIZES_ENUM;
(function (BUTTON_SIZES_ENUM) {
  BUTTON_SIZES_ENUM["SMALL"] = "small";
  BUTTON_SIZES_ENUM["MEDIUM"] = "medium";
  BUTTON_SIZES_ENUM["LARGE"] = "large";
})(BUTTON_SIZES_ENUM || (BUTTON_SIZES_ENUM = {}));

It’s the same object as in previous case but it takes more space in the final bundle.

Big advantage is the fact that you don’t have to create a separate type for a ButtonSizeValue because enum BUTTON_SIZE can be use as a type of a value.

But what about case when enum has numbers instead of strings:

export enum PLACE {
  FIRST = 1,
  SECOND = 2,
};

Will be complied to:

export var PLACE;
(function (PLACE) {
  PLACE[PLACE["FIRST"] = 1] = "FIRST";
  PLACE[PLACE["SECOND"] = 2] = "SECOND";
})(PLACE || (PLACE = {}));

And this code it the same that:

{1: "FIRST", 2: "SECOND", FIRST: 1, SECOND: 2}

So value become a key and key becomes a value…

Const enum:

export const enum BUTTON_SIZES_CONST_ENUM {
  SMALL = 'small',
  MEDIUM =  'medium',
  LARGE = 'large',
};

Almost the same code as in the previous example will be removed in compilation time.

Usage of enum like this:

const buttonSizeUsage = BUTTON_SIZES_CONST_ENUM.MEDIUM;

Will be complied into:

const buttonSizeUsage = "medium" /* MEDIUM */;

Looks much better than previous example however there’s couple od disadvantages:

const obj = { buttonSize: BUTTON_SIZES_CONST_ENUM } // ERROR: 'const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query.
Object.values(BUTTON_SIZES_CONST_ENUM); // ERROR 'const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query.

Union:

The simplest way will be:

type BUTTON_SIZES_UNION = "small" | "medium" | "large";

Type definition will be removed in compilation time and complier will prevent us to pass unknown or different strings.

let fn = (buttonSize: BUTTON_SIZES_UNION) => {};
fn('small');
fn('smal'); // Argument of type '"smal"' is not assignable to parameter of type 'BUTTON_SIZES_UNION'
let str: string;
fn(str); // Argument of type 'string' is not assignable to parameter of type 'BUTTON_SIZES_UNION'.

Is fast in the implementation but has the same disadvantages as const enum. Also changing value (e.g. “medium” into “regular”) requires modification of each usage, not just one like in enum/const enum.

Summary:

Is hard to choose the best way, all of them have advantages and disadvantages. In my opinion const enum can be good first choice.

Playground

Gremlins testing with puppeteer

Przemyslaw Jan Beigert — Mon, 03 Jan 2022 21:45:15 +0000

Introduction

The idea behind gremlins testing is pretty simple: any user action on your application should not have throw a runtime error. It's like a smoke test with lots of random user's actions. This should be helpful when your project has unit tests but you're not ready yet for end to end tests.

Implementation

Install the lib: yarn add gremlins.js -D
Copy gremlins to hosted directory (e.g. dist) cp node_modules/gremlins.js/dist/gremlins.min.js dist
Open your app in a browser
In the browser console add gremlins to DOM const s = document.createElement('script'); s.src='gremlins.min.js'; document.head.appendChild(s);
Run the gremlins gremlins.createHorde().unleash()
In result gremlins will execute buch od random events

If in console there's no error test passes

Automatisation

Of course we can not run it manually each time. To automate it we can use the puppeteer, it's a nodeJS chromium driver. After installation yarn add puppeteer -D do something like this:



// run-gremlins.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const errors = [];
  page.on('pageerror', (error) => {
    browserErrors.push(error);
  });
  await page.goto('localhost:4200');
  if (browserErrors.length !== 0) {
    errors.forEach((e) => {
      console.error('e2e error: ', e);
    });
    process.exit(1);
  }

  // TODO: insert gremlins
  // TODO: run gremlins
  // TODO: wait 5s

  await browser.close();
})();

This code will run a browser (in incognito mode to have cookies cleared), open new a page on localhost:4200, run gremlins like in the previous part and if any page error appears process will close with falsy status.

missing parts:



module.exports.insertGremlins = async (page) => {
  await page.evaluate(() => {
    const s = document.createElement('script');
    s.src='gremlins.min.js'; 
    document.head.appendChild(s);
  });
};

module.exports.runGremlins = async (page) => {
  await page.evaluate(() => {
    window.gremlins.createHorde().unleash()
  });
};

module.exports.wait = (time) =>
  new Promise((resolve) => {
    setTimeout(resolve, time);
  });

Verification

To be sure that gremlins are gonna catch an error, add something like this to the app: setTimeout(() => { throw new Error('debug'); }, 3000); . If command node run-gremlins.js will exit with falsy code then the tester works correctly :)

Run on docker

Best way to be sure that tester is working on other environment (like CI) is wrap it into a docker container. Unfortunately we need to install some dependencies in the container.



FROM node:16.13.1 # Specific version, not the lastest

RUN ["apt-get", "update"]
RUN apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils -y
RUN apt-get update \
     && apt-get install -y wget --no-install-recommends \
     && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
     && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
     && apt-get update \
     && apt-get install -y google-chrome-unstable --no-install-recommends \
     && rm -rf /var/lib/apt/lists/* \
     && wget --quiet https://raw.githubusercontent.com/vishnubob/wait-for-it/master/wait-for-it.sh -O /usr/sbin/wait-for-it.sh \
     && chmod +x /usr/sbin/wait-for-it.sh

To allow root user run puppeteer add --no-sandbox flag into run-gremlins.js file:



const browser = await puppeteer.launch({
  args: ['--no-sandbox'],
});

In this case your local web application has to run in the same container, however you can add --network=host to the previous command to allow gremlin-tester to communicate with a localhost.

Conclusion

I'm using it, it saves a lot of my time. Maybe someone else will to take advantage of it.

DEV Community: Przemyslaw Jan Beigert

Modular monolith with the eslint-boundries

Intro

Problem

Boundries

Rules

Exceptions

Conclusion

How to run npm scripts concurrently?

Intro

Script

Package

Bash

Summary

How to minify private methods in a TypeScript class?

Introduction

Terser

Find all private method

Fix collision

Result

Improve TypeScript Omit type

Introduction

Implementation

Installation

Summary

Read more

3 macos settings to boost your productivity

Caps lock position

Keyboard speed

Dock

Cursor color [Edited]

Summary

Turn on TS flag evolutionarily

Introduction

Implementation

Summary

Simple communication between page and browser extension

Introduction

Requirements

Prepare

Send data from page

Get data in extension

Summary

Template literal types in the Vuex

Introduction

Vuex with TypeScript

Dispatching actions from another module

With template literal types

Conclusion

Links

Save couple of seconds each day by Alfred's workflow

Assumptions

Tool

Implementation

Clean up

Result

Summary

Improve $destroy performance in Vue

Introduction

Case

Investigation

Reason

Solution

Result

Conclusion

How to write a constant in the TypeScript?

Introduction

Object as const:

Enum:

Const enum:

Union:

Summary:

Gremlins testing with puppeteer

Introduction

Implementation

Automatisation

missing parts:

Verification

Run on docker

Conclusion