mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-13 21:34:51 +00:00
32 lines
1.9 KiB
Plaintext
32 lines
1.9 KiB
Plaintext
title: TiddlyWikiArchitecture
|
|
modifier: JeremyRuston
|
|
tags: docs internals
|
|
|
|
! Overview
|
|
|
|
The heart of TiddlyWiki can be seen as an extensible representation transformation engine. Given the text of a tiddler and its associated ContentType, the engine can produce a rendering of the tiddler in a new ContentType. Furthermore, it can efficiently selectively update the rendering to track any changes in the tiddler or its dependents.
|
|
|
|
The most important transformations are from `text/vnd.tiddlywiki` wikitext into `text/html` or `text/plain` but the engine is used throughout the system for other transformations, such as converting images for display in HTML, sanitising fragments of JavaScript, and processing CSS.
|
|
|
|
You can explore this mechanism by opening the JavaScript console in your browser. Typing this command will replace the text of the tiddler `HelloThere` with new content:
|
|
|
|
{{{
|
|
$tw.wiki.addTiddler({title: "HelloThere", text: "This is some new content"});
|
|
}}}
|
|
|
|
If the tiddler `HelloThere` is visible then you'll see it instantly change to reflect the new content. If you create a tiddler that doesn't currently exist then you'll see any displayed links to it instantly change from italicised to normal:
|
|
|
|
{{{
|
|
$tw.wiki.addTiddler({title: "TiddlyWiki5", text: "This tiddler now exists"});
|
|
}}}
|
|
|
|
The power of this mechanism also drives the interactive features of TiddlyWiki. For example, try typing the following into the JavaScript console:
|
|
|
|
{{{
|
|
$tw.wiki.addTiddler({title: "ViewDropDownState", text: "(50,50,200,200)"});
|
|
}}}
|
|
|
|
You should see the view dropdown appear in the middle of the screen. The underlying mechanism is that the creation of the tiddler with this title triggers the display of the popup at the specified location.
|
|
|
|
If you're interested in understanding more about the internal operation of TiddlyWiki, it is recommended that you review the [[Docs]] and read the code -- start with the boot kernel [[$:/core/boot.js]].
|