Proposal: shape

[Kelin2025]

Problem

There's a lot of cases like this:

const $name = createStore('')
const $surname = createStore('')

const $user = combine({ name: $name, surname: $surname })

You have some state object which you split into atomic stores, then combine into a single store to use somewhere you need
But the problem comes when you have something like userLoaded event - you can't mutate combined store
So you either write a bunch of .on or use patronum/spread:

const $name = createStore('')
const $surname = createStore('')

const shape = { name: $name, surname: $surname }

const $user = combine(shape)

spread({ source: userLoaded, targets: shape })

Still feels like a lot of boilerplate

In community, there's also a lot of questions like "how can I reset combined store", "I tried to do $user.on but it does not work" etc. Which means it's a common case

Solution

Would be cool to have shape utility which creates combine-like store but supports mutations

const $name = createStore('')
const $surname = createStore('')

// Looks like normal store
const $user = shape({ name: $name, surname: $surname })

// Does `patronum/spread` under the hood
$user.on(userLoaded, (prev, data) => data)

// Actually applies .reset() to all child stores
$user.reset(sessionCleared)

// { name: "", surname: "" }
$user.watch(console.log)

Why not extending combine

It might create a lot of confusing for users, because extending combine will cause inconsistency:

• combined store with object is mutable
• combined store with function is immutable

[sergeysova]

What method should do if user changed structure of the shape?

const $user = shape({ name: $name, surname: $surname })

$user.on(event, (_, ()) => ({ anything: true }))

[Kelin2025]

I think the same way that spread works - just skip updates on the stores that was not passed. But that could be a type error as well

[zarabotaet]

@Kelin2025 I think you gave an unrealistic example

const userLoaded = createEvent()
const $user = restore({name: '', surname: ''}, userLoaded)

const $name = $user.map(({name}) => name)
const $surname = $user.map(({surname}) => surname)

// Easily attach reset on $user store
$user.reset(sessionCleared)