Comparison: Svelte 5 vs. Vue 3.4 for Reactive State Management

// Svelte 5 Todo App with Reactive Runes
// Environment: Svelte 5.0.0-beta.12, Vite 5.2.0

  import { onMount } from 'svelte';

  // Reactive state primitives: $state replaces let/const for reactive vars
  let todos = $state([]);
  let newTodoText = $state('');
  let error = $state(null);
  let isLoading = $state(false);

  // Derived state: recomputes only when dependencies change
  let completedTodos = $derived(todos.filter(todo => todo.completed));
  let pendingTodos = $derived(todos.filter(todo => !todo.completed));
  let progress = $derived(todos.length ? (completedTodos.length / todos.length) * 100 : 0);

  // Effect: runs when todos state changes, persists to localStorage
  $effect(() => {
    try {
      localStorage.setItem('svelte5-todos', JSON.stringify(todos));
    } catch (e) {
      error = `Failed to persist todos: ${e.message}`;
      console.error('Persist error:', e);
    }
  });

  // Lifecycle: load persisted todos on mount
  onMount(() => {
    isLoading = true;
    try {
      const persisted = localStorage.getItem('svelte5-todos');
      if (persisted) {
        const parsed = JSON.parse(persisted);
        // Validate persisted data shape
        if (Array.isArray(parsed) && parsed.every(t => t.id && t.text && typeof t.completed === 'boolean')) {
          todos = parsed;
        } else {
          throw new Error('Invalid persisted todo data shape');
        }
      }
    } catch (e) {
      error = `Failed to load todos: ${e.message}`;
      console.error('Load error:', e);
      todos = [];
    } finally {
      isLoading = false;
    }
  });

  // Event handler: add new todo with validation
  function addTodo() {
    try {
      if (!newTodoText.trim()) {
        throw new Error('Todo text cannot be empty');
      }
      if (newTodoText.length > 200) {
        throw new Error('Todo text cannot exceed 200 characters');
      }
      const newTodo = {
        id: crypto.randomUUID(),
        text: newTodoText.trim(),
        completed: false,
        createdAt: new Date().toISOString()
      };
      todos = [...todos, newTodo];
      newTodoText = '';
      error = null;
    } catch (e) {
      error = e.message;
      console.error('Add todo error:', e);
    }
  }

  // Event handler: toggle todo completion
  function toggleTodo(id) {
    try {
      todos = todos.map(todo => 
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      );
    } catch (e) {
      error = `Failed to toggle todo: ${e.message}`;
      console.error('Toggle error:', e);
    }
  }

  // Event handler: delete todo
  function deleteTodo(id) {
    try {
      todos = todos.filter(todo => todo.id !== id);
    } catch (e) {
      error = `Failed to delete todo: ${e.message}`;
      console.error('Delete error:', e);
    }
  }



  Svelte 5 Reactive Todos
  {#if isLoading}
    Loading todos...
  {:else}
    {#if error}
      {error}
    {/if}


      {progress.toFixed(1)}% complete



      Add Todo


      {#each todos as todo (todo.id)}

           toggleTodo(todo.id)}
            aria-label='Toggle todo {todo.text}'
          />
          {todo.text}
           deleteTodo(todo.id)} aria-label='Delete todo'>×

      {/each}


      Total: {todos.length} | Pending: {pendingTodos.length} | Completed: {completedTodos.length}

  {/if}



  .error { color: #dc2626; padding: 0.5rem; border: 1px solid #dc2626; border-radius: 4px; }
  .progress-bar { width: 100%; height: 20px; background: #e5e7eb; border-radius: 4px; margin: 1rem 0; position: relative; }
  .progress-fill { height: 100%; background: #10b981; border-radius: 4px; transition: width 0.2s ease; }
  .progress-bar span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.8rem; color: #1f2937; }
  .todo-list { list-style: none; padding: 0; }
  .todo-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-bottom: 1px solid #e5e7eb; }
  .todo-list li.completed span { text-decoration: line-through; color: #6b7280; }
  input[type='text'] { padding: 0.5rem; flex: 1; border: 1px solid #d1d5db; border-radius: 4px; }
  button { padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; }
  button:hover { background: #2563eb; }

// Vue 3.4 Todo App with Composition API
// Environment: Vue 3.4.21, Vite 5.2.0

import { ref, computed, watch, onMounted } from 'vue';

// Reactive state: ref for primitives, reactive for objects (though ref works for everything now)
const todos = ref([]);
const newTodoText = ref('');
const error = ref(null);
const isLoading = ref(false);

// Computed properties: derived state, recomputes on dependency change
const completedTodos = computed(() => todos.value.filter(todo => todo.completed));
const pendingTodos = computed(() => todos.value.filter(todo => !todo.completed));
const progress = computed(() => {
  if (!todos.value.length) return 0;
  return (completedTodos.value.length / todos.value.length) * 100;
});

// Watch: runs when todos change, persists to localStorage
watch(
  todos,
  (newTodos) => {
    try {
      localStorage.setItem('vue3-todos', JSON.stringify(newTodos));
    } catch (e) {
      error.value = `Failed to persist todos: ${e.message}`;
      console.error('Persist error:', e);
    }
  },
  { deep: true } // Need deep watch because we're mutating array elements
);

// Lifecycle: load persisted todos on mount
onMounted(() => {
  isLoading.value = true;
  try {
    const persisted = localStorage.getItem('vue3-todos');
    if (persisted) {
      const parsed = JSON.parse(persisted);
      // Validate persisted data shape
      if (Array.isArray(parsed) && parsed.every(t => t.id && t.text && typeof t.completed === 'boolean')) {
        todos.value = parsed;
      } else {
        throw new Error('Invalid persisted todo data shape');
      }
    }
  } catch (e) {
    error.value = `Failed to load todos: ${e.message}`;
    console.error('Load error:', e);
    todos.value = [];
  } finally {
    isLoading.value = false;
  }
});

// Method: add new todo with validation
const addTodo = () => {
  try {
    if (!newTodoText.value.trim()) {
      throw new Error('Todo text cannot be empty');
    }
    if (newTodoText.value.length > 200) {
      throw new Error('Todo text cannot exceed 200 characters');
    }
    const newTodo = {
      id: crypto.randomUUID(),
      text: newTodoText.value.trim(),
      completed: false,
      createdAt: new Date().toISOString()
    };
    todos.value.push(newTodo); // Mutating array directly works with ref + watch deep
    newTodoText.value = '';
    error.value = null;
  } catch (e) {
    error.value = e.message;
    console.error('Add todo error:', e);
  }
};</x-turndown>