Indicating that package is ESM, not classic ES

Open
#1,776 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
45/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
documentation

Research direction

Start with CONTRIBUTING.md and review the graphics-element example linked in the issue to understand how ESM packages are currently represented. Update the contributor guidance to explain how to mark a library as ESM, with completion shown by documentation that enables the cdnjs website to generate a script tag with type="module".

Written by the indexing model from the issue text.

Description

It looks like https://github.com/cdnjs/packages/blob/master/CONTRIBUTING.md does not cover the syntax necessary to indicate whether a package is an ES module, which means that the cdnjs page for module packages will give people the wrong code to use.

For example, https://cdnjs.com/libraries/graphics-element provides people with

<script src="https://cdnjs.cloudflare.com/ajax/libs/graphics-element/1.11.1/graphics-element.js" integrity="sha512-fz6xdkeMImCEkyHV+HPpg7C9cxoqc0w9RdSzm9ufj2wjFQFz71iJvyazoM9tXRGBzN40GuNY2e5fmimRiBFoJw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

but if they put that on their page, they'll get a dev console error because the code they should have actually used is:

<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/graphics-element/1.11.1/graphics-element.js" integrity="sha512-fz6xdkeMImCEkyHV+HPpg7C9cxoqc0w9RdSzm9ufj2wjFQFz71iJvyazoM9tXRGBzN40GuNY2e5fmimRiBFoJw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

with an explicit `type="module" so that the browser can correctly load the lirbary. Can the contributor docs be updated to explain how to mark a library as ESM, so that the cdnjs website can then tap into that information and generate the correct HTML code?

(Note that the library in this example is a normal, stand-alone library that happens to be written as ES module to ensure proper scope isolation)

Dominant language
Shell
Stars
420
Forks
405
Avg merge
3d 15h
Merged PRs (30d)
3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from cdnjs/packages

All issues in cdnjs/packages

Similar issues

More Shell/Bash issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.