use esrap preview

Author: manuel3108

packages/svelte/package.json

@@ -176,7 +176,7 @@
     "clsx": "^2.1.1",
     "devalue": "^5.5.0",
     "esm-env": "^1.2.1",
-    "esrap": "^2.2.1",
+    "esrap": "https://pkg.pr.new/sveltejs/esrap@101",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",

packages/svelte/tests/print/samples/formatting/output.svelte

@@ -4,33 +4,41 @@
 </script>
 
 <h1>{m.hello_world({ name: 'SvelteKit User' })}</h1>
+
 <div>
 	<button onclick={() => setLocale('en')}>en</button>
 	<button onclick={() => setLocale('es')}>es</button>
 </div>
+
 <p>
 	If you use VSCode, install the 
+
 	<a
 		href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension"
 		target="_blank"
 	>Sherlock i18n extension</a>
+
 	for a better i18n experience.
 </p>
+
 <Component>
 	<div>
 		<button>Hello, this is a test</button>
 		<button>Hello, this is a test</button>
 	</div>
 </Component>
+
 <Component>
 	<button>Hello, this is a test</button>
 	<button>Hello, this is a test</button>
 </Component>
+
 <button
 	class="foo bar"
 	aria-label="click"
 	onclick={() => console.log("clicked")}
 >Click me!</button>
+
 <button
 	class="foo bar"
 	aria-label="click"

packages/svelte/tests/print/samples/style-directive/output.svelte

@@ -1,4 +1,5 @@
 <div style:color="red">...</div>
+
 <div
 	style:color
 	style:width="12rem"

packages/svelte/tests/print/samples/svelte-fragment/output.svelte

@@ -4,6 +4,7 @@
 
 <Widget>
 	<h1 slot="header">Hello</h1>
+
 	<svelte:fragment slot="footer">
 		<p>All rights reserved.</p>
 		<p>Copyright (c) 2019 Svelte Industries</p>

packages/svelte/tests/print/samples/svelte-head/output.svelte

@@ -1,5 +1,6 @@
 <svelte:head>
 	<title>Hello world!</title>
+
 	<meta
 		name="description"
 		content="This is where the description goes for SEO"