State Of Npm 2023: Top Old And New Packages

State Of Npm 2023: Top Old And New Packages

Β·

8 min read

This article is part of the State Of Npm 2023 series. In this series, the Sandworm team delves deep into the current state of npm, unearthing fascinating statistics and unveiling intriguing facts about the registry.

In the vast landscape of software development, one name has become synonymous with the JavaScript ecosystem: npm.

As the package manager of choice for millions of developers worldwide, npm has played a pivotal role in revolutionizing the way we build and share JavaScript code. With its expansive registry housing an ever-growing collection of packages, npm has become an indispensable tool, fueling innovation and empowering developers to create remarkable applications with ease.

In this series, the Sandworm team delves deep into the current state of npm, unearthing fascinating statistics and unveiling intriguing facts about the registry. From the sheer magnitude of packages to the most popular libraries, we'll explore the inner workings of this powerhouse that fuels the JavaScript community. Join us as we take a closer look at the state of npm and gain insights into the trends, patterns, and vibrant ecosystem that lie within.


πŸ“ˆ Package Count By Age In Years

If we include the SEO spam packages published around early 2023 and currently (Jun 23) still available in the registry, we can see that almost half of all existing packages have been created within the past 12 months.

Sandworm has detected at least 560,000 spam packages published in the past year. Considering the historic growth rate for packages, we estimate the actual number to be more realistically around 1M spam packages - or about a third of the whole registry size.

πŸ“ˆ Package Count By Last Publish Date

About 90% of packages have been updated at least once since May 2017.


πŸ“‹ Oldest Packages In The Registry

  • Only 11 of the oldest 100 packages have been deprecated or unpublished.

  • 13 of the oldest 100 packages are still active and have published new versions in the past year.

πŸ† Oldest Active Package: temp

Since sprintf is deprecated, temp is currently the oldest npm package that's still active in the registry (not deprecated or unpublished). It was created on Nov 9, 2010, and its latest version (0.9.4) has been published on Nov 10, 2020.

Temp is a package for Node.js that provides functionality for handling temporary files, directories, and streams. The package allows you to generate unique file and directory names in the system's temporary directory, set appropriate file modes, and supports the automatic removal of temporary files if requested.

const temp = require('temp');
const fs   = require('fs');
const util  = require('util');
const exec = require('child_process').exec;

// Automatically track and cleanup files at exit
temp.track();

// Fake data
let myData = "foo\nbar\nfoo\nbaz";

// Process the data (note: error handling omitted)
temp.open('myprefix', function(err, info) {
  if (!err) {
    fs.write(info.fd, myData, (err) => {
        console.log(err);
    });
    fs.close(info.fd, function(err) {
      exec("grep foo '" + info.path + "' | wc -l", function(err, stdout) {
        util.puts(stdout.trim());
      });
    });
  }
});

Most Node devs know express well: it's a popular web application framework for Node.js. It simplifies the process of building web applications and APIs by providing a set of robust features and utilities, including routing, middleware, request and response handling, templating, and static file serving.

// Import the Express module
const express = require('express');

// Create an instance of Express
const app = express();

// Define a route handler for the root URL '/'
app.get('/', (req, res) => {
  // Send a response with "Hello, World!"
  res.send('Hello, World!');
});

// Start the server and listen on port 3000
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

  • For this section, "old" means created before 2014.

Chalk is a package for Node that provides an easy way to style and colorize text in the terminal. It allows you to add various colors, styles (e.g., bold, italic), and background colors to your console output, making it more visually appealing and easier to read.

Key features and usage examples of the "chalk" module include:

  • Applying colors to text using predefined color names or RGB values. You can choose from a wide range of colors such as red, green, yellow, blue, magenta, cyan, white, and more.

  • Adding text styles such as bold, italic, underline, and strikethrough to emphasize or decorate your output.

  • Setting background colors behind the text to create visually distinct sections.

  • Composing styles by chaining the methods together to create complex styles and combinations.

  • Creating custom themes by defining your own color and style combinations for consistent styling throughout your application.

const chalk = require('chalk');

