@astrojs/micromark-extension-mdx-jsx (英语)

此分叉基于 微标记/微标记-扩展-mdx-jsx 原作者提交的来文 Titus 虫类。 。 。 .

此分叉的目的是为此提供扩展的MDX/JSX语法支持 天体 网站构建工具。 如果不使用Astro,你也许应该使用原来的扩展来代替这个分叉.

语法差异

科隆斯语:) 前面是白空间开始属性名称而不是本地名称

最初的代码总是将JSX标记内部的结肠作为主名和当地名之间的分隔符来对待,即使结肠之前有白空间. 我们的forked版本开始一个属性名称而不是本地名称,如果在冒号之前有白空间的话.

这导致了以下变化:

• 语法 <input :placeholder="..."> 现在被当作一种 input 带有属性的元素 :placeholder。 。 。 .
  • 原代码是这样处理的 <input:placeholder="...">,导致一个元素命名 input:placeholder (与 placeholder 作为元素的本地名称),并由于以下意外值分配而出现语法错误 ="..."。 。 。 .
• 语法 <input disabled :placeholder="..."> 现在被当作一种 input 有两个属性的元素 disabled 财务报告和审定财务报表 :placeholder。 。 。 .
  • 原代码是这样处理的 <input disabled:placeholder="...">,导致 input 元素中只有一个属性 disabled:placeholder。 。 。 .

因此,这些阿尔卑斯山大学的例子现在可以发挥预期的作用:

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

属性名称可以从 @

原始代码不允许属性名称以 @。 我们的forked版本允许这样做.

因此,这些例子使用了AlpineJS的简写语法 x-on: 现按预期工作:

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

属性名称可以包含点 (.(中文(简体) )

原始代码不允许属性名称包含点. 我们的伪造版本允许这样.

因此,结合我们的变革 @ 要开始属性名称, 这些 AlpineJS 实例现在可以按预期操作 :

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