@regle/core 0.0.4-beta.0 → 0.0.5

package/dist/index.js

@@ -22,6 +22,7 @@ function createReactiveParams(params) {
 // src/core/createRule/defineRuleProcessors.ts
 function defineRuleProcessors(definition, ...params) {
   const { message, validator, active, ...properties } = definition;
+  const isAsync = validator.constructor.name === "AsyncFunction";
   const processors = {
     message(value, ...args) {
       if (typeof definition.message === "function") {
@@ -47,6 +48,7 @@ function defineRuleProcessors(definition, ...params) {
       _active: definition.active,
       _type: definition.type,
       _patched: false,
+      _async: isAsync,
       _params: createReactiveParams(params)
     }
   };
@@ -58,6 +60,7 @@ function createRule(definition) {
   if (typeof definition.validator === "function") {
     let fakeParams = [];
     const staticProcessors = defineRuleProcessors(definition, ...fakeParams);
+    const isAsync = definition.validator.constructor.name === "AsyncFunction";
     if (definition.validator.length > 1) {
       const ruleFactory = function(...params) {
         return defineRuleProcessors(definition, ...params);
@@ -71,6 +74,7 @@ function createRule(definition) {
       ruleFactory._active = definition.active;
       ruleFactory._type = definition.type;
       ruleFactory._patched = false;
+      ruleFactory._async = isAsync;
       return ruleFactory;
     } else {
       return staticProcessors;
@@ -80,7 +84,7 @@ function createRule(definition) {
 }
 
 // src/core/useRegle/useRegle.ts
-import { computed as computed5, isRef as isRef2, shallowRef as shallowRef2, toRaw } from "vue";
+import { computed as computed5, isRef as isRef2, shallowRef as shallowRef2, toRaw as toRaw2 } from "vue";
 
 // src/core/useRegle/useStateProperties/useStateProperties.ts
 import { reactive as reactive5 } from "vue";
@@ -203,16 +207,21 @@ function useErrors($regle) {
 }
 
 // src/core/useRegle/useStateProperties/createReactiveNestedStatus.ts
-import {
-  computed as computed4,
-  effectScope as effectScope4,
-  reactive as reactive4,
-  toRef as toRef4,
-  watch as watch4
-} from "vue";
+import { computed as computed4, effectScope as effectScope4, reactive as reactive4, toRef as toRef4, watch as watch4 } from "vue";
+
+// src/core/useRegle/useStateProperties/createReactiveCollectionStatus.ts
+import { nextTick, reactive as reactive3, ref as ref3, toRef as toRef3, toRefs, watch as watch3 } from "vue";
 
 // src/core/useRegle/useStateProperties/createReactiveFieldStatus.ts
-import { computed as computed3, effectScope as effectScope3, reactive as reactive2, ref as ref2, toRef as toRef2, watch as watch2 } from "vue";
+import {
+  computed as computed3,
+  effectScope as effectScope3,
+  reactive as reactive2,
+  ref as ref2,
+  toRef as toRef2,
+  unref as unref2,
+  watch as watch2
+} from "vue";
 
 // src/core/useRegle/useStateProperties/createReactiveRuleStatus.ts
 import { computed as computed2, effectScope as effectScope2, reactive, watch } from "vue";
@@ -232,7 +241,8 @@ function createReactiveRuleStatus({
   ruleKey,
   state,
   path,
-  storage
+  storage,
+  options
 }) {
   let scope = effectScope2();
   let scopeState;
@@ -252,7 +262,7 @@ function createReactiveRuleStatus({
       });
       const $message = computed2(() => {
         let message = "";
-        const customMessageRule = customMessages[ruleKey]?.message;
+        const customMessageRule = customMessages ? customMessages[ruleKey]?.message : void 0;
         if (customMessageRule) {
           if (typeof customMessageRule === "function") {
             message = customMessageRule(state.value, ...$params.value);
@@ -305,7 +315,6 @@ function createReactiveRuleStatus({
         $path
       };
     });
-    $validate();
   }
   $watch();
   const $unwatchState = watch(scopeState.$params, $validate, {
@@ -338,7 +347,6 @@ function createReactiveRuleStatus({
     $unwatchState();
     scope.stop();
     scope = effectScope2();
-    scopeState = null;
   }
   return reactive({
     ...scopeState,
@@ -356,12 +364,14 @@ function createReactiveFieldStatus({
   rulesDef,
   customMessages,
   path,
-  storage
+  storage,
+  options
 }) {
   let scope = effectScope3();
   let scopeState;
   const $dirty = ref2(false);
   const $anyDirty = computed3(() => $dirty.value);
+  const triggerPunishment = ref2(false);
   function createReactiveRulesResult() {
     const declaredRules = rulesDef.value;
     const storeResult = storage.checkRuleDeclEntry(path, declaredRules);
@@ -378,7 +388,8 @@ function createReactiveFieldStatus({
               ruleKey,
               state,
               path,
-              storage
+              storage,
+              options
             })
           ];
         }
@@ -388,6 +399,9 @@ function createReactiveFieldStatus({
     $watch();
     if (storeResult?.valid != null) {
       $dirty.value = storage.getDirtyState(path);
+      if ($dirty.value) {
+        $commit();
+      }
     }
     storage.addRuleDeclEntry(path, declaredRules);
   }
@@ -395,10 +409,14 @@ function createReactiveFieldStatus({
     storage.setDirtyEntry(path, $dirty.value);
   });
   const $unwatchState = watch2(state, () => {
-    if (!$dirty.value) {
-      $dirty.value = true;
+    if (unref2(options.autoDirty)) {
+      if (!$dirty.value) {
+        $dirty.value = true;
+      }
+    }
+    if (!unref2(options.lazy)) {
+      $commit();
     }
-    $validate();
   });
   function $unwatch() {
     if ($rules.value) {
@@ -411,9 +429,9 @@ function createReactiveFieldStatus({
       storage.setDirtyEntry(path, $dirty.value);
     }
     $unwatchState();
+    $unwatchValid();
     scope.stop();
     scope = effectScope3();
-    scopeState = null;
   }
   function $watch() {
     scopeState = scope.run(() => {
@@ -421,16 +439,30 @@ function createReactiveFieldStatus({
         return $invalid.value && !$pending.value && $dirty.value;
       });
       const $pending = computed3(() => {
-        return Object.entries($rules.value).some(([key, rule]) => {
-          return rule.$pending;
-        });
+        if (triggerPunishment.value || !unref2(options.rewardEarly)) {
+          return Object.entries($rules.value).some(([key, ruleResult]) => {
+            return ruleResult.$pending;
+          });
+        }
+        return false;
       });
       const $invalid = computed3(() => {
-        return Object.entries($rules.value).some(([key, ruleResult]) => {
-          return !ruleResult.$valid;
-        });
+        if (triggerPunishment.value || !unref2(options.rewardEarly)) {
+          return Object.entries($rules.value).some(([key, ruleResult]) => {
+            return !ruleResult.$valid;
+          });
+        }
+        return false;
+      });
+      const $valid = computed3(() => {
+        if (unref2(options.rewardEarly)) {
+          return Object.entries($rules.value).every(([key, ruleResult]) => {
+            return ruleResult.$valid;
+          });
+        } else {
+          return !$invalid.value;
+        }
       });
-      const $valid = computed3(() => !$invalid.value);
       return {
         $error,
         $pending,
@@ -441,15 +473,25 @@ function createReactiveFieldStatus({
   }
   const $rules = ref2();
   createReactiveRulesResult();
+  const $unwatchValid = watch2(scopeState.$valid, (valid) => {
+    if (unref2(options.rewardEarly) && valid) {
+      triggerPunishment.value = false;
+    }
+  });
   function $reset() {
     $dirty.value = false;
   }
   function $touch() {
     $dirty.value = true;
-    $validate();
+  }
+  function $commit() {
+    Object.entries($rules.value).map(([key, rule]) => {
+      return rule.$validate();
+    });
   }
   async function $validate() {
     try {
+      triggerPunishment.value = true;
       const results = await Promise.all(
         Object.entries($rules.value).map(([key, rule]) => {
           return rule.$validate();
@@ -477,14 +519,56 @@ function createReactiveFieldStatus({
   });
 }
 
+// src/utils/randomId.ts
+function randomId() {
+  const uint32 = window.crypto.getRandomValues(new Uint32Array(1))[0];
+  return uint32.toString(8);
+}
+
 // src/core/useRegle/useStateProperties/createReactiveCollectionStatus.ts
-import { reactive as reactive3, ref as ref3, toRef as toRef3, watch as watch3 } from "vue";
+function createCollectionElement({
+  path,
+  index,
+  options,
+  storage,
+  value,
+  customMessages,
+  rules
+}) {
+  const $id = randomId();
+  const $path = `${path}.${$id}`;
+  if (!value[index].$id) {
+    Object.defineProperties(value[index], {
+      $id: {
+        value: $id,
+        enumerable: false,
+        configurable: false,
+        writable: false
+      }
+    });
+  }
+  const $state = toRefs(value);
+  const $status = createReactiveChildrenStatus({
+    state: $state[index],
+    rulesDef: toRef3(() => rules),
+    customMessages,
+    path: $path,
+    storage,
+    options
+  });
+  if ($status) {
+    $status.$id = value[index].$id ?? $id;
+    storage.addArrayStatus($status.$id, $status);
+  }
+  return $status;
+}
 function createReactiveCollectionStatus({
   state,
   rulesDef,
   customMessages,
   path,
-  storage
+  storage,
+  options
 }) {
   if (Array.isArray(state.value) && !rulesDef.value.$each) {
     return null;
@@ -501,23 +585,72 @@ function createReactiveCollectionStatus({
       rulesDef: toRef3(() => otherFields),
       customMessages,
       path,
-      storage
+      storage,
+      options
     });
     if (Array.isArray(state.value) && $each) {
       $eachStatus.value = state.value.map((value, index) => {
-        const $path = `${path}.${index}`;
-        return createReactiveChildrenStatus({
-          state: toRef3(() => value),
-          rulesDef: toRef3(() => $each),
-          customMessages,
-          path: $path,
-          storage
-        });
+        if (value.$id) {
+          const previousStatus = storage.getArrayStatus(value.$id);
+          if (previousStatus) {
+            return previousStatus;
+          }
+        } else {
+          return createCollectionElement({
+            path,
+            rules: $each,
+            value: state.value,
+            index,
+            options,
+            storage
+          });
+        }
       }).filter((f) => !!f);
     } else {
       $eachStatus.value = [];
     }
   }
+  async function updateChildrenStatus() {
+    const { $each } = rulesDef.value;
+    if (Array.isArray(state.value) && $eachStatus.value && $each) {
+      $unwatchState?.();
+      state.value.forEach((value, index) => {
+        if (value.$id) {
+          if (Array.isArray(state.value) && !state.value.find((val) => val.$id === $eachStatus.value[index].$id)) {
+            $eachStatus.value[index].$unwatch();
+          }
+          const previousStatus = storage.getArrayStatus(value.$id);
+          if (previousStatus) {
+            $eachStatus.value[index] = previousStatus;
+          } else {
+            $eachStatus.value[index].$unwatch();
+          }
+        } else {
+          const newElement = createCollectionElement({
+            value: state.value,
+            rules: $each,
+            customMessages,
+            path,
+            storage,
+            options,
+            index
+          });
+          if (newElement) {
+            $eachStatus.value[index] = newElement;
+          }
+        }
+      });
+      const deletedItems = $eachStatus.value.filter(($each2) => {
+        return Array.isArray(state.value) && !state.value.find((val) => val.$id === $each2.$id);
+      });
+      deletedItems.forEach((item) => {
+        storage.deleteArrayStatus(item.$id);
+        item.$unwatch();
+      });
+      $eachStatus.value.length = state.value.length;
+      nextTick($watch);
+    }
+  }
   function $unwatch() {
     if ($unwatchState) {
       $unwatchState();
@@ -532,19 +665,42 @@ function createReactiveCollectionStatus({
     }
   }
   function $watch() {
-    $unwatchState = watch3(
-      state,
-      () => {
-        createStatus();
-      },
-      { deep: true, flush: "sync" }
-    );
+    $unwatchState = watch3(() => state.value.length, updateChildrenStatus, {
+      flush: "sync"
+    });
+  }
+  function $touch() {
+    $fieldStatus.value.$touch();
+    $eachStatus.value.forEach(($each) => {
+      $each.$touch();
+    });
+  }
+  function $reset() {
+    $fieldStatus.value.$reset();
+    $eachStatus.value.forEach(($each) => {
+      $each.$reset();
+    });
+  }
+  async function $validate() {
+    try {
+      const results = await Promise.all(
+        $eachStatus.value.map((rule) => {
+          return rule.$validate();
+        })
+      );
+      return results.every((value) => !!value);
+    } catch (e) {
+      return false;
+    }
   }
   return reactive3({
     ...$fieldStatus.value,
     $each: $eachStatus,
+    $validate,
     $unwatch,
-    $watch
+    $watch,
+    $touch,
+    $reset
   });
 }
 
@@ -555,7 +711,8 @@ function createReactiveNestedStatus({
   customMessages,
   path = "",
   rootRules,
-  storage
+  storage,
+  options
 }) {
   let scope = effectScope4();
   let scopeState;
@@ -573,7 +730,8 @@ function createReactiveNestedStatus({
               rulesDef: statePropRulesRef,
               customMessages,
               path: path ? `${path}.${statePropKey}` : statePropKey,
-              storage
+              storage,
+              options
             })
           ];
         }
@@ -667,11 +825,11 @@ function createReactiveNestedStatus({
     }
     scope.stop();
     scope = effectScope4();
-    scopeState = null;
   }
   return reactive4({
     ...scopeState,
     $fields,
+    $value: state,
     $reset,
     $touch,
     $validate,
@@ -684,7 +842,8 @@ function createReactiveChildrenStatus({
   rulesDef,
   customMessages,
   path,
-  storage
+  storage,
+  options
 }) {
   if (isCollectionRulesDef(rulesDef)) {
     return createReactiveCollectionStatus({
@@ -692,7 +851,8 @@ function createReactiveChildrenStatus({
       rulesDef,
       customMessages,
       path,
-      storage
+      storage,
+      options
     });
   } else if (isNestedRulesDef(state, rulesDef) && isRefObject(state)) {
     return createReactiveNestedStatus({
@@ -700,7 +860,8 @@ function createReactiveChildrenStatus({
       state,
       customMessages,
       path,
-      storage
+      storage,
+      options
     });
   } else if (isValidatorRulesDef(rulesDef)) {
     return createReactiveFieldStatus({
@@ -708,14 +869,15 @@ function createReactiveChildrenStatus({
       rulesDef,
       customMessages,
       path,
-      storage
+      storage,
+      options
     });
   }
   return null;
 }
 
 // src/core/useStorage/useStorage.ts
-import { ref as ref5, shallowRef } from "vue";
+import { ref as ref4, shallowRef } from "vue";
 function useStorage() {
   const ruleDeclStorage = shallowRef(/* @__PURE__ */ new Map());
   const fieldsStorage = shallowRef(
@@ -724,12 +886,13 @@ function useStorage() {
   const collectionsStorage = shallowRef(/* @__PURE__ */ new Map());
   const dirtyStorage = shallowRef(/* @__PURE__ */ new Map());
   const ruleStatusStorage = shallowRef(/* @__PURE__ */ new Map());
+  const arrayStatusStorage = shallowRef(/* @__PURE__ */ new Map());
   function getFieldsEntry($path) {
     const existingFields = fieldsStorage.value.get($path);
     if (existingFields) {
       return existingFields;
     } else {
-      const $fields = ref5({});
+      const $fields = ref4({});
       fieldsStorage.value.set($path, $fields);
       return $fields;
     }
@@ -739,11 +902,22 @@ function useStorage() {
     if (existingEach) {
       return existingEach;
     } else {
-      const $each = ref5([]);
+      const $each = ref4([]);
       collectionsStorage.value.set($path, $each);
       return $each;
     }
   }
+  function addArrayStatus($id, value) {
+    arrayStatusStorage.value.set($id, value);
+  }
+  function getArrayStatus($id) {
+    return arrayStatusStorage.value.get($id);
+  }
+  function deleteArrayStatus($id) {
+    if ($id) {
+      arrayStatusStorage.value.delete($id);
+    }
+  }
   function setDirtyEntry($path, dirty) {
     dirtyStorage.value.set($path, dirty);
   }
@@ -790,8 +964,8 @@ function useStorage() {
     if (ruleStatus) {
       return ruleStatus;
     } else {
-      const $pending = ref5(false);
-      const $valid = ref5(true);
+      const $pending = ref4(false);
+      const $valid = ref4(true);
       ruleStatusStorage.value.set(path, { $pending, $valid });
       return { $pending, $valid };
     }
@@ -803,20 +977,24 @@ function useStorage() {
     getDirtyState,
     trySetRuleStatusRef,
     getFieldsEntry,
-    getCollectionsEntry
+    getCollectionsEntry,
+    getArrayStatus,
+    addArrayStatus,
+    deleteArrayStatus
   };
 }
 
 // src/core/useRegle/useStateProperties/useStateProperties.ts
-function useStateProperties(scopeRules, state, customRules) {
+function useStateProperties(scopeRules, state, options, customRules) {
   const storage = useStorage();
   const $regle = reactive5(
     createReactiveNestedStatus({
       rootRules: scopeRules,
       scopeRules,
       state,
-      customMessages: customRules(),
-      storage
+      customMessages: customRules?.(),
+      storage,
+      options
     })
   );
   const errors = useErrors($regle);
@@ -824,22 +1002,36 @@ function useStateProperties(scopeRules, state, customRules) {
 }
 
 // src/core/useRegle/useRegle.ts
-function createUseRegleComposable(customRules) {
-  function useRegle(state, rulesFactory) {
+function createUseRegleComposable(customRules, options) {
+  const globalOptions = {
+    autoDirty: options?.autoDirty ?? true,
+    lazy: options?.lazy ?? false,
+    rewardEarly: options?.rewardEarly ?? false
+  };
+  function useRegle2(state, rulesFactory, options2) {
     const scopeRules = isRef2(rulesFactory) ? rulesFactory : computed5(rulesFactory);
-    const initialState = shallowRef2(structuredClone(toRaw(state.value)));
+    const resolvedOptions = {
+      ...globalOptions,
+      ...options2
+    };
+    const initialState = shallowRef2(structuredClone(toRaw2(state.value)));
     const { $regle, errors } = useStateProperties(
       scopeRules,
       state,
+      resolvedOptions,
       customRules
     );
     function resetForm() {
-      state.value = toRaw(initialState.value);
+      state.value = toRaw2(initialState.value);
       $regle.$reset();
     }
     async function validateForm() {
       $regle.$touch();
-      return await $regle.$validate();
+      const result = await $regle.$validate();
+      if (result) {
+        return state.value;
+      }
+      return false;
     }
     return {
       state,
@@ -849,18 +1041,21 @@ function createUseRegleComposable(customRules) {
       validateForm
     };
   }
-  return useRegle;
+  return useRegle2;
 }
+var useRegle = createUseRegleComposable();
 
-// src/core/defineCustomValidators.ts
-function defineCustomValidators(customRules) {
-  const useRegle = createUseRegleComposable(customRules);
-  return {
-    useRegle
-  };
+// src/core/defineRegleOptions.ts
+function defineRegleOptions({
+  rules,
+  options
+}) {
+  const useRegle2 = createUseRegleComposable(rules, options);
+  return useRegle2;
 }
 export {
   InternalRuleType,
   createRule,
-  defineCustomValidators
+  defineRegleOptions,
+  unwrapRuleParameters
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@regle/core",
-  "version": "0.0.4-beta.0",
+  "version": "0.0.5",
   "description": "Vue form validator",
   "scripts": {
     "lint": "eslint --ext .ts --ext .vue .",
-    "typecheck": "vue-tsc --noEmit",
+    "typecheck": "tsc --noEmit",
     "release": "npm publish",
     "build": "tsup",
     "dev": "tsup --config=tsup.dev.ts --watch"
@@ -27,7 +27,8 @@
     "vue-eslint-parser": "9.3.1",
     "vue-tsc": "1.8.15",
     "tsup": "7.2.0",
-    "@total-typescript/ts-reset": "0.5.1"
+    "@total-typescript/ts-reset": "0.5.1",
+    "type-fest": "4.4.0"
   },
   "type": "module",
   "exports": {