Break out attribute coercion to its own package (#745)

* Break out attribute coercion to its own package

* Fix function call

* Update packages/babel-plugin-html-attributes-to-jsx/readme.md

Author: johno

packages/babel-plugin-html-attributes-to-jsx/index.js

@@ -0,0 +1,61 @@
+const styleToObject = require('style-to-object')
+const camelCaseCSS = require('camelcase-css')
+const t = require('@babel/types')
+const {paramCase: camelCase} = require('@mdx-js/util')
+
+const TRANSLATIONS = require('./translations')
+
+const propsKeysVisitor = {
+  ObjectProperty(node) {
+    if (node.node.key.extra.rawValue in TRANSLATIONS) {
+      node.node.key.value =
+        TRANSLATIONS[node.node.key.value] || node.node.key.value
+    }
+  }
+}
+
+const jsxAttributeFromHTMLAttributeVisitor = {
+  JSXAttribute(node) {
+    if (node.node.name.name in TRANSLATIONS) {
+      node.node.name.name = TRANSLATIONS[node.node.name.name]
+    } else if (node.node.name.name === `props`) {
+      node.traverse(propsKeysVisitor)
+    } else if (
+      node.node.name.name.includes(`-`) &&
+      !node.node.name.name.startsWith(`data`) &&
+      !node.node.name.name.startsWith(`aria`)
+    ) {
+      node.node.name.name = camelCase(node.node.name.name)
+    }
+
+    if (
+      node.node.name.name === `style` &&
+      node.node.value.type === `StringLiteral`
+      //      Node.node.value.type !== "JSXExpressionContainer"
+    ) {
+      let styleArray = []
+      styleToObject(node.node.value.extra.rawValue, function(name, value) {
+        styleArray.push([camelCaseCSS(name), value])
+      })
+      node.node.value = t.jSXExpressionContainer(
+        t.objectExpression(
+          styleArray.map(([key, value]) =>
+            t.objectProperty(t.stringLiteral(key), t.stringLiteral(value))
+          )
+        )
+      )
+    }
+  }
+}
+
+const babelPluginHtmlAttributesToJsx = () => {
+  return {
+    visitor: {
+      JSXElement(path) {
+        path.traverse(jsxAttributeFromHTMLAttributeVisitor)
+      }
+    }
+  }
+}
+
+module.exports = babelPluginHtmlAttributesToJsx

packages/babel-plugin-html-attributes-to-jsx/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "babel-plugin-html-attributes-to-jsx",
+  "version": "1.3.1",
+  "description": "Coerce HTML attributes into something JSX and React friendly",
+  "license": "MIT",
+  "keywords": [
+    "mdx",
+    "markdown",
+    "react",
+    "jsx",
+    "remark",
+    "babel"
+  ],
+  "homepage": "https://mdxjs.com",
+  "repository": "mdx-js/mdx",
+  "bugs": "https://github.com/mdx-js/mdx/issues",
+  "author": "Christopher Biscardi <[email protected]> (https://www.christopherbiscardi.com)",
+  "contributors": [
+    "Christopher Biscardi <[email protected]> (https://www.christopherbiscardi.com)",
+    "John Otander <[email protected]> (http://johnotander.com)"
+  ],
+  "files": [
+    "index.js",
+    "translations.js"
+  ],
+  "dependencies": {
+    "@babel/types": "^7.5.5",
+    "@mdx-js/util": "^1.3.1",
+    "camelcase-css": "^2.0.1",
+    "style-to-object": "^0.2.3"
+  },
+  "devDependencies": {
+    "@babel/core": "7.5.5",
+    "@babel/preset-react": "7.0.0",
+    "jest": "24.8.0"
+  },
+  "scripts": {
+    "test": "jest"
+  },
+  "jest": {
+    "testEnvironment": "node"
+  }
+}

packages/babel-plugin-html-attributes-to-jsx/readme.md

@@ -0,0 +1,62 @@
+# `babel-plugin-html-attributes-to-jsx`
+
+Coerce HTML attributes into something JSX and React
+friendly.  Used by [MDX](https://mdxjs.com).
+
+## Installation
+
+```sh
+yarn add babel-plugin-html-attributes-to-jsx
+```
+
+## Usage
+
+```js
+const babel = require('@babel/core')
+
+const plugin = require('babel-plugin-html-attributes-to-jsx')
+
+const jsx = `
+export const Foo = () => (
+  <div srcset="foo">
+    <Button />
+  </div>
+)
+`
+
+const plugin = new BabelPluginHtmlAttributesToJsx()
+
+const result = babel.transform(jsx, {
+  configFile: false,
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    plugin
+  ]
+})
+
+console.log(result.code)
+```
+
+### Input
+
+```js
+export const Foo = () => (
+  <div srcset="foo">
+    <Button />
+  </div>
+)
+```
+
+### Output
+
+```js
+const Foo = () => (
+  <div srcSet="foo">
+    <Button />
+  </div>
+)
+```
+
+## License
+
+MIT

packages/babel-plugin-html-attributes-to-jsx/test/index.test.js

@@ -0,0 +1,22 @@
+const babel = require('@babel/core')
+
+const plugin = require('..')
+
+const testContents = `
+<img srcset="foo" />
+`
+const expectedResults = `React.createElement("img", {
+  srcSet: "foo"
+});`
+
+describe('babel-plugin-remove-export-keywords', () => {
+  test('removes all export keywords', () => {
+    const result = babel.transform(testContents, {
+      configFile: false,
+      plugins: [plugin],
+      presets: [require('@babel/preset-react')]
+    })
+
+    expect(result.code).toEqual(expectedResults)
+  })
+})