REFACTOR: simplifies connectors code (#10579)

REFACTOR: simplifies connectors code (#10579)

  • directly uses factoryFor to avoid having to set owner later
  • drops jquery usage
  • renames view into component as I find it more explicit
diff --git a/app/assets/javascripts/discourse/app/widgets/component-connector.js b/app/assets/javascripts/discourse/app/widgets/component-connector.js
index 4f854b3..da51317 100644
--- a/app/assets/javascripts/discourse/app/widgets/component-connector.js
+++ b/app/assets/javascripts/discourse/app/widgets/component-connector.js
@@ -1,5 +1,5 @@
 import { scheduleOnce } from "@ember/runloop";
-import { setOwner, getOwner } from "@ember/application";
+import { getOwner } from "@ember/application";
 
 export default class ComponentConnector {
   constructor(widget, componentName, opts, trackedProperties) {
@@ -40,21 +40,18 @@ export default class ComponentConnector {
     const { elem, opts, widget, componentName } = this;
 
     const mounted = widget._findView();
-    const view = widget.register
-      .lookupFactory(`component:${componentName}`)
+    const component = getOwner(mounted)
+      .factoryFor(`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();
+    if (component.selectKit) {
+      component.didReceiveAttrs();
     }
-    mounted._connected.push(view);
-    view.renderer.appendTo(view, elem);
+
+    mounted._connected.push(component);
+    component.renderer.appendTo(component, elem);
   }
 }
 
diff --git a/app/assets/javascripts/discourse/app/widgets/connector.js b/app/assets/javascripts/discourse/app/widgets/connector.js
index 99b8053..39bf68b 100644
--- a/app/assets/javascripts/discourse/app/widgets/connector.js
+++ b/app/assets/javascripts/discourse/app/widgets/connector.js
@@ -1,5 +1,5 @@
 import { next } from "@ember/runloop";
-import { setOwner, getOwner } from "@ember/application";
+import { getOwner } from "@ember/application";
 
 export default class Connector {
   constructor(widget, opts) {
@@ -8,27 +8,23 @@ export default class Connector {
   }
 
   init() {
-    const $elem = $(`<div class='widget-connector'></div>`);
-    const elem = $elem[0];
+    const elem = document.createElement("div");
+    elem.classList.add("widget-connector");
 
     const { opts, widget } = this;
     next(() => {
       const mounted = widget._findView();
 
       if (opts.component) {
-        const connector = widget.register.lookupFactory(
-          "component:connector-container"
-        );
-
-        const view = connector.create({
-          layoutName: `components/${opts.component}`,
-          model: widget.findAncestorModel()
-        });
-
-        setOwner(view, getOwner(mounted));
-
-        mounted._connected.push(view);
-        view.renderer.appendTo(view, $elem[0]);
+        const component = getOwner(mounted)
+          .factoryFor("component:connector-container")
+          .create({
+            layoutName: `components/${opts.component}`,
+            model: widget.findAncestorModel()
+          });
+
+        mounted._connected.push(component);
+        component.renderer.appendTo(component, elem);
       }
     });
 

GitHub sha: c6e336b5

This commit appears in #10579 which was approved by CvX and eviltrout. It was merged by jjaffeux.