Component Usage

⭐ Component Usage
           ^{_{Svelte REPL}}

Your component is pretty simple!

<script lang='ts'>
	import { Value, valueStore } from 'svelte-object'

	type T = string | undefined      // Type of our store

	export let value: T = undefined  // Initial value
	export const store = valueStore<T>(value)
</script>

<Value {store} {...$$restProps}>
	<input bind:value={$store} />
	<!-- OR -->
	<input use:bind={store} />
</Value>

^{Value.svelte documentation (recommended read)}

Jump to Storeless Component

Typing $$restProps

... However, $$restProps needs to be typed. We do this by using the type ValueProps

<script lang='ts'>
	import { Value, valueStore, type ValueProps } from 'svelte-object'

	type T = string | undefined
	type Bind = $$Generic

	interface $$Props extends ValueProps<T, Bind> {
		// Your existing props goes here
		value: T
	}

	export let value: T = undefined
	export const store = valueStore<T>(value)
</script>

<Value {store} {...$$restProps}>
	<input bind:value={$store} />
</Value>

^{Read more about $$Generic and $$Props}

Validating, formatting etc.

valueStore handles theese goodies:

    store.prechange((v) => {...}) for formatting
    store.onValidate((opts) => {...}) for validation

To show the error/warning, you can access a Writable at

    const error = store.error
    const warning = store.warning

    ...

{#if $error || $warning}
    ...

^{Or get it from <Value let:error />}

Storeless Component

If you want to simplify things, that's okay!

You can use getParentStore with a combination of use:bind:

<script lang='ts'>
    import { getParentStore, bind } from 'svelte-object'

    /** Property name */
    export let name: string | undefined = undefined

    /** Object / Array, id attribute */
    export let parent: string | undefined = undefined

    $: parentStore = getParentStore(parent)
</script>

<input use:bind={[parentStore, s => s[name]]}>