Forem: Iulian Preda

What are your must have requirements from a UI library?

Iulian Preda — Thu, 27 Oct 2022 12:59:12 +0000

Currently I am developing a new UI library targeting multiple frontend frameworks and this made me wonder:
What makes a UI library great? Why whould anyone pick mine?

These questions made me realise that my priorities are not necessarily everyone's priority,
So here am I asking for your input.

What are your must have requirements when you pick a UI library for your framework of choice?

Some feedback that I received so far:

Familiarity (be it with other UI library for a different framework or for the same one)
Extensive SEO and accessibility support
Easily customisable
A great number of components

Nx - Pnpm - Fixing the "pnpx" and "pnx" command

Iulian Preda — Wed, 11 May 2022 20:09:36 +0000

If you have used Nx with PNPM recently, you might have noticed that generating any schematics using their own "Nx Console" extension in VSCode is not working and ends up in an error like:

The term 'pnpx' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

After some research I found an easy to implement solution to fix this issue, we can just alias pnpx to pnpm exec.
The solution I will display is for powershell but you can also use a similar solution for your terminal of choice.

Aliasing PNPX

First we will need to open a powershell terminal and run the following commands. What they will do, is create a powershell file for your user that will be run on each powershell open. This file will have the authority to run remote signed scripts since we need it to have the same capabilities as the npx command.

new-item $PROFILE.CurrentUserAllHosts -ItemType file -Force
Set-ExecutionPolicy -Scope CurrentUser then RemoteSigned
ise $PROFILE.CurrentUserAllHosts And finally add:

function pnpx {
    $joinedArgs = $args -join " "
    pnpm exec $joinedArgs
}

function pnx{
    $joinedArgs = $args -join " "
    pnpm run nx $joinedArgs
}

Save and exit

Thanks for reading!

Nx NestJs - Typeorm database connection with environment variables

Iulian Preda — Mon, 09 May 2022 22:34:49 +0000

Continuing from the last article, we should already have a defined ConfigModule and environment variables.

To set up the data base connection in this case it's just a matter of a few lines of code.
In my example I will use a Postgresql database, but it can be any type of database.

Install the npm install --save @nestjs/typeorm typeorm@0.3 pg. pg is the Postgresql driver used by Typeorm to connect to the database. For each individual database it will be a different driver, e.g. sql2, mongoose and others. The typeorm we installed is v0.3, in the nestJs documentation it is recommended to use the v0.2 but it's compatible and newer, If you dislike it you can use v0.2.
Create in the project's folder a typeorm folder with a typeorm.service.ts file.
Add to the file the following:

import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { TypeOrmModuleOptions, TypeOrmOptionsFactory } from '@nestjs/typeorm';

import { IEnvironment } from './../environments/env.interface';

@Injectable()
export class TypeOrmConfigService implements TypeOrmOptionsFactory {
  constructor(private config: ConfigService) {}

  public createTypeOrmOptions(): TypeOrmModuleOptions {
    const db = this.config.get<IEnvironment['database']>('database') as IEnvironment['database'];
    const productionMode = this.config.get<IEnvironment['production']>('production') as IEnvironment['production'];
    return {
      type: 'postgres',
      host: db.host,
      port: db.port,
      database: db.database,
      username: db.username,
      password: db.password,
      //   migrations: ['dist/migrations/*.{ts,js}'],
      logger: 'file',
      synchronize: !productionMode, // never use TRUE in production!
      autoLoadEntities: true,
    };
  }
}

Special mentions about this:

migrations are disabled. We will come back to them in a different article because they are managed outside of Nx and NestJs using the TypeOrm Cli.
the synchronize is turned on only in non-production environment

Now all that it remained is to use this class in the AppModule(or a separate DatabaseModule if you would like to have a more granular approach)

Go to app.module.ts and add in the imports TypeOrmModule.forRootAsync({ useClass: TypeOrmConfigService }) For example, my app.module.ts looks like this

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { TypeOrmModule } from '@nestjs/typeorm';

import { getEnvConfig } from './environments/env-config';
import { envValidation } from './environments/env-validator';
import { TypeOrmConfigService } from './typeorm/typeorm.service';

