Untangling Composition and Higher Order Components in Svelte

I recently gave a short talk as part of Svelte Summit Sprint 2021.
It is a super concise yet deep dive into common components composition patterns and how to implement them in Svelte, including multiple examples you can play with yourself in the REPL (links below).
This is a topic that's close to my heart because coming from React, I initially struggled to understand how I can get the same level of composability from Svelte.


You can watch my 11 minutes talk HERE (starts at the correct timestamp).

The examples we’ve covered:

• Visual enhancement - simple dialog HOC
• Mouse tracker HOC using slot props
• Mouse tracker HOC using svelte:component
• List HOC using slot props
• List HOC using svelte:component

Bonus examples:

• Using CSS variables to dynamically style slotted elements
• Render props

---

Special thanks to my colleague, Dune Thomas, for his help in making this