reset

Reconciles into target whatever is defined in source, leaving any target keys that source doesn't mention untouched. Unlike replace, which removes keys absent from source, reset is additive. And unlike merge, nested arrays are overwritten wholesale rather than reconciled item-by-item — there is no keys option. An empty object in source likewise overwrites wholesale, resetting that key to {}, while a non-empty object is reconciled key by key. Mutates target in place and returns it; source is deep-copied before reconciling, so the original source is left untouched.

For the removing variant see replace; for a non-removing merge of nested arrays by key see merge.

Arguments

name	type	description
target	T	object mutated in place and returned
source	U	values to reconcile in (deep-copied first, so it is left untouched)

Returns: target (the same reference), now typed T & U.

Examples

Overwrite matching keys

Keys present in both objects are overwritten with the source value; keys only in target (here aa) survive.

import { render } from 'pota'
import { reset } from 'pota/store'

const target = {
	aa: true,
	q: [1, 2],
	w: { nope: 'ok', hola: [1, 2, 3] },
}

const source = { q: [], w: { hola: [], bb: false } }

reset(target, source)

render(<pre>{JSON.stringify(target, null, 2)}</pre>)

Reset to defaults

Build a mutable from a defaultState, then reset part of it back to those defaults. Note the mutable(defaultState, true) copy — otherwise the mutable proxy would share references with defaultState.

import { render } from 'pota'
import { mutable, reset } from 'pota/store'

const defaultState = {
	title: 'untitled',
	keyframes: [],
	timeline: {},
	sidebarExpanded: true,
}

const state = mutable(defaultState, true)

const toggleSidebar = () =>
	(state.sidebarExpanded = !state.sidebarExpanded)

function addData() {
	state.keyframes = [1, 2, 3]
	state.timeline = { currentTime: 1000 }
	state.title = 'edited'
}

function resetState() {
	// keep title and sidebarExpanded, reset everything else
	const { title, sidebarExpanded, ...rest } = defaultState
	reset(state, rest)
}

function App() {
	return (
		<div>
			<button on:click={toggleSidebar}>toggle sidebar</button>
			<button on:click={addData}>add data</button>
			<button on:click={resetState}>reset</button>
			<pre>{() => JSON.stringify(state, null, 2)}</pre>
		</div>
	)
}

render(App)