How to use widget in other widget? How to compose widget?

[linonetwo]

I'm writing a widget, in render() I simply set innerHtml, but I hope I can render text using $:/core/ui/ViewTemplate/body

render(parent, nextSibling) {
      this.parentDomNode = parent;
      this.computeAttributes();

      const outputElement = this.document.createElement('article');
      outputElement.innerHTML = $tw.wiki.getTiddlerText(this.stateTiddlerTitle);
      parent.insertBefore(outputElement, nextSibling);
      this.domNodes.push(outputElement);
// how to push a $:/core/ui/ViewTemplate/body instead?
    }

It just output plain text...

I want to achieve something like this in JS:

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

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

</$vars>

Is there an example to look at?

[saqimtiaz]

One approach is to create a parseTree for the children you want to create and insert that as the children for your widget in execute() and then call makeChildWidgets()

See #5799 (comment)

The other approach would be to use wiki.makeTranscludeWidget() method.
Example: https://github.com/Jermolene/TiddlyWiki5/blob/a409536ad01c46f7643588c75d8c819920f21778/core/modules/utils/dom/modal.js#L151

[linonetwo]

Sorry, but these examples still confused me. I may need some time to look at the source to get what these parameters mean.

I think I will use

render(parent, nextSibling) {
      const output = ($tw.wiki.getTiddlerText(this.stateTiddlerTitle) ?? '');
      const transcludeNode = $tw.wiki.makeTranscludeWidget('$:/core/ui/ViewTemplate/body', {
        type: "text",
        attributes: {
          text: {
            type: 'string',
            value: output
          }
        }
      });
      this.parseTreeNode.children.push(transcludeNode);

      this.makeChildWidgets([{
        attributes: this.parseTreeNode.attributes,
        children: this.parseTreeNode.children
      }]);

[linonetwo]

I was confused by the widget API, so I have to use wikitext to achieve transclusion...

creator: LinOnetwo
tags: $:/tags/ViewTemplate
title: $:/plugins/linonetwo/zx-script/OutputBar
list-before: $:/plugins/linonetwo/inverse-link-and-folder/infobar
type: text/vnd.tiddlywiki

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

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

</$vars>