@formkit/zod 1.5.0-2087d2b → 1.5.0-3001515
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +144 -161
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +24 -0
- package/dist/index.d.mts +24 -0
- package/dist/index.dev.mjs +156 -0
- package/dist/index.dev.mjs.map +1 -0
- package/dist/index.mjs +144 -161
- package/dist/index.mjs.map +1 -0
- package/package.json +12 -7
- package/dist/index.d.ts +0 -35
package/dist/index.cjs
CHANGED
|
@@ -2,174 +2,157 @@
|
|
|
2
2
|
|
|
3
3
|
var core = require('@formkit/core');
|
|
4
4
|
|
|
5
|
+
// packages/zod/src/zod.ts
|
|
5
6
|
function createMessageName(node) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
node.props.label ||
|
|
11
|
-
node.props.name ||
|
|
12
|
-
String(node.name));
|
|
7
|
+
if (typeof node.props.validationLabel === "function") {
|
|
8
|
+
return node.props.validationLabel(node);
|
|
9
|
+
}
|
|
10
|
+
return node.props.validationLabel || node.props.label || node.props.name || String(node.name);
|
|
13
11
|
}
|
|
14
|
-
/**
|
|
15
|
-
* Creates a new Zod schema plugin for form validation.
|
|
16
|
-
*
|
|
17
|
-
* @param zodSchema - A Zod schema to validate the form against.
|
|
18
|
-
* @param submitCallback - A callback to run when the form is submitted and it passes validation.
|
|
19
|
-
*
|
|
20
|
-
* @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.
|
|
21
|
-
*
|
|
22
|
-
* @public
|
|
23
|
-
*/
|
|
24
12
|
function createZodPlugin(zodSchema, submitCallback) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
const receipt = zodValidationListeners.get(node);
|
|
88
|
-
node.off(receipt);
|
|
89
|
-
zodValidationListeners.delete(node);
|
|
90
|
-
});
|
|
91
|
-
zodValidationSet.clear();
|
|
92
|
-
}
|
|
13
|
+
const zodValidationSet = /* @__PURE__ */ new Set();
|
|
14
|
+
const zodValidationListeners = /* @__PURE__ */ new Map();
|
|
15
|
+
const zodPlugin = (node) => {
|
|
16
|
+
if (node.props.type !== "form")
|
|
17
|
+
return false;
|
|
18
|
+
node.ledger.count("existingValidation", (message) => {
|
|
19
|
+
if (message.type === "validation" || message.type === "error") {
|
|
20
|
+
return !message.key.endsWith(":zod");
|
|
21
|
+
}
|
|
22
|
+
return false;
|
|
23
|
+
});
|
|
24
|
+
node.on("created", () => {
|
|
25
|
+
node.extend("setZodErrors", {
|
|
26
|
+
get: (node2) => async (zodError) => {
|
|
27
|
+
if (!zodError)
|
|
28
|
+
return;
|
|
29
|
+
await node2.settled;
|
|
30
|
+
const [formErrors, fieldErrors] = zodErrorToFormKitErrors(
|
|
31
|
+
zodError,
|
|
32
|
+
node2
|
|
33
|
+
);
|
|
34
|
+
node2.setErrors(fieldErrors, formErrors);
|
|
35
|
+
},
|
|
36
|
+
set: false
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
node.on("destroyed", () => {
|
|
40
|
+
zodValidationSet.clear();
|
|
41
|
+
zodValidationListeners.clear();
|
|
42
|
+
});
|
|
43
|
+
let commitTimout = 0;
|
|
44
|
+
let start = Date.now();
|
|
45
|
+
node.on("commit", ({ payload }) => {
|
|
46
|
+
clearTimeout(commitTimout);
|
|
47
|
+
const now = Date.now();
|
|
48
|
+
if (now - start > 600) {
|
|
49
|
+
start = now;
|
|
50
|
+
performZodValidation(payload, node);
|
|
51
|
+
}
|
|
52
|
+
commitTimout = setTimeout(() => {
|
|
53
|
+
performZodValidation(payload, node);
|
|
54
|
+
}, 150);
|
|
55
|
+
});
|
|
56
|
+
node.on("message-added", (message) => {
|
|
57
|
+
if (message.payload.type === "state" && message.payload.key === "submitted") {
|
|
58
|
+
performZodValidation(node.value, node);
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
return false;
|
|
62
|
+
};
|
|
63
|
+
function performZodValidation(payload, node) {
|
|
64
|
+
const zodResults = zodSchema.safeParse(payload);
|
|
65
|
+
if (!zodResults.success) {
|
|
66
|
+
setFormValidations(zodResults.error, node);
|
|
67
|
+
} else {
|
|
68
|
+
zodValidationSet.forEach((node2) => {
|
|
69
|
+
node2.store.remove(`${node2.address.slice(1).join(".")}:zod`);
|
|
70
|
+
const receipt = zodValidationListeners.get(node2);
|
|
71
|
+
node2.off(receipt);
|
|
72
|
+
zodValidationListeners.delete(node2);
|
|
73
|
+
});
|
|
74
|
+
zodValidationSet.clear();
|
|
93
75
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
else {
|
|
102
|
-
await submitCallback(zodResults.data, node);
|
|
103
|
-
}
|
|
76
|
+
}
|
|
77
|
+
async function submitHandler(payload, node) {
|
|
78
|
+
const zodResults = await zodSchema.safeParseAsync(payload);
|
|
79
|
+
if (!zodResults.success) {
|
|
80
|
+
setFormValidations(zodResults.error, node);
|
|
81
|
+
} else {
|
|
82
|
+
await submitCallback(zodResults.data, node);
|
|
104
83
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
if ((_a = node === null || node === void 0 ? void 0 : node.context) === null || _a === void 0 ? void 0 : _a.state.submitted) {
|
|
148
|
-
node.setErrors([], formErrors);
|
|
84
|
+
}
|
|
85
|
+
function setFormValidations(zodErrors, node) {
|
|
86
|
+
if (!node)
|
|
87
|
+
return;
|
|
88
|
+
const [formErrors, InputErrors] = zodErrorToFormKitErrors(zodErrors, node);
|
|
89
|
+
const oldZodValidationSet = new Set(zodValidationSet);
|
|
90
|
+
Object.entries(InputErrors).map((issue) => {
|
|
91
|
+
const [path, message] = issue;
|
|
92
|
+
const targetNode = node.at(path);
|
|
93
|
+
if (targetNode) {
|
|
94
|
+
oldZodValidationSet.delete(targetNode);
|
|
95
|
+
const existingValidationCount = targetNode.ledger.value("existingValidation");
|
|
96
|
+
if (existingValidationCount === 0) {
|
|
97
|
+
if (!targetNode.store[`${path}:zod`]) {
|
|
98
|
+
const validationListener = targetNode.on(
|
|
99
|
+
"unsettled:existingValidation",
|
|
100
|
+
() => {
|
|
101
|
+
targetNode.store.remove(`${path}:zod`);
|
|
102
|
+
zodValidationSet.delete(targetNode);
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
zodValidationListeners.set(targetNode, validationListener);
|
|
106
|
+
}
|
|
107
|
+
targetNode.store.set(
|
|
108
|
+
core.createMessage({
|
|
109
|
+
blocking: true,
|
|
110
|
+
type: "validation",
|
|
111
|
+
key: `${path}:zod`,
|
|
112
|
+
value: message,
|
|
113
|
+
meta: {
|
|
114
|
+
i18nArgs: [
|
|
115
|
+
{
|
|
116
|
+
node: targetNode,
|
|
117
|
+
name: createMessageName(targetNode),
|
|
118
|
+
args: [issue]
|
|
119
|
+
}
|
|
120
|
+
],
|
|
121
|
+
messageKey: "zod"
|
|
122
|
+
}
|
|
123
|
+
})
|
|
124
|
+
);
|
|
125
|
+
zodValidationSet.add(targetNode);
|
|
149
126
|
}
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
if (node?.context?.state.submitted) {
|
|
130
|
+
node.setErrors([], formErrors);
|
|
154
131
|
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
132
|
+
oldZodValidationSet.forEach((node2) => {
|
|
133
|
+
node2.store.remove(`${node2.address.slice(1).join(".")}:zod`);
|
|
134
|
+
zodValidationSet.delete(node2);
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
function zodErrorToFormKitErrors(zodError, node) {
|
|
138
|
+
const fieldErrors = {};
|
|
139
|
+
const formErrors = [];
|
|
140
|
+
zodError.issues.forEach((error) => {
|
|
141
|
+
const path = error.path.join(".");
|
|
142
|
+
const targetNode = node.at(path);
|
|
143
|
+
if (targetNode) {
|
|
144
|
+
if (!fieldErrors[path]) {
|
|
145
|
+
fieldErrors[path] = error.message;
|
|
146
|
+
}
|
|
147
|
+
} else {
|
|
148
|
+
formErrors.push(`${path}: ${error.message}`);
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
return [formErrors, fieldErrors];
|
|
152
|
+
}
|
|
153
|
+
return [zodPlugin, submitHandler];
|
|
173
154
|
}
|
|
174
155
|
|
|
175
156
|
exports.createZodPlugin = createZodPlugin;
|
|
157
|
+
//# sourceMappingURL=out.js.map
|
|
158
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/zod.ts"],"names":["node"],"mappings":"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","sourcesContent":["import { FormKitNode, FormKitPlugin, createMessage } from '@formkit/core'\nimport { z } from 'zod'\n\n/**\n * Extend FormKitNode with setZodErrors.\n */\ndeclare module '@formkit/core' {\n interface FormKitNodeExtensions {\n setZodErrors(zodError: z.ZodError | undefined): FormKitNode\n }\n}\n\nfunction createMessageName(node: FormKitNode): string {\n if (typeof node.props.validationLabel === 'function') {\n return node.props.validationLabel(node)\n }\n return (\n node.props.validationLabel ||\n node.props.label ||\n node.props.name ||\n String(node.name)\n )\n}\n\n/**\n * Creates a new Zod schema plugin for form validation.\n *\n * @param zodSchema - A Zod schema to validate the form against.\n * @param submitCallback - A callback to run when the form is submitted and it passes validation.\n *\n * @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.\n *\n * @public\n */\nexport function createZodPlugin<Z extends z.ZodTypeAny>(\n zodSchema: Z,\n submitCallback: (\n payload: z.infer<typeof zodSchema>,\n node: FormKitNode | undefined\n ) => void | Promise<void>\n): [FormKitPlugin, (payload: any, node: FormKitNode | undefined) => void] {\n const zodValidationSet = new Set<FormKitNode>()\n const zodValidationListeners = new Map<FormKitNode, string>()\n // The Zod plugin — maps zod schema to validation rules on\n // matching FormKit nodes.\n const zodPlugin = (node: FormKitNode) => {\n if (node.props.type !== 'form') return false\n\n node.ledger.count('existingValidation', (message) => {\n if (message.type === 'validation' || message.type === 'error') {\n return !message.key.endsWith(':zod')\n }\n return false\n })\n\n node.on('created', () => {\n node.extend('setZodErrors', {\n get: (node) => async (zodError: z.ZodError) => {\n if (!zodError) return\n await node.settled\n const [formErrors, fieldErrors] = zodErrorToFormKitErrors(\n zodError,\n node\n )\n node.setErrors(fieldErrors, formErrors)\n },\n set: false,\n })\n })\n\n node.on('destroyed', () => {\n zodValidationSet.clear()\n zodValidationListeners.clear()\n })\n\n let commitTimout: ReturnType<typeof setTimeout> | number = 0\n let start = Date.now()\n node.on('commit', ({ payload }) => {\n clearTimeout(commitTimout)\n const now = Date.now()\n // perform at least every 600ms\n if (now - start > 600) {\n start = now\n performZodValidation(payload, node)\n }\n // also perform after 150ms of no commits\n commitTimout = setTimeout(() => {\n performZodValidation(payload, node)\n }, 150)\n })\n\n node.on('message-added', (message) => {\n if (\n message.payload.type === 'state' &&\n message.payload.key === 'submitted'\n ) {\n // perform validation on submit so that check\n // for form level errors can be done\n performZodValidation(node.value, node)\n }\n })\n\n return false\n }\n\n function performZodValidation(payload: any, node: FormKitNode) {\n const zodResults = zodSchema.safeParse(payload)\n if (!zodResults.success) {\n setFormValidations(zodResults.error, node)\n } else {\n zodValidationSet.forEach((node) => {\n node.store.remove(`${node.address.slice(1).join('.')}:zod`)\n const receipt = zodValidationListeners.get(node)\n node.off(receipt as string)\n zodValidationListeners.delete(node)\n })\n zodValidationSet.clear()\n }\n }\n\n // The submit handler — validates the payload against the zod schema\n // and then passes the data to the user's submit callback.\n async function submitHandler(payload: any, node?: FormKitNode | undefined) {\n const zodResults = await zodSchema.safeParseAsync(payload)\n if (!zodResults.success) {\n setFormValidations(zodResults.error, node)\n } else {\n await submitCallback(zodResults.data, node)\n }\n }\n\n // Sets the form errors on the correct nodes.\n function setFormValidations(\n zodErrors: z.ZodError,\n node?: FormKitNode | undefined\n ) {\n if (!node) return\n const [formErrors, InputErrors] = zodErrorToFormKitErrors(zodErrors, node)\n const oldZodValidationSet = new Set(zodValidationSet)\n Object.entries(InputErrors).map((issue) => {\n const [path, message] = issue\n const targetNode = node.at(path)\n if (targetNode) {\n oldZodValidationSet.delete(targetNode)\n const existingValidationCount =\n targetNode.ledger.value('existingValidation')\n if (existingValidationCount === 0) {\n if (!targetNode.store[`${path}:zod`]) {\n const validationListener = targetNode.on(\n 'unsettled:existingValidation',\n () => {\n targetNode.store.remove(`${path}:zod`)\n zodValidationSet.delete(targetNode)\n }\n )\n zodValidationListeners.set(targetNode, validationListener)\n }\n\n targetNode.store.set(\n createMessage({\n blocking: true,\n type: 'validation',\n key: `${path}:zod`,\n value: message,\n meta: {\n i18nArgs: [\n {\n node: targetNode,\n name: createMessageName(targetNode),\n args: [issue],\n },\n ],\n messageKey: 'zod',\n },\n })\n )\n zodValidationSet.add(targetNode)\n }\n }\n })\n\n // on submit, all remaining errors are global errors\n if (node?.context?.state.submitted) {\n node.setErrors([], formErrors)\n }\n\n oldZodValidationSet.forEach((node) => {\n node.store.remove(`${node.address.slice(1).join('.')}:zod`)\n zodValidationSet.delete(node)\n })\n }\n\n function zodErrorToFormKitErrors(\n zodError: z.ZodError,\n node: FormKitNode\n ): [string[], Record<string, string>] {\n const fieldErrors: Record<string, string> = {}\n const formErrors: string[] = []\n zodError.issues.forEach((error) => {\n const path = error.path.join('.')\n const targetNode = node.at(path)\n if (targetNode) {\n if (!fieldErrors[path]) {\n fieldErrors[path] = error.message\n }\n } else {\n formErrors.push(`${path}: ${error.message}`)\n }\n })\n return [formErrors, fieldErrors]\n }\n\n return [zodPlugin, submitHandler]\n}\n"]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { FormKitNode, FormKitPlugin } from '@formkit/core';
|
|
2
|
+
import { z } from 'zod';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Extend FormKitNode with setZodErrors.
|
|
6
|
+
*/
|
|
7
|
+
declare module '@formkit/core' {
|
|
8
|
+
interface FormKitNodeExtensions {
|
|
9
|
+
setZodErrors(zodError: z.ZodError | undefined): FormKitNode;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Creates a new Zod schema plugin for form validation.
|
|
14
|
+
*
|
|
15
|
+
* @param zodSchema - A Zod schema to validate the form against.
|
|
16
|
+
* @param submitCallback - A callback to run when the form is submitted and it passes validation.
|
|
17
|
+
*
|
|
18
|
+
* @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.
|
|
19
|
+
*
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
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];
|
|
23
|
+
|
|
24
|
+
export { createZodPlugin };
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { FormKitNode, FormKitPlugin } from '@formkit/core';
|
|
2
|
+
import { z } from 'zod';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Extend FormKitNode with setZodErrors.
|
|
6
|
+
*/
|
|
7
|
+
declare module '@formkit/core' {
|
|
8
|
+
interface FormKitNodeExtensions {
|
|
9
|
+
setZodErrors(zodError: z.ZodError | undefined): FormKitNode;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Creates a new Zod schema plugin for form validation.
|
|
14
|
+
*
|
|
15
|
+
* @param zodSchema - A Zod schema to validate the form against.
|
|
16
|
+
* @param submitCallback - A callback to run when the form is submitted and it passes validation.
|
|
17
|
+
*
|
|
18
|
+
* @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.
|
|
19
|
+
*
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
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];
|
|
23
|
+
|
|
24
|
+
export { createZodPlugin };
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import { createMessage } from '@formkit/core';
|
|
2
|
+
|
|
3
|
+
// packages/zod/src/zod.ts
|
|
4
|
+
function createMessageName(node) {
|
|
5
|
+
if (typeof node.props.validationLabel === "function") {
|
|
6
|
+
return node.props.validationLabel(node);
|
|
7
|
+
}
|
|
8
|
+
return node.props.validationLabel || node.props.label || node.props.name || String(node.name);
|
|
9
|
+
}
|
|
10
|
+
function createZodPlugin(zodSchema, submitCallback) {
|
|
11
|
+
const zodValidationSet = /* @__PURE__ */ new Set();
|
|
12
|
+
const zodValidationListeners = /* @__PURE__ */ new Map();
|
|
13
|
+
const zodPlugin = (node) => {
|
|
14
|
+
if (node.props.type !== "form")
|
|
15
|
+
return false;
|
|
16
|
+
node.ledger.count("existingValidation", (message) => {
|
|
17
|
+
if (message.type === "validation" || message.type === "error") {
|
|
18
|
+
return !message.key.endsWith(":zod");
|
|
19
|
+
}
|
|
20
|
+
return false;
|
|
21
|
+
});
|
|
22
|
+
node.on("created", () => {
|
|
23
|
+
node.extend("setZodErrors", {
|
|
24
|
+
get: (node2) => async (zodError) => {
|
|
25
|
+
if (!zodError)
|
|
26
|
+
return;
|
|
27
|
+
await node2.settled;
|
|
28
|
+
const [formErrors, fieldErrors] = zodErrorToFormKitErrors(
|
|
29
|
+
zodError,
|
|
30
|
+
node2
|
|
31
|
+
);
|
|
32
|
+
node2.setErrors(fieldErrors, formErrors);
|
|
33
|
+
},
|
|
34
|
+
set: false
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
node.on("destroyed", () => {
|
|
38
|
+
zodValidationSet.clear();
|
|
39
|
+
zodValidationListeners.clear();
|
|
40
|
+
});
|
|
41
|
+
let commitTimout = 0;
|
|
42
|
+
let start = Date.now();
|
|
43
|
+
node.on("commit", ({ payload }) => {
|
|
44
|
+
clearTimeout(commitTimout);
|
|
45
|
+
const now = Date.now();
|
|
46
|
+
if (now - start > 600) {
|
|
47
|
+
start = now;
|
|
48
|
+
performZodValidation(payload, node);
|
|
49
|
+
}
|
|
50
|
+
commitTimout = setTimeout(() => {
|
|
51
|
+
performZodValidation(payload, node);
|
|
52
|
+
}, 150);
|
|
53
|
+
});
|
|
54
|
+
node.on("message-added", (message) => {
|
|
55
|
+
if (message.payload.type === "state" && message.payload.key === "submitted") {
|
|
56
|
+
performZodValidation(node.value, node);
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
return false;
|
|
60
|
+
};
|
|
61
|
+
function performZodValidation(payload, node) {
|
|
62
|
+
const zodResults = zodSchema.safeParse(payload);
|
|
63
|
+
if (!zodResults.success) {
|
|
64
|
+
setFormValidations(zodResults.error, node);
|
|
65
|
+
} else {
|
|
66
|
+
zodValidationSet.forEach((node2) => {
|
|
67
|
+
node2.store.remove(`${node2.address.slice(1).join(".")}:zod`);
|
|
68
|
+
const receipt = zodValidationListeners.get(node2);
|
|
69
|
+
node2.off(receipt);
|
|
70
|
+
zodValidationListeners.delete(node2);
|
|
71
|
+
});
|
|
72
|
+
zodValidationSet.clear();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
async function submitHandler(payload, node) {
|
|
76
|
+
const zodResults = await zodSchema.safeParseAsync(payload);
|
|
77
|
+
if (!zodResults.success) {
|
|
78
|
+
setFormValidations(zodResults.error, node);
|
|
79
|
+
} else {
|
|
80
|
+
await submitCallback(zodResults.data, node);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
function setFormValidations(zodErrors, node) {
|
|
84
|
+
if (!node)
|
|
85
|
+
return;
|
|
86
|
+
const [formErrors, InputErrors] = zodErrorToFormKitErrors(zodErrors, node);
|
|
87
|
+
const oldZodValidationSet = new Set(zodValidationSet);
|
|
88
|
+
Object.entries(InputErrors).map((issue) => {
|
|
89
|
+
const [path, message] = issue;
|
|
90
|
+
const targetNode = node.at(path);
|
|
91
|
+
if (targetNode) {
|
|
92
|
+
oldZodValidationSet.delete(targetNode);
|
|
93
|
+
const existingValidationCount = targetNode.ledger.value("existingValidation");
|
|
94
|
+
if (existingValidationCount === 0) {
|
|
95
|
+
if (!targetNode.store[`${path}:zod`]) {
|
|
96
|
+
const validationListener = targetNode.on(
|
|
97
|
+
"unsettled:existingValidation",
|
|
98
|
+
() => {
|
|
99
|
+
targetNode.store.remove(`${path}:zod`);
|
|
100
|
+
zodValidationSet.delete(targetNode);
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
zodValidationListeners.set(targetNode, validationListener);
|
|
104
|
+
}
|
|
105
|
+
targetNode.store.set(
|
|
106
|
+
createMessage({
|
|
107
|
+
blocking: true,
|
|
108
|
+
type: "validation",
|
|
109
|
+
key: `${path}:zod`,
|
|
110
|
+
value: message,
|
|
111
|
+
meta: {
|
|
112
|
+
i18nArgs: [
|
|
113
|
+
{
|
|
114
|
+
node: targetNode,
|
|
115
|
+
name: createMessageName(targetNode),
|
|
116
|
+
args: [issue]
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
messageKey: "zod"
|
|
120
|
+
}
|
|
121
|
+
})
|
|
122
|
+
);
|
|
123
|
+
zodValidationSet.add(targetNode);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
if (node?.context?.state.submitted) {
|
|
128
|
+
node.setErrors([], formErrors);
|
|
129
|
+
}
|
|
130
|
+
oldZodValidationSet.forEach((node2) => {
|
|
131
|
+
node2.store.remove(`${node2.address.slice(1).join(".")}:zod`);
|
|
132
|
+
zodValidationSet.delete(node2);
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
function zodErrorToFormKitErrors(zodError, node) {
|
|
136
|
+
const fieldErrors = {};
|
|
137
|
+
const formErrors = [];
|
|
138
|
+
zodError.issues.forEach((error) => {
|
|
139
|
+
const path = error.path.join(".");
|
|
140
|
+
const targetNode = node.at(path);
|
|
141
|
+
if (targetNode) {
|
|
142
|
+
if (!fieldErrors[path]) {
|
|
143
|
+
fieldErrors[path] = error.message;
|
|
144
|
+
}
|
|
145
|
+
} else {
|
|
146
|
+
formErrors.push(`${path}: ${error.message}`);
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
return [formErrors, fieldErrors];
|
|
150
|
+
}
|
|
151
|
+
return [zodPlugin, submitHandler];
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
export { createZodPlugin };
|
|
155
|
+
//# sourceMappingURL=out.js.map
|
|
156
|
+
//# sourceMappingURL=index.dev.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/zod.ts"],"names":["node"],"mappings":"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","sourcesContent":["import { FormKitNode, FormKitPlugin, createMessage } from '@formkit/core'\nimport { z } from 'zod'\n\n/**\n * Extend FormKitNode with setZodErrors.\n */\ndeclare module '@formkit/core' {\n interface FormKitNodeExtensions {\n setZodErrors(zodError: z.ZodError | undefined): FormKitNode\n }\n}\n\nfunction createMessageName(node: FormKitNode): string {\n if (typeof node.props.validationLabel === 'function') {\n return node.props.validationLabel(node)\n }\n return (\n node.props.validationLabel ||\n node.props.label ||\n node.props.name ||\n String(node.name)\n )\n}\n\n/**\n * Creates a new Zod schema plugin for form validation.\n *\n * @param zodSchema - A Zod schema to validate the form against.\n * @param submitCallback - A callback to run when the form is submitted and it passes validation.\n *\n * @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.\n *\n * @public\n */\nexport function createZodPlugin<Z extends z.ZodTypeAny>(\n zodSchema: Z,\n submitCallback: (\n payload: z.infer<typeof zodSchema>,\n node: FormKitNode | undefined\n ) => void | Promise<void>\n): [FormKitPlugin, (payload: any, node: FormKitNode | undefined) => void] {\n const zodValidationSet = new Set<FormKitNode>()\n const zodValidationListeners = new Map<FormKitNode, string>()\n // The Zod plugin — maps zod schema to validation rules on\n // matching FormKit nodes.\n const zodPlugin = (node: FormKitNode) => {\n if (node.props.type !== 'form') return false\n\n node.ledger.count('existingValidation', (message) => {\n if (message.type === 'validation' || message.type === 'error') {\n return !message.key.endsWith(':zod')\n }\n return false\n })\n\n node.on('created', () => {\n node.extend('setZodErrors', {\n get: (node) => async (zodError: z.ZodError) => {\n if (!zodError) return\n await node.settled\n const [formErrors, fieldErrors] = zodErrorToFormKitErrors(\n zodError,\n node\n )\n node.setErrors(fieldErrors, formErrors)\n },\n set: false,\n })\n })\n\n node.on('destroyed', () => {\n zodValidationSet.clear()\n zodValidationListeners.clear()\n })\n\n let commitTimout: ReturnType<typeof setTimeout> | number = 0\n let start = Date.now()\n node.on('commit', ({ payload }) => {\n clearTimeout(commitTimout)\n const now = Date.now()\n // perform at least every 600ms\n if (now - start > 600) {\n start = now\n performZodValidation(payload, node)\n }\n // also perform after 150ms of no commits\n commitTimout = setTimeout(() => {\n performZodValidation(payload, node)\n }, 150)\n })\n\n node.on('message-added', (message) => {\n if (\n message.payload.type === 'state' &&\n message.payload.key === 'submitted'\n ) {\n // perform validation on submit so that check\n // for form level errors can be done\n performZodValidation(node.value, node)\n }\n })\n\n return false\n }\n\n function performZodValidation(payload: any, node: FormKitNode) {\n const zodResults = zodSchema.safeParse(payload)\n if (!zodResults.success) {\n setFormValidations(zodResults.error, node)\n } else {\n zodValidationSet.forEach((node) => {\n node.store.remove(`${node.address.slice(1).join('.')}:zod`)\n const receipt = zodValidationListeners.get(node)\n node.off(receipt as string)\n zodValidationListeners.delete(node)\n })\n zodValidationSet.clear()\n }\n }\n\n // The submit handler — validates the payload against the zod schema\n // and then passes the data to the user's submit callback.\n async function submitHandler(payload: any, node?: FormKitNode | undefined) {\n const zodResults = await zodSchema.safeParseAsync(payload)\n if (!zodResults.success) {\n setFormValidations(zodResults.error, node)\n } else {\n await submitCallback(zodResults.data, node)\n }\n }\n\n // Sets the form errors on the correct nodes.\n function setFormValidations(\n zodErrors: z.ZodError,\n node?: FormKitNode | undefined\n ) {\n if (!node) return\n const [formErrors, InputErrors] = zodErrorToFormKitErrors(zodErrors, node)\n const oldZodValidationSet = new Set(zodValidationSet)\n Object.entries(InputErrors).map((issue) => {\n const [path, message] = issue\n const targetNode = node.at(path)\n if (targetNode) {\n oldZodValidationSet.delete(targetNode)\n const existingValidationCount =\n targetNode.ledger.value('existingValidation')\n if (existingValidationCount === 0) {\n if (!targetNode.store[`${path}:zod`]) {\n const validationListener = targetNode.on(\n 'unsettled:existingValidation',\n () => {\n targetNode.store.remove(`${path}:zod`)\n zodValidationSet.delete(targetNode)\n }\n )\n zodValidationListeners.set(targetNode, validationListener)\n }\n\n targetNode.store.set(\n createMessage({\n blocking: true,\n type: 'validation',\n key: `${path}:zod`,\n value: message,\n meta: {\n i18nArgs: [\n {\n node: targetNode,\n name: createMessageName(targetNode),\n args: [issue],\n },\n ],\n messageKey: 'zod',\n },\n })\n )\n zodValidationSet.add(targetNode)\n }\n }\n })\n\n // on submit, all remaining errors are global errors\n if (node?.context?.state.submitted) {\n node.setErrors([], formErrors)\n }\n\n oldZodValidationSet.forEach((node) => {\n node.store.remove(`${node.address.slice(1).join('.')}:zod`)\n zodValidationSet.delete(node)\n })\n }\n\n function zodErrorToFormKitErrors(\n zodError: z.ZodError,\n node: FormKitNode\n ): [string[], Record<string, string>] {\n const fieldErrors: Record<string, string> = {}\n const formErrors: string[] = []\n zodError.issues.forEach((error) => {\n const path = error.path.join('.')\n const targetNode = node.at(path)\n if (targetNode) {\n if (!fieldErrors[path]) {\n fieldErrors[path] = error.message\n }\n } else {\n formErrors.push(`${path}: ${error.message}`)\n }\n })\n return [formErrors, fieldErrors]\n }\n\n return [zodPlugin, submitHandler]\n}\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,173 +1,156 @@
|
|
|
1
1
|
import { createMessage } from '@formkit/core';
|
|
2
2
|
|
|
3
|
+
// packages/zod/src/zod.ts
|
|
3
4
|
function createMessageName(node) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
node.props.label ||
|
|
9
|
-
node.props.name ||
|
|
10
|
-
String(node.name));
|
|
5
|
+
if (typeof node.props.validationLabel === "function") {
|
|
6
|
+
return node.props.validationLabel(node);
|
|
7
|
+
}
|
|
8
|
+
return node.props.validationLabel || node.props.label || node.props.name || String(node.name);
|
|
11
9
|
}
|
|
12
|
-
/**
|
|
13
|
-
* Creates a new Zod schema plugin for form validation.
|
|
14
|
-
*
|
|
15
|
-
* @param zodSchema - A Zod schema to validate the form against.
|
|
16
|
-
* @param submitCallback - A callback to run when the form is submitted and it passes validation.
|
|
17
|
-
*
|
|
18
|
-
* @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.
|
|
19
|
-
*
|
|
20
|
-
* @public
|
|
21
|
-
*/
|
|
22
10
|
function createZodPlugin(zodSchema, submitCallback) {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
const receipt = zodValidationListeners.get(node);
|
|
86
|
-
node.off(receipt);
|
|
87
|
-
zodValidationListeners.delete(node);
|
|
88
|
-
});
|
|
89
|
-
zodValidationSet.clear();
|
|
90
|
-
}
|
|
11
|
+
const zodValidationSet = /* @__PURE__ */ new Set();
|
|
12
|
+
const zodValidationListeners = /* @__PURE__ */ new Map();
|
|
13
|
+
const zodPlugin = (node) => {
|
|
14
|
+
if (node.props.type !== "form")
|
|
15
|
+
return false;
|
|
16
|
+
node.ledger.count("existingValidation", (message) => {
|
|
17
|
+
if (message.type === "validation" || message.type === "error") {
|
|
18
|
+
return !message.key.endsWith(":zod");
|
|
19
|
+
}
|
|
20
|
+
return false;
|
|
21
|
+
});
|
|
22
|
+
node.on("created", () => {
|
|
23
|
+
node.extend("setZodErrors", {
|
|
24
|
+
get: (node2) => async (zodError) => {
|
|
25
|
+
if (!zodError)
|
|
26
|
+
return;
|
|
27
|
+
await node2.settled;
|
|
28
|
+
const [formErrors, fieldErrors] = zodErrorToFormKitErrors(
|
|
29
|
+
zodError,
|
|
30
|
+
node2
|
|
31
|
+
);
|
|
32
|
+
node2.setErrors(fieldErrors, formErrors);
|
|
33
|
+
},
|
|
34
|
+
set: false
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
node.on("destroyed", () => {
|
|
38
|
+
zodValidationSet.clear();
|
|
39
|
+
zodValidationListeners.clear();
|
|
40
|
+
});
|
|
41
|
+
let commitTimout = 0;
|
|
42
|
+
let start = Date.now();
|
|
43
|
+
node.on("commit", ({ payload }) => {
|
|
44
|
+
clearTimeout(commitTimout);
|
|
45
|
+
const now = Date.now();
|
|
46
|
+
if (now - start > 600) {
|
|
47
|
+
start = now;
|
|
48
|
+
performZodValidation(payload, node);
|
|
49
|
+
}
|
|
50
|
+
commitTimout = setTimeout(() => {
|
|
51
|
+
performZodValidation(payload, node);
|
|
52
|
+
}, 150);
|
|
53
|
+
});
|
|
54
|
+
node.on("message-added", (message) => {
|
|
55
|
+
if (message.payload.type === "state" && message.payload.key === "submitted") {
|
|
56
|
+
performZodValidation(node.value, node);
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
return false;
|
|
60
|
+
};
|
|
61
|
+
function performZodValidation(payload, node) {
|
|
62
|
+
const zodResults = zodSchema.safeParse(payload);
|
|
63
|
+
if (!zodResults.success) {
|
|
64
|
+
setFormValidations(zodResults.error, node);
|
|
65
|
+
} else {
|
|
66
|
+
zodValidationSet.forEach((node2) => {
|
|
67
|
+
node2.store.remove(`${node2.address.slice(1).join(".")}:zod`);
|
|
68
|
+
const receipt = zodValidationListeners.get(node2);
|
|
69
|
+
node2.off(receipt);
|
|
70
|
+
zodValidationListeners.delete(node2);
|
|
71
|
+
});
|
|
72
|
+
zodValidationSet.clear();
|
|
91
73
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
else {
|
|
100
|
-
await submitCallback(zodResults.data, node);
|
|
101
|
-
}
|
|
74
|
+
}
|
|
75
|
+
async function submitHandler(payload, node) {
|
|
76
|
+
const zodResults = await zodSchema.safeParseAsync(payload);
|
|
77
|
+
if (!zodResults.success) {
|
|
78
|
+
setFormValidations(zodResults.error, node);
|
|
79
|
+
} else {
|
|
80
|
+
await submitCallback(zodResults.data, node);
|
|
102
81
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
if ((_a = node === null || node === void 0 ? void 0 : node.context) === null || _a === void 0 ? void 0 : _a.state.submitted) {
|
|
146
|
-
node.setErrors([], formErrors);
|
|
82
|
+
}
|
|
83
|
+
function setFormValidations(zodErrors, node) {
|
|
84
|
+
if (!node)
|
|
85
|
+
return;
|
|
86
|
+
const [formErrors, InputErrors] = zodErrorToFormKitErrors(zodErrors, node);
|
|
87
|
+
const oldZodValidationSet = new Set(zodValidationSet);
|
|
88
|
+
Object.entries(InputErrors).map((issue) => {
|
|
89
|
+
const [path, message] = issue;
|
|
90
|
+
const targetNode = node.at(path);
|
|
91
|
+
if (targetNode) {
|
|
92
|
+
oldZodValidationSet.delete(targetNode);
|
|
93
|
+
const existingValidationCount = targetNode.ledger.value("existingValidation");
|
|
94
|
+
if (existingValidationCount === 0) {
|
|
95
|
+
if (!targetNode.store[`${path}:zod`]) {
|
|
96
|
+
const validationListener = targetNode.on(
|
|
97
|
+
"unsettled:existingValidation",
|
|
98
|
+
() => {
|
|
99
|
+
targetNode.store.remove(`${path}:zod`);
|
|
100
|
+
zodValidationSet.delete(targetNode);
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
zodValidationListeners.set(targetNode, validationListener);
|
|
104
|
+
}
|
|
105
|
+
targetNode.store.set(
|
|
106
|
+
createMessage({
|
|
107
|
+
blocking: true,
|
|
108
|
+
type: "validation",
|
|
109
|
+
key: `${path}:zod`,
|
|
110
|
+
value: message,
|
|
111
|
+
meta: {
|
|
112
|
+
i18nArgs: [
|
|
113
|
+
{
|
|
114
|
+
node: targetNode,
|
|
115
|
+
name: createMessageName(targetNode),
|
|
116
|
+
args: [issue]
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
messageKey: "zod"
|
|
120
|
+
}
|
|
121
|
+
})
|
|
122
|
+
);
|
|
123
|
+
zodValidationSet.add(targetNode);
|
|
147
124
|
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
if (node?.context?.state.submitted) {
|
|
128
|
+
node.setErrors([], formErrors);
|
|
152
129
|
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
130
|
+
oldZodValidationSet.forEach((node2) => {
|
|
131
|
+
node2.store.remove(`${node2.address.slice(1).join(".")}:zod`);
|
|
132
|
+
zodValidationSet.delete(node2);
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
function zodErrorToFormKitErrors(zodError, node) {
|
|
136
|
+
const fieldErrors = {};
|
|
137
|
+
const formErrors = [];
|
|
138
|
+
zodError.issues.forEach((error) => {
|
|
139
|
+
const path = error.path.join(".");
|
|
140
|
+
const targetNode = node.at(path);
|
|
141
|
+
if (targetNode) {
|
|
142
|
+
if (!fieldErrors[path]) {
|
|
143
|
+
fieldErrors[path] = error.message;
|
|
144
|
+
}
|
|
145
|
+
} else {
|
|
146
|
+
formErrors.push(`${path}: ${error.message}`);
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
return [formErrors, fieldErrors];
|
|
150
|
+
}
|
|
151
|
+
return [zodPlugin, submitHandler];
|
|
171
152
|
}
|
|
172
153
|
|
|
173
154
|
export { createZodPlugin };
|
|
155
|
+
//# sourceMappingURL=out.js.map
|
|
156
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/zod.ts"],"names":["node"],"mappings":"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","sourcesContent":["import { FormKitNode, FormKitPlugin, createMessage } from '@formkit/core'\nimport { z } from 'zod'\n\n/**\n * Extend FormKitNode with setZodErrors.\n */\ndeclare module '@formkit/core' {\n interface FormKitNodeExtensions {\n setZodErrors(zodError: z.ZodError | undefined): FormKitNode\n }\n}\n\nfunction createMessageName(node: FormKitNode): string {\n if (typeof node.props.validationLabel === 'function') {\n return node.props.validationLabel(node)\n }\n return (\n node.props.validationLabel ||\n node.props.label ||\n node.props.name ||\n String(node.name)\n )\n}\n\n/**\n * Creates a new Zod schema plugin for form validation.\n *\n * @param zodSchema - A Zod schema to validate the form against.\n * @param submitCallback - A callback to run when the form is submitted and it passes validation.\n *\n * @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.\n *\n * @public\n */\nexport function createZodPlugin<Z extends z.ZodTypeAny>(\n zodSchema: Z,\n submitCallback: (\n payload: z.infer<typeof zodSchema>,\n node: FormKitNode | undefined\n ) => void | Promise<void>\n): [FormKitPlugin, (payload: any, node: FormKitNode | undefined) => void] {\n const zodValidationSet = new Set<FormKitNode>()\n const zodValidationListeners = new Map<FormKitNode, string>()\n // The Zod plugin — maps zod schema to validation rules on\n // matching FormKit nodes.\n const zodPlugin = (node: FormKitNode) => {\n if (node.props.type !== 'form') return false\n\n node.ledger.count('existingValidation', (message) => {\n if (message.type === 'validation' || message.type === 'error') {\n return !message.key.endsWith(':zod')\n }\n return false\n })\n\n node.on('created', () => {\n node.extend('setZodErrors', {\n get: (node) => async (zodError: z.ZodError) => {\n if (!zodError) return\n await node.settled\n const [formErrors, fieldErrors] = zodErrorToFormKitErrors(\n zodError,\n node\n )\n node.setErrors(fieldErrors, formErrors)\n },\n set: false,\n })\n })\n\n node.on('destroyed', () => {\n zodValidationSet.clear()\n zodValidationListeners.clear()\n })\n\n let commitTimout: ReturnType<typeof setTimeout> | number = 0\n let start = Date.now()\n node.on('commit', ({ payload }) => {\n clearTimeout(commitTimout)\n const now = Date.now()\n // perform at least every 600ms\n if (now - start > 600) {\n start = now\n performZodValidation(payload, node)\n }\n // also perform after 150ms of no commits\n commitTimout = setTimeout(() => {\n performZodValidation(payload, node)\n }, 150)\n })\n\n node.on('message-added', (message) => {\n if (\n message.payload.type === 'state' &&\n message.payload.key === 'submitted'\n ) {\n // perform validation on submit so that check\n // for form level errors can be done\n performZodValidation(node.value, node)\n }\n })\n\n return false\n }\n\n function performZodValidation(payload: any, node: FormKitNode) {\n const zodResults = zodSchema.safeParse(payload)\n if (!zodResults.success) {\n setFormValidations(zodResults.error, node)\n } else {\n zodValidationSet.forEach((node) => {\n node.store.remove(`${node.address.slice(1).join('.')}:zod`)\n const receipt = zodValidationListeners.get(node)\n node.off(receipt as string)\n zodValidationListeners.delete(node)\n })\n zodValidationSet.clear()\n }\n }\n\n // The submit handler — validates the payload against the zod schema\n // and then passes the data to the user's submit callback.\n async function submitHandler(payload: any, node?: FormKitNode | undefined) {\n const zodResults = await zodSchema.safeParseAsync(payload)\n if (!zodResults.success) {\n setFormValidations(zodResults.error, node)\n } else {\n await submitCallback(zodResults.data, node)\n }\n }\n\n // Sets the form errors on the correct nodes.\n function setFormValidations(\n zodErrors: z.ZodError,\n node?: FormKitNode | undefined\n ) {\n if (!node) return\n const [formErrors, InputErrors] = zodErrorToFormKitErrors(zodErrors, node)\n const oldZodValidationSet = new Set(zodValidationSet)\n Object.entries(InputErrors).map((issue) => {\n const [path, message] = issue\n const targetNode = node.at(path)\n if (targetNode) {\n oldZodValidationSet.delete(targetNode)\n const existingValidationCount =\n targetNode.ledger.value('existingValidation')\n if (existingValidationCount === 0) {\n if (!targetNode.store[`${path}:zod`]) {\n const validationListener = targetNode.on(\n 'unsettled:existingValidation',\n () => {\n targetNode.store.remove(`${path}:zod`)\n zodValidationSet.delete(targetNode)\n }\n )\n zodValidationListeners.set(targetNode, validationListener)\n }\n\n targetNode.store.set(\n createMessage({\n blocking: true,\n type: 'validation',\n key: `${path}:zod`,\n value: message,\n meta: {\n i18nArgs: [\n {\n node: targetNode,\n name: createMessageName(targetNode),\n args: [issue],\n },\n ],\n messageKey: 'zod',\n },\n })\n )\n zodValidationSet.add(targetNode)\n }\n }\n })\n\n // on submit, all remaining errors are global errors\n if (node?.context?.state.submitted) {\n node.setErrors([], formErrors)\n }\n\n oldZodValidationSet.forEach((node) => {\n node.store.remove(`${node.address.slice(1).join('.')}:zod`)\n zodValidationSet.delete(node)\n })\n }\n\n function zodErrorToFormKitErrors(\n zodError: z.ZodError,\n node: FormKitNode\n ): [string[], Record<string, string>] {\n const fieldErrors: Record<string, string> = {}\n const formErrors: string[] = []\n zodError.issues.forEach((error) => {\n const path = error.path.join('.')\n const targetNode = node.at(path)\n if (targetNode) {\n if (!fieldErrors[path]) {\n fieldErrors[path] = error.message\n }\n } else {\n formErrors.push(`${path}: ${error.message}`)\n }\n })\n return [formErrors, fieldErrors]\n }\n\n return [zodPlugin, submitHandler]\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formkit/zod",
|
|
3
|
-
"version": "1.5.0-
|
|
3
|
+
"version": "1.5.0-3001515",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Zod validation for FormKit.",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
7
|
-
"
|
|
8
|
-
"types": "dist/index.d.ts",
|
|
7
|
+
"types": "dist/index.d.cts",
|
|
9
8
|
"exports": {
|
|
10
9
|
"./package.json": "./package.json",
|
|
11
10
|
".": {
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
"import": {
|
|
12
|
+
"types": "./dist/index.d.mts",
|
|
13
|
+
"development": "./dist/index.dev.mjs",
|
|
14
|
+
"default": "./dist/index.mjs"
|
|
15
|
+
},
|
|
16
|
+
"require": {
|
|
17
|
+
"types": "./dist/index.d.cts",
|
|
18
|
+
"default": "./dist/index.cjs"
|
|
19
|
+
}
|
|
15
20
|
}
|
|
16
21
|
},
|
|
17
22
|
"keywords": [
|
|
@@ -31,7 +36,7 @@
|
|
|
31
36
|
],
|
|
32
37
|
"license": "MIT",
|
|
33
38
|
"dependencies": {
|
|
34
|
-
"@formkit/core": "1.5.0-
|
|
39
|
+
"@formkit/core": "1.5.0-3001515"
|
|
35
40
|
},
|
|
36
41
|
"devDependencies": {
|
|
37
42
|
"@formkit/vue": "1.1.0"
|
package/dist/index.d.ts
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The first-party zod package/plugin for FormKit. Read the
|
|
3
|
-
* {@link https://formkit.com/essentials/zod |
|
|
4
|
-
* documentation} for usage instructions.
|
|
5
|
-
*
|
|
6
|
-
* @packageDocumentation
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { FormKitNode } from '@formkit/core';
|
|
10
|
-
import { FormKitPlugin } from '@formkit/core';
|
|
11
|
-
import { z } from 'zod';
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Creates a new Zod schema plugin for form validation.
|
|
15
|
-
*
|
|
16
|
-
* @param zodSchema - A Zod schema to validate the form against.
|
|
17
|
-
* @param submitCallback - A callback to run when the form is submitted and it passes validation.
|
|
18
|
-
*
|
|
19
|
-
* @returns A tuple of a {@link @formkit/core#FormKitPlugin | FormKitPlugin} and a submit handler.
|
|
20
|
-
*
|
|
21
|
-
* @public
|
|
22
|
-
*/
|
|
23
|
-
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];
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Extend FormKitNode with setZodErrors.
|
|
28
|
-
* @public
|
|
29
|
-
*/
|
|
30
|
-
declare module '@formkit/core' {
|
|
31
|
-
interface FormKitNodeExtensions {
|
|
32
|
-
setZodErrors(zodError: z.ZodError | undefined): FormKitNode
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|