Merge pull request #1956 from sveltejs/clean-up-repl-examples

Clean up repl examples

site/.eslintrc.json

@@ -35,7 +35,7 @@
 	],
 	"plugins": ["svelte3"],
 	"parserOptions": {
-		"ecmaVersion": 6,
+		"ecmaVersion": 8,
 		"sourceType": "module"
 	},
 	"settings": {

site/content/examples/7guis-crud/App.html

@@ -1,8 +1,6 @@
 <!-- https://eugenkiss.github.io/7guis/tasks#crud -->
 
 <script>
-	import { beforeUpdate } from 'svelte';
-
 	export let people = [];
 
 	let filteredPeople;
@@ -81,4 +79,4 @@
 	<button on:click={create} disabled="{!first || !last}">create</button>
 	<button on:click={update} disabled="{!first || !last || !selected}">update</button>
 	<button on:click={remove} disabled="{!selected}">delete</button>
-</div>
+</div>

site/content/examples/7guis-flight-booker/App.html

@@ -27,7 +27,7 @@
 	}
 
 	function convertToDate(str) {
-		var split = str.split('-');
+		const split = str.split('-');
 		return new Date(+split[0], +split[1] - 1, +split[2]);
 	}
 
@@ -58,4 +58,4 @@
 <button
 	on:click={bookFlight}
 	disabled="{isReturn && (startDate() >= endDate())}"
->book</button>
+>book</button>

site/content/examples/await-block/App.html

@@ -1,13 +1,11 @@
 <script>
-	export let promise;
+	let promise;
 
-	// [svelte-upgrade suggestion]
-	// review these functions and remove unnecessary 'export' keywords
-	export function findAnswer() {
+	function findAnswer() {
 		promise = new Promise(fulfil => {
-				const delay = 1000 + Math.random() * 3000;
-				setTimeout(() => fulfil(42), delay);
-			});
+			const delay = 1000 + Math.random() * 3000;
+			setTimeout(() => fulfil(42), delay);
+		});
 	}
 </script>
 
@@ -21,4 +19,4 @@
 	{:catch error}
 		<p>well that's odd</p>
 	{/await}
-{/if}
+{/if}

site/content/examples/bar-chart/App.html

@@ -1,5 +1,4 @@
 <script>
-	import { onMount } from 'svelte';
 	import { scaleLinear } from 'd3-scale';
 
 	export let points;
@@ -109,4 +108,4 @@
 			{/each}
 		</g>
 	</svg>
-</div>
+</div>

site/content/examples/binding-media-elements/App.html

@@ -1,16 +1,16 @@
 <script>
-	export let paused = true;
-	export let t = 0;
-	export let d;
+	let paused = true;
+	let t = 0;
+	let d;
 
 	let icon, bg;
 
 	$: icon = `https://icon.now.sh/${paused ? 'play' : 'pause'}_circle_filled`;
 
 	$: {
-		var p = d ? t / d : 0;
-		var h = 90 + 90 * p;
-		var l = 10 + p * 30;
+		const p = d ? t / d : 0;
+		const h = 90 + 90 * p;
+		const l = 10 + p * 30;
 		bg = `hsl(${h},50%,${l}%)`;
 	}
 
@@ -20,8 +20,8 @@
 
 	const format = time => {
 		if (isNaN(time)) return '--:--.-';
-		var minutes = Math.floor(time / 60);
-		var seconds = (time % 60).toFixed(1);
+		const minutes = Math.floor(time / 60);
+		const seconds = (time % 60).toFixed(1);
 
 		return minutes + ':' + pad(seconds)
 	};
@@ -29,7 +29,7 @@
 	function seek(event) {
 		if (event.buttons === 1) {
 			event.preventDefault();
-			var p = event.clientX / window.innerWidth;
+			const p = event.clientX / window.innerWidth;
 			t = p * d;
 		}
 	}

site/content/examples/line-chart/App.html

@@ -8,7 +8,6 @@
 	const xTicks = [1980, 1990, 2000, 2010];
 	const padding = { top: 20, right: 15, bottom: 20, left: 25 };
 
-	let svg;
 	let width = 500;
 	let height = 200;
 
@@ -36,10 +35,9 @@
 		return "'" + tick % 100;
 	}
 
+	let svg;
 	function resize() {
-		const bcr = svg.getBoundingClientRect();
-		width = bcr.width;
-		height = bcr.height;
+		({ width, height } = svg.getBoundingClientRect());
 	}
 
 	onMount(resize);
@@ -126,4 +124,4 @@
 	.path-area {
 		fill: rgba(0,100,100,0.2);
 	}
-</style>
+</style>

site/content/examples/scatterplot/Scatterplot.html

@@ -1,62 +1,47 @@
 <script>
-	// TODO this example needs updating
 	import { onMount } from 'svelte';
 	import { scaleLinear } from 'd3-scale';
 
-	export let svg;
-
-	const xScale = scaleLinear();
-	const yScale = scaleLinear();
-
-	export let width = 500;
-	export let height = 200;
-	export let padding = { top: 20, right: 40, bottom: 40, left: 25 };
 	export let points;
