Expose SolidFormApi type

[oscartbeaumont]

I'm currently building a InputField abstraction wrapping a form and it would be useful to be able to directly name the type.

function InputField(opts: { form: SolidFormApi<T> } ) {
   return <opts.form.Field ... />
}

For now i'm doing the following but it's kinda annoying:

type FormResult<
	TData,
	T extends Validator<TData, unknown> | undefined = undefined,
> = ReturnType<typeof createForm<TData, T>>;

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1a5e486. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

commit: 1a5e486

@tanstack/angular-form

pnpm add https://pkg.pr.new/@tanstack/angular-form@892

@tanstack/form-core

pnpm add https://pkg.pr.new/@tanstack/form-core@892

@tanstack/lit-form

pnpm add https://pkg.pr.new/@tanstack/lit-form@892

@tanstack/react-form

pnpm add https://pkg.pr.new/@tanstack/react-form@892

@tanstack/solid-form

pnpm add https://pkg.pr.new/@tanstack/solid-form@892

@tanstack/valibot-form-adapter

pnpm add https://pkg.pr.new/@tanstack/valibot-form-adapter@892

@tanstack/vue-form

pnpm add https://pkg.pr.new/@tanstack/vue-form@892

@tanstack/yup-form-adapter

pnpm add https://pkg.pr.new/@tanstack/yup-form-adapter@892

@tanstack/zod-form-adapter

pnpm add https://pkg.pr.new/@tanstack/zod-form-adapter@892

Open in Stackblitz

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-valibot
• @tanstack/form-example-angular-yup
• @tanstack/form-example-angular-zod
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-react-valibot
• @tanstack/form-example-react-yup
• @tanstack/form-example-react-zod
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-valibot
• @tanstack/form-example-solid-yup
• @tanstack/form-example-solid-zod
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-valibot
• @tanstack/form-example-vue-yup
• @tanstack/form-example-vue-zod

[Balastrong]

Thanks for the PR! Can you also export the type from packages/solid-form/src/index.tsx?

---

On a separate note, we're drafting a recommended approach for building custom/wrapper components in React, but I'd say the needs and challenges are the same for all frameworks.

Since you're also doing something similar, if you have feedback please share them in #825
An example component is on that PR: https://github.com/TanStack/form/pull/825/files#diff-b2e0803ded7363bf3432f160f7c7f6e9bf4f982ad13b08ecb4789c228774f956R22

[oscartbeaumont]

Whoops, can't believe I forgot it in the index.ts 😳

Great to see your looking into this area. The example you linked looks one to one with what i've got (minus the React/Solid differences).

It's worth mentioning another motivation for this PR is when you run into a Typescript error like:

Return type of exported function has or is using name 'SolidFormApi' from external module "/Users/oscar/Desktop/mattrax/node_modules/.pnpm/@[email protected][email protected]/node_modules/@tanstack/solid-form/dist/esm/createForm" but cannot be named.

I am ran into this error when returning a createForm instance from a function defined in my UI package.

Being able to refer to SolidFormApi means I can hardcode the funtions return type and it solves the problem.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.66%. Comparing base (5473bb8) to head (1a5e486).
Report is 89 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #892      +/-   ##
==========================================
+ Coverage   91.55%   91.66%   +0.11%     
==========================================
  Files          21        2      -19     
  Lines         900       36     -864     
  Branches      206        1     -205     
==========================================
- Hits          824       33     -791     
+ Misses         71        3      -68     
+ Partials        5        0       -5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Balastrong]

Thank you!