Merge pull request #15 from smooth-code/fix-various-bugs

Various fixes

Author: gregberge

.travis.yml

@@ -1,7 +1,6 @@
 language: node_js
 
 node_js:
-  - 6
   - 8
   - 10
 

package.json

@@ -12,21 +12,21 @@
     "test": "jest --runInBand"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.1",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^9.0.0",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "codecov": "^3.1.0",
-    "eslint": "^5.6.0",
+    "eslint": "^5.6.1",
     "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-config-prettier": "^3.0.1",
+    "eslint-config-prettier": "^3.1.0",
     "eslint-plugin-import": "^2.14.0",
     "jest": "^23.6.0",
-    "lerna": "^3.4.0",
-    "prettier": "^1.14.2"
+    "lerna": "^3.4.1",
+    "prettier": "^1.14.3"
   },
   "workspaces": [
     "packages/*"

packages/h2x-parse/package.json

@@ -14,6 +14,6 @@
   },
   "dependencies": {
     "h2x-types": "^1.1.0",
-    "jsdom": "^12.0.0"
+    "jsdom": ">=11.0.0"
   }
 }

packages/h2x-plugin-jsx/src/generator.js

@@ -20,9 +20,9 @@ const formatElementOpen = jsxElement => {
 const formatElementClose = jsxElement => `</${jsxElement.name}>`
 
 const formatComment = jsxComment =>
-  `{/*${jsxComment.text.replace('*/', '* /')}*/}`
+  `{/*${jsxComment.text.replace(/\*\//g, '* /')}*/}`
 
-const formatText = jsxText => jsxText.text
+const formatText = jsxText => jsxText.text.replace(/`/g, '\\`')
 
 export default {
   JSXElement: {
@@ -44,7 +44,7 @@ export default {
   JSXText: {
     enter(path, generator) {
       const trimmedText = path.node.text.trim()
-      if (trimmedText) generator.writeLine(formatText(path.node))
+      if (trimmedText) generator.writeLine(`{\`${formatText(path.node)}\`}`)
     },
   },
 }

packages/h2x-plugin-jsx/src/index.test.js

@@ -7,6 +7,11 @@ describe('transformJsx', () => {
     <?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 -->
+        <style>
+          .test {
+            fill: red;
+          }
+        </style>
         <title>Dismiss</title>
         <desc>Created with Sketch.</desc>
         <defs>
@@ -57,11 +62,16 @@ describe('transformJsx', () => {
       .toBe(`{/*?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" xmlnsXlink="http://www.w3.org/1999/xlink">
   {/*Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch*/}
+  <style>
+    {\`.test {
+            fill: red;
+          }\`}
+  </style>
   <title>
-    Dismiss
+    {\`Dismiss\`}
   </title>
   <desc>
-    Created with Sketch.
+    {\`Created with Sketch.\`}
   </desc>
   <defs>
     <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
@@ -91,4 +101,11 @@ describe('transformJsx', () => {
       `<div id="foo" style={{"fontSize":10,"lineHeight":1.2}} />`,
     )
   })
+
+  it('should handle special SVG attributes', () => {
+    const code = `<svg autoReverse="false" externalResourcesRequired="true" focusable="true" preserveAlpha="false"></svg>`
+    expect(transform(code, { plugins: [transformJsx] }).trim()).toBe(
+      '<svg autoReverse="false" externalResourcesRequired="true" focusable="true" preserveAlpha="false" />',
+    )
+  })
 })

packages/h2x-plugin-jsx/src/visitor.js

@@ -7,6 +7,8 @@ import { isNumeric, hyphenToCamelCase } from './util'
 const ATTRIBUTE_MAPPING = {
   for: 'htmlFor',
   class: 'className',
+  autoreverse: 'autoReverse',
+  externalresourcesrequired: 'externalResourcesRequired',
 }
 
 const ELEMENT_ATTRIBUTE_MAPPING = {
@@ -155,7 +157,6 @@ export default {
   HTMLElement: {
     enter(path) {
       const jsxElement = new JSXElement()
-
       jsxElement.name = transformTagName(path.node.tagName)
       jsxElement.attributes = listToArray(path.node.attributes)
       jsxElement.children = listToArray(path.node.childNodes)