Stencil: About the Component Internal State Management

[menosprezzi]

Hello, Stencil Team! First, I have to congratulate you guys for creating a framework that use the best of the coolest technologies in Web Development today.
In order to contribute in this project, I would like to point out a improvement:

About the Component internal state changes.

Reading down your guide:

import { State } from '@stencil/core';

...
export class TodoList {
  @State() completedTodos: Todo[];

  completeTodo(todo: Todo) {
    const completedTodos = this.completedTodos.concat([]);
    completedTodos.push(todo);
    // by setting the value, Stencil re-renders
    this.completedTodos = completedTodos;
  }
}

The state change process could be wrapped with an instance method setState (stateProperty: String, newState: any), assigning the new state to the previous.
Or why dont we use a state instance property that holds the all internal state of the component?

Thanks again!

[adamdbradley]

Thanks, and great question. In the above codebock, you can think of the instance of this as the state, kind of like data in vuejs. You certainly could create a setState method if you wanted, but we prefer not to create a runtime for users to learn and use (and for us to break). Instead we're choosing to explicitly identify which class members we should keep an eye on, and when they change, to then trigger a re-render. Of course there are many ways to go about how to manage this, each with their pros and cons. For stencil, we're taking advantage of the compiler to do all the heavy lifting so we do not have to ship a large runtime. Hope that helps answer the question, thanks.

[menosprezzi]

Of course! I understand the approach that Stencil takes, and its nice to go with clarity of how things work. Thanks.