From ce8bbdee63561a1f52f920f4548d7194d6c18cd5 Mon Sep 17 00:00:00 2001 From: Edmund Hung Date: Mon, 11 Mar 2024 21:28:40 +0100 Subject: [PATCH] Revert "fix: wrap form control in flush sync" (#513) --- packages/conform-dom/form.ts | 12 ++++------ packages/conform-react/hooks.ts | 9 ++----- packages/conform-react/package.json | 6 ++--- playground/app/components.tsx | 2 +- playground/app/routes/form-control.tsx | 17 +------------ pnpm-lock.yaml | 31 +++--------------------- tests/integrations/form-control.spec.ts | 32 ++++--------------------- 7 files changed, 17 insertions(+), 92 deletions(-) diff --git a/packages/conform-dom/form.ts b/packages/conform-dom/form.ts index 9f8e1575..3408c539 100644 --- a/packages/conform-dom/form.ts +++ b/packages/conform-dom/form.ts @@ -176,11 +176,6 @@ export type FormOptions = { submitter: HTMLInputElement | HTMLButtonElement | null; formData: FormData; }) => Submission; - - /** - * To schedule when an intent should be dispatched. - */ - onSchedule?: (callback: () => void) => void; }; export type SubscriptionSubject = { @@ -971,10 +966,11 @@ export function createFormContext< } function createFormControl(type: Type) { - const schedule = - latestOptions.onSchedule ?? ((callback: () => void) => callback()); const control = (payload: any = {}) => - schedule(() => dispatch({ type, payload })); + dispatch({ + type, + payload, + }); return Object.assign(control, { getButtonProps(payload: any = {}) { diff --git a/packages/conform-react/hooks.ts b/packages/conform-react/hooks.ts index c214ec14..c42dcf61 100644 --- a/packages/conform-react/hooks.ts +++ b/packages/conform-react/hooks.ts @@ -1,6 +1,5 @@ import { type FormId, type FieldName } from '@conform-to/dom'; import { useEffect, useId, useState, useLayoutEffect } from 'react'; -import { flushSync } from 'react-dom'; import { type FormMetadata, type FieldMetadata, @@ -50,7 +49,7 @@ export function useForm< FormError = string[], >( options: Pretty< - Omit, 'formId' | 'onSchedule'> & { + Omit, 'formId'> & { /** * The form id. If not provided, a random id will be generated. */ @@ -71,11 +70,7 @@ export function useForm< const { id, ...formConfig } = options; const formId = useFormId(id); const [context] = useState(() => - createFormContext({ - ...formConfig, - onSchedule: (callback: () => void) => flushSync(callback), - formId, - }), + createFormContext({ ...formConfig, formId }), ); useSafeLayoutEffect(() => { diff --git a/packages/conform-react/package.json b/packages/conform-react/package.json index 4355154c..cc452062 100644 --- a/packages/conform-react/package.json +++ b/packages/conform-react/package.json @@ -33,13 +33,11 @@ "@conform-to/dom": "1.0.3" }, "devDependencies": { - "@types/react": "^18.2.64", - "@types/react-dom": "^18.2.20", + "@types/react": "^18.2.43", "react": "^18.2.0" }, "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" + "react": ">=18" }, "keywords": [ "constraint-validation", diff --git a/playground/app/components.tsx b/playground/app/components.tsx index e2a71680..9de84307 100644 --- a/playground/app/components.tsx +++ b/playground/app/components.tsx @@ -5,7 +5,7 @@ interface PlaygroundProps { title: string; description?: ReactNode; form?: string; - result?: Record | null | undefined; + result?: Record; formAction?: string; formMethod?: string; formEncType?: string; diff --git a/playground/app/routes/form-control.tsx b/playground/app/routes/form-control.tsx index 2cbd55af..c23a88e8 100644 --- a/playground/app/routes/form-control.tsx +++ b/playground/app/routes/form-control.tsx @@ -48,7 +48,7 @@ export default function FormControl() {
- + @@ -115,21 +115,6 @@ export default function FormControl() { > Reset form - diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0e140a9e..a4a0ae75 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -633,16 +633,10 @@ importers: '@conform-to/dom': specifier: 1.0.3 version: link:../conform-dom - react-dom: - specifier: '>=18' - version: 18.2.0(react@18.2.0) devDependencies: '@types/react': - specifier: ^18.2.64 - version: 18.2.64 - '@types/react-dom': - specifier: ^18.2.20 - version: 18.2.20 + specifier: ^18.2.43 + version: 18.2.43 react: specifier: ^18.2.0 version: 18.2.0 @@ -10569,15 +10563,6 @@ packages: dependencies: '@types/react': 18.2.58 - /@types/react-dom@18.2.20: - resolution: - { - integrity: sha512-HXN/biJY8nv20Cn9ZbCFq3liERd4CozVZmKbaiZ9KiKTrWqsP7eoGDO6OOGvJQwoVFuiXaiJ7nBBjiFFbRmQMQ==, - } - dependencies: - '@types/react': 18.2.64 - dev: true - /@types/react-syntax-highlighter@15.5.11: resolution: { @@ -10593,7 +10578,7 @@ packages: integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==, } dependencies: - '@types/react': 18.2.64 + '@types/react': 18.2.58 dev: false /@types/react@18.2.42: @@ -10637,16 +10622,6 @@ packages: '@types/scheduler': 0.16.8 csstype: 3.1.3 - /@types/react@18.2.64: - resolution: - { - integrity: sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==, - } - dependencies: - '@types/prop-types': 15.7.11 - '@types/scheduler': 0.16.8 - csstype: 3.1.3 - /@types/resolve@1.17.1: resolution: { diff --git a/tests/integrations/form-control.spec.ts b/tests/integrations/form-control.spec.ts index e0668ef9..3369c739 100644 --- a/tests/integrations/form-control.spec.ts +++ b/tests/integrations/form-control.spec.ts @@ -13,18 +13,10 @@ function getFieldset(form: Locator) { clearMessage: form.locator('button:text("Clear message")'), resetMessage: form.locator('button:text("Reset message")'), resetForm: form.locator('button:text("Reset form")'), - resetNumberWithMessageUpdated: form.locator( - 'button:text("Reset number with message updated")', - ), }; } -async function runTest( - page: Page, - options: { - clientValidate?: boolean; - } = {}, -) { +async function runValidationScenario(page: Page) { const playground = getPlayground(page); const fieldset = getFieldset(playground.container); @@ -63,33 +55,17 @@ async function runTest( await expect(fieldset.number).toHaveValue(''); await expect(fieldset.message).toHaveValue(''); await expect(playground.error).toHaveText(['', '', '']); - - if (options.clientValidate) { - await fieldset.number.fill('123'); - await expect.poll(playground.result).toStrictEqual({ - number: '123', - }); - - await fieldset.resetNumberWithMessageUpdated.click(); - await expect(fieldset.number).toHaveValue(''); - await expect(fieldset.message).toHaveValue('Hello World'); - await expect.poll(playground.result).toStrictEqual({ - message: 'Hello World', - }); - } } test.describe('With JS', () => { test('Client Validation', async ({ page }) => { await page.goto('/form-control'); - await runTest(page, { - clientValidate: true, - }); + await runValidationScenario(page); }); test('Server Validation', async ({ page }) => { await page.goto('/form-control?noClientValidate=yes'); - await runTest(page); + await runValidationScenario(page); }); }); @@ -98,6 +74,6 @@ test.describe('No JS', () => { test('Validation', async ({ page }) => { await page.goto('/form-control'); - await runTest(page); + await runValidationScenario(page); }); });