@octanejs/tanstack-form 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,102 @@
+# @octanejs/tanstack-form
+
+[TanStack Form](https://tanstack.com/form) bindings for the
+[Octane](https://github.com/octanejs/octane) UI framework.
+
+This package ports `@tanstack/react-form@1.33.2` onto Octane while reusing
+`@tanstack/form-core@1.33.2` unchanged. The runtime export surface matches the
+React adapter, so migration starts by changing the package import:
+
+```ts
+// before
+import { useForm } from '@tanstack/react-form'
+
+// after
+import { useForm } from '@octanejs/tanstack-form'
+```
+
+The renderer-bearing adapter modules are authored as `.tsrx` and compiled by
+Octane. Matching `.tsrx.d.ts` companions are checked declaration emits of those
+implementations, preserving the complete generic surface for TypeScript
+consumers. Recursive contracts such as `extendForm` are named in the TSRX source
+rather than manually unrolled in declarations.
+
+Renderer-specific public types use Octane names, including `OctaneFormApi`,
+`OctaneFormExtendedApi`, `AppFieldExtendedOctaneFormApi`, and
+`AppFieldExtendedOctaneFieldGroupApi`.
+
+```tsx
+import { useForm } from '@octanejs/tanstack-form'
+
+export function ProfileForm() @{
+  const form = useForm({
+    defaultValues: { name: '' },
+    onSubmit: ({ value }) => console.log(value),
+  })
+
+  <form
+    onSubmit={(event) => {
+      event.preventDefault()
+      void form.handleSubmit()
+    }}
+  >
+    <form.Field
+      name="name"
+      validators={{
+        onChange: ({ value }) =>
+          value.length === 0 ? 'Name is required' : undefined,
+      }}
+    >
+      {(field) => (
+        <label>
+          Name
+          <input
+            value={field.state.value}
+            onBlur={field.handleBlur}
+            onInput={(event) => field.handleChange(event.target.value)}
+          />
+          @if (field.state.meta.errors.length > 0) {
+            <span>{field.state.meta.errors.join(', ')}</span>
+          }
+        </label>
+      )}
+    </form.Field>
+    <form.Subscribe selector={(state) => state.canSubmit}>
+      {(canSubmit) => <button disabled={!canSubmit}>Submit</button>}
+    </form.Subscribe>
+  </form>
+}
+```
+
+## API
+
+The adapter includes `useForm`, `useField`, `useFormGroup`, `useFieldGroup`,
+`createFormHook`, `createFormHookContexts`, and
+`useIsomorphicLayoutEffect`. It also re-exports `@tanstack/form-core` and the
+`useSelector`/`useStore` helpers from `@octanejs/tanstack-store`.
+
+Octane uses native DOM events. Text controls should call
+`field.handleChange()` from `onInput`; native `change` fires only on
+blur/commit. TanStack Form option names such as `onChange`, validators, and
+listener keys retain their upstream spelling.
+
+Server rendering through `octane/server` is supported. Field and form
+subscriptions render their initial snapshots without browser-only setup.
+
+## Verification
+
+The port runs TanStack Form's React adapter tests against Octane, including
+validation, async validation and debounce, linked fields, arrays, form groups,
+component contexts, submission, reset, and subscription behavior. A
+differential test compiles the same `.tsrx` form for Octane and React and
+compares its DOM after value, validation, array, and reset interactions. The
+upstream compile-time suite and an SSR fixture are also included.
+
+Current scope and verification status are tracked in the generated
+[bindings status table](../../docs/bindings-status.md), sourced from this
+package's [`status.json`](./status.json).
+
+## License
+
+MIT — contains source derived from
+[TanStack Form](https://github.com/TanStack/form) (MIT), adapted for Octane.

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@octanejs/tanstack-form",
+  "version": "0.0.1",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "description": "TanStack Form bindings for Octane — reuses @tanstack/form-core and ports the React adapter's hooks, components, and contexts.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/tanstack-form"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@tanstack/form-core": "1.33.2",
+    "@octanejs/tanstack-store": "0.0.1"
+  },
+  "peerDependencies": {
+    "octane": "0.1.7"
+  },
+  "devDependencies": {
+    "@tanstack/react-form": "1.33.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@tsrx/react": "^0.2.37",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "vitest": "^4.1.9",
+    "@octanejs/testing-library": "0.1.4",
+    "octane": "0.1.7"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}