<h1>Welcome to <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a></h1><divclass='tw-tiddler-frame'data-tiddler-target='HelloThere'data-tiddler-template='HelloThere'><p>Welcome to <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a>, a reboot of <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TiddlyWiki'>TiddlyWiki</a>, the venerable, reusable non-linear personal web notebook first released in 2004. It is a complete interactive wiki that can run from a single HTML file in the browser or as a powerful <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='What%20is%20node.js%3F'>node.js application</a>.</p><p><aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a> is currently at version 5.0.0.a2 and is under active development, which is to say that it is useful but incomplete. You can try out the online prototype at <aclass='tw-tiddlylink tw-tiddlylink-external'href='http://tiddlywiki.com/tiddlywiki5'>http://tiddlywiki.com/tiddlywiki5</a>, <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TryingOutTiddlyWiki'>try out the command line incarnation</a>, get involved in the <aclass='tw-tiddlylink tw-tiddlylink-external'href='https://github.com/Jermolene/TiddlyWiki5'>development on GitHub</a> or join the discussions on <aclass='tw-tiddlylink tw-tiddlylink-external'href='http://groups.google.com/group/TiddlyWikiDev'>the TiddlyWikiDev Google Group</a>.</p></div><h1>Usage</h1><divclass='tw-tiddler-frame'data-tiddler-target='CommandLineInterface'data-tiddler-template='CommandLineInterface'><p><aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a> can be used on the command line to perform an extensive set of operations based on tiddlers, <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TiddlerFiles'>TiddlerFiles</a> and <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWikiFiles'>TiddlyWikiFiles</a>. For example, this loads the tiddlers from a <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TiddlyWiki'>TiddlyWiki</a> HTML file and then saves one of them in HTML:</p><pre>node core/boot.js --verbose --load mywiki.html --savetiddler ReadMe ./readme.html</pre><h1>Usage</h1><p>Running <code>boot.js</code> from the command line boots the <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TiddlyWiki'>TiddlyWiki</a> kernel, loads the core plugins and establishes an empty wiki store. It then sequentially processes the command line arguments from left to right. The arguments are separated with spaces. The commands are identified by the prefix <code>--</code>.</p><pre>node core/boot.js [--<option> [<arg>[,<arg>]]]</pre><h1>Commands</h1><p>The following commands are available.</p><h1> load</h1><p>Load tiddlers from 2.x.x <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TiddlyWiki'>TiddlyWiki</a> files (<code>.html</code>), <code>.tiddler</code>, <code>.tid</code>, <code>.json</code> or other files </p><pre>--load <filepath></pre><h1> savetiddler</h1><p>Save an individual tiddler as a specified MIME type, defaults to <code>text/html</code></p><pre>--savetiddler <title><filename> [<type>]</pre><h1> wikitest</h1><p>Run wikification tests against the tiddlers in the given directory. Include the <code>save</code> flag to save the test result files as the new targets.</p><pre>--wikitest <dir> [save]</pre><p><code>--wikitest</code> looks for <code>*.tid</code> files in the specified folder. It then wikifies the tiddlers to both "text/plain" and "text/html" format and checks the results against the content of the <code>*.html</code> and <code>*.txt</code> files in the same directory.</p><h1> server</h1><p>The server is very simple. At the root, it serv
store.addTiddler(new Tiddler(storyTiddler,{text: navigateTo + "\n" + storyTiddler.text}));</pre><p>The mechanisms that allow all of this to work are fairly intricate. The sections below progressively build the key architectural concepts of <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a> in a way that should provide a good basis for exploring the code directly.</p><h1> Tiddlers</h1><p>Tiddlers are an immutable dictionary of name:value pairs called fields.</p><p>The only field that is required is the <code>title</code> field, but useful tiddlers also have a <code>text</code> field, and some or all of the standard fields <code>modified</code>, <code>modifier</code>, <code>created</code>, <code>creator</code>, <code>tags</code> and <code>type</code>.</p><p>Hardcoded in the system is the knowledge that the <code>tags</code> field is a string array, and that the <code>modified</code> and <code>created</code> fields are <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='JavaScript'>JavaScript</a><code>Date</code> objects. All other fields are strings.</p><p>The <code>type</code> field identifies the representation of the tiddler text with a MIME type.</p><h1> WikiStore</h1><p>Groups of uniquely titled tiddlers are contained in <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiStore'>WikiStore</a> objects.</p><p>The <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiStore'>WikiStore</a> also manages the plugin modules used for macros, and operations like serializing, deserializing, parsing and rendering tiddlers.</p><p>Each <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiStore'>WikiStore</a> is connected to another shadow store that is used to provide default content. Under usual circumstances, when an attempt is made to retrieve a tiddler that doesn't exist in the store, the search continues into its shadow store (and so on, if the shadow store itself has a shadow store).</p><h1> WikiStore Events</h1><p>Clients can register event handlers with the <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiStore'>WikiStore</a> object. Event handlers can be registered to be triggered for modifications to any tiddler in the store, or with a filter to only be invoked when a particular tiddler or set of tiddlers changes.</p><p>Whenever a change is made to a tiddler, the wikistore registers a <code>nexttick</code> handler (if it hasn't already done so). The <code>nexttick</code> handler looks back at all the tiddler changes, and dispatches any matching event handlers. </p><h1> Parsing and Rendering</h1><p><aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TiddlyWiki'>TiddlyWiki</a> parses the content of tiddlers to build an internal tree representation that is used for several purposes:</p><ul><li> Rendering a tiddler to other formats (e.g. converting wikitext to HTML)</li><li> Detecting outgoing links from a tiddler, and from them...</li><li> ...computing incoming links to a tiddler</li><li> Detecting tiddlers that are orphans with no incoming links</li><li> Detecting tiddlers that are referred to but missing</li></ul><p>The parse tree is built when needed, and then cached by the <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiStore'>WikiStore</a> until the tiddler changes.</p><p><aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a> uses multiple parsers:</p><ul><li> Wikitext (<code>text/x-tiddlywiki</code>) in <code>js/WikiTextParser.js</code></li><li><aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='JavaScript'>JavaScript</a> (<code>text/javascript</code>) in <code>js/JavaScriptParser.js</code></li><li> Images (<code>image/png</code> and <code>image/jpg</code>) in <code>js/ImageParser.js</code></li><li> JSON (<code>application/json</code>) in <code>js/JSONParser.js</code></li></ul><p>Additional
* Recipe (<code>text/x-tiddlywiki-recipe</code>)</p><p>One global instance of each parser is instantiated in <code>js/App.js</code> and registered with the main <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiStore'>WikiStore</a> object.</p><p>The parsers are all used the same way:</p><preclass='javascript-source'><spanclass='javascript-keyword'>var</span><spanclass='javascript-identifier'>parseTree</span><spanclass='javascript-punctuator'>=</span><spanclass='javascript-identifier'>parser</span><spanclass='javascript-punctuator'>.</span><spanclass='javascript-identifier'>parse</span><spanclass='javascript-punctuator'>(</span><spanclass='javascript-identifier'>type</span><spanclass='javascript-punctuator'>,</span><spanclass='javascript-identifier'>text</span><spanclass='javascript-punctuator'>)</span><spanclass='javascript-comment javascript-line-comment'>// Parses the text and returns a parse tree object
</span></pre><p>The parse tree object exposes the following fields:</p><preclass='javascript-source'><spanclass='javascript-keyword'>var</span><spanclass='javascript-identifier'>renderer</span><spanclass='javascript-punctuator'>=</span><spanclass='javascript-identifier'>parseTree</span><spanclass='javascript-punctuator'>.</span><spanclass='javascript-identifier'>compile</span><spanclass='javascript-punctuator'>(</span><spanclass='javascript-identifier'>type</span><spanclass='javascript-punctuator'>)</span><spanclass='javascript-punctuator'>;</span><spanclass='javascript-comment javascript-line-comment'>// Compiles the parse tree into a renderer for the specified MIME type
</span><spanclass='javascript-identifier'>console</span><spanclass='javascript-punctuator'>.</span><spanclass='javascript-identifier'>log</span><spanclass='javascript-punctuator'>(</span><spanclass='javascript-identifier'>parseTree</span><spanclass='javascript-punctuator'>.</span><spanclass='javascript-identifier'>toString</span><spanclass='javascript-punctuator'>(</span><spanclass='javascript-identifier'>type</span><spanclass='javascript-punctuator'>)</span><spanclass='javascript-punctuator'>)</span><spanclass='javascript-punctuator'>;</span><spanclass='javascript-comment javascript-line-comment'>// Returns a readable string representation of the parse tree (either <code>text/html</code> or <code>text/plain</code>)
</span><spanclass='javascript-keyword'>var</span><spanclass='javascript-identifier'>dependencies</span><spanclass='javascript-punctuator'>=</span><spanclass='javascript-identifier'>parseTree</span><spanclass='javascript-punctuator'>.</span><spanclass='javascript-identifier'>dependencies</span><spanclass='javascript-punctuator'>;</span><spanclass='javascript-comment javascript-line-comment'>// Gets the dependencies of the parse tree (see below)
}</pre><p>The <code>tiddlers</code> field is a hashmap of the title of each tiddler that is linked or included in the current one. The value is <code>true</code> if the tiddler is a <em>'fat'</em> dependency (ie the text is included in some way) or <code>false</code> if the tiddler is a <em><code>skinny</code></em> dependency.</p><p>The <code>dependentAll</code> field is used to indicate that the tiddler contains a macro that scans the entire pool of tiddlers (for example the <code><<list>></code> macro), and is potentially dependent on any of them. The effect is that the tiddler should be rerendered whenever any other tiddler changes.</p><h1> Rendering</h1><p>The <code>parseTree.compile(type)</code> method returns a renderer object that contains a <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='JavaScript'>JavaScript</a> function that generates the new representation of the original parsed text.</p><p>The renderer is invoked as follows:</p><preclass='javascript-source'><spanclass='javascript-keyword'>var</span><spanclass='javascript-identifier'>renderer</span><spanclass='javascript-punctuator'>=</span><spanclass='javascript-identifier'>parseTree</span><spanclass='javascript-punctuator'>.</span><spanclass='javascript-identifier'>compile</span><spanclass='javascript-punctuator'>(</span><spanclass='javascript-string'>"text/html"</span><spanclass='javascript-punctuator'>)</span><spanclass='javascript-punctuator'>;</span>
</pre><p>The <code>tiddler</code> parameter to the <code>render</code> method identifies the tiddler that is acting as the context for this rendering – for example, it provides the fields displayed by the <code><<view>></code> macro. The <code>store</code> parameter is used to resolve any references to other tiddlers.</p><h1> Rerendering</h1><p>When rendering to the HTML/SVG DOM in the browser, <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a> also allows a previous rendering to be selectively updated in response to changes in dependent tiddlers. At the moment, only the <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiTextRenderer'>WikiTextRenderer</a> supports rerendering.</p><p>The rerender method on the renderer is called as follows:</p><pre>var node = document.getElementById("myNode");
renderer.rerender(node,changes,tiddler,store,renderStep);</pre><p>The parameters to <code>rerender()</code> are:</p><p>|!Name |!Description |
|node |A reference to the DOM node containing the rendering to be rerendered |
|changes |A hashmap of <code>{title: "created|modified|deleted"}</code> indicating which tiddlers have changed since the original rendering |
|tiddler |The tiddler providing the rendering context |
|store |The store to use for resolving references to other tiddlers |
|renderStep |See below |</p><p>Currently, the only macro that supports rerendering is the <code><<story>></code> macro; all other macros are rerendered by calling the ordinary <code>render()</code> method again. The reason that the <code><<story>></code> macro goes to the trouble of having a <code>rerender()</code> method is so that it can be carefully selective about not disturbing tiddlers in the DOM that aren't affected by the change. If there were, for instance, a video playing in one of the open tiddlers it would be reset to the beginning if the tiddler were rerendered.
</p></div><h1>Plugin Mechanism</h1><divclass='tw-tiddler-frame'data-tiddler-target='PluginMechanism'data-tiddler-template='PluginMechanism'><h1>Introduction</h1><p><aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a> is based on a 500 line boot kernel that runs on node.js or in the browser, and everything else is plugins.</p><p>The kernel boots just enough of the <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TiddlyWiki'>TiddlyWiki</a> environment to allow it to load tiddlers as plugins and execute them (a barebones tiddler class, a barebones wiki store class, some utilities etc.). Plugin modules are written like <code>node.js</code> modules; you can use <code>require()</code> to invoke sub components and to control load order.</p><p>There are several different types of plugins: parsers, serializers, deserializers, macros etc. It goes much further than you might expect. For example, individual tiddler fields are plugins, too: there's a plugin that knows how to handle the <code>tags</code> field, and another that knows how to handle the special behaviour of
the <code>modified</code> and <code>created</code> fields.</p><p>Some plugins have further sub-plugins: the wikitext parser, for instance, accepts rules as individual plugins.</p><h1>Plugins and Modules</h1><p>In <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a>, a plugin is a bundle of related tiddlers that are distributed together as a single unit. Plugins can include tiddlers which are <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='JavaScript'>JavaScript</a> modules. </p><p>The file <code>core/boot.js</code> is a barebones <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TiddlyWiki'>TiddlyWiki</a> kernel that is just sufficient to load the core plugin modules and trigger a startup plugin module to load up the rest of the application.</p><p>The kernel includes:</p><ul><li> Eight short shared utility functions</li><li> Three methods implementing the plugin module mechanism</li><li> The <code>$tw.Tiddler</code> class (and three field definition plugins)</li><li> The <code>$tw.Wiki</code> class (and three tiddler deserialization methods)</li><li> Code for the browser to load tiddlers from the HTML DOM</li><li> Code for the server to load tiddlers from the file system</li></ul><p>Each module is an ordinary <code>node.js</code>-style module, using the <code>require()</code> function to access other modules and the <code>exports</code> global to return <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='JavaScript'>JavaScript</a> values. The boot kernel smooths over the differences between <code>node.js</code> and the browser, allowing the same plugin modules to execute in both environments.</p><p>In the browser, <code>core/boot.js</code> is packed into a template HTML file that contains the following elements in order:</p><ul><li> Ordinary and shadow tiddlers, packed as HTML <code><DIV></code> elements</li><li><code>core/bootprefix.js</code>, containing a few lines to set up the plugin environment</li><li> Plugin <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='JavaScript'>JavaScript</a> modules, packed as HTML <code><SCRIPT></code> blocks</li><li><code>core/boot.js</code>, containing the boot kernel</li></ul><p>On the server, <code>core/boot.js</code> is executed directly. It uses the <code>node.js</code> local file API to load plugins directly from the file system in the <code>core/modules</code> directory. The code loading is performed synchronously for brevity (and because the system is in any case inherently blocked until plugins are loaded).</p><p>The boot kernel sets up the <code>$tw</code> global variable that is used to store all the state data of the system.</p><h1>Core </h1><p>The 'core' is the boot kernel plus the set of plugin modules that it loads. It contains plugins of the following types:</p><ul><li><code>tiddlerfield</code> - defines the characteristics of tiddler fields of a particular name</li><li><code>tiddlerdeserializer</code> - methods to extract tiddlers from text representations or the DOM</li><li><code>startup</code> - functions to be called by the kernel after booting</li><li><code>global</code> - members of the <code>$tw</code> global</li><li><code>config</code> - values to be merged over the <code>$tw.config</code> global</li><li><code>utils</code> - general purpose utility functions residing in <code>$tw.utils</code></li><li><code>tiddlermethod</code> - additional methods for the <code>$tw.Tiddler</code> class</li><li><code>wikimethod</code> - additional methods for the <code>$tw.Wiki</code> class</li><li><code>treeutils</code> - static utility methods for parser tree nodes </li><li><code>treenode</code> - classes of parser tree nodes</li><li><code>macro</code> - macro definitions</li><li><code>editor</code> - interactive editors for different types of content</li><li><code>parser</code> - parsers for different types of content</li><li><code>wikitextrule</code> - individual rules for the wikitext parser</
</p></div><h1>Planned <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiText'>WikiText</a> Features</h1><divclass='tw-tiddler-frame'data-tiddler-target='NewWikiTextFeatures'data-tiddler-template='NewWikiTextFeatures'><p>It is proposed to extend the existing <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'href='TiddlyWiki'>TiddlyWiki</a><aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiText'>WikiText</a> syntax with the following extensions</p><ol><li> Addition of <code>**bold**</code> character formatting</li><li> Addition of <code>`backtick for code`</code> character formatting</li><li> Addition of <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiCreole-style'>WikiCreole-style</a> forced line break, e.g. <code>force\\linebreak</code></li><li> Addition of <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiCreole-style'>WikiCreole-style</a> headings, e.g. <code>==Heading</code></li><li> Addition of <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiCreole-style'>WikiCreole-style</a> headings in tables, e.g. <code>|=|=table|=header|</code></li><li> Addition of white-listed HTML and SVG tags intermixed with wikitext</li><li> Addition of <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='WikiCreole-style'>WikiCreole-style</a> pretty links, e.g. <code>[[description -> link]]</code></li><li> Addition of multiline macros, e.g.</li></ol><pre><<myMacro
$$$</pre></div><p><em>This <code>readme</code> file was automatically generated by <aclass='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'href='TiddlyWiki5'>TiddlyWiki5</a></em>
