DEV: adds afterRender decorator (#8864)

app/assets/javascripts/discourse-common/utils/decorators.js.es6

@@ -1,6 +1,7 @@
 import handleDescriptor from "ember-addons/utils/handle-descriptor";
 import isDescriptor from "ember-addons/utils/is-descriptor";
 import extractValue from "ember-addons/utils/extract-value";
+import { schedule, next } from "@ember/runloop";
 
 export default function discourseComputedDecorator(...params) {
   // determine if user called as @discourseComputed('blah', 'blah') or @discourseComputed
@@ -13,6 +14,19 @@ export default function discourseComputedDecorator(...params) {
   }
 }
 
+export function afterRender(target, name, descriptor) {
+  const originalFunction = descriptor.value;
+  descriptor.value = function() {
+    next(() => {
+      schedule("afterRender", () => {
+        if (this.element && !this.isDestroying && !this.isDestroyed) {
+          return originalFunction.apply(this, arguments);
+        }
+      });
+    });
+  };
+}
+
 export function readOnly(target, name, desc) {
   return {
     writable: false,

test/javascripts/components/select-kit/select-kit-test-helper.js.es6

@@ -3,10 +3,12 @@ import selectKit from "helpers/select-kit-helper";
 export function testSelectKitModule(moduleName, options = {}) {
   moduleForComponent(`select-kit/${moduleName}`, {
     integration: true,
+
     beforeEach() {
       this.set("subject", selectKit());
       options.beforeEach && options.beforeEach.call(this);
     },
+
     afterEach() {
       options.afterEach && options.afterEach.call(this);
     }

test/javascripts/utils/decorators-test.js.es6

@@ -0,0 +1,49 @@
+import { afterRender } from "discourse-common/utils/decorators";
+import Component from "@ember/component";
+import componentTest from "helpers/component-test";
+
+const fooComponent = Component.extend({
+  layoutName: "foo-component",
+
+  classNames: ["foo-component"],
+
+  baz: null,
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    this.setBaz(1);
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+
+    this.setBaz(2);
+  },
+
+  @afterRender
+  setBaz(baz) {
+    this.set("baz", baz);
+  }
+});
+
+moduleForComponent("utils:decorators", { integration: true });
+
+componentTest("afterRender", {
+  template: "{{foo-component baz=baz}}",
+
+  beforeEach() {
+    this.registry.register("component:foo-component", fooComponent);
+    this.set("baz", 0);
+  },
+
+  test(assert) {
+    assert.ok(exists(document.querySelector(".foo-component")));
+    assert.equal(this.baz, 1);
+
+    this.clearRender();
+
+    assert.ok(!exists(document.querySelector(".foo-component")));
+    assert.equal(this.baz, 1);
+  }
+});