Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add ESM support to the build #135

Open
tony-sull opened this issue May 7, 2021 · 4 comments
Open

add ESM support to the build #135

tony-sull opened this issue May 7, 2021 · 4 comments

Comments

@tony-sull
Copy link

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
Copy link
Author

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
Copy link
Owner

hmsk commented May 8, 2021

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
Copy link
Author

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 👍

@hmsk
Copy link
Owner

hmsk commented May 16, 2021

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants