svelte.dart

Experimenting, work in progress.

Svelte (v5.16.6) web framework (not yet) ported to Dart.

Package	Description	Version
svelte_ast	Parser and utilities for SvelteDart template compiler.

Dart port of the Svelte framework with no magic transofrmations.

WIP. EXPERIMENTAL. Third iteration.

<!-- app.svelte -->
<script>
  import 'dart:async';

  import 'package:svelte/svelte.dart';

  var step = prop<int>(1);

  var count = state<int>(0);
  var doubled = derived<int>(() => count() * 2);
  var quadrupled = derived<int>(() => doubled() * 2);

  void handleClick() {
    count.set(count() + step());
  }

  onMount(() {
    var timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      count.increment();
    });

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

<button onclick={handleClick}>
  Clicked {count()} {count() == 1 ? 'time' : 'times'}
</button>

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

Which should be compiled to this:

import 'dart:async';

import 'package:svelte/svelte.dart';

import 'package:svelte/src/internal.dart' as $;
import 'package:web/web.dart';

base class App extends Component {
  static final root = $.template<DocumentFragment>(
    '<button> </button> <p> </p> <p> </p>',
    1,
  );

  App({int step = 1}) : step = prop<int>(step);

  Prop<int> step;

  @override
  void call(Node anchor) {
    var count = state<int>(0);
    var doubled = derived<int>(() => count() * 2);
    var quadrupled = derived<int>(() => doubled() * 2);

    void handleClick() {
      count.set(count() + step());
    }

    onMount(() {
      final timer = Timer.periodic(const Duration(seconds: 1), (timer) {
        count.increment();
      });

      return () {
        timer.cancel();
      };
    });

    var fragment = root();
    var button = $.firstChild<HTMLButtonElement>(fragment);
    var text = $.child<Text>(button);

    $.reset(button);

    var p = $.sibling<HTMLParagraphElement>(button, 2);
    var text1 = $.child<Text>(p);

    $.reset(p);

    var p1 = $.sibling<HTMLParagraphElement>(p, 2);
    var text2 = $.child<Text>(p1);

    $.reset(p1);

    $.templateEffect(() {
      $.setText(text, 'Clicked ${count()} ${count() == 1 ? 'time' : 'times'}');
      $.setText(text1, '${count()} * 2 = ${doubled()}');
      $.setText(text2, '${doubled()} * 2 = ${quadrupled()}');
    });

    $.eventVoid('click', button, handleClick);
    $.append(anchor, fragment);
  }
}

Status:

• Parser
• Runtime
  • internal 🔥
  • ...
• Compiler/Transofrmer
• Builder/Generator 🔥
  • .svelte > .svelte.dart
  • .svelte.dart > .dart
• Examples (to test runtime and JS interop., not generated):
  • introduction
  • reactivity
  • props
  • logic
  • events
  • bindings 🔥
  • ...
• ...
• SSR
  • shelf
  • ...