Advanced Svelte Concepts

// src/lib/actions/clickOutside.js
export function clickOutside(node, callback) {
  function handleClick(event) {
    if (!node.contains(event.target)) {
      callback();
    }
  }

  document.addEventListener('click', handleClick, true);

  return {
    destroy() {
      document.removeEventListener('click', handleClick, true);
    }
  };
}

// src/lib/actions/tooltip.js
export function tooltip(node, text) {
  const tip = document.createElement('div');
  tip.className = 'tooltip';
  tip.textContent = text;

  node.addEventListener('mouseenter', () => {
    document.body.appendChild(tip);
    const rect = node.getBoundingClientRect();
    tip.style.cssText = `position:fixed;top:${rect.top - 36}px;left:${rect.left}px;
      background:#1e293b;color:white;padding:4px 8px;border-radius:6px;font-size:12px;z-index:9999`;
  });

  node.addEventListener('mouseleave', () => {
    tip.remove();
  });

  return {
    update(newText) { tip.textContent = newText; },
    destroy() { tip.remove(); }
  };
}

<!-- Using actions -->
<script>
  import { clickOutside } from &#039;$lib/actions/clickOutside.js';
  import { tooltip } from &#039;$lib/actions/tooltip.js';
  let open = false;
</script>

<div use:clickOutside={() => open = false}>
  <button on:click={() => open = !open}>Toggle Menu</button>
  {#if open}<div class="menu">Menu items...</div>{/if}
</div>

<button use:tooltip={&#039;Click to save'} on:click={save}>💾</button>

<script>
  import { crossfade } from &#039;svelte/transition';
  import { quintOut } from &#039;svelte/easing';

  const [send, receive] = crossfade({
    duration: 400,
    easing: quintOut,
    fallback: (node) => ({ duration: 200, css: t => `opacity: ${t}` })
  });

  let todo = [
    { id: 1, done: false, text: &#039;Learn Svelte' },
    { id: 2, done: false, text: &#039;Build something' }
  ];

  $: active = todo.filter(t => !t.done);
  $: done = todo.filter(t => t.done);

  function mark(item, isDone) {
    todo = todo.map(t => t.id === item.id ? { ...t, done: isDone } : t);
  }
</script>

<div class="columns">
  <div class="column">
    <h2>Active</h2>
    {#each active as item (item.id)}
      <div
        class="item"
        in:receive={{ key: item.id }}
        out:send={{ key: item.id }}
      >
        {item.text}
        <button on:click={() => mark(item, true)}>✓</button>
      </div>
    {/each}
  </div>

  <div class="column">
    <h2>Done</h2>
    {#each done as item (item.id)}
      <div
        class="item done"
        in:receive={{ key: item.id }}
        out:send={{ key: item.id }}
      >
        {item.text}
        <button on:click={() => mark(item, false)}>↩</button>
      </div>
    {/each}
  </div>
</div>

// src/lib/stores/persistent.js
import { writable } from 'svelte/store';

export function persistent(key, defaultValue) {
  const stored = typeof localStorage !== 'undefined'
    ? localStorage.getItem(key)
    : null;

  const initial = stored !== null ? JSON.parse(stored) : defaultValue;
  const store = writable(initial);

  store.subscribe(value => {
    if (typeof localStorage !== 'undefined') {
      localStorage.setItem(key, JSON.stringify(value));
    }
  });

  return store;
}

<script>
  import { persistent } from &#039;$lib/stores/persistent.js';
  const theme = persistent(&#039;theme', 'light');
</script>
<!-- theme persists across page refreshes! -->

<!-- Svelte 5 -->
<script>
  let count = $state(0);               // Replaces: let count = 0;
  let doubled = $derived(count * 2);   // Replaces: $: doubled = count * 2;

  $effect(() => {                       // Replaces: reactive block
    console.log(&#039;Count changed:', count);
    return () => console.log(&#039;cleanup');
  });
</script>

<button onclick={() => count++}>
  Count: {count} (Doubled: {doubled})
</button>

SSR Flow in SvelteKit:
1. User requests /products
2. Server runs load() function — fetches data from DB
3. Server renders HTML with data embedded
4. Browser receives complete HTML → FAST first paint
5. Svelte JS hydrates — attaches event listeners to server-rendered HTML
6. App is now interactive (CSR takes over)

Hydration: The process of Svelte attaching its reactivity system
to HTML that was pre-rendered on the server.