[sesm]

How will it work if I put 2 counter components on one page?

If it’s just using global variable for state then it will be shared between component. You can do the same thing in React, it’s just a bad idea.

If it does some magic under the hood to convert regular variables into something different like Svelte pre-5.0 (which Svelte decided to make more explicit in 5.0), then could you point me to docs describing it, I’m curious which approach they took with this.

[tux1968]

If you look on the linked page under the "Styling Evolved" section. It appears variables are scoped to the component instance. In the example given each clock has its own variables, even though it is individually set to a different UTC.

[trafnar]

In that case the count variable should be moved into a property of the tag. I just like putting it outside the tag because it really drives home "its just a variable".

   tag Counter
      count = 0
      <self @click=(count++)> "count: {count}"

[abdellah123]

the point is there is no need for "reactivity" constructs. Organize your "state" the way you want.

tag App

  counter = 0

  <self>
    <button @click=counter++> "{counter}"

imba.mount <App>

it doesn't have to be anything. You're free to organize your code as you wish: colocate, in a different file ... the compiler doesn't transform the variable in any way, nor does it track its "mutation", it "just" "rerenders" on every change. And it's super fast too!

[sesm]

The tricky part here is to determine what should trigger the rerender.

[tabansi]

all events trigger it, also imba.commit! which you can use however you like