Make incremental rendering styles work with plain js apps

lib/cleanup.js

@@ -1,7 +1,9 @@
 
 module.exports = function(document, setDocument, domMutate){
-	var curDoc = setDocument();
-	setDocument(document);
+	var setDoc = setDocument || Function.prototype; // noop
+
+	var curDoc = setDoc();
+	setDoc(document);
 
 	var docEl = document.documentElement;
 	var head = document.head;
@@ -12,5 +14,5 @@ module.exports = function(document, setDocument, domMutate){
 	}
 
 	domMutate.removeChild.call(docEl, body);
-	setDocument(curDoc);
+	setDoc(curDoc);
 };

lib/polyfills/fetch.js

@@ -31,8 +31,12 @@ global.fetch = function(relativeUrl){
 			responses.forEach(push);
 		}
 
+		var response = Object.assign({}, resp);
+
 		// Convert the Node.js Readable stream to a WHATWG stream.
-		resp.body = toWebReadableStream(resp.body);
-		return resp;
+		response.body = toWebReadableStream(resp.body);
+		response.json = resp.json.bind(resp);
+		response.text = resp.text.bind(resp);
+		return response;
 	});
 };

lib/strategies/incremental/styles_zone.js

@@ -3,7 +3,8 @@ var canData = require("can-util/dom/data/data");
 
 module.exports = function(doc, bundleHelpers, can){
 	return function(data){
-		var promises = [], initialRun = false;
+		var promises = [], initialRun = false,
+			usesCan = typeof can !== "undefined";
 
 		// Keep track of can-import calls that happen during the initial render
 		var oldCanImport;
@@ -22,15 +23,18 @@ module.exports = function(doc, bundleHelpers, can){
 			plugins: [assetsZone(doc, bundleHelpers, can)],
 
 			beforeTask: function(){
-				if(!initialRun) {
+				if(!initialRun && usesCan) {
 					oldCanImport = can.view.callbacks._tags["can-import"];
 					can.view.callbacks._tags["can-import"] = canImport;
 				}
 			},
 			afterTask: function(){
 				if(!initialRun) {
 					initialRun = true;
-					can.view.callbacks._tags["can-import"] = oldCanImport;
+					if(usesCan) {
+						can.view.callbacks._tags["can-import"] = oldCanImport;
+					}
+
 					data.initialStylesLoaded = Promise.all(promises)
 						.then(renderStylesIntoDocument);
 				}

test/helpers.js

@@ -136,3 +136,7 @@ exports.mockXHR = function(responseFN, options){
 	};
 	return XHR;
 };
+
+exports.ua = {
+	chrome: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Safari/537.36"
+};

test/incremental_plain_test.js

@@ -0,0 +1,86 @@
+var ssr = require("../lib/");
+var helpers = require("./helpers");
+var assert = require("assert");
+var path = require("path");
+var Writable = require("stream").Writable;
+var through = require("through2");
+var noop = Function.prototype;
+var path = require("path");
+
+describe("Incremental rendering - plain JS", function(){
+	this.timeout(10000);
+
+	before(function(){
+		this.render = ssr({
+			config: "file:" + path.join(__dirname, "tests", "package.json!npm"),
+			main: "plain/main",
+			paths: {
+				"done-ssr/import": "file:" + path.resolve(__dirname + "/../import.js")
+			}
+		}, {
+			strategy: "incremental"
+		});
+	});
+
+	describe("A basic asyc app", function(){
+		before(function(done){
+			var result = this.result = {
+				html: null,
+				instructions: []
+			};
+
+			var request = {
+				url: "/",
+				headers: {
+					"user-agent": helpers.ua.chrome
+				}
+			};
+
+			var response = through(function(buffer, enc, done){
+				result.html = buffer.toString();
+			});
+			response.writeHead = noop;
+
+			function instructions() {
+				var writable = new Writable({
+					write(chunk, enc, next) {
+						var json = chunk.toString();
+						var instrs = JSON.parse(json);
+						result.instructions.push(instrs);
+						next();
+					}
+				});
+
+				var end = writable.end;
+				writable.end = function(){
+					done();
+					return end.apply(this, arguments);
+				};
+
+				return writable;
+			}
+
+			response.push = function(){
+				return instructions();
+			};
+
+			this.render(request).pipe(response);
+		});
+
+		it("Sends back rendering instructions", function(){
+			var instrs = this.result.instructions[0];
+			assert.ok(instrs.length > 0, "Some instructions were returned");
+		});
+
+		it("Includes the styles as part of the initial HTML", function(){
+			var dom = helpers.dom(this.result.html);
+			// The script is the first element of the dom
+			var doc = dom.nextSibling;
+			var style = helpers.find(doc, function(el){
+				return el.nodeName === "STYLE";
+			});
+
+			assert.ok(style, "Some styles were included");
+		});
+	});
+});

test/incremental_test.js

@@ -6,7 +6,6 @@ var Writable = require("stream").Writable;
 var through = require("through2");
 var createXHR = require("../lib/polyfills/xhr");
 var noop = Function.prototype;
-var chromeUA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Safari/537.36";
 
 function emptyWritable() {
 	return new Writable({write(c,e,next){next();}});
@@ -37,7 +36,7 @@ describe("Incremental rendering", function(){
 		global.XMLHttpRequest = this.oldXHR;
 	});
 
-	describe("A basic asyc app", function(){
+	describe("A basic async app", function(){
 		before(function(done){
 			var result = this.result = {
 				html: null,
@@ -47,7 +46,7 @@ describe("Incremental rendering", function(){
 			var request = {
 				url: "/",
 				headers: {
-					"user-agent": chromeUA
+					"user-agent": helpers.ua.chrome
 				}
 			};
 

test/test.js

@@ -22,5 +22,6 @@ mochas([
 	"live-reload_test.js",
 	"cache-normalize_test.js",
 	"leak_test.js",
-	"incremental_test.js"
+	"incremental_test.js",
+	"incremental_plain_test.js"
 ], __dirname);

test/tests/leakscope/bar.js

@@ -1,8 +1,8 @@
 import Component from 'can-component';
-import template from './bar.stache!';
+import view from './bar.stache!';
 
 export default Component.extend({
-	template,
+	view,
 	leakScope: false,
 	tag: 'app-bar'
 });

test/tests/leakscope/foo.js

@@ -1,9 +1,9 @@
 import Component from "can-component";
 import stache from "can-stache";
-import template from "./foo.stache";
+import view from "./foo.stache";
 
 export default Component.extend({
-	template,
+	view,
 	tag: 'app-foo',
 	leakScope: false,