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

Clean up repl examples
pull/1958/head
Rich Harris 6 years ago committed by GitHub
commit dcad65b118
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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

@ -1,8 +1,6 @@
<!-- https://eugenkiss.github.io/7guis/tasks#crud --> <!-- https://eugenkiss.github.io/7guis/tasks#crud -->
<script> <script>
import { beforeUpdate } from 'svelte';
export let people = []; export let people = [];
let filteredPeople; let filteredPeople;

@ -27,7 +27,7 @@
} }
function convertToDate(str) { function convertToDate(str) {
var split = str.split('-'); const split = str.split('-');
return new Date(+split[0], +split[1] - 1, +split[2]); return new Date(+split[0], +split[1] - 1, +split[2]);
} }

@ -1,9 +1,7 @@
<script> <script>
export let promise; let promise;
// [svelte-upgrade suggestion] function findAnswer() {
// review these functions and remove unnecessary 'export' keywords
export function findAnswer() {
promise = new Promise(fulfil => { promise = new Promise(fulfil => {
const delay = 1000 + Math.random() * 3000; const delay = 1000 + Math.random() * 3000;
setTimeout(() => fulfil(42), delay); setTimeout(() => fulfil(42), delay);

@ -1,5 +1,4 @@
<script> <script>
import { onMount } from 'svelte';
import { scaleLinear } from 'd3-scale'; import { scaleLinear } from 'd3-scale';
export let points; export let points;

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

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

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

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

@ -1,7 +1,7 @@
<script> <script>
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
export let visible; let visible;
</script> </script>
<input type=checkbox bind:checked={visible}> visible <input type=checkbox bind:checked={visible}> visible

@ -1,7 +1,7 @@
<script> <script>
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
export let visible; let visible;
</script> </script>
<input type=checkbox bind:checked={visible}> visible <input type=checkbox bind:checked={visible}> visible

@ -1,7 +1,7 @@
<script> <script>
import { fade, fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
export let visible; let visible;
</script> </script>
<input type=checkbox bind:checked={visible}> visible <input type=checkbox bind:checked={visible}> visible

Loading…
Cancel
Save