obahareth / are-you-es5

A package to help you find out which of your node_modules aren't ES5 so you can add them to your Webpack/Rollup/Parcel transpilation steps.

👋 Hello there!

Generated via platane/snk

• 🔭 I’m currently working as Chief Technology Officer on a lot of fun stuff at Ejaro
• 🌱 I’m currently learning a lot of stuff related to AI, prompt engineering, and changing my workflow to be AI-driven
• 🤔 I’m looking for help maintaining are-you-es5
• 💬 Ask me anything!
• 👀 Check out my setup!
• ⚡ Fun fact: Most people have never seen me without a hat and goatee

Notable Projects I've Built

• notionl-rtl - Adding RTL support to Notion. Now lives on as part of Notion Enhancer
• mrsool/zatca - A full-fledged library for generating and submitting Saudi e-invoices

Games I am Currently Playing

• The Legend of Zelda: Tears of the Kingdom
• Baldur's Gate 3
• Remnant II
• Guild Wars 2

✍️ Articles and Writings

🤝 Social Media and IM

are-you-es5's Issues

Prettify CLI output

It might be a good idea to enhance the look and feel of the CLI output (perhaps with loading indicators?) and maybe make important bits (like the --no-regex-filtering option) bold. Having proper return codes is probably a good idea too.

I'm imagining this script being run in CI, so it should have friendlier output.

Switch to Acorn instead of es-check

Switch to Acorn because we won't have to rely on executing scripts and child processes, and it will make things like building a list of non-es5 deps much easier.

add NodeJS API

Using this from the command line is great, but we'd like to be able to get the regex from a node process.

Would you be able to tell us how to use this package from a node-process or would you be able to add a feature so we could?

related:
storybookjs/storybook#10725 (comment)

react-intl isn't recognized as ES6 module

After a lot of headaches, I figured out that are-you-es5 doesn't recognize react-intl as non-ES5 module.
I am using next-transpile-modules to transpile modules reported by are-you-es5 as non-ES5 but, after checking webpack chunks, I realized that they weren't 100% ES5 compliant but there was still a few of arrow functions (since arrow functions were introduced in ES6 I used their presence as a test).
After a few of trial and error, aka adding random modules to next-transpile-modules module list, I found that that arrow functions were introduced by react-intl.
After reading this thread I think that the testing method used by are-you-es5 to check whether a module is ES5 may be weak, as it (at least) doesn't check for the presence of arrow functions in the module.

Publish to npm

Automate Release Notes Generation

Currently I've been manually tagging release commits and writing the release notes in the releases section, it would be great if we could automate this somehow.

[Feature Request] Add documentation on how to use without the CLI interface

Hi,

There's a project used by researchers which lets users provide a path to custom extensions, which sometimes contain non ES5 modules. However, these paths aren't known until runtime.

nextstrain/auspice#902

These paths are added here:

https://github.com/nextstrain/auspice/blob/2bd55502cb3b5dc94088a4ace3c377ba67f2d31f/webpack.config.js#L25-L33

I'd be interested in using this library to check those paths, and having the result added to the exclude used by babel-loader. It might be possible to do this already, but I wasn't sure how to do that just from skimming the README.

Thanks for any thoughts or advice!

Maintenance Help

I have a lot going on with my life right now and I don't get enough time to maintain my repos as much as I'd like.

I'm looking for maintainers to help out in maintaining are-you-es5.

Turn project into a CLI app

The app should take a path to a folder, and look for a package.json within that folder, and then dig through the node_modules in that folder.

The regex output is incorrect

It should be round brackets, not square brackets.

Example:
/node_modules\/(?!(pretty\-bytes|query\-string|strict\-uri\-encode))/

Square brackets means a character set.

The reason square brackets appears to work is that most node_modules will get compiled even if they don't need to be.

npm install error

#Hi Omar,

first of all: Thanks for the great module, it really helps. Sadly, there seems to be something off when having are-you-es5 as a dev dependency and running npm install multiple times to pull in updates:

⇒ npm install npm ERR! path /example/node_modules/are-you-es5 npm ERR! code EISGIT npm ERR! git /example/node_modules/are-you-es5: Appears to be a git repo or submodule. npm ERR! git /example/node_modules/are-you-es5 npm ERR! git Refusing to remove it. Update manually, npm ERR! git or move it out of the way first.

Seems like you have to remove the .git folder from the published package in order to fix that behaviour.

Thanks in advance,

Fabian

PS: Similar issue on another project as a reference react-navigation/react-native-safe-area-view#69

DELETED

My account was compromised, as a result many spam issues got created across multiple repos. I am deleting all such issues. Please check my tweet: https://x.com/arghyac35/status/1729721954909684064?s=20

Exscape Scopes in Regex

When are-you-es5 finds a namespaced package that is not ES5, the resulting regex has an unescaped forward slash:

/[\\/]node_modules[\\/](?!(@react-pdf/renderer|dotenv|md5-file|pino|roboto-fontface)[\\/])/

The regex should be:

/[\\/]node_modules[\\/](?!(@react-pdf\/renderer|dotenv|md5-file|pino|roboto-fontface)[\\/])/

Thanks for making this awesome tool! :)

Don't require typing `check` into the CLI

Check scripts required by entrypoint script

