Code Monkey home page Code Monkey logo

npm-esm-vs-cjs's Introduction

npm-esm-vs-cjs

Build

Data on the share of ESM vs CJS on the public npm registry.

Contents

What is this?

This repository contains (historical) data on high-impact (popular) packages and what kind of code they expose:

  • ESM — such as type: 'module' in package.json
  • Dual — such as both import and require conditions in export map
  • Faux ESM — module field in package.json, supported by some old bundlers
  • CJS — anything else (except for @types/*)

When should I use this?

Use this data for rough insights on how the shift to ESM is progressing. The data isn’t perfect though.

Data

index.svg:

index.csv:

date,total,esm,dual,faux,cjs
2021-08-24,5617,341,95,832,4349
2021-11-09,5647,411,119,809,4308
2022-01-27,5686,439,149,809,4289
2022-08-01,5734,496,207,791,4240
2022-11-04,5747,518,216,785,4228
2023-02-06,6085,568,255,856,4406
2023-05-29,6240,630,417,783,4410
2023-08-24,6636,676,473,876,4611
2023-11-22,6818,734,510,881,4693

👉 Note: crawls from before 2022-11-04 use the list of popular packages on the date of 2022-11-04, as I had the results of all packages, but not which of them were popular back then. Later dates will use a list of what’s popular on that date.

👉 Note: not all of these packages are popular. There are some false-positives, such that download counts can be gamed, and that libraries.io sometimes thinks that a fork of webpack or so is actually webpack.

👉 Note: while @types/* packages are filtered out in the above counts, it is likely that there are other packages included that aren’t really code, particularly in the CJS category (as that’s the default).

Scripts

This repo includes scripts to crawl npm and analyze the results. You need a NPM_TOKEN environment variable with a token to crawl npm.

script/crawl.js analyzes the package.json files of latest releases of high-impact npm packages. After running it, please rename data/latest.json to the current date. This script finishes in about 5 minutes. You should likely first contribute to npm-high-impact, which can take like 24 hours to complete.

script/analyze.js analyzes the data files and generates SVG and CSV files from them. After running that, please copy/paste index.csv into this readme above.

Contribute

Yes please! See How to Contribute to Open Source.

Security

This package is safe.

License

MIT © Titus Wormer

npm-esm-vs-cjs's People

Contributors

wojtekmaj avatar wooorm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

wojtekmaj

npm-esm-vs-cjs's Issues

Additional metrics

First, thank you for doing this! I’ve been thinking about the problem you’re aiming to solve here, which is to measure “how the shift to ESM is progressing.” One way is certainly the way you’ve already implemented, to measure the percentage of popular published packages that are ESM. Another would be to measure the percentage of publishes that are NPM. As in, of all the times that popular library authors ran npm publish in the last week/month/few months/year, what percentage of those publishes were ESM code?

I don’t think this is necessarily a better metric that the one you’re already measuring, but I think it would be illuminating in addition to the straight registry survey. It would tell us what library authors think of the migration, in that we would be able to see how many of the popular authors have made the transition to ESM versus how many haven’t yet (or are perhaps doing both, writing CommonJS for old projects and ESM for new). The percentage of recent ESM publishes would by definition be higher than the percentage of published ESM packages, and the difference between the two numbers would give us a sense of how much the transition is accelerating over time.

You could also measure it in a few different ways. For example, always starting with the list of high-impact packages:

  • Filter out any that haven’t had a new release published within the last month (or three months or six months, whatever interval you think is best) and measure the percentages of formats for the remaining packages. This would tell us how far along the transition is among popular and active packages.

  • Fetch the list of releases for each package within the last month or three/six/etc months. For each release, measure if that release was ESM, faux ESM or CommonJS. This would give us a measure of how far along the transition is for published code, as in how much code getting published nowadays is ESM.

  • Fetch the list of releases for each package within the last year or two or three. For each release, measure if that release was ESM, faux ESM or CommonJS. Look for changes in format from one release to another. How many packages have switched from CommonJS to ESM, for example, in the last year? Were there more such switches in the last 12 months than the previous 12 months? This would tell us how much the transition is accelerating due to refactoring. How many popular packages have always been ESM? This would tell us how much the transition is accelerating due to displacement, where newer ESM-only packages are crowding out older non-ESM packages, taking their spots in the rankings.

This is a little bit like measuring voters in an electorate, where there are some swing voters who switch from voting for one party to voting for another, versus some voters leaving the electorate like via moving away or dying and other voters entering the electorate like via moving in or turning 18. Looking at publishes helps us discover trends like those, that otherwise we might not notice when the topline result doesn’t change; like if the governor of a state got reelected, but if the governor’s vote percentage went from 65% in the first election to 51% in the second, that tells us that the next election is much more likely to go to the other party than if the margin went from 51% to 65%. Along those lines, one more thing to measure is rankings:

  • Within the list of high-impact packages, what percentage of “getting more popular” libraries (packages whose rank went up, like from the 100th most popular to the 80th most popular) were ESM? In this month as compared to last month or three/six/twelve/etc months ago. This would tell us how quickly ESM packages are displacing other packages.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.