Hi Simon, Things are a bit different in TW5 when it comes to plugins and can take a bit to wrap one's head around. Plugins are just a collection or packaging of tiddlers.
The general idea in TW5 that I use is, try to do as much as you can with wikitext, macros and widgets and when you find something there is no widget for, write one. That is, the focus again is on writing re-usable widgets that implement the missing behaviour that you need. Keep in mind that the entire TiddlyWiki UI is written in this manner. Macros <https://tiddlywiki.com/#Macros> are used just to do text substitution. Most macros are defined in wikitext <https://tiddlywiki.com/#Macros%20in%20WikiText> but there are JavaScript macros <https://github.com/Jermolene/TiddlyWiki5/tree/master/core/modules/macros> as well. Widgets <https://tiddlywiki.com/#Widgets:Widgets%20%5B%5BWidgets%20in%20WikiText%5D%5D> are used to be build UI and associated behaviour. Note that there is a widget tree, and refresh is propagated through the widget tree from the root node. So for instance if you wanted to create a button that displays a message to the user you could use something like this: <$button> <$action-sendmessage $message="tm-notify" $param="HelloThere"/> Click me! </$button> What we have here is a button <https://tiddlywiki.com/#ButtonWidget> widget, which creates a button UI element which can be used to trigger action widgets <https://tiddlywiki.com/#ActionWidgets>. In this particular case, we use the action-sendmessage widget which sends the message tm-notify, displaying the contents of the tiddler HelloThere. ActionWidgets are a special case in that they don't implement any UI but rather carry out actions and are triggered by widgets that can trigger actions (such as Button or Checkbox etc..). Action widgets can be extremely powerful. As an example, in the Streams plugin <https://saqimtiaz.github.io/streams/>, there is keyboard handling for moving between list items, indenting them etc. All of this is handled by actions. Coming back to your example of showing an alert on clicking a button, as far as I can remember we do not have an action-widget for displaying alerts. So to implement this you would use a ButtonWidget as above, but with your own action-widget, let's call it action-alert. A good starting point when writing a module for TiddlyWiki - we will come back to modules a little later for now just understand that widgets are a type of module - is to find a similar one to use as an example. For example, action-log.js <https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/widgets/action-log.js> Note that all widgets inherit from the Widget base class <https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/widgets/widget.js>. Now looking at action-log.js, note the comments at the top especially the lines for title, type and module-type. These are mapped to tiddler fields in a node.js environment, but can otherwise be added the usual way as fields. The module-type set to widget is what tells TiddlyWiki to treat the code in this tiddler as a widget. In an action widget, it is the invokeAction <https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/widgets/action-log.js#L51> method that is triggered when the action is executed by a triggering widget such as ButtonWidget. This is where your behaviour goes. The execute method <https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/widgets/action-log.js#L35> is where you read and assign parameters accepted by the widget, in this case it would be the text to display. The refresh method determines what to do if the input parameters have changed, destroy and re-create the entire widget and its children if any, or selectively update attributes of the widget (and associated DOM nodes if any). So using action-log.js as a starting point and making a few changes, we arrive at this to show alerts (untested code): https://gist.github.com/saqimtiaz/4733d7a81784103d66610275a2160c93 Now you have an action-alert action widget that can be used whenever you need to trigger an alert for example: <$button> <$action-alert message="HelloThere"/> Click me! </$button> TiddlyWiki implements several module-types <https://tiddlywiki.com/#ModuleType> which determine when and how JavaScript code is interpreted. As we discussed above, Widget tiddlers have the module-type widget. Similarly tiddlers with the module-type startup <https://tiddlywiki.com/dev/#StartupMechanism>are executed after loading all tiddlers and plugins but before the UI is displayed. (Note that tiddlywiki.com/dev is a better resource for JavaScript development). Also perhaps useful to point out there that a plugin can contain several tiddlers, some of which may be startup modules and others may for example be widgets. That is, the JavaScript tiddlers in a plugin can be executed at different times. Especially on the topic of startup behaviour, there are a lot of facilities as well to execute action-widgets on startup <https://tiddlywiki.com/#StartupActions> as an alternative to writing JavaScript. Probably the other big and important topic is filters. Filters have become extremely powerful and versatile <https://tiddlywiki.com/#Filter%20Operators> and combined with action widgets can be used to implement complex behaviours. I am unsure if you were active towards the end days of TWC when filters were first introduced. Hope this helps. Regards, Saq On Wednesday, March 10, 2021 at 10:45:50 PM UTC+1 SimonBaird wrote: > https://tiddlywiki.com/#PluginMechanism talks about plugins and how they > work etc, but how do I make one? > > Suppose I wanted to run alert("Hello") when TiddlyWiki starts up, or > create a macro that creates a button that runs alert("Hello World"). > > Where do I begin? > > > -Simon > > -- > simon...@gmail.com > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/2ee2978e-a564-4f23-ad7a-a6ca33c4ac14n%40googlegroups.com.