@Module({
  imports: [
    ConfigModule.forRoot({
      load: [getEnvConfig],
      isGlobal: true,
      cache: true,
      validate: envValidation,
    }),
    TypeOrmModule.forRootAsync({ useClass: TypeOrmConfigService })
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

That was it, next step would be creating models and services. A good documentation about that is here

Thanks for reading!

Nx NestJs - Easy way to get, autofill and validate environment variables

Iulian Preda — Mon, 09 May 2022 01:13:21 +0000

Greetings, today we will discuss about environment variables in NestJs, specifically using Nx.

As you might know, Nx autogenerates a lot of boilerplate code for us. It does the same with the environment files.
After you create a new project you can see that you have 2 files environment and environment.prod.ts that are waiting for you.
These files are basically the same, the .prod file will replace the other one on build if the production flag is set.
All this magic can be seen inside project.json

Now, if we would be able to simply set everything in there, this article would be pointless. Usually, we want to have the secrets of the application… secret. For the local dev environment, it might be fine to save in the repo your config, but for production, it is definitely not.

So, to simplify a lot of things I propose a mixed approach. For local, we set everything is environment.ts and for production(and others) we set only nonsecret things in environment.prod.ts and the rest as environment variables.

Let's get to work!

Configuration

First, we will need the ConfigModule available in the app so proceed to run npm install --save @nestjs/config class-validator class-transformer

Then in the environment folder (or a different one) you can create env-config.ts which will contain

/** Environment variables take precedence */
export function getEnvConfig() {
  const envVariables = parseEnvVariables();
  return mergeObject(env, envVariables);
}

function parseEnvVariables() {
  const envVariables: DeepPartial<IEnvironment> = {};
  const env = process.env;
  if (env) {
    if (env.PRODUCTION) envVariables.production = env.PRODUCTION === 'true';
    if (env.PORT) envVariables.port = parseInt(env.PORT, 10);
    if (env.BASE_URL) envVariables.baseUrl = env.BASE_URL;
    if (env.GLOBAL_API_PREFIX) envVariables.globalApiPrefix = env.GLOBAL_API_PREFIX;

    envVariables.database = {};
    if (env.DATABASE_HOST) envVariables.database.host = env.DATABASE_HOST;
    if (env.DATABASE_PORT) envVariables.database.port = parseInt(env.DATABASE_PORT, 10);
    if (env.DATABASE_DATABASE) envVariables.database.database = env.DATABASE_DATABASE;
    if (env.DATABASE_USERNAME) envVariables.database.username = env.DATABASE_USERNAME;
    if (env.DATABASE_PASSWORD) envVariables.database.password = env.DATABASE_PASSWORD;
  }
  return envVariables;
}


function mergeObject(obj1: Record<string, any>, obj2: Record<string, any>) {
  for (const key in obj2) {
    if (obj2.hasOwnProperty(key)) {
      if (typeof obj2[key] === 'object') {
        mergeObject(obj1[key], obj2[key]);
      } else {
        obj1[key] = obj2[key];
      }
    }
  }
  return obj1;
}

type DeepPartial<T> = T extends object
  ? {
      [P in keyof T]?: DeepPartial<T[P]>;
    }
  : T;

Let's explain, the getEnvConfig function will be called by the ConfigModule at start-up and will retrieve both the environment variables and the environment object from environment.ts. Then we will merge all the properties together and return the object. The environment variables have priority in the merge.

You might have noticed some interfaces too. Better typing is always good to have so we need to create env.interface.ts in the same folder containing

export interface IEnvironment {
  production: boolean;
  port: number;
  baseUrl: string;
  globalApiPrefix: string;
  database: IDatabaseEnvironment;
}

export interface IDatabaseEnvironment {
  host: string;
  port: number;
  database: string;
  username: string;
  password: string;
}

At this point we are almost done.
All we need to do more is to add the interface above in the environment.ts and environment.prod.ts
My files look like this:

// environment.ts
import { IEnvironment } from './env.interface';

export const env: Partial<IEnvironment> = {
  production: false,
  globalApiPrefix: 'api',
  port: 3333,
  baseUrl: 'http://localhost',
  database: {
    host: 'localhost',
    port: 5432,
    database: 'postgres',
    username: 'postgres',
    password: 'password',
  },
};


// environment.prod.ts
export const env: Partial<IEnvironment> = {
  production: true,
};

The other single thing remaining to do is registering the ConfigModule, so open app.module.ts and add

 ConfigModule.forRoot({
      load: [getEnvConfig],
      isGlobal: true,
      cache: true,
    }),

This should get you going. Let's talk now about validation.

Validation

One way is to you Joi, but it is not recommended for Node users above v17.
Personally I used a custom validation.
Create in the same environment folder another file env-validator.

import { plainToClass } from 'class-transformer';
import { IsBoolean, IsNumber, IsObject, IsString, validateSync } from 'class-validator';

import { getEnvConfig } from './env-config';
import { IDatabaseEnvironment, IEnvironment } from './env.interface';

class DatabaseEnvironment implements IDatabaseEnvironment {
  @IsString()
  host: string;
  @IsNumber()
  port: number;
  @IsString()
  database: string;
  @IsString()
  username: string;
  @IsString()
  password: string;
}
class Environment implements IEnvironment {
  @IsBoolean()
  production: boolean;

  @IsNumber()
  port: number;

  @IsString()
  baseUrl: string;

  @IsObject()
  database: DatabaseEnvironment;

  @IsString()
  globalApiPrefix: string;
}

export function envValidation() {
const config = getEnvConfig();
  const validatedConfig = plainToClass(Environment, config, { enableImplicitConversion: true });
  const errors = validateSync(validatedConfig, { skipMissingProperties: false });

  if (errors.length > 0) {
    throw new Error(errors.toString());
  }
  return validatedConfig;
}

As a short explanation, we get the environment variables using the function created at the beginning, then using a transformer function we create the objects above which contains the validators needed. Then we validate each property. If the validation fails the app will not run.

Now we only need to trigger the validation.
Let's go to app.module.ts and change

ConfigModule.forRoot({
      load: [getEnvConfig],
      isGlobal: true,
      cache: true,
    }),

  ConfigModule.forRoot({
      load: [getEnvConfig],
      isGlobal: true,
      cache: true,
      validate: envValidation,
    })

Usages

This configuration has many usages. For example you can dynamically change the database based on the environment, or the port.

Let's check one of the usages. Particularly the port.
We can update main.ts to use the ConfigService and get the env variable.
So from something like

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.setGlobalPrefix('api');
  await app.listen(3000);
}

we can get

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const config: ConfigService = app.get(ConfigService);
  const globalApiPrefix = config.get<IEnvironment['globalApiPrefix']>('globalPrefix') ?? 'api';

  app.setGlobalPrefix(globalApiPrefix);

  const port = config.get<IEnvironment['port']>('port') ?? 3333;
  await app.listen(port);
}

Thanks for reading!

Nx NestJs - How to autogenerate OpenApi/Swagger specs

Iulian Preda — Sun, 08 May 2022 11:06:39 +0000

Hello everyone, short article this time.
As I started using NestJs with Nx I noticed a point of contingency, there are still debates on how to activate OpenApi/Swagger in NestJs with the auto documentation option.

Fear no more, at the end of this tutorial that problem will be solved.

Versions used

I am using the latest Nx at the time of writing, which is V14, with NestJs 8.0 and NestJs Swagger 5.2.

Packages

Install the required package first, if you use express install npm install --save @nestjs/swagger swagger-ui-express otherwise, for fastify use npm install --save @nestjs/swagger fastify-swagger

Add Swagger Module

In main.ts from your NestJs' project folder add the following:

function setupOpenApi(app: INestApplication) {
  const config = new DocumentBuilder().setTitle('API Documentation').setVersion('1.0').addTag('api').build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);
}

