hmsk / vite-plugin-markdown

A vite plugin to import a Markdown file in various formats like Front Matter, HTML, ToC, and React/Vue Component
https://www.npmjs.com/package/vite-plugin-markdown
MIT License
260 stars 44 forks source link

add ESM support to the build #135

Open tony-sull opened 3 years ago

tony-sull commented 3 years ago

It'd be great to see ESM module support added now that it's stable in node 15.

This plugin has been super convenient on a site I'm testing SvelteKit with. They just recently switched the config file format for SvelteKit projects from commonjs to esm, I'm assuming ViteKit and others will start moving that way now that node supports it.

tony-sull commented 3 years ago

I think tsc could handle this with a separate a separate config file. If not, Rollup is the most common bundler I've seen used to output both commonjs and esm builds

hmsk commented 3 years ago

Thanks for heads-up. Just out of my curious, could you give your concrete example using ESM? The most of use-case of require/import this plugin is Node env, I think but you're playing with something new?

tony-sull commented 3 years ago

Sorry for the delay! This may very well be an unusual use case right now, I'm using the plugin with SvelteKit which is built on top of Vite.

SvelteKit uses their own svelte.config.js config file for SvelteKit itself as well as Vite's config so that's where I need to import the plugin, they recently switched their config from using commonjs to ESM modules.

I can import vite-plugin-markdown as-is like this

import viteMd from 'vite-plugin-markdown'

// used in config plugins array
viteMd.plugin({ mode: viteMd.Mode.HTML })

but ideally I'd like to be able to use a more normal import format along the lines of

import { plugin: markdown, Mode } from 'vite-plugin-markdown'

// used in config plugins array
markdown({ mode: Mode.HTML })

Local repro

I tested it out locally and I was able to update the plugin's build script to use two separate tsconfig files, one to output commonjs and one for ESM.

I can clean my local changes up and submit a PR if you're interested :+1:

hmsk commented 3 years ago

Thanks for the detail. Due to my default is always TypeScript, I didn't care about CJS ways much honestly 😂

We can write as import { plugin: markdown, Mode } from 'vite-plugin-markdown' if you're using vite.config.ts (I'm not sure svelte's config also supports config by TS tho). And even in CJS style, const { plugin, Mode } = require('vite-plugin-markdown') works.

I can clean my local changes up and submit a PR if you're interested

I appreciate your generous offer, but I'm good. I'd like to consider ideal build pipelines (leaning toward to tsup atm). So I may take more time to make this happen. See you then!