Dashboard reactivo con Svelte 5 Runes: ejemplo IA
VISTA DE CÓDIGO
Prompt
Create an interactive dashboard using Svelte 5 Runes ($state, $derived, $effect) that demonstrates reactive programming with multiple interconnected counters, derived values, and visual feedback.
このインタラクティブなダッシュボードは、Svelte 5の新しいRunesシステムの力を実演しています。Runesは、リアクティビティをより明示的で柔軟に扱う方法を導入しています。使用されている3つの主要なRunesは次の通りです：
$state: リアクティブな状態変数を作成します。これらの値が変更されると、それに依存するコンポーネントの部分が自動的に更新されます。ダッシュボードでは、count、multiplier、historyがすべて状態変数です。
$derived: 依存関係が変更されたときに自動的に更新される計算値を生成します。doubled、multiplied、totalの値は状態変数から派生しており、手動での再計算なしにリアクティブに更新されます。
$effect: 依存関係が変更されたときに副作用を実行します。このエフェクトは5回ごとの増加を追跡し、履歴配列に追加します。状態変化に応じてアクションを実行する方法を示しています。
ダッシュボードの特徴：
- 増加/減少ボタン付きインタラクティブカウンター
- 派生値に影響を与えるリアルタイム乗数スライダー
- エフェクトを使用した自動履歴追跡
- アニメーショントランジションによる視覚的フィードバック
- モダンなUI要素を備えたグラスモーフィズムデザイン
この例は、Svelte 5 Runesが状態、派生値、副作用の明確な分離により、リアクティブプログラミングをより直感的で強力にする方法を示しています。
Resumen del prompt
Este prompt está diseñado para generar un componente de dashboard interactivo en Svelte 5, aprovechando específicamente el nuevo sistema de Runes que introduce esta versión del framework. Al solicitarle al modelo que utilice $state, $derived y $effect, se obtiene un ejemplo práctico y funcional que muestra cómo funciona la reactividad granular de Svelte 5: contadores interconectados que actualizan valores derivados en tiempo real y ofrecen retroalimentación visual inmediata al usuario.
Es ideal para desarrolladores que están migrando de Svelte 4 o que quieren aprender la nueva API de Runes sin leer documentación extensa. El prompt se puede reproducir con modelos como GPT-4o o Claude 3.5 Sonnet, y resulta especialmente eficaz cuando se usa en entornos como StackBlitz o el REPL oficial de Svelte. Para variaciones útiles, se puede pedir que agregue gráficos con Chart.js, límites de contadores con validaciones reactivas, o que el dashboard persista el estado en localStorage mediante $effect.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選