feat(svelte-form): Add Svelte adapter by dummdidumm · Pull Request #1247 · TanStack/form

dummdidumm · 2025-03-07T20:03:42Z

This implements a Svelte adapter for the form package. API-wise it's somewhere inbetween Solid and React (createForm is used like Solid's, getting the field state from within a snippet is more like React). Added basic tests and two examples.

Superseeds #1107

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.

- 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

nx-cloud · 2025-03-07T23:06:06Z

View your CI Pipeline Execution ↗ for commit f561f84.

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	2m 3s	View ↗
`nx run-many --target=build --exclude=examples/**`	✅ Succeeded	20s	View ↗

☁️ Nx Cloud last updated this comment at 2025-04-17 23:43:45 UTC

43081j · 2025-03-08T07:13:55Z

Let me know if you want any help with this 👍 my pr went stale since I was in need of someone to pair/review with but I am still very much interested in landing this

43081j · 2025-03-10T16:01:20Z

+  } from '@tanstack/form-core'
+  import { useStore } from '@tanstack/svelte-store'
+  import { onMount, type Snippet } from 'svelte'
+  import Field from './Field.svelte'


this is really, really odd. importing the file we're in, from the file we're in

i'm surprised this did something. even if this somehow works, we really shouldn't be doing it imo

this is why createField and Field were originally separate

Why shouldn't we? This is valid JavaScript, you can self-import in ESM, it's part of the spec. This is just a different way of doing what the other adapters are doing, where they have Field and createField in the same file.

its basically a hacky workaround for the fact there's a circular dependency here (createField needs Field and vice versa), and in svelte the component is the module as a whole

ideally, we'd figure it out properly. though im not sure how off the top of my head

Are you running into a problem with the circular ref? In general it's ok due to the way js imports work (e.g., you can import yourself), but ideally something we resolve.

im fully aware that this "works", its just not great for code quality/readability and is inconsistent with the rest of the codebase

also its a clear workaround for the circular dependency. you did this because you couldn't define Field in the file itself (since it is the file), whereas in all other integrations we would just have it in a named export

i disagree with doing it this way but will leave it up to other reviewers to decide

You're not gonna get a "clean" solution because there's a cyclic dependency here. So either you have a cyclic import or you have a self-import - I prefer the latter due to colocation.

43081j · 2025-03-10T16:04:32Z

+  extendedApi.createField = (props) =>
+    createField(() => {
+      return { ...props(), form: api }
+    }) as never


how come you weren't able to type this properly? (i.e. without as never)

added a comment; TS throws an error here that type instantiation is excessively deep (same as for Solid FWIW)

Dreaming-Codes · 2025-03-15T11:59:48Z

Is this ready for testing it in a project?

niemyjski · 2025-03-15T20:20:01Z

Is this ready for testing it in a project?

And if it is, would love to know if there is a nightly build :), Otherwise what is left / where we can help.

JonathonRP · 2025-03-15T20:36:01Z

Is this ready for testing it in a project?

what is left / where we can help.

I see an error in types that has an @ts/error with no actual error, and as someone else pointed that import failing. I think the reviews need to approve and best guess they will once those two failing tests pass from the fixes I mentioned...

43081j · 2025-03-23T21:53:32Z

+  id="form"
+  onsubmit={(e) => {
+    e.preventDefault()
+    e.stopPropagation()


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

43081j · 2025-03-23T21:56:58Z

+                      const target = e.target as HTMLInputElement
+                      subField.handleChange(target.value)
+                    }}
+                  />


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 (<input>)

43081j · 2025-03-23T21:59:56Z

+
+import rootConfig from '../../eslint.config.js'
+
+export default [...rootConfig]


do you think there's opportunity here to enable svelte rules for the svelte files in here?

not in this PR, but we could open an issue to do it separately if you think that makes sense

honestly I don't care, Eslint isn't of much use in this repo in my opinion, so I'd rather just keep it as is

to be clear, we were always going to keep it as it is in this pr. i was asking in case its worth us opening an issue to do it in a separate PR

not in this PR, but we could open an issue to do it separately

it may make sense for linting svelte sources since we'll have a few after this PR

