Framework without React


# Framework without React

The form framework can be used without React for managing validations in a serverside environment

```tsx live
import {
  createForm,
  createValidate,
  getValidations,
  FormState,
} from "@snsw-forms/form"
import { Path } from "@snsw-forms/utils/object/path"
import { shallowEqualArray } from "@selkt/core"

function alertValidations(form: FormState) {
  const validations = getValidations(form)
  alert(
    validations.length +
      " validations: \n" +
      validations.map((validation) => validation.element).join("\n")
  )
}

async function run(e) {
  e.target.disabled = true
  const form = createForm({
    applicant: {
      name: "",
      age: "",
    },
    child: {
      name: "",
      age: "",
    },
  })

  const createIndividualValidation = (path: string) => {
    createValidate(form, {
      path: Path([path, "age"]),
      invalid: (age) => !age || age < 18,
      element: `${path} must be older than 17`,
    }).start()

    createValidate(form, {
      path: `${path}${Path.SEP}name`,
      invalid: (name) => !name || name.length < 3,
      element: `${path}'s name must be longer than 3 chars`,
    }).start()

    createValidate(form, {
      path: [path, "name"],
      select: (state) => [state.applicant.name, state.child.name],
      equalityCheck: shallowEqualArray,
      invalid: (names) => {
        console.log({ names })
        return new Set(names).size !== names.length
      },
      element: `${path}'s name must be unique`,
    }).start()
  }

  createIndividualValidation("applicant")
  createIndividualValidation("child")

  let submitResult = await form.submit(() => {
    alert("First attempt")
  })
  // SubmitResult { submitted: boolean, result: ReturnType<Callback> }

  alertValidations(form)

  form.update((value) => {
    value.applicant.age = "44"
    value.applicant.name = "John"
  })

  alertValidations(form)

  form.update((value) => {
    value.child.age = "22"
    value.child.name = "John"
  })

  alertValidations(form)

  submitResult = await form.submit(() => {
    alert("Second attempt")
  })

  alertValidations(form)

  form.update((value) => {
    value.child.name = "Mary"
  })

  submitResult = await form.submit(() => {
    alert("Third attempt")
  })

  e.target.disabled = false
}

render(<button onClick={run}>Run demo</button>)
```
