-
-
Notifications
You must be signed in to change notification settings - Fork 356
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix!: Field re-renders properly when using React Compiler
* chore: add compiler demo # Conflicts: # pnpm-lock.yaml * chore: add React compiler ESLint rules to React package * chore!: remove useField and useStore APIs returned from useForm * fix: Field rerenders properly when using React Compiler * chore: fix issues with deprecated APIs in tests * chore: fix build and type issues * docs: remove reference to form.useField and form.useStore * ci: apply automated fixes and generate docs * chore: fix ci --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
- Loading branch information
1 parent
3567b07
commit 1a88b6f
Showing
51 changed files
with
594 additions
and
240 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // @ts-check | ||
| const reactCompiler = require('eslint-plugin-react-compiler') | ||
|
|
||
| /** @type {import('eslint').Linter.Config} */ | ||
| const config = { | ||
| plugins: { | ||
| 'react-compiler': reactCompiler, | ||
| }, | ||
| extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'], | ||
| rules: { | ||
| 'react/no-children-prop': 'off', | ||
| 'react-compiler/react-compiler': 'error', | ||
| }, | ||
| } | ||
|
|
||
| module.exports = config |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
|
||
| # dependencies | ||
| /node_modules | ||
| /.pnp | ||
| .pnp.js | ||
|
|
||
| # testing | ||
| /coverage | ||
|
|
||
| # production | ||
| /build | ||
|
|
||
| pnpm-lock.yaml | ||
| yarn.lock | ||
| package-lock.json | ||
|
|
||
| # misc | ||
| .DS_Store | ||
| .env.local | ||
| .env.development.local | ||
| .env.test.local | ||
| .env.production.local | ||
|
|
||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| # Example | ||
|
|
||
| To run this example: | ||
|
|
||
| - `npm install` | ||
| - `npm run dev` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/emblem-light.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <meta name="theme-color" content="#000000" /> | ||
|
|
||
| <title>TanStack Form React Simple Example App</title> | ||
| </head> | ||
| <body> | ||
| <noscript>You need to enable JavaScript to run this app.</noscript> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/index.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| { | ||
| "name": "@tanstack/form-example-react-compiler", | ||
| "private": true, | ||
| "type": "module", | ||
| "scripts": { | ||
| "dev": "vite --port=3001", | ||
| "build": "vite build", | ||
| "preview": "vite preview", | ||
| "_test:types": "tsc" | ||
| }, | ||
| "dependencies": { | ||
| "@tanstack/react-form": "^0.38.0", | ||
| "react": "^19.0.0-rc.1", | ||
| "react-dom": "^19.0.0-rc.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/react": "npm:types-react@rc", | ||
| "@types/react-dom": "npm:types-react-dom@rc", | ||
| "@vitejs/plugin-react": "^4.3.3", | ||
| "babel-plugin-react-compiler": "^19.0.0-beta-0dec889-20241115", | ||
| "eslint-plugin-react-compiler": "^19.0.0-beta-0dec889-20241115", | ||
| "vite": "^5.4.11" | ||
| }, | ||
| "overrides": { | ||
| "@types/react": "npm:types-react@rc", | ||
| "@types/react-dom": "npm:types-react-dom@rc" | ||
| }, | ||
| "browserslist": { | ||
| "production": [ | ||
| ">0.2%", | ||
| "not dead", | ||
| "not op_mini all" | ||
| ], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import { useForm } from '@tanstack/react-form' | ||
| import * as React from 'react' | ||
| import { createRoot } from 'react-dom/client' | ||
| import type { FieldApi } from '@tanstack/react-form' | ||
|
|
||
| function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) { | ||
| return ( | ||
| <> | ||
| {field.state.meta.isTouched && field.state.meta.errors.length ? ( | ||
| <em>{field.state.meta.errors.join(',')}</em> | ||
| ) : null} | ||
| {field.state.meta.isValidating ? 'Validating...' : null} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default function App() { | ||
| const form = useForm({ | ||
| defaultValues: { | ||
| firstName: '', | ||
| lastName: '', | ||
| }, | ||
| onSubmit: async ({ value }) => { | ||
| // Do something with form data | ||
| console.log(value) | ||
| }, | ||
| }) | ||
|
|
||
| return ( | ||
| <div> | ||
| <h1>Simple Form Example</h1> | ||
| <form | ||
| onSubmit={(e) => { | ||
| e.preventDefault() | ||
| e.stopPropagation() | ||
| form.handleSubmit() | ||
| }} | ||
| > | ||
| <div> | ||
| {/* A type-safe field component*/} | ||
| <form.Field | ||
| name="firstName" | ||
| validators={{ | ||
| onChange: ({ value }) => | ||
| !value | ||
| ? 'A first name is required' | ||
| : value.length < 3 | ||
| ? 'First name must be at least 3 characters' | ||
| : undefined, | ||
| onChangeAsyncDebounceMs: 500, | ||
| onChangeAsync: async ({ value }) => { | ||
| await new Promise((resolve) => setTimeout(resolve, 1000)) | ||
| return ( | ||
| value.includes('error') && 'No "error" allowed in first name' | ||
| ) | ||
| }, | ||
| }} | ||
| children={(field) => { | ||
| // Avoid hasty abstractions. Render props are great! | ||
| return ( | ||
| <> | ||
| <label htmlFor={field.name}>First Name:</label> | ||
| <input | ||
| id={field.name} | ||
| name={field.name} | ||
| value={field.state.value} | ||
| onBlur={field.handleBlur} | ||
| onChange={(e) => field.handleChange(e.target.value)} | ||
| /> | ||
| <FieldInfo field={field} /> | ||
| </> | ||
| ) | ||
| }} | ||
| /> | ||
| </div> | ||
| <div> | ||
| <form.Field | ||
| name="lastName" | ||
| children={(field) => ( | ||
| <> | ||
| <label htmlFor={field.name}>Last Name:</label> | ||
| <input | ||
| id={field.name} | ||
| name={field.name} | ||
| value={field.state.value} | ||
| onBlur={field.handleBlur} | ||
| onChange={(e) => field.handleChange(e.target.value)} | ||
| /> | ||
| <FieldInfo field={field} /> | ||
| </> | ||
| )} | ||
| /> | ||
| </div> | ||
| <form.Subscribe | ||
| selector={(state) => [state.canSubmit, state.isSubmitting]} | ||
| children={([canSubmit, isSubmitting]) => ( | ||
| <> | ||
| <button type="submit" disabled={!canSubmit}> | ||
| {isSubmitting ? '...' : 'Submit'} | ||
| </button> | ||
| <button type="reset" onClick={() => form.reset()}> | ||
| Reset | ||
| </button> | ||
| </> | ||
| )} | ||
| /> | ||
| </form> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const rootElement = document.getElementById('root')! | ||
|
|
||
| createRoot(rootElement).render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode>, | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "ESNext", | ||
| "lib": ["DOM", "DOM.Iterable", "ESNext"], | ||
| "module": "ESNext", | ||
| "skipLibCheck": true, | ||
|
|
||
| /* Bundler mode */ | ||
| "moduleResolution": "Bundler", | ||
| "allowImportingTsExtensions": true, | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "noEmit": true, | ||
| "jsx": "react-jsx", | ||
|
|
||
| /* Linting */ | ||
| "strict": true, | ||
| "noUnusedLocals": true, | ||
| "noUnusedParameters": true, | ||
| "noFallthroughCasesInSwitch": true | ||
| }, | ||
| "include": ["src"] | ||
| } |
Oops, something went wrong.