update parser and js tests

test/hydration/index.js

@@ -14,7 +14,7 @@ let compileOptions = null;
 
 const sveltePath = process.cwd();
 
-describe.only('hydration', () => {
+describe('hydration', () => {
 	before(() => {
 		const svelte = loadSvelte();
 

test/js/samples/bind-width-height/input.svelte

@@ -1,3 +1,8 @@
+<script>
+	export let w;
+	export let h;
+</script>
+
 <div bind:offsetWidth={w} bind:offsetHeight={h}>
 	some content
 </div>

test/js/samples/debug-empty/expected.js

@@ -14,7 +14,7 @@ function create_fragment(ctx) {
 			text2 = createText("!");
 			text3 = createText("\n");
 			debugger;
-			addLoc(h1, file, 0, 0, 0);
+			addLoc(h1, file, 4, 0, 38);
 		},
 
 		l: function claim(nodes) {

test/js/samples/debug-empty/input.svelte

@@ -1,2 +1,6 @@
+<script>
+	export let name;
+</script>
+
 <h1>Hello {name}!</h1>
 {@debug}

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -9,7 +9,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (1:0) {#each things as thing}
+// (8:0) {#each things as thing}
 function create_each_block(ctx) {
 	var span, text0_value = ctx.thing.name, text0, text1;
 
@@ -24,7 +24,7 @@ function create_each_block(ctx) {
 				console.log({ foo, bar, baz, thing });
 				debugger;
 			}
-			addLoc(span, file, 1, 1, 25);
+			addLoc(span, file, 8, 1, 116);
 		},
 
 		m: function mount(target, anchor) {
@@ -75,7 +75,7 @@ function create_fragment(ctx) {
 			p = createElement("p");
 			text1 = createText("foo: ");
 			text2 = createText(ctx.foo);
-			addLoc(p, file, 5, 0, 91);
+			addLoc(p, file, 12, 0, 182);
 		},
 
 		l: function claim(nodes) {

test/js/samples/debug-foo-bar-baz-things/input.svelte

@@ -1,3 +1,10 @@
+<script>
+	export let things;
+	export let foo;
+	export let bar;
+	export let baz;
+</script>
+
 {#each things as thing}
 	<span>{thing.name}</span>
 	{@debug foo, bar, baz, thing}

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

@@ -9,7 +9,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (1:0) {#each things as thing}
+// (6:0) {#each things as thing}
 function create_each_block(ctx) {
 	var span, text0_value = ctx.thing.name, text0, text1;
 
@@ -24,7 +24,7 @@ function create_each_block(ctx) {
 				console.log({ foo });
 				debugger;
 			}
-			addLoc(span, file, 1, 1, 25);
+			addLoc(span, file, 6, 1, 82);
 		},
 
 		m: function mount(target, anchor) {
@@ -75,7 +75,7 @@ function create_fragment(ctx) {
 			p = createElement("p");
 			text1 = createText("foo: ");
 			text2 = createText(ctx.foo);
-			addLoc(p, file, 5, 0, 74);
+			addLoc(p, file, 10, 0, 131);
 		},
 
 		l: function claim(nodes) {

test/js/samples/debug-foo/input.svelte

@@ -1,3 +1,8 @@
+<script>
+	export let things;
+	export let foo;
+</script>
+
 {#each things as thing}
 	<span>{thing.name}</span>
 	{@debug foo}

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

@@ -4,8 +4,11 @@ import { create_ssr_component, debug, each, escape } from "svelte/internal";
 const SvelteComponent = create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
 	let { things, 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>
-		${debug(null, 2, 2, { foo })}`)}
+		${debug(null, 7, 2, { foo })}`)}
 
 	<p>foo: ${escape(foo)}</p>`;
 });

test/js/samples/debug-ssr-foo/input.svelte

@@ -1,3 +1,8 @@
+<script>
+	export let things;
+	export let foo;
+</script>
+
 {#each things as thing}
 	<span>{thing.name}</span>
 	{@debug foo}

test/js/samples/deconflict-builtins/expected.js

@@ -7,7 +7,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (1:0) {#each createElement as node}
+// (5:0) {#each createElement as node}
 function create_each_block(ctx) {
 	var span, text_value = ctx.node, text;
 

test/js/samples/deconflict-builtins/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	export let createElement;
+</script>
+
 {#each createElement as node}
 	<span>{node}</span>
 {/each}

test/js/samples/do-use-dataset/input.svelte

@@ -1,2 +1,6 @@
+<script>
+	export let bar;
+</script>
+
 <div data-foo='bar'/>
 <div data-foo='{bar}'/>

test/js/samples/dont-use-dataset-in-legacy/input.svelte

@@ -1,2 +1,6 @@
+<script>
+	export let bar;
+</script>
+
 <div data-foo='bar'/>
 <div data-foo='{bar}'/>

test/js/samples/dont-use-dataset-in-svg/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	export let bar;
+</script>
+
 <svg>
 	<g data-foo='bar'/>
 	<g data-foo='{bar}'/>

test/js/samples/each-block-array-literal/expected.js

@@ -7,7 +7,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (1:0) {#each [a, b, c, d, e] as num}
+// (9:0) {#each [a, b, c, d, e] as num}
 function create_each_block(ctx) {
 	var span, text_value = ctx.num, text;
 

test/js/samples/each-block-array-literal/input.svelte

@@ -1,3 +1,11 @@
+<script>
+	export let a;
+	export let b;
+	export let c;
+	export let d;
+	export let e;
+</script>
+
 {#each [a, b, c, d, e] as num}
 	<span>{num}</span>
 {/each}

test/js/samples/each-block-changed-check/expected.js

@@ -8,7 +8,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (1:0) {#each comments as comment, i}
+// (8:0) {#each comments as comment, i}
 function create_each_block(ctx) {
 	var div, strong, text0, text1, span, text2_value = ctx.comment.author, text2, text3, text4_value = ctx.elapsed(ctx.comment.time, ctx.time), text4, text5, text6, raw_value = ctx.comment.html, raw_before;
 

test/js/samples/each-block-changed-check/input.svelte

@@ -1,3 +1,10 @@
+<script>
+	export let comments;
+	export let elapsed;
+	export let time;
+	export let foo;
+</script>
+
 {#each comments as comment, i}
 	<div class='comment'>
 		<strong>{i}</strong>

test/js/samples/each-block-keyed/expected.js

@@ -7,7 +7,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (1:0) {#each things as thing (thing.id)}
+// (5:0) {#each things as thing (thing.id)}
 function create_each_block(key_1, ctx) {
 	var div, text_value = ctx.thing.name, text;
 

test/js/samples/each-block-keyed/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	export let things;
+</script>
+
 {#each things as thing (thing.id)}
 	<div>{thing.name}</div>
 {/each}

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

@@ -1,7 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal";
 
-// (3:0) {:else}
+// (7:0) {:else}
 function create_else_block(ctx) {
 	var p;
 
@@ -23,7 +23,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (1:0) {#if foo}
+// (5:0) {#if foo}
 function create_if_block(ctx) {
 	var p;
 

test/js/samples/if-block-no-update/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	export let foo;
+</script>
+
 {#if foo}
 	<p>foo!</p>
 {:else}

test/js/samples/if-block-simple/expected.js

@@ -1,7 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal";
 
-// (1:0) {#if foo}
+// (5:0) {#if foo}
 function create_if_block(ctx) {
 	var p;
 

test/js/samples/if-block-simple/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	export let foo;
+</script>
+
 {#if foo}
 	<p>foo!</p>
 {/if}

test/js/samples/inline-style-optimized-multiple/input.svelte

@@ -1 +1,7 @@
+<script>
+	export let color;
+	export let x;
+	export let y;
+</script>
+
 <div style='color: {color}; transform: translate({x}px,{y}px);'></div>

test/js/samples/inline-style-optimized-url/input.svelte

@@ -1 +1,5 @@
+<script>
+	export let data;
+</script>
+
 <div style='background: url(data:image/png;base64,{data})'></div>

test/js/samples/inline-style-optimized/input.svelte

@@ -1 +1,5 @@
+<script>
+	export let color;
+</script>
+
 <div style='color: {color}'></div>

test/js/samples/inline-style-unoptimized/input.svelte

@@ -1,2 +1,8 @@
-<div style='{style}'></div>
+<script>
-<div style='{key}: {value}'></div>
+	export let style;
+	export let key;
+	export let value;
+</script>
+
+<div style={style}></div>
+<div style="{key}: {value}"></div>

test/js/samples/input-files/input.svelte

@@ -1 +1,5 @@
+<script>
+	export let files;
+</script>
+
 <input type="file" multiple bind:files>

test/js/samples/input-range/input.svelte

@@ -1 +1,5 @@
+<script>
+	export let value;
+</script>
+
 <input type=range bind:value>

test/js/samples/input-without-blowback-guard/input.svelte

@@ -1 +1,5 @@
+<script>
+	export let foo;
+</script>
+
 <input type='checkbox' bind:checked={foo}>

test/js/samples/media-bindings/input.svelte

@@ -1 +1,11 @@
+<script>
+	export let buffered;
+	export let seekable;
+	export let played;
+	export let currentTime;
+	export let duration;
+	export let paused;
+	export let volume;
+</script>
+
 <audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume/>

test/js/samples/select-dynamic-value/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	export let current;
+</script>
+
 <select value={current}>
 	<option value="1">1</option>
 	<option value="2">2</option>

test/js/samples/title/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	export let custom;
+</script>
+
 <svelte:head>
 	<title>a {custom} title</title>
 </svelte:head>

test/js/samples/use-elements-as-anchors/expected.js

@@ -1,7 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal";
 
-// (2:1) {#if a}
+// (10:1) {#if a}
 function create_if_block_4(ctx) {
 	var p;
 
@@ -23,7 +23,7 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (8:1) {#if b}
+// (16:1) {#if b}
 function create_if_block_3(ctx) {
 	var p;
 
@@ -45,7 +45,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (12:1) {#if c}
+// (20:1) {#if c}
 function create_if_block_2(ctx) {
 	var p;
 
@@ -67,7 +67,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (18:1) {#if d}
+// (26:1) {#if d}
 function create_if_block_1(ctx) {
 	var p;
 
@@ -89,7 +89,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (25:0) {#if e}
+// (33:0) {#if e}
 function create_if_block(ctx) {
 	var p;
 

test/js/samples/use-elements-as-anchors/input.svelte

@@ -1,3 +1,11 @@
+<script>
+	export let a;
+	export let b;
+	export let c;
+	export let d;
+	export let e;
+</script>
+
 <div>
 	{#if a}
 		<p>a</p>

test/js/samples/window-binding-scroll/input.svelte

@@ -1,3 +1,7 @@
+<script>
+	export let y;
+</script>
+
 <svelte:window bind:scrollY={y}/>
 
 <p>scrolled to {y}</p>

test/parser/samples/binding-shorthand/input.svelte

@@ -1 +1,5 @@
+<script>
+	let foo;
+</script>
+
 <Widget bind:foo/>

test/parser/samples/binding-shorthand/output.json

@@ -1,24 +1,30 @@
 {
 	"html": {
-		"start": 0,
+		"start": 30,
-		"end": 18,
+		"end": 48,
 		"type": "Fragment",
 		"children": [
 			{
-				"start": 0,
+				"start": 28,
-				"end": 18,
+				"end": 30,
+				"type": "Text",
+				"data": "\n\n"
+			},
+			{
+				"start": 30,
+				"end": 48,
 				"type": "InlineComponent",
 				"name": "Widget",
 				"attributes": [
 					{
-						"start": 8,
+						"start": 38,
-						"end": 16,
+						"end": 46,
 						"type": "Binding",
 						"name": "foo",
 						"modifiers": [],
 						"expression": {
-							"start": 13,
+							"start": 43,
-							"end": 16,
+							"end": 46,
 							"type": "Identifier",
 							"name": "foo"
 						}
@@ -28,7 +34,37 @@
 			}
 		]
 	},
-	"css": null,
+	"instance": {
-	"instance": null,
+		"start": 0,
-	"module": null
+		"end": 28,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 19,
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 18,
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 17,
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 17,
+								"name": "foo"
+							},
+							"init": null
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		}
+	}
 }

test/parser/samples/binding/input.svelte

@@ -1 +1,5 @@
+<script>
+	let name;
+</script>
+
 <input bind:value={name}>

test/parser/samples/binding/output.json

@@ -1,25 +1,31 @@
 {
 	"html": {
-		"start": 0,
+		"start": 31,
-		"end": 25,
+		"end": 56,
 		"type": "Fragment",
 		"children": [
 			{
-				"start": 0,
+				"start": 29,
-				"end": 25,
+				"end": 31,
+				"type": "Text",
+				"data": "\n\n"
+			},
+			{
+				"start": 31,
+				"end": 56,
 				"type": "Element",
 				"name": "input",
 				"attributes": [
 					{
-						"start": 7,
+						"start": 38,
-						"end": 24,
+						"end": 55,
 						"type": "Binding",
 						"name": "value",
 						"modifiers": [],
 						"expression": {
 							"type": "Identifier",
-							"start": 19,
+							"start": 50,
-							"end": 23,
+							"end": 54,
 							"name": "name"
 						}
 					}
@@ -28,7 +34,37 @@
 			}
 		]
 	},
-	"css": null,
+	"instance": {
-	"instance": null,
+		"start": 0,
-	"module": null
+		"end": 29,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 20,
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 19,
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 18,
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 18,
+								"name": "name"
+							},
+							"init": null
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		}
+	}
 }

test/parser/samples/refs/input.svelte

@@ -1 +1,5 @@
+<script>
+	let foo;
+</script>
+
 <canvas bind:this={foo}></canvas>

test/parser/samples/refs/output.json

@@ -1,25 +1,31 @@
 {
 	"html": {
-		"start": 0,
+		"start": 30,
-		"end": 33,
+		"end": 63,
 		"type": "Fragment",
 		"children": [
 			{
-				"start": 0,
+				"start": 28,
-				"end": 33,
+				"end": 30,
+				"type": "Text",
+				"data": "\n\n"
+			},
+			{
+				"start": 30,
+				"end": 63,
 				"type": "Element",
 				"name": "canvas",
 				"attributes": [
 					{
-						"start": 8,
+						"start": 38,
-						"end": 23,
+						"end": 53,
 						"type": "Binding",
 						"name": "this",
 						"modifiers": [],
 						"expression": {
 							"type": "Identifier",
-							"start": 19,
+							"start": 49,
-							"end": 22,
+							"end": 52,
 							"name": "foo"
 						}
 					}
@@ -28,7 +34,37 @@
 			}
 		]
 	},
-	"css": null,
+	"instance": {
-	"instance": null,
+		"start": 0,
-	"module": null
+		"end": 28,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 19,
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 18,
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 17,
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 17,
+								"name": "foo"
+							},
+							"init": null
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		}
+	}
 }