Handle shorthands in attributes correctly

src/__tests__/__snapshots__/attributes-shorthand.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JavaScript output: transformed source code 1`] = `
+"'use strict';
+
+// To prevent warnings in console from react
+
+const Custom = () => null;
+const test = 10;
+
+module.exports = <Custom first-attribute={true} second-attribute={true} positive={true} negative={false} check={true}><Custom one={true} two={true} /></Custom>;"
+`;
+
+exports[`html output: generated html 1`] = `null`;
+
+exports[`static html output: static html 1`] = `""`;

src/__tests__/attributes-shorthand.input.js

@@ -0,0 +1,16 @@
+'use strict';
+
+// To prevent warnings in console from react
+const Custom = () => null
+const test = 10
+
+module.exports = pug`
+  Custom(
+    first-attribute
+    second-attribute
+    positive=true
+    negative=false
+    check
+  )
+    Custom(one two)
+`;

src/__tests__/attributes-shorthand.test.js

@@ -0,0 +1,3 @@
+import testHelper from './test-helper';
+
+testHelper(__dirname + '/attributes-shorthand.input.js');

src/__tests__/attributes-unescaped.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {transform} from 'babel-core';
+import renderer from 'react-test-renderer';
+import transformReactPug from '../';
+
+const transformationOptions = {
+  babelrc: false,
+  plugins: [transformReactPug],
+}
+
+const transformer = (code) => {
+  return transform(`pug\`${code}\``, transformationOptions).code
+}
+
+const ExpectedError = /Unescaped attributes/
+
+test('throws error when pass string', () => {
+  const wrapped = () => transformer(`
+    div(name!="hello")
+  `)
+
+  expect(wrapped).toThrowError(ExpectedError)
+})
+
+test('throws error when pass variable', () => {
+  const wrapped = () => transformer(`
+    - const variable = 'value'
+    div(name!=variable.toString())
+  `)
+
+  expect(wrapped).toThrowError(ExpectedError)
+})
+
+test('does not throw error when pass variable or just string', () => {
+  const wrapped = () => transformer(`
+    - const variable = 'value'
+    div(data-string="hello" data-variable=variable)
+  `)
+
+  expect(wrapped).not.toThrowError(ExpectedError)
+})
+
+test('does not throw error when pass boolean variables', () => {
+  const wrapped = () => transformer(`
+    div(data-first data-second data-third)
+  `)
+
+  expect(wrapped).not.toThrowError(ExpectedError)
+})

src/visitors/Tag.js

@@ -38,6 +38,16 @@ function getAttributes(
 ): Array<JSXAttribute | JSXSpreadAttribute> {
   const classes = [];
   const attrs = node.attrs
+    .map((node) => {
+      if (node.val === true) {
+        return {
+          ...node,
+          mustEscape: false,
+        }
+      }
+
+      return node
+    })
     .map(({name, val, mustEscape}) => {
       if (/\.\.\./.test(name) && val === true) {
         return t.jSXSpreadAttribute(parseExpression(name.substr(3), context));
@@ -57,8 +67,8 @@ function getAttributes(
 
       const expr = parseExpression(val === true ? 'true' : val, context);
 
-      if (!mustEscape && (!t.isStringLiteral(expr) || /(\<\>\&)/.test(val))) {
-        throw new Error('Unescaped attributes are not supported in react-pug');
+      if (!mustEscape && val !== true) {
+        throw new Error('Unescaped attributes are not supported in react-pug')
       }
 
       if (expr == null) {