fix: adapt to the breaking changes in #vue-1682 closes #2873

Author: logaretm

package.json

@@ -17,14 +17,14 @@
     "docs:deploy": "./scripts/deploy-docs.sh"
   },
   "devDependencies": {
-    "@commitlint/cli": "^9.1.1",
-    "@commitlint/config-conventional": "^9.1.1",
-    "@types/jest": "^26.0.9",
-    "@types/yup": "^0.29.4",
-    "@typescript-eslint/eslint-plugin": "^3.9.0",
-    "@typescript-eslint/parser": "^3.9.0",
+    "@commitlint/cli": "^9.1.2",
+    "@commitlint/config-conventional": "^9.1.2",
+    "@types/jest": "^26.0.10",
+    "@types/yup": "^0.29.6",
+    "@typescript-eslint/eslint-plugin": "^3.10.1",
+    "@typescript-eslint/parser": "^3.10.1",
     "chalk": "^4.1.0",
-    "eslint": "^7.6.0",
+    "eslint": "^7.7.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.22.0",
@@ -38,21 +38,21 @@
     "fs-extra": "^9.0.0",
     "gzip-size": "^5.1.1",
     "husky": "^4.2.5",
-    "jest": "^26.4.0",
+    "jest": "^26.4.2",
     "lerna": "^3.22.1",
-    "lint-staged": "^10.2.11",
-    "prettier": "^2.0.5",
+    "lint-staged": "^10.2.13",
+    "prettier": "^2.1.1",
     "raf-stub": "^3.0.0",
-    "rollup": "^2.23.1",
-    "rollup-plugin-dts": "^1.4.10",
+    "rollup": "^2.26.6",
+    "rollup-plugin-dts": "^1.4.12",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-typescript2": "^0.27.2",
-    "terser": "^5.0.0",
-    "ts-jest": "^26.2.0",
+    "terser": "^5.2.1",
+    "ts-jest": "^26.3.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-config-standard": "^9.0.0",
-    "typescript": "^3.9.3",
+    "typescript": "^4.0.2",
     "vue": "^3.0.0-beta.15",
     "yup": "^0.29.3"
   },

packages/core/src/Field.ts

@@ -1,7 +1,7 @@
 import { computed, h, defineComponent, nextTick } from 'vue';
 import { getConfig } from './config';
 import { useField } from './useField';
