Add support for elementAttributeNameCase

remcohaszing · Mar 18, 2024 · 53b33ef · 53b33ef
1 parent bc0c028
commit 53b33ef
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 1 deletion.
diff --git a/src/rehype-mdx-code-props.ts b/src/rehype-mdx-code-props.ts
@@ -24,6 +24,16 @@ declare module 'hast' {
 }
 
 export interface RehypeMdxCodePropsOptions {
+  /**
+   * The casing to use for attribute names.
+   *
+   * This should match the `elementAttributeNameCase` value passed to MDX.
+   *
+   * @default 'react'
+   * @see https://mdxjs.com/packages/mdx/#processoroptions
+   */
+  elementAttributeNameCase?: 'html' | 'react'
+
   /**
    * The tag name to add the attributes to.
    *
@@ -36,6 +46,7 @@ export interface RehypeMdxCodePropsOptions {
  * An MDX rehype plugin for transforming markdown code meta into JSX props.
  */
 const rehypeMdxCodeProps: Plugin<[RehypeMdxCodePropsOptions?], Root> = ({
+  elementAttributeNameCase = 'react',
   tagName = 'pre'
 } = {}) => {
   if (tagName !== 'code' && tagName !== 'pre') {
@@ -94,7 +105,7 @@ const rehypeMdxCodeProps: Plugin<[RehypeMdxCodePropsOptions?], Root> = ({
           continue
         }
 
-        name = hastToReact[info.property] || info.property
+        name = (elementAttributeNameCase === 'react' && hastToReact[info.property]) || info.property
 
         if (Array.isArray(value)) {
           value = info.commaSeparated ? commas(value) : spaces(value)

diff --git a/src/test.ts b/src/test.ts
@@ -396,3 +396,67 @@ test('comma separated properties', async () => {
       '}\n'
   )
 })
+
+test('elementAttributeNameCase react', async () => {
+  const { value } = await compile('```js prop={prop}\n```\n', {
+    jsx: true,
+    rehypePlugins: [
+      () => (ast: Root) => {
+        visitParents(ast, { type: 'element', tagName: 'pre' }, (element) => {
+          element.properties.itemId = 'a'
+        })
+      },
+      rehypeMdxCodeProps
+    ]
+  })
+
+  assert.equal(
+    value,
+    '/*@jsxRuntime automatic*/\n' +
+      '/*@jsxImportSource react*/\n' +
+      'function _createMdxContent(props) {\n' +
+      '  const _components = {\n' +
+      '    code: "code",\n' +
+      '    pre: "pre",\n' +
+      '    ...props.components\n' +
+      '  };\n' +
+      '  return <_components.pre itemID="a" prop={prop}><_components.code className="language-js" /></_components.pre>;\n' +
+      '}\n' +
+      'export default function MDXContent(props = {}) {\n' +
+      '  const {wrapper: MDXLayout} = props.components || ({});\n' +
+      '  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);\n' +
+      '}\n'
+  )
+})
+
+test('elementAttributeNameCase html', async () => {
+  const { value } = await compile('```js prop={prop}\n```\n', {
+    jsx: true,
+    rehypePlugins: [
+      () => (ast: Root) => {
+        visitParents(ast, { type: 'element', tagName: 'pre' }, (element) => {
+          element.properties.itemId = 'a'
+        })
+      },
+      [rehypeMdxCodeProps, { elementAttributeNameCase: 'html' }]
+    ]
+  })
+
+  assert.equal(
+    value,
+    '/*@jsxRuntime automatic*/\n' +
+      '/*@jsxImportSource react*/\n' +
+      'function _createMdxContent(props) {\n' +
+      '  const _components = {\n' +
+      '    code: "code",\n' +
+      '    pre: "pre",\n' +
+      '    ...props.components\n' +
+      '  };\n' +
+      '  return <_components.pre itemId="a" prop={prop}><_components.code className="language-js" /></_components.pre>;\n' +
+      '}\n' +
+      'export default function MDXContent(props = {}) {\n' +
+      '  const {wrapper: MDXLayout} = props.components || ({});\n' +
+      '  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);\n' +
+      '}\n'
+  )
+})