Cannot access array methods on property

[ericktucto]

There are some fix methods that cannot be used in the properties: push, pop, shift, ...
For example click here

Sample error captures
Is Bad

Is Okay. 🤔

[smalluban]

Hi @ericktucto!

The hybrids cache mechanism foundation is an equality check between property values over time. It means that you cannot safely modify object instances, because then other properties will not be notified about the change.

To protect library users, for example property() factory for objects uses Object.freeze() to block changes. It is done on purpose.

In the get definition of the property in documentation you can read:

It calculates the current property value. The returned value is cached by default. The cache mechanism works between properties defined by the library (even between different elements). If your get method does not use other properties, it won't be called again (the only way to update the value then is to assert new value or call invalidate from connect method).

Cache mechanism uses equality check to compare values (nextValue !== lastValue), so it enforces using immutable data, which is one of the ground rules of the library.

All methods that you mentioned - pop, push or shift mutates an array instance. Instead of using them, you should always return a new instance - as you do with filter or concat. For simpler syntax you can use spread operator for adding a new item into the array:

host.todos = [...host.todos, newTodo];

[smalluban]

Here you have a few hints about your code example:

host.maxId++;

You can avoid manually updated property - it is strictly related to current todos property value, so you can define it as a getter:

const ListTodos = {
  maxId: ({ todos }) => todos[todos.length - 1].id, // if your ids will increment (so the last is the highest)
  // or 
  maxId: ({ todos }) => todos.length, // if you relay on the count of todos
}

Then in your addTodo function you can use it safely:

function addTodo(host) {
  const newTodo = { text: host.text, id: host.maxId + 1 };
  host.todos = [...host.todos, newTodo];
}

Going even further your maxId is only used in addTodo(), so you can simply replace it with todos.length + 1 ;)

[smalluban]

Feel free to re-open, if you will have other problems with the subject.

[ericktucto]

Thanks for the Hybrids library, I already modified my code. I'm doing a PWA of Notes only with the library (it's not finished yet), in the following link you can see it. click here (sorry for the spanish)