console.log(chalk.red('Error:'), chalk.bold('Something went wrong!'));
console.log(chalk.yellow.bgBlue('Warning:'), 'This action may have consequences.');
console.log(chalk.cyan.underline('Info:'), 'Please note the following details.');

Commander is a popular framework for building command-line interfaces (CLIs) in Node. It provides a set of features and utilities that simplify the process of creating robust and user-friendly command-line applications.

// Import the commander module
const { program } = require('commander');

// Define the command and option
program
  .version('1.0.0')
  .command('greet <name>')
  .description('Greet a person')
  .option('-t, --times <count>', 'Number of times to greet', parseInt)
  .action((name, options) => {
    const count = options.times || 1;
    for (let i = 0; i < count; i++) {
      console.log(`Hello, ${name}!`);
    }
  });

// Parse the command-line arguments
program.parse(process.argv);

  • For this section, "recent" means created after 2020.

Like chalk, picocolors is also a terminal text colorization library. It claims to be "the tiniest and the fastest library for terminal output formatting with ANSI colors."

With picocolors, its authors are trying to draw attention to the node_modules size problem and promote performance-first culture.

At the time of writing:

  • It has no dependencies.

  • It claims to be 14 times smaller and 2 times faster than chalk.

  • It is used by popular tools like PostCSS, SVGO, Stylelint, and Browserslist.

import pc from "picocolors"

console.log(
  pc.green(`How are ${pc.italic(`you`)} doing?`)
)

Vite is a build tool and development server that is specifically designed for modern web development workflows. It aims to provide fast and efficient development experiences by leveraging native ES modules (ESM) in browsers. Here are some key functionalities of the vite package:

  1. Lightning-fast development server, with near-instantaneous hot module replacement (HMR) and significantly faster development iterations.

  2. ES Module (ESM) Support.

  3. Dev server with HMR - changes made to your code are reflected immediately in the browser without requiring a full page reload.

  4. Fast Builds.

  5. Plugin ecosystem: TypeScript support, CSS preprocessing (e.g., PostCSS), and more.

  6. Built-in Vue.js and React support.

npm install -g create-vite
create-vite my-vue-app --template vue
cd my-vue-app
npm run dev

  • For this section, "brand new" means created in the past 12 months.

Update-browserslist-db is a simple CLI tool to update caniuse-lite with browsers DB from the Browserslist config.

Caniuse-lite is a lightweight, browser-compatibility data library that provides information about the support for web technologies across different web browsers. It is a subset of the larger caniuse dataset, which is a comprehensive resource for tracking the browser support of various web features.

Regular updates of caniuse-lite are essential for three main reasons:

  1. Keeping up with the latest browser versions and statistics: When making queries like last 2 versions or >1%, it's important to have access to the most recent browser data. If you don't update caniuse-lite, you may end up with outdated browsers in your results.

  2. Utilizing accurate browser data for reduced polyfills: Having up-to-date information about actual browser usage enables you to use fewer polyfills. This leads to smaller JavaScript and CSS files, resulting in improved website performance. By updating caniuse-lite, you ensure that the data accurately reflects the browsers in use, allowing you to optimize your code accordingly.

  3. Synchronizing version compatibility across different tools: caniuse-lite serves as a source of compatibility data for various tools. Regular updates help maintain consistency and alignment in versioning across these tools.

npx update-browserslist-db@latest

IE8 does not support Object.getOwnPropertyDescriptor on non-DOM objects. If you still need to support IE8 in one way or another, this package will simply account for IE's broken implementation.

var gOPD = require('gopd');
var assert = require('assert');

if (gOPD) {
    assert.equal(typeof gOPD, 'function', 'descriptors supported');
    // use gOPD like Object.getOwnPropertyDescriptor here
} else {
    assert.ok(!gOPD, 'descriptors not supported');
}

If you enjoyed this article, have a look at Sandworm to keep your JavaScript project safe! πŸ‘‡

Sandworm Audit is the open-source npm audit that doesn’t suck: it checks for multiple types of issues, like vulnerabilities or license compliance, it outputs SVG charts and CSVs, it can mark issues as resolved, and you can also run it in your CI to enforce security rules. Check the docs and npx @sandworm/audit@latest in your JavaScript app’s root to try it out πŸͺ±.

Β