43081j · 2025-03-23T22:30:48Z

some of the CI failure seems unrelated, some eslint.config.js stuff from the react package

this all looks good other than the failing CI though 👍 i left a few very minor comments but nothing much

there's an unfortunate amount of any, unsafe casts (as never) and such. but there's not a huge amount we can do about them given the circular references and overly deep type inference

43081j · 2025-03-27T11:46:48Z

i tried this out locally and dug around the types a bit etc, all seems pretty good

maybe we can get some kind of nightly build sorted soon

niemyjski · 2025-03-30T02:53:01Z

nightly build would be great. Any thing the community can help with?

43081j and others added 11 commits January 5, 2025 22:07

wip: add svelte-form

b7f42f6

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

4e53bdb

fix: correct language attribute

a105341

chore: shuffle things around to use svelte files

3bd7f33

fix: correct a whole bunch of bad refs/types

5b87ca5

fix: return FieldApi directly

43aa84c

Build with @sveltejs/package

2b52081

ci: apply automated fixes and generate docs

2f0f6a1

Merge branch 'main' into svelte

85d2d8b

implement svelte version

c2657de

- 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

c4e8350

dummdidumm commented Mar 7, 2025

View reviewed changes

Comment thread packages/svelte-form/package.json

ci: apply automated fixes and generate docs

69a6eb6

lachlancollins requested changes Mar 7, 2025

View reviewed changes

Comment thread examples/svelte/simple/src/App.svelte Outdated

Comment thread packages/svelte-form/package.json Outdated

lachlancollins mentioned this pull request Mar 8, 2025

[WIP] add svelte integration #1107

Closed

5 tasks

dummdidumm added 3 commits March 10, 2025 16:46

use svelte-check for type checking

032e1f7

remove accidental leftover

08daf3b

add svelte to keywords

34dadc4

43081j reviewed Mar 10, 2025

View reviewed changes

Comment thread packages/svelte-form/package.json

43081j reviewed Mar 10, 2025

View reviewed changes

clarify, fix

151c2b2

lachlancollins reviewed Mar 14, 2025

View reviewed changes

Comment thread packages/svelte-form/tests/simple.svelte Outdated

dummdidumm and others added 2 commits March 17, 2025 11:01

Merge branch 'main' into svelte-updated

e0cebb0

fix

55e5c82

43081j reviewed Mar 17, 2025

View reviewed changes

Comment thread packages/svelte-form/src/Field.svelte Outdated

resolve todo, tweak code, add test

f01a213

43081j reviewed Mar 23, 2025

View reviewed changes

Comment thread packages/svelte-form/tests/simple.test.ts Outdated

dummdidumm added 2 commits March 24, 2025 05:34

Merge branch 'main' into svelte-updated

562225b

Update packages/svelte-form/tests/simple.test.ts

6f03750

lachlancollins added 2 commits April 18, 2025 09:12

Merge branch 'main' into svelte-updated

9b7c578

Update package config

f561f84

lachlancollins approved these changes Apr 17, 2025

View reviewed changes

lachlancollins merged commit ad16469 into TanStack:main Apr 17, 2025
2 of 3 checks passed

dummdidumm deleted the svelte-updated branch April 18, 2025 08:30

LeCarbonator mentioned this pull request Jun 5, 2025

Svelte support #516

Closed


		import rootConfig from '../../eslint.config.js'

		export default [...rootConfig]

Uh oh!

Conversation

dummdidumm commented Mar 7, 2025

Uh oh!

Uh oh!

nx-cloud bot commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

43081j commented Mar 8, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dummdidumm Mar 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Dreaming-Codes commented Mar 15, 2025

Uh oh!

niemyjski commented Mar 15, 2025

Uh oh!

JonathonRP commented Mar 15, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

43081j Mar 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

43081j commented Mar 23, 2025

Uh oh!

43081j commented Mar 27, 2025

Uh oh!

niemyjski commented Mar 30, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

nx-cloud bot commented Mar 7, 2025 •

edited

Loading

dummdidumm Mar 10, 2025 •

edited

Loading

43081j Mar 24, 2025 •

edited

Loading