DEV: Use scheduleOnce correctly (#8865)

* DEV: Use scheduleOnce correctly

* remove jquery usage here

app/assets/javascripts/discourse/widgets/component-connector.js.es6

@@ -10,34 +10,13 @@ export default class ComponentConnector {
   }
 
   init() {
-    const $elem = $(
-      '<div style="display: inline-flex;" class="widget-component-connector"></div>'
-    );
-    const elem = $elem[0];
-    const { opts, widget, componentName } = this;
+    const elem = document.createElement("div");
+    elem.style.display = "inline-flex";
+    elem.className = "widget-component-connector";
+    this.elem = elem;
+    scheduleOnce("afterRender", this, this.connectComponent);
 
-    scheduleOnce("afterRender", this, () => {
-      const mounted = widget._findView();
-
-      const view = widget.register
-        .lookupFactory(`component:${componentName}`)
-        .create(opts);
-
-      if (setOwner) {
-        setOwner(view, getOwner(mounted));
-      }
-
-      // component connector is not triggering didReceiveAttrs
-      // we force it for selectKit components
-      if (view.selectKit) {
-        view.didReceiveAttrs();
-      }
-
-      mounted._connected.push(view);
-      view.renderer.appendTo(view, $elem[0]);
-    });
-
-    return elem;
+    return this.elem;
   }
 
   update(prev) {
@@ -56,6 +35,27 @@ export default class ComponentConnector {
 
     return null;
   }
+
+  connectComponent() {
+    const { elem, opts, widget, componentName } = this;
+
+    const mounted = widget._findView();
+    const view = widget.register
+      .lookupFactory(`component:${componentName}`)
+      .create(opts);
+
+    if (setOwner) {
+      setOwner(view, getOwner(mounted));
+    }
+
+    // component connector is not triggering didReceiveAttrs
+    // we force it for selectKit components
+    if (view.selectKit) {
+      view.didReceiveAttrs();
+    }
+    mounted._connected.push(view);
+    view.renderer.appendTo(view, elem);
+  }
 }
 
 ComponentConnector.prototype.type = "Widget";