jeppzone

import { readable, derived } from 'svelte/store';

export const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return function stop() {
    clearInterval(interval);
  };

jeppzone

import { readable } from 'svelte/store';

export const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return function stop() {
    clearInterval(interval);
  };

jeppzone

<script>
  import { count } from "./stores.js";
</script>

<h1>The count is {$count}</h1>

jeppzone

<script>
  import { onDestroy } from "svelte";
  import { count } from "./stores.js";

  let countValue;

  const unsubscribe = count.subscribe((value) => {
    countValue = value;
  });

jeppzone

import { writable } from 'svelte/store';

export const count = writable(0);

jeppzone

{#if visible}
  <p transition:fade>
     Fades in and out
  </p>
{/if}

jeppzone

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>

jeppzone

render(){
  return (
    <ul>
      {this.state.cats.map(cat => (
        <li>
          <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
            {cat.name}
          </a>
        </li>
      ))}

jeppzone

<ul>
  {#each cats as { id, name }, i}
    <li>
      <a target="_blank" href="https://www.youtube.com/watch?v={id}">
        {i + 1}: {name}
      </a>
    </li>
  {/each}
</ul>

jeppzone

render(){
  let component;
  if (loading) {
    component = <LoadingIndicator />
  } else {
    component = <SomeOtherComponent />
  }

  return (
    <div>