then in the bootstrap function just call the setupOpenApi function.

My entire main.ts looks like this, take note that I prefered the following options:

I used Fastify, because I don't have any hard dependency on an express middleware and it improves the performance
I Used a global prefix, thus the I had to set useGlobalPrefix:true in the function above
The global prefix I used is the default api that conflicts with the default route for OpenApi which in the documentation is coincidently api. If you keep them like this without adding the useGlobalPrefix: true flag then you will be able to access both the APIs and the OpenAPI on http://localhost:3000/api but you will notice that the documentation is wrong as it doesn't contain the globalPrefix used. To fix this we will have to set the useGlobalPrefix: true flag for OpenAPI and access the documentation at http://localhost:3000/api/api which looks weird so I customized it to http://localhost:3000/api/openApi Working example bellow:

/**
 * This is not a production server yet!
 * This is only a minimal backend to get started.
 */
import { INestApplication, Logger } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';

import { AppModule } from './app/app.module';

async function bootstrap() {
  const fastifyOptions: ConstructorParameters<typeof FastifyAdapter>[0] = {
    logger: true,
  };
  const fastifyAdapter = new FastifyAdapter(fastifyOptions);
  const app = await NestFactory.create<NestFastifyApplication>(AppModule, fastifyAdapter);

  const globalPrefix = 'api';
  app.setGlobalPrefix(globalPrefix);
  setupOpenApi(app);

  const port = process.env.PORT || 3333;
  await app.listen(port);
  Logger.log(`🚀 Application is running on: http://localhost:${port}/${globalPrefix}`);
}

bootstrap();

function setupOpenApi(app: INestApplication) {
  const config = new DocumentBuilder().setTitle('API Documentation').setVersion('1.0').addTag('api').build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('openApi', app, document, { useGlobalPrefix: true });
}

Right now you are ready to use the manual documentation part of the package, but we both know you are not here for that

Auto Documentation

This will be rather short, we will have 2, non-hacky, ways to do this.

Nest-Cli.json - Not suggested

Just create a nest-cli.json file at the root of the project, then add

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "apps",
  "compilerOptions": {
    "plugins": [
      {
        "name": "@nestjs/swagger/plugin",
        "options": {
          "dtoFileNameSuffix": [".entity.ts", ".dto.ts"],
          "controllerFileNameSuffix": [".controller.ts"],
          "classValidatorShim": true,
          "dtoKeyOfComment": "description",
          "controllerKeyOfComment": "description",
          "introspectComments": true
        }
      }
    ]
  }
}

Do not be scared of the above settings, they are just the defaults to be more explicit. What is really changed is the sourceRoot which in the case on NX (at least for the presets with apps) is the folder apps.

This should detect your parameters, and class names, but will most likely not see what is inside your classes and they will appear empty.

TsPlugin - Recommended, more customizable

Go to your project.json in your NestJs' project folder or angular.json in the root folder for older version and search for the project you need. We will need to alter the build command.

The entire build command is displayed bellow

 "build": {
      "executor": "@nrwl/node:webpack",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/api",
        "main": "apps/api/src/main.ts",
        "tsConfig": "apps/api/tsconfig.app.json",
        "tsPlugins": [
          {
            "name": "@nestjs/swagger/plugin",
            "options": {
              "dtoFileNameSuffix": [".entity.ts", ".dto.ts"],
              "controllerFileNameSuffix": [".controller.ts"],
              "classValidatorShim": true,
              "dtoKeyOfComment": "description",
              "controllerKeyOfComment": "description",
              "introspectComments": true
            }
          }
        ],
        "assets": ["apps/api/src/assets"]
      },

As you can notice we added a custom Webpack TsPlugin as specified in the documentation above this https://docs.nestjs.com/openapi/cli-plugin#integration-with-ts-jest-e2e-tests.

As mentioned, this is the recommended approach, it will see all the classes from anywhere in the monorepo as long as they are imported into the project.

Final details

Keep in mind the following:

You can use only classes not interfacees
You need to append a .dto.ts or .entity.ts unless you change that

Thanks for reading!

How to easily create JS libraries with bundled dependencies compatible with ES/AMD/UMD/CJS module systems using Nx

Iulian Preda — Sat, 22 Jan 2022 02:51:02 +0000

General aspects

If you haven't yet checked out my last post it's high time to do so as we will need it for this article.

Getting that out of the way, let's suppose we already have the workspace set up, we can build the libraries and publish them, but something is not exactly right, what if we want to ship a version of the library with all the dependencies already bundled so our users could use it directly from a CDN.

In this article, I will show you not only how to set up such a feature with the least possible setup, but I will also show you how to minimize the bundles to their possible best.

Concepts used this time around

@nrwl/web:webpack
webpack config

Getting to action - Creating bundles

