Versuch, Glimmer anzuhängen, schlägt mit Fehler fehl

merefield · 17. April 2024 um 08:47

Ich arbeite an einem PR für das Poll-Plugin.

Ich versuche, eine Glimmer-Komponente als Widget-Baum-Blatt zu rendern, wie ich es schon oft getan habe, aber ich bekomme diesen seltsamen Fehler, den ich noch nie zuvor gesehen habe:

TypeError: this.parentMountWidgetComponent is undefined

der in dieser Zeile ausgelöst wird:

github.com/discourse/discourse

app/assets/javascripts/discourse/app/widgets/render-glimmer.js

df373d90f


      
            setComponentTemplate(template, component);
          
            this._componentInfo = {
              element,
              component,
              @tracked data: this.data,
              setWrapperElementAttrs: (attrs) =>
                this.updateElementAttrs(element, attrs),
            };
          
            this.parentMountWidgetComponent.mountChildComponent(this._componentInfo);
          }
          
          updateElementAttrs(element, attrs) {
            for (let [key, value] of Object.entries(attrs)) {
              if (key === "class") {
                value = [element[INITIAL_CLASSES], value].filter(Boolean).join(" ");
              }
          
              if ([null, undefined].includes(value)) {
                element.removeAttribute(key);

Es scheint, dass this.widget?._findView() || this._emberView

undefined ist.

(this.widget existiert)

github.com/discourse/discourse

app/assets/javascripts/discourse/app/widgets/render-glimmer.js

df373d90f


      
          
                if ([null, undefined].includes(value)) {
                  element.removeAttribute(key);
                } else {
                  element.setAttribute(key, value);
                }
              }
            }
          
            get parentMountWidgetComponent() {
              return this.widget?._findView() || this._emberView;
            }
          }
          
          RenderGlimmer.prototype.type = "Widget";
          
          /**
           * Define a widget shim which renders a Glimmer template. Designed for incrementally migrating
           * a widget-based UI to Glimmer. Widget attrs will be made available to your template at `@data`.
           * For more details, see documentation for the RenderGlimmer class.
           * @param name - the widget's name (which can then be used in `.attach` elsewhere)

Mein Code im sehr frühen Stadium ist hier:

github.com/merefield/discourse

plugins/poll/assets/javascripts/discourse/widgets/discourse-poll.js

04ff184ce


      
              }
            },
          });
          
          createWidget("discourse-poll-option-dropdown", {
            tagName: "div.irv-dropdown",
            buildKey: (attrs) => `discourse-poll-option-dropdown-${attrs.option.id}`,
          
            html(attrs) {
              return [
                new RenderGlimmer(
                  this,
                  "div.irv-dropdown-content",
                  hbsCli`<DropdownSelectBox @value={{@data.value}} @content={{data.content}} @onChange={{action (mut data.selectRank)}} @options={{hash showCaret=false filterable=false none="poll.options.irv.abstain" }} class="poll-option-dropdown"/>`,
                  {
                    ...attrs,
                    value: 0 || "poll.options.irv.abstain", //option.value
                    content: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                    selectRank: this.selectRank.bind(this),
                  }
                ),

Ist es legal, RenderGlimmer in diesem Kontext zu verwenden?

merefield · 17. April 2024 um 09:34

Basiert dies darauf, dass ein Vorfahre diese Eigenschaft hat?

this._findAncestorWithProperty("_emberView")

was undefiniert zurückkommt.

Oder dass es selbst eine _emberView hat (was es nicht hat)

github.com/discourse/discourse

app/assets/javascripts/discourse/app/widgets/widget.js

df373d90f


      
            let widget = this;
            while (widget) {
              const value = widget[property];
              if (value) {
                return widget;
              }
              widget = widget.parentWidget;
            }
          }
          
          _findView() {
            const widget = this._findAncestorWithProperty("_emberView");
            if (widget) {
              return widget._emberView;
            }
          }
          
          lookupWidgetClass(widgetName) {
            let WidgetClass = _registry[widgetName];
            if (WidgetClass) {
              return WidgetClass;

Ich vermute, der Vorfahre hätte es hier setzen sollen:

github.com/discourse/discourse

app/assets/javascripts/discourse/app/components/mount-widget.js

df373d90f


      
          
          const t0 = Date.now();
          const args = this.args || this.buildArgs();
          const opts = {
            model: this.model,
            dirtyKeys: this.dirtyKeys,
          };
          const newTree = new this._widgetClass(args, this.register, opts);
          
          newTree._rerenderable = this;
          newTree._emberView = this;
          const patches = diff(this._tree || this._rootNode, newTree);
          
          traverseCustomWidgets(this._tree, (w) => w.willRerenderWidget());
          
          this.beforePatch();
          this._rootNode = patch(this._rootNode, patches);
          this.afterPatch();
          
          this._tree = newTree;

OK, ein paar weitere Informationen.

Wenn der Poll gerendert wird (als Baum von Widgets), wird diese Zeile ausgeführt, aber wenn Sie zurück zu “Abstimmen” wechseln, wird sie nicht ausgeführt, daher findet sich aus irgendeinem Grund kein Vorfahre mit einer “_emberView” (Oder er wird nicht gefunden)

Die Quelle dieses Problems könnte sein, dass das Widget nie neu gerendert wird:

rerenderWidget()

wird trotz Hinzufügen eines neuen Widget-Baums nicht erneut ausgelöst … daher wird diese Eigenschaft nie gesetzt.

… daher könnte die Lösung darin bestehen, ein erneutes Rendern zu planen, wenn der Abstimm-Button gedrückt wird …

  toggleResults() {
    **this.scheduleRerender();**
    this.state.showResults = !this.state.showResults;
  },

… nein, das löst es nicht.

Mehr Informationen:

  _findAncestorWithProperty(property) {
    let widget = this;
    while (widget) {
      const value = widget[property];
      if (value) {
        return widget;
      }
      widget = widget.parentWidget;
    }
  }

Dies durchsucht den Baum nach der Eigenschaft.

Bei der anfänglichen Ansicht erscheint dies auf der Ebene des post-stream.

Aber irgendwie scheinen die Widgets ihre Abstammung zu verlieren …

merefield · 17. April 2024 um 10:18

OK, ich habe ein wenig weiter recherchiert:

github.com/discourse/discourse

app/assets/javascripts/discourse/app/widgets/widget.js

df373d90f


      
          
              const refreshAction = dirtyOpts.onRefresh;
              if (refreshAction) {
                this.sendWidgetAction(refreshAction, dirtyOpts.refreshArg);
              }
            }
          
            return this.draw(h, this.attrs, this.state);
          }
          
          _findAncestorWithProperty(property) {
            let widget = this;
            while (widget) {
              const value = widget[property];
              if (value) {
                return widget;
              }
              widget = widget.parentWidget;
            }
          }

Dies ist die Hierarchie, die beim Durchlaufen der Widgets durchlaufen wird:

discourse-poll-option-dropdown-245da0f65a66dbd539bcd27e501d759a [widget.js:250:14](webpack://discourse/widgets/widget.js)

discourse-poll-option-245da0f65a66dbd539bcd27e501d759a [widget.js:250:14](webpack://discourse/widgets/widget.js)

poll-container-poll-1247 [widget.js:250:14](webpack://discourse/widgets/widget.js)

poll-poll-1247

Nun hat das allerletzte, vorhandene Widget … kein übergeordnetes Widget.

parentWidget ist undefined.

Und der Clou ist, dass es keine „_emberView“-Eigenschaft hat, sodass das Ergebnis undefined ist.

Daher wird die Eigenschaft nie gefunden und an diesem Punkt stoppt die Durchquerung.

david · 17. April 2024 um 12:26

Das Poll-Plugin ist insofern etwas ungewöhnlich, als dass das Widget innerhalb des gekochten HTML eines Beitrags eingebunden wird, anstatt direkt über die MountWidget-Komponente in eine Ember-Vorlage eingebunden zu werden. Wir müssen hier wahrscheinlich zusätzliche Logik hinzufügen… werde ich mir ansehen

Danke für die Meldung @merefield!

david · 18. April 2024 um 14:29

Ich denke, wenn wir das zusammenführen, sollte es Ihren Code zum Laufen bringen @merefield

Es ist nicht besonders schön, aber ich denke, es ist in Ordnung, da dies eine ziemlich seltene Situation ist und wir hoffen, all diese Widget/RenderGlimmer-Sachen in nicht allzu ferner Zukunft komplett herauszureißen

merefield · 18. April 2024 um 14:33

Danke David. Ja, es ist sinnvoll, dass ein Kompromiss vorerst ausreicht

Ich werde es testen, sobald/falls es zusammengeführt wird (und ich muss meinen Fork aktualisieren! )

merefield · 19. April 2024 um 11:14

Ich weiß die schnelle Bearbeitung hier wirklich zu schätzen, David.

Ich kann bestätigen, dass dies jetzt für mich funktioniert.

Ich werde hier posten, wenn ich weitere Probleme mit dieser Vereinbarung feststelle.

(Haftungsausschluss für Screenshots: Dieses Projekt steckt noch in den Kinderschuhen!)

system · 19. Mai 2024 um 11:15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Thema		Antworten	Aufrufe
Render a component within a Widget. (Using select-kit components within plugin code) Dev	31	3309	6. März 2024
A tour of how the Widget (Virtual DOM) code in Discourse works Dev	75	28878	10. Juli 2023
Get glimmer component access to stuff from the parent Dev	11	276	10. März 2025
api.renderInOutlet not rendering? Dev	11	157	28. Juni 2025
Render Component in Widget Dev	1	371	27. Juni 2023

Verwandte Themen