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.