npm install --save-dev @babel/preset-typescript
Adjust the babel.config.json file created last time to contain

{ "presets": ["@babel/preset-typescript", "minify"] }

Create a webpack.config.js in the root folder that should contain

// https://webpack.js.org/configuration/output/#outputlibrarytype
// possible libraryTargets in webpack 5: 'var', 'module', 'assign', 'assign-properties', 'this', 'window', 'self', 'global', 'commonjs', 'commonjs2', 'commonjs-module', 'amd', 'amd-require', 'umd', 'umd2', 'jsonp' and 'system'

// type:name collection used in file names
const libraryTypesWithNames = {
    var: 'var',
    module: 'esm',
    assign: 'assign',
    'assign-properties': 'assign-properties',
    this: 'this',
    window: 'window',
    self: 'self',
    global: 'global',
    commonjs: 'commonjs',
    commonjs2: 'commonjs2',
    'commonjs-module': 'commonjs-module',
    amd: 'amd',
    'amd-require': 'amd-require',
    umd: 'umd',
    umd2: 'umd2',
    jsonp: 'jsonp',
    system: 'system',
};

const getLibraryName = (type) => libraryTypesWithNames[type];

const getLibrary = (type, name) => {
    const unsetNameLibraries = ['module', 'amd-require']; // these libraries cannot have a name
    if (unsetNameLibraries.includes(type)) name = undefined;
    return { name, type, umdNamedDefine: true };
};

const modifyEntries = (config, libraryName, libraryTarget) => {
    const mainEntryPath = config.entry.main;
    try {
        delete config.entry.main;
    } catch (error) {
        console.warn(`Could not delete entry.main: ${error}`);
    }

    if (libraryTarget.includes('module')) {
        // https://webpack.js.org/configuration/output/#librarytarget-module
        // for esm library name must be unset and config.experiments.outputModule = true - This is experimental and might result in empty umd output
       config.experiments.outputModule = true
        config.experiments = {
            ...config.experiments,
            outputModule: true,
        };
    }

    libraryTarget.forEach((type) => {
        config.entry[`${libraryName}.${getLibraryName(type)}`] = {
            import: mainEntryPath,
            library: getLibrary(type, libraryName),
        };
    });

    // @nrwl/web:webpack runs webpack 2 times with es5 and esm configurations
    const outputFilename = config.output.filename.includes('es5') ? config.output.filename : '[name].js';
    config.output = {
        ...config.output,
        filename: outputFilename,
    };
};

module.exports = (config, { options }) => {
    const libraryTargets = options.libraryTargets ?? ['global', 'commonjs', 'amd', 'umd'];
    const libraryName = options.libraryName;

    config.optimization.runtimeChunk = false;
    modifyEntries(config, libraryName, libraryTargets);

    return config;
};

go to packages/LibraryName/project.json and add this json property under the package property.

 "bundle": {
            "executor": "@nrwl/web:webpack",
            "outputs": ["{options.outputPath}"],
            "options": {
                "libraryName": "LibraryName",
                "libraryTargets": ['global', 'commonjs', 'amd', 'umd'],
                "index": "",
                "tsConfig": "packages/LibraryName/tsconfig.lib.json",
                "main": "packages/LibraryName/src/index.ts",
                "outputPath": "dist/packages/LibraryName/bundles",
                "compiler": "babel",
                "optimization": true,
                "extractLicenses": true,
                "runtimeChunk": false,
                "vendorChunk": false,
                "generateIndexHtml": false,
                "commonChunk": false,
                "namedChunks": false,
                "webpackConfig": "webpack.config.js"
            }
        },

Run nx bundle:LibraryName - this should create a dist/packages/LibraryName/bundles folder containing the .umd and .umd.es5 bundled files.

Inputs and configurations

In `packages/LibraryName/project.json`

These variables are custom, as they are not internally used by Nx, and are just passed to the webpack.config.js.

libraryName - String - This affects how webpack will export your library. For example "libraryName": "LibraryName" in UMD will export your library to an object called "LibraryName".
libraryTargets - Array of any available webpack 5 library type (the keys of libraryTypesWithNames form the webpack.config.js)

Webpack.config.js

You can manually change the values of libraryTypesWithNames to alter the bundle suffix. E.g. changing var:'var' to 'var:'web' will generate a bundle file ending in .web.js and .web.es5.js.
You can manually change the default array for libraryTargets.

Some code explanation for the configurable variables

const libraryTypesWithNames = {
    var: 'var',
    module: 'esm',
    assign: 'assign',
    'assign-properties': 'assign-properties',
    this: 'this',
    window: 'window',
    self: 'self',
    global: 'global',
    commonjs: 'commonjs',
    commonjs2: 'commonjs2',
    'commonjs-module': 'commonjs-module',
    amd: 'amd',
    'amd-require': 'amd-require',
    umd: 'umd',
    umd2: 'umd2',
    jsonp: 'jsonp',
    system: 'system',
};

This contains all the available libraries in webpack 5 as stated on their website.
We use the key in it to retrieve the name we want to use in our bundled filename. Feel free to change them as you would like. We also do not use them all at once as you will notice later on.

const libraryTargets = options.libraryTargets ?? ['global', 'commonjs', 'amd', 'umd'];

This line contains as default an array of options that can be used for most libraries, you can customize it directly or you can provide an array of library types to the libraryTargets property in packages/LibraryName/project.json using the keys of libraryTypesWithNames.
E.g. if you want to use all the available options you can simply change the variable to

const libraryTargets = Object.keys(libraryTypesWithNames);

Minimizing the bundle size using gzip

