@zod-to-form/vite 0.2.1 → 0.2.3
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/README.md +26 -2
- package/dist/virtual-types.d.ts +59 -0
- package/package.json +9 -5
package/README.md
CHANGED
|
@@ -4,12 +4,24 @@ Vite plugin for [zod-to-form](https://github.com/pradeepmouli/zod-to-form). Tran
|
|
|
4
4
|
|
|
5
5
|
> **Status**: In active development. See [`specs/007-vite-codegen-plugin/`](../../specs/007-vite-codegen-plugin/) for the full specification, plan, and implementation tasks.
|
|
6
6
|
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
The plugin emits standard React + react-hook-form code, so the consumer
|
|
10
|
+
app needs the form runtime even when nothing else imports from
|
|
11
|
+
`@zod-to-form/react`:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
pnpm add -D @zod-to-form/vite
|
|
15
|
+
pnpm add zod react react-dom react-hook-form @hookform/resolvers
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
`@zod-to-form/vite` is the only build-time dep. The other packages are
|
|
19
|
+
runtime peers that the generated form components import.
|
|
20
|
+
|
|
7
21
|
## Quickstart
|
|
8
22
|
|
|
9
23
|
See the full walkthrough in [quickstart.md](../../specs/007-vite-codegen-plugin/quickstart.md).
|
|
10
24
|
|
|
11
|
-
Minimal usage:
|
|
12
|
-
|
|
13
25
|
```ts
|
|
14
26
|
// vite.config.ts
|
|
15
27
|
import { defineConfig } from 'vite';
|
|
@@ -17,10 +29,22 @@ import react from '@vitejs/plugin-react';
|
|
|
17
29
|
import z2fVite from '@zod-to-form/vite';
|
|
18
30
|
|
|
19
31
|
export default defineConfig({
|
|
32
|
+
// Plugin order matters: z2fVite BEFORE react() so the generated TSX
|
|
33
|
+
// flows through React's JSX transform normally.
|
|
20
34
|
plugins: [z2fVite(), react()]
|
|
21
35
|
});
|
|
22
36
|
```
|
|
23
37
|
|
|
38
|
+
Add the ambient declarations for `?z2f` imports to your `tsconfig.json`:
|
|
39
|
+
|
|
40
|
+
```jsonc
|
|
41
|
+
{
|
|
42
|
+
"compilerOptions": {
|
|
43
|
+
"types": ["@zod-to-form/vite/client"]
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
24
48
|
```tsx
|
|
25
49
|
// src/App.tsx
|
|
26
50
|
import SignupForm from './schemas/signup.ts?z2f';
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Ambient declarations for `?z2f`-suffixed imports.
|
|
3
|
+
*
|
|
4
|
+
* Users add `"types": ["@zod-to-form/vite/client"]` to their `tsconfig.json`
|
|
5
|
+
* and immediately get type resolution + autocomplete on `import { Form }
|
|
6
|
+
* from './schemas/foo.ts?z2f'` without authoring any `.d.ts` files
|
|
7
|
+
* themselves (FR-015, SC-005).
|
|
8
|
+
*
|
|
9
|
+
* Precision note (research R5): the `onSubmit` payload type is `unknown`
|
|
10
|
+
* in v1. Tighter inference via `typeof import('...')` requires TypeScript
|
|
11
|
+
* features not yet stable enough to rely on. Users who want a strongly
|
|
12
|
+
* typed payload can annotate the parameter at the call site, where the
|
|
13
|
+
* narrower type-checker context will prefer their annotation.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
declare module '*?z2f' {
|
|
17
|
+
import type { ComponentType, FormHTMLAttributes, ReactNode } from 'react';
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Props common to every generated form component.
|
|
21
|
+
*
|
|
22
|
+
* `onSubmit` receives the parsed schema output and is the primary surface
|
|
23
|
+
* developers interact with. `defaultValues` and `values` accept partial
|
|
24
|
+
* input data (matching React Hook Form's `useForm` semantics).
|
|
25
|
+
*/
|
|
26
|
+
export interface Z2FFormProps<TData = unknown> extends FormHTMLAttributes<HTMLFormElement> {
|
|
27
|
+
onSubmit: (data: TData) => void | Promise<void>;
|
|
28
|
+
defaultValues?: Partial<TData>;
|
|
29
|
+
values?: TData;
|
|
30
|
+
children?: ReactNode;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* The default export of every `?z2f` virtual module is a typed React
|
|
35
|
+
* component. Each generated form re-exports the same component under
|
|
36
|
+
* a named export matching the schema's component name (e.g. `SignupForm`).
|
|
37
|
+
*/
|
|
38
|
+
const form: ComponentType<Z2FFormProps>;
|
|
39
|
+
export default form;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Variant-specific re-declaration. The grammar admits `?z2f=<variant>`
|
|
44
|
+
* specifiers; we declare them with the same shape so `import { F } from
|
|
45
|
+
* './schemas/x.ts?z2f=edit'` resolves the same way.
|
|
46
|
+
*/
|
|
47
|
+
declare module '*?z2f=*' {
|
|
48
|
+
import type { ComponentType, FormHTMLAttributes, ReactNode } from 'react';
|
|
49
|
+
|
|
50
|
+
export interface Z2FFormProps<TData = unknown> extends FormHTMLAttributes<HTMLFormElement> {
|
|
51
|
+
onSubmit: (data: TData) => void | Promise<void>;
|
|
52
|
+
defaultValues?: Partial<TData>;
|
|
53
|
+
values?: TData;
|
|
54
|
+
children?: ReactNode;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
const form: ComponentType<Z2FFormProps>;
|
|
58
|
+
export default form;
|
|
59
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zod-to-form/vite",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Vite plugin for zod-to-form — transforms ?z2f imports into generated form components and optionally replaces <ZodForm> JSX call sites with generated components at build time",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://github.com/pradeepmouli/zod-to-form#readme",
|
|
@@ -38,7 +38,11 @@
|
|
|
38
38
|
"dist"
|
|
39
39
|
],
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"
|
|
41
|
+
"@hookform/resolvers": "^5.0.0",
|
|
42
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
43
|
+
"react-hook-form": "^7.0.0",
|
|
44
|
+
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
|
|
45
|
+
"zod": "^4.0.0"
|
|
42
46
|
},
|
|
43
47
|
"dependencies": {
|
|
44
48
|
"@babel/parser": "^7.29.2",
|
|
@@ -46,8 +50,8 @@
|
|
|
46
50
|
"@babel/types": "^7.29.0",
|
|
47
51
|
"magic-string": "^0.30.21",
|
|
48
52
|
"pathe": "^2.0.3",
|
|
49
|
-
"@zod-to-form/codegen": "0.7.
|
|
50
|
-
"@zod-to-form/core": "0.
|
|
53
|
+
"@zod-to-form/codegen": "0.7.2",
|
|
54
|
+
"@zod-to-form/core": "0.8.0"
|
|
51
55
|
},
|
|
52
56
|
"devDependencies": {
|
|
53
57
|
"@types/babel__traverse": "^7.28.0",
|
|
@@ -59,7 +63,7 @@
|
|
|
59
63
|
},
|
|
60
64
|
"author": "Pradeep Mouli <pmouli@mac.com> (https://github.com/pradeepmouli)",
|
|
61
65
|
"scripts": {
|
|
62
|
-
"build": "tsgo -p tsconfig.build.json",
|
|
66
|
+
"build": "tsgo -p tsconfig.build.json && cp src/virtual-types.d.ts dist/virtual-types.d.ts",
|
|
63
67
|
"clean": "rm -rf dist tsconfig.build.tsbuildinfo tsconfig.tsbuildinfo",
|
|
64
68
|
"dev": "tsgo -p tsconfig.build.json --watch",
|
|
65
69
|
"test": "vitest run",
|