Refactor component API a bit

js/forum/src/components/comment-post.js

@@ -52,7 +52,7 @@ export default class CommentPost extends Post {
     var post = this.props.post;
     var props = {post};
 
-    items.add('user', this.postHeaderUser.view(), {first: true});
+    items.add('user', this.postHeaderUser.render(), {first: true});
     items.add('meta', PostHeaderMeta.component(props));
 
     if (post.isEdited() && !post.isHidden()) {

js/forum/src/components/composer-body.js

@@ -25,20 +25,16 @@ export default class ComposerBody extends Component {
   view(className) {
     this.editor.props.disabled = this.loading() || !this.ready();
 
-    return m('div', {className, config: this.onload.bind(this)}, [
+    return m('div', {className}, [
       avatar(this.props.user, {className: 'composer-avatar'}),
       m('div.composer-body', [
         m('ul.composer-header', listItems(this.headerItems().toArray())),
-        m('div.composer-editor', this.editor.view())
+        m('div.composer-editor', this.editor.render())
       ]),
       LoadingIndicator.component({className: 'composer-loading'+(this.loading() ? ' active' : '')})
     ]);
   }
 
-  onload(element) {
-    this.element(element);
-  }
-
   focus() {
     this.ready(true);
     m.redraw(true);

js/forum/src/components/composer.js

@@ -41,7 +41,7 @@ class Composer extends Component {
       m('ul.composer-controls', listItems(this.controlItems().toArray())),
       m('div.composer-content', {onclick: () => {
         if (this.position() === Composer.PositionEnum.MINIMIZED) this.show();
-      }}, this.component ? this.component.view() : '')
+      }}, this.component ? this.component.render() : '')
     ]);
   }
 
@@ -141,7 +141,7 @@ class Composer extends Component {
     }
   }
 
-  render(anchorToBottom) {
+  update(anchorToBottom) {
     var $composer = this.$().stop(true);
     var oldHeight = $composer.is(':visible') ? $composer.outerHeight() : 0;
 
@@ -235,12 +235,12 @@ class Composer extends Component {
     if ([Composer.PositionEnum.MINIMIZED, Composer.PositionEnum.HIDDEN].indexOf(this.position()) !== -1) {
       this.position(Composer.PositionEnum.NORMAL);
     }
-    this.render(anchorToBottom);
+    this.update(anchorToBottom);
   }
 
   hide() {
     this.position(Composer.PositionEnum.HIDDEN);
-    this.render();
+    this.update();
   }
 
   close() {
@@ -252,21 +252,21 @@ class Composer extends Component {
   minimize() {
     if (this.position() !== Composer.PositionEnum.HIDDEN) {
       this.position(Composer.PositionEnum.MINIMIZED);
-      this.render();
+      this.update();
     }
   }
 
   fullScreen() {
     if (this.position() !== Composer.PositionEnum.HIDDEN) {
       this.position(Composer.PositionEnum.FULLSCREEN);
-      this.render();
+      this.update();
     }
   }
 
   exitFullScreen() {
     if (this.position() === Composer.PositionEnum.FULLSCREEN) {
       this.position(Composer.PositionEnum.NORMAL);
-      this.render();
+      this.update();
     }
   }
 

js/forum/src/components/discussion-page.js

@@ -152,14 +152,14 @@ export default class DiscussionPage extends mixin(Component, evented) {
     var discussion = this.discussion();
 
     return m('div', {config: this.onload.bind(this)}, [
-      app.cache.discussionList ? m('div.index-area.paned', {config: this.configIndex.bind(this)}, app.cache.discussionList.view()) : '',
+      app.cache.discussionList ? m('div.index-area.paned', {config: this.configIndex.bind(this)}, app.cache.discussionList.render()) : '',
       m('div.discussion-area', discussion ? [
         DiscussionHero.component({discussion}),
         m('div.container', [
           m('nav.discussion-nav', [
             m('ul', listItems(this.sidebarItems().toArray()))
           ]),
-          this.stream.view()
+          this.stream.render()
         ])
       ] : LoadingIndicator.component({className: 'loading-indicator-block'}))
     ]);

js/forum/src/components/header-secondary.js

@@ -16,7 +16,7 @@ export default class HeaderSecondary extends Component {
   items() {
     var items = new ItemList();
 
-    items.add('search', app.search.view());
+    items.add('search', app.search.render());
 
     if (app.session.user()) {
       items.add('notifications', UserNotifications.component({ user: app.session.user() }))

js/forum/src/components/index-page.js

@@ -74,7 +74,7 @@ export default class IndexPage extends Component {
             m('ul.index-toolbar-view', listItems(this.viewItems().toArray())),
             m('ul.index-toolbar-action', listItems(this.actionItems().toArray()))
           ]),
-          app.cache.discussionList.view()
+          app.cache.discussionList.render()
         ])
       ])
     ]);

js/forum/src/components/notification-grid.js

@@ -43,7 +43,7 @@ export default class NotificationGrid extends Component {
             m('td.toggle-group', {onclick: this.toggleType.bind(this, type.name)}, type.label),
             this.methods.map(method => {
               var key = this.key(type.name, method.name);
-              return m('td.yesno-cell', this.inputs[key].view());
+              return m('td.yesno-cell', this.inputs[key].render());
             })
           ]))
         ])

js/lib/component.js

@@ -22,6 +22,22 @@ export default class Component {
     //
   }
 
+  render() {
+    var vdom = this.view();
+    vdom.attrs = vdom.attrs || {};
+
+    if (!vdom.attrs.config) {
+      var component = this;
+      vdom.attrs.config = function() {
+        var args = [].slice.apply(arguments);
+        component.element(args[0]);
+        component.config.apply(component, args);
+      };
+    }
+
+    return vdom;
+  }
+
   /**
 
    */
@@ -32,18 +48,7 @@ export default class Component {
     }
     var view = function(component) {
       component.props = props;
-      var vdom = component.view();
+      return component.render();
-      vdom.attrs = vdom.attrs || {};
-
-      if (!vdom.attrs.config) {
-        vdom.attrs.config = function() {
-          var args = [].slice.apply(arguments);
-          component.element(args[0]);
-          component.config.apply(component, args);
-        };
-      }
-
-      return vdom;
     };
     view.$original = this.prototype.view;
     var output = {

js/lib/components/modal.js

@@ -2,7 +2,7 @@ import Component from 'flarum/component';
 
 export default class Modal extends Component {
   view() {
-    return m('div.modal.fade', {config: this.onload.bind(this)}, this.component && this.component.view())
+    return m('div.modal.fade', {config: this.onload.bind(this)}, this.component && this.component.render())
   }
 
   onload(element, isInitialized) {