Introduce array methods

[yathink3]

For setStore function
If proxy of type array then introduce function like push, filter, update, remove, clear

function push(element) {
    setArray(a => [...a, element])
  }

  function filter(callback) {
    setArray(a => a.filter(callback))
  }

  function update(index, newElement) {
    setArray(a => [
      ...a.slice(0, index),
      newElement,
      ...a.slice(index + 1, a.length),
    ])
  }

  function remove(index) {
    setArray(a => [...a.slice(0, index), ...a.slice(index + 1, a.length)])
  }

  function clear() {
    setArray([])
  }

Can use like

setStore.arr.clear();
setStore.arr.update(2,"45");
setStore.arr.remove(2);

[aralroca]

The saved state inside the store can be every type: array, object, set, map, boolean, string, number... So support methods to manage the state depending the type is going to be negative for the goal of the library. It's better to be a simple way, the same way for all types. The goals of Teaful is to be tiny, easy and powerful.

[aralroca]

Maybe you can do this:

function push(proxy, element) {
    const [, set] = proxy(getStore)
    set(a => [...a, element])
}

// Add new cart item
push(proxy => proxy.cart.items(), newItem)

[aralroca]

https://github.com/teafuljs/teaful/pull/81/files

[yathink3]

I asked like
useStateProxy

[aralroca]

What I meant by that is that it is not the goal of Teaful. As now with Teaful is possible to add plugins as extras (like teaful-devtools), maybe we could implement that functionality for whoever wants to use it by adding the plugin.

import 'teaful-array' // Example of teaful plugin
import { render } from 'preact';
import App from './components/App';

render(<App />, document.getElementById('root'));

And use it in createStore:

import createStore from 'teaful'

const { setStore } = createStore({ cart: { items: [] }})

setStore.cart.items.push({ price: 10, name: 'example' })

This way it would only add bytes to whoever needs this feature, without increasing the total size of the package.