@tanstack/angular-form 0.23.1 → 0.23.3

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@tanstack/angular-form",
-  "version": "0.23.1",
+  "version": "0.23.3",
   "description": "Powerful, type-safe forms for Angular.",
   "author": "tannerlinsley",
   "license": "MIT",
-  "repository": "tanstack/form",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/form.git",
+    "directory": "packages/angular-form"
+  },
   "homepage": "https://tanstack.com/form",
   "funding": {
     "type": "github",
@@ -12,19 +16,28 @@
   },
   "sideEffects": false,
   "files": [
-    "build",
+    "dist",
     "src"
   ],
   "type": "module",
-  "nx": {
-    "targets": {
-      "test:build": {
-        "dependsOn": [
-          "build"
-        ]
-      }
+  "types": "dist/index.d.ts",
+  "module": "dist/fesm2022/tanstack-angular-form.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "esm2022": "./dist/esm2022/tanstack-angular-form.mjs",
+      "esm": "./dist/esm2022/tanstack-angular-form.mjs",
+      "default": "./dist/fesm2022/tanstack-angular-form.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
     }
   },
+  "dependencies": {
+    "@tanstack/angular-store": "^0.5.1",
+    "tslib": "^2.3.0",
+    "@tanstack/form-core": "0.23.3"
+  },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^1.0.0",
     "@angular/common": "^17.3.0",
@@ -38,26 +51,8 @@
     "typescript": "5.4.2",
     "zone.js": "~0.14.2"
   },
-  "dependencies": {
-    "@tanstack/angular-store": "^0.4.1",
-    "tslib": "^2.3.0",
-    "@tanstack/form-core": "0.23.1"
-  },
   "peerDependencies": {
     "@angular/core": ">=17.3.0"
   },
-  "module": "build/fesm2022/tanstack-angular-form.mjs",
-  "types": "build/index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./build/index.d.ts",
-      "esm2022": "./build/esm2022/tanstack-angular-form.mjs",
-      "esm": "./build/esm2022/tanstack-angular-form.mjs",
-      "default": "./build/fesm2022/tanstack-angular-form.mjs"
-    }
-  },
   "scripts": {}
 }

package/src/test-setup.ts

@@ -1,13 +0,0 @@
-import '@analogjs/vite-plugin-angular/setup-vitest'
-import '@testing-library/jest-dom/vitest'
-
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing'
-import { getTestBed } from '@angular/core/testing'
-
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-)

package/src/tests/test.component.spec.ts

