various

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -460,7 +460,7 @@ export default class ElementWrapper extends Wrapper {
 							@_cancelAnimationFrame(${animation_frame});
 							if (!${this.var}.paused) {
 								${animation_frame} = @raf(${handler});
-								${needs_lock && `${lock} = true;`}
+								${needs_lock && b`${lock} = true;`}
 							}
 							#ctx.${handler}.call(${this.var}, ${contextual_dependencies.size > 0 ? '#ctx' : null});
 						}

src/compiler/compile/render_dom/wrappers/IfBlock.ts

@@ -182,7 +182,7 @@ export default class IfBlockWrapper extends Wrapper {
 			: (this.next && this.next.var) || 'null';
 
 		const has_else = !(this.branches[this.branches.length - 1].condition);
-		const if_exists_condition = has_else ? x`true` : name;
+		const if_exists_condition = has_else ? null : name;
 
 		const dynamic = this.branches[0].block.has_update_method; // can use [0] as proxy for all, since they necessarily have the same value
 		const has_intros = this.branches[0].block.has_intro_method;
@@ -213,12 +213,22 @@ export default class IfBlockWrapper extends Wrapper {
 			}
 		}
 
+		if (if_exists_condition) {
 			block.chunks.create.push(b`if (${if_exists_condition}) ${name}.c();`);
+		} else {
+			block.chunks.create.push(b`${name}.c();`);
+		}
 
 		if (parent_nodes && this.renderer.options.hydratable) {
+			if (if_exists_condition) {
 				block.chunks.claim.push(
 					b`if (${if_exists_condition}) ${name}.l(${parent_nodes});`
 				);
+			} else {
+				block.chunks.claim.push(
+					b`${name}.l(${parent_nodes});`
+				);
+			}
 		}
 
 		if (has_intros || has_outros) {
@@ -286,15 +296,22 @@ export default class IfBlockWrapper extends Wrapper {
 
 		const initial_mount_node = parent_node || '#target';
 		const anchor_node = parent_node ? 'null' : 'anchor';
+
+		if (if_exists_condition) {
 			block.chunks.mount.push(
 				b`if (${if_exists_condition}) ${name}.m(${initial_mount_node}, ${anchor_node});`
 			);
+		} else {
+			block.chunks.mount.push(
+				b`${name}.m(${initial_mount_node}, ${anchor_node});`
+			);
+		}
 
 		if (this.needs_update) {
 			const update_mount_node = this.get_update_mount_node(anchor);
 
 			const change_block = b`
-				if (${if_exists_condition}) ${name}.d(1);
+				${if_exists_condition ? b`if (${if_exists_condition}) ${name}.d(1)` : b`${name}.d(1)`};
 				${name} = ${get_block};
 				if (${name}) {
 					${name}.c();
@@ -322,11 +339,17 @@ export default class IfBlockWrapper extends Wrapper {
 			block.chunks.update.push(b`${name}.p(#changed, #ctx);`);
 		}
 
+		if (if_exists_condition) {
 			block.chunks.destroy.push(b`
 				if (${if_exists_condition}) {
 					${name}.d(${detaching});
 				}
 			`);
+		} else {
+			block.chunks.destroy.push(b`
+				${name}.d(${detaching});
+			`);
+		}
 	}
 
 	// if any of the siblings have outros, we need to keep references to the blocks
@@ -554,8 +577,14 @@ export default class IfBlockWrapper extends Wrapper {
 			`);
 		}
 
+		if (if_exists_condition) {
 			block.chunks.destroy.push(b`
 				if (${if_exists_condition}) ${name}.d(${detaching});
 			`);
+		} else {
+			block.chunks.destroy.push(b`
+				${name}.d(${detaching});
+			`);
+		}
 	}
 }

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -380,7 +380,7 @@ export default class InlineComponentWrapper extends Wrapper {
 				var ${switch_value} = ${snippet};
 
 				function ${switch_props}(#ctx) {
-					${(this.node.attributes.length || this.node.bindings.length) && b`
+					${(this.node.attributes.length > 0 || this.node.bindings.length > 0) && b`
 					${props && b`let ${props} = ${attribute_object};`}`}
 					${statements}
 					return ${component_opts};
@@ -462,7 +462,7 @@ export default class InlineComponentWrapper extends Wrapper {
 				: component.qualify(this.node.name);
 
 			block.chunks.init.push(b`
-				${(this.node.attributes.length || this.node.bindings.length) && b`
+				${(this.node.attributes.length > 0 || this.node.bindings.length > 0) && b`
 				${props && b`let ${props} = ${attribute_object};`}`}
 				${statements}
 				const ${name} = new ${expression}(${component_opts});

src/compiler/compile/render_ssr/handlers/Comment.ts

@@ -2,7 +2,9 @@ import Renderer, { RenderOptions } from '../Renderer';
 import Comment from '../../nodes/Comment';
 
 export default function(node: Comment, renderer: Renderer, options: RenderOptions) {
-	if (options.preserveComments) {
+	// TODO preserve comments
-		renderer.append(`<!--${node.data}-->`);
+
-	}
+	// if (options.preserveComments) {
+	// 	renderer.append(`<!--${node.data}-->`);
+	// }
 }

src/compiler/compile/render_ssr/handlers/DebugTag.ts

@@ -1,6 +1,6 @@
 import DebugTag from '../../nodes/DebugTag';
 import Renderer, { RenderOptions } from '../Renderer';
-import { x } from 'code-red';
+import { x, p } from 'code-red';
 
 export default function(node: DebugTag, renderer: Renderer, options: RenderOptions) {
 	if (!options.dev) return;
@@ -9,7 +9,7 @@ export default function(node: DebugTag, renderer: Renderer, options: RenderOptio
 	const { line, column } = options.locate(node.start + 1);
 
 	const obj = x`{
-		${node.expressions.map(e => e.node.name)}
+		${node.expressions.map(e => p`${e.node.name}`)}
 	}`;
 
 	renderer.add_expression(x`@debug(${filename ? x`"${filename}"` : x`null`}, ${line}, ${column}, ${obj})`);

test/js/index.js

@@ -3,7 +3,7 @@ import * as fs from "fs";
 import * as path from "path";
 import { loadConfig, svelte } from "../helpers.js";
 
-describe.only("js", () => {
+describe("js", () => {
 	fs.readdirSync("test/js/samples").forEach(dir => {
 		if (dir[0] === ".") return;
 

test/js/samples/debug-ssr-foo/expected.js

@@ -1,18 +1,12 @@
-/* generated by Svelte vX.Y.Z */
+import { create_ssr_component, debug, each, escape } from "svelte/internal";
-import {
-	create_ssr_component,
-	debug,
-	each,
-	escape
-} from "svelte/internal";
 
 const Component = create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
-	let { things, foo } = $$props;
+	let { things } = $$props;
-
+	let { foo } = $$props;
 	if ($$props.things === void 0 && $$bindings.things && things !== void 0) $$bindings.things(things);
 	if ($$props.foo === void 0 && $$bindings.foo && foo !== void 0) $$bindings.foo(foo);
 
-	return `${each(things, (thing) => `<span>${escape(thing.name)}</span>
+	return `${each(things, thing => `<span>${escape(thing.name)}</span>
 	${debug(null, 7, 2, { foo })}`)}
 
 <p>foo: ${escape(foo)}</p>`;

test/js/samples/if-block-no-update/expected.js

@@ -67,6 +67,7 @@ function create_fragment(ctx) {
 			if (current_block_type !== (current_block_type = select_block_type(changed, ctx))) {
 				if_block.d(1);
 				if_block = current_block_type(ctx);
+
 				if (if_block) {
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);

test/js/samples/media-bindings/expected.js

@@ -1,4 +1,3 @@
-/* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -15,14 +14,20 @@ import {
 } from "svelte/internal";
 
 function create_fragment(ctx) {
-	var audio, audio_updating = false, audio_animationframe, audio_is_paused = true, dispose;
+	let audio;
+	let audio_updating = false;
+	let audio_animationframe;
+	let audio_is_paused = true;
+	let dispose;
 
 	function audio_timeupdate_handler() {
 		cancelAnimationFrame(audio_animationframe);
+
 		if (!audio.paused) {
 			audio_animationframe = raf(audio_timeupdate_handler);
 			audio_updating = true;
 		}
+
 		ctx.audio_timeupdate_handler.call(audio);
 	}
 
@@ -45,87 +50,97 @@ function create_fragment(ctx) {
 				listen(audio, "ratechange", ctx.audio_ratechange_handler)
 			];
 		},
-
 		m(target, anchor) {
 			insert(target, audio, anchor);
+			audio.volume = ctx.volume;
+			audio.playbackRate = ctx.playbackRate;
+		},
+		p(changed, ctx) {
+			if (!audio_updating && changed.currentTime && !isNaN(ctx.currentTime)) {
+				audio.currentTime = ctx.currentTime;
+			}
+
+			if (changed.paused && audio_is_paused !== (audio_is_paused = ctx.paused)) {
+				audio[audio_is_paused ? "pause" : "play"]();
+			}
 
+			if (changed.volume && !isNaN(ctx.volume)) {
 				audio.volume = ctx.volume;
+			}
 
+			if (changed.playbackRate && !isNaN(ctx.playbackRate)) {
 				audio.playbackRate = ctx.playbackRate;
-		},
+			}
 
-		p(changed, ctx) {
-			if (!audio_updating && changed.currentTime && !isNaN(ctx.currentTime)) audio.currentTime = ctx.currentTime;
-			if (changed.paused && audio_is_paused !== (audio_is_paused = ctx.paused)) audio[audio_is_paused ? "pause" : "play"]();
-			if (changed.volume && !isNaN(ctx.volume)) audio.volume = ctx.volume;
-			if (changed.playbackRate && !isNaN(ctx.playbackRate)) audio.playbackRate = ctx.playbackRate;
 			audio_updating = false;
 		},
-
 		i: noop,
 		o: noop,
-
 		d(detaching) {
-			if (detaching) {
+			if (detaching) detach(audio);
-				detach(audio);
-			}
-
 			run_all(dispose);
 		}
 	};
 }
 
 function instance($$self, $$props, $$invalidate) {
-	let { buffered, seekable, played, currentTime, duration, paused, volume, playbackRate } = $$props;
+	let { buffered } = $$props;
+	let { seekable } = $$props;
+	let { played } = $$props;
+	let { currentTime } = $$props;
+	let { duration } = $$props;
+	let { paused } = $$props;
+	let { volume } = $$props;
+	let { playbackRate } = $$props;
 
 	function audio_timeupdate_handler() {
 		played = time_ranges_to_array(this.played);
 		currentTime = this.currentTime;
-		$$invalidate('played', played);
+		$$invalidate("played", played);
-		$$invalidate('currentTime', currentTime);
+		$$invalidate("currentTime", currentTime);
 	}
 
 	function audio_durationchange_handler() {
 		duration = this.duration;
-		$$invalidate('duration', duration);
+		$$invalidate("duration", duration);
 	}
 
 	function audio_play_pause_handler() {
 		paused = this.paused;
-		$$invalidate('paused', paused);
+		$$invalidate("paused", paused);
 	}
 
 	function audio_progress_handler() {
 		buffered = time_ranges_to_array(this.buffered);
-		$$invalidate('buffered', buffered);
+		$$invalidate("buffered", buffered);
 	}
 
 	function audio_loadedmetadata_handler() {
 		buffered = time_ranges_to_array(this.buffered);
 		seekable = time_ranges_to_array(this.seekable);
-		$$invalidate('buffered', buffered);
+		$$invalidate("buffered", buffered);
-		$$invalidate('seekable', seekable);
+		$$invalidate("seekable", seekable);
 	}
 
 	function audio_volumechange_handler() {
 		volume = this.volume;
-		$$invalidate('volume', volume);
+		$$invalidate("volume", volume);
 	}
 
 	function audio_ratechange_handler() {
 		playbackRate = this.playbackRate;
-		$$invalidate('playbackRate', playbackRate);
+		$$invalidate("playbackRate", playbackRate);
 	}
 
 	$$self.$set = $$props => {
-		if ('buffered' in $$props) $$invalidate('buffered', buffered = $$props.buffered);
+		if ("buffered" in $$props) $$invalidate("buffered", buffered = $$props.buffered);
-		if ('seekable' in $$props) $$invalidate('seekable', seekable = $$props.seekable);
+		if ("seekable" in $$props) $$invalidate("seekable", seekable = $$props.seekable);
-		if ('played' in $$props) $$invalidate('played', played = $$props.played);
+		if ("played" in $$props) $$invalidate("played", played = $$props.played);
-		if ('currentTime' in $$props) $$invalidate('currentTime', currentTime = $$props.currentTime);
+		if ("currentTime" in $$props) $$invalidate("currentTime", currentTime = $$props.currentTime);
-		if ('duration' in $$props) $$invalidate('duration', duration = $$props.duration);
+		if ("duration" in $$props) $$invalidate("duration", duration = $$props.duration);
-		if ('paused' in $$props) $$invalidate('paused', paused = $$props.paused);
+		if ("paused" in $$props) $$invalidate("paused", paused = $$props.paused);
-		if ('volume' in $$props) $$invalidate('volume', volume = $$props.volume);
+		if ("volume" in $$props) $$invalidate("volume", volume = $$props.volume);
-		if ('playbackRate' in $$props) $$invalidate('playbackRate', playbackRate = $$props.playbackRate);
+		if ("playbackRate" in $$props) $$invalidate("playbackRate", playbackRate = $$props.playbackRate);
 	};
 
 	return {
@@ -150,7 +165,17 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["buffered", "seekable", "played", "currentTime", "duration", "paused", "volume", "playbackRate"]);
+
+		init(this, options, instance, create_fragment, safe_not_equal, [
+			"buffered",
+			"seekable",
+			"played",
+			"currentTime",
+			"duration",
+			"paused",
+			"volume",
+			"playbackRate"
+		]);
 	}
 }
 

test/js/samples/non-imported-component/expected.js

@@ -11,6 +11,7 @@ import {
 	transition_in,
 	transition_out
 } from "svelte/internal";
+
 import Imported from "Imported.svelte";
 
 function create_fragment(ctx) {

test/js/samples/ssr-no-oncreate-etc/expected.js

@@ -5,14 +5,14 @@ function preload(input) {
 	return output;
 }
 
-function swipe(node, callback) {
-
-}
-
 function foo() {
 	console.log("foo");
 }
 
+function swipe(node, callback) {
+
+}
+
 const Component = create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
 	onMount(() => {
 		console.log("onMount");

test/js/samples/ssr-preserve-comments/expected.js

@@ -1,9 +1,8 @@
-/* generated by Svelte vX.Y.Z */
 import { create_ssr_component } from "svelte/internal";
 
 const Component = create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
 	return `<div>content</div>
-	<!-- comment -->
+
 <div>more content</div>`;
 });