@formkit/zod 0.17.0-3cd8a0a

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present FormKit, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>
+
+# @formkit/zod
+
+The official FormKit Zod plugin. Read the [documentation](https://www.formkit.com/essentials/zod) for usage instructions.

package/dist/index.cjs

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@formkit/core');
+
+function createMessageName(node) {
+    if (typeof node.props.validationLabel === 'function') {
+        return node.props.validationLabel(node);
+    }
+    return (node.props.validationLabel ||
+        node.props.label ||
+        node.props.name ||
+        String(node.name));
+}
+/**
+ * Creates a new Zod schema plugin for form validation.
+ *
+ * @param zodSchema - A Zod schema to validate the form against.
+ * @param submitCallback - A callback to run when the form is submitted and it passes validation.
+ *
+ * @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.
+ *
+ * @public
+ */
+function createZodPlugin(zodSchema, submitCallback) {
+    const zodValidationSet = new Set();
+    const zodValidationListeners = new Map();
+    // The Zod plugin — maps zod schema to validation rules on
+    // matching FormKit nodes.
+    const zodPlugin = (node) => {
+        if (node.props.type !== 'form')
+            return false;
+        node.ledger.count('existingValidation', (message) => {
+            if (message.type === 'validation' || message.type === 'error') {
+                return !message.key.endsWith(':zod');
+            }
+            return false;
+        });
+        node.on('created', () => {
+            node.extend('setZodErrors', {
+                get: (node) => async (zodError) => {
+                    if (!zodError)
+                        return;
+                    await node.settled;
+                    const [formErrors, fieldErrors] = zodErrorToFormKitErrors(zodError, node);
+                    node.setErrors(fieldErrors, formErrors);
+                },
+                set: false,
+            });
+        });
+        node.on('destroyed', () => {
+            zodValidationSet.clear();
+            zodValidationListeners.clear();
+        });
+        let commitTimout = 0;
+        let start = Date.now();
+        node.on('commit', ({ payload }) => {
+            clearTimeout(commitTimout);
+            const now = Date.now();
+            // perform at least every 600ms
+            if (now - start > 600) {
+                start = now;
+                performZodValidation(payload, node);
+            }
+            // also perform after 150ms of no commits
+            commitTimout = setTimeout(() => {
+                performZodValidation(payload, node);
+            }, 150);
+        });
+        node.on('message-added', (message) => {
+            if (message.payload.type === 'state' &&
+                message.payload.key === 'submitted') {
+                // perform validation on submit so that check
+                // for form level errors can be done
+                performZodValidation(node.value, node);
+            }
+        });
+        return false;
+    };
+    function performZodValidation(payload, node) {
+        // block submission while validation is running
+        node.store.set(core.createMessage({
+            type: 'state',
+            blocking: true,
+            visible: false,
+            value: true,
+            key: 'validating:zod',
+        }));
+        const zodResults = zodSchema.safeParse(payload);
+        if (!zodResults.success) {
+            setFormValidations(zodResults.error, node);
+        }
+        else {
+            zodValidationSet.forEach((node) => {
+                node.store.remove(`${node.address.slice(1).join('.')}:zod`);
+                const receipt = zodValidationListeners.get(node);
+                node.off(receipt);
+                zodValidationListeners.delete(node);
+            });
+            zodValidationSet.clear();
+        }
+        // unblock submission
+        node.store.remove('validating:zod');
+    }
+    // The submit handler — validates the payload against the zod schema
+    // and then passes the data to the user's submit callback.
+    async function submitHandler(payload, node) {
+        const zodResults = await zodSchema.safeParseAsync(payload);
+        if (!zodResults.success) {
+            setFormValidations(zodResults.error, node);
+        }
+        else {
+            await submitCallback(payload, node);
+        }
+    }
+    // Sets the form errors on the correct nodes.
+    function setFormValidations(zodErrors, node) {
+        var _a;
+        if (!node)
+            return;
+        const [formErrors, InputErrors] = zodErrorToFormKitErrors(zodErrors, node);
+        const oldZodValidationSet = new Set(zodValidationSet);
+        Object.entries(InputErrors).map((issue) => {
+            const [path, message] = issue;
+            const targetNode = node.at(path);
+            if (targetNode) {
+                oldZodValidationSet.delete(targetNode);
+                const existingValidationCount = targetNode.ledger.value('existingValidation');
+                if (existingValidationCount === 0) {
+                    if (!targetNode.store[`${path}:zod`]) {
+                        const validationListener = targetNode.on('unsettled:existingValidation', () => {
+                            targetNode.store.remove(`${path}:zod`);
+                            zodValidationSet.delete(targetNode);
+                        });
+                        zodValidationListeners.set(targetNode, validationListener);
+                    }
+                    targetNode.store.set(core.createMessage({
+                        blocking: true,
+                        type: 'validation',
+                        key: `${path}:zod`,
+                        value: message,
+                        meta: {
+                            i18nArgs: [
+                                {
+                                    node: targetNode,
+                                    name: createMessageName(targetNode),
+                                    args: [issue],
+                                },
+                            ],
+                            messageKey: 'zod',
+                        },
+                    }));
+                    zodValidationSet.add(targetNode);
+                }
+            }
+        });
+        // on submit, all remaining errors are global errors
+        if ((_a = node === null || node === void 0 ? void 0 : node.context) === null || _a === void 0 ? void 0 : _a.state.submitted) {
+            node.setErrors([], formErrors);
+        }
+        oldZodValidationSet.forEach((node) => {
+            node.store.remove(`${node.address.slice(1).join('.')}:zod`);
+            zodValidationSet.delete(node);
+        });
+    }
+    function zodErrorToFormKitErrors(zodError, node) {
+        const fieldErrors = {};
+        const formErrors = [];
+        zodError.errors.forEach((error) => {
+            const path = error.path.join('.');
+            const targetNode = node.at(path);
+            if (targetNode) {
+                if (!fieldErrors[path]) {
+                    fieldErrors[path] = error.message;
+                }
+            }
+            else {
+                formErrors.push(`${path}: ${error.message}`);
+            }
+        });
+        return [formErrors, fieldErrors];
+    }
+    return [zodPlugin, submitHandler];
+}
+
+exports.createZodPlugin = createZodPlugin;

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The first-party zod package/plugin for FormKit. Read the
+ * {@link https://formkit.com/essentials/zod |
+ * documentation} for usage instructions.
+ *
+ * @packageDocumentation
+ */
+
+import { FormKitNode } from '@formkit/core';
+import { FormKitPlugin } from '@formkit/core';
+import { z } from 'zod';
+
+/**
+ * Creates a new Zod schema plugin for form validation.
+ *
+ * @param zodSchema - A Zod schema to validate the form against.
+ * @param submitCallback - A callback to run when the form is submitted and it passes validation.
+ *
+ * @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.
+ *
+ * @public
+ */
+export declare function createZodPlugin<Z extends z.ZodTypeAny>(zodSchema: Z, submitCallback: (payload: z.infer<typeof zodSchema>, node: FormKitNode | undefined) => void | Promise<void>): [FormKitPlugin, (payload: any, node: FormKitNode | undefined) => void];
+
+
+/**
+ * Extend FormKitNode with setZodErrors.
+ */
+declare module '@formkit/core' {
+  interface FormKitNodeExtensions {
+    setZodErrors(zodError: z.ZodError | undefined): FormKitNode
+  }
+}
+

package/dist/index.mjs

@@ -0,0 +1,183 @@
+import { createMessage } from '@formkit/core';
+
+function createMessageName(node) {
+    if (typeof node.props.validationLabel === 'function') {
+        return node.props.validationLabel(node);
+    }
+    return (node.props.validationLabel ||
+        node.props.label ||
+        node.props.name ||
+        String(node.name));
+}
+/**
+ * Creates a new Zod schema plugin for form validation.
+ *
+ * @param zodSchema - A Zod schema to validate the form against.
+ * @param submitCallback - A callback to run when the form is submitted and it passes validation.
+ *
+ * @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.
+ *
+ * @public
+ */
+function createZodPlugin(zodSchema, submitCallback) {
+    const zodValidationSet = new Set();
+    const zodValidationListeners = new Map();
+    // The Zod plugin — maps zod schema to validation rules on
+    // matching FormKit nodes.
+    const zodPlugin = (node) => {
+        if (node.props.type !== 'form')
+            return false;
+        node.ledger.count('existingValidation', (message) => {
+            if (message.type === 'validation' || message.type === 'error') {
+                return !message.key.endsWith(':zod');
+            }
+            return false;
+        });
+        node.on('created', () => {
+            node.extend('setZodErrors', {
+                get: (node) => async (zodError) => {
+                    if (!zodError)
+                        return;
+                    await node.settled;
+                    const [formErrors, fieldErrors] = zodErrorToFormKitErrors(zodError, node);
+                    node.setErrors(fieldErrors, formErrors);
+                },
+                set: false,
+            });
+        });
+        node.on('destroyed', () => {
+            zodValidationSet.clear();
+            zodValidationListeners.clear();
+        });
+        let commitTimout = 0;
+        let start = Date.now();
+        node.on('commit', ({ payload }) => {
+            clearTimeout(commitTimout);
+            const now = Date.now();
+            // perform at least every 600ms
+            if (now - start > 600) {
+                start = now;
+                performZodValidation(payload, node);
+            }
+            // also perform after 150ms of no commits
+            commitTimout = setTimeout(() => {
+                performZodValidation(payload, node);
+            }, 150);
+        });
+        node.on('message-added', (message) => {
+            if (message.payload.type === 'state' &&
+                message.payload.key === 'submitted') {
+                // perform validation on submit so that check
+                // for form level errors can be done
+                performZodValidation(node.value, node);
+            }
+        });
+        return false;
+    };
+    function performZodValidation(payload, node) {
+        // block submission while validation is running
+        node.store.set(createMessage({
+            type: 'state',
+            blocking: true,
+            visible: false,
+            value: true,
+            key: 'validating:zod',
+        }));
+        const zodResults = zodSchema.safeParse(payload);
+        if (!zodResults.success) {
+            setFormValidations(zodResults.error, node);
+        }
+        else {
+            zodValidationSet.forEach((node) => {
+                node.store.remove(`${node.address.slice(1).join('.')}:zod`);
+                const receipt = zodValidationListeners.get(node);
+                node.off(receipt);
+                zodValidationListeners.delete(node);
+            });
+            zodValidationSet.clear();
+        }
+        // unblock submission
+        node.store.remove('validating:zod');
+    }
+    // The submit handler — validates the payload against the zod schema
+    // and then passes the data to the user's submit callback.
+    async function submitHandler(payload, node) {
+        const zodResults = await zodSchema.safeParseAsync(payload);
+        if (!zodResults.success) {
+            setFormValidations(zodResults.error, node);
+        }
+        else {
+            await submitCallback(payload, node);
+        }
+    }
+    // Sets the form errors on the correct nodes.
+    function setFormValidations(zodErrors, node) {
+        var _a;
+        if (!node)
+            return;
+        const [formErrors, InputErrors] = zodErrorToFormKitErrors(zodErrors, node);
+        const oldZodValidationSet = new Set(zodValidationSet);
+        Object.entries(InputErrors).map((issue) => {
+            const [path, message] = issue;
+            const targetNode = node.at(path);
+            if (targetNode) {
+                oldZodValidationSet.delete(targetNode);
+                const existingValidationCount = targetNode.ledger.value('existingValidation');
+                if (existingValidationCount === 0) {
+                    if (!targetNode.store[`${path}:zod`]) {
+                        const validationListener = targetNode.on('unsettled:existingValidation', () => {
+                            targetNode.store.remove(`${path}:zod`);
+                            zodValidationSet.delete(targetNode);
+                        });
+                        zodValidationListeners.set(targetNode, validationListener);
+                    }
+                    targetNode.store.set(createMessage({
+                        blocking: true,
+                        type: 'validation',
+                        key: `${path}:zod`,
+                        value: message,
+                        meta: {
+                            i18nArgs: [
+                                {
+                                    node: targetNode,
+                                    name: createMessageName(targetNode),
+                                    args: [issue],
+                                },
+                            ],
+                            messageKey: 'zod',
+                        },
+                    }));
+                    zodValidationSet.add(targetNode);
+                }
+            }
+        });
+        // on submit, all remaining errors are global errors
+        if ((_a = node === null || node === void 0 ? void 0 : node.context) === null || _a === void 0 ? void 0 : _a.state.submitted) {
+            node.setErrors([], formErrors);
+        }
+        oldZodValidationSet.forEach((node) => {
+            node.store.remove(`${node.address.slice(1).join('.')}:zod`);
+            zodValidationSet.delete(node);
+        });
+    }
+    function zodErrorToFormKitErrors(zodError, node) {
+        const fieldErrors = {};
+        const formErrors = [];
+        zodError.errors.forEach((error) => {
+            const path = error.path.join('.');
+            const targetNode = node.at(path);
+            if (targetNode) {
+                if (!fieldErrors[path]) {
+                    fieldErrors[path] = error.message;
+                }
+            }
+            else {
+                formErrors.push(`${path}: ${error.message}`);
+            }
+        });
+        return [formErrors, fieldErrors];
+    }
+    return [zodPlugin, submitHandler];
+}
+
+export { createZodPlugin };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@formkit/zod",
+  "version": "0.17.0-3cd8a0a",
+  "type": "module",
+  "description": "Zod validation for FormKit.",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "keywords": [
+    "zod",
+    "forms",
+    "inputs",
+    "validation"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formkit/zod.git",
+    "directory": "packages/zod"
+  },
+  "contributors": [
+    "Andrew Boyd <andrew@formkit.com>",
+    "Justin Schroeder <justin@formkit.com>"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
+  "dependencies": {
+    "@formkit/core": "0.17.0-3cd8a0a"
+  },
+  "devDependencies": {},
+  "peerDependencies": {
+    "zod": "^3.0.0"
+  }
+}