Comment by esperent

12 hours ago

Here's equivalent svelve code. I can't format it correctly because I'm on mobile but even without proper indentation it's easy to read.

<button onclick={() => { count++; dialog.showModal(); }}> :) </button>

<dialog bind:this={dialog}> <p>Hello, I was clicked {count} times</p> <form method="dialog"><button>Close</button></form> </dialog>

2 comments

esperent

mkl 11 hours ago

Formatted so I can read it (on mobile...):

  <script>
    let count = $state(0);
    let dialog;
  </script>

  <button
    onclick={() => {
      count++;
      dialog.showModal();
    }}
  >
    :)
  </button>

  <dialog bind:this={dialog}>
    <p>
      Hello, I was clicked {count} times
    </p>
    <form method="dialog">
      <button>Close</button>
    </form>
  </dialog>

The inline onclick handler doesn't seem super readable, but the rest is fine.

esperent 5 hours ago

I assume for most real world, non-trivial cases you'd be defining the click handler inside the scripts above.