[DOC] WikifyWidget : examples, usecase

The wiki currently lack examples for the wikify widget, thus I suggest we all collaborate to fix that. This wiki will serve as a draft for a future PR to the doc. Please feel free to edit it!

Using the output of widgets in a filter expression

<$let
target="purple" 
colourA="white"
colourB="black"
>
<$wikify name="wikified-color" text="""
<$macrocall $name="contrastcolour" 
target=<<target>> 
fallbackTarget=<<fallbackTarget>>
colourA=<<colourA>> 
colourB=<<colourB>> 
/>""">
<span style={{{"color:"=[<wikified-color>]";background:"=[<target>]+[join[]] }}}>Text with good contrast</span>
</$wikify>
</$let>

Accurate word count calculation

If a tiddler transclude some content, or use widgets to generate content, filters that try to calculate the word count won’t be accurate - we need to analyses the text AFTER it’s wikified.

Example:

\define lorem() lorem ipsum dolor

<$list filter="[range[0],[10]]"><<lorem>></$list>

Rendered output:

lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor
  • Word count without wikify = {{{ [<code>split[ ]count[]] }}} = 6
  • Word count with wikify = {{{ [<wikify-output>split[ ]count[]] }}} = 23

Exporting rendered html out of tiddlywiki

<$edit-text field="code" tag="textarea" class="tc-edit-texteditor" placeholder="Write some wikitext.."/>

Copy rendered html:

<$wikify name="code" text={{!!code}} output="html">

<$codeblock code=<<code>>/>

<$macrocall $name="copy-to-clipboard" src=<<code>>/>

</$wikify>

Since javascript macros can be called with arguments now (recent TW version added that feature), I would write your example more simply as

{{{ [<now dddd>multiply[2]] }}}

I think a different example which can’t be simplified would be better.

1 Like

One is supposed to use the wikifywidget sparingly because it is very resource intensive. I think it would be desirable if the docs also gives specific examples of such poor usage along with comments why it is poor and alternative, better, solutions.

1 Like

Yes. I think examples where it acceptable would also be helpfull

I know, this was not a very good example. I think the color contrast macro is a good use case. What do you all think ? Dont forget you can edit the post if you want!

Very true. Such a note definitely belongs into the doc.

Sometimes I wonder if such information is confusing for the beginning WikiText programmer. $wikify is any easy solution for some problems (see OP) and much simpler than some of the workarounds. Maybe we should have something like an Advanced Usage box in the respective tiddlers, in which some of these considerations for, well, advanced users are collected. A beginner should ignore this and only later read through the advanced stuff, once he finds his footing with WikiText programming.

Have a nice day
Yaisog

PS: I think the tag coloring still uses text substitution instead of wikification, which is equally haunted and should not be used as an example for a $wikify alternative.

This wiki will serve as a draft for a future PR to the doc.

Bumping this as a way to solidarize with the importance of this. The thread is almost one year old, the latest stable release happened a couple of weeks ago, my first stop in every iteration of slow TiddlyWiki learning quest is an offline copy of the tiddlywiki.com for docs, and docs still don’t have this issue addressed. Add the examples from this thread to the official docs please.

I’m drafting a PR :ok_hand: I’ll notify you when it’s ready for review.

@vuk Done: Provide examples for the wikify widget by DesignThinkerer · Pull Request #8792 · TiddlyWiki/TiddlyWiki5 · GitHub

You can preview the doc here (edit: it’s now on the official doc)

Let me know if this is clear enough :slight_smile:

PS: I understand the struggle of learning TiddlyWiki; it took me a few years to get comfortable with it. When I decided to contribute directly to the project and the community, my learning accelerated significantly. Don’t be afraid to make your own PR for the tiddlywiki doc, it’s even easier now thanks to the PR maker :wink:

And if you learn better with a linear approach, check out Grok TiddlyWiki — Build a deep, lasting understanding of TiddlyWiki

1 Like

I understand the struggle of learning TiddlyWiki; it took me a few years to get comfortable with it

I know this may sound extremely disrespectful and rude to the people who spent decades of their life developing TiddlyWiki, but I can’t stop grinning when I think the quote above completes the holy trinity of my personal procrastination excuses for not attempting (yet) to write some useful TiddlyWiki plugin that solves a real problem (even a not very complex one) :rofl:

First two excuses being:

  1. It’s already written, I just didn’t find it yet (albeit I keep periodically searching)
  2. It’s not written yet, but by the time I get confident enough to try doing it myself, it will be already written

Having being involved with tiddlywiki for the majority of its life, the problem is not “is there a plugin or not”, but when a genuine issue is soved by a plugin it is rarely used to update the core.

It is importiant to note, many things can be achived with a filter, now we have functions that can evaluate filters without the need to wikify. The number of cases where the $wikify widget is needed are now even less.

A good usecase for wikify IMO is for transforming svg containing a parameter widget. Without wikify, my plugin that add icons to links wouldn’t work (I could override the link widget, but it wouldn’t be great for performances)

This should normally occur in the final render, with an svg (parametised or not) is not passed as a value just given as a name reference typically through a transclusion.

  • Short cut transclusions use {{ }}
  • Long cut $transclusion

Of note is once a widget is used, as in $transclusion, the contents of the widget are evaluated and displayed. Widgets are not typically used to generate something as a parameter value, things in widgets are usually displayed.

1 Like