// Generated by scripts/generate-manifest.mjs. Do not edit by hand. import type { AddOnCompiled } from '../../../../../types.js' type TemplateRecord = Record type TemplateAddOn = TemplateRecord & { integrations?: Array routes?: Array } type TemplateRenderContext = { [key: string]: any packageManager: any projectName: any typescript: any tailwind: any blank: any js: any jsx: any fileRouter: any codeRouter: any routerOnly: any includeExamples: any addOnEnabled: Record addOnOption: Record addOns: Array integrations: Array routes: Array getPackageManagerAddScript: (...args: Array) => string getPackageManagerRunScript: (...args: Array) => string getPackageManagerExecuteScript: (...args: Array) => string relativePath: (...args: Array) => string integrationImportContent: (...args: Array) => string integrationImportCode: (...args: Array) => string | undefined renderTemplate: (content: string) => string ignoreFile: () => never } type TemplateRenderer = (context: TemplateRenderContext) => string | undefined function __escapeXML(value: unknown) { if (value === undefined || value === null) { return '' } return String(value).replace(/[&<>'"]/g, (character) => { switch (character) { case '&': return '&' case '<': return '<' case '>': return '>' case '"': return '"' case "'": return ''' default: return character } }) } export function getManifestTemplateKey(template: string) { let hash = 0x811c9dc5 for (let i = 0; i < template.length; i++) { hash ^= template.charCodeAt(i) hash = Math.imul(hash, 0x01000193) >>> 0 } return `${hash.toString(16).padStart(8, '0')}:${template.length}` } function __render_104d2185_11220(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } __append("import { ") if (fileRouter) { __append("createFileRoute") } else { __append("createRoute") } __append(" } from '@tanstack/solid-router'\nimport { createForm } from '@tanstack/solid-form'\n\nimport type { JSX } from 'solid-js/jsx-runtime'\nimport type { ValidationError } from '@tanstack/solid-form'\n\n") if (codeRouter) { __append("\nimport type { RootRoute } from '@tanstack/solid-router'\n") } else { __append("\nexport const Route = createFileRoute('/demo/form')({\n component: FormExample,\n})\n") } __append("\nfunction FieldWrapper(props: {\n children: JSX.Element\n errors: Array\n label: string\n}) {\n return (\n
\n \n {props.children}\n {props.errors.length ? (\n
{props.errors.join(', ')}
\n ) : null}\n
\n )\n}\n\nfunction FormExample() {\n const form = createForm(() => ({\n defaultValues: {\n fullName: '',\n email: '',\n address: {\n street: '',\n city: '',\n state: '',\n zipCode: '',\n country: '',\n },\n phone: '',\n },\n onSubmit: ({ value }) => {\n console.log(value)\n // Show success message\n alert('Form submitted successfully!')\n },\n }))\n\n return (\n
\n
\n
\n

TanStack Form

\n

Address Form

\n

\n Nested fields, field-level validation, and a select input.\n

\n
\n {\n e.preventDefault()\n e.stopPropagation()\n form.handleSubmit()\n }}\n class=\"space-y-6\"\n >\n {/* Full Name Field */}\n
\n {\n if (value.trim().length === 0) {\n return 'Full name is required'\n }\n if (value.length < 3) {\n return 'Name must be at least 3 characters'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n
\n\n {/* Email Field */}\n
\n {\n if (!value || value.trim().length === 0) {\n return 'Email is required'\n }\n if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i.test(value)) {\n return 'Invalid email address'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n
\n\n {/* Street Address */}\n
\n {\n if (!value || value.trim().length === 0) {\n return 'Street address is required'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n
\n\n {/* City, State, Zip in a row */}\n
\n {/* City */}\n {\n if (!value || value.trim().length === 0) {\n return 'City is required'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n\n {/* State */}\n {\n if (!value || value.trim().length === 0) {\n return 'State is required'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n\n {/* Zip Code */}\n {\n if (!value || value.trim().length === 0) {\n return 'Zip code is required'\n }\n if (!/^\\d{5}(-\\d{4})?$/.test(value)) {\n return 'Invalid zip code format'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n
\n\n {/* Country */}\n
\n {\n if (!value || value.trim().length === 0) {\n return 'Country is required'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-select\"\n >\n \n \n \n \n \n \n \n \n \n \n )}\n />\n
\n\n {/* Phone Number */}\n
\n {\n if (!value || value.trim().length === 0) {\n return 'Phone number is required'\n }\n if (\n !/^(\\+\\d{1,3})?\\s?\\(?\\d{3}\\)?[\\s.-]?\\d{3}[\\s.-]?\\d{4}$/.test(\n value,\n )\n ) {\n return 'Invalid phone number format'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n placeholder=\"(123) 456-7890\"\n />\n \n )}\n />\n
\n\n {/* Submit Button */}\n
\n \n {form.state.isSubmitting ? 'Submitting...' : 'Submit'}\n \n
\n \n
\n
\n )\n}\n\n") if (codeRouter) { __append("\nexport default (parentRoute: RootRoute) => createRoute({\n path: '/demo/form',\n component: FormExample,\n getParentRoute: () => parentRoute,\n})\n") } __append("\n") return __output } const templateRenderers: Record = { "104d2185:11220": __render_104d2185_11220, } export function hasManifestTemplate(template: string) { return getManifestTemplateKey(template) in templateRenderers } export function renderManifestTemplate( template: string, context: TemplateRenderContext, ) { const key = getManifestTemplateKey(template) const renderer = templateRenderers[key] if (!renderer) { throw new Error(`Template ${key} was not precompiled into the manifest`) } return renderer(context) ?? '' } export const addOn = { "name": "Form", "description": "TanStack Form", "phase": "add-on", "link": "https://tanstack.com/form/latest", "modes": [ "file-router", "code-router" ], "type": "add-on", "category": "tanstack", "color": "#EAB308", "routes": [ { "url": "/demo/form", "name": "Form", "path": "src/routes/demo.form.tsx", "jsName": "FormDemo" } ], "id": "form", "version": "0.0.0", "packageAdditions": { "dependencies": { "@tanstack/solid-form": "latest" } }, "readmeIsEjs": false, "files": { "src/routes/demo.form.tsx.ejs": "import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/solid-router'\nimport { createForm } from '@tanstack/solid-form'\n\nimport type { JSX } from 'solid-js/jsx-runtime'\nimport type { ValidationError } from '@tanstack/solid-form'\n\n<% if (codeRouter) { %>\nimport type { RootRoute } from '@tanstack/solid-router'\n<% } else { %>\nexport const Route = createFileRoute('/demo/form')({\n component: FormExample,\n})\n<% } %>\nfunction FieldWrapper(props: {\n children: JSX.Element\n errors: Array\n label: string\n}) {\n return (\n
\n \n {props.children}\n {props.errors.length ? (\n
{props.errors.join(', ')}
\n ) : null}\n
\n )\n}\n\nfunction FormExample() {\n const form = createForm(() => ({\n defaultValues: {\n fullName: '',\n email: '',\n address: {\n street: '',\n city: '',\n state: '',\n zipCode: '',\n country: '',\n },\n phone: '',\n },\n onSubmit: ({ value }) => {\n console.log(value)\n // Show success message\n alert('Form submitted successfully!')\n },\n }))\n\n return (\n
\n
\n
\n

TanStack Form

\n

Address Form

\n

\n Nested fields, field-level validation, and a select input.\n

\n
\n {\n e.preventDefault()\n e.stopPropagation()\n form.handleSubmit()\n }}\n class=\"space-y-6\"\n >\n {/* Full Name Field */}\n
\n {\n if (value.trim().length === 0) {\n return 'Full name is required'\n }\n if (value.length < 3) {\n return 'Name must be at least 3 characters'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n
\n\n {/* Email Field */}\n
\n {\n if (!value || value.trim().length === 0) {\n return 'Email is required'\n }\n if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i.test(value)) {\n return 'Invalid email address'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n
\n\n {/* Street Address */}\n
\n {\n if (!value || value.trim().length === 0) {\n return 'Street address is required'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n
\n\n {/* City, State, Zip in a row */}\n
\n {/* City */}\n {\n if (!value || value.trim().length === 0) {\n return 'City is required'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n\n {/* State */}\n {\n if (!value || value.trim().length === 0) {\n return 'State is required'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n\n {/* Zip Code */}\n {\n if (!value || value.trim().length === 0) {\n return 'Zip code is required'\n }\n if (!/^\\d{5}(-\\d{4})?$/.test(value)) {\n return 'Invalid zip code format'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n />\n \n )}\n />\n
\n\n {/* Country */}\n
\n {\n if (!value || value.trim().length === 0) {\n return 'Country is required'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-select\"\n >\n \n \n \n \n \n \n \n \n \n \n )}\n />\n
\n\n {/* Phone Number */}\n
\n {\n if (!value || value.trim().length === 0) {\n return 'Phone number is required'\n }\n if (\n !/^(\\+\\d{1,3})?\\s?\\(?\\d{3}\\)?[\\s.-]?\\d{3}[\\s.-]?\\d{4}$/.test(\n value,\n )\n ) {\n return 'Invalid phone number format'\n }\n return undefined\n },\n }}\n children={(field) => (\n \n field().handleChange(e.target.value)}\n class=\"demo-input\"\n placeholder=\"(123) 456-7890\"\n />\n \n )}\n />\n
\n\n {/* Submit Button */}\n
\n \n {form.state.isSubmitting ? 'Submitting...' : 'Submit'}\n \n
\n \n
\n
\n )\n}\n\n<% if (codeRouter) { %>\nexport default (parentRoute: RootRoute) => createRoute({\n path: '/demo/form',\n component: FormExample,\n getParentRoute: () => parentRoute,\n})\n<% } %>\n" }, "deletedFiles": [], "smallLogo": "" } satisfies AddOnCompiled