migrate: zod 4

frontend/package.json

@@ -41,7 +41,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@glideapps/glide-data-grid": "6.0.4-alpha16",
-    "@hookform/resolvers": "^3.10.0",
+    "@hookform/resolvers": "^5.2.2",
     "@img-comparison-slider/react": "^8.0.2",
     "@internationalized/date": "^3.9.0",
     "@lezer/common": "^1.2.3",
@@ -170,7 +170,7 @@
     "vscode-jsonrpc": "^8.2.1",
     "vscode-languageserver-protocol": "^3.17.5",
     "web-vitals": "^4.2.4",
-    "zod": "^3.25.76"
+    "zod": "^4.1.11"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

frontend/src/__tests__/main.test.tsx

@@ -4,8 +4,8 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   type AppConfig,
+  defaultUserConfig,
   parseAppConfig,
-  parseUserConfig,
 } from "@/core/config/config-schema";
 import {
   appConfigAtom,
@@ -41,7 +41,7 @@ describe("main", () => {
     store.set(showCodeInRunModeAtom, false);
     store.set(marimoVersionAtom, "unknown");
     store.set(appConfigAtom, parseAppConfig({}));
-    store.set(userConfigAtom, parseUserConfig({}));
+    store.set(userConfigAtom, defaultUserConfig());
     store.set(configOverridesAtom, {});
   });
 
@@ -106,7 +106,7 @@ describe("main", () => {
       el,
     );
     expect(error).toBeUndefined();
-    expect(store.get(userConfigAtom)).toEqual(parseUserConfig({}));
+    expect(store.get(userConfigAtom)).toEqual(defaultUserConfig());
     expect(store.get(configOverridesAtom)).toEqual({});
     expect(store.get(appConfigAtom)).toEqual(parseAppConfig({}));
     expect(store.get(viewStateAtom).mode).toBe("edit");

frontend/src/components/app-config/app-config-form.tsx

@@ -2,6 +2,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useId } from "react";
 import { useForm } from "react-hook-form";
+import type { z } from "zod";
 import {
   Form,
   FormControl,
@@ -42,8 +43,10 @@ export const AppConfigForm: React.FC = () => {
   const ipynbCheckboxId = useId();
 
   // Create form
-  const form = useForm<AppConfig>({
-    resolver: zodResolver(AppConfigSchema),
+  const form = useForm({
+    resolver: zodResolver(
+      AppConfigSchema as unknown as z.ZodType<unknown, AppConfig>,
+    ),
     defaultValues: config,
   });
 

frontend/src/components/app-config/user-config-form.tsx

@@ -15,6 +15,7 @@ import {
 import React, { useId, useRef } from "react";
 import { useLocale } from "react-aria";
 import { useForm } from "react-hook-form";
+import type z from "zod";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -124,8 +125,10 @@ export const UserConfigForm: React.FC = () => {
   const { saveUserConfig } = useRequestClient();
 
   // Create form
-  const form = useForm<UserConfig>({
-    resolver: zodResolver(UserConfigSchema),
+  const form = useForm({
+    resolver: zodResolver(
+      UserConfigSchema as unknown as z.ZodType<unknown, UserConfig>,
+    ),
     defaultValues: config,
   });
 

frontend/src/components/data-table/filters.ts

@@ -92,6 +92,7 @@ export function filterToFilterCondition(
     return {
       column_id: columnId,
       operator: filter.operator,
+      value: undefined,
     };
   }
 
@@ -179,12 +180,14 @@ export function filterToFilterCondition(
         return {
           column_id: columnId,
           operator: "is_true",
+          value: undefined,
         };
       }
       if (!filter.value) {
         return {
           column_id: columnId,
           operator: "is_false",
+          value: undefined,
         };
       }
 

frontend/src/components/editor/chrome/wrapper/storage.ts

@@ -3,7 +3,7 @@ import type { PanelGroupStorage } from "react-resizable-panels";
 import { z } from "zod";
 import { Objects } from "@/utils/objects";
 
-const schema = z.record(z.tuple([z.number(), z.number()]));
+const schema = z.record(z.string(), z.tuple([z.number(), z.number()]));
 
 let storedValue: string | null = null;
 

frontend/src/components/editor/database/__tests__/as-code.test.ts

@@ -101,6 +101,7 @@ describe("generateDatabaseCode", () => {
       type: "REST",
       uri: "http://localhost:8181",
       warehouse: "/path/to/warehouse",
+      token: undefined,
     },
   };
 
@@ -130,6 +131,7 @@ describe("generateDatabaseCode", () => {
     catalog: {
       type: "Glue",
       warehouse: "/path/to/warehouse",
+      uri: undefined,
     },
   };
 

frontend/src/components/editor/database/add-database-form.tsx

@@ -60,7 +60,7 @@ interface Props {
 
 interface ConnectionSchema {
   name: string;
-  schema: z.ZodType;
+  schema: z.ZodType<DatabaseConnection>;
   color: string;
   logo: DBLogoName;
   connectionLibraries: {
@@ -237,7 +237,7 @@ const DATA_CATALOGS = [
 ] satisfies ConnectionSchema[];
 
 const DatabaseSchemaSelector: React.FC<{
-  onSelect: (schema: z.ZodType) => void;
+  onSelect: (schema: z.ZodType<DatabaseConnection>) => void;
 }> = ({ onSelect }) => {
   const renderItem = ({ name, schema, color, logo }: ConnectionSchema) => {
     return (
@@ -276,13 +276,15 @@ const DatabaseSchemaSelector: React.FC<{
 const RENDERERS: FormRenderer[] = [ENV_RENDERER];
 
 const DatabaseForm: React.FC<{
-  schema: z.ZodType;
+  schema: z.ZodType<DatabaseConnection>;
   onSubmit: () => void;
   onBack: () => void;
 }> = ({ schema, onSubmit, onBack }) => {
   const form = useForm<DatabaseConnection>({
     defaultValues: getDefaults(schema),
-    resolver: zodResolver(schema),
+    resolver: zodResolver(
+      schema as unknown as z.ZodType<unknown, DatabaseConnection>,
+    ),
     reValidateMode: "onChange",
   });
 
@@ -357,7 +359,8 @@ const DatabaseForm: React.FC<{
 };
 
 const AddDatabaseForm: React.FC<Props> = ({ onSubmit }) => {
-  const [selectedSchema, setSelectedSchema] = useState<z.ZodType | null>(null);
+  const [selectedSchema, setSelectedSchema] =
+    useState<z.ZodType<DatabaseConnection> | null>(null);
 
   if (!selectedSchema) {
     return <DatabaseSchemaSelector onSelect={setSelectedSchema} />;

frontend/src/components/editor/database/as-code.ts

@@ -514,7 +514,7 @@ class PyIcebergGenerator extends CodeGenerator<"iceberg"> {
   }
 
   generateConnectionCode(): string {
-    let options: Record<string, string | number | boolean> = {
+    let options: Record<string, string | number | boolean | undefined> = {
       ...this.connection.catalog,
     };
     // Remove k='type' and v=nullish values

frontend/src/components/editor/database/form-renderers.tsx

@@ -96,7 +96,7 @@ export const ENV_RENDERER: FormRenderer<z.ZodString | z.ZodNumber> = {
   isMatch: (schema: z.ZodType): schema is z.ZodString | z.ZodNumber => {
     // string or number with optionsRegex
     if (schema instanceof z.ZodString || schema instanceof z.ZodNumber) {
-      const { optionRegex } = FieldOptions.parse(schema._def.description || "");
+      const { optionRegex } = FieldOptions.parse(schema.description || "");
       return Boolean(optionRegex);
     }
 
@@ -110,7 +110,7 @@ export const ENV_RENDERER: FormRenderer<z.ZodString | z.ZodNumber> = {
       label,
       description,
       optionRegex = "",
-    } = FieldOptions.parse(schema._def.description || "");
+    } = FieldOptions.parse(schema.description || "");
 
     const [recommendedKeys, otherKeys] = partition(secretKeys, (key) =>
       new RegExp(optionRegex, "i").test(key),

frontend/src/components/editor/database/schemas.ts

@@ -17,15 +17,22 @@ function passwordField() {
 }
 
 function tokenField(label?: string, required?: boolean) {
-  const field = z.string().describe(
+  let field: z.ZodString | z.ZodOptional<z.ZodString> = z.string();
+  if (required) {
+    field = field.nonempty();
+  } else {
+    field = field.optional();
+  }
+
+  field = field.describe(
     FieldOptions.of({
       label: label || "Token",
       inputType: "password",
       placeholder: "token",
       optionRegex: ".*token.*",
     }),
   );
-  return required ? field.nonempty() : field.optional();
+  return field;
 }
 
 function warehouseNameField() {
@@ -42,12 +49,16 @@ function warehouseNameField() {
 }
 
 function uriField(label?: string, required?: boolean) {
-  const field = z
-    .string()
-    .describe(
-      FieldOptions.of({ label: label || "URI", optionRegex: ".*uri.*" }),
-    );
-  return required ? field.nonempty() : field.optional();
+  let field: z.ZodString | z.ZodOptional<z.ZodString> = z.string();
+  if (required) {
+    field = field.nonempty();
+  } else {
+    field = field.optional();
+  }
+
+  return field.describe(
+    FieldOptions.of({ label: label || "URI", optionRegex: ".*uri.*" }),
+  );
 }
 
 function hostField(label?: string) {
@@ -112,7 +123,7 @@ function portField(defaultPort?: number) {
     });
 
   if (defaultPort !== undefined) {
-    return field.default(defaultPort.toString());
+    return field.default(defaultPort);
   }
 
   return field;
@@ -383,6 +394,7 @@ export const IcebergConnectionSchema = z.object({
     ])
     .default({
       type: "REST",
+      token: undefined,
     })
     .describe(FieldOptions.of({ special: "tabs" })),
 });

frontend/src/components/editor/package-alert.tsx

@@ -15,6 +15,7 @@ import {
 import type React from "react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import type { z } from "zod";
 import {
   Form,
   FormControl,
@@ -359,8 +360,10 @@ const PackageManagerForm: React.FC = () => {
   const { saveUserConfig } = useRequestClient();
 
   // Create form
-  const form = useForm<UserConfig>({
-    resolver: zodResolver(UserConfigSchema),
+  const form = useForm({
+    resolver: zodResolver(
+      UserConfigSchema as unknown as z.ZodType<unknown, UserConfig>,
+    ),
     defaultValues: config,
   });
 

frontend/src/components/editor/renderers/types.ts

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import type { ZodType, ZodTypeDef } from "zod";
+import type { ZodType } from "zod";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
 import type { AppConfig } from "@/core/config/config-schema";
 import type { AppMode } from "@/core/mode";
@@ -64,7 +64,7 @@ export interface ICellRendererPlugin<S, L> {
   /**
    * Validate the layout data. Use [zod](https://zod.dev/) to validate the data.
    */
-  validator: ZodType<S, ZodTypeDef, unknown>;
+  validator: ZodType<S>;
 
   deserializeLayout: (layout: S, cells: CellData[]) => L;
   serializeLayout: (layout: L, cells: CellData[]) => S;