A few questions about macros/widgets/functions

188 views
Skip to first unread message

Joe Armstrong

unread,
Mar 10, 2018, 1:25:48 PM3/10/18
to TiddlyWiki

TW seems to have three types of code: JS functions, TW macros, and TW widgets. It's not clear to me how these are evaluated, 

nor what the order of evaluation is.


1) macros - what are they? How do they differ from regular JS functions - how are they evaluated? 

what do they return? Is the return text re-evaluated?


2) widgets - what do they return? how are they evaluated?


3) How can I find a macro-definition ? 

I looked for ages for the source of the list-links macro but could not find it


Cheers


/Joe


Mark S.

unread,
Mar 10, 2018, 1:52:57 PM3/10/18
to TiddlyWiki
Macros are more like macros in  make scripts. They don't really do anything, but they can concatenate variables or passed values into strings.  Variables with <<syntax>> are actually macro expansions. You can use macros to feed into widgets like

<$mywidget text=<<myvariable>>/>

Widgets render something right there in place, typically. I don't think you can say that they return anything. If you want to evaluate their "return" (what you see on screen) you may have to use the Wikify widget to render their result into a variable.

There are JS macros, which can do more than regular macros. Most of the core macros appear to be regular, non-js, macros.

If you type list-links into the advanced search engine and click on the Shadows tab, you'll see


Clicking on the one with "macros" in the title will take you to the tiddler with the list-links definition. This is pretty much how I find stuff when I'm rummaging around.

Good luck!
-- Mark

Xavier Cazin

unread,
Mar 10, 2018, 4:39:32 PM3/10/18
to tiddl...@googlegroups.com
Hi Joe,

More knowledgeable people would express it differently, but one way to look at these constructs is that the "result" of most widgets and macros is to act on the wiki (render elements and respond to user interaction), so don't look at them as programming functions from which you could generally get a result in order to save it and/or reuse it. They are more like procedures.

The only way to reuse the result of an action (or of a sequence of actions) like you would do with a function, is thus to "wikify" it programmatically. The wikify widget does that explicitly: it saves the string result of a sequence of actions so that you can repurpose it). Calling a string-only macro (maybe with variable substitution) without any instructions is another way to do wikification.

You can find examples of macros if you look for macro under Avanced Search / Shadows tab. You will find there https://tiddlywiki.com/#%24%3A%2Fcore%2Fmacros%2Flist, which contains the definition of the list-links macro.

Cheers,
Xavier.

-- Xavier Cazin

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/fd7fb9a8-fe80-4a1a-a528-2074b6f0b2af%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Joe Armstrong

unread,
Mar 10, 2018, 5:12:59 PM3/10/18
to TiddlyWiki
Wow thanks - more twisty passages

So the definition is

\define list-links(filter,type:"ul",subtype:"li",class:"")
<$type$ class="$class$">
<$list filter="$filter$">
<$subtype$>
<$link to={{!!title}}>
<$transclude field="caption">
<$view field="title"/>
</$transclude>
</$link>
</$subtype$>
</$list>
</$type$>
\end


Now all I need is a line by line description of how this works - at a guess (and I have to guess
since I have seen no description) the first line says that list links
has three parameters called filter type subtype and class

I also assume that if values are not supplied by the caller
that the quoted value is used. For example if no subtype is
given the value "li" is assumed.

Then I assume that $var$ in the definition means substitute the
value of the variable so
<$type$ class="$class$">

