From 0c947c418d55202190c766f77556542ba6a90bc0 Mon Sep 17 00:00:00 2001
From: jamesopstad <13586373+jamesopstad@users.noreply.github.com>
Date: Thu, 19 Sep 2019 20:51:38 +0100
Subject: [PATCH 1/2] Update index.js

This aims to resolve the casing differences between hast properties and react attributes. In particular it solves issues with SVG attributes such as stroke-linecap, stroke-linejoin etc. This was discussed here - https://spectrum.chat/unified/rehype/using-an-external-parser-with-rehype-react~5d05b5d8-518a-4902-a110-bc3ec85f5666. I have attempted a generalised solution based on testing for '-' so it is possible there are exceptions that don't fit this rule.
---
 index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index e18c875..b9253d5 100644
--- a/index.js
+++ b/index.js
@@ -193,7 +193,10 @@ function addAttribute(props, prop, value, ctx) {
 
     props[subprop][info.attribute] = value
   } else {
-    props[ctx.react && info.space ? info.property : info.attribute] = value
+    const reactAttribute = info.attribute.includes('-') ? info.attribute.split('-')
+      .map((val, i) => val = i === 0 ? val : val.charAt(0).toUpperCase() + val.slice(1))
+      .join('') : info.property
+    props[ctx.react && info.space ? reactAttribute : info.attribute] = value
   }
 }
 

From d7a24140fefb8b73eb9d39287f785be977135aa5 Mon Sep 17 00:00:00 2001
From: James Opstad <13586373+jamesopstad@users.noreply.github.com>
Date: Sun, 6 Oct 2019 23:08:54 +0100
Subject: [PATCH 2/2] Imported hast-to-react to resolve casing issues with some
 React property names.

---
 index.js     | 10 ++++++----
 package.json |  2 +-
 test.js      | 41 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index b9253d5..2748c3e 100644
--- a/index.js
+++ b/index.js
@@ -3,6 +3,7 @@
 var html = require('property-information/html')
 var svg = require('property-information/svg')
 var find = require('property-information/find')
+var hastToReact = require('property-information/hast-to-react')
 var spaces = require('space-separated-tokens')
 var commas = require('comma-separated-tokens')
 var style = require('style-to-object')
@@ -193,10 +194,11 @@ function addAttribute(props, prop, value, ctx) {
 
     props[subprop][info.attribute] = value
   } else {
-    const reactAttribute = info.attribute.includes('-') ? info.attribute.split('-')
-      .map((val, i) => val = i === 0 ? val : val.charAt(0).toUpperCase() + val.slice(1))
-      .join('') : info.property
-    props[ctx.react && info.space ? reactAttribute : info.attribute] = value
+    if (ctx.react && info.space) {
+      props[hastToReact[info.property] || info.property] = value
+    } else {
+      props[info.attribute] = value
+    }
   }
 }
 
diff --git a/package.json b/package.json
index 482a745..820f4f8 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   ],
   "dependencies": {
     "comma-separated-tokens": "^1.0.0",
-    "property-information": "^5.0.0",
+    "property-information": "^5.3.0",
     "space-separated-tokens": "^1.0.0",
     "style-to-object": "^0.2.1",
     "unist-util-is": "^3.0.0",
diff --git a/test.js b/test.js
index 4504b6e..06d8538 100644
--- a/test.js
+++ b/test.js
@@ -672,6 +672,47 @@ test('hast-to-hyperscript', function(t) {
     st.end()
   })
 
+  t.test('should support mapping to React properties', function (st) {
+    var actual = toH(
+      r,
+      u(
+        'element',
+        {
+          tagName: 'svg',
+          properties: { xmlnsXLink: 'http://www.w3.org/1999/xlink' }
+        },
+        [
+          u(
+            'element',
+            {
+              tagName: 'line',
+              properties: { strokeDashArray: 4 }
+            }
+          )
+        ]
+      )
+    )
+    var expected = r(
+      'svg',
+      {
+        key: 'h-1',
+        xmlnsXlink: 'http://www.w3.org/1999/xlink'
+      },
+      [
+        r(
+          'line',
+          {
+            key: 'h-2',
+            strokeDasharray: 4
+          }
+        )
+      ]
+    )
+
+    st.deepEqual(json(actual), json(expected), 'equal syntax trees')
+    st.end()
+  })
+
   t.end()
 })