npm install compression-webpack-plugin --save-dev
Depending on what you want to achieve change in webpack.config.js the following - This will help with AWS and some CDNs as the gzipped files have .js extension and can be embedded directly.

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = (config, { options }) => {
    const libraryTargets = options.libraryTargets ?? ['global', 'commonjs', 'amd', 'umd'];
    const libraryName = options.libraryName;

    config.optimization.runtimeChunk = false;
    const terser = config.optimization.minimizer.find((minimizer) => minimizer.constructor.name === 'TerserPlugin');
    if (terser) {
        terser.options.exclude = /\.gz\.js$/;
    }
    config.plugins = [
        ...config.plugins,
        new CompressionPlugin({
            filename: `[name].gz[ext]`,
        }),
    ];
    modifyEntries(config, libraryName, libraryTargets);

    return config;
};

Otherwise, you might consider the simpler version that outputs .gz files.


const CompressionPlugin = require('compression-webpack-plugin');

module.exports = (config, { options }) => {
    const libraryTargets = options.libraryTargets ?? ['global', 'commonjs', 'amd', 'umd'];
    const libraryName = options.libraryName;

    config.optimization.runtimeChunk = false;
    config.plugins = [
        ...config.plugins,
        new CompressionPlugin(),
    ];
    modifyEntries(config, libraryName, libraryTargets);

    return config;
};

Final touches

If last time you created an executor to automate publishing, we can now automate even more. We will set up automatically running bundling and packaging before publishing whenever we run nx publish:LibraryName.
All you need to do is:

Go to packages/LibraryName/project.json and change the bundle property to:


        "bundle": {
            "executor": "@nrwl/web:webpack",
            "outputs": ["{options.outputPath}"],
            "dependsOn": [
                {
                    "target": "package",
                    "projects": "dependencies"
                }
            ],
            "options": {
                "libraryName": "LibraryName",
                "libraryTargets": ["global", "commonjs", "amd", "umd"],
                "index": "",
                "tsConfig": "packages/LibraryName/tsconfig.lib.json",
                "main": "packages/LibraryName/src/index.ts",
                "outputPath": "dist/packages/LibraryName/bundles",
                "compiler": "babel",
                "optimization": true,
                "extractLicenses": true,
                "runtimeChunk": false,
                "vendorChunk": false,
                "generateIndexHtml": false,
                "commonChunk": false,
                "namedChunks": false,
                "webpackConfig": "webpack.config.js"
            }
        },

Then go to nx.json and add in targetDependencies another option with

 "publish": [
            {
                "target": "package",
                "projects": "self"
            }
        ]

Alternatively you can just add to targetDependencies these 2 options to affect all the future projects.

    "bundle": [
            {
                "target": "package",
                "projects": "self"
            }
        ],
        "publish": [
            {
                "target": "bundle",
                "projects": "self"
            }
        ]

Good to know

The module option is still experimental and requires turning on outputModule flag, you should know this might result in an empty umd bundle.
For a full example you can visit https://github.com/IP-OpenSourceWeb/OpenSourceWeb

How to easily create JS libraries compatible with ES/AMD/UMD/CJS module systems using Nx

Iulian Preda — Tue, 28 Dec 2021 13:45:29 +0000

Problem description

Authoring libraries is always a pain if you try to maximize the number of projects that can incorporate yours.

In a perfect world, we would have to use only one module system, most probably ES modules as that is the standard in Javascript specifications, but as we might know we don't live in a perfect world and transitioning projects takes a lot of time. So, even though now, NodeJS already has pretty good support for ES modules and all modern browsers are compatible with it a lot of projects still use CJS or UMD or even AMD modules.

In this article I'll show you a quick and easy way on how to create a new library publishable to NPM, YARN, PNPM, whatever other package managers will exist in the future, that will target all these module systems.

In my example, I'll use Typescript and NPM but the solution is overall agnostic of these so you could use YARN and Javascript for example.

The entire solution will also be powered up by NX, a free mono repository solution that does the entire heavy lifting for us.
Please be aware that some package names might change in the future, if that happens let me know in a comment so I can update the article.

I will be using the latest NX version available, which at the time of writing is V13, which brings a lot of improvements and a simplified process.

Prerequisites for this example

NodeJs
Npm
VsCode or any other code editor
Any terminal - Personally I recommend Windows Terminal

Creating the library

Create a folder and open a terminal in it
Run npx create-nx-workspace@latest LibrarySolutionName
Run cd LibrarySolutionName
Run npm i -D @nrwl/web - it will install the addon that will package our library
Run nx generate @nrwl/js:library --name=LibraryName --importPath=LibraryName --buildable
Open the newly created folder in your code editor
Go to packages/LibraryName/tsconfig.json and change CommonJs to EsNext or ES6.
Create in packages/LibraryName a json called babel.config.json that will contain {}. You can alternatively create it in the root folder and it will work as a global babel file for each ulterior library you might create.
Go to packages/LibraryName/project.json and add in the targets the property

    "package": {
      "executor": "@nrwl/web:rollup",
      "outputs": ["{options.outputPath}"],
      "options": {
        "project": "packages/LibraryName/package.json",
        "outputPath": "dist/packages/LibraryName",
        "entryFile": "packages/LibraryName/src/index.ts",
        "tsConfig": "packages/LibraryName/tsconfig.lib.json"
      }
    }

There are other interesting options you might consider, like:

assets
different compiler (only babel and swc are available)
different UMD name
CJS output
external libraries included in the bundle
adding dependencies I will present you a configuration that lists all these options

