a simple test to see how up to date and useful the models are for dealing with svelte 5
PROMPT
Make a simple client side todo app using svelte 5. Do everything client side, put everything in one component, use typescript, and make sure you use the new runes syntax for state. The user should be able to view their todos, make one as done, create a new done, and delete an old one. Style the component with tailwind, make it clean, pleasant to look at, and simple.
- OpenAI o3-mini
- Claude 3.5 Sonnet
- Gemini 2.0 Flash
- Claude 3.7 Sonnet
- Grok 3
all results are in the src/results folder
TL;DR: Grok 3 did the best, o3-mini outputted complete nonsense, the rest did ok
- failed HARD
- thought that state needed to be prefixed with "⟡"
- still had the old
on:syntax - just go look at the code, it's a work of art
- got pretty close
- added an extra:
import { let } from 'svelte/runes';at the top for no reason - runes syntax was correct
- still had the old
on:syntax
- got pretty close
- added an extra:
import { createEventDispatcher } from 'svelte';import for no reason - runes syntax was basically correct, but it made the mistake of marking state vars as
const - still had the old
on:syntax
- was spot on except for two things:
- randomly imported:
import { $state, $derived } from 'svelte';(this does nothing and breaks the code) - still had the old
on:syntax
- got everything right except for still having the old
on:syntax