TanStack · 43081j · Jan 5, 2025 · Jan 6, 2025 · Jan 10, 2025 · Jan 10, 2025
diff --git a/.gitignore b/.gitignore
@@ -37,6 +37,7 @@ stats.html
 .nx/workspace-data
 .pnpm-store
 .tsup
+.svelte-kit
 
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
diff --git a/packages/svelte-form/README.md b/packages/svelte-form/README.md
@@ -0,0 +1 @@
+TODO - add a readme
diff --git a/packages/svelte-form/eslint.config.js b/packages/svelte-form/eslint.config.js
@@ -0,0 +1,5 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [...rootConfig]
diff --git a/packages/svelte-form/index.html b/packages/svelte-form/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte</title>
+  </head>
+  <body>
+  <div id="app"></div>
+  <script type="module">
+    import * as ts from './src/index.ts';
+    import { mount } from 'svelte';
+    import App from './tests/simple.svelte';
+
+    const app = mount(App, {
+      target: document.getElementById('app')
+    });
+  </script>
+  </body>
+</html>
diff --git a/packages/svelte-form/package.json b/packages/svelte-form/package.json
@@ -0,0 +1,57 @@
+{
+  "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 ./dist ./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": "svelte-package --input ./src --output ./dist"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/form-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "premove": "^4.0.0",
+    "svelte": "^5.16.1"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}
diff --git a/packages/svelte-form/src/Field.svelte b/packages/svelte-form/src/Field.svelte
@@ -0,0 +1,51 @@
+<!-- TODO (43081j): figure out how to reference types in generics -->
+<script lang="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.svelte.js';
+  import type { FieldOptions } from '@tanstack/form-core';
+
+  type Props = {
+    children: Snippet<[
+      FieldApi<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >
+    ]>
+  } & FieldOptions<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >;
+
+  let {
+    children,
+    ...fieldOptions
+  }: Props = $props();
+
+  const fieldApi = createField<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >(() => {
+    return fieldOptions
+  })
+</script>
+
+{@render children(fieldApi)}
diff --git a/packages/svelte-form/src/createField.svelte.ts b/packages/svelte-form/src/createField.svelte.ts
@@ -0,0 +1,100 @@
+import { FieldApi } from '@tanstack/form-core'
+import { onDestroy, onMount } from 'svelte'
+import Field from './Field.svelte'
+
+import type {
+  DeepKeys,
+  DeepValue,
+  FieldApiOptions,
+  Narrow,
+  Validator,
+} from '@tanstack/form-core'
+
+interface SvelteFieldApi<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> {
+  Field: Field<TParentData, TFormValidator>
+}
+
+export type CreateField<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> = <
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>(
+  opts: () => { name: Narrow<TName> } & Omit<
+    FieldApiOptions<
+      TParentData,
+      TName,
+      TFieldValidator,
+      TFormValidator,
+      TData
+    >,
+    'form'
+  >,
+) => FieldApi<
+  TParentData,
+  TName,
+  TFieldValidator,
+  TFormValidator,
+  TData
+> &
+  SvelteFieldApi<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
+}
diff --git a/packages/svelte-form/src/createForm.svelte.ts b/packages/svelte-form/src/createForm.svelte.ts
@@ -0,0 +1,44 @@
+import { FormApi } from '@tanstack/form-core'
+import { onMount } from 'svelte'
+import { createField } from './createField.svelte.js'
+import Field from './Field.svelte';
+import type { FormOptions, Validator } from '@tanstack/form-core'
+import type { CreateField } from './createField.svelte.js';
+
+export interface SvelteFormApi<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+> {
+  Field: Field<TFormData, TFormValidator>
+  createField: 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) =>
+    // TODO (43081j): type is excessively deep.. no clue why yet
+    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
+}
diff --git a/packages/svelte-form/src/index.ts b/packages/svelte-form/src/index.ts
@@ -0,0 +1,6 @@
+export * from '@tanstack/form-core'
+
+export { createForm, type SvelteFormApi } from './createForm.svelte.js'
+
+export type { Field } from './Field.svelte'
+export { createField } from './createField.svelte.js'