React使いが語るSvelteなら〇〇が要らない

<!-- These are equivalent -->
<div class={isCool ? "cool" : ""}>...</div>
<div class:cool={isCool}>...</div>

<!-- These are equivalent -->
<div style:color="red">...</div>
<div style="color: red">...</div>

<style>
.bouncy {
  animation: bounce 10s;
}

/* these keyframes are only accessible inside this component */
@keyframes bounce {
  /* ... */
}
</style>

<Slider
  bind:value
  min={0}
  max={100}
  --track-color="black"
  --thumb-color="rgb({r} {g} {b})"
/>

<svelte-css-wrapper
  style="display: contents; --track-color: black; --thumb-color: rgb({ r } { g } { b })"
>
  <Slider
    bind:value
    min={0}
    max={100}
  />
</svelte-css-wrapper>

<input
  bind:value
  type="range"
  min={0}
  max={100}
  style:--track-color="black"
  style:--thumb-color="rgb({r} {g} {b})"
/>

<script>
import { fade } from "svelte/transition";

let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>toggle</button>

{#if visible}
  <div transition:fade>fades in and out</div>
{/if}

<!-- When `list` is reordered the animation will run -->
{#each list as item, index (item)}
  <li animate:flip>{item}</li>
{/each}

<script>
let count = $state(0);
</script>

<button onclick={() => count++}>
  clicks: {count}
</button>

export const myGlobalState = $state({
  user: {
    /* ... */
  },
  /* ... */
});

<script>
import { myGlobalState } from "./state.svelte";
// ...
</script>;

<script>
let numbers = $state([1, 2, 3]);
let total = $derived.by(() => {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
});
</script>

<button onclick={() => numbers.push(numbers.length + 1)}>
  {numbers.join(" + ")} = {total}
</button>

<script>
let size = $state(50);
let color = $state("#ff3e00");

let canvas;

$effect(() => {
  const context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);

  // this will re-run whenever `color` or `size` change
  context.fillStyle = color;
  context.fillRect(0, 0, size, size);
});
</script>

<canvas bind:this={canvas} width="100" height="100" />

<script lang="ts">
import type { PageData } from "./$types";

let { data }: { data: PageData } = $props();
</script>

{#await promise}
  <!-- promise is pending -->
  <p>waiting for the promise to resolve...</p>
{:then value}
  <!-- promise was fulfilled or not a Promise -->
  <p>The value is {value}</p>
{:catch error}
  <!-- promise was rejected -->
  <p>Something went wrong: {error.message}</p>
{/await}