-
-
Notifications
You must be signed in to change notification settings - Fork 445
feat(svelte-form): Add Svelte adapter #1247
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
b7f42f6
wip: add svelte-form
43081j 4e53bdb
wip: add vite and fix some types
43081j a105341
fix: correct language attribute
43081j 3bd7f33
chore: shuffle things around to use svelte files
43081j 5b87ca5
fix: correct a whole bunch of bad refs/types
43081j 43aa84c
fix: return FieldApi directly
43081j 2b52081
Build with @sveltejs/package
lachlancollins 2f0f6a1
ci: apply automated fixes and generate docs
autofix-ci[bot] 85d2d8b
Merge branch 'main' into svelte
dummdidumm c2657de
implement svelte version
dummdidumm c4e8350
add svelte examples
dummdidumm 69a6eb6
ci: apply automated fixes and generate docs
autofix-ci[bot] 032e1f7
use svelte-check for type checking
dummdidumm 08daf3b
remove accidental leftover
dummdidumm 34dadc4
add svelte to keywords
dummdidumm 151c2b2
clarify, fix
dummdidumm e0cebb0
Merge branch 'main' into svelte-updated
dummdidumm 55e5c82
fix
dummdidumm f01a213
resolve todo, tweak code, add test
dummdidumm 562225b
Merge branch 'main' into svelte-updated
dummdidumm 6f03750
Update packages/svelte-form/tests/simple.test.ts
dummdidumm 9b7c578
Merge branch 'main' into svelte-updated
lachlancollins f561f84
Update package config
lachlancollins File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
This file contains hidden or 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 hidden or 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,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + Svelte + TS</title> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script type="module" src="/src/main.ts"></script> | ||
</body> | ||
</html> |
This file contains hidden or 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,21 @@ | ||
{ | ||
"name": "@tanstack/form-example-svelte-array", | ||
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "vite build", | ||
"preview": "vite preview" | ||
}, | ||
"dependencies": { | ||
"@tanstack/svelte-form": "^1.0.0" | ||
}, | ||
"devDependencies": { | ||
"@sveltejs/vite-plugin-svelte": "^5.0.3", | ||
"@tsconfig/svelte": "^5.0.4", | ||
"svelte": "^5.27.2", | ||
"typescript": "5.8.2", | ||
"vite": "^6.2.6" | ||
} | ||
} |
This file contains hidden or 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,55 @@ | ||
<script lang="ts"> | ||
import { createForm } from '@tanstack/svelte-form' | ||
|
||
const form = createForm(() => ({ | ||
defaultValues: { | ||
people: [] as Array<{ age: number; name: string }>, | ||
}, | ||
onSubmit: ({ value }) => alert(JSON.stringify(value)), | ||
})) | ||
</script> | ||
|
||
<form | ||
id="form" | ||
onsubmit={(e) => { | ||
e.preventDefault() | ||
e.stopPropagation() | ||
form.handleSubmit() | ||
}} | ||
> | ||
<h1>TanStack Form - Svelte Demo</h1> | ||
|
||
<form.Field name="people"> | ||
{#snippet children(field)} | ||
<div> | ||
{#each field.state.value as person, i} | ||
<form.Field name={`people[${i}].name`}> | ||
{#snippet children(subField)} | ||
<div> | ||
<label> | ||
<div>Name for person {i}</div> | ||
<input | ||
value={person.name} | ||
oninput={(e: Event) => { | ||
const target = e.target as HTMLInputElement | ||
subField.handleChange(target.value) | ||
}} | ||
/> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. it may be me missing something, but html doesn't use self-closing tags anymore (they're ignored). stuff like this should be a void tag ( |
||
</label> | ||
</div> | ||
{/snippet} | ||
</form.Field> | ||
{/each} | ||
|
||
<button | ||
onclick={() => field.pushValue({ name: '', age: 0 })} | ||
type="button" | ||
> | ||
Add person | ||
</button> | ||
</div> | ||
{/snippet} | ||
</form.Field> | ||
|
||
<button type="submit"> Submit </button> | ||
</form> |
This file contains hidden or 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,8 @@ | ||
import { mount } from 'svelte' | ||
import App from './App.svelte' | ||
|
||
const app = mount(App, { | ||
target: document.getElementById('app')!, | ||
}) | ||
|
||
export default app |
This file contains hidden or 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,2 @@ | ||
/// <reference types="svelte" /> | ||
/// <reference types="vite/client" /> |
This file contains hidden or 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,7 @@ | ||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' | ||
|
||
export default { | ||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess | ||
// for more information about preprocessors | ||
preprocess: vitePreprocess(), | ||
} |
This file contains hidden or 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,20 @@ | ||
{ | ||
"extends": "@tsconfig/svelte/tsconfig.json", | ||
"compilerOptions": { | ||
"target": "ESNext", | ||
"useDefineForClassFields": true, | ||
"module": "ESNext", | ||
"resolveJsonModule": true, | ||
/** | ||
* Typecheck JS in `.svelte` and `.js` files by default. | ||
* Disable checkJs if you'd like to use dynamic types in JS. | ||
* Note that setting allowJs false does not prevent the use | ||
* of JS in `.svelte` files. | ||
*/ | ||
"allowJs": true, | ||
"checkJs": true, | ||
"isolatedModules": true, | ||
"moduleDetection": "force" | ||
}, | ||
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] | ||
} |
This file contains hidden or 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,7 @@ | ||
import { defineConfig } from 'vite' | ||
import { svelte } from '@sveltejs/vite-plugin-svelte' | ||
|
||
// https://vite.dev/config/ | ||
export default defineConfig({ | ||
plugins: [svelte()], | ||
}) |
This file contains hidden or 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,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
This file contains hidden or 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 hidden or 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,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + Svelte + TS</title> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script type="module" src="/src/main.ts"></script> | ||
</body> | ||
</html> |
This file contains hidden or 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,21 @@ | ||
{ | ||
"name": "@tanstack/form-example-svelte-simple", | ||
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "vite build", | ||
"preview": "vite preview" | ||
}, | ||
"dependencies": { | ||
"@tanstack/svelte-form": "^1.0.0" | ||
}, | ||
"devDependencies": { | ||
"@sveltejs/vite-plugin-svelte": "^5.0.3", | ||
"@tsconfig/svelte": "^5.0.4", | ||
"svelte": "^5.27.2", | ||
"typescript": "5.8.2", | ||
"vite": "^6.2.6" | ||
} | ||
} |
This file contains hidden or 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,148 @@ | ||
<script lang="ts"> | ||
import { createForm } from '@tanstack/svelte-form' | ||
import FieldInfo from './FieldInfo.svelte' | ||
|
||
const form = createForm(() => ({ | ||
defaultValues: { | ||
firstName: '', | ||
lastName: '', | ||
employed: false, | ||
jobTitle: '', | ||
}, | ||
onSubmit: async ({ value }) => { | ||
// Do something with form data | ||
alert(JSON.stringify(value)) | ||
}, | ||
})) | ||
</script> | ||
|
||
<form | ||
id="form" | ||
onsubmit={(e) => { | ||
e.preventDefault() | ||
e.stopPropagation() | ||
form.handleSubmit() | ||
}} | ||
> | ||
<h1>TanStack Form - Svelte Demo</h1> | ||
|
||
<form.Field | ||
name="firstName" | ||
validators={{ | ||
onChange: ({ value }) => | ||
value.length < 3 ? 'Not long enough' : undefined, | ||
onChangeAsyncDebounceMs: 500, | ||
onChangeAsync: async ({ value }) => { | ||
await new Promise((resolve) => setTimeout(resolve, 1000)) | ||
return value.includes('error') && 'No "error" allowed in first name' | ||
}, | ||
}} | ||
> | ||
{#snippet children(field)} | ||
<div> | ||
<label for={field.name}>First Name</label> | ||
<input | ||
id={field.name} | ||
type="text" | ||
placeholder="First Name" | ||
value={field.state.value} | ||
onblur={() => field.handleBlur()} | ||
oninput={(e: Event) => { | ||
const target = e.target as HTMLInputElement | ||
field.handleChange(target.value) | ||
}} | ||
/> | ||
<FieldInfo {field} /> | ||
</div> | ||
{/snippet} | ||
</form.Field> | ||
<form.Field | ||
name="lastName" | ||
validators={{ | ||
onChange: ({ value }) => | ||
value.length < 3 ? 'Not long enough' : undefined, | ||
}} | ||
> | ||
{#snippet children(field)} | ||
<div> | ||
<label for={field.name}>Last Name</label> | ||
<input | ||
id={field.name} | ||
type="text" | ||
placeholder="Last Name" | ||
value={field.state.value} | ||
onblur={() => field.handleBlur()} | ||
oninput={(e: Event) => { | ||
const target = e.target as HTMLInputElement | ||
field.handleChange(target.value) | ||
}} | ||
/> | ||
<FieldInfo {field} /> | ||
</div> | ||
{/snippet} | ||
</form.Field> | ||
<form.Field name="employed"> | ||
{#snippet children(field)} | ||
<div> | ||
<label for={field.name}>Employed?</label> | ||
<input | ||
oninput={() => field.handleChange(!field.state.value)} | ||
checked={field.state.value} | ||
onblur={() => field.handleBlur()} | ||
id={field.name} | ||
type="checkbox" | ||
/> | ||
</div> | ||
{#if field.state.value} | ||
<form.Field | ||
name="jobTitle" | ||
validators={{ | ||
onChange: ({ value }) => | ||
value.length === 0 ? 'If you have a job, you need a title' : null, | ||
}} | ||
> | ||
{#snippet children(field)} | ||
<div> | ||
<label for={field.name}>Job Title</label> | ||
<input | ||
type="text" | ||
id={field.name} | ||
placeholder="Job Title" | ||
value={field.state.value} | ||
onblur={field.handleBlur} | ||
oninput={(e: Event) => { | ||
const target = e.target as HTMLInputElement | ||
field.handleChange(target.value) | ||
}} | ||
/> | ||
<FieldInfo {field} /> | ||
</div> | ||
{/snippet} | ||
</form.Field> | ||
{/if} | ||
{/snippet} | ||
</form.Field> | ||
<div> | ||
<form.Subscribe | ||
selector={(state) => ({ | ||
canSubmit: state.canSubmit, | ||
isSubmitting: state.isSubmitting, | ||
})} | ||
> | ||
{#snippet children({ canSubmit, isSubmitting })} | ||
<button type="submit" disabled={!canSubmit}> | ||
{isSubmitting ? 'Submitting' : 'Submit'} | ||
</button> | ||
{/snippet} | ||
</form.Subscribe> | ||
<button | ||
type="button" | ||
id="reset" | ||
onclick={() => { | ||
form.reset() | ||
}} | ||
> | ||
Reset | ||
</button> | ||
</div> | ||
</form> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: we probably don't need to stop the propagation here. doesn't make much difference in these examples but would be good to avoid people thinking this is necessary