docs: update documentation

Author: ealush

website/docs/usage_with_frameworks/react.md

@@ -37,7 +37,9 @@ function SignupForm() {
 
   const handleChange = (name, value) => {
     setFormData(prev => ({ ...prev, [name]: value }));
-    suite.afterEach(setResult).run({ ...formData, [name]: value }, name);
+    suite
+      .afterEach(() => setResult(suite.get()))
+      .run({ ...formData, [name]: value }, name);
   };
 
   return (
@@ -89,8 +91,8 @@ function useVestForm(suite, initialData = {}) {
       setFormData(newData);
 
       suite
-        .afterEach(res => {
-          setResult(res);
+        .afterEach(() => {
+          setResult(suite.get());
         })
         .run(newData, fieldName);
     },
@@ -99,8 +101,8 @@ function useVestForm(suite, initialData = {}) {
 
   const validateAll = useCallback(() => {
     suite
-      .afterEach(res => {
-        setResult(res);
+      .afterEach(() => {
+        setResult(suite.get());
       })
       .run(formData);
   }, [formData, suite]);
@@ -216,8 +218,8 @@ function UsernameField() {
     setIsChecking(true);
 
     suite
-      .afterEach(res => {
-        setResult(res);
+      .afterEach(() => {
+        setResult(suite.get());
         setIsChecking(false);
       })
       .run({ username: value }, 'username');
@@ -272,7 +274,7 @@ const handleFieldChange = (fieldName, value) => {
 
   // Only validate the changed field
   suite
-    .afterEach(setResult)
+    .afterEach(() => setResult(suite.get()))
     .run({ ...formData, [fieldName]: value }, fieldName);
 };
 ```
@@ -287,7 +289,8 @@ const handleSubmit = e => {
 
   // Validate all fields
   suite
-    .afterEach(result => {
+    .afterEach(() => {
+      const result = suite.get();
       if (!result.hasErrors()) {
         // Submit form
         submitForm(formData);

website/docs/usage_with_frameworks/svelte.md

@@ -40,13 +40,14 @@ Vest integrates naturally with Svelte's reactive stores and reactive statements,
   let result = suite.get();
 
   function validateField(fieldName) {
-    suite.afterEach((res) => {
-      result = res;
+    suite.afterEach(() => {
+      result = suite.get();
     }).run(formData, fieldName);
   }
 
   function handleSubmit() {
-    suite.afterEach((res) => {
+    suite.afterEach(() => {
+      const res = suite.get();
       result = res;
 
       if (!res.hasErrors()) {
@@ -127,13 +128,14 @@ Create a reactive store for your validation results:
   function validateField(fieldName, value) {
     formData.update(data => ({ ...data, [fieldName]: value }));
 
-    suite.afterEach((res) => {
-      validationResult.set(res);
+    suite.afterEach(() => {
+      validationResult.set(suite.get());
     }).run($formData, fieldName);
   }
 
   function handleSubmit() {
-    suite.afterEach((res) => {
+    suite.afterEach(() => {
+      const res = suite.get();
       validationResult.set(res);
 
       if (!res.hasErrors()) {
@@ -177,8 +179,8 @@ Use Svelte's reactive statements for automatic validation:
 
   // Automatically validate when username changes
   $: if (username !== undefined) {
-    suite.afterEach((res) => {
-      result = res;
+    suite.afterEach(() => {
+      result = suite.get();
     }).run({ username }, 'username');
   }
 </script>
@@ -219,8 +221,8 @@ Handle async validations with Svelte's reactivity:
   async function checkUsername() {
     isChecking = true;
 
-    suite.afterEach((res) => {
-      result = res;
+    suite.afterEach(() => {
+      result = suite.get();
       isChecking = false;
     }).run({ username }, 'username');
   }
@@ -322,8 +324,8 @@ export function createValidationStore(suite, initialData = {}) {
 
     const currentData = get(formData);
     suite
-      .afterEach(res => {
-        result.set(res);
+      .afterEach(() => {
+        result.set(suite.get());
         isValidating.set(false);
       })
       .run(currentData, fieldName);
@@ -334,8 +336,8 @@ export function createValidationStore(suite, initialData = {}) {
 
     const currentData = get(formData);
     suite
-      .afterEach(res => {
-        result.set(res);
+      .afterEach(() => {
+        result.set(suite.get());
         isValidating.set(false);
       })
       .run(currentData);
@@ -445,8 +447,8 @@ Vest works great with [TypeScript](/docs/typescript_support) in Svelte:
   let result: SuiteResult = suite.get();
 
   function validateField(fieldName: keyof FormData): void {
-    suite.afterEach((res) => {
-      result = res;
+    suite.afterEach(() => {
+      result = suite.get();
     }).run(formData, fieldName);
   }
 </script>
@@ -478,7 +480,7 @@ Use debouncing for async or expensive validations:
   import { debounce } from './utils';
 
   const validateUsername = debounce((value) => {
-    suite.afterEach(setResult).run({ username: value }, 'username');
+    suite.afterEach(() => setResult(suite.get())).run({ username: value }, 'username');
   }, 500);
 
   $: validateUsername(username);

website/docs/usage_with_frameworks/vanilla.md

@@ -72,8 +72,8 @@ Vest works perfectly with plain JavaScript without any framework dependencies. T
 
       function validateField(fieldName) {
         const result = suite
-          .afterEach(res => {
-            updateErrorDisplay(fieldName, res);
+          .afterEach(() => {
+            updateErrorDisplay(fieldName, suite.get());
           })
           .run(formData, fieldName);
       }
@@ -104,7 +104,8 @@ Vest works perfectly with plain JavaScript without any framework dependencies. T
         e.preventDefault();
 
         suite
-          .afterEach(res => {
+          .afterEach(() => {
+            const res = suite.get();
             if (!res.hasErrors()) {
               console.log('Form is valid!', formData);
               // Submit form
@@ -220,16 +221,17 @@ class FormValidator {
 
   validateField(fieldName) {
     this.suite
-      .afterEach(result => {
-        this.updateFieldUI(fieldName, result);
+      .afterEach(() => {
+        this.updateFieldUI(fieldName, this.suite.get());
       })
       .run(this.formData, fieldName);
   }
 
   validateAll() {
     return new Promise(resolve => {
       this.suite
-        .afterEach(result => {
+        .afterEach(() => {
+          const result = this.suite.get();
           // Update UI for all fields
           Object.keys(this.formData).forEach(fieldName => {
             this.touched[fieldName] = true;
@@ -368,7 +370,8 @@ usernameInput.addEventListener('input', e => {
 
     debounceTimer = setTimeout(() => {
       suite
-        .afterEach(result => {
+        .afterEach(() => {
+          const result = suite.get();
           loadingIndicator.style.display = 'none';
           updateErrorDisplay('username', result);
         })

website/docs/usage_with_frameworks/vue.md

@@ -41,15 +41,16 @@ const result = ref(suite.get());
 
 const validateField = fieldName => {
   suite
-    .afterEach(res => {
-      result.value = res;
+    .afterEach(() => {
+      result.value = suite.get();
     })
     .run(formData, fieldName);
 };
 
 const handleSubmit = () => {
   suite
-    .afterEach(res => {
+    .afterEach(() => {
+      const res = suite.get();
       result.value = res;
 
       if (!res.hasErrors()) {
@@ -108,8 +109,8 @@ export function useVestForm(suite, initialData = {}) {
     isValidating.value = true;
 
     suite
-      .afterEach(res => {
-        result.value = res;
+      .afterEach(() => {
+        result.value = suite.get();
         isValidating.value = false;
       })
       .run(formData, fieldName);
@@ -119,8 +120,8 @@ export function useVestForm(suite, initialData = {}) {
     isValidating.value = true;
 
     suite
-      .afterEach(res => {
-        result.value = res;
+      .afterEach(() => {
+        result.value = suite.get();
         isValidating.value = false;
       })
       .run(formData);
@@ -219,8 +220,8 @@ const checkUsername = () => {
   isChecking.value = true;
 
   suite
-    .afterEach(res => {
-      result.value = res;
+    .afterEach(() => {
+      result.value = suite.get();
       isChecking.value = false;
     })
     .run(formData, 'username');
@@ -275,14 +276,15 @@ export default {
   methods: {
     validateField(fieldName) {
       suite
-        .afterEach(res => {
-          this.result = res;
+        .afterEach(() => {
+          this.result = suite.get();
         })
         .run(this.formData, fieldName);
     },
     handleSubmit() {
       suite
-        .afterEach(res => {
+        .afterEach(() => {
+          const res = suite.get();
           this.result = res;
 
           if (!res.hasErrors()) {
@@ -392,8 +394,8 @@ const result = ref<SuiteResult>(suite.get());
 
 const validateField = (fieldName: keyof FormData) => {
   suite
-    .afterEach(res => {
-      result.value = res;
+    .afterEach(() => {
+      result.value = suite.get();
     })
     .run(formData, fieldName);
 };
@@ -440,7 +442,9 @@ watchDebounced(
   username,
   newValue => {
     // Validate username
-    suite.afterEach(setResult).run({ username: newValue }, 'username');
+    suite
+      .afterEach(() => setResult(suite.get()))
+      .run({ username: newValue }, 'username');
   },
   { debounce: 500 },
 );

website/docusaurus.config.js

@@ -30,15 +30,6 @@ const config = {
     },
   },
   organizationName: 'ealush', // Usually your GitHub org/user name.
-  plugins: [
-    [
-      '@docusaurus/plugin-google-gtag',
-      {
-        trackingID: 'G-M420W03G2K',
-        anonymizeIP: true,
-      },
-    ],
-  ],
   presets: [
     [
       '@docusaurus/preset-classic',
@@ -80,6 +71,10 @@ const config = {
         theme: {
           customCss: path.resolve(__dirname, './src/css/custom.css'),
         },
+        gtag: {
+          trackingID: 'G-M420W03G2K',
+          anonymizeIP: true,
+        },
       }),
     ],
   ],

website/sidebars.js

@@ -22,7 +22,7 @@ const sidebars = {
       items: [
         'usage_with_frameworks/react',
         'usage_with_frameworks/vue',
-        'usage_with_frameworks/svelte',
+
         'usage_with_frameworks/vanilla',
       ],
     },

website/src/components/HomepageFeatures.js

@@ -46,6 +46,13 @@ const FeatureList = [
     description:
       'Vest remembers previous runs and merges results, allowing you to validate only the fields the user is interacting with.',
   },
+  {
+    title: 'Full stack',
+    emoji: '🥞',
+    category: 'Universal',
+    description:
+      'Run the same validation logic on both client and server. Share your suite between environments for consistent, tamper-proof validation.',
+  },
 ];
 
 function Feature({ emoji, title, category, description }) {

website/src/components/RawExample.module.css

@@ -19,6 +19,7 @@
 
 .codeWindow {
   margin-left: 4rem;
+  margin-bottom: 2rem;
   border-radius: 12px;
   box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.25);
   overflow: hidden;