Skip to content

Commit ad16469

Browse files
dummdidumm43081jlachlancollinsautofix-ci[bot]
authored
feat(svelte-form): add Svelte adapter (#1247)
* wip: add svelte-form Absolutely untested, written without running it or trying it out in any way. Just a very rough start written off the top of my head with the help of various bits of docs. * wip: add vite and fix some types * fix: correct language attribute * chore: shuffle things around to use svelte files * fix: correct a whole bunch of bad refs/types * fix: return FieldApi directly * Build with @sveltejs/package * ci: apply automated fixes and generate docs * implement svelte version - one Field component with a module script with createField in it - createForm file - bunch of types that pass along generics, closely modeled after the other adapters - tests * add svelte examples * ci: apply automated fixes and generate docs * use svelte-check for type checking * remove accidental leftover * add svelte to keywords * clarify, fix * fix * resolve todo, tweak code, add test * Update packages/svelte-form/tests/simple.test.ts * Update package config --------- Co-authored-by: James Garbutt <43081j@users.noreply.github.com> Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent b5ea568 commit ad16469

37 files changed

+1920
-0
lines changed

‎examples/svelte/array/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/svelte/array/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install`
6+
- `npm run dev`

‎examples/svelte/array/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Svelte + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/svelte/array/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@tanstack/form-example-svelte-array",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@tanstack/svelte-form": "^1.0.0"
13+
},
14+
"devDependencies": {
15+
"@sveltejs/vite-plugin-svelte": "^5.0.3",
16+
"@tsconfig/svelte": "^5.0.4",
17+
"svelte": "^5.27.2",
18+
"typescript": "5.8.2",
19+
"vite": "^6.2.6"
20+
}
21+
}

‎examples/svelte/array/src/App.svelte‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script lang="ts">
2+
import { createForm } from '@tanstack/svelte-form'
3+
4+
const form = createForm(() => ({
5+
defaultValues: {
6+
people: [] as Array<{ age: number; name: string }>,
7+
},
8+
onSubmit: ({ value }) => alert(JSON.stringify(value)),
9+
}))
10+
</script>
11+
12+
<form
13+
id="form"
14+
onsubmit={(e) => {
15+
e.preventDefault()
16+
e.stopPropagation()
17+
form.handleSubmit()
18+
}}
19+
>
20+
<h1>TanStack Form - Svelte Demo</h1>
21+
22+
<form.Field name="people">
23+
{#snippet children(field)}
24+
<div>
25+
{#each field.state.value as person, i}
26+
<form.Field name={`people[${i}].name`}>
27+
{#snippet children(subField)}
28+
<div>
29+
<label>
30+
<div>Name for person {i}</div>
31+
<input
32+
value={person.name}
33+
oninput={(e: Event) => {
34+
const target = e.target as HTMLInputElement
35+
subField.handleChange(target.value)
36+
}}
37+
/>
38+
</label>
39+
</div>
40+
{/snippet}
41+
</form.Field>
42+
{/each}
43+
44+
<button
45+
onclick={() => field.pushValue({ name: '', age: 0 })}
46+
type="button"
47+
>
48+
Add person
49+
</button>
50+
</div>
51+
{/snippet}
52+
</form.Field>
53+
54+
<button type="submit"> Submit </button>
55+
</form>

‎examples/svelte/array/src/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { mount } from 'svelte'
2+
import App from './App.svelte'
3+
4+
const app = mount(App, {
5+
target: document.getElementById('app')!,
6+
})
7+
8+
export default app

‎examples/svelte/array/src/vite-env.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="svelte" />
2+
/// <reference types="vite/client" />

‎examples/svelte/array/svelte.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2+
3+
export default {
4+
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
5+
// for more information about preprocessors
6+
preprocess: vitePreprocess(),
7+
}

‎examples/svelte/array/tsconfig.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"extends": "@tsconfig/svelte/tsconfig.json",
3+
"compilerOptions": {
4+
"target": "ESNext",
5+
"useDefineForClassFields": true,
6+
"module": "ESNext",
7+
"resolveJsonModule": true,
8+
/**
9+
* Typecheck JS in `.svelte` and `.js` files by default.
10+
* Disable checkJs if you'd like to use dynamic types in JS.
11+
* Note that setting allowJs false does not prevent the use
12+
* of JS in `.svelte` files.
13+
*/
14+
"allowJs": true,
15+
"checkJs": true,
16+
"isolatedModules": true,
17+
"moduleDetection": "force"
18+
},
19+
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
20+
}

‎examples/svelte/array/vite.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import { svelte } from '@sveltejs/vite-plugin-svelte'
3+
4+
// https://vite.dev/config/
5+
export default defineConfig({
6+
plugins: [svelte()],
7+
})

0 commit comments

Comments
 (0)