Pack External Javascript in Tiddlywiki

sam paul

unread,

Dec 22, 2024, 5:01:41 AM12/22/24

to TiddlyWikiClassic

Hello. Is there a way to place external javascripts in a tiddler and load it in the wiki to replace '<script src="" ></script>' in the markupprebody?

Yakov

unread,

Dec 22, 2024, 5:49:45 AM12/22/24

to TiddlyWikiClassic

Hi Sam, there's a number of ways to load external js (take a look, for instance, at loadJS in TwFormulaPlugin, or a more sophisticated way to load a script and allow to unload it in DisqusPlugin), so could you specify what are you trying to achieve? I didn't get the

> to replace '<script src="" ></script>' in the markupprebody

part, as MarkupPreBody is empty by default and MarkupPreHead is move suitable for using script tags (you can put '<script src="..."></script>' there if you just want to load external JS, just don't forget to reload TW to get it applied).

воскресенье, 22 декабря 2024 г. в 13:01:41 UTC+3, samp...@gmail.com:

sam paul

unread,

Dec 22, 2024, 9:09:58 AM12/22/24

to TiddlyWikiClassic

Hi Yakov. I mean, paste a js file in a tiddler and name it as something.js. Then load it in other tiddler using some syntax like [[something.js]] just like load a picture.

Yakov

unread,

Dec 22, 2024, 11:05:31 AM12/22/24

to TiddlyWikiClassic

Right, I believe there's no such thing in TWC yet (and would be difficult to implement without hurting backward compatibility), however, there are some options:

tag [[something.js]] with systemConfig and use |Require|something.js| in the other tiddler: this will ensure that the plugin with the Require is launched after [[something.js]], so if that one introduced or changed something in the global context (like added something to config.macros or just to window, like window.myThing = ...) then it will be available in the plugin that uses Require;
I also have CookTiddlerPlugin which concatenates tiddlers on change of any tiddler that listed in a "recipe" and also can restart a plugin after "cooking" and do other stuff. If you're interested, I can pre-release it (I haven't finished docs for it, though). I use it when I work on plugins that I'd prefer to be splitted into several tiddlers for easier navigation, and also for plugins that use external libs to "bake them in" without hurting developer experience.

Let me know whether any of these approaches fits your needs.

воскресенье, 22 декабря 2024 г. в 17:09:58 UTC+3, samp...@gmail.com:

sam paul

unread,

Dec 28, 2024, 8:18:45 AM12/28/24

to TiddlyWikiClassic

Hi Yakov. For example, I want to use tikzjax https://tikzjax.com/ in a tiddler. It needs to parse the tag <script type="text/tikz">. I guess the only way is to write a new plugin.

sam paul

unread,

Dec 28, 2024, 10:59:11 AM12/28/24

to TiddlyWikiClassic

Also, the I see the inlinejavascript is not able to use many js library. Are there any alternative methods to call js in toddler directly? It would be so much work to write plugins for every js lib.

Yakov

unread,

Jan 10, 2025, 3:23:41 PM1/10/25

to TiddlyWikiClassic

Hi Sam,

I'm afraid the answer is more complicated that you would like it to be. The first part is simple: you can do this in your tiddler

<html><script type="text/tikz">
\begin{tikzpicture}
\draw (0,0) circle (1in);
\end{tikzpicture}
</script></html>

and this results in a script element with the chosen type and text.

The problem, however, is with the lib itself (or rather with its compatibility with dynamic pages like TW). The problem is (well, at least seems to be), when the lib loads: as far as I can see, it loads once the page is loaded, and (that's my guess which is difficult to check as I can't see the non-minified source like https://tikzjax.com/v1/tikzjax.js) searches for all the (script?) elements with type of "text/tikz" that are on the page already, and substitutes them with SVGs. But in TW, you usually don't have this elements on the page load: instead, the are shown once a tiddler is open (even if it is among default tiddlers, this is later than window.onload). This would work like with MathJax in https://YakovL.github.io/TiddlyWiki_TwFormulaPlugin if the lib itself checked new "text/tikz" elements and applied its magic to them, or if it worked like KaTeX, which provides an explicit method to render these bits (katex.render in this example), although this would require writing a plugin for this.

I guess, the only solution for tikz specifically is to ask the author if they can help (you can refer to this thread for details). Luckily, they left their contact on tikzjax.com.

As for loading external libs, if they provide some global object to use, they can be added by inserting the script tag into MarkupPreHead, saving and reloading. But again, it's not always trivial to use some bits on a dynamic page in the same fashion as some static pages. Take for instance https://github.com/YakovL/TiddlyWiki_DisqusPlugin: the implementation for a single thread was rather trivial (I only added a macro that reproduces what Disqus suggests), but supporting multiple threads wasn't trivial and I only implemented it somewhat quickly because it was adapted earlier to TW5.

So yeah, I can only suggest to ask about specific libs, as there's not simple answer for all of them at once.

суббота, 28 декабря 2024 г. в 18:59:11 UTC+3, samp...@gmail.com:

Reply all

Reply to author

Forward