From 6034e66836e0566e17f36744da19088aca33fbad Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Tue, 20 Jul 2021 13:22:22 +0200
Subject: [PATCH] feat: expose form and field injection keys

---
 packages/vee-validate/src/ErrorMessage.ts      | 4 ++--
 packages/vee-validate/src/index.ts             | 1 +
 packages/vee-validate/src/symbols.ts           | 8 ++++----
 packages/vee-validate/src/useField.ts          | 8 ++++----
 packages/vee-validate/src/useFieldError.ts     | 6 +++---
 packages/vee-validate/src/useFieldValue.ts     | 6 +++---
 packages/vee-validate/src/useForm.ts           | 8 ++++----
 packages/vee-validate/src/useFormErrors.ts     | 4 ++--
 packages/vee-validate/src/useFormValues.ts     | 4 ++--
 packages/vee-validate/src/useIsFieldDirty.ts   | 6 +++---
 packages/vee-validate/src/useIsFieldTouched.ts | 6 +++---
 packages/vee-validate/src/useIsFieldValid.ts   | 6 +++---
 packages/vee-validate/src/useIsFormDirty.ts    | 4 ++--
 packages/vee-validate/src/useIsFormTouched.ts  | 4 ++--
 packages/vee-validate/src/useIsFormValid.ts    | 4 ++--
 packages/vee-validate/src/useIsSubmitting.ts   | 4 ++--
 packages/vee-validate/src/useResetForm.ts      | 4 ++--
 packages/vee-validate/src/useSubmitCount.ts    | 4 ++--
 packages/vee-validate/src/useSubmitForm.ts     | 4 ++--
 packages/vee-validate/src/useValidateField.ts  | 6 +++---
 packages/vee-validate/src/useValidateForm.ts   | 4 ++--
 21 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/packages/vee-validate/src/ErrorMessage.ts b/packages/vee-validate/src/ErrorMessage.ts
index bc53b1e2a..7e27372fb 100644
--- a/packages/vee-validate/src/ErrorMessage.ts
+++ b/packages/vee-validate/src/ErrorMessage.ts
@@ -1,5 +1,5 @@
 import { inject, h, defineComponent, computed, resolveDynamicComponent } from 'vue';
