REFACTOR: {{avatar}} and {{date}} helpers in vdom templates

This is a step towards a nicer flag display under posts.

app/assets/javascripts/discourse/helpers/node.js.es6

@@ -17,6 +17,11 @@ export function dateNode(dt) {
   }
 }
 
+// TODO: Improve how helpers are registered for vdom compliation
+if (typeof Discourse !== "undefined") {
+  Discourse.__widget_helpers.dateNode = dateNode;
+}
+
 export function numberNode(num, opts) {
   opts = opts || {};
   num = parseInt(num, 10);

app/assets/javascripts/discourse/widgets/actions-summary.js.es6

@@ -1,9 +1,8 @@
 import { createWidget } from "discourse/widgets/widget";
 import { avatarFor } from "discourse/widgets/post";
-import { iconNode } from "discourse-common/lib/icon-library";
 import { h } from "virtual-dom";
-import { dateNode } from "discourse/helpers/node";
 import { userPath } from "discourse/lib/url";
+import hbs from "discourse/widgets/hbs-compiler";
 
 export function avatarAtts(user) {
   return {
@@ -156,38 +155,19 @@ createWidget("actions-summary-item", {
   }
 });
 
-createWidget("deleted-post", {
-  tagName: "div.post-action.deleted-post",
-
-  html(attrs) {
-    return [
-      iconNode("far-trash-alt"),
-      " ",
-      avatarFor.call(this, "small", {
-        template: attrs.deletedByAvatarTemplate,
-        username: attrs.deletedByUsername
-      }),
-      " ",
-      dateNode(attrs.deleted_at)
-    ];
-  }
-});
-
 export default createWidget("actions-summary", {
   tagName: "section.post-actions",
-
-  html(attrs) {
-    const actionsSummary = attrs.actionsSummary || [];
-    const body = [];
-    actionsSummary.forEach(as => {
-      body.push(this.attach("actions-summary-item", as));
-      body.push(h("div.clearfix"));
-    });
-
-    if (attrs.deleted_at) {
-      body.push(this.attach("deleted-post", attrs));
-    }
-
-    return body;
-  }
+  template: hbs`
+    {{#each attrs.actionsSummary as |as|}}
+      {{attach widget="actions-summary-item" attrs=as}}
+      <div class='clearfix'></div>
+    {{/each}}
+    {{#if attrs.deleted_at}}
+      <div class='post-action deleted-post'>
+        {{d-icon "far-trash-alt"}}
+        {{avatar size="small" template=attrs.deletedByAvatarTemplate username=attrs.deletedByUsername}}
+        {{date attrs.deleted_at}}
+      </div>
+    {{/if}}
+  `
 });

app/assets/javascripts/discourse/widgets/post.js.es6

@@ -59,6 +59,11 @@ export function avatarFor(wanted, attrs) {
   );
 }
 
+// TODO: Improve how helpers are registered for vdom compliation
+if (typeof Discourse !== "undefined") {
+  Discourse.__widget_helpers.avatar = avatarFor;
+}
+
 createWidget("select-post", {
   tagName: "div.select-posts",