test with hydratable: true and hydratable: false

src/generators/dom/Block.ts

@@ -243,15 +243,17 @@ export default class Block {
 			`);
 		}
 
-		if (this.builders.claim.isEmpty()) {
+		if (this.generator.hydratable) {
-			properties.addBlock(`claim: ${this.generator.helper('noop')},`);
+			if (this.builders.claim.isEmpty()) {
-		} else {
+				properties.addBlock(`claim: ${this.generator.helper('noop')},`);
-			properties.addBlock(deindent`
+			} else {
-				claim: function ( nodes ) {
+				properties.addBlock(deindent`
-					${this.builders.claim}
+					claim: function ( nodes ) {
-					${!this.builders.hydrate.isEmpty() && `this.hydrate();`}
+						${this.builders.claim}
-				},
+						${!this.builders.hydrate.isEmpty() && `this.hydrate();`}
-			`);
+					},
+				`);
+			}
 		}
 
 		if (!this.builders.hydrate.isEmpty()) {

src/generators/dom/index.ts

@@ -18,6 +18,8 @@ export class DomGenerator extends Generator {
 	readonly: Set<string>;
 	metaBindings: string[];
 
+	hydratable: boolean;
+
 	hasIntroTransitions: boolean;
 	hasOutroTransitions: boolean;
 	hasComplexBindings: boolean;
@@ -34,6 +36,8 @@ export class DomGenerator extends Generator {
 
 		this.readonly = new Set();
 
+		this.hydratable = options.hydratable;
+
 		// initial values for e.g. window.innerWidth, if there's a <:Window> meta tag
 		this.metaBindings = [];
 	}
@@ -236,9 +240,15 @@ export default function dom(
 			)}( this._state, this );
 
 			if ( options.target ) {
-				var nodes = ${generator.helper('children')}( options.target );
+				${generator.hydratable ?
-				this._fragment.claim( nodes );
+					deindent`
-				nodes.forEach( ${generator.helper('detachNode')} );
+						var nodes = ${generator.helper('children')}( options.target );
+						options.hydrate ? this._fragment.claim( nodes ) : this._fragment.create();
+						nodes.forEach( ${generator.helper('detachNode')} );
+					` :
+					deindent`
+						this._fragment.create();
+					`}
 				this._fragment.mount( options.target, null );
 			}
 			

src/generators/dom/visitors/Element/Element.ts

@@ -52,10 +52,13 @@ export default function visitElement(
 
 	block.addVariable(name);
 	block.builders.create.addLine(`${name} = ${getRenderStatement(generator, childState.namespace, node.name)};`);
-	block.builders.claim.addBlock(deindent`
+
-		${name} = ${getClaimStatement(generator, childState.namespace, state.parentNodes, node)};
+	if (generator.hydratable) {
-		var ${childState.parentNodes} = ${generator.helper('children')}( ${name} );
+		block.builders.claim.addBlock(deindent`
-	`);
+			${name} = ${getClaimStatement(generator, childState.namespace, state.parentNodes, node)};
+			var ${childState.parentNodes} = ${generator.helper('children')}( ${name} );
+		`);
+	}
 
 	if (state.parentNode) {
 		block.builders.mount.addLine(`${block.generator.helper('appendNode')}( ${name}, ${state.parentNode} );`);
@@ -63,24 +66,6 @@ export default function visitElement(
 		block.builders.mount.addLine(`${block.generator.helper('insertNode')}( ${name}, ${block.target}, anchor );`);
 	}
 
-	// block.addVariable(name);
-
-	// block.builders.create.addLine(
-	// 	`${name} = ${getRenderStatement(
-	// 		generator,
-	// 		childState.namespace,
-	// 		node.name
-	// 	)};`
-	// );
-
-	// block.builders.claim.addLine(
-	// 	`${name} = ${getClaimStatement(
-	// 		generator,
-	// 		childState.namespace,
-	// 		node.name
-	// 	)};`
-	// );
-
 	// add CSS encapsulation attribute
 	if (generator.cssId && (!generator.cascade || state.isTopLevel)) {
 		block.builders.hydrate.addLine(

src/generators/dom/visitors/MustacheTag.ts

@@ -19,7 +19,7 @@ export default function visitMustacheTag(
 	block.addElement(
 		name,
 		`${generator.helper('createText')}( ${value} = ${snippet} )`,
-		`${generator.helper('claimText')}( ${state.parentNodes}, ${value} = ${snippet} )`,
+		generator.hydratable ? `${generator.helper('claimText')}( ${state.parentNodes}, ${value} = ${snippet} )` : '',
 		state.parentNode,
 		true
 	);

src/generators/dom/visitors/Text.ts

@@ -13,7 +13,7 @@ export default function visitText(
 	block.addElement(
 		node._state.name,
 		`${generator.helper('createText')}( ${JSON.stringify(node.data)} )`,
-		`${generator.helper('claimText')}( ${state.parentNodes}, ${JSON.stringify(node.data)} )`,
+		generator.hydratable ? `${generator.helper('claimText')}( ${state.parentNodes}, ${JSON.stringify(node.data)} )` : '',
 		state.parentNode,
 		node.usedAsAnchor
 	);

src/interfaces.ts

@@ -41,6 +41,7 @@ export interface CompileOptions {
 	dev?: boolean;
 	shared?: boolean | string;
 	cascade?: boolean;
+	hydratable?: boolean;
 
 	onerror?: (error: Error) => void;
 	onwarn?: (warning: Warning) => void;

test/hydration/index.js

@@ -27,7 +27,7 @@ describe('hydration', () => {
 
 		require.extensions['.html'] = function(module, filename) {
 			const options = Object.assign(
-				{ filename, name: getName(filename) },
+				{ filename, name: getName(filename), hydratable: true },
 				compileOptions
 			);
 			let { code } = svelte.compile(fs.readFileSync(filename, 'utf-8'), options);
@@ -76,6 +76,7 @@ describe('hydration', () => {
 
 					const component = new SvelteComponent({
 						target,
+						hydrate: true,
 						data: config.data
 					});
 

test/runtime/index.js

@@ -49,7 +49,7 @@ describe("runtime", () => {
 
 	const failed = new Set();
 
-	function runTest(dir, shared) {
+	function runTest(dir, shared, hydrate) {
 		if (dir[0] === ".") return;
 
 		const config = loadConfig(`./runtime/samples/${dir}/_config.js`);
@@ -61,13 +61,14 @@ describe("runtime", () => {
 		(config.skip ? it.skip : config.solo ? it.only : it)(`${dir} (${shared ? 'shared' : 'inline'} helpers)`, () => {
 			if (failed.has(dir)) {
 				// this makes debugging easier, by only printing compiled output once
-				throw new Error('skipping inline helpers test');
+				throw new Error('skipping test, already failed');
 			}
 
 			const cwd = path.resolve(`test/runtime/samples/${dir}`);
 
 			compileOptions = config.compileOptions || {};
 			compileOptions.shared = shared;
+			compileOptions.hydratable = hydrate;
 			compileOptions.dev = config.dev;
 
 			// check that no ES2015+ syntax slipped in
@@ -157,6 +158,7 @@ describe("runtime", () => {
 
 					const component = new SvelteComponent({
 						target,
+						hydrate,
 						data: config.data
 					});
 
@@ -208,8 +210,9 @@ describe("runtime", () => {
 
 	const shared = path.resolve("shared.js");
 	fs.readdirSync("test/runtime/samples").forEach(dir => {
-		runTest(dir, shared);
+		runTest(dir, shared, false);
-		runTest(dir, null);
+		runTest(dir, shared, true);
+		runTest(dir, null, false);
 	});
 
 	it("fails if options.target is missing in dev mode", () => {