@zod-to-form/cli 0.2.3 → 0.2.5

package/README.md

@@ -0,0 +1,234 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/pradeepmouli/zod-to-form/master/attached_assets/banner.svg" alt="zod-to-form banner" />
+</p>
+
+# @zod-to-form/cli
+
+Build-time code generator for Zod v4 form components.
+
+`@zod-to-form/cli` loads a Zod schema module, walks it via `@zod-to-form/core`, and generates a TSX form component. It can also watch files and generate a paired Next.js server action.
+
+## Installation
+
+```bash
+pnpm add -D @zod-to-form/cli zod
+```
+
+## Requirements
+
+- Node.js >= 20
+- Zod v4
+
+## CLI Usage
+
+```bash
+zod-to-form generate --config ./z2f.config.ts --schema ./src/schema.ts --export userSchema
+```
+
+```bash
+zod-to-form init
+```
+
+Alias: `z2f`.
+
+### Command
+
+`zod-to-form generate`
+
+Required options:
+
+- `--schema <path>`: path to schema module
+- `--export <name>`: named export containing the schema
+
+Optional options:
+
+- `--mode <mode>`: `submit | auto-save` (default `submit`)
+- `--config <path>`: path to generate config (`.json` or `.ts`) **required**
+- `--out <path>`: output directory or `.tsx` file path
+- `--name <componentName>`: generated component name override
+- `--ui <preset>`: `shadcn | unstyled` (default `shadcn`)
+- `--dry-run`: print generated code to stdout without writing files
+- `--server-action`: generate Next.js server action next to form output
+- `--watch`: watch schema file and regenerate on changes
+
+Generation selection/overwrite is now config-driven:
+
+- `overwrite`: overwrite existing output files
+- `types`: explicit list of schema exports to generate (used when `--export` is omitted)
+- `include`: wildcard include patterns for schema export names
+- `exclude`: wildcard exclude patterns for schema export names
+
+When generating with `--config`, component mapping and generation controls come from the same file.
+Default config discovery order (used by runtime helpers / existing workflows) is still:
+
+1. `z2f.config.ts`
+2. `component-config.ts`
+3. `z2f.config.js`
+4. `component-config.js`
+5. `z2f.config.json`
+6. `component-config.json`
+
+### Command
+
+`zod-to-form init`
+
+Creates `z2f.config.ts` using sensible defaults and introspection of shadcn `components.json` when available.
+
+Optional options:
+
+- `--out <path>`: output file or directory (default `z2f.config.ts`)
+- `--components <modulePath>`: module path assigned to `components` in generated config (overrides inference)
+- `--force`: overwrite existing config file
+- `--dry-run`: print generated config and skip file writes
+- `--verbose`: print detailed diagnostics for each step
+
+Output behavior:
+
+- default: concise progress + final summary
+- `--verbose`: adds detailed diagnostics (detected config source/aliases)
+
+## Examples
+
+Generate to default output (`<DerivedName>Form.tsx`):
+
+```bash
+zod-to-form generate --schema ./src/user.schema.ts --export userSchema
+```
+
+Generate to specific directory with custom component name:
+
+```bash
+zod-to-form generate \
+  --config ./z2f.config.ts \
+  --schema ./src/user.schema.ts \
+  --export userSchema \
+  --out ./src/forms \
+  --name UserProfile
+```
+
+Generate in auto-save mode with server action:
+
+```bash
+zod-to-form generate \
+  --config ./z2f.config.ts \
+  --schema ./src/user.schema.ts \
+  --export userSchema \
+  --mode auto-save \
+  --server-action
+```
+
+Dry run to inspect generated output:
+
+```bash
+zod-to-form generate --config ./z2f.config.ts --schema ./src/user.schema.ts --export userSchema --dry-run
+```
+
+Initialize config with verbose diagnostics:
+
+```bash
+zod-to-form init --verbose
+```
+
+Initialize config with explicit components module path:
+
+```bash
+zod-to-form init --components ../../src/components/zod-form-components
+```
+
+## Type-Safe Component Config
+
+The package exports helpers to define and validate component config.
+
+### `defineComponentConfig(...)`
+
+`defineComponentConfig` gives type-safe field path support (including array path normalization).
+
+```ts
+import { defineComponentConfig } from '@zod-to-form/cli';
+
+type Values = {
+  profile: { bio: string };
+  tags: Array<{ label: string }>;
+};
+
+type Components = {
+  TextInput: unknown;
+  TextareaInput: unknown;
+};
+
+export default defineComponentConfig<Components, Values>({
+  components: '@/components/form-components',
+  overwrite: true,
+  types: ['userSchema'],
+  include: ['*Schema'],
+  exclude: ['Internal*'],
+  formPrimitives: {
+    field: 'Field',
+    label: 'FieldLabel',
+    control: 'FieldControl'
+  },
+  fieldTypes: {
+    Input: { component: 'TextInput' },
+    textarea: { component: 'TextareaInput' }
+  },
+  fields: {
+    'profile.bio': { fieldType: 'textarea', props: { rows: 5 } },
+    'tags[].label': { fieldType: 'Input' }
+  }
+});
+```
+
+`formPrimitives` is optional. When provided, generated fields use those wrappers instead of raw `div`/`label` markup.
+
+Common examples:
+
+```ts
+formPrimitives: {
+  field: 'Field',
+  label: 'FieldLabel',
+  control: 'FieldControl'
+}
+```
+
+```ts
+formPrimitives: {
+  field: 'FormField',
+  label: 'FormLabel',
+  control: 'FormControl'
+}
+```
+
+### `validateComponentConfig(...)`
+
+Use at runtime when loading external config objects.
+
+```ts
+import { validateComponentConfig } from '@zod-to-form/cli';
+
+const parsed = validateComponentConfig(configObject, 'component-config');
+```
+
+## Programmatic API
+
+### `runGenerate(options)`
+
+Runs generation and returns:
+
+- `outputPath`
+- `code`
+- `wroteFile`
+- `actionPath` and `actionCode` (when `serverAction` enabled)
+
+### `createProgram()`
+
+Returns Commander program instance for embedding or custom CLIs.
+
+## Development
+
+From repository root:
+
+```bash
+pnpm --filter @zod-to-form/cli run build
+pnpm --filter @zod-to-form/cli run test
+pnpm --filter @zod-to-form/cli run type-check
+```

