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.

packages/svelte-form/README.md

@@ -0,0 +1 @@
+TODO - add a readme

packages/svelte-form/eslint.config.js

@@ -0,0 +1,5 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [...rootConfig]

packages/svelte-form/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@tanstack/svelte-form",
+  "version": "0.0.1",
+  "description": "Powerful, type-safe forms for Svelte.",
+  "author": "James Garbutt (https://github.com/43081j)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/form.git",
+    "directory": "packages/svelte-form"
+  },
+  "homepage": "https://tanstack.com/form",
+  "scripts": {
+    "clean": "premove ./build ./coverage",
+    "test:eslint": "eslint ./src ./tests",
+    "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+    "test:types:ts51": "node ../../node_modules/typescript51/lib/tsc.js",
+    "test:types:ts52": "node ../../node_modules/typescript52/lib/tsc.js",
+    "test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js",
+    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
+    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+    "test:types:ts56": "tsc",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "tsc -p tsconfig.build.json"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/form-core": "workspace:*"
+  },
+  "devDependencies": {
+    "svelte": "^5.16.1",
+    "premove": "^4.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.16.1"
+  }
+}

packages/svelte-form/src/Field.svelte

@@ -0,0 +1,50 @@
+<!-- TODO (43081j): figure out how to reference types in generics -->
+<script type="ts" generics="TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>
+">
+  import type { Snippet } from 'svelte';
+  // TODO (43081j): somehow remove this circular reference
+  import { createField } from './createField';
+
+  type Props = {
+    children: Snippet<[
+      FieldApi<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >
+    ]>
+    [key: string]: unknown;
+  } & FieldApiOptions<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >;
+
+  let {
+    children
+  }: Props = $props();
+
+  const fieldApi = createField<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >(() => {
+    return fieldOptions
+  })
+</script>
+
+{@render children(fieldApi)}

packages/svelte-form/src/createField.ts

@@ -0,0 +1,68 @@
+import { FieldApi } from '@tanstack/form-core'
+import { onDestroy, onMount } from 'svelte'
+import Field from './Field.js'
+
+import type {
+  DeepKeys,
+  DeepValue,
+  FieldApiOptions,
+  Validator,
+} from '@tanstack/form-core'
+
+interface SvelteFieldApi<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> {
+  Field: Field<TParentData, TFormValidator>
+}
+
+export function createField<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>(
+  opts: () => FieldApiOptions<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
+  const options = opts()
+
+  const api = new FieldApi(options)
+
+  const extendedApi: typeof api & SvelteFieldApi<TParentData, TFormValidator> =
+    api as never
+
+  extendedApi.Field = Field as never
+
+  let mounted = false
+  // Instantiates field meta and removes it when unrendered
+  onMount(() => {
+    const cleanupFn = api.mount()
+    mounted = true
+    onDestroy(() => {
+      cleanupFn()
+      mounted = false
+    })
+  })
+
+  // TODO (43081j): does this do what i think? we don't access anything
+  // svelte is aware of, so maybe it'll never call this?
+  $effect(() => {
+    if (!mounted) return
+    api.update(opts())
+  })
+
+  return extendedApi
+}

packages/svelte-form/src/createForm.ts

@@ -0,0 +1,41 @@
+import { FormApi } from '@tanstack/form-core'
+import { onMount } from 'svelte'
+import { Field, createField } from './createField'
+import type { FormOptions, Validator } from '@tanstack/form-core'
+
+export interface SvelteFormApi<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+> {
+  Field: Field<TFormData, TFormValidator>
+  createField: typeof createField<TFormData, TFormValidator>
+}
+
+export function createForm<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+>(opts?: () => FormOptions<TParentData, TFormValidator>) {
+  const options = opts?.()
+  const api = new FormApi<TParentData, TFormValidator>(options)
+  const extendedApi: typeof api & SvelteFormApi<TParentData, TFormValidator> =
+    api as never
+
+  // TODO (43081j): somehow this needs to actually be
+  // `<Field ...props form={api}>`.
+  // No clue right now how we do that
+  extendedApi.Field = Field
+  extendedApi.createField = (props) =>
+    createField(() => {
+      return { ...props(), form: api }
+    })
+
+  onMount(api.mount)
+
+  // TODO (43081j): does this actually work? we don't use any observed
+  // data, so maybe svelte won't re-run this effect?
+  $effect(() => api.update(opts?.()))
+
+  return extendedApi
+}

packages/svelte-form/src/index.ts

@@ -0,0 +1,6 @@
+export * from '@tanstack/form-core'
+
+export { createForm, type SvelteFormApi } from './createForm.js'
+
+export type { Field } from './Field.js'
+export { createField } from './createField.js'