form.svelte.js

const createFieldProxy = (remote, path = []) =>
  new Proxy({}, {
    get: (target, prop) => {
      if (typeof prop === 'symbol') return undefined

      if (prop === 'value' || prop === 'set' || prop === 'as' || prop === 'issues') {
        let remoteField = remote.fields
        for (const key of path) {
          remoteField = remoteField?.[key]
          if (!remoteField) return undefined
        }

        if (!remoteField) return undefined

        let reactiveValue = $state(remoteField.value())

        if (prop === 'value') {
          return reactiveValue
        }

        if (prop === 'set') {
          return (val) => {
            reactiveValue = val
            remoteField.set(val)
          }
        }

        if (prop === 'issues') {
          return () => remoteField.issues()
        }

        if (prop === 'as') {
          return (type, value) => {
            const returned = remoteField.as(type, value)

            function onchange () {
              const issues = remoteField.issues()
              if (issues && issues.length > 0) {
                remote.validate()
              }
            }

            return {
              ...returned,
              value: reactiveValue,
              onblur () {
                remote.validate()
              },
              oninput (e) {
                reactiveValue = e.target.value
                remoteField.set(e.target.value)
                onchange()
              },
              onchange (e) {
                reactiveValue = e.target.value
                remoteField.set(e.target.value)
                onchange()
              }
            }
          }
        }
      }

      return createFieldProxy(remote, [ ...path, prop ])
    },
    set: (target, prop, value) => {
      if (prop === 'value') {
        let remoteField = remote.fields
        for (const key of path) {
          remoteField = remoteField?.[key]
          if (!remoteField) return false
        }

        remoteField.set(value)
        return true
      }
      return false
    }
  })

export const makeReactiveForm = (remote) =>
  new Proxy(remote, {
    get (target, prop) {
      if (prop === 'fields') {
        return createFieldProxy(remote)
      }

      return target[prop]
    }
  })