Skip to content

[FEAT] Remove Form Factory + Change React SSR Story - #734

Merged
crutchcorn merged 15 commits into
mainfrom
remove-form-factory
Jun 20, 2024
Merged

crutchcorn merged 15 commits into
mainfrom
remove-form-factory

Conversation

@crutchcorn

@crutchcorn crutchcorn commented Jun 3, 2024 •

Copy link
Copy Markdown
Member

This PR:

  • Removes createFormFactory
  • Introduces a new API for formOptions
  • Introduces a new API called createServerValidate for SSR usage
  • Updates React adapter tests
  • Update Vue adapter
  • Update Solid adapter
  • Updates SSR docs to reflect new APIs
  • Updates other docs to reflect new APIs

Together, this API looks like:

// shared-code.ts
import { formOptions } from '@tanstack/react-form/nextjs'

export const formOpts = formOptions({
  defaultValues: {
    firstName: '',
    age: 0,
  },
})
// client-component.tsx

/* ... */
const form = useForm({
  ...formOpts,
  transform: useTransform(
    (baseForm: FormApi<any, any>) => mergeForm(baseForm, state),
    [state],
  ),
})
/* ... */
// action.ts
'use server'

import { createServerValidate } from '@tanstack/react-form/nextjs'
import { formOpts } from './shared-code'

const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: ({ value }) => {
    if (value.age < 12) {
      return 'Server validation: You must be at least 12 to sign up'
    }
  },
})

export default async function someAction(prev: unknown, formData: FormData) {
  return await serverValidate(formData)
}

This solves the issue where server code was leaking to the client, while retaining the typing and validator adapter benefits from other libraries.

Fixes #710

@nx-cloud

nx-cloud Bot commented Jun 3, 2024 •

Copy link
Copy Markdown

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 7f4d0d1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


🟥 Failed Commands
nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3

Sent with 💌 from NxCloud.

crutchcorn and others added 6 commits June 18, 2024 23:43
# Conflicts:
#	examples/react/array/package.json
#	examples/react/next-server-actions/package.json
#	examples/react/query-integration/package.json
#	examples/react/simple/package.json
#	examples/react/valibot/package.json
#	examples/react/yup/package.json
#	examples/react/zod/package.json
#	package.json
#	packages/react-form/package.json
#	pnpm-lock.yaml
# Conflicts:
#	examples/react/array/package.json
#	examples/react/next-server-actions/package.json
#	examples/react/query-integration/package.json
#	examples/react/simple/package.json
#	examples/react/valibot/package.json
#	examples/react/yup/package.json
#	examples/react/zod/package.json
#	packages/react-form/package.json
#	pnpm-lock.yaml
@crutchcorn
crutchcorn requested a review from a team June 20, 2024 01:20
@crutchcorn crutchcorn changed the title [WIP] [FEAT] Remove Form Factory + Change React SSR Story [FEAT] Remove Form Factory + Change React SSR Story Jun 20, 2024
@crutchcorn
crutchcorn marked this pull request as ready for review June 20, 2024 01:21
@crutchcorn
crutchcorn merged commit a9e3852 into main Jun 20, 2024
@crutchcorn
crutchcorn deleted the remove-form-factory branch June 20, 2024 02:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Server Actions example leaks backend code

2 participants