New option: "classAttribute" (#62)

* Don't track coverage by tests in watch mode

* Add the possibility to set plugin options for each test

* POC: Use plugin options to define attribute name instead of permanent className

* Improve test coverage

* Hide Flow error

* Make arguments in context key-based

* Add test case of computed class value

* Add information about new option to README

Author: ezhlobo

README.md

@@ -37,6 +37,7 @@ export default const ReactComponent = props => (
   * [Eslint integration](#eslint-integration)
   * [CSS Modules](#css-modules)
 * [Install](#install)
+  * [Configuration](#configuration)
   * [create-react-app](#create-react-app)
   * [React Native](#react-native)
 * [How it works](#how-it-works)
@@ -157,6 +158,32 @@ It's not supported well yet.
 
 3.  Now all your templates written with pug are understood by react and browsers.
 
+### Configuration
+
+| Name | Type | Default | Description
+| - | - | - | -
+| [`classAttribute`](#classattribute) | `String` | `className` | Attribute name which considered by PUG as "class"
+
+#### `classAttribute`
+
+Default:
+
+```
+pug`p.one`
+
+=>
+<p className="one" />
+```
+
+With "styleName" as value:
+
+```
+pug`p.one`
+
+=>
+<p styleName="one" />
+```
+
 ### create-react-app
 
 Integrating with [create-react-app][link to cra] is tricky because it does not allow you to modify babel configuration. There are two documented possibilities:

src/__tests__/__snapshots__/option-class-attribute.test.js.snap

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JavaScript output: transformed source code 1`] = `
+"const name = 'jack';
+
+module.exports = <div className=\\"first-a first-b\\"><p className=\\"second-a second-b second-c second-d\\" /><p styleName=\\"third-e third-f\\" className=\\"third-a third-b third-c third-d third-g third-h\\" /><p styleName=\\"fourth-a fourth-b\\" /><p className=\\"fivth-a fivth-b\\" /><p styleName=\\"two\\" className={[[\\"one\\", name].join(' ')].join(' ')} />{((_pug_nodes, _pug_arr) => {
+    if (!(_pug_arr == null || Array.isArray(_pug_arr))) throw new Error('Expected \\"[1, 2, 3]\\" to be an array because it is passed to each.');
+    if (_pug_arr == null || _pug_arr.length === 0) return undefined;
+
+    for (let _pug_index = 0; _pug_index < _pug_arr.length; _pug_index++) {
+      const item = _pug_arr[_pug_index];
+      _pug_nodes[_pug_nodes.length] = <p className={['seventh-a', 'seventh-b', \\"seventh-i-\\" + item, \\"seventh-g-\\" + item].join(' ')} key={'pug' + item + ':0'} />;
+    }
+
+    return _pug_nodes;
+  })([], [1, 2, 3])}</div>;"
+`;
+
+exports[`JavaScript output: transformed source code 2`] = `
+"const name = 'jack';
+
+module.exports = <div styleName=\\"first-a first-b\\"><p styleName=\\"second-a second-b second-c second-d\\" /><p className=\\"third-g third-h\\" styleName=\\"third-a third-b third-c third-d third-e third-f\\" /><p styleName=\\"fourth-a fourth-b\\" /><p className=\\"fivth-a fivth-b\\" /><p styleName={[[\\"one\\", name].join(' '), \\"two\\"].join(' ')} />{((_pug_nodes, _pug_arr) => {
+    if (!(_pug_arr == null || Array.isArray(_pug_arr))) throw new Error('Expected \\"[1, 2, 3]\\" to be an array because it is passed to each.');
+    if (_pug_arr == null || _pug_arr.length === 0) return undefined;
+
+    for (let _pug_index = 0; _pug_index < _pug_arr.length; _pug_index++) {
+      const item = _pug_arr[_pug_index];
+      _pug_nodes[_pug_nodes.length] = <p className={\\"seventh-g-\\" + item} styleName={['seventh-a', 'seventh-b', \\"seventh-i-\\" + item].join(' ')} key={'pug' + item + ':0'} />;
+    }
+
+    return _pug_nodes;
+  })([], [1, 2, 3])}</div>;"
+`;
+
+exports[`html output: generated html 1`] = `
+<div
+  className="first-a first-b"
+>
+  <p
+    className="second-a second-b second-c second-d"
+  />
+  <p
+    className="third-a third-b third-c third-d third-g third-h"
+    styleName="third-e third-f"
+  />
+  <p
+    styleName="fourth-a fourth-b"
+  />
+  <p
+    className="fivth-a fivth-b"
+  />
+  <p
+    className="one jack"
+    styleName="two"
+  />
+  <p
+    className="seventh-a seventh-b seventh-i-1 seventh-g-1"
+  />
+  <p
+    className="seventh-a seventh-b seventh-i-2 seventh-g-2"
+  />
+  <p
+    className="seventh-a seventh-b seventh-i-3 seventh-g-3"
+  />
+</div>
+`;
+
+exports[`html output: generated html 2`] = `
+<div
+  styleName="first-a first-b"
+>
+  <p
+    styleName="second-a second-b second-c second-d"
+  />
+  <p
+    className="third-g third-h"
+    styleName="third-a third-b third-c third-d third-e third-f"
+  />
+  <p
+    styleName="fourth-a fourth-b"
+  />
+  <p
+    className="fivth-a fivth-b"
+  />
+  <p
+    styleName="one jack two"
+  />
+  <p
+    className="seventh-g-1"
+    styleName="seventh-a seventh-b seventh-i-1"
+  />
+  <p
+    className="seventh-g-2"
+    styleName="seventh-a seventh-b seventh-i-2"
+  />
+  <p
+    className="seventh-g-3"
+    styleName="seventh-a seventh-b seventh-i-3"
+  />
+</div>
+`;
+
+exports[`static html output: static html 1`] = `"<div class=\\"first-a first-b\\"><p class=\\"second-a second-b second-c second-d\\"></p><p styleName=\\"third-e third-f\\" class=\\"third-a third-b third-c third-d third-g third-h\\"></p><p styleName=\\"fourth-a fourth-b\\"></p><p class=\\"fivth-a fivth-b\\"></p><p styleName=\\"two\\" class=\\"one jack\\"></p><p class=\\"seventh-a seventh-b seventh-i-1 seventh-g-1\\"></p><p class=\\"seventh-a seventh-b seventh-i-2 seventh-g-2\\"></p><p class=\\"seventh-a seventh-b seventh-i-3 seventh-g-3\\"></p></div>"`;
+
+exports[`static html output: static html 2`] = `"<div styleName=\\"first-a first-b\\"><p styleName=\\"second-a second-b second-c second-d\\"></p><p class=\\"third-g third-h\\" styleName=\\"third-a third-b third-c third-d third-e third-f\\"></p><p styleName=\\"fourth-a fourth-b\\"></p><p class=\\"fivth-a fivth-b\\"></p><p styleName=\\"one jack two\\"></p><p class=\\"seventh-g-1\\" styleName=\\"seventh-a seventh-b seventh-i-1\\"></p><p class=\\"seventh-g-2\\" styleName=\\"seventh-a seventh-b seventh-i-2\\"></p><p class=\\"seventh-g-3\\" styleName=\\"seventh-a seventh-b seventh-i-3\\"></p></div>"`;

src/__tests__/option-class-attribute.input.js

@@ -0,0 +1,21 @@
+const name = 'jack';
+
+module.exports = pug`
+  div.first-a.first-b
+    p.second-a.second-b(class="second-c second-d")
+    p.third-a.third-b(
+      class="third-c third-d"
+      styleName="third-e third-f"
+      className="third-g third-h"
+    )
+    p(styleName="fourth-a fourth-b")
+    p(className="fivth-a fivth-b")
+    p(class=["one", name].join(' ') styleName="two")
+
+    each item in [1, 2, 3]
+      p.seventh-a.seventh-b(
+        key=item
+        class="seventh-i-" + item
+        className="seventh-g-" + item
+      )
+`;

src/__tests__/option-class-attribute.test.js

@@ -0,0 +1,9 @@
+import testHelper, {mockConsoleErrors} from './test-helper';
+
+mockConsoleErrors();
+
+testHelper(__dirname + '/option-class-attribute.input.js');
+
+testHelper(__dirname + '/option-class-attribute.input.js', {
+  classAttribute: 'styleName',
+});

src/__tests__/test-helper.js

@@ -4,6 +4,18 @@ import renderer from 'react-test-renderer';
 import {transformFileSync} from 'babel-core';
 import transformReactPug from '../';
 
+export function mockConsoleErrors() {
+  const consoleError = console.error.bind(console);
+
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+
+  afterAll(() => {
+    console.error = consoleError;
+  });
+}
+
 export function testCompileError(filename) {
   test('Expect an error to be thrown', () => {
     try {
@@ -39,19 +51,22 @@ export function testRuntimeError(filename) {
   });
 }
 
-export default filename => {
+export default (filename, options = {}) => {
   test('JavaScript output', () => {
     expect(
       transformFileSync(filename, {
         babelrc: false,
-        plugins: [transformReactPug],
+        plugins: [[transformReactPug, options]],
       }).code,
     ).toMatchSnapshot('transformed source code');
   });
   test('html output', () => {
     const src = transformFileSync(filename, {
       babelrc: false,
-      plugins: [transformReactPug, require('babel-plugin-transform-react-jsx')],
+      plugins: [
+        [transformReactPug, options],
+        require('babel-plugin-transform-react-jsx'),
+      ],
     }).code;
     const m = {exports: {}};
     Function('React,module', src)(React, m);
@@ -62,7 +77,10 @@ export default filename => {
   test('static html output', () => {
     const src = transformFileSync(filename, {
       babelrc: false,
-      plugins: [transformReactPug, require('babel-plugin-transform-react-jsx')],
+      plugins: [
+        [transformReactPug, options],
+        require('babel-plugin-transform-react-jsx'),
+      ],
     }).code;
     const m = {exports: {}};
     Function('React,module', src)(React, m);

src/context.js

@@ -13,6 +13,10 @@ type Variable = {
   id: Identifier,
 };
 
+type Options = {
+  classAttribute: string,
+};
+
 class Context {
   key: Key;
   file: Object;
@@ -22,23 +26,27 @@ class Context {
   _nextBlockID: number = 0;
   _parent: ?Context;
   _interpolations: ?Map<string, Expression>;
+  _options: Options;
 
-  constructor(
+  constructor(params: {
     definesScope: boolean,
     key: Key,
     parent: ?Context,
     file: Object,
     path: Object,
-    interpolations: ?Map<string, Expression>,
-  ) {
-    if (!definesScope && parent) {
-      this.variablesToDeclare = parent.variablesToDeclare;
+    options: Options,
+    interpolations?: Map<string, Expression>,
+  }) {
+    if (!params.definesScope && params.parent) {
+      this.variablesToDeclare = params.parent.variablesToDeclare;
     }
-    this._parent = parent;
-    this.key = key;
-    this.file = file;
-    this.path = path;
-    this._interpolations = interpolations;
+
+    this._parent = params.parent;
+    this.key = params.key;
+    this.file = params.file;
+    this.path = params.path;
+    this._interpolations = params.interpolations;
+    this._options = params.options;
   }
 
   error(code: string, message: string): Error {
@@ -56,41 +64,49 @@ class Context {
   }
 
   noKey<T>(fn: (context: Context) => T): T {
-    const childContext = new Context(
-      false,
-      new BaseKey(),
-      this,
-      this.file,
-      this.path,
-    );
+    const childContext = new Context({
+      definesScope: false,
+      key: new BaseKey(),
+      parent: this,
+      file: this.file,
+      path: this.path,
+      options: this._options,
+    });
+
     const result = fn(childContext);
     childContext.end();
+
     return result;
   }
 
   staticBlock<T>(fn: (context: Context) => T): T {
-    const childContext = new Context(
-      false,
-      new StaticBlock(this.key, this._nextBlockID++),
-      this,
-      this.file,
-      this.path,
-    );
+    const childContext = new Context({
+      definesScope: false,
+      key: new StaticBlock(this.key, this._nextBlockID++),
+      parent: this,
+      file: this.file,
+      path: this.path,
+      options: this._options,
+    });
+
     const result = fn(childContext);
     childContext.end();
+
     return result;
   }
 
   dynamicBlock<T>(
     fn: (context: Context) => T,
   ): {result: T, variables: Array<Identifier>} {
-    const childContext = new Context(
-      true,
-      new DynamicBlock(this.key, 'src', 0),
-      this,
-      this.file,
-      this.path,
-    );
+    const childContext = new Context({
+      definesScope: true,
+      key: new DynamicBlock(this.key, 'src', 0),
+      parent: this,
+      file: this.file,
+      path: this.path,
+      options: this._options,
+    });
+
     const result = fn(childContext);
     childContext.end();
     return {result, variables: childContext.variablesToDeclare};
@@ -176,8 +192,17 @@ class Context {
     file: Object,
     path: Object,
     interpolations?: Map<string, Expression>,
+    params: {options: Options},
   ) {
-    return new Context(true, new BaseKey(), null, file, path, interpolations);
+    return new Context({
+      definesScope: true,
+      key: new BaseKey(),
+      parent: null,
+      file,
+      path,
+      options: params.options,
+      interpolations,
+    });
   }
 }