! To copy the Readme.md created please move it to the packages/LibraryName/src
! To use 'swc' as a compiler you will need to add it to the project using
npm i @swc/core

    "package": {
      "executor": "@nrwl/web:rollup",
      "outputs": ["{options.outputPath}"],
      "options": {
        "project": "packages/LibraryName/package.json",
        "outputPath": "dist/packages/LibraryName",
        "entryFile": "packages/LibraryName/src/index.ts",
        "tsConfig": "packages/LibraryName/tsconfig.lib.json",
        "compiler": "babel",
        "umdName": "OtherName",
        "external": ["typescript"],
        "format": ["cjs", "esm", "umd"],
        "assets": ["packages/LibraryName/src/README.md"]
      }
    }

At this point you are pretty much done, all you need to do is run nx package LibraryName and a few seconds later you will see a dist/LibraryName folder appeared with all the files needed for publishing. If you will open the package.json you will notice a few extra properties added

 "main": "./index.umd.js",
 "module": "./index.esm.js",
 "typings": "./index.d.ts"

These will instruct any library user from where to import each library type based on the module system they use.

Minify the bundles

If you would like to have your code minify you can take advantage of babel for that.
Run npm install babel-preset-minify --save-dev
Then in babel.config.json add "presets": ["minify"]

Publishing

Add in packages/LibraryName/package.json the property

    "files": [
        "**/*"
    ],

This needs to be done in order to get these files inside your npm package.

Run cd dist/packages/LibraryName
Run npm publish --tag=latest --access public and login

For a more advanced publishing way, you can run

nx g @nrwl/workspace:run-commands publish --project LibraryName --command 'cd dist/packages/LibraryName && npm publish --tag=latest --access public'

This will add a publishing executor to the packages/LibraryName/project.json that will run the publishing npm command. Then all you need to do is update the version of the package and run nx publish LibraryName and it will automatically be published.

Extra details

Usually the importPath is used with the following naming scheme @LibrarySolutionName/LibraryName
If you use it for Node do not forget to install @types/node and add them to the tsconfig.base.json and the packages/LibraryName/tsconfig.json
After you publish to npm your library is automatically available on unpkgr at unpkg.com/:package@:version/:file so you can import your bundled scripts directly. Imported like this the UMD can be used in the web browser as a global object with the name of the library in PascalCase.
Opposed to webpack this type of bundling does not include external dependencies so your libraries are kept to a minimum. Please do not forget to add all of your dependencies to packages/LibraryName/package.json

You can check this repo as an example of this approach.

Thanks for reading! Feel free to suggest any other interesting topics to be covered in a different article.

Codeforces - How to use Typescript/Javascript like a pro

Iulian Preda — Wed, 17 Mar 2021 18:00:19 +0000

Hi everybody,

For a TL;DR section just skip to the end.

Getting that out of the way, let's get started. So, today I wanted to explore again some algorithmics problems and I returned to CodeForces.

Lately, I have used a lot of Typescript so naturally, I wanted to use it here too and I gladly discovered that you can actually use javascript in it.

Then the next question was, but how can I run only a single file in my Typescript project that holds many other problems (or at least it will)?

I tried many solutions but I came about creating an npm package that I can simply import or require since otherwise, I had issues with imports, paths, and more.

This is the package codeforces-io.
It is a simple mock for the readline() and print() functions so you do not have to modify your existing code while copying it to submission.

The documentation covers how to use it as a simple package, so I will write here a tutorial from start to finish with some advanced usages that you might like.

I created this package for those who want their code to be as close to the submission code as possible without having to deal with the boilerplate™ e.g.1,2.

IP-Algorithmics / CodeForcesIO

Small package to mock Codeforces Javascript IO functions

CodeForces IO

Small package to mock Codeforces Javascript IO functions.

Install

npm i @ip-algorithmics/codeforces-io

Intro

Codeforces for Javascript/Typescript uses readline() and print() functions for input and output to the standard input/console.

How to use

This library exposes the functions in a manner that allows you to just copy the source code for the submission.

Importing the functions

The functions can be imported both as ES6 modules or using the require function. The difference lays in how you access it.

// using ES6 modules import - you need to have the "module" property set to "commonjs" in the package.json
import { readline, print } from '@ip-algorithmics/codeforces-io';

// using require
const codeForcesIO = require('@ip-algorithmics/codeforces-io');
const readline = codeForcesIO.readline;
const print = codeForcesIO.print;

// alternative
const { readline, print, console } = require('@ip-algorithmics/codeforces-io');

readline()

This…

View on GitHub

Too much talk, let's see the usage

First, you have to have an npm project in the folder. So open up a terminal in your desired folder and just type npm init. You can use the default.

Then npm i @ip-algorithmics/codeforces-io

If you do not use Typescript this is all you need to do, otherwise... just run this one after the other.

npm i -g typescript ts-node

Note: if you want to configure Typescript you will additionally need to run

tsc --init

Remember to not include the "DOM" library into the lib because the print function is already declared in the DOM library for printing files.
You can just require/import the print function for this package for output to the console. If need other functions from the console object you can require the entire console.

Usage with `ts-node` or `node`

Now that you have a working environment you can create a .js or .ts file and get going.
This library uses modern ES6 import/export modules but that means declaring a few more things in the project configuration.
So let's stay to require for now.
At the top of your file just write

const {nextLine, print, console} = require('@ip-algorithmics/codeforces-io')

Now that we have our functions we can use them in the project.

The readline function reads from input.txt file that needs to be in the same folder.
Here is a quick example

// example.js or example.ts
const { readline, print } = require('@ip-algorithmics/codeforces-io');

