💥 Introducing Skott, the new Madge!

Hello everyone, hope you’re doing well!

Today I’m very pleased to share a fun project I have been working on for several months now: skott.

skott is a tool that generates a graph of dependencies from your Node.js projects (including both ES6 and …

Hello everyone, hope you’re doing well!

Today I’m very pleased to share a fun project I have been working on for several months now: skott.

Skott

skott is a tool that generates a graph of dependencies from your Node.js projects (including both ES6 and CommonJS modules!) and helps you discover circular dependencies, cost imports, file sizes, unused imports/exports (work in progress), and many more 💥

Node.js builtin and/or npm third-party dependencies can also be configured to be added in the graph. The main goal is to reproduce the architecture of your Node.js application at the file level.

Installation and use

$ npm install skott

skott provides an API to traverse the project graph, deeply search for circular dependencies, find parents or children for a given set of nodes, etc.

Here is a quick overview of the API:

import skott from "skott";

const { 
  getStructure, 
  findCircularDependencies, 
  findParentsOf, 
  findLeaves 
} = await skott({
  /**
   * The entrypoint of the project. Must be either a CommonJS or ES6 module.
   * For now, TypeScript files are not supported as entrypoints.
   */ 
  entrypoint: "dist/index.js",
  /**
   * Define the max depth of for circular dependencies search. This can be useful 
   * for performance purposes. This defaults to POSITIVE_INFINITY.
   */
  circularMaxDepth: 5,
  /**
   * This defines whether the base directory of the entrypoint must be included
   * in all the relatives file paths.
   * For the specified `dist/index.js` above, it would consider the root path
   * to be `./` consequently `dist/` would never appear in any file paths.
   */
  includeBaseDir: false
});

skott can also be used through the CLI. Here is a quick preview of the graph generated for the fastify library, using the CLI:

Skott CLI on fastify

We can also decide to track more dependencies, for example the npm third-party dependencies (by providing the “–trackThirdPartyDependencies” option)

Skott CLI on fastify

Node.js builtin dependencies can also be tracked by providing the “–trackBuiltinDependencies” option.

File tree display

Different modes of display are available from the CLI, including file-tree which which reconstructs a directory of files from the graph which is far more concise:

Skott CLI on fastify

Circular dependencies

skott also helps finding out circular dependencies very efficiently in the project, you can even provide a max depth search to avoid deep searches that could be costly.

Skott with Circular Dependencies

Skott is fast

We can easily compare skott with madge because skott already covers most of the features madge exposes (minus the image generation).

I did some benchmarks about the computing time required to build a set of graphs from popular libraries for both skott and madge and here are the results:

Knex.js (+6O files)

knex.js A SQL query builder that is flexible, portable, and fun to use!

  • using skott takes 60ms
    knex benchmark using skott

  • using madge takes 450ms
    knex benchmark using madge

For building the entire graph of knex.js with even more metadata, skott is 7.5 times faster!

Fastify.js (30 files)

fastify.js is a fast and low overhead web framework, for Node.js

  • using skott takes 50ms

fastify benchmark using skott

  • using madge takes 350ms

fastify benchmark using madge

In this case, skott is 7 times faster than madge.

Stay tuned

Many more features will be implemented (*skott does not yet have a major version released) to help you easily discover and demystify what’s going on under the hood of your Node.js project! I’m also thinking about developing a Web Application that will help you visualize graphs and every metadata related to each file (number of imports, file size, unused imports, etc).

Sharing journey of building an open-source library

I’ll also start a series about the journey of building skott, which notably includes:

  • What is a program parser and how to use it
  • How to interpret an Abstract Syntax Tree
  • How to make all of that fully testable by using dependency injection and Test-Driven Development!

Don’t hesitate to bring stars ⭐️, issues, feedbacks directly on GitHub here as it will allow me to drive the project where it will bring the most value for each developer.

Thanks for reading this far, wish everyone a wonderful day ☀️


Print Share Comment Cite Upload Translate
APA
Antoine Coulon | Sciencx (2024-03-28T12:41:18+00:00) » 💥 Introducing Skott, the new Madge!. Retrieved from https://www.scien.cx/2022/09/12/%f0%9f%92%a5-introducing-skott-the-new-madge/.
MLA
" » 💥 Introducing Skott, the new Madge!." Antoine Coulon | Sciencx - Monday September 12, 2022, https://www.scien.cx/2022/09/12/%f0%9f%92%a5-introducing-skott-the-new-madge/
HARVARD
Antoine Coulon | Sciencx Monday September 12, 2022 » 💥 Introducing Skott, the new Madge!., viewed 2024-03-28T12:41:18+00:00,<https://www.scien.cx/2022/09/12/%f0%9f%92%a5-introducing-skott-the-new-madge/>
VANCOUVER
Antoine Coulon | Sciencx - » 💥 Introducing Skott, the new Madge!. [Internet]. [Accessed 2024-03-28T12:41:18+00:00]. Available from: https://www.scien.cx/2022/09/12/%f0%9f%92%a5-introducing-skott-the-new-madge/
CHICAGO
" » 💥 Introducing Skott, the new Madge!." Antoine Coulon | Sciencx - Accessed 2024-03-28T12:41:18+00:00. https://www.scien.cx/2022/09/12/%f0%9f%92%a5-introducing-skott-the-new-madge/
IEEE
" » 💥 Introducing Skott, the new Madge!." Antoine Coulon | Sciencx [Online]. Available: https://www.scien.cx/2022/09/12/%f0%9f%92%a5-introducing-skott-the-new-madge/. [Accessed: 2024-03-28T12:41:18+00:00]
rf:citation
» 💥 Introducing Skott, the new Madge! | Antoine Coulon | Sciencx | https://www.scien.cx/2022/09/12/%f0%9f%92%a5-introducing-skott-the-new-madge/ | 2024-03-28T12:41:18+00:00
https://github.com/addpipe/simple-recorderjs-demo