this post was submitted on 16 Jul 2023
3 points (100.0% liked)

Svelte + SvelteKit

3 readers
1 users here now

Svelte is a JavaScript framework for building user interfaces (UIs) that compiles your code into efficient JavaScript during the build process, resulting in better performance and smaller bundle sizes. Svelte focuses on reactive programming, where UI components update themselves when data changes, eliminating the need for a virtual DOM. Svelte Kit is an extension of Svelte that adds features like routing and server-side rendering, simplifying the creation of full-stack web applications. It provides file-based routing and supports server-side rendering, enabling faster initial page loads and improved search engine optimization. Svelte Kit combines client-side Svelte components with server-side rendering and serverless functions for a seamless development experience.

founded 1 year ago
MODERATORS
 

I'm experienced with React and was just trying out a small Svelte to-do list to get my feet wet with Svelte and see if it's something I'd like to suggest we try out at work.

However, there's one thing I wanted to clarify that wasn't immediately obvious from the documentation (and to just kickstart some discussion since this community is a little quiet).

In React, if I have a large file doing a good amount of logic, like in the to-list example where I have add logic, remove logic, and toggle logic, all of which can be complex in their own ways if you improve them enough, I am able to extract the logic out into it's own file by creating a custom hook. Like so

const useTodoList = () => {
  const [list, setList] = useState([]);

  const addItem = (taskName) => {
    // task creation logic
    setList(l => [...l, newTask]);
  }

  // logic for removeItem and toggleItem

  return { list, addItem, removeItem, toggleItem };
}

Then, I can bring that into my component file by simply doing const { ... } = useTodoList(); and everything should just work. What would the equivalent be in Svelte? It sounds like I would want to leverage the store concept, but that feels odd to me. I go from having pretty simple logic to having to add additional libraries to my logic. It's a lot of overhead for what should really be a pretty straightforward refactor in React.

Any insight you guys can give would be great! Additionally, I'd love to be able to move the style as well, but so far haven't found anything that would be suitable for that quite yet. Svelte seems pretty set on having one large file whenever possible.

you are viewing a single comment's thread
view the rest of the comments
[–] pablo@lemm.ee 1 points 1 year ago

If it’s related to managing state I think you might be looking for Custom Stores.