Skip to content

Commit 0d6f689

Browse files
schurhammernathancahill
schurhammer
authored and
nathancahill
committed
move stores into sveltik context
The stores were shared globally which means only one form could work on the page at one time. Moving the stores into the context allows you to have multiple sveltik contexts i.e. forms on the page at the same time. A side effect of this is that Field only works when inside a Sveltik context, hence the changes to the tests.
1 parent 7871837 commit 0d6f689

16 files changed

+8327
-48
lines changed

‎package-lock.json

+8,246
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/ErrorMessage.svelte

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<script>
22
import { omit, reduce } from 'lodash-es'
3-
import { errors, touched } from './stores'
3+
import { getContext } from 'svelte'
44
55
export let name
66
export let as = undefined
77
const omitted = ['name', 'as']
88
9+
const errors = getContext('errors')
10+
const touched = getContext('touched')
11+
912
$: error = $errors[name]
1013
1114
function propsToString(p) {

‎src/Field.svelte

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<script>
22
import { getContext, createEventDispatcher } from 'svelte'
3-
import { values, touched, errors, warnings, validators } from './stores'
3+
4+
const values = getContext('values')
5+
const errors = getContext('errors')
6+
const warnings = getContext('warnings')
7+
const touched = getContext('touched')
8+
const validators = getContext('validators')
49
510
const contextHandleInput = getContext('handleInput')
611
const contextHandleBlur = getContext('handleBlur')

‎src/Sveltik.svelte

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<script>
22
import { isEqual, pickBy, isEmpty, mapValues, keys, merge } from 'lodash-es'
33
import { onMount, setContext, tick } from 'svelte'
4-
import { readable } from 'svelte/store'
5-
import { values, errors, warnings, touched, validators } from './stores'
4+
import { readable, writable } from 'svelte/store'
65
76
export let enableReinitialize = false
87
export let initialStatus = undefined
@@ -21,10 +20,17 @@
2120
export let validateOnChange = true
2221
export let validateOnMount = false
2322
24-
errors.set(initialErrors)
25-
touched.set(initialTouched)
26-
values.set(initialValues)
27-
warnings.set(initialWarnings)
23+
const values = writable(initialValues)
24+
const errors = writable(initialErrors)
25+
const warnings = writable(initialWarnings)
26+
const touched = writable(initialTouched)
27+
const validators = writable({})
28+
29+
setContext('values', values)
30+
setContext('errors', errors)
31+
setContext('warnings', warnings)
32+
setContext('touched', touched)
33+
setContext('validators', validators)
2834
2935
setContext('initialErrors', initialErrors)
3036
setContext('initialTouched', initialTouched)

‎src/stores.js

-7
This file was deleted.

‎tests/fixtures/as-component.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
import Input from './input-component.svelte'
44
</script>
55

6-
<Field as={Input} name="color" placeholder="Blue" />
6+
<Sveltik>
7+
<Field as={Input} name="color" placeholder="Blue" />
8+
</Sveltik>

‎tests/fixtures/as-input-number.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
</script>
44

5-
<Field as="input" type="number" name="color" />
5+
<Sveltik>
6+
<Field as="input" type="number" name="color" />
7+
</Sveltik>

‎tests/fixtures/as-input.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
</script>
44

5-
<Field as="input" name="color" />
5+
<Sveltik>
6+
<Field as="input" name="color" />
7+
</Sveltik>

‎tests/fixtures/checkbox-rest.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
</script>
44

5-
<Field as="checkbox" name="color" class="purple" />
5+
<Sveltik>
6+
<Field as="checkbox" name="color" class="purple" />
7+
</Sveltik>

‎tests/fixtures/checkbox.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
</script>
44

5-
<Field as="checkbox" name="color" />
5+
<Sveltik>
6+
<Field as="checkbox" name="color" />
7+
</Sveltik>

‎tests/fixtures/input-component.svelte

+7-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,10 @@
33
export let props
44
</script>
55

6-
<input type="text" {...field} {...props} on:input={field.handleInput} on:blur={field.handleBlur} />
6+
<input
7+
type="text"
8+
{...{ name: field.name, value: field.value }}
9+
{...props}
10+
on:input={field.handleInput}
11+
on:blur={field.handleBlur}
12+
/>

‎tests/fixtures/input-let-props.svelte

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
</script>
44

5-
<Field name="color" let:field>
6-
<input type="text" {...field} />
7-
</Field>
5+
<Sveltik>
6+
<Field name="color" let:field>
7+
<input type="text" {...{ name: field.name, value: field.value }} />
8+
</Field>
9+
</Sveltik>

‎tests/fixtures/input-slot.svelte

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
</script>
44

5-
<Field name="color">
6-
<input type="text" name="color" />
7-
</Field>
5+
<Sveltik>
6+
<Field name="color">
7+
<input type="text" name="color" />
8+
</Field>
9+
</Sveltik>

‎tests/fixtures/select-multiple.svelte

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
</script>
44

5-
<Field as="select" name="color" multiple>
6-
<option value="red">Red</option>
7-
<option value="green">Green</option>
8-
<option value="blue">Blue</option>
9-
</Field>
5+
<Sveltik>
6+
<Field as="select" name="color" multiple>
7+
<option value="red">Red</option>
8+
<option value="green">Green</option>
9+
<option value="blue">Blue</option>
10+
</Field>
11+
</Sveltik>

‎tests/fixtures/select.svelte

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
</script>
44

5-
<Field as="select" name="color">
6-
<option value="red">Red</option>
7-
<option value="green">Green</option>
8-
<option value="blue">Blue</option>
9-
</Field>
5+
<Sveltik>
6+
<Field as="select" name="color">
7+
<option value="red">Red</option>
8+
<option value="green">Green</option>
9+
<option value="blue">Blue</option>
10+
</Field>
11+
</Sveltik>

‎tests/fixtures/textarea.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script>
2-
import { Field } from '../../src'
2+
import { Sveltik, Field } from '../../src'
33
</script>
44

5-
<Field as="textarea" name="color" />
5+
<Sveltik>
6+
<Field as="textarea" name="color" />
7+
</Sveltik>

0 commit comments

Comments
 (0)