svelte-cheatsheet.svelte

// importing data

import { onMount } from 'svelte';

onMount(async() => {
  const res = await fetch(`/tutorial/api/album`);
  photos = await res.json();
  console.log(photos)
})

// running on interval
import { onDestroy } from 'svelte';

export function onInterval(callback, milliseconds) {
  const interval = setInterval(callback, milliseconds);
  onDestroy(() => {
    clearInterval(interval);
  });
}

// this runs every millisecond
let counter = 0;
onInterval(() => counter += 1, 1000);

// importing d3 stuff
import { sum } from 'd3-array';
import { json, tsv } from 'd3-fetch';

// motion tweening
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
const progress = tweened(0, {
  duration: 400,
  easing: cubicOut
});

// fade in and out

<script>
import { fade } from 'svelte/transition';
let visible = true;
</script>

<label><input type="checkbox" bind:checked={visible}>visible</label>
{#if visible}
  <p transition:fade>Fades in and out</p>
{/if}