State changes are not accessible

[vinyll]

The following example will toggle only once:

<script>
  const state = { enabled: false }
  
  function toggle() {
    render({ state: !state.enabled })
  }
</script>

<template>
  <p>Status is ${ state.enabled ? 'enabled' : 'disabled' }</p>
  <button @click="toggle">toggle status</button>
</template>

The reason is that const state is sent to this.state in the component init().
However the toggle() function will always refer to the state that was declared, not from the copy of state from within the component.

A solution is to refer this.state from the component to the const state by reference (default in JS).
However this has as drawback: all instances of the component will share the same state.

• State by reference: this.state = state
• State by copy: this.state = Object.assign({}, state)

[mlbiche]

Not sure to fully understand the issue, but if it ends to a this. use as with the extend syntax, then I would prefer the extend syntax as it is explicit that the this. refers to the class extending the Lego class. Less magic, so easier to understand.

Maybe I am misunderstanding... 🤔

[vinyll]

It's not magic but binding.
When creating the element, function are bound to the object. Code is explicit here as a demo component: https://github.com/Polight/lego-demo/blob/main/dist/hello-world.js#L26

The same example as above would be written this way:

<script>
  const state = { enabled: false }
  
  function toggle() {
    this.render({ state: !this.state.enabled })
  }
</script>

<template>
  <p>Status is ${ state.enabled ? 'enabled' : 'disabled' }</p>
  <button @click="toggle">toggle status</button>
</template>

I still feel it's less verbose than the previous syntax. WDYT?

[vinyll]

A new writing is fixing this issue:

<script>
  const state = { enabled: false }
  
  const methods = {
    toggle() {
      this.render({ enabled: !this.state.enabled })
    }
  }
</script>

<template>
  <p>Status is ${ state.enabled ? 'enabled' : 'disabled' }</p>
  <button @click="toggle">toggle status</button>
</template>