-	export let xTicks = [0, 4, 8, 12, 16, 20];
-	export let yTicks = [0, 2, 4, 6, 8, 10, 12];
-
-	function xTicks() {
-		return width > 180 ?
-			[0, 4, 8, 12, 16, 20] :
-			[0, 10, 20];
-	}
-
-	function yTicks() {
-		return height > 180 ?
-			[0, 2, 4, 6, 8, 10, 12] :
-			[0, 4, 8, 12];
-	}
-
-	function xScale() {
-		return xScale()
-			.domain([0, 20])
-			.range([padding.left, width - padding.right]);
-	}
-
-	function yScale() {
-		return yScale()
-			.domain([0, 12])
-			.range([height - padding.bottom, padding.top]);
-	}
-
-	onMount(() => {
-		resize();
-	});
 
+	const padding = { top: 20, right: 40, bottom: 40, left: 25 };
+
+	let xScale;
+	$: xScale = scaleLinear()
+		.domain([0, 20])
+		.range([padding.left, width - padding.right]);
+	let yScale;
+	$: yScale = scaleLinear()
+		.domain([0, 12])
+		.range([height - padding.bottom, padding.top]);
+
+	let width = 500;
+	let height = 200;
+	let xTicks;
+	$: xTicks = width > 180 ?
+		[0, 4, 8, 12, 16, 20] :
+		[0, 10, 20];
+	let yTicks;
+	$: yTicks = height > 180 ?
+		[0, 2, 4, 6, 8, 10, 12] :
+		[0, 4, 8, 12];
+
+	onMount(resize);
+
+	let svg;
 	function resize() {
-		const { width, height } = svg.getBoundingClientRect();
-		width = width, height = height;
+		({ width, height } = svg.getBoundingClientRect());
 	}
 </script>
 
 <svelte:window on:resize='{resize}'/>
 
-<svg ref:svg>
+<svg bind:this={svg}>
 	<!-- y axis -->
 	<g class='axis y-axis'>
 		{#each yTicks as tick}
-			<g class='tick tick-{tick}' transform='translate(0, {yScale()(tick)})'>
-				<line x1='{padding.left}' x2='{xScale()(22)}'/>
+			<g class='tick tick-{tick}' transform='translate(0, {yScale(tick)})'>
+				<line x1='{padding.left}' x2='{xScale(22)}'/>
 				<text x='{padding.left - 8}' y='+4'>{tick}</text>
 			</g>
 		{/each}
@@ -65,8 +50,8 @@
 	<!-- x axis -->
 	<g class='axis x-axis'>
 		{#each xTicks as tick}
-			<g class='tick' transform='translate({xScale()(tick)},0)'>
-				<line y1='{yScale()(0)}' y2='{yScale()(13)}'/>
+			<g class='tick' transform='translate({xScale(tick)},0)'>
+				<line y1='{yScale(0)}' y2='{yScale(13)}'/>
 				<text y='{height - padding.bottom + 16}'>{tick}</text>
 			</g>
 		{/each}
@@ -74,7 +59,7 @@
 
 	<!-- data -->
 	{#each points as point}
-		<circle cx='{xScale()(point.x)}' cy='{yScale()(point.y)}' r='5'/>
+		<circle cx='{xScale(point.x)}' cy='{yScale(point.y)}' r='5'/>
 	{/each}
 </svg>
 
@@ -108,4 +93,4 @@
 	.y-axis text {
 		text-anchor: end;
 	}
-</style>
+</style>

site/content/examples/transitions-custom/App.html

@@ -2,7 +2,7 @@
 	import * as eases from 'svelte/easing';
 	import { fade } from 'svelte/transition';
 
-	export let visible;
+	let visible;
 
 	const wheee = (node, params) => {
 		return {

site/content/examples/transitions-fade/App.html

@@ -1,11 +1,11 @@
 <script>
 	import { fade } from 'svelte/transition';
 
-	export let visible;
+	let visible;
 </script>
 
 <input type=checkbox bind:checked={visible}> visible
 
 {#if visible}
 	<p transition:fade>fades in and out</p>
-{/if}
+{/if}

site/content/examples/transitions-fly/App.html

@@ -1,11 +1,11 @@
 <script>
 	import { fly } from 'svelte/transition';
 
-	export let visible;
+	let visible;
 </script>
 
 <input type=checkbox bind:checked={visible}> visible
 
 {#if visible}
 	<p transition:fly="{{y: 200, duration: 1000}}">flies 200 pixels up, slowly</p>
-{/if}
+{/if}

site/content/examples/transitions-in-out/App.html

@@ -1,11 +1,11 @@
 <script>
 	import { fade, fly } from 'svelte/transition';
 
-	export let visible;
+	let visible;
 </script>
 
 <input type=checkbox bind:checked={visible}> visible
 
 {#if visible}
 	<p in:fly="{{y: 50}}" out:fade>flies up, fades out</p>
-{/if}
+{/if}