@astrojs/micromark-extension-mdx-jsx/readme.md

Less strict version of micromark-extension-mdx-jsx.

# [**@astrojs/micromark-extension-mdx-jsx**](https://github.com/astrojs/micromark-extension-mdx-jsx)

This fork is based on [micromark/micromark-extension-mdx-jsx](https://github.com/micromark/micromark-extension-mdx-jsx) by the original author [Titus Wormer](https://wooorm.com).

The purpose of this fork is to provide extended MDX/JSX syntax support for the [Astro](https://github.com/withastro/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:

```md
<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:

```md
<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:

```md
<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>
```