search

awmottaz / prettier-plugin-void-html

Use the void tag syntax
https://www.npmjs.com/package/@awmottaz/prettier-plugin-void-html
MIT License
54 stars 5 forks source link

Markdown Support #2

Closed junaga closed 2 months ago

junaga commented 10 months ago

We have ./hello.md with HTML codeblocks.

Input

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

Hello, World!

Output

<!DOCTYPE html>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

Hello, World!

Expected output

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

Hello, World!

Generic usage

Maybe it's possible to support all languages with a simple config change? My frontend framework astro.build .astro single-file-components markup is also ignored by npm:@awmottaz/prettier-plugin-void-html.

If i can help, help me help you.

awmottaz commented 10 months ago

Hi! Thank you for submitting this issue. I am happy to review a PR if you want to take a shot at this. My preference would be separate PRs, one each for Markdown support and Astro support. Here's a quick sketch of what I think needs to happen to add support for additional languages:

The languages export needs additional entries for each language you want to add support for (Markdown and Astro).

Each of those need a corresponding entry in the parsers export. As you can see, this plugin is currently reusing the built-in HTML parser from Prettier. We should continue to reuse parsers for each language being supported (I don't want to be in the business of implementing our own parsers). This introduces a couple of challenges for Astro in particular, since it's not natively supported by Prettier and will require a peer dependency on the Astro plugin:

  1. We will need to test and maintain a compatibility matrix with Prettier versions and versions of the Astro plugin (and possibly versions of Astro itself?).
  2. I don't want to force a dependency on the Astro plugin for users who won't use it. So we need to use peerDependenciesMeta to mark it as optional.

The hardest part will be the printers. Each of those languages will probably need their own implementation (perhaps not Markdown, I'm not totally sure how Prettier handles embedded language formatting — something to look into!).

Please refer to the Prettier documentation for help!

I am interested in supporting this, and so eventually I could also add support myself. This is a project I work on in my limited free time, so I won't estimate any timeline. Feel free to use this issue or PRs if you have further questions.

awmottaz commented 10 months ago

Adding another comment here to clarify my response to this part of your request:

Maybe it's possible to support all languages with a simple config change?

This may be possible for embedded languages, such as your first example of HTML code blocks within Markdown. I am not sure offhand whether this plugin needs to change in order to support that. You can look here for clues: https://prettier.io/docs/en/plugins.html#optional-embed

I don't think this is possible in general for arbitrary languages. The parser is language-specific, the printer is language-specific, and even the void syntax rules are language-specific (this plugin would generate invalid JSX, for example). So in order to support Astro, we need specific language support, not a config change to "support all languages".

awmottaz commented 2 months ago

As requests for more language support have been coming in, I've decided for now that this plugin will be limited to HTML only. I will keep thinking about how to support additional languages and might expand this someday. No promises 😄

If you're willing to hack around and find out, you might have some success following the steps described in #19 .