ESM (ES6 module) distribution

[justinfagnani]

Describe the feature
Publish standard JS modules to npm, instead of UMD.

Why is this feature necessary?
All major browsers can load standard JS modules now, so importing this library becomes much easier.

[UziTech]

A PR would be welcome

[Martii]

Some squibbles: If I'm reading this right... if it's used in tandem with UMD (AMD+CJS) I wouldn't mind... however if marked goes JSM/ESM only and distributes on npmjs.com as a CDN only (love all these acronyms) then we'll have to reconsider. We currently use it server side and we aren't going to rely on a CDN being up or down. Already been down that road before and it's very bad. :)

[styfle]

I think we would need a build step to support this because AFAIK, detecting ESM at runtime is not possible.

I've used TypeScript + Rollup to support multiple builds with my project: copee

But there was hesitation to add TS to marked 🤔

[saragarmee]

A good way of doing this, might be to leave the IIFE version in tact, but to refactor that same IIFE into modules and classes. I've already done much of the heavy lifting locally. But I'll go ahead and fork this over in my repos to show you what I'm talking about.

[saragarmee]

Here is my version, this is just a first pass to demonstrate what I'm talking about.
https://github.com/telepathic-elements/marked
As you can see, we keep the IIFE, but it's now loading the refactored ES6 modules. I've broken everything out into .mjs files for maintainability purposes. But the usage for existing users would be the same way, while new users should be able to just

import {Marked} from 'marked/libs/marked-class.mjs'

marked = new Marked();

To get ES6 class based functionality

[styfle]

FYI, for anyone following along: work is being done in PR #1349
It would be good to get more eyes on it.

[keywan-ghadami]

just for people having trouble how to use it:
import marked from "marked";

works now fine.
I use it sucessfully in a sveltekit endpoint:

        const options = {
            mangle: false //do only use this option if you know what you are doing (it preserves email addresses in cleartext
        };
        const html = marked(page.main, options);
        page.main = html;