PERF: Use widgets to render categories in hamburger menu

Small change results in 1.3x faster on initial render, 1.7x
on subsequent renders.

app/assets/javascripts/discourse/components/hamburger-category.js.es6

@@ -1,13 +0,0 @@
-import computed from 'ember-addons/ember-computed-decorators';
-
-export default Ember.Component.extend({
-  tagName: 'li',
-  classNames: ['category-link'],
-
-  @computed('category.unreadTopics', 'category.newTopics')
-  unreadTotal(unreadTopics, newTopics) {
-    return parseInt(unreadTopics, 10) + parseInt(newTopics, 10);
-  },
-
-  showTopicCount: Ember.computed.not('currentUser')
-});

app/assets/javascripts/discourse/templates/components/hamburger-category.hbs

@@ -1,9 +0,0 @@
-{{category-link category allowUncategorized="true"}}
-
-{{#if unreadTotal}}
-  <a href={{category.url}} class='badge badge-notification'>{{unreadTotal}}</a>
-{{/if}}
-
-{{#if showTopicCount}}
-  <b class="topics-count">{{category.topic_count}}</b>
-{{/if}}

app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs

@@ -74,19 +74,7 @@
     {{plugin-outlet "site-map-links-last"}}
   {{/menu-links}}
 
-  {{#if categories}}
+  {{mount-widget widget='hamburger-categories' args=(as-hash categories=categories)}}
-    <ul class="category-links clearfix">
-      <li class='heading'>
-        {{d-link class="heading"
-                 route="discovery.categories"
-                 class="categories-link"
-                 label="filters.categories.title"}}
-      </li>
-      {{#each categories as |c|}}
-        {{hamburger-category category=c}}
-      {{/each}}
-    </ul>
-  {{/if}}
   <hr>
 
   {{#menu-links omitRule="true"}}

app/assets/javascripts/discourse/widgets/category-link.js.es6

@@ -0,0 +1,10 @@
+import RawHtml from 'discourse/widgets/raw-html';
+import { categoryBadgeHTML } from 'discourse/helpers/category-link';
+
+// Right now it's RawHTML. Eventually it should emit nodes
+export default class CategoryLink extends RawHtml {
+  constructor(attrs) {
+    attrs.html = categoryBadgeHTML(attrs.category, attrs);
+    super(attrs);
+  }
+};

app/assets/javascripts/discourse/widgets/hamburger-categories.js.es6

@@ -0,0 +1,36 @@
+import { createWidget } from 'discourse/widgets/widget';
+import { h } from 'virtual-dom';
+
+createWidget('hamburger-category', {
+  tagName: 'li.category-link',
+
+  html(c) {
+    const results = [ this.attach('category_link', { category: c, allowUncategorized: true }) ];
+
+    const unreadTotal = parseInt(c.get('unreadTopics'), 10) + parseInt(c.get('newTopics'), 10);
+    if (unreadTotal) {
+      results.push(h('a.badge.badge-notification', { attributes: { href: c.get('url') } }, unreadTotal.toString()));
+    }
+
+    if (!this.currentUser) {
+      results.push(h('b.topics-count', c.get('topic_count').toString()));
+    }
+
+    return results;
+  }
+});
+
+export default createWidget('hamburger-categories', {
+  tagName: 'ul.category-links.clearfix',
+
+  html(attrs) {
+    const href = Discourse.getURL('/categories');
+    const result = [h('li.heading',
+                      h('a.d-link.categories-link', { attributes: { href } }, I18n.t('filters.categories.title'))
+                    )];
+
+    const categories = attrs.categories;
+    if (categories.length === 0) { return; }
+    return result.concat(categories.map(c => this.attach('hamburger-category', c)));
+  }
+});