inline extra elements

pub/tree/src/js/components/BodyComponent.coffee

@@ -4,13 +4,20 @@ query      = require './Async.coffee'
 reactify   = require './Reactify.coffee'
 
 recl   = React.createClass
+rele   = React.createElement
 {div,p,img,a}  = React.DOM
 
-extras = 
-  footer: recl
-    displayName: "Footer"
+extras =
+  spam: recl
+    displayName:"Spam"
     render: ->
-      (div {className:"footer"}, (p {}, "This page was served by Urbit."))
+      if document.location.hostname isnt 'urbit.org'
+        return (div {})
+      (div {className:'spam'},
+        (a {href:"http://urbit.org#sign-up"}, "Sign up")
+        " for an Urbit invite."
+      )
+
   logo: recl 
     displayName:"Logo"
     render: ->
@@ -21,15 +28,6 @@ extras =
        (img {src,className:"logo"})
       )
 
-  spam: recl
-    displayName:"Spam"
-    render: ->
-      if document.location.hostname isnt 'urbit.org'
-        return (div {})
-      (div {className:'spam'},
-        (a {href:"http://urbit.org#sign-up"}, "Sign up")
-        " for an Urbit invite."
-      )
 
   next: query {
     path:'t'
@@ -55,6 +53,10 @@ extras =
               (a {href:"#{@props.path}/#{next.name}"}, "Next: #{next.meta.title}")
             ])
       return (div {},"")
+  footer: recl
+    displayName: "Footer"
+    render: ->
+      (div {className:"footer"}, (p {}, "This page was served by Urbit."))
 
 module.exports = query {
   body:'r'
@@ -65,21 +67,18 @@ module.exports = query {
 }, recl
   displayName: "Body"
   render: -> 
-    className = (@props.meta.layout?.replace /,/g," ") || ""
-    body = [reactify @props.body, "body"]
-    
-    extra = (name,pos,props={})=> 
-      props.key = name
-      if @props.meta[name]?
-        body[pos] React.createElement extras[name], props
-    extra 'spam', 'unshift'
-    extra 'logo', 'unshift', color: @props.meta.logo
-    extra 'next', 'push', {dataPath:@props.sein,curr:@props.name}
-    extra 'footer', 'push'
+    className = clas (@props.meta.layout?.split ',')    
+    extra = (name,props={})=> 
+      if @props.meta[name]? then React.createElement extras[name], props
     
     (div {
         id:'body',
         key:"body"+@props.path
         className
-        }, 
-      body)
+        },
+      extra 'spam'
+      extra 'logo', color: @props.meta.logo
+      reactify @props.body
+      extra 'next', {dataPath:@props.sein,curr:@props.name}
+      extra 'footer'
+    )

pub/tree/src/js/main.js

@@ -428,7 +428,7 @@ module.exports = function(queries, Child, load) {
 
 
 },{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":21,"./LoadComponent.coffee":10}],4:[function(require,module,exports){
-var a, clas, div, extras, img, p, query, reactify, recl, ref;
+var a, clas, div, extras, img, p, query, reactify, recl, ref, rele;
 
 clas = require('classnames');
 
@@ -438,15 +438,22 @@ reactify = require('./Reactify.coffee');
 
 recl = React.createClass;
 
+rele = React.createElement;
+
 ref = React.DOM, div = ref.div, p = ref.p, img = ref.img, a = ref.a;
 
 extras = {
-  footer: recl({
-    displayName: "Footer",
+  spam: recl({
+    displayName: "Spam",
     render: function() {
+      if (document.location.hostname !== 'urbit.org') {
+        return div({});
+      }
       return div({
-        className: "footer"
-      }, p({}, "This page was served by Urbit."));
+        className: 'spam'
+      }, a({
+        href: "http://urbit.org#sign-up"
+      }, "Sign up"), " for an Urbit invite.");
     }
   }),
   logo: recl({
@@ -468,19 +475,6 @@ extras = {
       }));
     }
   }),
-  spam: recl({
-    displayName: "Spam",
-    render: function() {
-      if (document.location.hostname !== 'urbit.org') {
-        return div({});
-      }
-      return div({
-        className: 'spam'
-      }, a({
-        href: "http://urbit.org#sign-up"
-      }, "Sign up"), " for an Urbit invite.");
-    }
-  }),
   next: query({
     path: 't',
     kids: {
@@ -516,7 +510,15 @@ extras = {
       }
       return div({}, "");
     }
-  }))
+  })),
+  footer: recl({
+    displayName: "Footer",
+    render: function() {
+      return div({
+        className: "footer"
+      }, p({}, "This page was served by Urbit."));
+    }
+  })
 };
 
 module.exports = query({
@@ -528,34 +530,28 @@ module.exports = query({
 }, recl({
   displayName: "Body",
   render: function() {
-    var body, className, extra, ref1;
-    className = ((ref1 = this.props.meta.layout) != null ? ref1.replace(/,/g, " ") : void 0) || "";
-    body = [reactify(this.props.body, "body")];
+    var className, extra, ref1;
+    className = clas((ref1 = this.props.meta.layout) != null ? ref1.split(',') : void 0);
     extra = (function(_this) {
-      return function(name, pos, props) {
+      return function(name, props) {
         if (props == null) {
           props = {};
         }
-        props.key = name;
         if (_this.props.meta[name] != null) {
-          return body[pos](React.createElement(extras[name], props));
+          return React.createElement(extras[name], props);
         }
       };
     })(this);
-    extra('spam', 'unshift');
-    extra('logo', 'unshift', {
-      color: this.props.meta.logo
-    });
-    extra('next', 'push', {
-      dataPath: this.props.sein,
-      curr: this.props.name
-    });
-    extra('footer', 'push');
     return div({
       id: 'body',
       key: "body" + this.props.path,
       className: className
-    }, body);
+    }, extra('spam'), extra('logo', {
+      color: this.props.meta.logo
+    }), reactify(this.props.body), extra('next', {
+      dataPath: this.props.sein,
+      curr: this.props.name
+    }), extra('footer'));
   }
 }));