put stylesheets into single <style> tags

core/modules/startup/render.js

@@ -38,22 +38,13 @@ exports.startup = function() {
 			document.title = $tw.titleContainer.textContent;
 		}
 	});
-	// Set up the styles
+
-	$tw.styleWidgetNode = $tw.wiki.makeTranscludeWidget(PAGE_STYLESHEET_TITLE,{document: $tw.fakeDocument});
+	var styleParser = $tw.wiki.parseTiddler("$:/core/ui/RootStylesheet",{parseAsInline: true}),
-	$tw.styleContainer = $tw.fakeDocument.createElement("style");
+		styleWidgetNode = $tw.wiki.makeWidget(styleParser,{document: document});
-	$tw.styleWidgetNode.render($tw.styleContainer,null);
+	styleWidgetNode.render(document.head,null);
-	$tw.styleWidgetNode.assignedStyles = $tw.styleContainer.textContent;
+
-	$tw.styleElement = document.createElement("style");
-	$tw.styleElement.innerHTML = $tw.styleWidgetNode.assignedStyles;
-	document.head.insertBefore($tw.styleElement,document.head.firstChild);
 	$tw.wiki.addEventListener("change",$tw.perf.report("styleRefresh",function(changes) {
-		if($tw.styleWidgetNode.refresh(changes,$tw.styleContainer,null)) {
+		styleWidgetNode.refresh(changes,document.head,null);
-			var newStyles = $tw.styleContainer.textContent;
-			if(newStyles !== $tw.styleWidgetNode.assignedStyles) {
-				$tw.styleWidgetNode.assignedStyles = newStyles;
-				$tw.styleElement.innerHTML = $tw.styleWidgetNode.assignedStyles;
-			}
-		}
 	}));
 	// Display the $:/core/ui/PageTemplate tiddler to kick off the display
 	$tw.perf.report("mainRender",function() {

core/modules/startup/windows.js

@@ -64,24 +64,16 @@ exports.startup = function() {
 			$tw.wiki.removeEventListener("change",refreshHandler);
 		},false);
 		// Set up the styles
-		var styleWidgetNode = $tw.wiki.makeTranscludeWidget("$:/core/ui/PageStylesheet",{
+		var styleParser = $tw.wiki.parseTiddler("$:/core/ui/RootStylesheet",{parseAsInline: true}),
-				document: $tw.fakeDocument,
+			styleWidgetNode = $tw.wiki.makeWidget(styleParser,{document: srcDocument});
-				variables: variables,
+		styleWidgetNode.render(srcDocument.head,null);
-				importPageMacros: true}),
-			styleContainer = $tw.fakeDocument.createElement("style");
-		styleWidgetNode.render(styleContainer,null);
-		var styleElement = srcDocument.createElement("style");
-		styleElement.innerHTML = styleContainer.textContent;
-		srcDocument.head.insertBefore(styleElement,srcDocument.head.firstChild);
 		// Render the text of the tiddler
 		var parser = $tw.wiki.parseTiddler(template),
 			widgetNode = $tw.wiki.makeWidget(parser,{document: srcDocument, parentWidget: $tw.rootWidget, variables: variables});
 		widgetNode.render(srcDocument.body,srcDocument.body.firstChild);
 		// Function to handle refreshes
 		refreshHandler = function(changes) {
-			if(styleWidgetNode.refresh(changes,styleContainer,null)) {
+			styleWidgetNode.refresh(changes);
-				styleElement.innerHTML = styleContainer.textContent;
-			}
 			widgetNode.refresh(changes);
 		};
 		$tw.wiki.addEventListener("change",refreshHandler);

core/modules/widgets/view.js

@@ -18,11 +18,69 @@ var ViewWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
 
+var ViewHandler = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
 /*
 Inherit from the base widget class
 */
 ViewWidget.prototype = new Widget();
 
+/*
+Inherit from the base widget class
+*/
+ViewHandler.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+ViewHandler.prototype.render = function(parent,nextSibling,options) {
+	this.parentDomNode = parent;
+	this.fakeWidget = this.wiki.makeTranscludeWidget(options.title,{
+		document: $tw.fakeDocument,
+		field: options.field,
+		index: options.index,
+		parseAsInline: options.mode !== "block",
+		parentWidget: this,
+		subTiddler: options.subTiddler
+	});
+	this.text = options.text || "";
+	this.viewFormat = options.format;
+	this.fakeNode = $tw.fakeDocument.createElement("div");
+	this.fakeWidget.makeChildWidgets();
+	this.fakeWidget.renderChildren(this.fakeNode,null);
+	var textNode = this.document.createTextNode(this.text);
+	parent.insertBefore(textNode,nextSibling);
+	this.domNodes.push(textNode);
+};
+
+/*
+Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
+*/
+ViewHandler.prototype.refresh = function(changedTiddlers) {
+	var refreshed = this.fakeWidget.refresh(changedTiddlers);
+	if(refreshed) {
+		var newText;
+		switch(this.viewFormat) {
+			case "htmlwikified":
+				newText = this.fakeNode.innerHTML;
+				break;
+			case "plainwikified":
+				newText = this.fakeNode.textContent;
+				break;
+			case "htmlencodedplainwikified":
+				newText = $tw.utils.htmlEncode(this.fakeNode.textContent);
+				break;
+		}
+		if(newText !== this.text) {
+			this.domNodes[0].textContent = newText;
+			this.text = newText;
+		}
+	}
+	return refreshed;
+};
+
 /*
 Render this widget into the DOM
 */
@@ -30,7 +88,25 @@ ViewWidget.prototype.render = function(parent,nextSibling) {
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();
-	if(this.text) {
+	if(this.viewWikified) {
+		var options = {
+			text: this.text,
+			title: this.viewTitle,
+			subTiddler: this.viewSubtiddler,
+			field: this.viewField,
+			index: this.viewIndex,
+			format: this.viewFormat,
+			template: this.viewTemplate,
+			mode: this.viewMode
+		}
+		this.viewHandler = new ViewHandler(this.parseTreeNode,{
+			wiki: this.wiki,
+			parentWidget: this,
+			document: this.document
+		});
+		this.viewHandler.render(parent,nextSibling,options);
+		//this.viewHandler.render(parent,nextSibling,options);
+	} else if(this.text) {
 		var textNode = this.document.createTextNode(this.text);
 		parent.insertBefore(textNode,nextSibling);
 		this.domNodes.push(textNode);
@@ -52,15 +128,19 @@ ViewWidget.prototype.execute = function() {
 	this.viewFormat = this.getAttribute("format","text");
 	this.viewTemplate = this.getAttribute("template","");
 	this.viewMode = this.getAttribute("mode","block");
+	this.viewWikified = false;
 	switch(this.viewFormat) {
 		case "htmlwikified":
 			this.text = this.getValueAsHtmlWikified(this.viewMode);
+			this.viewWikified = true;
 			break;
 		case "plainwikified":
 			this.text = this.getValueAsPlainWikified(this.viewMode);
+			this.viewWikified = true;
 			break;
 		case "htmlencodedplainwikified":
 			this.text = this.getValueAsHtmlEncodedPlainWikified(this.viewMode);
+			this.viewWikified = true;
 			break;
 		case "htmlencoded":
 			this.text = this.getValueAsHtmlEncoded();
@@ -219,6 +299,9 @@ ViewWidget.prototype.refresh = function(changedTiddlers) {
 		this.refreshSelf();
 		return true;
 	} else {
+		if(this.viewHandler) {
+			return this.viewHandler.refresh(changedTiddlers);
+		}
 		return false;
 	}
 };

core/templates/tiddlywiki5.html.tid

@@ -25,6 +25,7 @@ title: $:/core/templates/tiddlywiki5.html
 `{{{ [enlist<saveTiddlerAndShadowsFilter>tag[$:/core/wiki/rawmarkup]] ||$:/core/templates/plain-text-tiddler}}}
 {{{ [enlist<saveTiddlerAndShadowsFilter>tag[$:/tags/RawMarkup]] ||$:/core/templates/plain-text-tiddler}}}
 {{{ [enlist<saveTiddlerAndShadowsFilter>tag[$:/tags/RawMarkupWikified]] ||$:/core/templates/raw-static-tiddler}}}`
+<!--~~ Style section start ~~-->
 </head>
 <body class="tc-body">
 <!--~~ Raw markup for the top of the body section ~~-->

core/ui/RootStylesheet.tid

@@ -5,9 +5,9 @@ code-body: yes
 \whitespace trim
 <$set name="currentTiddler" value={{$:/language}}>
 <$set name="languageTitle" value={{!!name}}>
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!is[draft]]">
 <style type="text/css">
-<$view format="plainwikified"/>
+<$view format={{{ [<currentTiddler>tag[$:/tags/Stylesheet/Static]then[text]else[plainwikified]] }}}/>
 </style>
 </$list>
 </$set>

core/wiki/config/PerformanceInstrumentation.tid

@@ -1,2 +1,2 @@
 title: $:/config/Performance/Instrumentation
-text: no
+text: yes

themes/tiddlywiki/vanilla/base.tid

@@ -65,12 +65,6 @@ $else$
 
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
 
-/*
-** Start with the normalize CSS reset, and then belay some of its effects
-*/
-
-{{$:/themes/tiddlywiki/vanilla/reset}}
-
 *, input[type="search"] {
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;

themes/tiddlywiki/vanilla/reset.tid

@@ -1,5 +1,7 @@
 title: $:/themes/tiddlywiki/vanilla/reset
 type: text/css
+tags: $:/tags/Stylesheet $:/tags/Stylesheet/Static
+list-before: $:/themes/tiddlywiki/vanilla/base
 
 /*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */