12 ms·

You don't need any special state management tools like "stores" or "setState" you can just use regular variables. let count = 0 tag Counter <self @clic

You don't need any special state management tools like "stores" or "setState" you can just use regular variables. let count = 0 tag Counter <self @click=(count++)> "Count is: {count}" imba.mount <Counter>, document.body

sesm 3y ago
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.
- trafnar 3y ago
  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 3y ago
  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 3y ago
    The tricky part here is to determine what should trigger the rerender.
    - tabansi 3y ago
      all events trigger it, also imba.commit! which you can use however you like
      - hackerdangluck 3y ago
        [dead]
- tux1968 3y ago
  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.

sesm 3y ago

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.

trafnar 3y ago
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 3y ago
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 3y ago
  The tricky part here is to determine what should trigger the rerender.
  - tabansi 3y ago
    all events trigger it, also imba.commit! which you can use however you like
    - hackerdangluck 3y ago
      [dead]
tux1968 3y ago
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.