is expanded into <ul class="""">

so far so good (I am getting warm?)

Next line

<$list filter="$filter$">

So this expands into <$lst filter=something>

Where something came from the caller

So now I need to find out what <$list ...> does

I can find the documentation but where is the code for
this - this is the list widget I assume.

Thanks BTW I'm slowly getting there

next problem find the code

for <$list ,,,> and 
<$link ...>

etc.

Cheers

/Joe






On Saturday, 10 March 2018 13:39:32 UTC-8, Xavier wrote:
Hi Joe,

More knowledgeable people would express it differently, but one way to look at these constructs is that the "result" of most widgets and macros is to act on the wiki (render elements and respond to user interaction), so don't look at them as programming functions from which you could generally get a result in order to save it and/or reuse it. They are more like procedures.

The only way to reuse the result of an action (or of a sequence of actions) like you would do with a function, is thus to "wikify" it programmatically. The wikify widget does that explicitly: it saves the string result of a sequence of actions so that you can repurpose it). Calling a string-only macro (maybe with variable substitution) without any instructions is another way to do wikification.

You can find examples of macros if you look for macro under Avanced Search / Shadows tab. You will find there https://tiddlywiki.com/#%24%3A%2Fcore%2Fmacros%2Flist, which contains the definition of the list-links macro.

Cheers,
Xavier.

-- Xavier Cazin

On Sat, Mar 10, 2018 at 7:25 PM, Joe Armstrong <joe...@gmail.com> wrote:

TW seems to have three types of code: JS functions, TW macros, and TW widgets. It's not clear to me how these are evaluated, 

nor what the order of evaluation is.


1) macros - what are they? How do they differ from regular JS functions - how are they evaluated? 

what do they return? Is the return text re-evaluated?


2) widgets - what do they return? how are they evaluated?


3) How can I find a macro-definition ? 

I looked for ages for the source of the list-links macro but could not find it


Cheers


/Joe


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

Xavier Cazin

unread,
Mar 10, 2018, 5:32:12 PM3/10/18
to tiddl...@googlegroups.com
Hey Joe,

You've deciphered the whole list-links macro perfectly. Since the list widget is one of the most important one in TiddlyWiki, you'll have to spend more time on it. It's code is written in JavaScript, but I don't think that reading the code will make you understand its fonctionning better that reading the docs for lists and filters and try (direcly on tiddlywiki.com if you want). Filters syntax is very important to master if you want to program TiddlyWiki. Along with the list widget, it offers very flexible ways to filter tiddlers in order to process dynamic lists. Why dynamic? Because if a tiddler is created afterward that matches the filter, then the list widget immediately processes it, as if it was just waiting for your new tiddler to enter the game.

Cheers,
Xavier.

-- Xavier Cazin

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

PMario

unread,
Mar 10, 2018, 8:08:52 PM3/10/18
to TiddlyWiki
On Saturday, March 10, 2018 at 7:25:48 PM UTC+1, Joe Armstrong wrote:
...

2) widgets - what do they return? how are they evaluated?


Widgets are the basic building blocks in TW. The whole UI is based on widgets.

The TiddlyWiki UI starts with a transclusion of the PageTemplate tiddler.
Which simply speaking is a "list all tiddlers that are tagged: $:/tags/PageTemplate" + some navigation handling using the NavigatorWidget

TW wikitext is parsed and transferred to widgets, which produce the html-dom, that the browser can use. more about this later.

----------------

A simpler example:

Macro definitions are converted to SetWidgets
and
macro calls are converted to a MacroCallWidgets

eg: if you go to the TW-prerelease edtion you can see the pare-tree and the widget-tree. The prerelease contains some development elements, that are missing at tiddlywiki.com

 - open: https://tiddlywiki.com/prerelease/
 - create a new tiddler eg: test-macro
 - enter: \define hello() hello world
 - In the edit toolbar you see:

 - select parse-tree and you'll see:


[
    {
        "type": "set",
        "attributes": {
            "name": {
                "type": "string",
                "value": "hello"
            },
            "value": {
                "type": "string",
                "value": "hello world"
            }
        },
        "children": [],
        "params": []
    }
]
 
- now add the macro call  with: <<hello>>
- you'll get:


[
    {
        "type": "set",
        "attributes": {
            "name": {
                "type": "string",
                "value": "hello"
            },
            "value": {
                "type": "string",
                "value": "hello world"
            }
        },
        "children": [
            {
                "type": "macrocall",
                "name": "hello",
                "params": [],
                "isBlock": true
            }
        ],
        "params": []
    }
]

These internal structures are created by the TW parsers. They produce the parse-tree.

This parse-tree is used by the TW renderer to produce the HTML output, that the browser can use.
Every widget has a widget.render() function. ...

The module render.js is a startup module, that kicks off the whole parsing and rendering process for eg: the PageTemplate.

A little bit earlier in the startup mechanism, the RootWidget is created. It holds a reference to the browser DOM document element, which allows all widgets, to modify the DOM.

hope that makes sense
have fun!
mario

Auto Generated Inline Image 1

Steven Schneider

unread,
Mar 13, 2018, 1:16:46 PM3/13/18
to TiddlyWiki
Great thread. Thanks, Joe. And thanks, Xavier.

What I find most interesting about TiddlyWiki is that someone like Joe and someone like me can work with it. Joe has a clearly different approach to learning and understanding than I do. I never looked at the <<list-links>> code, just used it for a while until it didn't do what I wanted, and poked around and discovered <$list>, and used the dox and examples on tiddlywiki.com to get it to work (sort of).

FWIW: I may have a different need, since I am now frequently teaching TiddlyWiki, but this term I gave up teaching <<list-links>> and moved students into using <$list filter=...> right away. Like Xavier, I agree that filters are key, and help folks understand the core aspects of Tiddlywiki. Most of my students are non-programmers, but many have html experience. 

It is always interesting to have computer scientists in my class, as the way I have them approach TW is so different than how they are taught programming and languages in the CS department. About half-way into the semester, they begin to see that there is a language under TW, and that they can get to that language if they want to. I'm not sure that there are platforms other than TiddlyWiki that offer this possibility.

Anyway, thanks Joe for starting off an interesting thread...

//steve.

Joe Armstrong

unread,
Mar 13, 2018, 3:08:23 PM3/13/18
to tiddl...@googlegroups.com
Next question is where is the code for a widget?

I think I understand (famous last words) macros - but not widgets.

Where is the code for a simple widget?

Which is the simplest widget??? 

Cheers

/Joe



--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/i1winZZTGEg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Jed Carty

unread,
Mar 13, 2018, 3:27:22 PM3/13/18
to TiddlyWiki
I am not sure if it is the simplest widget, but the text widget is one of the simplest widgets.

It is part of every wiki but here is a link to it on tiddlywiki.com https://tiddlywiki.com/#%24%3A%2Fcore%2Fmodules%2Fwidgets%2Ftext.js

Mark S.

unread,
Mar 13, 2018, 3:30:10 PM3/13/18
to TiddlyWiki
Just go to the shadow tab of the advanced search. Look for the name of the widget minus the "widget" term. Like

button.js

I'm guessing that the TextWidget would be simplest because it does the least.

There's some documentation how-to on plugins at http://cjhunt.github.io/ though for me I found a bit too much was assumed to start.

Good luck!
-- Mark
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

Matthew Lauber

unread,
Mar 14, 2018, 8:25:59 AM3/14/18
to TiddlyWiki
If your really looking to understand how the code works, my advice is to look at the sources tab in chrome's developer tools.  Press F12 in your browser window, and look at the sources tab, and you should find a bunch of .js files under the no-domain entry in the left hand side.  The standard widgets all start with $:/core/modules/widgets/*.  I'd take a look at those, and throw some breakpoints in so you can see when they get called and what data they get.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
Reply all
Reply to author
Forward
0 new messages