Useful examples of third-party JS integrations

Developers
, ,
#1

Would people point me to integrations with 3rd-party JS that are particularly instructive? I think the only one that I use regularly is Mermaid, and I will look at that one soon. What other ones do you find well-written and/or inspriring?

My team at GigantiCorp has a summer intern, who’s been looking at some of the documentation I’ve done in TW. She’s figured her way around pretty well, and has been interested in writing her own plugin.

What she wants to do overlaps a great deal with the recent request in First Post + Help On Lightbox Gallery System in Tiddlywiki?. So maybe she will be helping someone out at the same time she scratches her own itch. We are both assuming that this will involve integrating a third-party lightbox implementation, although there are certainly other approaches.

I haven’t tried to do this. I’ve written my own JS widgets and filter-operators. But I’ve never tried to integrate someone else’s work, to fit a different style of code interface with TW. So I’m looking for examples that would help show the basics of how its done rather than the ones with the most amazing output. But really, any suggestions are welcome.

For whatever reason, she would much rather talk to me than to join the forums – not an attitude that I understand myself, but I am ancient compared to this 21-year old rising junior, so who am I to say?

#2

As always – It depends :wink:

There are a ton of lightbox libraries out there. So it depends, on the requirements, and how big the stuff is.

  • Saq Imtiaz did implement a nice LightBox widget using an external library spotlight.js
  • The implementation is very minimalistic. So is his code and the documentation
  • The 3rd party library is spotlight
    • The good thing with the spotlight repo is, that it contains a dist/ directory, which contains all the elements we need. js, SVGs and the css.
    • dist/js/spotlight.min.js is a minified version - but seems to be different to the one Saq used.

If you directly want to start with my links, you are probably completely lost, because all the TW basics are missing.

So there are some questions

  • Which 3rd party library has the features that are needed.
  • Do they have a dist/ directory
    • If not you probably need to get the minified version from a CDN or build it on your own
  • How should the TW development system look like?
    • What does your “summer intern” know about programming?
    • HTML, CSS, Javascript? or any other language / languages?
    • Github?
    • VSCode?

TW has a developers edition https://tiddlywiki.com/dev/ which contains information about the TW internals.

Programmers only!

That’s it for the beginning.
Hope that makes sense.

#3

Not only does it make sense, it’s exactly what I was hoping for. Thank you! This alone is probably enough for a great start: $:/plugins/tiddlywiki/confetti/confetti-widget.js.

Yes, that helps, but Swathi is advanced enough that she could probably find what she needs in any reasonably-written implementation. She’s the most advanced intern I’ve dealt with in the past decade. She is already competent in most of the web technologies, and I would consider her at minimum an intermediate JS user, and close to advanced. (Of course maybe this is because I’m flattered that she attached herself to me when she found out I was the author of the library she used in a course last semester!) She’s teaching me things about React and git I never knew.

I find that surprising. With all the minification tools available, why not minify ourselves? Is there some licensing concern?

Oh, that one is nice. We looked at a few others, including another one using Spotlight, but this is much more flexible than them. Thank you. We will have to look around to see if Spotlight has all the capabilities required or if another library does. (Mostly displaying metadata atop the image, but Swathi has some additional ideas; in the end, we’ll probably want to use a lightbox-like mechanism to display full tiddlers with some template.)

Yes, I’ve been through that a few times, but I’d forgotten to show it to her. I’ll do so.

#4

I’d recommend some plugins I wrote.

  1. GitHub - tiddly-gittly/hyper-table: Present large amounts of data beautifully and efficiently, generate pivot tables and other advanced table presentations for tiddlers. is a very short integration of vtable package, just let it render table on a div created by tiddlywiki
  2. GitHub - tiddly-gittly/tw-command-palette: Command palette Chinese translated is also a thin wrapper around @algolia/autocomplete-js , it shows how to search your wiki in a 3rd party framework
  3. GitHub - tiddly-gittly/tiddlywiki-calendar: Widget and Page Layout displaying tiddlers on calendar and agenda, based on created, modified, startDate and endDate fields. wrap the fullcalendarjs, but I add ability to open popup written with wikitext to it, this technique is a bit advanced.

They are all initialize 3rd party code inside widget’s render method.

And they all use Modern.TiddlyDev, see https://tiddlywiki.com/dev/#Using%20ES2016%20for%20Writing%20Plugins , it is the key part to make dev fun for a junior developer. I also enjoy the hot reload and eslint linting when I started learning React.js when I was 19.

#5

Thank you. We’ll check them out next week.

#6

Pretty much all my plugins (in particular, all the charting ones) are integrating somebody else’s library into TW:

https://www.scss.com.au/family/andrew/tiddlywiki/

I wouldn’t necessarily call them great examples, but they work.

4 Likes
#7

Very good stuff.
I’m sure I’ve seen it before but keep forgetting to use it!