Add support for passing props as HTML attributes

Previously, all properties from elements were passed using React casing.
This does not work, particularly for complex cases such as SVG and XML,
in any other JSX runtime.
Instead, all other JSX runtimes converge on allowing HTML casing.

This adds an option for that.

Related-to: #6.
Related-to: #7.

Author: wooorm

index.js

@@ -1,4 +1,5 @@
 /**
+ * @typedef {import('./lib/state.js').ElementAttributeNameCase} ElementAttributeNameCase
  * @typedef {import('./lib/state.js').Handle} Handle
  * @typedef {import('./lib/state.js').Options} Options
  * @typedef {import('./lib/state.js').Space} Space

lib/handlers/element.js

@@ -65,9 +65,10 @@ export function element(node, state) {
         continue
       }
 
-      prop = info.space
-        ? hastToReact[info.property] || info.property
-        : info.attribute
+      prop =
+        state.elementAttributeNameCase === 'react' && info.space
+          ? hastToReact[info.property] || info.property
+          : info.attribute
 
       if (Array.isArray(value)) {
         // Accept `array`.

lib/state.js

@@ -47,21 +47,34 @@
  * @returns {JsxChild | null | undefined | void}
  *   estree node.
  *
+ * @typedef {'react' | 'html'} ElementAttributeNameCase
+ *   Specify casing to use for attribute names.
+ *
+ *   React casing is for example `className`, `strokeLinecap`, `xmlLang`.
+ *   HTML casing is for example `class`, `stroke-linecap`, `xml:lang`.
+ *
  * @typedef Options
  *   Configuration.
+ * @property {ElementAttributeNameCase | null | undefined} [elementAttributeNameCase='react']
+ *   Casing to use for attribute names.
+ *
+ *   This casing is used for hast elements, not for embedded MDX JSX nodes
+ *   (components that someone authored manually).
+ * @property {Record<string, Handle | null | undefined> | null | undefined} [handlers={}]
+ *   Custom handlers.
  * @property {Space | null | undefined} [space='html']
  *   Which space the document is in.
  *
  *   When an `<svg>` element is found in the HTML space, this package already
  *   automatically switches to and from the SVG space when entering and exiting
  *   it.
- * @property {Record<string, Handle | null | undefined> | null | undefined} [handlers={}]
- *   Custom handlers.
  *
  * @typedef State
  *   Info passed around about the current state.
  * @property {Schema} schema
  *   Current schema.
+ * @property {ElementAttributeNameCase} elementAttributeNameCase
+ *   Casing to use for attribute names.
  * @property {Array<Comment>} comments
  *   List of estree comments.
  * @property {Array<Directive | Statement | ModuleDeclaration>} esm
@@ -117,6 +130,7 @@ export function createState(options) {
   return {
     // Current space.
     schema: options.space === 'svg' ? svg : html,
+    elementAttributeNameCase: options.elementAttributeNameCase || 'react',
     // Results.
     comments: [],
     esm: [],

readme.md

@@ -19,9 +19,10 @@
 *   [API](#api)
     *   [`toEstree(tree[, options])`](#toestreetree-options)
     *   [`defaultHandlers`](#defaulthandlers)
+    *   [`ElementAttributeNameCase`](#elementattributenamecase)
     *   [`Handle`](#handle)
     *   [`Options`](#options)
-    *   [`Space`](#space-1)
+    *   [`Space`](#space)
     *   [`State`](#state)
 *   [Types](#types)
 *   [Compatibility](#compatibility)
@@ -193,6 +194,19 @@ Default handlers for elements (`Record<string, Handle>`).
 
 Each key is a node type, each value is a [`Handle`][handle].
 
+### `ElementAttributeNameCase`
+
+Specify casing to use for attribute names (TypeScript type).
+
+React casing is for example `className`, `strokeLinecap`, `xmlLang`.
+HTML casing is for example `class`, `stroke-linecap`, `xml:lang`.
+
+###### Type
+
+```ts
+type ElementAttributeNameCase = 'react' | 'html'
+```
+
 ### `Handle`
 
 Turn a hast node into an estree node (TypeScript type).
@@ -214,23 +228,20 @@ You can also add more results to `state.esm` and `state.comments`.
 
 Configuration (TypeScript type).
 
-##### Fields
-
-###### `space`
-
-Which space the document is in ([`Space`][space], default: `'html'`).
-
-When an `<svg>` element is found in the HTML space, this package already
-automatically switches to and from the SVG space when entering and exiting
-it.
-
-###### `handlers`
-
-Object mapping node types to functions handling the corresponding nodes
-(`Record<string, Handle>`, optional).
+###### Fields
 
-Merged into the defaults.
-See [`Handle`][handle].
+*   `elementAttributeNameCase`
+    ([`ElementAttributeNameCase`][api-element-attribute-name-case], default:
+    `'react'`)
+    — specify casing to use for attribute names; this casing is used for hast
+    elements, not for embedded MDX JSX nodes (components that someone authored
+    manually)
+*   `handlers` (`Record<string, Handle>`, optional)
+    — custom handlers
+*   `space` ([`Space`][space], default: `'html'`).
+    which space the document is in; when an `<svg>` element is found in the
+    HTML space, this package already automatically switches to and from the SVG
+    space when entering and exiting it
 
 ### `Space`
 
@@ -250,6 +261,9 @@ Info passed around about the current state (TypeScript type).
 
 *   `schema` ([`Schema`][schema])
     — current schema
+*   `elementAttributeNameCase`
+    ([`ElementAttributeNameCase`][api-element-attribute-name-case])
+    — casing to use for attribute names
 *   `comments` (`Array<EstreeComment>`)
     — list of estree comments
 *   `esm` (`Array<EstreeNode>`)
@@ -271,7 +285,9 @@ Info passed around about the current state (TypeScript type).
 ## Types
 
 This package is fully typed with [TypeScript][].
-It exports the additional types [`Handle`][handle], [`Options`][options],
+It exports the additional types
+[`ElementAttributeNameCase`][api-element-attribute-name-case],
+[`Handle`][handle], [`Options`][options],
 [`Space`][space], and [`State`][state].
 
 ## Compatibility
@@ -381,7 +397,9 @@ abide by its terms.
 
 [toestree]: #toestreetree-options
 
-[space]: #space-1
+[api-element-attribute-name-case]: #elementattributenamecase
+
+[space]: #space
 
 [options]: #options
 

test.js

@@ -597,6 +597,20 @@ test('toEstree', () => {
     },
     'should ignore text line endings between table elements'
   )
+
+  assert.equal(
+    toJs(toEstree(h('#a.b.c', 'd')), {handlers: jsx}).value,
+    '<div id="a" className="b c">{"d"}</div>;\n',
+    'should use react casing for element attributes by default'
+  )
+
+  assert.equal(
+    toJs(toEstree(h('#a.b.c', 'd'), {elementAttributeNameCase: 'html'}), {
+      handlers: jsx
+    }).value,
+    '<div id="a" class="b c">{"d"}</div>;\n',
+    "should support `elementAttributeNameCase: 'html'`"
+  )
 })
 
 test('integration (babel)', () => {