How to trigger widget rerender?

[linonetwo]

I have a simple widget as follow:

/**
title: $:/plugins/linonetwo/zx-script/zx-script-output.js
type: application/javascript
module-type: widget
*/

(function () {
  const Widget = require('$:/core/modules/widgets/widget.js').widget;

  class ZXOutputWidget extends Widget {
    /**
     * Lifecycle method: call this.initialise and super
     */
    constructor(parseTreeNode, options) {
      super(parseTreeNode, options);
      this.initialise(parseTreeNode, options);
    }

    get stateTiddlerTitle() {
      const title = this.getAttribute('title', 'aaa.mjs');
      const stateTiddlerTitle = `$:/state/linonetwo/zx-script/output/${title}`;
      return stateTiddlerTitle;
    }

    /**
     * Lifecycle method: Render this widget into the DOM
     */
    render(parent, nextSibling) {
      this.parentDomNode = parent;
      this.computeAttributes();

      // DEBUG: console
      console.log(`rerender`);

      const outputElement = this.document.createElement('article');
      outputElement.innerHTML = $tw.wiki.getTiddlerText(this.stateTiddlerTitle);
      parent.insertBefore(outputElement, nextSibling);
      this.domNodes.push(outputElement);
    }

    refresh(changedTiddlers) {
      return this.stateTiddlerTitle in changedTiddlers && changedTiddlers[this.stateTiddlerTitle]?.modified;
    }
  }

  exports['zx-script-output'] = ZXOutputWidget;
})();

I can see refresh gets called, and even it returns true, there is no rerender.

I wonder why, since transclude widget is just doing like this

https://github.com/Jermolene/TiddlyWiki5/blob/f72512369014499fd9ab4e550c6e7247669f3be6/core/modules/widgets/transclude.js#L111-L119

background:

I'm displaying zx's output in this widget using

creator: LinOnetwo
tags: $:/tags/ViewTemplate
title: $:/plugins/linonetwo/zx-script/OutputBar
type: text/vnd.tiddlywiki

<$zx-script-output title={{!!title}} />

[linonetwo]

Unable to solve this... Use wikitext suggest by a friend:

<$vars currentTiddler={{{[{!!title}addprefix[$:/state/linonetwo/zx-script/output/]] }}}>

{{||$:/core/ui/ViewTemplate/body}}

</$vars>

The output is pretty good, can even render the output as rendered tiddler.

[saqimtiaz]

You need to call refreshSelf() inside refresh() when the conditions are met for needing a refresh. Just returning true does not trigger a refresh of the widget.

[linonetwo]

Thanks, I thought tw will do it for me :P

[saqimtiaz]

@linonetwo keep in mind that if your widget will have child widgets (that is other widgets inside it) then you also need to handle the situation where the widget does not need a refresh but children might:

refresh(changedTiddlers) {
  if(this.stateTiddlerTitle in changedTiddlers && changedTiddlers[this.stateTiddlerTitle]?.modified) {
      this.refreshSelf();
      return true;
  } else {
      return this.refreshChildren(changedTiddlers);
  }
}

[linonetwo]

Thank you, this is helpful, since I've just posted another question that I want to render a child widget in my widget.

[linonetwo]

do you mean return this.refreshChildren(changedTiddlers);?

[saqimtiaz]

Yes, correct.