https://github.com/spikeysanju/svelte5-runes-todo

A simple Todo app based on Svelte 5 runs with local storage and is deployed to Cloudflare Pages.
https://github.com/spikeysanju/svelte5-runes-todo

cloudflare-pages localstorage runes svelte sveltekit typescript

Last synced: 5 days ago
JSON representation

A simple Todo app based on Svelte 5 runs with local storage and is deployed to Cloudflare Pages.

• Host: GitHub
• URL: https://github.com/spikeysanju/svelte5-runes-todo
• Owner: Spikeysanju
• License: mit
• Created: 2024-05-10T21:42:39.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-11T02:12:24.000Z (9 months ago)
• Last Synced: 2024-12-17T13:08:05.180Z (about 2 months ago)
• Topics: cloudflare-pages, localstorage, runes, svelte, sveltekit, typescript
• Language: Svelte
• Homepage: https://todo.sanju.sh
• Size: 89.8 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Svelte 5 Runes Todo

A SvelteKit application that implements a simple todo list with advanced features using the new Runes APIs in Svelte 5.

## Features

- Add, delete, and toggle tasks.

- Categorize tasks with tags.

- Reactive state management.

- Persistence with local storage.

- Undo/redo functionality.

- Task statistics and filtered views.

## Files

- `todo-list.svelte`: Main application logic.

- `task-item.svelte`: Single task component.

- `$lib`: Contains Task type definition.

## Code Overview

The `todo-list.svelte` file uses several features of Svelte 5:

- `$state`: This api is used to create reactive states for tasks, input value, and tags. Any changes to these states will automatically cause the component to re-render.

- `frozen`: This api is used to prevent reactivity for tags. Changes to tags will not cause the component to re-render.

- `$derived.by`: This api is used to create derived states for total tasks, completed tasks, and filtered tasks. These states automatically update whenever their dependencies change.

- `$effect`: This api is used to handle side effects, such as saving and loading tasks from local storage.

- `$inspect`: This api is used for debugging. It can log the current state of tasks to the console.

Note: These new Runes APIs are part of Svelte 5.

## Running the Application

This application requires Bun or Node.js. Follow these steps to get it up and running:

1. Clone the repository to your local machine.

2. Navigate to the project directory.

3. Install the necessary dependencies using `bun install` or `npm install`.

4. Start the server using `bun run dev` or `npm run dev`.

For optimal development experience with Svelte syntax, consider installing the Svelte extension for your IDE.