v4.0.0

Svelte 5 Support is officially here!

After a way too long wait, which I (@jonasgeiler) really apologize for, I have finally managed to get back to this project and finalize a few last things for the full v4 release. I have noticed that many people were already using the next tag on NPM anyways.

About

Since version 4.0.0-rc.2 I have mainly added some bug fixes, both contributed by users and some that I have found. Apart from that, I have made some behind-the-scenes changes that should help with future development.

A big thank you to everyone who helped out with their PRs! ❤️

Migration from version 4.0.0-rc.2 to version 4.0.0

There should not have been any breaking changes since 4.0.0-rc.2.
If you are using version 4.0.0-rc.2, or the next tag, you should be able to bump your dependency to v4.0.0 without any problems.

package.json Examples:

- "svelte-tiny-virtual-list": "^4.0.0-rc.2",
+ "svelte-tiny-virtual-list": "^4.0.0",

- "svelte-tiny-virtual-list": "next",
+ "svelte-tiny-virtual-list": "^4.0.0",

Migration from version 3.0.1 to version 4.0.0

1. The children snippet has been deprecated and will be removed in the next major version. Please use the new item snippet instead.
   Example:

     <VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
   -   {#snippet children({ style, index })}
   +   {#snippet item({ style, index })}
         <div {style}>
           Letter: {data[index]}, Row: #{index}
         </div>
       {/snippet}
     </VirtualList>

2. The onListItemsUpdate callback has been deprecated and will be removed in the next major version. Please use the new onItemsUpdated callback instead.
   Example:

   - <VirtualList onListItemsUpdate={({ start, end }) => console.log("Items updated", start, end)} width="100%" height={600} itemCount={data.length} itemSize={50}>
   + <VirtualList onItemsUpdated={({ start, end }) => console.log("Items updated", start, end)} width="100%" height={600} itemCount={data.length} itemSize={50}>
       {#snippet item({ style, index })}
         <div {style}>
           Letter: {data[index]}, Row: #{index}
         </div>
       {/snippet}
     </VirtualList>

What's Changed

General

• ⚠️ Deprecation of children snippet. Use item instead!
• ⚠️ Deprecation of onListItemsUpdate callback. Use onItemsUpdated instead!
• Improve component typings
• Improve performance and simplify SizeAndPositionManager
• Change height default to '100%'
• Get rid of Element.scroll(...) legacy fallback since older browsers are not supported anymore anyways
• Make callbacks return, and expect returning of, void instead of null/any
• Bump minimum Node.js version requirement to v20.17.0

• Migrate to Svelte 5 by @TutorLatin in #58
• Finalize migration to Svelte 5 from #58 by @jonasgeiler in #91
• refactor: get rid of ListProps and ListState classes by putting it directly in component by @jonasgeiler in #105
• fix: various size and position manager bug fixes by @jonasgeiler in #121
• fix: reset cached item sizes on config update by @MarekJavurek in #119
• fix: handle decrease in itemCount cleanly by @ajhoddinott in #116

Dependencies

• chore(deps): update actions/setup-node action to v4.4.0 by @renovate[bot] in #78
• chore(deps): update actions/checkout action to v4.2.2 by @renovate[bot] in #74
• chore(deps): update dependency @sveltejs/kit to v2.25.1 by @renovate[bot] in #99
• chore(deps): update dependency vitest to v3.2.6 [security] by @renovate[bot] in #120
• chore(deps): update dependency playwright to v1.55.1 [security] by @renovate[bot] in #113
• chore(deps): update actions/checkout action to v4.4.0 - autoclosed by @renovate[bot] in #103
• chore(deps): update dependency koalaman/shellcheck to v0.11.0 by @renovate[bot] in #108
• chore(deps): update dependency @sveltejs/package to v2.5.8 by @renovate[bot] in #102
• chore(deps): update dependency globals to v16.5.0 by @renovate[bot] in #104
• chore(deps): update dependency vite to v6.4.3 [security] by @renovate[bot] in #114
• chore(deps): update dependency lint-staged to v16.4.0 by @renovate[bot] in #112
• chore(deps): update dependency @sveltejs/kit to v2.69.1 [security] by @renovate[bot] in #117
• chore(deps): update dependency eslint-plugin-svelte to v3.22.0 by @renovate[bot] in #110
• chore(deps): update dependency svelte to v5.55.7 [security] by @renovate[bot] in #118

New Contributors

• @TutorLatin made their first contribution in #58
• @MarekJavurek made their first contribution in #119
• @ajhoddinott made their first contribution in #116

Full Changelog: v3.0.0...v4.0.0

Sponsors

Thank you to my GitHub Sponsors, @jakob-kruse (Jakob Kruse) and @xpcn2015 (xpcn)!!! 💖
Do you also want to appear here? Sponsor me!