Build and Test A TypeScript library

Building and Testing A TypeScript/NodeJS library without WebPack, Jest or Rollup

No doubt Typescript is one of the best programming language/frameworks came in recent years. TypeScript helps you with the typings to write clean and modular JavaScript. However, Writing and setting up the library is a very tedious task. You can use TypeScript CLI to build a library, Still testing is a pain. In this tutorial, I will explain how you can ditch WebPack, Jest, or Rollup and write a beautiful library just using tools provided by Awesome Deno.

Deno is around town for a while. Since the beginning, it getting the attention of the developers. It has runtime for JavaScript and TypeScript that uses V8 and is built-in Rust. Rust means, it is fast and secure at the same time.

Bundle Image

So how Deno will help you to ditch the things mentioned above. Let’s understand Deno a little bit. We will build a small nodejs/npm library using Deno just Deno.

Overview of library

The library we are going to build will be lodash, Our own lodash. It will have some util methods like find unique, get values by props.

Initial setup for library

Create folders and Initialize npm and git
Add basic test case and Implement the method unique
Run and test it working

1. Create a folders and Initilize npm and git

# Create a folder
md dash-lodash
md lib test

## Create files
touch test/index.js
touch lib/index.js

# Git init
git init
echo ".vscode\nnode_modules\nlib" > .gitignore

# npm init
npm init --y

If all good, You will see structure as below.

Note: If you noticed, I have added lib in .gitignore. Since we are building the TypeScript library. We will not need a compiled version of it.

2. Add basic test case and Implement method `unique`

Open file test/index.js and add below lines.

const { unique } = require("../lib");

const uniqueValues = unique([1, 2, 3, 1]);

if (uniqueValues.length === 4) throw new Error("Unique is not working");

console.log("✅ All looks good");

Open file lib/index.js and add below lines.

const unique = (arr) => arr;

module.exports = { unique };

Openpackage.json add below lines

{
  "name": "dash-lodash",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "scripts": {
    "test": "node test"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. Run and test it working

Since our npm is set now, You can run and test using npm test command. Once you run npm test, You will see error message like. Error: Unique is not working

Add below code in lib/index.js

const unique = (arr) => [...new Set(arr)];
module.exports = { unique };

Run the test again, If you see the message ✅ All looks good meaning all good to go. Your library is working.

Deno as TypeScript Runtime

Our code is already running and tested. This is good to publish in npm. However, We want to use TypeScript as a source code. Good thing, The biggest selling point for Deno is TypeScript runtime. Saying that means you can run TypeScript without any external trans-compiler. Even you don't need typescript cli. Using Deno we can run typescript and same time Deno provides tools like a bundle. We can compile typescript and convert it to JavaScript.

Prerequisite: Deno 1.1.0 and above

You can install Deno from here. installation

Let's move to TypeScript.

Create a TypeScript lodash library
Update npm scripts, add Deno test task

1. Create a TypeScript lodash library

md src
touch src/lodash.ts

Add below lines in file src/lodash.ts

export const unique = (arr: any[]) => [...new Set(arr)];

2. Update `npm scripts`, add Deno test task

Let's add a few test cases.

Since we are moving to Deno. We have to convert test cases to the TypeScript file.

touch test/lodash.test.ts

Replace content of file with below given lines.

import { assertEquals } from "https://Deno.land/std/testing/asserts.ts";
import { unique } from "../src/lodash.ts";

Deno.test("unique #1", () => {
  assertEquals(typeof unique, "function", "Unique is not defined!");
});

Deno.test("unique #2", () => {
  const uniqueValues = unique([1, 2, 3, 1]);
  assertEquals(uniqueValues.length, 3, "Unique is not working");
  assertEquals(uniqueValues, [1, 2, 3]);
  console.log("✅ All looks good");
});

Update test command in package.json

{
  // rest
  "scripts": {
    "test": "Deno test"
  }
}

Run the test again. npm test. You will see a message like test result: ok. 2 passed;

Now we have successfully moved our source code to typescript. However, If notice we cant directly consume our src/lodash.ts in nodejs. Our dash-lodash still pointing to lib/index.js. to consume this in nodejs. We need to convert typescript to JavaScript to consume in nodejs without webpack[bundler].

To convert TypeScript to JavaScript, we will use typescript CLI tool. To setup, bundler follow below given steps.

Add typescript as dev dependencies
Add tsconfig.json file
Update package.json

1. typescript as dev dependencies:

npm i -D typescript

2. Add tsconfig.json file:

{
  "compilerOptions": {
    "target": "es6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./lib",
    "moduleResolution": "node"
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/test/*"]
}

3. Update package.json:

Add bundle command in package.json

{
  // rest
  "scripts": {
    "test": "Deno test && node test",
    "bundle": "tsc"
  }
}

Run bundle command:

npm run bundle

Note: We have to update, test/index.js import/require statement. Since tsc using commonjs as a module in tsconfig.json, All the files will be compiled and converted to the same name ie. lib/lodash.js.

After update, test/index.js

const { unique } = require("../lib/lodash");

// rest of the code

Try and run again test.

npm test OR node test

Tada!! congrats you are all good to publish your nodejs-typescript module. To publish your module to npm you can follow this blog.

Some final touch TypeScript module need to define the type defination locaction. We can add meta data for that in package.json

Add below lines in package.json

{
  "name": "dash-lodash",
  "version": "1.0.0",
  "description": "\"demo deno typescript, testing bundling\"",
  "types": "lib/lodash.d.ts",
  "main": "lib/lodash.js",
  "files": ["lib/lodash.js"]
  //rest of the code
}

Once you publish your module on npm. You can use your module as below.

In NodeJS:

const { unique } = require("dash-lodash");

const uniqueValues = unique([1, 2, 3, 1]);

if (uniqueValues.length === 4) throw new Error("Unique is not working");

console.log("✅ All looks good");

In TypeScript:

import { unique } from "dash-lodash";

const uniqueValues = unique([1, 2, 3, 1]);

if (uniqueValues.length === 4) throw new Error("Unique is not working");

console.log("✅ All looks good");

For source code, You can refer to dash-lodash-deno-typescript-sample repo.

Thanks. Keep Calm, Keep Coding.

Build and Test A TypeScript library | Deno

Comments

More from this blog

5 Patterns to Write Better and Clean Code in Python

Validation in Python using Metaprogramming and Decorator- Advanced Python

Infinite scroll | Pagination on API using JavaScript Generators

How to work with Date | JavaScript Weird Parts

Internationalization in Plain React.js

Building and Testing A TypeScript/NodeJS library without WebPack, Jest or Rollup

Overview of library

Initial setup for library

1. Create a folders and Initilize npm and git

2. Add basic test case and Implement method `unique`

3. Run and test it working

Deno as TypeScript Runtime

1. Create a TypeScript lodash library

2. Update `npm scripts`, add Deno test task

Command Palette

Comments

More from this blog

Building and Testing A TypeScript/NodeJS library without WebPack, Jest or Rollup

Overview of library

Initial setup for library

1. Create a folders and Initilize npm and git

2. Add basic test case and Implement method unique

3. Run and test it working

Deno as TypeScript Runtime

1. Create a TypeScript lodash library

2. Update npm scripts, add Deno test task

2. Add basic test case and Implement method `unique`

2. Update `npm scripts`, add Deno test task