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/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};