Comment modifie-t-on un JavaScript pour qu'il fonctionne dans TW ?


#1

Je ne vais clairement pas beaucoup poster dans cette catégorie, alors je pose ce lien que j’avais mis de côté en 2015 d’une discussion initiée par Mat sur la liste anglophone, et notamment la réponse détaillée de PMario, que je me permets de recopier ci-dessous.


How is a javascript modified to run in TW ?

[2019-02-17: Note @prolegomenes] Visible également sur Mail Archive à l’adresse https://www.mail-archive.com/tiddlywiki@googlegroups.com/msg51295.html

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

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


Et je rajoute la réponse de Jeremy Ruston


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.


#2

Merci pour ce post bien utile.

Viens quand même nous voir de temps en temps sur cette catégorie. Nous avons besoin de tes compétences :smiley: