form
form copied to clipboard
[WIP] Array and provider refactor
This PR aims to fix issues with array usage typings and removes the Provider component.
With this change, an array-based form in React might look like:
import * as React from "react";
import { createRoot } from "react-dom/client";
import { useForm } from "@tanstack/react-form";
export default function App() {
const form = useForm({
defaultValues: {
people: [] as Array<{ age: number; name: string }>,
},
onSubmit: async ({ value }) => {
// Do something with form data
alert(JSON.stringify(value, null, 2));
},
});
return (
<div>
<h1>Simple Form Example</h1>
<form
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
void form.handleSubmit();
}}
>
<form.Field name="people">
{(field) => {
return (
<div>
{field.state.value.map((_, i) => {
return (
<form.Field name={`people[${i}].name`}>
{(subField) => {
return (
<div>
<label>
<div>Name for person {i}</div>
<input
value={subField.state.value}
onChange={(e) =>
subField.handleChange(e.target.value)
}
/>
</label>
</div>
);
}}
</form.Field>
);
})}
<button
onClick={() => field.pushValue({ name: "", age: 0 })}
type="button"
>
Add person
</button>
</div>
);
}}
</form.Field>
<form.Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit}>
{isSubmitting ? "..." : "Submit"}
</button>
)}
/>
</form>
</div>
);
}
const rootElement = document.getElementById("root")!;
createRoot(rootElement).render(<App />);
TODO List
- [x] Fix tests for core path helpers
- [x] Fix tests for array usage in Core
- [x] Fix types in React
- [x] Fix types in Solid
- [ ] Fix types in Vue
- [ ] Write array tests for React
- [ ] Write array tests for Solid
- [ ] Write array tests for Vue
- [ ] Write array example for React
- [ ] Update docs example as well
- [ ] Write array example for Solid
- [ ] Write array example for Vue
- [x] Remove provider for React
- [ ] Remove from docs
- [ ] Remove from examples
- [x] Remove provider for Solid
- [ ] Remove from docs
- [ ] Remove from examples
- [ ] Remove provider for Vue
- [ ] Remove from docs
- [ ] Remove from examples
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
☁️ Nx Cloud Report
CI is running/has finished running commands for commit 1e1e48bf2330479492ac470c1c3c91056f49619c. 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 1 target
Sent with 💌 from NxCloud.
Codecov Report
Attention: Patch coverage is 85.71429% with 3 lines in your changes are missing coverage. Please review.
Project coverage is 91.18%. Comparing base (
0003063) to head (c740617).
| Files | Patch % | Lines |
|---|---|---|
| packages/solid-form/src/createForm.tsx | 60.00% | 2 Missing :warning: |
| packages/vue-form/src/useField.tsx | 0.00% | 1 Missing :warning: |
:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.
Additional details and impacted files
@@ Coverage Diff @@
## main #588 +/- ##
==========================================
+ Coverage 90.73% 91.18% +0.45%
==========================================
Files 29 26 -3
Lines 766 726 -40
Branches 179 172 -7
==========================================
- Hits 695 662 -33
+ Misses 66 59 -7
Partials 5 5
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.