Based on the issues with a couple of packages (#48, #53, #24), we need to check more than just the entry script. Right now we only check the entrypoint script, we need to check scripts required/imported by the entrypoint (up to a certain depth) to provide a more conclusive result. This is a bit difficult and I don't know how to do it in a way that works for all JavaScript engines (the different JS module formats, import vs require, etc.)

Version 2.0.1 contains "\r" in build

Release version 2.0.1 has a "\r" in ./dist/cli.js on line 1, so it cannot be executed on non-windows systems.

env: node\r: No such file or directory

Improve ES5 detection

Found a few NPMs that aren't detected:

• numbro
• strict-uri-encode

Not sure if there is a better way to do the detection?

Maybe running a linting tool?

My company still supports IE11, so grateful for a tool like this 👍

[Feature Request] Use browserslist as standard when checking

Many front-end tools (babel, autoprefixer) use a projects browserslist definition as the target browsers.

It would be great if this tool were able to tell me whether my transpiled bundles satisfy the browsers listed in my browserslist configuration.

fuse.js not recognized as non-es5

Similar to #48, arrow functions are not reported as non-es5.

https://github.com/krisk/Fuse

exit with a non-zero code on issues

Thinking through implementing this in a CI system, it would be useful if the tool found issues it exited with a non-zero code

How should this package be tested?

All the ES version checking comes from acorn, so I don't think it makes sense to do checks ourselves. Should we instead have some static copies of known ES6+ packages and simply test that the package detects that?

Build babel regexp based on dependencies

Relates to #24

In order to be 100% sure all dependencies are included in the es6Modules output, I'm assuming we need to do it in multiple steps

• Parse package.json
• Extract dependencies
• Parse yarn.lock (https://www.npmjs.com/package/@yarnpkg/lockfile) / package.lock (https://github.com/snyk/nodejs-lockfile-parser ?)
• build complete dependency list
• run as usual

WDYT ?

Should the script ignore adding babel/webpack plugins to the exclude regex by itself?

Most people would have webpack/babel-specific stuff only in devDependencies, but for folks who build on something like Heroku rather than on CI they'll probably have them in dependencies, should we exclude them from the regex output ourselves? Or should we add an option to do that.

checkAllNodeModules in Windows always will mark non-direct dependents as ignored

Hi, thanks for making useful module!

I've met unexpected behavior about checkAllNodeModules: true on Windows. When there is package.json like this:

{
  "private": true,
  "devDependencies": {
    "are-you-es5": "^2.1.0"
  },
  "dependencies": {}
}

checkAllNodeModules: true in Windows always will mark non-direct dependents as ignored.

// test.js
const { checkModules } = require('are-you-es5')

console.log(
  checkModules({
    checkAllNodeModules: true,
  })
)

It returns different in Linux and Windows by running node ./test.js.

Linux

{
  es5Modules: [ 'acorn', 'array-flatten', 'commander' ],
  es6Modules: [
    'are-you-es5',
    'find-up',
    'locate-path',
    'p-limit',
    'p-locate',
    'p-try',
    'path-exists'
  ],
  ignored: []
}

Windows

{
  es5Modules: [],
  es6Modules: [],
  ignored: [
    'ih\\Programming\\ayes5\\node_modules\\.bin',
    'ih\\Programming\\ayes5\\node_modules\\acorn',
    'ih\\Programming\\ayes5\\node_modules\\are-you-es5',
    'ih\\Programming\\ayes5\\node_modules\\array-flatten',
    'ih\\Programming\\ayes5\\node_modules\\commander',
    'ih\\Programming\\ayes5\\node_modules\\find-up',
    'ih\\Programming\\ayes5\\node_modules\\locate-path',
    'ih\\Programming\\ayes5\\node_modules\\p-limit',
    'ih\\Programming\\ayes5\\node_modules\\p-locate',
    'ih\\Programming\\ayes5\\node_modules\\p-try',
    'ih\\Programming\\ayes5\\node_modules\\path-exists'
  ]
}

add ignore list

it's probably infeasible to limit to pass in the webpack config and have the tool ignore things that are already ignored in the webpack config considering how many tools may build on the webpack config like The Vue-CLI which uses The vue.config.js which dynamically builds one. Thus, would it be feasible to add an ignore list or regexp that allows for the ignoring of node modules that might already be reflected in the webpack config?

Support checking against user-defined ES versions

Instead of just checking for ES5 specifically, we should allow users to specify an ES version and default to 5. Although if we start to do that this repository will probably need a rename.

• Come up with a new name.
• Support user-defined ES versions while defaulting to ES5.
• Publish an are-you-es5 release to NPM that displays a notice on an npm install on the rename with the new package name added, but keep existing package and all existing versions to avoid breaking anything.

support reporting libraries that have the module entrypoint

While the presence of the module entrypoint automatically suggests the libraries don't have es5, it is helpful because of the following case:

We polyfill using core-js and the "usage" mechanism. If a module has the module entrypoint we need it to be transpiled so that it is polyfilled.

if are-you-es5 had an option to return libraries that have a module entrypoint we could use that to decide if they would be transpiled.

Recursion support

For example, I installed query-string which is ES6, and some dependencies of query-string are also ES6. are-you-es5 only found query-string.

highlight.js not recognized as non-es5

Highlight v10 starts to use es6 features but it is not getting picked up by are-you-es5.

Should we rewrite the package in TypeScript?

TypeScript is getting pretty popular and a lot of JS packages are choosing to rewrite in it, I wanted an opportunity to play around with it, perhaps this package is a good place to start.