hippotastic / micromark-extension-mdx-jsx

micromark extension to support MDX or MDX.js JSX

@astrojs/micromark-extension-mdx-jsx

This fork is based on micromark/micromark-extension-mdx-jsx by the original author Titus Wormer.

The purpose of this fork is to provide extended MDX/JSX syntax support for the Astro website build tool. If you're not using Astro, you should probably use the original extension instead of this fork.

Syntax differences

Colons (:) preceded by whitespace start attribute names instead of local names

The original code always treated colons inside JSX tags as a separator between a primary name and a local name, even if there was whitespace before the colon. Our forked version starts an attribute name instead of a local name if there is whitespace before the colon.

This leads to the following changes:

• The syntax <input :placeholder="..."> is now treated as an input element with an attribute named :placeholder.
  • The original code treated this like <input:placeholder="...">, resulting in an element named input:placeholder (with placeholder being the local name of the element), and a syntax error due to the following unexpected value assignment ="...".
• The syntax <input disabled :placeholder="..."> is now treated as an input element with two attributes named disabled and :placeholder.
  • The original code treated this like <input disabled:placeholder="...">, resulting in an input element with only one attribute named disabled:placeholder.

As a result, these AlpineJS examples now work as expected:

<input type="text" :placeholder="placeholder">
<input type="text" disabled :placeholder="placeholder">
<div :class="open ? '' : 'hidden'">Test</div>
<div :style="true && { color: 'red' }">Test</div>

Attribute names can start with @

The original code did not allow attribute names to start with @. Our forked version allows this.

As a result, these examples using the AlpineJS shorthand syntax for x-on: now work as expected:

<button @click="handleClick">Test</button>

Attribute names can contain dots (.)

The original code did not allow attribute names to contain dots. Our forked version allows this.

As a result, in combination with our change that allows @ to start attribute names, these AlpineJS examples now work as expected:

<button @click.once="console.log('I will only log once')">Test</button>
<input @input.debounce="fetchResults">
<input @input.debounce.500ms="fetchResults">
<div @keyup.escape.window="...">Test</div>