-import { FormErrorsSymbol } from './symbols';
+import { FormErrorsKey } from './symbols';
 import { normalizeChildren } from './utils';
 
 export const ErrorMessage = defineComponent({
@@ -15,7 +15,7 @@ export const ErrorMessage = defineComponent({
     },
   },
   setup(props, ctx) {
-    const errors = inject(FormErrorsSymbol, undefined);
+    const errors = inject(FormErrorsKey, undefined);
     const message = computed<string | undefined>(() => {
       return errors?.value[props.name];
     });
diff --git a/packages/vee-validate/src/index.ts b/packages/vee-validate/src/index.ts
index 7af7ec617..2126bb79e 100644
--- a/packages/vee-validate/src/index.ts
+++ b/packages/vee-validate/src/index.ts
@@ -32,3 +32,4 @@ export { useFormValues } from './useFormValues';
 export { useFormErrors } from './useFormErrors';
 export { useFieldError } from './useFieldError';
 export { useSubmitForm } from './useSubmitForm';
+export { FormContextKey, FieldContextKey } from './symbols';
diff --git a/packages/vee-validate/src/symbols.ts b/packages/vee-validate/src/symbols.ts
index ff59a7ad7..bc202535e 100644
--- a/packages/vee-validate/src/symbols.ts
+++ b/packages/vee-validate/src/symbols.ts
@@ -1,15 +1,15 @@
 import { ComputedRef, InjectionKey } from 'vue';
 import { FormContext, PrivateFieldComposite } from './types';
 
-export const FormContextSymbol: InjectionKey<FormContext> = Symbol('vee-validate-form');
+export const FormContextKey: InjectionKey<FormContext> = Symbol('vee-validate-form');
 
-export const FormErrorsSymbol: InjectionKey<ComputedRef<Record<string, string | undefined>>> =
+export const FormErrorsKey: InjectionKey<ComputedRef<Record<string, string | undefined>>> =
   Symbol('vee-validate-form-errors');
 
-export const FormInitialValuesSymbol: InjectionKey<ComputedRef<Record<string, unknown>>> = Symbol(
+export const FormInitialValuesKey: InjectionKey<ComputedRef<Record<string, unknown>>> = Symbol(
   'vee-validate-form-initial-values'
 );
 
-export const FieldContextSymbol: InjectionKey<PrivateFieldComposite<unknown>> = Symbol('vee-validate-field-instance');
+export const FieldContextKey: InjectionKey<PrivateFieldComposite<unknown>> = Symbol('vee-validate-field-instance');
 
 export const EMPTY_VALUE = Symbol('Default empty value');
diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
index 2908ff485..310e05b3f 100644
--- a/packages/vee-validate/src/useField.ts
+++ b/packages/vee-validate/src/useField.ts
@@ -39,7 +39,7 @@ import {
   isYupValidator,
 } from './utils';
 import { isCallable } from '../../shared';
-import { FieldContextSymbol, FormInitialValuesSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormInitialValuesKey, FormContextKey } from './symbols';
 
 interface FieldOptions<TValue = unknown> {
   initialValue?: MaybeRef<TValue>;
@@ -85,7 +85,7 @@ export function useField<TValue = unknown>(
     standalone,
   } = normalizeOptions(unref(name), opts);
 
-  const form = !standalone ? injectWithSelf(FormContextSymbol) : undefined;
+  const form = !standalone ? injectWithSelf(FormContextKey) : undefined;
 
   const {
     meta,
@@ -225,7 +225,7 @@ export function useField<TValue = unknown>(
     setErrors,
   };
 
-  provide(FieldContextSymbol, field);
+  provide(FieldContextKey, field);
 
   if (isRef(rules) && typeof unref(rules) !== 'function') {
     watch(
@@ -345,7 +345,7 @@ function useValidationState<TValue>({
   standalone?: boolean;
 }) {
   const { errors, errorMessage, setErrors } = useFieldErrors(name, form);
-  const formInitialValues = standalone ? undefined : injectWithSelf(FormInitialValuesSymbol, undefined);
+  const formInitialValues = standalone ? undefined : injectWithSelf(FormInitialValuesKey, undefined);
   // clones the ref value to a mutable version
   const initialValueRef = ref(unref(initValue)) as Ref<TValue>;
 
diff --git a/packages/vee-validate/src/useFieldError.ts b/packages/vee-validate/src/useFieldError.ts
index 075dd43d7..a6419e136 100644
--- a/packages/vee-validate/src/useFieldError.ts
+++ b/packages/vee-validate/src/useFieldError.ts
@@ -1,5 +1,5 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormErrorsSymbol } from './symbols';
+import { FieldContextKey, FormErrorsKey } from './symbols';
 import { MaybeRef } from './types';
 import { injectWithSelf } from './utils';
 
@@ -7,9 +7,9 @@ import { injectWithSelf } from './utils';
  * Gives access to a single field error
  */
 export function useFieldError(path?: MaybeRef<string>) {
-  const errors = injectWithSelf(FormErrorsSymbol);
+  const errors = injectWithSelf(FormErrorsKey);
   // We don't want to use self injected context as it doesn't make sense
-  const field = path ? undefined : inject(FieldContextSymbol);
+  const field = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {
diff --git a/packages/vee-validate/src/useFieldValue.ts b/packages/vee-validate/src/useFieldValue.ts
index cb8648558..47b81b742 100644
--- a/packages/vee-validate/src/useFieldValue.ts
+++ b/packages/vee-validate/src/useFieldValue.ts
@@ -1,5 +1,5 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef } from './types';
 import { getFromPath, injectWithSelf } from './utils';
 
@@ -7,9 +7,9 @@ import { getFromPath, injectWithSelf } from './utils';
  * Gives access to a field's current value
  */
 export function useFieldValue<TValue = unknown>(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   // We don't want to use self injected context as it doesn't make sense
-  const field = path ? undefined : inject(FieldContextSymbol);
+  const field = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
index 9946e67a4..76ae97b17 100644
--- a/packages/vee-validate/src/useForm.ts
+++ b/packages/vee-validate/src/useForm.ts
@@ -29,7 +29,7 @@ import {
   isFormSubmitEvent,
   normalizeField,
 } from './utils';
-import { FormErrorsSymbol, FormContextSymbol, FormInitialValuesSymbol } from './symbols';
+import { FormErrorsKey, FormContextKey, FormInitialValuesKey } from './symbols';
 import { validateYupSchema, validateObjectSchema } from './validate';
 
 interface FormOptions<TValues extends Record<string, any>> {
@@ -602,8 +602,8 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
   }
 
   // Provide injections
-  provide(FormContextSymbol, formCtx as FormContext);
-  provide(FormErrorsSymbol, errors);
+  provide(FormContextKey, formCtx as FormContext);
+  provide(FormErrorsKey, errors);
 
   return {
     errors,
@@ -716,7 +716,7 @@ function useFormInitialValues<TValues extends Record<string, any>>(
     );
   }
 
-  provide(FormInitialValuesSymbol, computedInitials);
+  provide(FormInitialValuesKey, computedInitials);
 
   return {
     readonlyInitialValues: computedInitials,
diff --git a/packages/vee-validate/src/useFormErrors.ts b/packages/vee-validate/src/useFormErrors.ts
index c59f9c273..548578b2d 100644
--- a/packages/vee-validate/src/useFormErrors.ts
+++ b/packages/vee-validate/src/useFormErrors.ts
@@ -1,12 +1,12 @@
 import { computed, ComputedRef } from 'vue';
-import { FormErrorsSymbol } from './symbols';
+import { FormErrorsKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * Gives access to all form errors
  */
 export function useFormErrors<TValues extends Record<string, unknown> = Record<string, unknown>>() {
-  const errors = injectWithSelf(FormErrorsSymbol);
+  const errors = injectWithSelf(FormErrorsKey);
   if (!errors) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }
diff --git a/packages/vee-validate/src/useFormValues.ts b/packages/vee-validate/src/useFormValues.ts
index b705c4068..e568afcee 100644
--- a/packages/vee-validate/src/useFormValues.ts
+++ b/packages/vee-validate/src/useFormValues.ts
@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { FormContext } from './types';
 import { injectWithSelf, warn } from './utils';
 
@@ -7,7 +7,7 @@ import { injectWithSelf, warn } from './utils';
  * Gives access to a form's values
  */
 export function useFormValues<TValues extends Record<string, unknown> = Record<string, unknown>>() {
-  const form = injectWithSelf(FormContextSymbol) as FormContext<TValues> | undefined;
+  const form = injectWithSelf(FormContextKey) as FormContext<TValues> | undefined;
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }
diff --git a/packages/vee-validate/src/useIsFieldDirty.ts b/packages/vee-validate/src/useIsFieldDirty.ts
index 724b3dad4..54b157e82 100644
--- a/packages/vee-validate/src/useIsFieldDirty.ts
+++ b/packages/vee-validate/src/useIsFieldDirty.ts
@@ -1,5 +1,5 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef, PrivateFieldComposite } from './types';
 import { injectWithSelf, normalizeField, warn } from './utils';
 
@@ -7,8 +7,8 @@ import { injectWithSelf, normalizeField, warn } from './utils';
  * If a field is dirty or not
  */
 export function useIsFieldDirty(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
-  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextSymbol);
+  const form = injectWithSelf(FormContextKey);
+  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {
diff --git a/packages/vee-validate/src/useIsFieldTouched.ts b/packages/vee-validate/src/useIsFieldTouched.ts
index 0d396b710..f34fe183c 100644
--- a/packages/vee-validate/src/useIsFieldTouched.ts
+++ b/packages/vee-validate/src/useIsFieldTouched.ts
@@ -1,5 +1,5 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef, PrivateFieldComposite } from './types';
 import { injectWithSelf, normalizeField, warn } from './utils';
 
@@ -7,8 +7,8 @@ import { injectWithSelf, normalizeField, warn } from './utils';
  * If a field is touched or not
  */
 export function useIsFieldTouched(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
-  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextSymbol);
+  const form = injectWithSelf(FormContextKey);
+  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {
diff --git a/packages/vee-validate/src/useIsFieldValid.ts b/packages/vee-validate/src/useIsFieldValid.ts
index 2aaeb0496..d96bb2c85 100644
--- a/packages/vee-validate/src/useIsFieldValid.ts
+++ b/packages/vee-validate/src/useIsFieldValid.ts
@@ -1,5 +1,5 @@
 import { computed, inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef, PrivateFieldComposite } from './types';
 import { injectWithSelf, normalizeField, warn } from './utils';
 
@@ -7,8 +7,8 @@ import { injectWithSelf, normalizeField, warn } from './utils';
  * If a field is validated and is valid
  */
 export function useIsFieldValid(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
-  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextSymbol);
+  const form = injectWithSelf(FormContextKey);
+  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextKey);
 
   return computed(() => {
     if (path) {
diff --git a/packages/vee-validate/src/useIsFormDirty.ts b/packages/vee-validate/src/useIsFormDirty.ts
index 7194ecd67..231c9a034 100644
--- a/packages/vee-validate/src/useIsFormDirty.ts
+++ b/packages/vee-validate/src/useIsFormDirty.ts
@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * If the form is dirty or not
  */
 export function useIsFormDirty() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }
diff --git a/packages/vee-validate/src/useIsFormTouched.ts b/packages/vee-validate/src/useIsFormTouched.ts
index 14c692caf..9d7c8afc1 100644
--- a/packages/vee-validate/src/useIsFormTouched.ts
+++ b/packages/vee-validate/src/useIsFormTouched.ts
@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * If the form is touched or not
  */
 export function useIsFormTouched() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }
diff --git a/packages/vee-validate/src/useIsFormValid.ts b/packages/vee-validate/src/useIsFormValid.ts
index 1655c7ccd..ae419e417 100644
--- a/packages/vee-validate/src/useIsFormValid.ts
+++ b/packages/vee-validate/src/useIsFormValid.ts
@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * If the form has been validated and is valid
  */
 export function useIsFormValid() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }
diff --git a/packages/vee-validate/src/useIsSubmitting.ts b/packages/vee-validate/src/useIsSubmitting.ts
index 81acc1b6d..86504bb50 100644
--- a/packages/vee-validate/src/useIsSubmitting.ts
+++ b/packages/vee-validate/src/useIsSubmitting.ts
@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * If the form is submitting or not
  */
 export function useIsSubmitting() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }
diff --git a/packages/vee-validate/src/useResetForm.ts b/packages/vee-validate/src/useResetForm.ts
index 7791ae15d..9c662efbb 100644
--- a/packages/vee-validate/src/useResetForm.ts
+++ b/packages/vee-validate/src/useResetForm.ts
@@ -1,9 +1,9 @@
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { FormState } from './types';
 import { injectWithSelf, warn } from './utils';
 
 export function useResetForm<TValues extends Record<string, unknown> = Record<string, unknown>>() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }
diff --git a/packages/vee-validate/src/useSubmitCount.ts b/packages/vee-validate/src/useSubmitCount.ts
index 11ae92e2a..82330301b 100644
--- a/packages/vee-validate/src/useSubmitCount.ts
+++ b/packages/vee-validate/src/useSubmitCount.ts
@@ -1,12 +1,12 @@
 import { computed } from 'vue';
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { injectWithSelf, warn } from './utils';
 
 /**
  * The number of form's submission count
  */
 export function useSubmitCount() {
-  const form = injectWithSelf(FormContextSymbol);
+  const form = injectWithSelf(FormContextKey);
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }
diff --git a/packages/vee-validate/src/useSubmitForm.ts b/packages/vee-validate/src/useSubmitForm.ts
index 74a84c921..7f7d41bd4 100644
--- a/packages/vee-validate/src/useSubmitForm.ts
+++ b/packages/vee-validate/src/useSubmitForm.ts
@@ -1,11 +1,11 @@
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { FormContext, SubmissionHandler } from './types';
 import { injectWithSelf, warn } from './utils';
 
 export function useSubmitForm<TValues extends Record<string, unknown> = Record<string, unknown>>(
   cb: SubmissionHandler<TValues>
 ) {
-  const form = injectWithSelf(FormContextSymbol) as FormContext<TValues> | undefined;
+  const form = injectWithSelf(FormContextKey) as FormContext<TValues> | undefined;
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }
diff --git a/packages/vee-validate/src/useValidateField.ts b/packages/vee-validate/src/useValidateField.ts
index 8a70ca9cd..259c7dff3 100644
--- a/packages/vee-validate/src/useValidateField.ts
+++ b/packages/vee-validate/src/useValidateField.ts
@@ -1,5 +1,5 @@
 import { inject, unref } from 'vue';
-import { FieldContextSymbol, FormContextSymbol } from './symbols';
+import { FieldContextKey, FormContextKey } from './symbols';
 import { MaybeRef, PrivateFieldComposite, ValidationResult } from './types';
 import { injectWithSelf, normalizeField, warn } from './utils';
 
@@ -7,8 +7,8 @@ import { injectWithSelf, normalizeField, warn } from './utils';
  * Validates a single field
  */
 export function useValidateField(path?: MaybeRef<string>) {
-  const form = injectWithSelf(FormContextSymbol);
-  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextSymbol);
+  const form = injectWithSelf(FormContextKey);
+  let field: PrivateFieldComposite | undefined = path ? undefined : inject(FieldContextKey);
 
   return function validateField(): Promise<ValidationResult> {
     if (path) {
diff --git a/packages/vee-validate/src/useValidateForm.ts b/packages/vee-validate/src/useValidateForm.ts
index 81feb0781..93b9d0407 100644
--- a/packages/vee-validate/src/useValidateForm.ts
+++ b/packages/vee-validate/src/useValidateForm.ts
@@ -1,4 +1,4 @@
-import { FormContextSymbol } from './symbols';
+import { FormContextKey } from './symbols';
 import { FormContext, FormValidationResult } from './types';
 import { injectWithSelf, warn } from './utils';
 
@@ -6,7 +6,7 @@ import { injectWithSelf, warn } from './utils';
  * Validate multiple fields
  */
 export function useValidateForm<TValues extends Record<string, unknown> = Record<string, unknown>>() {
-  const form = injectWithSelf(FormContextSymbol) as FormContext<TValues> | undefined;
+  const form = injectWithSelf(FormContextKey) as FormContext<TValues> | undefined;
   if (!form) {
     warn('No vee-validate <Form /> or `useForm` was detected in the component tree');
   }