-import { useRefsObjToComputed, normalizeChildren, isHTMLTag, hasCheckedAttr } from './utils';
+import { normalizeChildren, isHTMLTag, hasCheckedAttr } from './utils';
 
 export const Field = defineComponent({
   name: 'Field',
@@ -74,9 +74,7 @@ export const Field = defineComponent({
           }
         : handleChange;
 
-    const unwrappedMeta = useRefsObjToComputed(meta);
-
-    const slotProps = computed(() => {
+    const makeSlotProps = () => {
       const fieldProps: Record<string, any> = {
         name: fieldName,
         disabled: props.disabled,
@@ -97,17 +95,18 @@ export const Field = defineComponent({
       return {
         field: fieldProps,
         aria: aria.value,
-        meta: unwrappedMeta.value,
+        meta,
         errors: errors.value,
         errorMessage: errorMessage.value,
         validate: validateField,
         reset,
         handleChange: onChangeHandler,
       };
-    });
+    };
 
     return () => {
-      let tag = props.as;
+      let tag: string | undefined = props.as;
+      const slotProps = makeSlotProps();
       if (!props.as && !ctx.slots.default) {
         tag = 'input';
       }
@@ -121,14 +120,14 @@ export const Field = defineComponent({
         });
       }
 
-      const children = normalizeChildren(ctx, slotProps.value);
+      const children = normalizeChildren(ctx, slotProps);
       if (tag) {
         return h(
           tag,
           {
             ...ctx.attrs,
-            ...slotProps.value.field,
-            ...(isHTMLTag(tag) ? slotProps.value.aria : {}),
+            ...slotProps.field,
+            ...(isHTMLTag(tag) ? slotProps.aria : {}),
           },
           children
         );

packages/core/src/Form.ts

@@ -1,7 +1,7 @@
-import { computed, h, defineComponent } from 'vue';
+import { h, defineComponent, watch } from 'vue';
 import { useForm } from './useForm';
 import { SubmissionHandler } from './types';
-import { useRefsObjToComputed, normalizeChildren } from './utils';
+import { normalizeChildren } from './utils';
 
 export const Form = defineComponent({
   name: 'Form',
@@ -26,21 +26,6 @@ export const Form = defineComponent({
       initialValues: props.initialValues,
     });
 
-    const unwrappedMeta = useRefsObjToComputed(meta);
-
-    const slotProps = computed(() => {
-      return {
-        meta: unwrappedMeta.value,
-        errors: errors.value,
-        values: values.value,
-        isSubmitting: isSubmitting.value,
-        validate,
-        handleSubmit,
-        handleReset,
-        submitForm,
-      };
-    });
-
     const onSubmit = ctx.attrs.onSubmit ? handleSubmit(ctx.attrs.onSubmit as SubmissionHandler) : submitForm;
     function handleFormReset() {
       handleReset();
@@ -49,8 +34,22 @@ export const Form = defineComponent({
       }
     }
 
+    // FIXME: for whatever reason that's beyond me, this fixes the reactivity issue
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    watch(errors, () => {});
+
     return () => {
-      const children = normalizeChildren(ctx, slotProps.value);
+      const children = normalizeChildren(ctx, {
+        meta: meta.value,
+        errors: errors.value,
+        values: values.value,
+        isSubmitting: isSubmitting.value,
+        validate,
+        handleSubmit,
+        handleReset,
+        submitForm,
+      });
+
       if (!props.as) {
         return children;
       }

packages/core/src/useField.ts

@@ -48,7 +48,7 @@ export function useField(fieldName: MaybeReactive<string>, rules: RuleExpression
   });
 
   const runValidation = async (): Promise<ValidationResult> => {
-    meta.pending.value = true;
+    meta.pending = true;
     if (!form || !form.validateSchema) {
       const result = await validate(value.value, normalizedRules.value, {
         name: unwrap(fieldName),
@@ -58,15 +58,15 @@ export function useField(fieldName: MaybeReactive<string>, rules: RuleExpression
 
       // Must be updated regardless if a mutation is needed or not
       // FIXME: is this needed?
-      meta.valid.value = !result.errors.length;
-      meta.invalid.value = !!result.errors.length;
-      meta.pending.value = false;
+      meta.valid = !result.errors.length;
+      meta.invalid = !!result.errors.length;
+      meta.pending = false;
 
       return result;
     }
 
     const results = await form.validateSchema();
-    meta.pending.value = false;
+    meta.pending = false;
 
     return results[unwrap(fieldName)];
   };
@@ -165,7 +165,7 @@ export function useField(fieldName: MaybeReactive<string>, rules: RuleExpression
 
     // For each dependent field, validate it if it was validated before
     dependencies.value.forEach(dep => {
-      if (dep in form.values && meta.validated.value) {
+      if (dep in form.values && meta.validated) {
         runValidationWithMutation();
       }
     });
@@ -211,17 +211,17 @@ function useValidationState(fieldName: MaybeReactive<string>, initValue: any, fo
   // Common input/change event handler
   const handleChange = (e: Event) => {
     value.value = normalizeEventValue(e);
-    meta.dirty.value = true;
-    meta.pristine.value = false;
+    meta.dirty = true;
+    meta.pristine = false;
   };
 
   // Updates the validation state with the validation result
   function patch(result: ValidationResult) {
     errors.value = result.errors;
-    meta.changed.value = initialValue !== value.value;
-    meta.valid.value = !result.errors.length;
-    meta.invalid.value = !!result.errors.length;
-    meta.validated.value = true;
+    meta.changed = initialValue !== value.value;
+    meta.valid = !result.errors.length;
+    meta.invalid = !!result.errors.length;
+    meta.validated = true;
 
     return result;
   }
@@ -261,54 +261,48 @@ function useMeta() {
     failed: false,
   });
 
-  const flags = reactive(initialMeta());
+  const meta = reactive(initialMeta());
 
-  const passed = computed(() => {
-    return flags.valid && flags.validated;
-  });
-
-  const failed = computed(() => {
-    return flags.invalid && flags.validated;
+  // FIXME: Fix computation of passed
+  watchEffect(() => {
+    meta.passed = meta.valid && meta.validated;
+    meta.failed = meta.invalid && meta.validated;
   });
 
   /**
    * Handles common onBlur meta update
    */
   const onBlur = () => {
-    flags.touched = true;
-    flags.untouched = false;
+    meta.touched = true;
+    meta.untouched = false;
   };
 
   /**
    * Resets the flag state
    */
   function reset() {
     const defaults = initialMeta();
-    Object.keys(flags).forEach((key: string) => {
+    Object.keys(meta).forEach((key: string) => {
       // Skip these, since they are computed anyways
-      if (key === 'passed' || key === 'failed') {
+      if (['passed', 'failed'].includes(key)) {
         return;
       }
 
-      flags[key as Flag] = defaults[key as Flag];
+      meta[key as Flag] = defaults[key as Flag];
     });
   }
 
   return {
-    meta: {
-      ...toRefs(flags),
-      passed,
-      failed,
-    },
+    meta,
     onBlur,
     reset,
   };
 }
 
-function useAriAttrs(fieldName: MaybeReactive<string>, meta: Record<Flag, Ref<boolean>>) {
+function useAriAttrs(fieldName: MaybeReactive<string>, meta: Record<string, boolean>) {
   return computed(() => {
     return {
-      'aria-invalid': meta.failed.value ? 'true' : 'false',
+      'aria-invalid': meta.failed ? 'true' : 'false',
       'aria-describedBy': genFieldErrorId(unwrap(fieldName)),
     };
   });

packages/core/src/useForm.ts

@@ -168,7 +168,7 @@ export function useForm(opts?: FormOptions) {
 
   const errors = computed(() => {
     return activeFields.value.reduce((acc: Record<string, string>, field) => {
-      acc[field.name] = field.errorMessage;
+      acc[field.name] = unwrap(field.errorMessage);
 
       return acc;
     }, {});
@@ -247,15 +247,14 @@ const MERGE_STRATEGIES: Record<Flag, 'every' | 'some'> = {
 function useFormMeta(fields: Ref<any[]>) {
   const flags: Flag[] = Object.keys(MERGE_STRATEGIES) as Flag[];
 
-  return flags.reduce((acc, flag: Flag) => {
-    acc[flag] = computed(() => {
+  return computed(() => {
+    return flags.reduce((acc, flag: Flag) => {
       const mergeMethod = MERGE_STRATEGIES[flag];
+      acc[flag] = fields.value[mergeMethod](field => field.meta[flag]);
 
-      return fields.value[mergeMethod](field => field.meta[flag]);
-    });
-
-    return acc;
-  }, {} as Record<Flag, Ref<boolean>>);
+      return acc;
+    }, {} as Record<string, boolean>);
+  });
 }
 
 async function validateYupSchema(

packages/core/src/utils/refs.ts

@@ -1,16 +1,6 @@
-import { isRef, Ref, computed } from 'vue';
+import { isRef } from 'vue';
 import { MaybeReactive } from '../types';
 
 export function unwrap<T>(ref: MaybeReactive<T>) {
   return isRef(ref) ? ref.value : ref;
 }
-
-export function useRefsObjToComputed<TKey extends string, TValue>(refsObj: Record<TKey, Ref<TValue>>) {
-  return computed(() => {
-    return Object.keys(refsObj).reduce((acc, key) => {
-      acc[key as TKey] = refsObj[key as TKey].value;
-
-      return acc;
-    }, {} as Record<TKey, TValue>);
-  });
-}