chore: update playground setup (#615)

edmundhung · Apr 30, 2024 · a774b45 · a774b45
1 parent be32a14
commit a774b45
Show file tree

Hide file tree

Showing 31 changed files with 3,769 additions and 3,122 deletions.
diff --git a/examples/remix/package.json b/examples/remix/package.json
@@ -30,6 +30,6 @@
 		"typescript": "^4.9.5"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": "20.x"
 	}
 }
diff --git a/guide/package.json b/guide/package.json
@@ -21,7 +21,7 @@
 		"react-syntax-highlighter": "^15.5.0"
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20231218.0",
+		"@cloudflare/workers-types": "^4.20240419.0",
 		"@octokit/types": "^12.4.0",
 		"@remix-run/dev": "^2.5.1",
 		"@remix-run/eslint-config": "^2.5.1",
@@ -33,9 +33,9 @@
 		"eslint": "^8.35.0",
 		"tailwindcss": "^3.4.0",
 		"typescript": "^5.3.3",
-		"wrangler": "^3.22.1"
+		"wrangler": "^3.28.2"
 	},
 	"engines": {
-		"node": ">=16.13"
+		"node": "20.x"
 	}
 }
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
 		"zod": "3.21.4"
 	},
 	"engines": {
-		"node": ">=20"
+		"node": "20.x"
 	},
 	"lint-staged": {
 		"*.{js,jsx,ts,tsx}": "eslint --ignore-path .gitignore --cache --ext .js,.jsx,.ts,.tsx",

diff --git a/playground/app/root.tsx b/playground/app/root.tsx
@@ -1,4 +1,4 @@
-import type { V2_MetaFunction, LinksFunction } from '@remix-run/node';
+import type { MetaFunction, LinksFunction } from '@remix-run/node';
 import {
 	Links,
 	LiveReload,
@@ -7,13 +7,13 @@ import {
 	Scripts,
 	ScrollRestoration,
 } from '@remix-run/react';
-import stylesUrl from '~/styles.css';
+import stylesheet from '~/tailwind.css';
 
 export let links: LinksFunction = () => {
-	return [{ rel: 'stylesheet', href: stylesUrl }];
+	return [{ rel: 'stylesheet', href: stylesheet }];
 };
 
-export const meta: V2_MetaFunction = () => [
+export const meta: MetaFunction = () => [
 	{
 		charset: 'utf-8',
 		title: 'Conform Playground',

diff --git a/playground/app/routes/_index.tsx b/playground/app/routes/_index.tsx
@@ -1,6 +1,6 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
-import type { ActionArgs, LoaderArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
@@ -10,15 +10,15 @@ const schema = z.object({
 	name: z.string({ required_error: 'Name is required' }),
 });
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {
 		noClientValidate: url.searchParams.get('noClientValidate') === 'yes',
 	};
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const submission = parseWithZod(formData, { schema });
 

diff --git a/playground/app/routes/async-validation.tsx b/playground/app/routes/async-validation.tsx
@@ -5,7 +5,7 @@ import {
 	useForm,
 } from '@conform-to/react';
 import { conformZodMessage, parseWithZod } from '@conform-to/zod';
-import type { ActionArgs, LoaderArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
@@ -60,15 +60,15 @@ function createSchema(
 	});
 }
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {
 		noClientValidate: url.searchParams.get('noClientValidate') === 'yes',
 	};
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const submission = await parseWithZod(formData, {
 		schema: (intent) =>

diff --git a/playground/app/routes/collection.tsx b/playground/app/routes/collection.tsx
@@ -1,6 +1,10 @@
 import { getCollectionProps, getFormProps, useForm } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
-import { type LoaderArgs, type ActionArgs, json } from '@remix-run/node';
+import {
+	type LoaderFunctionArgs,
+	type ActionFunctionArgs,
+	json,
+} from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
 import { Playground, Field } from '~/components';
@@ -23,15 +27,15 @@ const schema = z.object({
 		.min(1, 'Required'),
 });
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {
 		noClientValidate: url.searchParams.get('noClientValidate') === 'yes',
 	};
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const submission = parseWithZod(formData, { schema });
 

diff --git a/playground/app/routes/custom-inputs.tsx b/playground/app/routes/custom-inputs.tsx
@@ -10,7 +10,7 @@ import {
 	getSelectProps,
 } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
-import type { ActionArgs, LoaderArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
@@ -28,7 +28,7 @@ const schema = z.object({
 	options: z.array(z.string()).min(1, 'At least one option is required'),
 });
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {
@@ -37,7 +37,7 @@ export async function loader({ request }: LoaderArgs) {
 	};
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const submission = parseWithZod(formData, { schema });
 

diff --git a/playground/app/routes/dom-value.tsx b/playground/app/routes/dom-value.tsx
@@ -5,7 +5,7 @@ import {
 	useForm,
 } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
-import type { ActionArgs, LoaderArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
@@ -22,15 +22,15 @@ const schema = z.discriminatedUnion('type', [
 	}),
 ]);
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {
 		noClientValidate: url.searchParams.get('noClientValidate') === 'yes',
 	};
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const submission = parseWithZod(formData, { schema });
 

diff --git a/playground/app/routes/file-upload.tsx b/playground/app/routes/file-upload.tsx
@@ -1,6 +1,6 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
-import type { ActionArgs, LoaderArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
@@ -24,15 +24,15 @@ const schema = z.object({
 		),
 });
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {
 		noClientValidate: url.searchParams.get('noClientValidate') === 'yes',
 	};
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const submission = parseWithZod(formData, { schema });
 

diff --git a/playground/app/routes/form-attributes.tsx b/playground/app/routes/form-attributes.tsx
@@ -1,10 +1,10 @@
 import { getFormProps, useForm } from '@conform-to/react';
-import { type LoaderArgs } from '@remix-run/node';
+import { type LoaderFunctionArgs } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import { useState } from 'react';
 import { Field, Playground } from '~/components';
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {

diff --git a/playground/app/routes/form-control.tsx b/playground/app/routes/form-control.tsx
@@ -7,7 +7,7 @@ import {
 	FormProvider,
 } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
-import type { ActionArgs, LoaderArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
@@ -19,15 +19,15 @@ const schema = z.object({
 	number: z.number({ required_error: 'Number is required' }),
 });
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {
 		noClientValidate: url.searchParams.get('noClientValidate') === 'yes',
 	};
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const submission = parseWithZod(formData, { schema });
 
@@ -36,7 +36,7 @@ export async function action({ request }: ActionArgs) {
 
 export default function FormControl() {
 	const { noClientValidate } = useLoaderData<typeof loader>();
-	const lastResult = useActionData();
+	const lastResult = useActionData<typeof action>();
 	const [form, fields] = useForm({
 		lastResult,
 		onValidate: !noClientValidate

diff --git a/playground/app/routes/input-attributes.tsx b/playground/app/routes/input-attributes.tsx
@@ -7,7 +7,11 @@ import {
 	getTextareaProps,
 	useForm,
 } from '@conform-to/react';
-import { json, type ActionArgs, type LoaderArgs } from '@remix-run/node';
+import {
+	json,
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
+} from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { Playground, Field, Alert } from '~/components';
 
@@ -21,15 +25,15 @@ interface Schema {
 	languages: string[];
 }
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return json({
 		enableDescription: url.searchParams.get('enableDescription') === 'yes',
 	});
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const initialValue: Record<string, string | string[]> = {};
 	const error: Record<string, string[]> = {};

diff --git a/playground/app/routes/input-event.tsx b/playground/app/routes/input-event.tsx
@@ -3,11 +3,11 @@ import {
 	useForm,
 	unstable_useControl as useControl,
 } from '@conform-to/react';
-import { type LoaderArgs } from '@remix-run/node';
+import { type LoaderFunctionArgs } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import { type FormEvent, useRef, useState } from 'react';
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {

diff --git a/playground/app/routes/metadata.tsx b/playground/app/routes/metadata.tsx
@@ -5,7 +5,7 @@ import {
 	useForm,
 } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
-import type { ActionArgs, LoaderArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
@@ -54,15 +54,15 @@ const getPrintableValue = (value: unknown) => {
 	);
 };
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {
 		noClientValidate: url.searchParams.get('noClientValidate') === 'yes',
 	};
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const submission = parseWithZod(formData, { schema });
 

diff --git a/playground/app/routes/nested-list.tsx b/playground/app/routes/nested-list.tsx
@@ -6,7 +6,7 @@ import {
 	FormStateInput,
 } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
-import type { ActionArgs, LoaderArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
@@ -20,15 +20,15 @@ const schema = z.object({
 		.array(),
 });
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const url = new URL(request.url);
 
 	return {
 		noClientValidate: url.searchParams.get('noClientValidate') === 'yes',
 	};
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData();
 	const submission = parseWithZod(formData, { schema });
 
@@ -37,7 +37,7 @@ export async function action({ request }: ActionArgs) {
 
 export default function App() {
 	const { noClientValidate } = useLoaderData<typeof loader>();
-	const lastResult = useActionData();
+	const lastResult = useActionData<typeof action>();
 	const [form, fields] = useForm({
 		lastResult,
 		onValidate: !noClientValidate