renderTiddler gets empty result...

[linonetwo]

I'm tring to make a resizable sidebar tabs
Demo here: https://tiddly-gittly.github.io/flowtiwi-sidebar/

But in https://github.com/tiddly-gittly/flowtiwi-sidebar/blob/38c5dcda155e6705eedbd1a68126ef1578f97945/src/components/multi-column.tsx#L34-L36

where I use $tw.wiki.renderTiddler

const sidebarTabTitles = useFilter('[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]');
sidebarTabTitles.map((title) => {
  const contentHTML = $tw.wiki.renderTiddler('text/html', title);

Seems most of sidebar tabs' content resulted in empty HTML string, why?

And the button is lost its onclick event handler, not triggering any message.

[Jermolene]

Hi @linonetwo

I think there's a typo there – your map function is not doing anything with the contentHTML variable. Here's a version that works on tiddlywiki.com:

const sidebarTabTitles = $tw.wiki.filterTiddlers('[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]');
sidebarTabTitles.map((title) =>  $tw.wiki.renderTiddler('text/html', title))

[Jermolene]

If you're trying to wrap the TW renderer as a React component that approach with renderTiddler won't work because the HTML that you get out won't have any event handlers. The correct approach would be along the lines of the way that the main page template is rendered and refreshed in $:/core/modules/startup/render.js

[linonetwo]

I'm doing basically same as $:/core/modules/startup/render.js now:

const transcludeWidgetNode = $tw.wiki.makeTranscludeWidget(tiddlerTitle, { document, parentWidget: $tw.rootWidget, recursionMarker: 'no' });
const tiddlerContainer = document.createElement('div');
containerEl.append(tiddlerContainer);
transcludeWidgetNode.render(tiddlerContainer, null);
$tw.hooks.invokeHook("th-page-refreshed");

Not working, I found transcludeWidgetNode.children contains the correct parse tree, but the list widget with [list<tv-story-list>] doesn't render to tiddlerContainer when transcludeWidgetNode.render.

I will need to add more debug log in the render method this weekend...Maybe it can't access to the correct context or wiki instance...

[Jermolene]

Hi @linonetwo

Are you getting any output at all? What tiddler are you rendering? If not the page template, be aware that certain tiddlers depend on variables that are ordinarily set in the page template.

[linonetwo]

Thank you, this is the key, I'm rendering sidebar tabs' content, so adding importPageMacros: true, to makeTranscludeWidget gets things rendered!

---

But I found some button is working (home button), while some buttons are not (close all). And clicking tabs and links have no effect. Is there some other context I need to provide to the transcludeWidget?

E.g., this.dispatchEvent({ type: "tm-navigate", xxx }) in link widget is called, but not triggering navigate, because this.eventListeners is Object { } empty.

I see this event is handled by LinkCatcherWidget, so maybe I need to warp some widgets around the transcludeWidget? Is there an all-in-one setup for this?

[linonetwo]

Solution: in $tw.wiki.makeTranscludeWidget needs to use our react widget instead of $tw.rootWidget...

parentWidget: parentWidget, //$tw.rootWidget,

[linonetwo]

Besides that, if we want rendered widget rerender, we need to :

parentWidget.children.push(transcludeWidgetNode);

And in our react widget:

  refresh(changedTiddlers: IChangedTiddlers) {
    return this.refreshChildren(changedTiddlers);
  }