Example of using custom element

[aarongeorge]

trafficstars

Hey @nathancahill, I like where Sveltik is headed, and I'd like to help out with the porting of Formik over to Svelte, but I was wanting to see if I could get you to provide an example of how you can use a custom element with Sveltik.

Here is a real-world element as an example

step-counter.svelte

<script>
	export let value = 0
	export let min = 0
	export let max = 10
	export let label = ''
	export let name = ''

	const decrement = () => { if (value > min) value -= 1 }
	const increment = () => { if (value < max) value += 1 }
</script>

<template>
	<div>
		<button on:click={decrement}>Decrement</button>
		<input type='number' {name} step='1' bind:value={value} readonly>
		<button on:click={increment}>Increment</button>
		{#if label}<p>{label}</p>{/if}
	</div>
</template>

Thanks!

[nathancahill]

Awesome. I'll take a look at this. Definitely a missing hole in the docs.

[nathancahill]

Here's an example with the step counter: https://svelte.dev/repl/38b0d1009d5b4041877b138809d421df?version=3

[aarongeorge]

Awesome! Thanks @nathancahill that helps a lot

Feel free to close this off now, or leave it open until it's in the docs

So how can I help man, where's the priority list so I can start knocking out things?

[nathancahill]

Going to leave this open until it's in the docs.

Yup validation #9 is really high on the list but haven't had time to dive in to it.

I also want to collect a bunch of examples, with REPL links like the StepCounter above, and stick them in a USAGE.md or something. Stuff that's easy to copy and paste. Especially for custom components like this one: agustinl/svelte-tags-input

At some point I want to make a docs website, but that's down the road. Right now everything is in README.md

[aarongeorge]

Cool, good to know

Do you want to Sveltik to take the validationSchema prop just like Formik?

I'll keep some custom components aside as I build them and add them as I go.

[nathancahill]

Responding on #9 to keep things organized.