Merge pull request #6546 from remotion-dev/upgrade-zod

`remotion`: Allow Zod v4 schemas to be used, `@remotion/zod-types-v3` backwards compatibility package

Author: JonnyBurger

bun.lock

@@ -95,7 +95,7 @@
 			"react-dom": "19.2.3",
 			"eslint": "9.19.0",
 			"prettier": "3.8.1",
-			"zod": "3.22.3",
+			"zod": "4.3.6",
 			"@types/react": "19.2.7",
 			"@types/react-dom": "19.2.3",
 			"@types/node": "20.12.14",

package.json

@@ -61,3 +61,4 @@ Monthly downloads of Remotion packages
 [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/webcodecs.svg?style=flat&color=black&label=@remotion/webcodecs)](https://npmcharts.com/compare/@remotion/webcodecs?minimal=true)  
 [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/whisper-web.svg?style=flat&color=black&label=@remotion/whisper-web)](https://npmcharts.com/compare/@remotion/whisper-web?minimal=true)  
 [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/zod-types.svg?style=flat&color=black&label=@remotion/zod-types)](https://npmcharts.com/compare/@remotion/zod-types?minimal=true)  
+[![NPM Downloads](https://img.shields.io/npm/dm/@remotion/zod-types-v3.svg?style=flat&color=black&label=@remotion/zod-types-v3)](https://npmcharts.com/compare/@remotion/zod-types-v3?minimal=true)  

packages/STATS.md

@@ -1,9 +1,9 @@
 export const EXTRA_PACKAGES: Record<string, string> = {
-	zod: '3.22.3',
 	mediabunny: '1.34.4',
+	zod: '4.3.6',
 };
 
 export const EXTRA_PACKAGES_DOCS: Record<string, string> = {
-	zod: 'https://www.remotion.dev/docs/schemas#prerequisites',
 	mediabunny: 'https://www.remotion.dev/docs/mediabunny/version',
+	zod: 'https://zod.dev',
 };

packages/cli/src/extra-packages.ts

@@ -72,6 +72,7 @@ export const listOfRemotionPackages = [
 	'@remotion/transitions',
 	'@remotion/media-parser',
 	'@remotion/zod-types',
+	'@remotion/zod-types-v3',
 	'@remotion/webcodecs',
 	'@remotion/convert',
 	'@remotion/captions',

packages/cli/src/list-of-remotion-packages.ts

@@ -59,7 +59,7 @@ export const CloudRunPayload = z.discriminatedUnion('type', [
 			.tuple([z.number(), z.number().nullable()])
 			.or(z.number())
 			.nullable(),
-		envVariables: z.record(z.string()),
+		envVariables: z.record(z.string(), z.string()),
 		chromiumOptions: chromiumOptions.optional(),
 		muted: z.boolean(),
 		outputBucket: z.string(),
@@ -76,12 +76,12 @@ export const CloudRunPayload = z.discriminatedUnion('type', [
 		colorSpace: z.enum(BrowserSafeApis.validColorSpaces).nullable(),
 		clientVersion: z.string(),
 		downloadBehavior,
-		metadata: z.record(z.string()).optional().nullable(),
+		metadata: z.record(z.string(), z.string()).optional().nullable(),
 		renderIdOverride: z.string().optional().nullable(),
 		renderStatusWebhook: z
 			.object({
 				url: z.string(),
-				headers: z.record(z.string()),
+				headers: z.record(z.string(), z.string()),
 				data: z.any(),
 				webhookProgressInterval: z.number().min(0).max(1).optional().nullable(),
 			})
@@ -101,7 +101,7 @@ export const CloudRunPayload = z.discriminatedUnion('type', [
 		imageFormat: stillImageFormat,
 		scale: z.number(),
 		privacy: z.enum(['public', 'private', 'no-acl']),
-		envVariables: z.record(z.string()),
+		envVariables: z.record(z.string(), z.string()),
 		chromiumOptions: chromiumOptions.optional(),
 		outputBucket: z.string(),
 		outName: z.string().nullable(),
@@ -113,12 +113,12 @@ export const CloudRunPayload = z.discriminatedUnion('type', [
 		offthreadVideoThreads: z.number().nullable(),
 		clientVersion: z.string(),
 		downloadBehavior,
-		metadata: z.record(z.string()).optional().nullable(),
+		metadata: z.record(z.string(), z.string()).optional().nullable(),
 		renderIdOverride: z.string().optional().nullable(),
 		renderStatusWebhook: z
 			.object({
 				url: z.string(),
-				headers: z.record(z.string()),
+				headers: z.record(z.string(), z.string()),
 				data: z.any(),
 				webhookProgressInterval: z.number().min(0).max(1).optional().nullable(),
 			})

packages/cloudrun/src/functions/helpers/payloads.ts

@@ -1,18 +1,16 @@
 import type {ComponentType} from 'react';
 import React, {Suspense, useContext, useEffect} from 'react';
 import {createPortal} from 'react-dom';
-import type {AnyZodObject, z} from 'zod';
+import type {z} from 'zod';
+import type {AnyZodObject} from './any-zod-type.js';
 import {
 	CanUseRemotionHooks,
 	CanUseRemotionHooksProvider,
 } from './CanUseRemotionHooks.js';
+import type {Codec} from './codec.js';
+import type {TComposition} from './CompositionManager.js';
 import {CompositionSetters} from './CompositionManagerContext.js';
 import {FolderContext} from './Folder.js';
-import {
-	PROPS_UPDATED_EXTERNALLY,
-	useResolvedVideoConfig,
-} from './ResolveCompositionConfig.js';
-import type {Codec} from './codec.js';
 import {serializeThenDeserializeInStudio} from './input-props-serialization.js';
 import {useIsPlayer} from './is-player.js';
 import {Loading} from './loading-indicator.js';
@@ -21,6 +19,10 @@ import {portalNode} from './portal-node.js';
 import type {InferProps, PropsIfHasProps} from './props-if-has-props.js';
 import type {ProResProfile} from './prores-profile.js';
 import type {PixelFormat, VideoImageFormat} from './render-types.js';
+import {
+	PROPS_UPDATED_EXTERNALLY,
+	useResolvedVideoConfig,
+} from './ResolveCompositionConfig.js';
 import {useDelayRender} from './use-delay-render.js';
 import {useLazyComponent} from './use-lazy-component.js';
 import {useRemotionEnvironment} from './use-remotion-environment.js';
@@ -196,12 +198,12 @@ const InnerComposition = <
 			component: lazy,
 			defaultProps: serializeThenDeserializeInStudio(
 				(defaultProps ?? {}) as z.output<Schema> & Props,
-			) as z.output<Schema> & Props,
+			) as InferProps<Schema, Props>,
 			nonce,
 			parentFolderName: parentName,
 			schema: schema ?? null,
 			calculateMetadata: compProps.calculateMetadata ?? null,
-		});
+		} as TComposition<Schema, Props>);
 
 		return () => {
 			unregisterComposition(id);

packages/core/src/Composition.tsx

@@ -1,6 +1,6 @@
 import type {ComponentType, LazyExoticComponent} from 'react';
 import React from 'react';
-import type {AnyZodObject} from 'zod';
+import type {AnyZodObject} from './any-zod-type.js';
 import type {CalculateMetadataFunction} from './Composition.js';
 import type {DownloadBehavior} from './download-behavior.js';
 import type {InferProps, PropsIfHasProps} from './props-if-has-props.js';

packages/core/src/CompositionManager.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import {createContext} from 'react';
-import type {AnyZodObject} from 'zod';
+import type {AnyZodObject} from './any-zod-type.js';
 import type {AnyComposition, TComposition} from './CompositionManager.js';
 import type {TFolder} from './Folder.js';
 import type {VideoConfig} from './video-config.js';

packages/core/src/CompositionManagerContext.tsx

@@ -5,7 +5,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import type {AnyZodObject} from 'zod';
+import type {AnyZodObject} from './any-zod-type.js';
 import type {TComposition} from './CompositionManager';
 import {compositionsRef, type AnyComposition} from './CompositionManager';
 import type {