Re: [tw] Re: A few questions about macros/widgets/functions

[Matthew Lauber]

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.

On Tuesday, March 13, 2018 at 3:08:23 PM UTC-4, Joe Armstrong wrote:
>
> 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
>
>
>
> On Tue, Mar 13, 2018 at 10:16 AM, Steven Schneider  > wrote:
>
>> 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 
>> <> 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 <> 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.
>>
>>
>> On Saturday, March 10, 2018 at 8:08:52 PM UTC-5, PMario wrote:
>>>
>>> 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: <>
>>>
>>> - 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 
>>> 

Re: [tw] Re: A few questions about macros/widgets/functions

['Mark S.' via 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

On Tuesday, March 13, 2018 at 12:08:23 PM UTC-7, Joe Armstrong wrote:
>
> 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
>
>
>
> On Tue, Mar 13, 2018 at 10:16 AM, Steven Schneider  > wrote:
>
>> 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 
>> <> 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 <> 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.
>>
>>
>> On Saturday, March 10, 2018 at 8:08:52 PM UTC-5, PMario wrote:
>>>
>>> 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: <>
>>>
>>> - 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

[tw] Re: A few questions about macros/widgets/functions

[Jed Carty]

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

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/b674fc30-cb1c-4350-aaab-80f3a3c4e8a5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: A few questions about macros/widgets/functions

[Joe Armstrong]

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



On Tue, Mar 13, 2018 at 10:16 AM, Steven Schneider  wrote:

> 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 <>
> 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 <> 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.
>
>
> On Saturday, March 10, 2018 at 8:08:52 PM UTC-5, PMario wrote:
>>
>> 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: <>
>>
>> - 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
>>
>>
>> --
> You received this message because you are subscribed to

[tw] Re: A few questions about macros/widgets/functions

[Steven Schneider]

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 <> 
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 <> 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.


On Saturday, March 10, 2018 at 8:08:52 PM UTC-5, PMario wrote:
>
> 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: <>
>
> - 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
>
>
>

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/6

[tw] Re: A few questions about macros/widgets/functions

[PMario]

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: <>

- 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


-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/0ce89182-218e-487e-a62e-81b20782cb60%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: A few questions about macros/widgets/functions

['Mark S.' via 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 <> are actually macro expansions. You can 
use macros to feed into widgets like

<$mywidget text=<>/>

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

$:/core/macros/list 
 
$:/language/Snippets/ListByTag 
 

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

On Saturday, March 10, 2018 at 10:25:48 AM UTC-8, Joe Armstrong 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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/f65d4edd-19c6-4ac0-a5fb-621a2d2e78c8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.