Major reorganisation of wikitext rendering

Getting ready to support selective refresh of DOM elements
2025-12-07 09:18:06 +00:00 · 2012-01-24 16:26:37 +00:00
parent 870529f76b
commit 398831b0d9
13 changed files with 286 additions and 104 deletions
--- a/js/BitmapParser.js
+++ b/js/BitmapParser.js
@@ -9,6 +9,17 @@ Compiles bitmap images into JavaScript functions that render them in HTML
 /*jslint node: true */
 "use strict";

+var utils = require("./Utils.js");
+
+var BitmapRenderer = function(handlerCode) {
+	/*jslint evil: true */
+	this.handler = eval(handlerCode);
+};
+
+BitmapRenderer.prototype.render = function(tiddler,store) {
+	return this.handler(tiddler,store,utils);
+};
+
 // The parse tree is degenerate
 var BitmapParseTree = function() {
 	this.dependencies = [];
@@ -16,7 +27,7 @@ var BitmapParseTree = function() {

 BitmapParseTree.prototype.compile = function(type) {
 	if(type === "text/html") {
-		return "(function (tiddler,store,utils) {return '<img src=\"data:' + tiddler.type + ';base64,' + tiddler.text + '\">';})";
+		return new BitmapRenderer("(function (tiddler,store,utils) {return '<img src=\"data:' + tiddler.type + ';base64,' + tiddler.text + '\">';})");
 	} else {
 		return null;
 	}
--- a/js/JavaScriptParseTree.js
+++ b/js/JavaScriptParseTree.js
@@ -28,7 +28,11 @@ var JavaScriptParseTree = function(tree) {
 // Render the entire JavaScript tree object to JavaScript source code
 JavaScriptParseTree.prototype.render = function() {
 	var output = [];
-	this.renderSubTree(output,this.tree);
+	if(this.tree instanceof Array) {
+		this.renderSubTree(output,this.tree);
+	} else {
+		this.renderNode(output,this.tree);	
+	}
 	var r = output.join("");
 	return r;
 };
--- a/js/SVGParser.js
+++ b/js/SVGParser.js
@@ -9,6 +9,17 @@ Compiles SVG images into JavaScript functions that render them in HTML
 /*jslint node: true */
 "use strict";

+var utils = require("./Utils.js");
+
+var SVGRenderer = function(handlerCode) {
+	/*jslint evil: true */
+	this.handler = eval(handlerCode);
+};
+
+SVGRenderer.prototype.render = function(tiddler,store) {
+	return this.handler(tiddler,store,utils);
+};
+
 // The parse tree is degenerate
 var SVGParseTree = function() {
 	this.dependencies = [];
@@ -16,7 +27,7 @@ var SVGParseTree = function() {

 SVGParseTree.prototype.compile = function(type) {
 	if(type === "text/html") {
-		return "(function (tiddler,store,utils) {return '<img src=\"data:' + tiddler.type + ',' + encodeURIComponent(tiddler.text) + '\">';})";
+		return new SVGRenderer("(function (tiddler,store,utils) {return '<img src=\"data:' + tiddler.type + ',' + encodeURIComponent(tiddler.text) + '\">';})");
 	} else {
 		return null;
 	}
--- a/js/WikiStore.js
+++ b/js/WikiStore.js
@@ -301,30 +301,25 @@ WikiStore.prototype.parseTiddler = function(title) {
 };

 /*
-Compiles a block of text of a specified type into a JavaScript function that renders the text in a particular MIME type
+Compiles a block of text of a specified type into a renderer that renders the text in a particular MIME type
 */
 WikiStore.prototype.compileText = function(type,text,targetType) {
-	/*jslint evil: true */
 	var tree = this.parseText(type,text);
-	return eval(tree.compile(targetType));
+	return tree.compile(targetType);
 };

 /*
 Compiles a JavaScript function that renders a tiddler in a particular MIME type
 */
 WikiStore.prototype.compileTiddler = function(title,type) {
-	/*jslint evil: true */
 	var tiddler = this.getTiddler(title),
 		renderers = this.getCacheForTiddler(title,"renderers",function() {
 			return {};
 		});
 	if(tiddler) {
 		if(!renderers[type]) {
-			var tree = this.parseTiddler(title),
-				text = tree.compile(type);
-			// Add a source URL to help debugging (see http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/)
-			text += "//@ sourceURL=" + encodeURIComponent(title) + "-" + type;
-			renderers[type] = eval(text);
+			var tree = this.parseTiddler(title);
+			renderers[type] = tree.compile(type);
 		}
 		return renderers[type];
 	} else {
@@ -337,8 +332,8 @@ Render a block of text of a specified type into a particular MIME type
 */
 WikiStore.prototype.renderText = function(type,text,targetType,asTitle) {
 	var tiddler = this.getTiddler(asTitle),
-		fn = this.compileText(type,text,targetType);
-	return fn(tiddler,this,utils);
+		renderer = this.compileText(type,text,targetType);
+	return renderer.render(tiddler,this);
 };

 /*
@@ -348,17 +343,17 @@ store.renderTiddler("text/html",templateTitle,tiddlerTitle)
 */
 WikiStore.prototype.renderTiddler = function(targetType,title,asTitle) {
 	var tiddler = this.getTiddler(title),
-		fn = this.compileTiddler(title,targetType),
+		renderer = this.compileTiddler(title,targetType),
 		renditions = this.getCacheForTiddler(title,"renditions",function() {
 			return {};
 		});
 	if(tiddler) {
 		if(asTitle) {
 			var asTiddler = this.getTiddler(asTitle);
-			return fn(asTiddler,this,utils);
+			return renderer.render(asTiddler,this);
 		} else {
 			if(!renditions[targetType]) {
-				renditions[targetType] = fn(tiddler,this,utils);
+				renditions[targetType] = renderer.render(tiddler,this);
 			}
 			return renditions[targetType];
 		}
--- a/js/WikiTextParseTree.js
+++ b/js/WikiTextParseTree.js
@@ -9,7 +9,8 @@ A container for the parse tree generated by parsing wikitext
 /*jslint node: true */
 "use strict";

-var ArgParser = require("./ArgParser.js").ArgParser,
+var WikiTextRenderer = require("./WikiTextRenderer.js").WikiTextRenderer,
+	ArgParser = require("./ArgParser.js").ArgParser,
 	utils = require("./Utils.js");

 // Intialise the parse tree object
@@ -22,22 +23,26 @@ var WikiTextParseTree = function(tree,dependencies,store) {
 // Compile the parse tree into a JavaScript function that returns the required
 // representation of the tree
 WikiTextParseTree.prototype.compile = function(type,treenode) {
+	/*jslint evil: true */
 	treenode = treenode || this.tree;
-	var output = [];
+	var renderer = new WikiTextRenderer(),
+		renderStep = {},
+		renderStepIndex = renderer.addRenderStep(renderStep),
+		output = [];
 	if(type === "text/html") {
-		this.compileSubTreeHtml(output,treenode);
+		this.compileSubTreeHtml(output,renderer,treenode);
 	} else if(type === "text/plain") {
-		this.compileSubTreePlain(output,treenode);
+		this.compileSubTreePlain(output,renderer,treenode);
 	} else {
 		return null;
 	}
-	// And then wrap the javascript tree and render it back into JavaScript code
+	// Create the parse tree for the rendering step function definition
 	var parseTree = this.store.jsParser.createTree(
 		[
 			{
 				type: "Function",
 				name: null,
-				params: ["tiddler","store","utils"], // These are the parameters passed to the tiddler function; must match the invocation in WikiStore.renderTiddler()
+				params: ["tiddler","renderer","store","utils"], // These are the parameters passed to the tiddler function; must match the invocation in WikiStore.renderTiddler()
 				elements: [
 					{
 					type: "ReturnStatement",
@@ -61,11 +66,13 @@ WikiTextParseTree.prototype.compile = function(type,treenode) {
 				]
 			}
 		]);
-	var r = parseTree.render();
-	return r;
+	renderStep.step = renderStepIndex;
+	renderStep.dependencies = [];
+	renderStep.handler = eval(parseTree.render());
+	return renderer;
 };

-WikiTextParseTree.prototype.pushString = function(output,s) {
+var pushString = function(output,s) {
 	var last = output[output.length-1];
 	if(output.length > 0 && last.type === "StringLiterals") {
 		last.value.push(s);
@@ -77,66 +84,80 @@ WikiTextParseTree.prototype.pushString = function(output,s) {
 	}
 };

-WikiTextParseTree.prototype.compileMacroCall = function(output,type,node) {
+WikiTextParseTree.prototype.compileMacroCall = function(output,renderer,type,node) {
+	/*jslint evil: true */
 	var name = node.name,
 		params = node.params,
 		macro = this.store.macros[name],
 		p,
-		n;
+		n,
+		renderStep = {},
+		renderStepIndex = renderer.addRenderStep(renderStep);
+	// Check for errors
 	if(!macro) {
-		this.pushString(output,"{{** Unknown macro '" + name + "' **}}");
+		pushString(output,"{{** Unknown macro '" + name + "' **}}");
 		return;
 	}
 	if(macro.types.indexOf(type) === -1) {
-		this.pushString(output,"{{**  Macro '" + name + "' cannot render to MIME type '" + type + "'**}}");
+		pushString(output,"{{**  Macro '" + name + "' cannot render to MIME type '" + type + "'**}}");
 		return;
 	}
+	// Compose the macro call as a render function
 	var macroCall = {
-		type: "FunctionCall",
-		name: {
-			base: {
-				base: {
-					base: {
-						name: "store", 
-						type: "Variable"}, 
-					name: "macros", 
-					type: "PropertyAccess"}, 
+		type: "Function",
+		name: null,
+		params: ["tiddler","renderer","store","utils"], // These are the parameters passed to the tiddler function; must match the invocation in WikiStore.renderTiddler()
+		elements: [ {
+			type: "ReturnStatement",
+			value: {
+				type: "FunctionCall",
 				name: {
+					base: {
+						base: {
+							base: {
+								name: "store", 
+								type: "Variable"}, 
+							name: "macros", 
+							type: "PropertyAccess"}, 
+						name: {
+							type: "StringLiteral", 
+							value: name}, 
+						type: "PropertyAccess"}, 
+					name: "handler", 
+					type: "PropertyAccess"},
+				"arguments": [ {
 					type: "StringLiteral", 
-					value: name}, 
-				type: "PropertyAccess"}, 
-			name: "handler", 
-			type: "PropertyAccess"},
-		"arguments": [ {
-			type: "StringLiteral", 
-			value: type
-		},{
-			type: "Variable",
-			name: "tiddler"
-		},{
-			type: "Variable",
-			name: "store"
-		},{
-			type: "ObjectLiteral",
-			properties: []	
-		}]
+					value: type
+				},{
+					type: "Variable",
+					name: "tiddler"
+				},{
+					type: "Variable",
+					name: "store"
+				},{
+					type: "ObjectLiteral",
+					properties: []	
+				}]
+			}}]
 	};
+	// Slot the parameters into the macro call
 	for(p in params) {
 		if(params[p].type === "string") {
 			n = {type: "StringLiteral", value: params[p].value};
 		} else {
 			n = this.store.jsParser.parse(params[p].value).tree.elements[0];
 		}
-		macroCall["arguments"][3].properties.push({
+		macroCall.elements[0].value["arguments"][3].properties.push({
 			type: "PropertyAssignment",
 			name: p,
 			value: n
 		});
 	}
+	// Compile any child nodes
 	if(node.children) {
 		var subOutput = [];
-		this.compileSubTreeHtml(subOutput,node.children);
-		macroCall["arguments"].push({
+		this.compileSubTreeHtml(subOutput,renderer,node.children);
+		macroCall.elements[0].value["arguments"].push({
 			type: "FunctionCall",
 			name: {
 				type: "PropertyAccess",
@@ -152,86 +173,108 @@ WikiTextParseTree.prototype.compileMacroCall = function(output,type,node) {
 			}]
 		});
 	}
+	renderStep.step = renderStepIndex;
+	renderStep.dependencies = node.dependencies;
+	renderStep.handler = eval(this.store.jsParser.createTree(macroCall).render());
 	var wrapperTag = macro.wrapperTag || "div";
 	if(type === "text/html") {
-		this.pushString(output,utils.stitchElement(wrapperTag,{
-			"data-tw-macro": name
+		pushString(output,utils.stitchElement(wrapperTag,{
+			"data-tw-macro": name,
+			"data-tw-render-step": renderStepIndex
 		}));
 	}
-	output.push(macroCall);
+	output.push({
+		type: "FunctionCall",
+		name: {
+			base: {
+				name: "renderer", 
+				type: "Variable"}, 
+			name: "render", 
+			type: "PropertyAccess"},
+		"arguments": [ {
+			type: "Variable",
+			name: "tiddler"
+		},{
+			type: "Variable",
+			name: "store"
+		},{
+			type: "NumericLiteral",
+			value: renderStepIndex	
+		}]
+	});
 	if(type === "text/html") {
-		this.pushString(output,"</" + wrapperTag + ">");
+		pushString(output,"</" + wrapperTag + ">");
 	}
 };

-WikiTextParseTree.prototype.compileElementHtml = function(output,element,options) {
+WikiTextParseTree.prototype.compileElementHtml = function(output,renderer,element,options) {
 	options = options || {};
-	this.pushString(output,utils.stitchElement(element.type,element.attributes,{
+	pushString(output,utils.stitchElement(element.type,element.attributes,{
 		selfClosing: options.selfClosing
 	}));
 	if(!options.selfClosing) {
 		if(element.children) {
-			this.compileSubTreeHtml(output,element.children);
+			this.compileSubTreeHtml(output,renderer,element.children);
 		}
-		this.pushString(output,"</" + element.type + ">");
+		pushString(output,"</" + element.type + ">");
 	}
 };

-WikiTextParseTree.prototype.compileSubTreeHtml = function(output,tree) {
+WikiTextParseTree.prototype.compileSubTreeHtml = function(output,renderer,tree) {
 	for(var t=0; t<tree.length; t++) {
 		switch(tree[t].type) {
 			case "text":
-				this.pushString(output,utils.htmlEncode(tree[t].value));
+				pushString(output,utils.htmlEncode(tree[t].value));
 				break;
 			case "entity":
-				this.pushString(output,tree[t].value);
+				pushString(output,tree[t].value);
 				break;
 			case "br":
 			case "img":
-				this.compileElementHtml(output,tree[t],{selfClosing: true}); // Self closing elements
+				this.compileElementHtml(output,renderer,tree[t],{selfClosing: true}); // Self closing elements
 				break;
 			case "macro":
-				this.compileMacroCall(output,"text/html",tree[t]);
+				this.compileMacroCall(output,renderer,"text/html",tree[t]);
 				break;
 			default:
-				this.compileElementHtml(output,tree[t]);
+				this.compileElementHtml(output,renderer,tree[t]);
 				break;
 		}
 	}
 };

-WikiTextParseTree.prototype.compileElementPlain = function(output,element, options) {
+WikiTextParseTree.prototype.compileElementPlain = function(output,renderer,element,options) {
 	options = options || {};
 	if(!options.selfClosing) {
 		if(element.children) {
-			this.compileSubTreePlain(output,element.children);
+			this.compileSubTreePlain(output,renderer,element.children);
 		}
 	}
 };

-WikiTextParseTree.prototype.compileSubTreePlain = function(output,tree) {
+WikiTextParseTree.prototype.compileSubTreePlain = function(output,renderer,tree) {
 	for(var t=0; t<tree.length; t++) {
 		switch(tree[t].type) {
 			case "text":
-				this.pushString(output,tree[t].value);
+				pushString(output,tree[t].value);
 				break;
 			case "entity":
 				var c = utils.entityDecode(tree[t].value);
 				if(c) {
-					this.pushString(output,c);
+					pushString(output,c);
 				} else {
-					this.pushString(output,tree[t].value);
+					pushString(output,tree[t].value);
 				}
 				break;
 			case "br":
 			case "img":
-				this.compileElementPlain(output,tree[t],{selfClosing: true}); // Self closing elements
+				this.compileElementPlain(output,renderer,tree[t],{selfClosing: true}); // Self closing elements
 				break;
 			case "macro":
-				this.compileMacroCall(output,"text/plain",tree[t]);
+				this.compileMacroCall(output,renderer,"text/plain",tree[t]);
 				break;
 			default:
-				this.compileElementPlain(output,tree[t]);
+				this.compileElementPlain(output,renderer,tree[t]);
 				break;
 		}
 	}
@@ -286,6 +329,17 @@ WikiTextParseTree.prototype.toString = function(type) {
 						}));
 						output.push("</span>");
 					}
+					output.push(utils.stitchElement("span",null,
+						{classNames: ["treeNode","splitLabel"]}));
+					output.push(utils.stitchElement("span",{"data-tw-treenode-type": "renderStepDependencies"},{
+						content: "dependencies",
+						classNames: ["splitLabelLeft"]
+					}));
+					output.push(utils.stitchElement("span",null,{
+						content: utils.htmlEncode(node.dependencies === null ? "*" : node.dependencies.join(", ")),
+						classNames: ["splitLabelRight"]
+					}));
+					output.push("</span>");
 					if(node.children) {
 						utils.renderObject(output,type,node.children,customTemplates);
 					}
--- a/js/WikiTextParser.js
+++ b/js/WikiTextParser.js
@@ -83,6 +83,18 @@ WikiTextParser.prototype.addDependency = function(dependency) {
 	}	
 };

+WikiTextParser.prototype.addDependencies = function(dependencies) {
+	if(dependencies === null) {
+		this.dependencies = null;
+	} else if(this.dependencies !== null){
+		for(var t=0; t<dependencies.length; t++) {
+			if(this.dependencies.indexOf(dependencies[t]) === -1) {
+				this.dependencies.push(dependencies[t]);
+			}
+		}
+	}	
+};
+
 WikiTextParser.prototype.outputText = function(place,startPos,endPos) {
 	if(startPos < endPos) {
 		place.push({type: "text", value: this.source.substring(startPos,endPos)});
--- a/js/WikiTextRenderer.js
+++ b/js/WikiTextRenderer.js
@@ -0,0 +1,79 @@
+/*\
+title: js/WikiTextRenderer.js
+
+An array of JavaScript functions that generate a specified representation of a parse tree
+
+\*/
+(function(){
+
+/*jslint node: true */
+"use strict";
+
+var utils = require("./Utils.js");
+
+var WikiTextRenderer = function() {
+	this.renderSteps = []; // Array of {step: n, dependencies: [],handler: function(tiddler,renderer,store,utils) {}}
+};
+
+WikiTextRenderer.prototype.addRenderStep = function(renderStep) {
+	this.renderSteps.push(renderStep);
+	return this.renderSteps.length - 1;
+};
+
+WikiTextRenderer.prototype.render = function(tiddler,store,renderStep) {
+	renderStep = renderStep || 0;
+	if(renderStep < this.renderSteps.length) {
+		return this.renderSteps[renderStep].handler(tiddler,this,store,utils);
+	} else {
+		return null;
+	}
+};
+
+WikiTextRenderer.prototype.refreshDom = function(node,tiddler,store) {
+	
+};
+
+WikiTextRenderer.prototype.toString = function(type) {
+	var output = [],
+		customTemplates = [
+			function(output,type,node) { // Rendering step
+				if(node.step !== undefined) {
+					output.push(utils.stitchElement("span",
+						{"data-tw-treenode-type": "renderStep"},{
+						content: node.step.toString(),
+						classNames: ["treeNode","label"]
+					}));
+					output.push(utils.stitchElement("span",null,
+						{classNames: ["treeNode","splitLabel"]}));
+					output.push(utils.stitchElement("span",{"data-tw-treenode-type": "renderStepDependencies"},{
+						content: "dependencies",
+						classNames: ["splitLabelLeft"]
+					}));
+					output.push(utils.stitchElement("span",null,{
+						content: utils.htmlEncode(node.dependencies === null ? "*" : node.dependencies.join(", ")),
+						classNames: ["splitLabelRight"]
+					}));
+					output.push("</span>");
+					output.push(utils.stitchElement("span",null,
+						{classNames: ["treeNode","splitLabel"]}));
+					output.push(utils.stitchElement("span",{"data-tw-treenode-type": "renderStepHandler"},{
+						content: "handler",
+						classNames: ["splitLabelLeft"]
+					}));
+					output.push(utils.stitchElement("code",null,{
+						content: utils.htmlEncode(node.handler.toString()).replace(/\n/g,"<br>"),
+						classNames: ["splitLabelRight"]
+					}));
+					output.push("</span>");
+					return true;
+				}
+				return false;
+			}
+		];
+	utils.renderObject(output,type,this.renderSteps,customTemplates);
+	return output.join("");
+};
+
+exports.WikiTextRenderer = WikiTextRenderer;
+
+})();
--- a/js/WikiTextRules.js
+++ b/js/WikiTextRules.js
@@ -105,24 +105,29 @@ var enclosedTextHelper = function(w) {

 var parseMacroCall = function(w,name,paramString) {
 	var macro = w.store.macros[name],
-		params = {};
+		params = {},
+		dependencies = [];
 	if(macro) {
 		if(macro.dependentAll) {
-			w.addDependency(null);
+			dependencies = null;
 		}
 		var args = new ArgParser(paramString,{defaultName: "anon"}),
 			insertParam = function(param,name,arg) {
+				if(param.dependentAll) {
+					dependencies = null;
+				}
 				if(param.type === "tiddler") {
-					w.addDependency(arg.evaluated ? null : arg.string);
+					if(arg.evaluated) {
+						dependencies = null;
+					} else if(dependencies !== null) {
+						dependencies.push(arg.string);
+					}
 				}
 				params[name] = {type: arg.evaluated ? "eval" : "string", value: arg.string};
 			};
 		for(var m in macro.params) {
 			var param = macro.params[m],
 				arg;
-			if(param.dependentAll) {
-				w.addDependency(null);
-			}
 			if("byPos" in param && args.byPos[param.byPos]) {
 				arg = args.byPos[param.byPos].v;
 				insertParam(param,m,arg);
@@ -137,7 +142,8 @@ var parseMacroCall = function(w,name,paramString) {
 			}
 		}
 	}
-	return {type: "macro", name: name, params: params};
+	w.addDependencies(dependencies);
+	return {type: "macro", name: name, params: params, dependencies: dependencies};
 };

 var rules = [
@@ -467,16 +473,19 @@ var rules = [
 				children: [{
 					type: "text",
 					value: ""
-				}]},
+				}],
+				dependencies: []},
 				text = lookaheadMatch[1];
 			if(lookaheadMatch[3]) {
 				// Pretty bracketted link
 				var link = lookaheadMatch[3];
 				e.params.target.value = link;
+				e.dependencies.push(link);
 				w.addDependency(link);
 			} else {
 				// Simple bracketted link
 				e.params.target.value = text;
+				e.dependencies.push(text);
 				w.addDependency(text);
 			}
 			e.children[0].value = text;
@@ -511,7 +520,10 @@ var rules = [
 						children: [{
 							type: "text",
 							value: w.source.substring(w.matchStart,w.nextMatch)
-						}]};
+						}],
+						dependencies: [
+							w.matchText
+						]};
 			w.addDependency(w.matchText);
 			w.output.push(link);
 		} else {
@@ -531,7 +543,10 @@ var rules = [
 				children: [{
 					type: "text",
 					value: w.source.substring(w.matchStart,w.nextMatch)
-				}]};
+				}],
+				dependencies: [
+					w.matchText
+				]};
 		w.addDependency(w.matchText);
 		w.output.push(e);
 	}
@@ -562,8 +577,10 @@ var rules = [
 				image.params.text = {type: "string", value: lookaheadMatch[3]};
 			}
 			image.params.src.value = lookaheadMatch[4];
+			image.dependencies = [lookaheadMatch[4]];
 			if(lookaheadMatch[5]) {
 				link.params.target.value = lookaheadMatch[5];
+				link.dependencies = [lookaheadMatch[5]];
 				w.output.push(link);
 			} else {
 				w.output.push(image);
--- a/js/macros/info.js
+++ b/js/macros/info.js
@@ -25,9 +25,7 @@ exports.macro = {
 					return "Parse tree: " + parseTree.toString(type);
 					//break;
 				case "compiled":
-					return "Compiled as: " + utils.stitchElement("pre",null,{
-						content: encoder(parseTree.compile(type))
-					});
+					return "Compiled as: " + parseTree.compile(type).toString(type);
 					//break;
 				case "dependencies":
 					if(parseTree.dependencies === null) {
--- a/js/macros/list.js
+++ b/js/macros/list.js
@@ -61,11 +61,11 @@ exports.macro = {
 		if(tiddlers.length === 0) {
 			return params.emptyMessage ? encoder(params.emptyMessage) : "";
 		} else {
-			var fn = store.compileText(templateType,templateText,type);
+			var renderer = store.compileText(templateType,templateText,type);
 			pushTag("<ul>");
 			for(t=0; t<tiddlers.length; t++) {
 				pushTag("<li>");
-				output.push(fn(store.getTiddler(tiddlers[t]),store,utils));
+				output.push(renderer.render(store.getTiddler(tiddlers[t]),store));
 				pushTag("</li>");	
 			}
 			pushTag("</ul>");