fix: use valid and invalid in context

README.md

@@ -28,23 +28,29 @@
 
 Adding [yup] allows to define a schema for value parsing and validation. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformations.
 
-Styling forms in a consistent way has always been a problem. Everyone has her own opinion about it. `svelte-formup` allows flexibel error reporting supporting both [native](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) and programmatic usage. Invalid form elements [are marked](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity) supporting several validity state specific css selectors like [:invalid](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid). Additionally `svelte-formup` adds CSS classes (`is-invalid`, `is-valid`, `is-dirty`, `is-pristine`, `is-validating`, `is-submitting` and `is-submitted`) for further custom styling. These classes maybe added to surrounding fieldsets or form group element depending on the validity state of the contained form elements.
+Styling forms in a consistent way has always been a problem. Everyone has her own opinion about it. `svelte-formup` allows flexibel error reporting supporting both [native](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) and programmatic usage. Invalid form elements [are marked](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity) supporting several validity state specific css selectors like [:invalid](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid). Additionally `svelte-formup` adds CSS classes (`is-error`, `is-success`, `is-dirty`, `is-pristine`, `is-validating`, `is-submitting` and `is-submitted`) for further custom styling. These classes maybe added to surrounding fieldsets or form group element depending on the validity state of the contained form elements. On non form elements these classes are set using the `has-` prefix instead of `is-`.
 
 <!-- prettier-ignore-start -->
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 
-- [Installation](#installation)
-- [Usage](#usage)
-- [API](#api)
-- [Polyfills](#polyfills)
-- [TODO](#todo)
-- [Related Projects](#related-projects)
-- [Support](#support)
-- [Contribute](#contribute)
-- [NPM Statistics](#npm-statistics)
-- [License](#license)
+- [svelte-formup](#svelte-formup)
+  - [What?](#what)
+  - [Why?](#why)
+  - [Installation](#installation)
+  - [Usage](#usage)
+    - [Native HTML form elements](#native-html-form-elements)
+    - [Error Messages](#error-messages)
+  - [API](#api)
+  - [Polyfills](#polyfills)
+  - [TODO](#todo)
+  - [Related Projects](#related-projects)
+  - [Support](#support)
+  - [Contribute](#contribute)
+    - [Develop](#develop)
+  - [NPM Statistics](#npm-statistics)
+  - [License](#license)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 <!-- prettier-ignore-end -->
@@ -137,14 +143,14 @@ import { formup } from 'https://unpkg.com/svelte-formup?module'
 
   export let at
 
-  const { dirty, errors } = getFormupContext()
+  const { invalid } = getFormupContext()
 
   let error
 
-  $: error = $errors.get(at)
+  $: error = $invalid.get(at)
 </script>
 
-{#if $dirty.has(at) && error}
+{#if error}
 <span class="error" aria-live="polite">
   <slot {error}>{error.message}</slot>
 </span>

src/internal/validity.ts

@@ -191,8 +191,8 @@ export default function validity<Values, State>(
       // Update classes on this node based on this node validity
       dispose = asArray(path).flatMap((path) => [
         subscribeTo(path, node, classes, context.dirty, updateStoreDirty),
-        subscribeTo(path, node, classes, context.error, updateStoreValidity),
-        subscribeTo(path, node, classes, context.success, updateStoreSuccess),
+        subscribeTo(path, node, classes, context.invalid, updateStoreValidity),
+        subscribeTo(path, node, classes, context.valid, updateStoreSuccess),
         subscribeTo(path, node, classes, context.validating, updateStoreValidating),
       ])
     } else if (isHTMLFormElement(node)) {
@@ -223,14 +223,14 @@ export default function validity<Values, State>(
         subscribeToElements(
           node,
           classes,
-          context.error,
+          context.invalid,
           updateStoreValidity,
           useFirstTo(updateValidity),
         ),
         subscribeToElements(
           node,
           classes,
-          context.success,
+          context.valid,
           updateStoreSuccess,
           useEveryTo(updateSuccess),
         ),

src/svelte-formup.ts

@@ -169,28 +169,28 @@ export const formup = <Values = Record<string, unknown>, State = Record<string,
   const dirty = writable(new Set<string>())
   const validating = writable(new Set<string>())
 
-  const success = derived([dirty, validating, errors], ([$dirty, $validating, $errors]) => {
-    const $success = new Set<string>()
+  const valid = derived([dirty, validating, errors], ([$dirty, $validating, $errors]) => {
+    const $valid = new Set<string>()
 
     for (const field of $dirty) {
       if (!$errors.has(field) && !$validating.has(field)) {
-        $success.add(field)
+        $valid.add(field)
       }
     }
 
-    return $success
+    return $valid
   })
 
-  const error = derived([dirty, validating, errors], ([$dirty, $validating, $errors]) => {
-    const $error = new Map<string, ValidationError>()
+  const invalid = derived([dirty, validating, errors], ([$dirty, $validating, $errors]) => {
+    const $invalid = new Map<string, ValidationError>()
 
     for (const [field, error] of $errors.entries()) {
       if ($dirty.has(field) && !$validating.has(field)) {
-        $error.set(field, error)
+        $invalid.set(field, error)
       }
     }
 
-    return $error
+    return $invalid
   })
 
   const isSubmitting = writable(false)
@@ -239,8 +239,8 @@ export const formup = <Values = Record<string, unknown>, State = Record<string,
     errors,
     dirty,
     validating,
-    error,
-    success,
+    invalid,
+    valid,
 
     // These are whole form related stores
 

src/types/index.ts

@@ -314,7 +314,7 @@ export interface FormupContext<Values = Record<string, unknown>, State = Record<
   /**
    * The valid, meaning dirty and not validating and no error, fields by path as a svelte store.
    */
-  readonly success: Readable<ReadonlySet<string>>
+  readonly valid: Readable<ReadonlySet<string>>
 
   /**
    * The invalid, meaning dirty and not validating and error, fields by path as a svelte store.
@@ -323,7 +323,7 @@ export interface FormupContext<Values = Record<string, unknown>, State = Record<
    * {#if $invalid.has(email)} $invalid.get(email).message {/if}
    * ```
    */
-  readonly error: Readable<ReadonlyMap<string, ValidationError>>
+  readonly invalid: Readable<ReadonlyMap<string, ValidationError>>
 
   // These are whole form related stores