Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Jun 20, 2024

Conversation

crutchcorn
Copy link
Member

@crutchcorn crutchcorn commented Jun 3, 2024

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

Copy link

nx-cloud bot commented Jun 3, 2024

☁️ 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
1 of 2 checks passed
@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