Plugin Development Workflow

huntsfromshadow · September 23, 2022, 12:53pm

So I’m curious what is everyone’s best workflow for plugin development?

The article on tiddlywiki.com/dev gives a good overview of how to setup the git
structure and to use the tiddlywiki node package, but it’s very light on the workflow of development itself.

Do people edit the files in a 3rd party editor (Vs code, vim etc), and if so do you just restart the tiddlywiki server? Or are you just doing everything in the tiddlywiki interface?

I’ve been using watch-fs plugin as I like using vscode for rapid development, but it crashes a lot when I am using tiddlers that become json due to field manipulation. I also noticed that watch-fs doesn’t seem to track the files in the plugins folder.

How is everyone solving these issues? Is their a better workflow that I should be using?

Mohammad · September 23, 2022, 1:11pm

There are three ways to create plugins:

Using Node.JS and develop code in third party editor like VS Code
Using Node.JS and develop code in browser, using Tiddlywiki editor (ThirdFlow )
Using single file html and develop code in browser, using Tiddlywiki editor ( Gatha, Tinka)

Note: ThirdFlow, Gatha, and Tinka are Tiddlywiki plugins developed by people to simplify the workflow.

I mainly use ThirdFlow and Gatha. In my workflow Gatha is the easiest.

saqimtiaz · September 23, 2022, 1:14pm

I use nodemon to launch tiddlywiki and monitor for file changes in the plugins directory.

Here is an example:

github.com

saqimtiaz/tw5-plugins-sandbox/blob/95b94da7db4777082e4876fa5880b6c8ac42ae80/package.json#L26

    
      
              "tiddlywiki": "github:Jermolene/TiddlyWiki5"
            },
            "devDependencies": {
              "cross-env": "^7.0.3",
              "nodemon": "^2.0.19",
              "rollup-plugin-uglify": "^6.0.4"
            },
            "scripts": {
              "build-gh": "TIDDLYWIKI_PLUGIN_PATH=plugins node ./node_modules/tiddlywiki/tiddlywiki.js editions/all-plugins --build index && cp -R editions/all-plugins/files editions/all-plugins/output/",
              "build": "cross-env TIDDLYWIKI_PLUGIN_PATH=plugins node ./node_modules/tiddlywiki/tiddlywiki.js editions/all-plugins --build index",
              "dev": "cross-env TIDDLYWIKI_PLUGIN_PATH=plugins npx nodemon -e tid,multids,js,info,css,json,meta --watch plugins ./node_modules/tiddlywiki/tiddlywiki.js editions/all-plugins --listen port=7555",
              "local": "cross-env TIDDLYWIKI_PLUGIN_PATH=plugins npx nodemon -e tid,multids,js,info,css,json,meta --watch plugins ./node_modules/tiddlywiki/tiddlywiki.js editions/all-plugins --listen host=192.168.1.115 port=8080",
              "update-tw": "npm install --save github:Jermolene/TiddlyWiki5"
            }
          }

oeyoews · September 23, 2022, 1:58pm

I put the plugin development environment together with the notebook tiddlywiki wiki, since the plugin environment is local, there is no need to set any additional environment variables， Therefore, it is also very convenient to build plugin library for personal

oeyoews · September 23, 2022, 2:08pm

Previously, I often used Gatha to quickly package plugins when I was unskilled, it was really convenient for convenient plugin developers, but after I used it for a while, I found that the tiddlers generated by Gatha were a little unfriendly to me, so I gave up temporarily took it

EricShulman · September 23, 2022, 3:19pm

There is a another way to create a plugin, without using ANY extra tools like ThirdFlow, Gatha, or Tinka…

After developing your plugin tiddlers using a third-party editor like VSCode or the in-browser TiddlyWiki tiddler editor:

