the problem is not the html stuff (can be solved as in your solution), but the
special $: { } svelte construct, which i called:

svelte_dollar_block do
      ...
end

such a construct should be build into ruby2js (with a better name :-)

The original $: API could use a better name. 😉

But seriously, I wonder if block syntax even makes sense. For example, this is valid Svelte code:

$: doubled = count * 2

It's almost like a decorator, which doesn't immediately map to regular Ruby syntax. But I'll give it a bit of thought…

So this is valid Ruby syntax:

$:
  if count >= 10
    alert("count is dangerously high!")
    count = 9
  end

$:
  doubled = count * 3

Normally $: is the load/require path in Ruby, but I don't believe that maps to any concept in Ruby2JS currently (correct me if I'm wrong @rubys). So in theory, if we could parse it so that it outputs "as is" rather than a standalone statement (and short-circuits let in an immediate variable assignment, it should output valid Svelte-flavored JS without any need for instroducing additional concepts. Just a thought.

First, I will confirm that $: is not otherwise mapped.

Next, I will note that for Jared's latest suggestion to parse correctly, the $: must be on a separate line ... or followed by a semicolon.

Trying to think outside of the box:

1. while this is not currently done anywhere else, perhaps a svelte filter could define a pre-processor that does a textual conversion of $: followed by a space to $:; whenever this string is found at the beginning of a line.

2. It would indeed feel more "rubyish" to replace the $: sequence with a readable word. If that readable word happened to be a JavaScript reserved word, that wouldn't add any additional limitations to what JavaScript could be produced. var comes to mind as a short, readable string that could readily be repurposed to indicate that this assignment or block of code is reactive.