let numberOfLines = parseInt(readline(), 10);
for (let i = 0; i < numberOfLines; i++) {
    let x = readline()
        .trim()
        .split(',')
        .map((x) => parseInt(x, 10));
    if (x[0] < 90 || x[0] > 90 || x[1] < 90 || x[1] > 90) {
        print(x);
        break;
    }
    // do something with x
}

And here is the input.txt

Now that we have our files in place we can just run
node example.js or ts-node example.ts. You can use an absolute or relative path, this library will search for the place where the script is and then read the input file from there.
So you do not have to cd <path> you can just use node <path>/<file>.

Usage with jest

For a simple reason. Paths can get really long and jest can use test names to find the file directly

Compare these:

ts-node src/1300-points/totally-real-problem/index.ts
jest -t 'totally-real-problem I'd say it's a bit shorter. But how can you obtain that? Well, that is simple actually.

Just run npm i -g jest ts-jest and npm i @types/jest and then in the root of the project you need to create a file named jest.config.ts and put the next lines in it:

export default {
    preset: 'ts-jest',
    testEnvironment: 'node',
    transform: {
        'node_modules/variables/.+\\.(j|t)sx?$': 'ts-jest'
    },
    transformIgnorePatterns: ['node_modules/(?!variables/.*)']
};

For javascript you can just run jest --init and that will work by default.

Except for this, now all of your scripts will have to be a test
so the naming should be .test.ts or .spec.ts or create a folder named __tests__ and place your scripts in it (same things apply to javascript also).

Now you have to convert your scripts to tests. This is as simple as wrapping everything in

test('name of test', () => { 
// your code
})

The example from above will get transformed to this.

