[0.5.x] Re-work on-change validation (#105)

* Update types * Re-work validating on change * Improve watch command * Remove comment
laravel · Nov 8, 2024 · c198547 · c198547
1 parent 07fe9d9
commit c198547
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 20 deletions.
diff --git a/packages/alpine/package.json b/packages/alpine/package.json
@@ -20,7 +20,7 @@
         "/dist"
     ],
     "scripts": {
-        "watch": "rm -rf dist && tsc --watch",
+        "watch": "rm -rf dist && tsc --watch --preserveWatchOutput",
         "build": "rm -rf dist && tsc",
         "typeCheck": "tsc --noEmit",
         "prepublishOnly": "npm run build",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -20,7 +20,7 @@
         "/dist"
     ],
     "scripts": {
-        "watch": "rm -rf dist && tsc --watch",
+        "watch": "rm -rf dist && tsc --watch --preserveWatchOutput",
         "build": "rm -rf dist && tsc",
         "typeCheck": "tsc --noEmit",
         "prepublishOnly": "npm run build",

diff --git a/packages/core/src/validator.ts b/packages/core/src/validator.ts
@@ -169,7 +169,7 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
     /**
      * Create a debounced validation callback.
      */
-    const createValidator = () => debounce((instanceConfig: Config) => {
+    const createValidator = () => debounce((instanceConfig: ValidationConfig) => {
         callback({
             get: (url, data = {}, globalConfig = {}) => client.get(url, parseData(data), resolveConfig(globalConfig, instanceConfig, data)),
             post: (url, data = {}, globalConfig = {}) => client.post(url, parseData(data), resolveConfig(globalConfig, instanceConfig, data)),
@@ -254,11 +254,7 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
                     : response
             },
             onBefore: () => {
-                const beforeValidationHandler = config.onBeforeValidation ?? ((newRequest, oldRequest) => {
-                    return newRequest.touched.length > 0 && ! isEqual(newRequest, oldRequest)
-                })
-
-                if (beforeValidationHandler({ data, touched }, { data: oldData, touched: oldTouched }) === false) {
+                if (config.onBeforeValidation && config.onBeforeValidation({ data, touched }, { data: oldData, touched: oldTouched }) === false) {
                     return false
                 }
 
@@ -296,7 +292,7 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
     /**
      * Validate the given input.
      */
-    const validate = (name?: string | NamedInputEvent, value?: unknown, config?: Config): void => {
+    const validate = (name?: string | NamedInputEvent, value?: unknown, config?: ValidationConfig): void => {
         if (typeof name === 'undefined') {
             validator(config ?? {})
 
@@ -313,9 +309,9 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
 
         if (get(oldData, name) !== value) {
             setTouched([name, ...touched]).forEach((listener) => listener())
-        }
 
-        validator(config ?? {})
+            validator(config ?? {})
+        }
     }
 
     /**

diff --git a/packages/core/tests/validator.test.js b/packages/core/tests/validator.test.js
@@ -105,17 +105,17 @@ it('does not revalidate data when data is unchanged', async () => {
     expect(requests).toBe(0)
 
     data = { first: true }
-    validator.validate('name', true)
+    validator.validate('first', true)
     expect(requests).toBe(1)
     await vi.advanceTimersByTimeAsync(1500)
 
     data = { first: true }
-    validator.validate('name', true)
+    validator.validate('first', true)
     expect(requests).toBe(1)
     await vi.advanceTimersByTimeAsync(1500)
 
     data = { second: true }
-    validator.validate('name', true)
+    validator.validate('second', true)
     expect(requests).toBe(2)
     await vi.advanceTimersByTimeAsync(1500)
 })
@@ -245,8 +245,6 @@ it('does not validate if the field has not been changed', async () => {
     validator.validate('name', 'Tim')
 
     expect(requestMade).toBe(false)
-
-    await assertPendingValidateDebounceAndClear()
 })
 
 it('filters out files', async () => {

diff --git a/packages/react-inertia/package.json b/packages/react-inertia/package.json
@@ -21,7 +21,7 @@
         "/dist"
     ],
     "scripts": {
-        "watch": "rm -rf dist && tsc --watch",
+        "watch": "rm -rf dist && tsc --watch --preserveWatchOutput",
         "build": "rm -rf dist && tsc",
         "typeCheck": "tsc --noEmit",
         "prepublishOnly": "npm run build",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -20,7 +20,7 @@
         "/dist"
     ],
     "scripts": {
-        "watch": "rm -rf dist && tsc --watch",
+        "watch": "rm -rf dist && tsc --watch --preserveWatchOutput",
         "build": "rm -rf dist && tsc",
         "typeCheck": "tsc --noEmit",
         "prepublishOnly": "npm run build",

diff --git a/packages/vue-inertia/package.json b/packages/vue-inertia/package.json
@@ -21,7 +21,7 @@
         "/dist"
     ],
     "scripts": {
-        "watch": "rm -rf dist && tsc --watch",
+        "watch": "rm -rf dist && tsc --watch --preserveWatchOutput",
         "build": "rm -rf dist && tsc",
         "typeCheck": "tsc --noEmit",
         "prepublishOnly": "npm run build",

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -20,7 +20,7 @@
         "/dist"
     ],
     "scripts": {
-        "watch": "rm -rf dist && tsc --watch",
+        "watch": "rm -rf dist && tsc --watch --preserveWatchOutput",
         "build": "rm -rf dist && tsc",
         "typeCheck": "tsc --noEmit",
         "prepublishOnly": "npm run build",