tatsy / markdown-it-imsize

markdown-it plugin for size-specified image markups.
48 stars 93 forks source link

Make this available as pure ESM package #15

Closed onlime closed 1 year ago

onlime commented 1 year ago

I am not quite sure how this plugin could be used in a pure ESM context, so please correct me if that's already possible and let me know how it is done. I am using markdown-it-imsize as a plugin in VuePress v2:

module.exports = {
    // ...

    // Markdown extensions
    // https://v2.vuepress.vuejs.org/reference/plugin-api.html#extendsmarkdown
    extendsMarkdown: (md) => {
        md.use(require("markdown-it-imsize"));
    },
};

How could this be done without require()? It was working fine like this up to vuepress-next 2.0.0-beta.49, but this breaking change in 2.0.0-beta.50 broke it:

  • VuePress is now published as pure ESM packages

Thanks, Philip

onlime commented 1 year ago

sorry for the noise! Importing a CommonJS module into ESM is no problem, markdown-it-imsize just doesn't support any named exports. It worked like this:

import markdownItImsize from "markdown-it-imsize";

module.exports = {
    // ...

    // Markdown extensions
    // https://v2.vuepress.vuejs.org/reference/plugin-api.html#extendsmarkdown
    extendsMarkdown: (md) => {
        md.use(markdownItImsize);
    },
};

for those dummies like me, you might want to study this wonderful explanation:

CommonJS (cjs) and Modules (esm): Import compatibility