How is a javascript modified to run in TW?

193 views
Skip to first unread message

Mat

unread,
Jul 20, 2015, 12:14:16 PM7/20/15
to tiddl...@googlegroups.com
I find a lot of interesting javascripts I'd like to try out and study, but I find next to no information on how to adapt scripts to work in TW.

Has anyone attempted to make an automatic convertor for this? Input javascript output tiddlyfied javascript? Or is it trivial and no special conditions or exceptions once you have the javascript?

And, actually, I never quite understood why it was on the one hand decided to disable straight in pasting of javascripts but at the same time it is possible to re-make them to work. Is it just to introduce a threshold so it won't be too easy for someone malicious to pop by with a script saying "here, run this on your TW, it's great"?


Thank you!

<:-)

Sylvain Naudin

unread,
Jul 20, 2015, 12:23:53 PM7/20/15
to tiddl...@googlegroups.com


Le lundi 20 juillet 2015 18:14:16 UTC+2, Mat a écrit :
I find a lot of interesting javascripts I'd like to try out and study, but I find next to no information on how to adapt scripts to work in TW.

+1
I have the same question :)
Sylvain

Danielo Rodríguez

unread,
Jul 20, 2015, 1:25:41 PM7/20/15
to tiddl...@googlegroups.com
Sorry for being so direct, but if you want a direct converter to adapt random javascript to tiddlywiky maybe you should forget about using that snippet in tiddlywiky. Tiddlywiky is not a website, it is an application, and as every application if you want to add "code" to it you have to use its API. Could you imagine someone asking for a converter to adapt random php snippets to dokuwiki? The fact that tiddlywiky uses javascript does not make it different from any other program. If you want to program to tiddlywiky you have to know and understand how tiddlywiky works and write code specifically for it.

The place to test random javascript snippets is an html page as simple as possible.

Having such "converter" will cause more damage than benefits.

In the worst case you can use the raw markup tag.

Felix Küppers

unread,
Jul 20, 2015, 1:45:13 PM7/20/15
to tiddl...@googlegroups.com
Hi guys,

I agree with all what Danielo said.

TiddlyWiki cannot be compared to a normal website where all you need to
do is just reference a javascript file and it works. As Danielo said, TW
is more like a program.

-Felix

Sylvain Naudin

unread,
Jul 20, 2015, 2:32:28 PM7/20/15
to tiddl...@googlegroups.com
OK guys ;)

But question is "on how to adapt scripts to work in TW". So if I'm wrong, vis.js is a JavaScript library, and work now in TiddlyWiki. There are other examples sure, no ?


Cheers,
Sylvain

PMario

unread,
Jul 20, 2015, 3:07:46 PM7/20/15
to tiddl...@googlegroups.com
Hi Mat,


On Monday, July 20, 2015 at 6:14:16 PM UTC+2, Mat wrote:
I find a lot of interesting javascripts I'd like to try out and study, but I find next to no information on how to adapt scripts to work in TW.

I'm not exactly sure, what you need, because it depends on your existing JS skills. So I'd like to point out some resources, that may be useful and I'll start at the beginning:

The JavaScript language itself:

  - IMO Marijn Haverbeke wrote a "interactive" js book.
    - It explains the basics.
    - It talks about JS in the browser
    - and it talks about JS for nodejs.

The cool thing here is, that the code examples are editable see: http://eloquentjavascript.net/01_values.html#p_GyQlmgK5IK If you click the code below the text and hit <ctrl><enter> it executes it. So you can nicely play with the examples. .. There is a menu top right of the editor. (I didn't read the second edition, but I did skim most of the first one and I liked what I saw)

So it basically discusses all elements we use in TW. ... We use all of them. So reading and understanding (examples) the stuff there will help a lot.
 
Has anyone attempted to make an automatic convertor for this?

No.

Code found on the internet is mainly written for HTML pages, where one library opens one instance of a function. With TW most of the time we need to be able to initialize many instances of a desired function, so the mechanism is slightly different than shown in most of the examples found in the web.

This makes using libraries a little bit different. ... but the mechanism, that is used is always the same. (see chapter 10 Modules in the book) .. Warning: Don't start reading there, if you are new to JS. (It will be frustrating) Start at the beginning!
 
Input javascript output tiddlyfied javascript? Or is it trivial and no special conditions or exceptions once you have the javascript?

TiddlyWiki has a philosophy how external libraries are included. ... The main difference here is, that libraries in TW are not hardcoded, like for all other HTML pages. Users are able to dynamically import plugins. Save the TW. Reload and the plugins have to work. So TW uses a very opinionated mechanism, that is not trivial. ... BUT it is always the same. So if you understand it once, you should be fine.

See TW developer doc and I'm sorry ... The TW source code itself :/
 
And, actually, I never quite understood why it was on the one hand decided to disable straight in pasting of javascripts but at the same time it is possible to re-make them to work.

