Context API and Advanced State Management

<!-- ThemeProvider.svelte (ancestor) -->
<script>
  import { setContext } from &#039;svelte';
  import { writable } from &#039;svelte/store';

  const theme = writable(&#039;light');

  // Set context — available to ALL descendants
  setContext(&#039;theme', {
    theme,
    toggleTheme: () => theme.update(t => t === &#039;light' ? 'dark' : 'light')
  });
</script>

<slot />

<!-- DeepNestedButton.svelte (deep descendant — no props needed!) -->
<script>
  import { getContext } from &#039;svelte';

  const { theme, toggleTheme } = getContext(&#039;theme');
</script>

<button on:click={toggleTheme} class:dark={$theme === &#039;dark'}>
  {$theme === &#039;light' ? '🌙 Dark Mode' : '☀️ Light Mode'}
</button>

<!-- App.svelte -->
<script>
  import ThemeProvider from &#039;./ThemeProvider.svelte';
  import Dashboard from &#039;./Dashboard.svelte';
</script>

<ThemeProvider>
  <Dashboard />  <!-- Dashboard can use DeepNestedButton anywhere inside! -->
</ThemeProvider>

// src/lib/stores/counterStore.js
import { writable, derived } from 'svelte/store';

export function createCounter(initialValue = 0, step = 1) {
  const { subscribe, set, update } = writable(initialValue);

  return {
    subscribe,
    increment: () => update(n => n + step),
    decrement: () => update(n => n - step),
    reset: () => set(initialValue),
    double: derived({ subscribe }, $n => $n * 2)
  };
}

<!-- Using two independent counter instances -->
<script>
  import { createCounter } from &#039;$lib/stores/counterStore.js';

  const cartCount = createCounter(0, 1);
  const notificationCount = createCounter(0, 1);
</script>

<p>Cart: {$cartCount}</p>
<button on:click={cartCount.increment}>Add to cart</button>

<p>Notifications: {$notificationCount}</p>
<button on:click={notificationCount.increment}>New notification</button>

// src/lib/stores/authStore.js
import { writable, derived } from 'svelte/store';

function createAuthStore() {
  const { subscribe, set, update } = writable({
    user: null,
    token: null,
    loading: false
  });

  return {
    subscribe,
    login: async (email, password) => {
      update(s => ({ ...s, loading: true }));
      try {
        const res = await fetch('/api/login', {
          method: 'POST',
          body: JSON.stringify({ email, password }),
          headers: { 'Content-Type': 'application/json' }
        });
        const { user, token } = await res.json();
        set({ user, token, loading: false });
        localStorage.setItem('token', token);
      } catch {
        update(s => ({ ...s, loading: false }));
      }
    },
    logout: () => {
      set({ user: null, token: null, loading: false });
      localStorage.removeItem('token');
    }
  };
}

export const auth = createAuthStore();
export const isLoggedIn = derived(auth, $auth => !!$auth.user);
export const currentUser = derived(auth, $auth => $auth.user);

<!-- Navbar.svelte -->
<script>
  import { auth, isLoggedIn, currentUser } from &#039;$lib/stores/authStore.js';
</script>

{#if $isLoggedIn}
  <span>Welcome, {$currentUser.name}!</span>
  <button on:click={auth.logout}>Logout</button>
{:else}
  <a href="/login">Login</a>
{/if}