CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/svelte-best-practices

Svelte 5 runes, component patterns, reactivity, and SvelteKit data loading best practices

99

1.11x
Quality

99%

Does it follow best practices?

Impact

99%

1.11x

Average score across 10 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-4/

{
  "context": "Tests a combination of Svelte 5 patterns together: $props() for page data and component props, $state/$state.raw for different reactivity needs, $derived for filtered data, snippet composition with children prop, callback props for events, and onclick attribute syntax.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "children snippet in MetricCard",
      "description": "MetricCard.svelte uses a 'children' prop typed as Snippet (from 'svelte') for default body content, rendered with {@render children()}",
      "max_score": 12
    },
    {
      "name": "Named snippet prop for header",
      "description": "MetricCard.svelte has an optional header snippet prop (typed as Snippet) rendered with {@render header()}, not a named <slot>",
      "max_score": 10
    },
    {
      "name": "$state.raw for API data",
      "description": "The large metric dataset loaded from the API is stored using $state.raw() since it is replaced wholesale on each refresh, NOT using $state()",
      "max_score": 12
    },
    {
      "name": "$state for filter inputs",
      "description": "Filter input values (search text, category dropdown) use $state() for reactive state",
      "max_score": 10
    },
    {
      "name": "$derived for filtered metrics",
      "description": "The filtered/displayed metrics list uses $derived() or $derived.by() to compute from the filter inputs and data",
      "max_score": 12
    },
    {
      "name": "Callback prop for refresh",
      "description": "MetricCard's refresh action uses a callback prop (e.g. onrefresh) via $props(), not createEventDispatcher",
      "max_score": 8
    },
    {
      "name": "$props() for page data",
      "description": "The page component receives data via $props() (not export let data)",
      "max_score": 10
    },
    {
      "name": "No export let anywhere",
      "description": "No export let appears in any .svelte file",
      "max_score": 8
    },
    {
      "name": "No $: reactive declarations",
      "description": "No $: syntax appears in any file",
      "max_score": 10
    },
    {
      "name": "lang=ts on all scripts",
      "description": "All <script> blocks include lang=\"ts\"",
      "max_score": 8
    }
  ]
}

evals

tile.json