Call another js widget in a new widget

Zheng_Bangyou · July 10, 2024, 10:35am

I have developed a js widget with a few parameters, e.g.

<$widget1 type="t1" data="d1" />`

Now I plan to develop another js widget, e.g.

<$widget2 filter="[tag[p]]" />

which will dynamically generate parameter values for widget1.

Could I call widget1 in the js of widget2?

TW_Tones · July 11, 2024, 12:59am

I you defined a custom widget in TiddlyWiki script, you can include one within another, keeping in mind widgets don’t typically return a value to the calling widget, but they can display a result or even an element like a button.

In tiddlywiki script you can even redefine an existing widget using the GenesisWidget

I do try to urge people to use the tiddlywiki way, not revert to JavaScript.

Especially in this example because it seems your outer widget is effectively what one can generate from a list widget.

Zheng_Bangyou · July 11, 2024, 3:35am

Thanks @TW_Tones. I understand it is better to use wikitext way to develop a new widget.

But some operation I plan to do is very complicated for data processing. It would be really hard to achieve through wikitext. So I think it would be easier to develop with js.

buggyj · July 11, 2024, 5:05am

this is done sometimes, an example is in the $list widget:

github.com

Jermolene/TiddlyWiki5/blob/68d13601dfe2831738f5678439c09dfd7ee11d30/core/modules/widgets/list.js#L217

    
      
          			}
          		}
          		if(!templateTree || templateTree.length === 0) {
          			// Default template is a link to the title
          			templateTree = [{type: "element", tag: this.parseTreeNode.isBlock ? "div" : "span", children: [{type: "link", attributes: {to: {type: "string", value: title}}, children: [
          				{type: "text", text: title}
          			]}]}];
          		}
          	}
          	// Return the list item
          	var parseTreeNode = {type: "listitem", itemTitle: title, variableName: this.variableName, children: templateTree, join: join};
          	parseTreeNode.isLast = index === this.list.length - 1;
          	if(this.counterName) {
          		parseTreeNode.counter = (index + 1).toString();
          		parseTreeNode.counterName = this.counterName;
          		parseTreeNode.isFirst = index === 0;
          	}
          	return parseTreeNode;
          };
          
          
/*

Here “listitem” is the name of the ‘child’ widget

Zheng_Bangyou · July 11, 2024, 12:28pm

@buggyj Thanks for your suggestions. After rethinking @TW_Tones comments, I think the following method would be easier and flexible to develop.

As my main target is to generate parameter values in widget1 using scripts, I could develop macros to return the generated values using wikitext for simple task and js for complex tasks, for example,

<$widget1 type="t1" data=<<get-data>> />

With this idea, I successfully developed a demo to display a map for my tw-htmlwidgets plugin as a starting point.

For example

<$htmlwidgets type="leaflet" data=<<data-leaflet "[tag[Place]]">> />

Which will generate a map to display capital cities in Australia based on filter [tag[Place]].

I am mainly a R user which can easily generate dynamic figures using htmlwidgets packages with other js libraries (e.g. echarts, leaflet).

It is a big challenge for me to use js or wikitext to write/generate the json object used in dynamic figures.

My plan is to use R draw the basic figure for json object, then use wikitext/js to generate data to replace data in the base figure.

linonetwo · July 12, 2024, 3:48pm

You can make shared code a library (another type of JS tiddler, like widget type), and require it by tiddler title.

jacng · July 15, 2024, 6:14am

Another option may be a custom filter written in JavaScript. I came across a discussion and example of js filter here : https://groups.google.com/g/tiddlywiki/c/M6wADVDjyTE?pli=1 (More info in TiddlyWiki/Dev under “Filter Operators”)

You use your js filter within a filter expression in wikitext to generate the output you need.

Zheng_Bangyou · July 15, 2024, 6:28am

@jacng Thanks. I am ending up with exact method through developing filter operators.

See my example to draw a leaflet map with filter operators (developing with proof of concept. https://tw-htmlwidgets.bangyou.me/).

<$htmlwidgets type="leaflet" filter="[addtiles[]] [tag[Place]addmarkers[]] +[leaflet[]]" />

I think this method is flexible and simple to add multiple layers into a single map.