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

task.mdevals/scenario-2/

Infinite-Scroll Feed Component

Problem/Feature Description

A social media startup needs a Svelte 5 feed component that loads posts incrementally as the user scrolls. The component should show a list of posts, detect when the user has scrolled near the bottom, and automatically fetch the next page. It must also update the browser's document title to reflect the number of unread posts.

The product team wants the scroll detection to capture the container's current scroll height before each batch of new posts is inserted, so the scroll position can be preserved after the DOM updates. They also want any reactive state used for debugging purposes to be easy to instrument during development without leaving console.log calls in the production build.

The component receives a onpostclick callback from its parent so the parent knows which post the user opened.

Output Specification

Produce a single file: PostFeed.svelte

The component should:

  • Maintain a reactive list of posts and a loading flag
  • Update document.title reactively when the unread count changes
  • Capture the scroll container's scrollHeight before new posts are inserted (to restore scroll position after DOM update)
  • Accept a callback prop so the parent is notified when a post is clicked
  • Include a mechanism (even if stubbed) to trigger loading more posts

Also produce notes.md explaining which effect rune was chosen for which purpose and why.

evals

tile.json