Design a Svelte Store with Derived State and Async Subscriptions

Generate a feature-rich Svelte store with derived state, persistence, async operations, and proper subscription management.

๐Ÿ“ The Prompt

Create a custom Svelte store (compatible with [SVELTE_VERSION]: Svelte 4 or Svelte 5 runes) for managing [STORE_PURPOSE] (e.g., shopping cart, authentication state, theme preferences, notification queue, multi-step form wizard). Store Requirements: - State shape: [STATE_SHAPE_DESCRIPTION] - Must support: [FEATURE_LIST] (e.g., persistence, optimistic updates, undo/redo, real-time sync) - Data source: [DATA_SOURCE] (e.g., REST API, localStorage, WebSocket, IndexedDB) Please implement the following: 1. **Store Definition**: Create a custom store using `writable()` with a custom `set`/`update` contract (or Svelte 5 `$state` rune if specified). Define the TypeScript interface for the store's state. 2. **Custom Methods**: Extend the store with domain-specific methods exposed via the store's return object: - [ACTION_1]: [ACTION_1_DESCRIPTION] - [ACTION_2]: [ACTION_2_DESCRIPTION] - [ACTION_3]: [ACTION_3_DESCRIPTION] Ensure each method properly calls `update()` or `set()` to trigger reactivity. 3. **Derived Stores**: Create `derived()` stores for computed values: - [DERIVED_1]: computed from [DERIVATION_LOGIC_1] - [DERIVED_2]: computed from [DERIVATION_LOGIC_2] Handle async derived values if needed using the `set` callback pattern. 4. **Persistence Layer**: Implement automatic synchronization with [DATA_SOURCE]: - Save state on changes (debounced at [DEBOUNCE_MS]ms) - Load initial state on store creation - Handle serialization/deserialization for complex types (Dates, Maps, Sets) - Graceful fallback when [DATA_SOURCE] is unavailable 5. **Subscription Side Effects**: Add a custom `subscribe` wrapper or `start`/`stop` logic for side effects that activate when the first subscriber connects and clean up when the last one disconnects. 6. **Error State & Loading**: Incorporate loading and error states within the store. Expose `isLoading` and `error` as derived or nested state. 7. **Store Contract**: Ensure the store satisfies Svelte's store contract (`subscribe` method returning an `unsubscribe` function) for use with `$` auto-subscription syntax. 8. **Component Example**: Show a Svelte component using the store with `$` prefix bindings, demonstrating [COMPONENT_SCENARIO] including reactive updates, method calls, and derived value display. Add inline documentation and export the store as a singleton with an optional factory function for testing.

๐Ÿ’ก Tips for Better Results

Specify Svelte 4 vs Svelte 5 in [SVELTE_VERSION] since the store patterns differ significantly โ€” Svelte 5 runes replace writable/derived with $state/$derived. Describe your [STATE_SHAPE_DESCRIPTION] with actual field names and types for a store that fits your domain immediately. Include the factory function request to get testable stores that can be instantiated fresh in each test case.

๐ŸŽฏ Use Cases

Svelte developers use this when building shared application state that multiple components need to read and modify. Particularly valuable when state requires persistence, async data loading, or complex derived computations.

๐Ÿ”— Related Prompts

๐Ÿ’ป Coding beginner

Explain Code Like Im a Beginner

Get any code explained in plain English with line-by-line breakdowns, analogies, and learning suggestions.

๐Ÿ’ป Coding beginner

Debug My Code and Explain the Fix

Get your code debugged with clear explanations of what went wrong and why, plus the corrected version.

๐Ÿ’ป Coding intermediate

Write Unit Tests for My Code

Generate thorough unit tests covering edge cases, error handling, and both positive and negative scenarios.

๐Ÿ’ป Coding intermediate

Convert Code Between Languages

Convert code between any programming languages while maintaining idiomatic patterns and best practices.

๐Ÿ’ป Coding intermediate

Write a REST API Endpoint

Generate production-ready REST API endpoints with validation, error handling, and documentation.

๐Ÿ’ป Coding advanced

Create a GitHub Actions CI/CD Workflow for Automated Testing and Deployment

Generate a complete GitHub Actions CI/CD workflow with build, test, deploy, and notification jobs for your project.