imo 3 reasons:

 First: security.
 Second: dynamically installable plugins.
 Third: security!

Trust me. You don't want to enable script tags in tiddlers. ... You really don't.
 
Is it just to introduce a threshold so it won't be too easy for someone malicious to pop by with a script saying "here, run this on your TW, it's great"?

No, it's not just security.
TW needs to be able to initialize many instances of the same code in a defined way: aka Widgets. Otherwise we break the automatic refresh mechanism.

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

IMO, the easiest way to play with JS in TW imo is with javascript macros: see: http://tiddlywiki.com/dev/#JavaScript%20Macros  and https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/macros

You should be able to build your own TW with nodejs if you want to play with it. You can do almost everything within js macro code, except the widget stuff.

Developer tools: https://developer.mozilla.org/en/docs/Tools  ... Have a closer look at: Exploring and debugging tools. They are very similar in Chrome and even IE. So use the browser of your choice. ... console.log() is your friend for debugging your own stuff.

The developer doc is at: http://tiddlywiki.com/dev/ ... It should give you some more info about the core internals.

While I'm sure, I'm opening more questions than I answered, I still hope this helps.

have fun!
mario


 


Felix Küppers

unread,
Jul 20, 2015, 3:31:45 PM7/20/15
to tiddl...@googlegroups.com
Hi Sylvain,

> But question is "on how to adapt scripts to work in TW".

You are correct, but in this case there is no general answer. Also, I am
not aware of a tutorial on how to write plugins... maybe something like
this exists somewhere.

-Felix

BJ

unread,
Jul 20, 2015, 3:36:43 PM7/20/15
to tiddl...@googlegroups.com
If inline javascipt is enable that any tiddler with html tags containing javascript will run that javascript. As tidlywiki allow you to select part of a webpage and drag it into your tiddlywiki then any javascript in that part of that webpage will run in your tiddlywiki - DISASTER! 
R
Thank you!

<:-)

Mat

unread,
Jul 20, 2015, 4:48:07 PM7/20/15
to tiddl...@googlegroups.com
Guys, thanks for your thoughts and explanations. Obviously, particularly thanks to Mario!!!! 


PMario wrote:
 
  - IMO Marijn Haverbeke wrote a "interactive" js book.

Excellent! And great with the editable interactivity to try out stuff!!!


Code found on the internet is mainly written for HTML pages, where one library opens one instance of a function. With TW most of the time we need to be able to initialize many instances of a desired function, so the mechanism is slightly different than shown in most of the examples found in the web. 

Is this what @Danielo refers to with "Tiddlywiky is not a website, it is an application, and as every application if you want to add "code" to it you have to use its API" ?


Great thanks for the clarifications and the links!!!!

<:-)

Alex Hough

unread,
Jul 20, 2015, 6:22:08 PM7/20/15
to tiddl...@googlegroups.com
Great thread guys...
Very useful Mario. 

Alex
--
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.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/246dea9e-80cc-4f8a-b384-a2ea0cb4c512%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

BJ

unread,
Jul 21, 2015, 12:59:59 AM7/21/15
to tiddl...@googlegroups.com
I think the best way to learn is to try. If you have some (even vague) idea of what you would like to add then ask about that. I have adapted (as have others) javascript libs to tiddlywiki and am happy to give advice.

cheers

BJ

Sylvain Naudin

unread,
Jul 21, 2015, 1:09:51 AM7/21/15
to tiddl...@googlegroups.com
Yep thanks for this Mario, I've bookmarked this thread to read it later.

Sylvain

Jeremy Ruston

unread,
Jul 21, 2015, 3:41:29 AM7/21/15
to TiddlyWiki
Hi Mat

I think there are two questions here:

* Why does TiddlyWiki disable inline JavaScript?
* How can one adapt arbitrary JavaScript libraries to work with TiddlyWiki?

The answer to the first is indeed to ensure that it is not possible to construct a malicious wikitext tiddler that, when imported, steals personal data. By restricting JavaScript to specially marked "JS module tiddlers" we ensure that we can always filter out executable content.

The answer to the second question is less clearcut. The fundamental problem is that many JavaScript libraries use a technique whereby the state of the user interface is stored in the DOM. That doesn't work in TiddlyWiki5 because (like many modern JavaScript frameworks) it keeps state within JavaScript objects and rebuilds the DOM on the fly as required. There's no way to automatically convert DOM-based JavaScript code to work with TiddlyWiki5.

So, the answer to the second question has two parts: learn JavaScript, and learn TiddlyWiki5.

Best wishes

Jeremy.













On Tue, Jul 21, 2015 at 6:09 AM, Sylvain Naudin <sil...@gmail.com> wrote:
Yep thanks for this Mario, I've bookmarked this thread to read it later.

Sylvain

--
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.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

For more options, visit https://groups.google.com/d/optout.



--
Jeremy Ruston
mailto:jeremy...@gmail.com
Reply all
Reply to author
Forward
0 new messages