@@ -1,358 +0,0 @@
-import { render } from '@testing-library/angular'
-import { Component } from '@angular/core'
-import { describe, expect, it } from 'vitest'
-import { userEvent } from '@testing-library/user-event'
-import { injectForm } from '../inject-form'
-import { TanStackField } from '../tanstack-field.directive'
-import { sleep } from './utils'
-import type { FieldValidateAsyncFn, FieldValidateFn } from '@tanstack/form-core'
-
-const user = userEvent.setup()
-
-describe('TanStackFieldDirective', () => {
-  it('should allow to set default value', async () => {
-    @Component({
-      selector: 'test-component',
-      standalone: true,
-      template: `
-        <ng-container [tanstackField]="form" name="firstName" #f="field">
-          <input
-            data-testid="fieldinput"
-            [value]="f.api.state.value"
-            (blur)="f.api.handleBlur()"
-            (input)="f.api.handleChange($any($event).target.value)"
-          />
-        </ng-container>
-      `,
-      imports: [TanStackField],
-    })
-    class TestComponent {
-      form = injectForm({
-        defaultValues: {
-          firstName: 'FirstName',
-          lastName: 'LastName',
-        },
-      })
-    }
-
-    const { getByTestId } = await render(TestComponent)
-
-    const input = getByTestId('fieldinput')
-    expect(input).toHaveValue('FirstName')
-  })
-
-  it('should use field default value first', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-
-    @Component({
-      selector: 'test-component',
-      standalone: true,
-      template: `
-        <ng-container
-          [tanstackField]="form"
-          name="firstName"
-          defaultValue="otherName"
-          #f="field"
-        >
-          <input
-            data-testid="fieldinput"
-            [value]="f.api.state.value"
-            (blur)="f.api.handleBlur()"
-            (input)="f.api.handleChange($any($event).target.value)"
-          />
-        </ng-container>
-      `,
-      imports: [TanStackField],
-    })
-    class TestComponent {
-      form = injectForm<Person>({
-        defaultValues: {
-          firstName: 'FirstName',
-          lastName: 'LastName',
-        },
-      })
-    }
-
-    const { getByTestId } = await render(TestComponent)
-
-    const input = getByTestId('fieldinput')
-    expect(input).toHaveValue('otherName')
-  })
-
-  it('should not validate on change if isTouched is false', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const error = 'Please enter a different value'
-
-    @Component({
-      selector: 'test-component',
-      standalone: true,
-      template: `
-        <ng-container
-          [tanstackField]="form"
-          name="firstName"
-          [validators]="{ onChange: otherValidator }"
-          #f="field"
-        >
-          <input
-            data-testid="fieldinput"
-            [value]="f.api.state.value"
-            (blur)="f.api.handleBlur()"
-            (input)="f.api.setValue($any($event).target.value)"
-          />
-          @for (error of f.api.getMeta().errors; track error) {
-            <p>{{ error }}</p>
-          }
-        </ng-container>
-      `,
-      imports: [TanStackField],
-    })
-    class TestComponent {
-      otherValidator: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
-        value === 'other' ? error : undefined
-
-      form = injectForm<Person>({
-        defaultValues: {
-          firstName: 'FirstName',
-          lastName: 'LastName',
-        },
-      })
-    }
-
-    const { getByTestId, queryByText } = await render(TestComponent)
-    const input = getByTestId('fieldinput')
-    await user.type(input, 'other')
-    expect(queryByText(error)).not.toBeInTheDocument()
-  })
-
-  it('should validate on change if isTouched is true', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const error = 'Please enter a different value'
-
-    @Component({
-      selector: 'test-component',
-      standalone: true,
-      template: `
-        <ng-container
-          [tanstackField]="form"
-          name="firstName"
-          [defaultMeta]="{ isTouched: true }"
-          [validators]="{ onChange: otherValidator }"
-          #f="field"
-        >
-          <input
-            data-testid="fieldinput"
-            [value]="f.api.state.value"
-            (blur)="f.api.handleBlur()"
-            (input)="f.api.handleChange($any($event).target.value)"
-          />
-          <p>{{ f.api.getMeta().errorMap?.onChange }}</p>
-        </ng-container>
-      `,
-      imports: [TanStackField],
-    })
-    class TestComponent {
-      otherValidator: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
-        value === 'other' ? error : undefined
-
-      form = injectForm<Person>({
-        defaultValues: {
-          firstName: '',
-          lastName: '',
-        },
-      })
-    }
-
-    const { getByTestId, queryByText, getByText } = await render(TestComponent)
-
-    const input = getByTestId('fieldinput')
-    expect(queryByText(error)).not.toBeInTheDocument()
-    await user.type(input, 'other')
-    expect(getByText(error)).toBeInTheDocument()
-  })
-
-  it('should validate on change and on blur', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const onChangeError = 'Please enter a different value (onChangeError)'
-    const onBlurError = 'Please enter a different value (onBlurError)'
-
-    @Component({
-      selector: 'test-component',
-      standalone: true,
-      template: `
-        <ng-container
-          [tanstackField]="form"
-          name="firstName"
-          [defaultMeta]="{ isTouched: true }"
-          [validators]="{ onChange: onChange, onBlur: onBlur }"
-          #f="field"
-        >
-          <input
-            data-testid="fieldinput"
-            [value]="f.api.state.value"
-            [name]="f.api.name"
-            (blur)="f.api.handleBlur()"
-            (input)="f.api.setValue($any($event).target.value)"
-          />
-          <p>{{ f.api.getMeta().errorMap?.onChange }}</p>
-          <p>{{ f.api.getMeta().errorMap?.onBlur }}</p>
-        </ng-container>
-      `,
-      imports: [TanStackField],
-    })
-    class TestComponent {
-      onChange: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
-        value === 'other' ? onChangeError : undefined
-      onBlur: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
-        value === 'other' ? onBlurError : undefined
-
-      form = injectForm<Person>({
-        defaultValues: {
-          firstName: '',
-          lastName: '',
-        },
-      })
-    }
-
-    const { getByTestId, getByText, queryByText } = await render(TestComponent)
-    const input = getByTestId('fieldinput')
-    expect(queryByText(onChangeError)).not.toBeInTheDocument()
-    expect(queryByText(onBlurError)).not.toBeInTheDocument()
-    await user.type(input, 'other')
-    expect(getByText(onChangeError)).toBeInTheDocument()
-    await user.click(document.body)
-    expect(queryByText(onBlurError)).toBeInTheDocument()
-  })
-
-  it('should validate async on change', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const error = 'Please enter a different value'
-
-    @Component({
-      selector: 'test-component',
-      standalone: true,
-      template: `
-        <ng-container
-          [tanstackField]="form"
-          name="firstName"
-          [defaultMeta]="{ isTouched: true }"
-          [validators]="{ onChangeAsync: onChangeAsync }"
-          #f="field"
-        >
-          <input
-            data-testid="fieldinput"
-            [name]="f.api.name"
-            [value]="f.api.state.value"
-            (blur)="f.api.handleBlur()"
-            (input)="f.api.handleChange($any($event).target.value)"
-          />
-          <p>{{ f.api.getMeta().errorMap?.onChange }}</p>
-        </ng-container>
-      `,
-      imports: [TanStackField],
-    })
-    class TestComponent {
-      onChangeAsync: FieldValidateAsyncFn<Person, 'firstName'> = async () => {
-        await sleep(10)
-        return error
-      }
-
-      form = injectForm<Person>({
-        defaultValues: {
-          firstName: '',
-          lastName: '',
-        },
-      })
-    }
-
-    const { getByTestId, getByText, findByText, queryByText } =
-      await render(TestComponent)
-    const input = getByTestId('fieldinput')
-    expect(queryByText(error)).not.toBeInTheDocument()
-    await user.type(input, 'other')
-    await findByText(error)
-    expect(getByText(error)).toBeInTheDocument()
-  })
-
-  it('should validate async on change and async on blur', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const onChangeError = 'Please enter a different value (onChangeError)'
-    const onBlurError = 'Please enter a different value (onBlurError)'
-
-    @Component({
-      selector: 'test-component',
-      standalone: true,
-      template: `
-        <ng-container
-          [tanstackField]="form"
-          name="firstName"
-          [defaultMeta]="{ isTouched: true }"
-          [validators]="{
-            onChangeAsync: onChangeAsync,
-            onBlurAsync: onBlurAsync
-          }"
-          #f="field"
-        >
-          <input
-            data-testid="fieldinput"
-            [name]="f.api.name"
-            [value]="f.api.state.value"
-            (blur)="f.api.handleBlur()"
-            (input)="f.api.handleChange($any($event).target.value)"
-          />
-          <p>{{ f.api.getMeta().errorMap?.onChange }}</p>
-          <p>{{ f.api.getMeta().errorMap?.onBlur }}</p>
-        </ng-container>
-      `,
-      imports: [TanStackField],
-    })
-    class TestComponent {
-      onChangeAsync: FieldValidateAsyncFn<Person, 'firstName'> = async () => {
-        await sleep(10)
-        return onChangeError
-      }
-
-      onBlurAsync: FieldValidateAsyncFn<Person, 'firstName'> = async () => {
-        await sleep(10)
-        return onBlurError
-      }
-
-      form = injectForm<Person>({
-        defaultValues: {
-          firstName: '',
-          lastName: '',
-        },
-      })
-    }
-
-    const { getByTestId, getByText, findByText, queryByText } =
-      await render(TestComponent)
-    const input = getByTestId('fieldinput')
-
-    expect(queryByText(onChangeError)).not.toBeInTheDocument()
-    expect(queryByText(onBlurError)).not.toBeInTheDocument()
-    await user.type(input, 'other')
-    await findByText(onChangeError)
-    expect(getByText(onChangeError)).toBeInTheDocument()
-    await user.click(document.body)
-    await findByText(onBlurError)
-    expect(getByText(onBlurError)).toBeInTheDocument()
-  })
-})

package/src/tests/utils.ts

@@ -1,5 +0,0 @@
-export function sleep(timeout: number): Promise<void> {
-  return new Promise((resolve, _reject) => {
-    setTimeout(resolve, timeout)
-  })
-}