package/dist/codegen.d.ts

@@ -1,11 +1,19 @@
 import type { FormField } from '@zod-to-form/core';
+import type { ComponentEntry, FieldOverride, ZodToFormComponentConfig } from './index.js';
 export type CodegenConfig = {
     schemaPath: string;
     exportName: string;
     outputPath: string;
     componentName: string;
+    mode: 'submit' | 'auto-save';
+    componentConfig?: ZodToFormComponentConfig<Record<string, unknown>>;
     ui: 'shadcn' | 'unstyled';
     serverAction: boolean;
 };
+export declare function resolveFieldMapping<TComponents extends Record<string, unknown>>(fieldKey: string, fieldType: string | undefined, componentConfig: ZodToFormComponentConfig<TComponents> | undefined): {
+    entry?: ComponentEntry<TComponents>;
+    override?: FieldOverride;
+    source: 'fields' | 'fieldTypes' | 'none';
+};
 export declare function generateFormComponent(fields: FormField[], config: CodegenConfig): Promise<string>;
 //# sourceMappingURL=codegen.d.ts.map

package/dist/codegen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codegen.d.ts","sourceRoot":"","sources":["../src/codegen.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,EAAE,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAuGF,wBAAsB,qBAAqB,CACzC,MAAM,EAAE,SAAS,EAAE,EACnB,MAAM,EAAE,aAAa,GACpB,OAAO,CAAC,MAAM,CAAC,CAuCjB"}
+{"version":3,"file":"codegen.d.ts","sourceRoot":"","sources":["../src/codegen.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EAEb,wBAAwB,EACzB,MAAM,YAAY,CAAC;AAGpB,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC7B,eAAe,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACpE,EAAE,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAyJF,wBAAgB,mBAAmB,CAAC,WAAW,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7E,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,eAAe,EAAE,wBAAwB,CAAC,WAAW,CAAC,GAAG,SAAS,GACjE;IACD,KAAK,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE,QAAQ,GAAG,YAAY,GAAG,MAAM,CAAC;CAC1C,CAuBA;AAkOD,wBAAsB,qBAAqB,CACzC,MAAM,EAAE,SAAS,EAAE,EACnB,MAAM,EAAE,aAAa,GACpB,OAAO,CAAC,MAAM,CAAC,CA6FjB"}

package/dist/codegen.js

@@ -1,13 +1,146 @@
 import path from 'node:path';
 import { getFileHeader, renderField } from './templates.js';
+function renderLiteralProp(value) {
+    if (typeof value === 'string') {
+        return `"${value.replace(/"/g, '\\"')}"`;
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return `{${String(value)}}`;
+    }
+    return undefined;
+}
+function renderOverrideProps(props) {
+    if (!props) {
+        return '';
+    }
+    const attrs = Object.entries(props)
+        .map(([key, value]) => {
+        const rendered = renderLiteralProp(value);
+        return rendered ? ` ${key}=${rendered}` : '';
+    })
+        .join('');
+    return attrs;
+}
+function getMappedFieldComponent(field, componentConfig) {
+    const mapping = resolveFieldMapping(field.key, field.component, componentConfig);
+    if (!mapping.entry) {
+        return { source: mapping.source };
+    }
+    return {
+        componentName: mapping.entry.component,
+        override: mapping.override,
+        source: mapping.source
+    };
+}
+function collectMappedComponentNames(fields, componentConfig, out = new Set()) {
+    for (const field of fields) {
+        const mapping = getMappedFieldComponent(field, componentConfig);
+        if (mapping.componentName) {
+            out.add(mapping.componentName);
+        }
+        if (field.children?.length) {
+            collectMappedComponentNames(field.children, componentConfig, out);
+        }
+        if (field.arrayItem) {
+            collectMappedComponentNames([field.arrayItem], componentConfig, out);
+        }
+    }
+    return out;
+}
+function collectFormPrimitiveNames(primitives) {
+    const names = new Set();
+    if (!primitives) {
+        return names;
+    }
+    if (primitives.field) {
+        names.add(primitives.field);
+    }
+    if (primitives.label) {
+        names.add(primitives.label);
+    }
+    if (primitives.control) {
+        names.add(primitives.control);
+    }
+    return names;
+}
+function renderFieldContainer(field, content, indent, primitives) {
+    const styleAttr = field.gridColumn ? ` style={{ gridColumn: '${field.gridColumn}' }}` : '';
+    const fieldTag = primitives?.field;
+    const labelTag = primitives?.label;
+    const controlTag = primitives?.control;
+    if (!fieldTag && !labelTag && !controlTag) {
+        return [
+            `${indent}<div${styleAttr}>`,
+            `${indent}  <label htmlFor="${field.key}">${field.label}</label>`,
+            `${indent}  ${content}`,
+            `${indent}</div>`
+        ].join('\n');
+    }
+    const openField = fieldTag ? `<${fieldTag}${styleAttr}>` : `<div${styleAttr}>`;
+    const closeField = fieldTag ? `</${fieldTag}>` : `</div>`;
+    const openLabel = labelTag
+        ? `<${labelTag} htmlFor="${field.key}">`
+        : `<label htmlFor="${field.key}">`;
+    const closeLabel = labelTag ? `</${labelTag}>` : `</label>`;
+    if (!controlTag) {
+        return [
+            `${indent}${openField}`,
+            `${indent}  ${openLabel}${field.label}${closeLabel}`,
+            `${indent}  ${content}`,
+            `${indent}${closeField}`
+        ].join('\n');
+    }
+    return [
+        `${indent}${openField}`,
+        `${indent}  ${openLabel}${field.label}${closeLabel}`,
+        `${indent}  <${controlTag}>`,
+        `${indent}    ${content}`,
+        `${indent}  </${controlTag}>`,
+        `${indent}${closeField}`
+    ].join('\n');
+}
+/**
+ * Normalise a concrete field key (e.g. `attributes.0.typeCall.type` or
+ * `attributes.${index}.typeCall.type`) to the bracket notation used in
+ * the user-facing `fields` config (e.g. `attributes[].typeCall.type`).
+ */
+function normalizeFieldKey(key) {
+    // Replace `.0.` or `.${index}.` segments with `[].`
+    let result = key.replace(/\.(?:0|\$\{index\})\./g, '[].');
+    // Replace trailing `.0` or `.${index}`
+    result = result.replace(/\.(?:0|\$\{index\})$/, '[]');
+    return result;
+}
+export function resolveFieldMapping(fieldKey, fieldType, componentConfig) {
+    if (!componentConfig) {
+        return { source: 'none' };
+    }
+    // Try exact match first, then normalised bracket-notation match
+    const override = componentConfig.fields?.[fieldKey] ?? componentConfig.fields?.[normalizeFieldKey(fieldKey)];
+    if (override) {
+        return {
+            entry: override.fieldType ? componentConfig.fieldTypes[override.fieldType] : undefined,
+            override,
+            source: 'fields'
+        };
+    }
+    if (fieldType && componentConfig.fieldTypes[fieldType]) {
+        return {
+            entry: componentConfig.fieldTypes[fieldType],
+            source: 'fieldTypes'
+        };
+    }
+    return { source: 'none' };
+}
 function getSchemaImportPath(config) {
     const relative = path
         .relative(path.dirname(config.outputPath), config.schemaPath)
         .replace(/\\/g, '/');
-    if (relative.startsWith('.')) {
-        return relative;
-    }
-    return `./${relative}`;
+    const withDot = relative.startsWith('.') ? relative : `./${relative}`;
+    return withDot
+        .replace(/\.mts$/i, '.mjs')
+        .replace(/\.cts$/i, '.cjs')
+        .replace(/\.tsx?$/i, '.js');
 }
 /** Convert a field key to a safe camelCase variable prefix (e.g. 'address.street' → 'addressStreet') */
 function toVarName(key) {
@@ -17,7 +150,7 @@ function toVarName(key) {
 function collectArrayFields(fields) {
     const result = [];
     for (const field of fields) {
-        if (field.component === 'ArrayField') {
+        if (field.component === 'ArrayField' && !field.key.includes('.0.')) {
             result.push(field);
         }
         if (field.component === 'Fieldset' && field.children) {
@@ -26,9 +159,74 @@ function collectArrayFields(fields) {
     }
     return result;
 }
-function renderNestedBlock(field, indent) {
+function replaceArrayIndexToken(key, arrayKey) {
+    const prefix = `${arrayKey}.0`;
+    if (key === prefix) {
+        return `${arrayKey}.${'${index}'}`;
+    }
+    if (key.startsWith(`${prefix}.`)) {
+        return `${arrayKey}.${'${index}'}.${key.slice(prefix.length + 1)}`;
+    }
+    return key;
+}
+function cloneFieldWithArrayIndex(field, arrayKey) {
+    return {
+        ...field,
+        key: replaceArrayIndexToken(field.key, arrayKey),
+        children: field.children?.map((child) => cloneFieldWithArrayIndex(child, arrayKey)),
+        arrayItem: field.arrayItem ? cloneFieldWithArrayIndex(field.arrayItem, arrayKey) : undefined
+    };
+}
+function getObjectPropertyName(path) {
+    const lastSegment = path.split('.').at(-1) ?? path;
+    return JSON.stringify(lastSegment);
+}
+function getDefaultArrayItemExpression(field) {
+    if (!field) {
+        return `''`;
+    }
+    if (field.defaultValue !== undefined) {
+        return JSON.stringify(field.defaultValue);
+    }
+    if (field.options && field.options.length > 0) {
+        return JSON.stringify(field.options[0].value);
+    }
+    if (field.component === 'Checkbox' || field.component === 'Switch') {
+        return 'false';
+    }
+    if (field.component === 'Input') {
+        const inputType = typeof field.props['type'] === 'string' ? field.props['type'] : 'text';
+        if (inputType === 'number') {
+            return '0';
+        }
+        if (inputType === 'checkbox') {
+            return 'false';
+        }
+    }
+    if (field.component === 'Fieldset') {
+        const children = field.children ?? [];
+        if (children.length === 0) {
+            return '{}';
+        }
+        const entries = children
+            .map((child) => `${getObjectPropertyName(child.key)}: ${getDefaultArrayItemExpression(child)}`)
+            .join(', ');
+        return `{ ${entries} }`;
+    }
+    if (field.component === 'ArrayField') {
+        return '[]';
+    }
+    if (field.zodType === 'number' || field.zodType === 'bigint') {
+        return '0';
+    }
+    if (field.zodType === 'boolean') {
+        return 'false';
+    }
+    return `''`;
+}
+function renderNestedBlock(field, componentConfig, primitives, indent) {
     const children = (field.children ?? [])
-        .map((child) => renderFieldBlock(child, `${indent}  `))
+        .map((child) => renderFieldBlockWithConfig(child, componentConfig, primitives, `${indent}  `))
         .join('\n');
     return [
         `${indent}<div>`,
@@ -40,29 +238,44 @@ function renderNestedBlock(field, indent) {
         `${indent}</div>`
     ].join('\n');
 }
-function renderArrayBlock(field, indent) {
+function renderArrayBlock(field, componentConfig, primitives, indent) {
+    if (field.key.includes('${')) {
+        return [
+            `${indent}<div>`,
+            `${indent}  <label>${field.label}</label>`,
+            `${indent}  <p>Nested array editing is not auto-generated for dynamic paths. Use a custom renderer for ${field.key}.</p>`,
+            `${indent}</div>`
+        ].join('\n');
+    }
     const varName = toVarName(field.key);
     const itemField = field.arrayItem;
-    const itemJsx = itemField
-        ? renderField({ ...itemField, key: `\${${varName}Fields[index].id}` })
-        : `<input {...register(\`${field.key}.\${index}\`)} />`;
+    const indexedItemField = itemField ? cloneFieldWithArrayIndex(itemField, field.key) : undefined;
+    const mappedItem = indexedItemField
+        ? getMappedFieldComponent(indexedItemField, componentConfig)
+        : { source: 'none' };
+    const itemJsx = indexedItemField
+        ? mappedItem.componentName
+            ? `<${mappedItem.componentName} {...register(\`${indexedItemField.key}\`)}${renderOverrideProps(mappedItem.override?.props)} />`
+            : renderFieldBlockWithConfig(indexedItemField, componentConfig, primitives, `${indent}      `)
+        : `${indent}      <input {...register(\`${field.key}.\${index}\`)} />`;
     return [
         `${indent}<div>`,
         `${indent}  <label>${field.label}</label>`,
         `${indent}  {${varName}Fields.map((item, index) => (`,
         `${indent}    <div key={item.id}>`,
-        `${indent}      ${itemJsx.replace(new RegExp(`register\\('${field.key}\\.0'\\)`), `register(\`${field.key}.\${index}\`)`)}`,
+        itemJsx,
         `${indent}      <button type="button" onClick={() => remove${capitalize(varName)}(index)}>Remove</button>`,
         `${indent}    </div>`,
         `${indent}  ))}`,
-        `${indent}  <button type="button" onClick={() => append${capitalize(varName)}('')}>Add</button>`,
+        `${indent}  <button type="button" onClick={() => append${capitalize(varName)}(${getDefaultArrayItemExpression(itemField)})}>Add</button>`,
         `${indent}</div>`
     ].join('\n');
 }
 function capitalize(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
 }
-function renderFieldBlock(field, indent = '      ') {
+function renderFieldBlockWithConfig(field, componentConfig, primitives, indent = '      ') {
+    const mapping = getMappedFieldComponent(field, componentConfig);
     if (field.hasCustomRender) {
         const styleAttr = field.gridColumn ? ` style={{ gridColumn: '${field.gridColumn}' }}` : '';
         return [
@@ -72,51 +285,92 @@ function renderFieldBlock(field, indent = '      ') {
             `${indent}</div>`
         ].join('\n');
     }
+    // If a fields override maps this nested/array field to a custom component,
+    // render that component instead of expanding children.
+    if (mapping.source === 'fields' && mapping.componentName) {
+        const overrideProps = renderOverrideProps(mapping.override?.props);
+        const regExpr = field.key.includes('${') ? `register(\`${field.key}\`)` : `register('${field.key}')`;
+        const content = `<${mapping.componentName} id="${field.key}" {...${regExpr}}${overrideProps} />`;
+        return renderFieldContainer(field, content, indent, primitives);
+    }
     if (field.component === 'Fieldset') {
-        return renderNestedBlock(field, indent);
+        return renderNestedBlock(field, componentConfig, primitives, indent);
     }
     if (field.component === 'ArrayField') {
-        return renderArrayBlock(field, indent);
+        return renderArrayBlock(field, componentConfig, primitives, indent);
     }
-    const styleAttr = field.gridColumn ? ` style={{ gridColumn: '${field.gridColumn}' }}` : '';
-    return [
-        `${indent}<div${styleAttr}>`,
-        `${indent}  <label htmlFor="${field.key}">${field.label}</label>`,
-        `${indent}  ${renderField(field)}`,
-        `${indent}</div>`
-    ].join('\n');
+    if (mapping.componentName) {
+        const overrideProps = renderOverrideProps(mapping.override?.props);
+        const content = `<${mapping.componentName} id="${field.key}" {...${field.key.includes('${') ? `register(\`${field.key}\`)` : `register('${field.key}')`}}${overrideProps} />`;
+        return renderFieldContainer(field, content, indent, primitives);
+    }
+    return renderFieldContainer(field, renderField(field), indent, primitives);
 }
 export async function generateFormComponent(fields, config) {
     const schemaImportPath = getSchemaImportPath(config);
     const arrayFields = collectArrayFields(fields);
     const hasArrays = arrayFields.length > 0;
-    const header = getFileHeader(schemaImportPath, config.exportName, hasArrays);
-    const body = fields.map((field) => renderFieldBlock(field)).join('\n');
+    const formPrimitives = config.componentConfig?.formPrimitives;
+    const mappedComponents = collectMappedComponentNames(fields, config.componentConfig);
+    const primitiveComponents = collectFormPrimitiveNames(formPrimitives);
+    const importNames = new Set([...mappedComponents, ...primitiveComponents]);
+    const componentImportLine = config.componentConfig && importNames.size > 0
+        ? `import { ${Array.from(importNames).sort().join(', ')} } from '${config.componentConfig.components}';`
+        : undefined;
+    const header = getFileHeader(schemaImportPath, config.exportName, hasArrays, config.mode, componentImportLine);
+    const body = fields
+        .map((field) => renderFieldBlockWithConfig(field, config.componentConfig, formPrimitives, '      '))
+        .join('\n');
     // useFieldArray hook declarations
     const arrayHooks = arrayFields
         .map((f) => {
         const varName = toVarName(f.key);
-        return `  const { fields: ${varName}Fields, append: append${capitalize(varName)}, remove: remove${capitalize(varName)} } = useFieldArray({ control, name: '${f.key}' });`;
+        return `  const { fields: ${varName}Fields, append: append${capitalize(varName)}, remove: remove${capitalize(varName)} } = useFieldArray<FormData, '${f.key}'>({ control, name: '${f.key}' });`;
     })
         .join('\n');
-    const useFormDestructure = hasArrays
-        ? `{ register, handleSubmit, control }`
-        : `{ register, handleSubmit }`;
+    const useFormDestructure = config.mode === 'auto-save'
+        ? hasArrays
+            ? `{ register, watch, control }`
+            : `{ register, watch }`
+        : hasArrays
+            ? `{ register, handleSubmit, control }`
+            : `{ register, handleSubmit }`;
+    const propsLines = config.mode === 'auto-save'
+        ? [`  onValueChange?: (data: FormData) => void;`, `  onSubmit?: (data: FormData) => void;`]
+        : [`  onSubmit: (data: FormData) => void;`];
+    const autoSaveEffect = config.mode === 'auto-save'
+        ? [
+            `  useEffect(() => {`,
+            `    const subscription = watch((values) => {`,
+            `      props.onValueChange?.(values as FormData);`,
+            `    });`,
+            ``,
+            `    return () => subscription.unsubscribe();`,
+            `  }, [watch, props.onValueChange]);`,
+            ``
+        ]
+        : [];
+    const formOpen = config.mode === 'auto-save'
+        ? `    <form>`
+        : `    <form onSubmit={handleSubmit(props.onSubmit)}>`;
+    const formTail = config.mode === 'auto-save' ? [] : [`      <button type="submit">Submit</button>`];
     return [
         header,
         '',
         `export function ${config.componentName}(props: {`,
-        `  onSubmit: (data: FormData) => void;`,
+        ...propsLines,
         `}) {`,
         `  const ${useFormDestructure} = useForm<FormData>({`,
-        `    resolver: zodResolver(${config.exportName})`,
+        `    resolver: zodResolver(${config.exportName}),`,
+        ...(config.mode === 'auto-save' ? [`    mode: 'onChange'`] : []),
         `  });`,
         ...(hasArrays ? [arrayHooks] : []),
+        ...autoSaveEffect,
         '',
         `  return (`,
-        `    <form onSubmit={handleSubmit(props.onSubmit)}>`,
+        formOpen,
         body,
-        `      <button type="submit">Submit</button>`,
+        ...formTail,
         `    </form>`,
         `  );`,
         `}`