How to develop plugins efficiently?

[EvidentlyCube]

I find myself making a few plugins here and there and I still struggle with doing it efficiently.

My first attempt was to create the plugin directory following the instructions on (dev documentation)[https://tiddlywiki.com/dev/] and then after every change run node tiddlywiki.js --output output --build index and refresh the page. But that quickly gets old.

Now I am trying to use --server command and I hoped that it'll automatically pull the latest plugin changes on each refresh but it doesn't appear to be the case, I need to stop the server and start it again after every change which is even worse than the previous method.

Clearly there must be a smarter way but either it's undocumented, it's hidden or I am missing something obvious - so what's the best way to develop plugins efficiently?

And to explain what I mean efficiently, in the order of desirability:

• Server runs and there is some kind of hot module replacement going on which replaces the JS in the background, like it happens with React Dev Server
• Server runs and when it detects a plugin was changed it updates it in memory and refreshes the page automatically
• Server runs and when it detects a plugin was changed it updates it in memory and when I refresh the page manually it'll either pull the new data immediately or wait for the internal rebuild to respond with an updated page

Is any of this attainable?

[saqimtiaz]

I use the node.js server for all development work and combined with nodemon, I only need a browser refresh after making changes to the code.

tiddlywiki mywiki --init server
npm install nodemon --save-dev

Then use a npm run script to start the server with nodemon, see for example:
https://github.com/saqimtiaz/tw5-file-uploads/blob/c37ae9f580b2e052135b8876e3ae62002a18b4d5/package.json#L14

I assume this isn't set up in the official repo to avoid the nodemon dev dependency.

I also wrote starter scripts to create a skeleton directory for a new plugin, and also for adding a skeleton for a new widget or filter or startup module.

[EvidentlyCube]

Thank you, that makes things a tad faster and simpler :)

[Jermolene]

I would be interested in setting up some official template repos that encapsulate best practice for particular TiddlyWIki configurations like this.

[linonetwo]

Playground

You can use TiddlyGit to set up a local workspace, and use ln -s sourcedir yourpluginsfolder to link your plugin to the wiki's plugin folder.

And after you build up the plugin (using nodemon or webpack devserver or manually build), just click "restart service" in the context menu

to reload the plugin.

Plugin

I use rollup to build typescript plugin to js plugin , example in https://github.com/tiddly-gittly/tiddlywiki-plugins/tree/master/src/pinyin-fuzzy-search

I separate the wiki playground and plugin code, so the git change will be cleaner.

[pmario]

I do use 3 different directories. With a plugin I also need to create an edition that contains the documentation and I need a second edition to start the development server.

I know that it's possible to start a server without an extra server edition with tiddlywiki +plugins/tiddlywiki/filesystem +plugins/tiddlywiki/tiddlyweb mywiki --listen ... BUT ...

My approach has some big advantages over the start command above:

• I can load the $:/StoryList tiddler from the server directory. So it will always be saved there and doesn't "pollute" the docs edition
• I can load additional plugins with the dev server, that are not part of the docs edition
• I can use $:/DefaultTiddlers with [list[$:/StoryList]] so the last session will be reloaded
• I can use a different $:/DefaultTiddlers setting eg: GettingStarted for the docs edition, so users will have a consistent landing page
• The xxxxx-server edition contains a package.json file which allows me to start dev servers with npm start
• There are other server specific commands:
  • npm run build which creates a single file wiki for testing
  • npm run stage which builds and copies a finished edition into the homepage staging area, for finial testing
  • npm run deploy builds all editions and stages them. ... No push to github. ... This is still done manually.
• It's possible to run a local pluginLibrary edition, that allows me to test the built in TW "install plugins workflow"
  • npm run test will build the library with latest plugins and start the server ..

The whole setup can be found at: https://github.com/wikilabs .. There are 3 repos: editions, plugins and themes. ... I'm using VSCode and the "Workspace Sidebar Plugin", that lets me see all 3 directories in 1 editor session.

---

On windows I'm using the following environment variables, so TW will find the directories.

TIDDLYWIKI_EDITION_PATH     E:\git\tiddly\wikilabs\editions;E:\git\tiddly\u9t\editions;
TIDDLYWIKI_LANGUAGE_PATH    E:\git\tiddly\u9t\languages
TIDDLYWIKI_PLUGIN_PATH      E:\git\tiddly\wikilabs\plugins;E:\git\tiddly\tw5-relink\plugins;E:\git\tiddly\u9t\plugi…
TIDDLYWIKI_THEME_PATH       E:\git\tiddly\wikilabs\themes

[EvidentlyCube]

Thanks! That is an elegant solution, but I'd prefer to have every plugin as a separate repository.

[twMat]

If you, by any chance, only create wikitext plugins then maybe creating them directly in TW is more efficient, by using Andreas Hahns "Tinka Plugin Packer" plugin. I.e you create the tiddlers and use Tinka to pack them into a single plugin with the original tids as shadows.

[EvidentlyCube]

Thanks, I mostly write them in IntelliJ so that won't work for me unfortunately, but good to know about the option :).

[kookma]

@EvidentlyCube
Here is an alternative method which uses Node.js but lets you to do the work inside browser and I found it very powerful!
See ThirdFlow from @thediveo (https://github.com/TheDiveO/ThirdFlow)

Almost all kookma plugins were developed using a customized ThirdFlow!

[EvidentlyCube]

@kookma I really like this method! I'd like to keep every plugin in a separate repository (just like you do) but it doesn't seem to be possible with vanilla ThirdFlow. Can you tell me a bit more about how you develop(ed) those plugins with ThirdFlow?

[kookma]

I use a modified version of ThirdFlow!
The original version needs

• ThirdFlow
• PluginSkleton

It then grab a clean Tiddlywiki and create a single isolated folder for the project just like Python Environment!
In the browser you have all options (shortcuts with template) to create widget, filter, other JS modules, macro, stylesheet, ...
It creates a tree like structure in Sidebar > More Tab > Plugin Sources

So, while you have all Node.js tools, you have simplicity of development in browser!

What I use? I modified Thridflow to use a global installation of Tiddlywiki and Plugins and Editions
and developed some PowerShell scripts to update GitHub!

[linonetwo]

• https://github.com/tiddly-gittly/TiddlyWiki-TS-Plugin-Template
• https://github.com/tiddly-gittly/TiddlyWiki-WikiText-Plugin-Template
• https://github.com/tiddly-gittly/Modern.TiddlyDev

Development environment for programmers.