Note: An alternative skin, TW4MW (work in progress), is available from the user preferences.

TiddlyWiki Community Wiki

[edit] The Edit/Test Cycle

Initially when the developer starts working on a Plugin, the Edit/Test cycle will typically be:

• edit the Plugin Tiddler in the TiddlyWiki
• save the TiddlyWiki
• re-load the HTML file in the browser
• execute the test case(s) (assuming there were no syntax errors in the code)

As the size and complexity of the Plugin grows, it can be helpful to factor the Plugin code into its own file and to use certain browser Add-ons as an aid. This allows editing the Plugin code in any editor, including programmers editors that have syntax highlighting, auto-complete, code-folding, and other useful development features.

• Keep the Plugin source code in a separate file
• Have the test TiddlyWiki load the Plugin from the Plugin source file
• Use Firefox add on Firefox Web Developer, very useful for finding those uncaught JavaScript exceptions.
• Firefox add on IE Tab is also extremely useful for developing under Windows as it allows the developer to switch rendering engines between IE and Firefox - testing Firefox/IE compatibility in one browser.

[edit] Procedure for Loading a Plugin From An External File

[edit] The Simplest Method

To make a Test TiddlyWiki that loads the Plugin from a file, a couple of things are needed.

• An empty TiddlyWiki into which is installed
• A test Tiddler called MarkupPostBody with the following contents:

<script src="file:///Path/to/your/new/plugin.js" language="javascript" type="text/javascript"></script>

1. Save the Test TiddlyWiki.
2. Reload the Test TiddlyWiki - the Plugin will be loaded.
3. It should now be possible to edit the Plugin code in any editor and simply refresh the browser to load any changes.

Please note:

• Make sure that no tiddler contains a duplicate copy of the Plugin source code.
• The Plugin will no longer be visible in the Plugin Manager.
• This method will not work for all Plugins. Some Plugins require access to 'story', which does not exist at the time that this script would execute the plugin code.

[edit] The Comprehensive Method

To fix the problems noted above, Saq Imtiaz suggested (in a TiddlyWikiDev Google Group post) the following method:

1. Create the same MarkupPostBody tiddler as before, but instead of loading plugin.js, load a JavaScript file called 'loadExternal.js', which contains the following text

old_load_plugins = window.loadPlugins;
window.loadPlugins=function()
{
        old_load_plugins.apply(this,arguments);
        loadExternalScripts.apply(this,arguments);
};
function loadExternalScripts()
{
        if (!store.isTiddler("ExternalScripts"))
           return;
        var originalPath = document.location.toString();
        var localPath = getLocalPath(originalPath);
        var backSlash = true;
        var dirPathPos = localPath.lastIndexOf("\\");
        if(dirPathPos == -1) {
                dirPathPos = localPath.lastIndexOf("/");
                backSlash = false;
        }
        var scriptPath = localPath.substr(0,dirPathPos) + (backSlash ? "\\" : "/");
        var scripts = store.getTiddlerText("ExternalScripts").readBracketedList();
        for (var i=0; i<scripts.length;i++)
                {
                eval(loadFile(scriptPath+scripts[i]));
                }
};
TiddlyWiki.prototype.isTiddler= function (title)
{
        return store.tiddlerExists(title) || store.isShadowTiddler(title);
};

1. After creating the MarkupPostBody and the above file, create a New Tiddler called 'ExternalScripts' and place within it a list of files (newline delimited) of the javascript source code for the Plugin under development. This script hijacks the Plugin load module and loads the Plugin(s) from files, rather than from tiddlers, after the story has been created, allowing the Plugin to execute exactly as it would as if it had been loaded from a tiddler.
2. Save the test TiddlyWiki and reload. The Plugin still won't appear in the Plugins backstage area but it will have executed.

[edit] Debugging Tips

During development, the developer can use the alert() javascript function, but a more useful TiddlyWiki one is displayMessage() - this is the one that puts those 'saved' messages at the top right of the screen.

It is also possible to have 'permalink' setup to the testing tiddler(s) such that the refresh brings up the test tiddlers straight away, without having to search and click. Simply display all the relevant testing tiddlers, click the permalink button and then refresh as appropriate.

[edit] See Also

• Dev:Plugin Specifications
• Dev:Best Practices