DEV Community

Discussion on: Introducing mdjs - interactive demos everywhere

Collapse
 
whoisryosuke profile image
Ryosuke

Interesting concept. Digging the simplicity of the execution, thoughtfulness towards backwards (and code editor) compatibility, lots of cool stuff going on.

Been working with MDX a lot myself, big fan of the syntax and how easy it makes including components (or straight up JS). The limitation I see with this method vs MDX is the inability to beat Markdown inside components. With this method, you essentially “eject” to HTML, which can be tricky for those looking for simpler authoring experiences.

Collapse
 
dakmor profile image
Thomas Allmer Open Web Components • Edited

The limitation I see with this method vs MDX is the inability to beat Markdown inside components.

I can't really follow 🙈what does "beat Markdown inside components" mean? care to elaborate 🤗
The only guess I have is that you mean it does not support jsx? if so yes that is currently true - although if needed we could introduce a jsx story which could support it 🤔

Collapse
 
whoisryosuke profile image
Ryosuke

Oops. Meant “Write” 😅 phone autocorrected I guess.

For example, I do this in MDX projects all the time:

<PageLayout>

# Markdown being parsed inside JSX

Let’s me use components inline, as well as containers for content, while retaining the MD syntax for simpler authoring without writing excessive `<p>` tags 👌

</PageLayout>

Should work the same with Web Components if they have slots?

Thread Thread
 
dakmor profile image
Thomas Allmer Open Web Components

markdown supported usage of HTML right from the start 👍

we use details/summary a lot like this

<details>
<summary>Example config</summary>

## Details for the config
Some text

</details>
Enter fullscreen mode Exit fullscreen mode

and as web components are "normal" html tags they will work just fine as well 👍
e.g. you could do

<my-details>
<my-summary>Example config</my-summary>

## Details for the config
Some text

</my-details>
Enter fullscreen mode Exit fullscreen mode

to bring in your design/ux/animations/...