svelte.dart

Svelte (v3.59.2) web framework, (not yet) ported to Dart.

<!-- app.svelte -->
<script>
  // imports
  import 'package:svelte/svelte.dart';

  // properties
  external int count = 0;

  // body
  $: doubled = count * 2;
  $: quadrupled = doubled * 2;

  void handleClick() {
    count += 1;
  }

  const duration = Duration(seconds: 1);

  onMount(() {
    var timer = Timer.periodic(duration, (_) {
      count += 1;
    });

    return () {
      timer.cancel();
    };
  });
</script>

<button on:click={handleClick}>
  Clicked {count} {count == 1 ? 'time' : 'times'}
</button>

<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>

Status:

• Parser
• Runtime
  • internal
    • component 🔥
    • scheduler
    • lifecycle 🔥
    • dom dart:html 🔥
      • package:web
    • transition 🔥
  • ...
• Compiler 🔥
• Builder
• Examples (to test runtime, not generated)
  • introduction
  • reactivity
  • props
  • logic 🔥
  • ...
• ...
• SSR
  • shelf
  • ...