fix(hast-util-to-babel-ast): correctly transforms data & aria attributes

Closes #221

package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@babel/cli": "^7.1.2",
     "@babel/core": "^7.1.2",
+    "@babel/generator": "^7.1.5",
     "@babel/node": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
@@ -32,6 +33,9 @@
     "eslint-plugin-import": "^2.14.0",
     "jest": "^23.6.0",
     "lerna": "^3.4.3",
-    "react": "^16.6.0"
+    "react": "^16.6.0",
+    "rehype-parse": "^5.0.0",
+    "unified": "^7.0.1",
+    "vfile": "^3.0.1"
   }
 }

packages/hast-util-to-babel-ast/src/__snapshots__/index.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hast-util-to-babel-ast should correctly transform svg 1`] = `
+"<svg width=\\"88px\\" height=\\"88px\\" viewBox=\\"0 0 88 88\\" version={1.1} xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\">{
+    /* Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch */
+  }<title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;"
+`;

packages/hast-util-to-babel-ast/src/getAttributes.js

@@ -1,9 +1,13 @@
 import * as t from '@babel/types'
-import { isNumeric } from './util'
+import { isNumeric, kebabCase } from './util'
 import stringToObjectStyle from './stringToObjectStyle'
 import { ATTRIBUTE_MAPPING, ELEMENT_ATTRIBUTE_MAPPING } from './mappings'
 
 function getKey(key, value, node) {
+  const kebabKey = kebabCase(key)
+  if (kebabKey.startsWith('aria-') || kebabKey.startsWith('data-')) {
+    return t.jsxIdentifier(kebabKey)
+  }
   const lowerCaseKey = key.toLowerCase()
   const mappedElementAttribute =
     ELEMENT_ATTRIBUTE_MAPPING[node.name] &&

packages/hast-util-to-babel-ast/src/index.test.js

@@ -0,0 +1,57 @@
+import unified from 'unified'
+import parse from 'rehype-parse'
+import vfile from 'vfile'
+import generate from '@babel/generator'
+import hastToBabelAst from './index'
+
+function transform(code) {
+  const hastTree = unified()
+    .use(parse, {
+      fragment: true,
+      space: 'svg',
+      emitParseErrors: true,
+      duplicateAttribute: false,
+    })
+    .parse(vfile({ path: 'test.svg', contents: code }))
+
+  const babelTree = hastToBabelAst(hastTree)
+
+  const { code: generatedCode } = generate(babelTree)
+
+  return generatedCode
+}
+
+describe('hast-util-to-babel-ast', () => {
+  it('should correctly transform svg', () => {
+    const code = `
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Dismiss</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="Dismiss" stroke="#063855" stroke-width="2">
+            <path d="M51,37 L37,51" id="Shape"></path>
+            <path d="M51,51 L37,37" id="Shape"></path>
+        </g>
+    </g>
+</svg>
+`
+    expect(transform(code)).toMatchSnapshot()
+  })
+
+  it('should correctly transform aria-x', () => {
+    const code = `<svg aria-hidden="true"></svg>`
+    expect(transform(code)).toMatchInlineSnapshot(
+      `"<svg aria-hidden=\\"true\\" />;"`,
+    )
+  })
+
+  it('should correctly transform data-x', () => {
+    const code = `<svg data-hidden="true"></svg>`
+    expect(transform(code)).toMatchInlineSnapshot(
+      `"<svg data-hidden=\\"true\\" />;"`,
+    )
+  })
+})

packages/hast-util-to-babel-ast/src/util.js

@@ -31,3 +31,9 @@ export function trimEnd(haystack, needle) {
     ? haystack.slice(0, -needle.length)
     : haystack
 }
+
+const KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g
+
+export function kebabCase(str) {
+  return str.replace(KEBAB_REGEX, match => `-${match.toLowerCase()}`)
+}

yarn.lock

@@ -57,6 +57,17 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.1.5":
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.5.tgz#615f064d13d95f8f9157c7261f68eddf32ec15b3"
+  integrity sha512-IO31r62xfMI+wBJVmgx0JR9ZOHty8HkoYpQAjRWUGG9vykBTlGHdArZ8zoFtpUu2gs17K7qTl/TtPpiSi6t+MA==
+  dependencies:
+    "@babel/types" "^7.1.5"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -719,6 +730,15 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.1.5":
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.5.tgz#12fe64e91a431234b7017b4227a78cc0eec4e081"
+  integrity sha512-sJeqa/d9eM/bax8Ivg+fXF7FpN3E/ZmTrWbkk6r+g7biVYfALMnLin4dKijsaqEhpd2xvOGfQTkQkD31YCVV4A==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
 "@lerna/add@^3.4.1":
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.4.1.tgz#d41068317e30f530df48220d256b5e79690b1877"