feat: allow usage of Vuelidate outside Vue components (vuelidate#828)

* fix: allow usage outside vue components

* fix: use proper type for childResults

packages/vuelidate/src/index.js

@@ -94,11 +94,13 @@ export function useVuelidate (validations, state, globalConfig = {}) {
   }
   let { $registerAs, $scope = CollectFlag.COLLECT_ALL, $stopPropagation } = globalConfig
 
-  const instance = getCurrentInstance()
+  let instance = getCurrentInstance()
 
-  const componentOptions = isVue3 ? instance.type : instance.proxy.$options
+  const componentOptions = instance
+    ? (isVue3 ? instance.type : instance.proxy.$options)
+    : {}
   // if there is no registration name, add one.
-  if (!$registerAs) {
+  if (!$registerAs && instance) {
     // NOTE:
     // ._uid // Vue 2.x Composition-API plugin
     // .uid // Vue 3.0
@@ -108,7 +110,13 @@ export function useVuelidate (validations, state, globalConfig = {}) {
   const validationResults = ref({})
   const resultsCache = new ResultsStorage()
 
-  const { childResults, sendValidationResultsToParent, removeValidationResultsFromParent } = nestedValidations({ $scope, $stopPropagation })
+  const {
+    childResults,
+    sendValidationResultsToParent,
+    removeValidationResultsFromParent
+  } = instance
+    ? nestedValidations({ $scope })
+    : { childResults: ref({}) }
 
   // Options API
   if (!validations && componentOptions.validations) {
@@ -159,17 +167,19 @@ export function useVuelidate (validations, state, globalConfig = {}) {
         childResults,
         resultsCache,
         globalConfig,
-        instance: instance.proxy
+        instance: instance ? instance.proxy : {}
       })
     }, {
       immediate: true
     })
   }
 
-  // send all the data to the parent when the function is invoked inside setup.
-  sendValidationResultsToParent(validationResults, { $registerAs, $scope, $stopPropagation })
-  // before this component is destroyed, remove all the data from the parent.
-  onBeforeUnmount(() => removeValidationResultsFromParent($registerAs))
+  if (instance) {
+    // send all the data to the parent when the function is invoked inside setup.
+    sendValidationResultsToParent(validationResults, { $registerAs, $scope, $stopPropagation })
+    // before this component is destroyed, remove all the data from the parent.
+    onBeforeUnmount(() => removeValidationResultsFromParent($registerAs))
+  }
 
   // TODO: Change into reactive + watch
   return computed(() => {

packages/vuelidate/test/unit/specs/validation.spec.js

@@ -17,7 +17,8 @@ import {
   shouldBePristineValidationObj,
   shouldBeInvalidValidationObject,
   shouldBeErroredValidationObject,
-  createSimpleComponent
+  createSimpleComponent,
+  shouldBeValidValidationObj
 } from '../utils'
 import { withMessage, withParams } from '@vuelidate/validators/src/common'
 import useVuelidate, { CollectFlag } from '../../../src'
@@ -1118,6 +1119,26 @@ describe('useVuelidate', () => {
     })
   })
 
+  describe('Usage outside of Vue components', () => {
+    it('does not throw', () => {
+      const { validations, state } = simpleValidation()
+      expect(() => useVuelidate(validations, state)).not.toThrow()
+    })
+
+    it('returns a reactive Vuelidate state', async () => {
+      const { validations, state } = simpleValidation()
+      const v = useVuelidate(validations, state)
+      expect(v).toHaveProperty('value')
+      await nextTick()
+      shouldBeInvalidValidationObject({ v: v.value, property: 'number', validatorName: 'isEven' })
+      v.value.$touch()
+      shouldBeErroredValidationObject({ v: v.value, property: 'number', validatorName: 'isEven' })
+      v.value.number.$model = 6
+      await nextTick()
+      shouldBeValidValidationObj(v.value.number)
+    })
+  })
+
   // it('should allow watching a v state', async () => {
   //   let watcherValue = null
   //   let watcherValueOld = null

packages/vuelidate/test/unit/utils.js

@@ -45,7 +45,6 @@ export async function createOldApiSimpleWrapper (rules, state, config = {}) {
 }
 
 export const shouldBePristineValidationObj = (v) => {
-  expect(v).toHaveProperty('$error', false)
   expect(v).toHaveProperty('$error', false)
   expect(v).toHaveProperty('$errors', [])
   expect(v).toHaveProperty('$silentErrors', [])
@@ -57,6 +56,14 @@ export const shouldBePristineValidationObj = (v) => {
   expect(v).toHaveProperty('$reset', expect.any(Function))
 }
 
+export const shouldBeValidValidationObj = (v) => {
+  expect(v).toHaveProperty('$error', false)
+  expect(v).toHaveProperty('$errors', [])
+  expect(v).toHaveProperty('$silentErrors', [])
+  expect(v).toHaveProperty('$invalid', false)
+  expect(v).toHaveProperty('$pending', false)
+}
+
 export const shouldBeInvalidValidationObject = ({ v, property, propertyPath = property, validatorName }) => {
   expect(v).toHaveProperty('$error', false)
   expect(v).toHaveProperty('$errors', [])