Handle shorthands in attributes correctly

.flowconfig

@@ -4,8 +4,10 @@
 [include]
 
 [libs]
-
-
 ./scripts/babel-nodes.js
 
+[lints]
+
 [options]
+
+[strict]

package.json

@@ -25,7 +25,7 @@
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-preset-forbeslindesay": "^2.1.0",
     "babel-types": "^6.24.1",
-    "flow-bin": "^0.65.0",
+    "flow-bin": "^0.66.0",
     "husky": "^0.14.3",
     "jest": "^22.1.4",
     "lint-staged": "^7.0.0",
@@ -66,4 +66,4 @@
     "type": "git",
     "url": "https://github.com/pugjs/babel-plugin-transform-react-pug.git"
   }
-}
+}

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

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

src/__tests__/attributes-shorthand.input.js

@@ -0,0 +1,13 @@
+// To prevent warnings in console from react
+const test = 10;
+
+module.exports = pug`
+  div(
+    data-first
+    data-second
+    data-positive=true
+    data-negative=false
+    data-check
+  )
+    div(data-one data-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,56 @@
+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#id.class(
+      data-string="hello" data-variable=variable
+    )
+      div(class=['one', 'two'])
+  `);
+
+  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/context.js

@@ -1,6 +1,6 @@
 // @flow
 
-import {readFileSync} from 'fs';
+import {readFileSync, existsSync} from 'fs';
 import error from 'pug-error';
 import type {Key} from './block-key';
 import {getCurrentLocation} from './babel-types';
@@ -42,12 +42,17 @@ class Context {
   }
 
   error(code: string, message: string): Error {
-    const src = readFileSync(this.file.opts.filename, 'utf8');
-    return error(code, message, {
+    const options: Object = {
       filename: this.file.opts.filename,
       line: getCurrentLocation().start.line - 1,
-      src,
-    });
+      src: null,
+    };
+
+    if (existsSync(options.filename)) {
+      options.src = readFileSync(this.file.opts.filename, 'utf8');
+    }
+
+    return error(code, message, options);
   }
 
   noKey<T>(fn: (context: Context) => T): T {

src/visitors/Tag.js

@@ -6,6 +6,14 @@ import t from '../babel-types';
 import {visitJsx, visitJsxExpressions} from '../visitors';
 import {getInterpolationRefs} from '../utils/interpolation';
 
+type PugAttribute = {
+  name: string,
+  val: string,
+  mustEscape: boolean,
+};
+
+type Attribute = JSXAttribute | JSXSpreadAttribute;
+
 /**
  * Get children nodes from the node, passing the node's
  * context to the children and generating JSX values.
@@ -27,15 +35,22 @@ function getChildren(node: Object, context: Context): Array<JSXValue> {
  * them into JSX attributes.
  * @param {Object} node - The node
  * @param {Context} context - The context
- * @returns {Array<JSXAttribute|JSXSpreadAttribute>}
+ * @returns {Array<Attribute>}
  */
-function getAttributes(
-  node: Object,
-  context: Context,
-): Array<JSXAttribute | JSXSpreadAttribute> {
-  const classes = [];
-  const attrs = node.attrs
-    .map(({name, val, mustEscape}) => {
+function getAttributes(node: Object, context: Context): Array<Attribute> {
+  const classes: Array<Object> = [];
+  const attrs: Array<Attribute> = node.attrs
+    .map((node: PugAttribute): PugAttribute => {
+      if (node.val === true) {
+        return {
+          ...node,
+          mustEscape: false,
+        };
+      }
+
+      return node;
+    })
+    .map(({name, val, mustEscape}: PugAttribute): Attribute | null => {
       if (/\.\.\./.test(name) && val === true) {
         return t.jSXSpreadAttribute(parseExpression(name.substr(3), context));
       }
@@ -54,8 +69,19 @@ 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) {
+        const isStringViaAliases: boolean =
+          t.isStringLiteral(expr) && !['className', 'id'].includes(name);
+
+        const isNotStringOrBoolean: boolean =
+          !t.isStringLiteral(expr) && !t.isBooleanLiteral(expr);
+
+        if (isStringViaAliases || isNotStringOrBoolean) {
+          throw context.error(
+            'INVALID_EXPRESSION',
+            'Unescaped attributes are not supported in react-pug',
+          );
+        }
       }
 
       if (expr == null) {
@@ -79,20 +105,22 @@ function getAttributes(
       return t.jSXAttribute(t.jSXIdentifier(name), jsxValue);
     })
     .filter(Boolean);
+
   if (classes.length) {
     const value = classes.every(cls => t.isStringLiteral(cls))
       ? t.stringLiteral(classes.map(cls => (cls: any).value).join(' '))
       : t.jSXExpressionContainer(
-        t.callExpression(
-          t.memberExpression(
-            t.arrayExpression(classes),
-            t.identifier('join'),
+          t.callExpression(
+            t.memberExpression(
+              t.arrayExpression(classes),
+              t.identifier('join'),
+            ),
+            [t.stringLiteral(' ')],
           ),
-          [t.stringLiteral(' ')],
-        ),
-      );
+        );
     attrs.push(t.jSXAttribute(t.jSXIdentifier('className'), value));
   }
+
   return attrs;
 }