test('example', () => {
const { readline, print, testOutput } = require('@ip-algorithmics/codeforces-io');

let numberOfLines = parseInt(readline(), 10);
for (let i = 0; i < numberOfLines; i++) {
    let x = readline()
        .trim()
        .split(',')
        .map((y) => parseInt(y, 10));

    if ((x[0] < 90 && x[0] > -90) || (x[1] < 90 && x[1] > -90)) {
        print(x[0] + ',' + x[1]);
        break;
    }
}
}

To run it just type jest -t 'example'.

Special mention

For typescript projects if you use the same function names without putting them in a class you will get an error that the name is taken, so you have to add export {}; at the end of the file so the names will not conflict.

If something doesn't work do not hesitate to leave a comment, open an issue or even better create a pull request.

TL;DR

Created a library for Codeforces that reads input.txt from the folder the script was called.
npm i @ip-algorithmics/codeforces-io
Code example

// example.js or example.ts
const { readline, print, testOutput } = require('@ip-algorithmics/codeforces-io');

let numberOfLines = parseInt(readline(), 10);
for (let i = 0; i < numberOfLines; i++) {
    let x = readline()
        .trim()
        .split(',')
        .map((y) => parseInt(y, 10));

    if ((x[0] < 90 && x[0] > -90) || (x[1] < 90 && x[1] > -90)) {
        print(x[0] + ',' + x[1]);
        break;
    }
}

And here is the input.txt

node <path to file>/file.js or ts-node <path to file>/file.ts

Happy codding!

Update

I added the testOutput function. Now you can create your output.txt file and put the outputs in it.
You just have to run the function at the end of the script and it will prompt you with a Passed or Failed output in the console.
Remember not to copy this function in the submission.

Internally now the print caches everything so that the testOutput can check if what was printed is the same as what is in the output.txt

Example:
input.txt

output.txt

-47,23

const { readline, print, testOutput } = require('@ip-algorithmics/codeforces-io');

let numberOfLines = parseInt(readline(), 10);
for (let i = 0; i < numberOfLines; i++) {
    let x = readline()
        .trim()
        .split(',')
        .map((y) => parseInt(y, 10));

    if ((x[0] < 90 && x[0] > -90) || (x[1] < 90 && x[1] > -90)) {
        print(x[0] + ',' + x[1]);
        break;
    }
}

testOutput(); // Result Passed

Update 2

The solution generator is completed. Now you can just create the input.txt, output.txt, index.ts and the folder with a simple command. It will also add the imports for you.

You can use this feature in 2 ways:

Without installing globally the library using npx @ip-algorithmics/codeforces-io.
Installing globally the library npm i -g @ip-algorithmics/codeforces-io and then using cf in the command line.

Parameters

path - the path to the solution. E.g. ./ProblemA. Defaults to ./New Solution.
--f or --file - the name of the js/ts file to create. E.g. mainFile. Defaults to index.
--js - Uses .js extension instead of .ts
--cjs - Uses require instead of ES6 import/export
--c or --comment - Adds a comment at the beginning of the file. E.g. the link to the problem.

Usage examples

npx @ip-algorithmics/codeforces-io ./ProblemA --js --cjs
cf ./ProblemA --js --cjs
cf ./ProblemA
cf ./ProblemA --c http://link.to.problem

Update 3 - Typescript ideas

I noticed that Codforces uses ES5 internally in both node and V8 so it has problems with const, let and features like spreading an array.

Personally I found that the best solution is to:

add in the package.json the following script "build": "tsc --module es6 --moduleResolution node" using it like npm run build <path>
manually run tsc --module es6 --moduleResolution node <path>

Run your NPX script directly from Github. Create your own CLI commands and other stories

Iulian Preda — Thu, 10 Sep 2020 12:04:21 +0000

This will be a short read, probably, I can't promise you that though, but at least I'll make it as entertaining as it can get.

First, what is NPX, and what are CLI commands?
NPX is a command-line tool meant to run NPM packages containing CLI scripts.
A CLI command is a program that can be run from the command line by name, for example, gcc or cd or ls, etc.

In NodeJs you have the option to create CLI commands that can be run only from NPM scripts, remember npm run <script name>?
A good example of this is tsc or babel or webpack that unless installed globally (and added to the path) they can be only
summoned from inside a script from the scripts section in the package.json.

We will need NodeJs and NPX installed as a global package for the rest of the article. Any NodeJs > v5.0 should have NPX already installed but if it doesn't work you can always run npm install -g npx.

From NPX's Github page, we can get the following command to run in a terminal: npx github:piuccio/cowsay JavaScript FTW!.
It should prompt us with something like this:

 _________________
< JavaScript FTW! >
 -----------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

This command installed the package in a temporary folder and run the command with the same name as the repository.

Just to mention the npx cowsay JavaScript FTW! command will work just fine because the package exists on NPM as well.

As we just covered how to use it, next we should learn how to write a command that can be used from the CLI (or using NPM).

To save some time I will list the instructions:

Create a new folder
Open a terminal in the folder
package.json - for that we use can use npm --init and accept the defaults or customize the inputs like name, description, license, etc.
Create the main file of the application - create, let's say, a file named index.js
In the package.json we will add the commands section:

"bin": {
        "awesome-command": "index.js",
    }

Add in the index.js on the first line #!/usr/bin/env node For example:

#!/usr/bin/env node
console.log("Awesome Command");

Good job, now if we publish the package and install it, we will be able to use it, but... Let's say we are in a hurry and we just want to see if it works, so, what can we do? We npm link. This command will add it to the global packages like it would have installed it with the -g flag.
Run awesome-command from any terminal and it will print Awesome Command

Sooo, how does the NPX helps? We already are able to run the command from any terminal. Well, that is true, but only now and definitely not always.

If we would have installed the package locally, then we wouldn't have been able to run awesome-command in a terminal and expect it to work. We would have had to add it to the scripts section in the package.json like this:

"scripts": {
    "awesome": awesome-command
  },

and then npm run awesome or... run npx awesome-command.

Now comes the good part, what if we want to make the command available over the internet?

Well then we publish the npm package and anyone can choose to
npm -install <package> it or npx <package>. Remember only to have one of the commands match the name of the package.

But what if we don't want to publish the package?
Then we can just host the package on Github in a new repository and anyone will be able to install it using npm -install user/<repository> or run it using npx github:<user>/<repository>. Again remember to have one of the commands in the bin section match the name of the repository.

Ending thoughts, if the command accepts extra arguments we can always add them after the command name, for example npx github:<user>/<repository> arg1 arg2.

I hope you enjoyed reading the article as much as I enjoyed writing it.

What do you want to learn next ?

Iulian Preda — Tue, 21 Jul 2020 05:43:36 +0000

I have worked for some years as a software developer in a multitude of technologies and I wanted to start some "bite-sized" tutorial. What would be some interesting subjects you would like me to approach, given I have the experience or time to study it and present it.

Automice - Mouse Auto-Mover

Iulian Preda — Sat, 06 Jun 2020 20:36:41 +0000

Hello everyone!

I created a small app that is intended for anyone still working from home. I am often annoyed by the constant locked screen every time I am going for a coffee or short break and due to company policy, I am unable to change the lock screen timeout.

The app is fairly small and works out of the box. It is made to be portable, so it doesn't require any elevated privileges. The settings are saved in the same folder as the launcher, so you will always have the same input parameters, even if you put it on a USB stick and move it around.
Also, it will always be free for use.

I know, it looks pretty basic, but it does its intended job.

You can customize how far and how often the mouse will move and also the inactivity period for the mouse. Don't worry, it won't interfere with your work, if any mouse movement is detected the app will just reset its inactivity timer.

You can download it from here, it is available for Windows and Linux at the moment. I currently don't a Mac, so I am unable to compile it for macOS.

For any suggestions or problems, you can always open an issue here

Forem: Iulian Preda

What are your must have requirements from a UI library?

Nx - Pnpm - Fixing the "pnpx" and "pnx" command

Aliasing PNPX

Nx NestJs - Typeorm database connection with environment variables

Nx NestJs - Easy way to get, autofill and validate environment variables

Configuration

Validation

Usages

Nx NestJs - How to autogenerate OpenApi/Swagger specs

Versions used

Packages

Add Swagger Module

Auto Documentation

Nest-Cli.json - Not suggested

TsPlugin - Recommended, more customizable

Final details

How to easily create JS libraries with bundled dependencies compatible with ES/AMD/UMD/CJS module systems using Nx

General aspects

Concepts used this time around

Getting to action - Creating bundles

Inputs and configurations

In packages/LibraryName/project.json

Webpack.config.js

Some code explanation for the configurable variables

Minimizing the bundle size using gzip

Final touches

Good to know

How to easily create JS libraries compatible with ES/AMD/UMD/CJS module systems using Nx

Problem description

Prerequisites for this example

Creating the library

Minify the bundles

Publishing

Extra details

Codeforces - How to use Typescript/Javascript like a pro

IP-Algorithmics / CodeForcesIO

Small package to mock Codeforces Javascript IO functions

CodeForces IO

Install

Intro

How to use

Importing the functions

readline()

Too much talk, let's see the usage

Usage with ts-node or node

Usage with jest

Special mention

TL;DR

Update

Update 2

Parameters

Usage examples

Update 3 - Typescript ideas

Run your NPX script directly from Github. Create your own CLI commands and other stories

What do you want to learn next ?

Automice - Mouse Auto-Mover

In `packages/LibraryName/project.json`

Usage with `ts-node` or `node`