feat: transform block to attribute

Author: billypon

README.md

@@ -114,6 +114,17 @@ const Component = props => pug`          //- const Component = props => (
 `;
 ```
 
+#### Transform block to attribute
+
+```jsx
+const Component = props => pug`          //- const Component = props => (
+  Menu                                   //-   <Menu icon={<img />}>
+    button                               //-     <button />
+    block icon                           //-   </Menu>
+      img                                //- )
+`;
+```
+
 #### Interpolation
 
 If you'd prefer to use interpolation, you can. This is possible by using `${}` within your template.

src/__tests__/__snapshots__/block-attribute.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JavaScript output: transformed source code 1`] = `
+"module.exports = (
+  <menu icon=<img />>
+    <button />
+  </menu>
+);
+"
+`;
+
+exports[`html output: generated html 1`] = `
+<menu
+  icon={<img />}
+>
+  <button />
+</menu>
+`;
+
+exports[`static html output: static html 1`] = `"<menu icon=\\"[object Object]\\"><button></button></menu>"`;

src/__tests__/block-attribute.input.js

@@ -0,0 +1,6 @@
+module.exports = pug`
+  menu
+    button
+    block icon
+      img
+`;

src/__tests__/block-attribute.test.js

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

src/visitors/NamedBlock.js

@@ -0,0 +1,15 @@
+// @flow
+
+import type Context from '../context';
+import {visitJsxExpressions} from '../visitors';
+import {buildJSXFragment} from '../utils/jsx';
+
+const NamedBlockVisitor = {
+  jsx(node: Object, context: Context): JSXValue {
+    const nodes = visitJsxExpressions(node.nodes, context);
+    node.nodes = nodes.length === 1 ? nodes : [buildJSXFragment(nodes)];
+    return node;
+  },
+};
+
+export default NamedBlockVisitor;

src/visitors/Tag.js

@@ -135,13 +135,24 @@ function getAttributesAndChildren(
   attrs: Array<JSXAttribute | JSXSpreadAttribute>,
   children: Array<JSXValue>,
 } {
-  const children = getChildren(node, context);
+  let children = getChildren(node, context);
 
   if (node.attributeBlocks.length) {
     throw new Error('Attribute blocks are not yet supported in react-pug');
   }
 
   const attrs = getAttributes(node, context);
+
+  const blocks = children.filter(({type}) => type === 'NamedBlock');
+  if (blocks.length) {
+    children = children.filter(({type}) => type !== 'NamedBlock');
+    attrs.push(
+      ...blocks.map(block =>
+        t.jSXAttribute(t.jSXIdentifier(block.name), block.nodes[0]),
+      ),
+    );
+  }
+
   context.key.handleAttributes(attrs);
 
   return {attrs, children};