Open the TiddlyWiki that contains the desired tiddlers
Open https://tiddlywiki.com/empty in a separate browser window
Drag-and-drop the desired tiddlers into https://tiddlywiki.com/empty
The $:/Import tiddler will appear. DO NOT press the “Import” button!
Instead, EDIT the $:/Import tiddler
Change the tiddler’s title to your desired plugin name (e.g., $:/plugins/yourname/pluginname)
Scroll to the bottom of the tiddler to see the “extra” fields
Change the value of the plugin-type field from “import” to “plugin”
Delete the status field
Scroll back to the top of the tiddler and press the “done” (checkmark) button to save the tiddler changes.

That’s it! You now have an INSTALLED plugin containing the “imported” tiddlers, which are all available as shadow tiddlers! Note that if there are any .js tiddlers in your plugin, you will need to save-and-reload for those tiddlers to take effect.

To install your plugin in another TiddlyWiki, you can simply drag-and-drop the newly created plugin tiddler (e.g. $:/plugins/yourname/pluginname) into that other TiddlyWiki.

enjoy,
-e

pmario · September 23, 2022, 8:02pm

Hi,
I did create a video series, that may be interesting for you.

See: New HowTo Playlist: Use Plugins with TiddlyWiki and Build Single-File Wikis using the CLI

cdaven · November 13, 2022, 8:10pm

I’ve developed my own—probably inefficient—workflow, since I haven’t been able to understand how people do this. I’m eager to learn, but I really can’t relate to what you’re saying in this thread.

This is for my Javascript-based Markdown export plugin:

I have a single-file demo wiki that contains some tiddlers with test data.
I develop in Typescript files, using Visual Studio Code, using my own inferred type definitions.
I create all content tiddlers (readme, license, test data, and so on) in the browser in the single-file demo wiki. This is saved to the html file using the Timimi extension.
- I have extracted these tiddlers to .tid files during the build stage below, and update them using Visual Studio Code.
I have created a plugin.info file using Visual Studio Code

I then have to run my custom build script after every change:

Compile Typescript to Javascript
Split/extract single-file wiki to a folder (tiddlywiki --load $TW_SINGLE_FILE --savewikifolder TW5)
If a new version of the plugin was supplied to the build script, it updates the version field in plugin.info
Copy plugin.info, all Javascript files and all .tid files to the plugins\markdown-export folder inside the folder from #2
Generate a plugin JSON file that I believe the CPL plugin library requires…?
Rebuild single-file wiki from folder and replace the previous version with the new one.
Remove the wiki folder created in #1.

This currently takes 8 seconds. Then I either refresh the single-file wiki in the browser to do some manual testing, or run a test script, that exports my test data and compares with expected output.

I realize now that I can probably make this faster by not removing and re-creating the wiki folder after each update and test. Then I should split the make script into several scripts:

Prepare: Split/extract single-file wiki to a folder
Build: Compile Typescript to Javascript and copy Javascript and .tid files to the correct folder
Publish: Update plugin.info, generate JSON file and rebuild single-file wiki

Ideas for improvements are welcome.

talha131 · November 14, 2022, 6:45am

I have a request, @EricShulman. Please also write a guide on how to create a plugin library.

It seems that most people rely on Plugin Library to receive updates, which makes a library an essential part of the plugin publication.

oeyoews · November 14, 2022, 11:24am

just a simple shellscript https://kgithub.com/oeyoews/neotw/blob/main/lib

telumire · November 14, 2022, 12:14pm

Here’s a starting point: Creating Libraries

linonetwo · June 10, 2023, 6:21pm

I’m using Best TW Dev Framework! Easy WYSIWYG plugin developing, support TypeScript

vuk · November 24, 2024, 11:36am

Such kind of recipes must be collected at least at https://tiddlywiki.com/dev/. In forum they get mixed with less technical content and the chances to find them go below 100% because of it.

I made my first plugin while learning with Tinka and the only additional thing it does is autobumping versions. But the huge didactic advantage of this over Tinka is that it explains much better what’s happening.