@remotion/studio: Save default props immediately

packages/core/src/Composition.tsx

@@ -19,10 +19,7 @@ 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 {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';
@@ -225,16 +222,6 @@ const InnerComposition = <
 		unregisterComposition,
 	]);
 
-	useEffect(() => {
-		window.dispatchEvent(
-			new CustomEvent<{resetUnsaved: string | null}>(PROPS_UPDATED_EXTERNALLY, {
-				detail: {
-					resetUnsaved: id,
-				},
-			}),
-		);
-	}, [defaultProps, id]);
-
 	const resolved = useResolvedVideoConfig(id);
 
 	if (

packages/core/src/CompositionManagerContext.tsx

@@ -57,10 +57,6 @@ export type CompositionManagerSetters = {
 	) => void;
 	unregisterFolder: (name: string, parent: string | null) => void;
 	setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
-	updateCompositionDefaultProps: (
-		id: string,
-		newDefaultProps: Record<string, unknown>,
-	) => void;
 	// This is not a setter but also a value that does not change
 	onlyRenderComposition: string | null;
 };
@@ -85,6 +81,5 @@ export const CompositionSetters = createContext<CompositionManagerSetters>({
 	registerFolder: () => undefined,
 	unregisterFolder: () => undefined,
 	setCanvasContent: () => undefined,
-	updateCompositionDefaultProps: () => undefined,
 	onlyRenderComposition: null,
 });

packages/core/src/CompositionManagerProvider.tsx

@@ -111,42 +111,20 @@ export const CompositionManagerProvider = ({
 		};
 	}, []);
 
-	const updateCompositionDefaultProps = useCallback(
-		(id: string, newDefaultProps: Record<string, unknown>) => {
-			setCompositions((comps) => {
-				const updated = comps.map((c) => {
-					if (c.id === id) {
-						return {
-							...c,
-							defaultProps: newDefaultProps,
-						};
-					}
-
-					return c;
-				});
-
-				return updated;
-			});
-		},
-		[],
-	);
-
 	const compositionManagerSetters = useMemo((): CompositionManagerSetters => {
 		return {
 			registerComposition,
 			unregisterComposition,
 			registerFolder,
 			unregisterFolder,
 			setCanvasContent,
-			updateCompositionDefaultProps,
 			onlyRenderComposition,
 		};
 	}, [
 		registerComposition,
 		registerFolder,
 		unregisterComposition,
 		unregisterFolder,
-		updateCompositionDefaultProps,
 		onlyRenderComposition,
 	]);
 

packages/core/src/EditorProps.tsx

@@ -18,17 +18,13 @@ export type EditorPropsContextType = {
 			| Record<string, unknown>
 			| ((oldProps: Record<string, unknown>) => Record<string, unknown>);
 	}) => void;
-	resetUnsaved: (compositionId: string) => void;
 };
 
 export const EditorPropsContext = createContext<EditorPropsContextType>({
 	props: {},
 	updateProps: () => {
 		throw new Error('Not implemented');
 	},
-	resetUnsaved: () => {
-		throw new Error('Not implemented');
-	},
 });
 
 export const editorPropsProviderRef = React.createRef<{
@@ -72,18 +68,6 @@ export const EditorPropsProvider: React.FC<{
 		[],
 	);
 
-	const resetUnsaved = useCallback((compositionId: string) => {
-		setProps((prev) => {
-			if (prev[compositionId]) {
-				const newProps = {...prev};
-				delete newProps[compositionId];
-				return newProps;
-			}
-
-			return prev;
-		});
-	}, []);
-
 	useImperativeHandle(editorPropsProviderRef, () => {
 		return {
 			getProps: () => props,
@@ -92,8 +76,8 @@ export const EditorPropsProvider: React.FC<{
 	}, [props]);
 
 	const ctx = useMemo((): EditorPropsContextType => {
-		return {props, updateProps, resetUnsaved};
-	}, [props, resetUnsaved, updateProps]);
+		return {props, updateProps};
+	}, [props, updateProps]);
 
 	return (
 		<EditorPropsContext.Provider value={ctx}>

packages/core/src/ResolveCompositionConfig.tsx

@@ -43,8 +43,6 @@ export const needsResolution = (composition: AnyComposition) => {
 	return Boolean(composition.calculateMetadata);
 };
 
-export const PROPS_UPDATED_EXTERNALLY = 'remotion.propsUpdatedExternally';
-
 export const useResolvedVideoConfig = (
 	preferredCompositionId: string | null,
 ): VideoConfigState | null => {

packages/core/src/internals.ts

@@ -83,7 +83,6 @@ import {
 	resolveVideoConfigOrCatch,
 } from './resolve-video-config.js';
 import {
-	PROPS_UPDATED_EXTERNALLY,
 	ResolveCompositionContext,
 	resolveCompositionsRef,
 	useResolvedVideoConfig,
@@ -256,7 +255,6 @@ export const Internals = {
 	PreviewSizeContext,
 	calculateScale,
 	editorPropsProviderRef,
-	PROPS_UPDATED_EXTERNALLY,
 	validateRenderAsset,
 	Log,
 	LogLevelContext,

packages/studio-server/src/preview-server/api-routes.ts

@@ -3,7 +3,6 @@ import type {ApiHandler} from './api-types';
 import {handleAddRender} from './routes/add-render';
 import {applyCodemodHandler} from './routes/apply-codemod';
 import {applyVisualControlHandler} from './routes/apply-visual-control-change';
-import {canUpdateDefaultPropsHandler} from './routes/can-update-default-props';
 import {handleCancelRender} from './routes/cancel-render';
 import {deleteStaticFileHandler} from './routes/delete-static-file';
 import {handleInstallPackage} from './routes/install-dependency';
@@ -12,8 +11,10 @@ import {projectInfoHandler} from './routes/project-info';
 import {handleRemoveRender} from './routes/remove-render';
 import {handleRestartStudio} from './routes/restart-studio';
 import {saveSequencePropsHandler} from './routes/save-sequence-props';
+import {subscribeToDefaultProps} from './routes/subscribe-to-default-props';
 import {subscribeToFileExistence} from './routes/subscribe-to-file-existence';
 import {subscribeToSequenceProps} from './routes/subscribe-to-sequence-props';
+import {unsubscribeFromDefaultProps} from './routes/unsubscribe-from-default-props';
 import {unsubscribeFromFileExistence} from './routes/unsubscribe-from-file-existence';
 import {unsubscribeFromSequenceProps} from './routes/unsubscribe-from-sequence-props';
 import {handleUpdate} from './routes/update-available';
@@ -34,7 +35,8 @@ export const allApiRoutes: {
 	'/api/update-default-props': updateDefaultPropsHandler,
 	'/api/apply-visual-control-change': applyVisualControlHandler,
 	'/api/apply-codemod': applyCodemodHandler,
-	'/api/can-update-default-props': canUpdateDefaultPropsHandler,
+	'/api/subscribe-to-default-props': subscribeToDefaultProps,
+	'/api/unsubscribe-from-default-props': unsubscribeFromDefaultProps,
 	'/api/subscribe-to-sequence-props': subscribeToSequenceProps,
 	'/api/unsubscribe-from-sequence-props': unsubscribeFromSequenceProps,
 	'/api/save-sequence-props': saveSequencePropsHandler,

packages/studio-server/src/preview-server/default-props-watchers.ts

@@ -0,0 +1,149 @@
+import type {CanUpdateDefaultPropsResponse} from '@remotion/studio-shared';
+import {installFileWatcher} from '../file-watcher';
+import {waitForLiveEventsListener} from './live-events';
+import {computeCanUpdateDefaultProps} from './routes/can-update-default-props';
+
+// Global file watcher — at most one for the root file
+let globalWatcher: {
+	unwatch: () => void;
+	rootFile: string;
+	refCount: number;
+} | null = null;
+
+// Per-compositionId set of subscribed clientIds
+const subscriptions: Record<string, Set<string>> = {};
+
+// Cached config for recomputation on file change
+let watcherConfig: {
+	remotionRoot: string;
+	entryPoint: string;
+} | null = null;
+
+const ensureGlobalWatcher = (rootFile: string) => {
+	if (globalWatcher) {
+		globalWatcher.refCount++;
+		return;
+	}
+
+	const {unwatch} = installFileWatcher({
+		file: rootFile,
+		onChange: (type) => {
+			if (type === 'deleted') {
+				return;
+			}
+
+			if (!watcherConfig) {
+				return;
+			}
+
+			const compositionIds = Object.keys(subscriptions);
+			for (const compositionId of compositionIds) {
+				if (subscriptions[compositionId].size === 0) {
+					continue;
+				}
+
+				const clientIds = [...subscriptions[compositionId]];
+				computeCanUpdateDefaultProps({
+					compositionId,
+					remotionRoot: watcherConfig.remotionRoot,
+					entryPoint: watcherConfig.entryPoint,
+				}).then(({result: newResult}) => {
+					waitForLiveEventsListener().then((listener) => {
+						const event = {
+							type: 'default-props-updatable-changed' as const,
+							compositionId,
+							result: newResult,
+						};
+						for (const cId of clientIds) {
+							listener.sendEventToClientId(cId, event);
+						}
+					});
+				});
+			}
+		},
+	});
+
+	globalWatcher = {unwatch, rootFile, refCount: 1};
+};
+
+const releaseGlobalWatcher = () => {
+	if (!globalWatcher) {
+		return;
+	}
+
+	globalWatcher.refCount--;
+	if (globalWatcher.refCount <= 0) {
+		globalWatcher.unwatch();
+		globalWatcher = null;
+		watcherConfig = null;
+	}
+};
+
+export const subscribeToDefaultPropsWatchers = async ({
+	compositionId,
+	clientId,
+	remotionRoot,
+	entryPoint,
+}: {
+	compositionId: string;
+	clientId: string;
+	remotionRoot: string;
+	entryPoint: string;
+}): Promise<CanUpdateDefaultPropsResponse> => {
+	const {result, rootFile} = await computeCanUpdateDefaultProps({
+		compositionId,
+		remotionRoot,
+		entryPoint,
+	});
+
+	// Remove from any previous subscription for this client+composition
+	if (subscriptions[compositionId]?.has(clientId)) {
+		subscriptions[compositionId].delete(clientId);
+		releaseGlobalWatcher();
+	}
+
+	if (rootFile) {
+		watcherConfig = {remotionRoot, entryPoint};
+
+		if (!subscriptions[compositionId]) {
+			subscriptions[compositionId] = new Set();
+		}
+
+		subscriptions[compositionId].add(clientId);
+		ensureGlobalWatcher(rootFile);
+	}
+
+	return result;
+};
+
+export const unsubscribeFromDefaultPropsWatchers = ({
+	compositionId,
+	clientId,
+}: {
+	compositionId: string;
+	clientId: string;
+}) => {
+	if (!subscriptions[compositionId]?.has(clientId)) {
+		return;
+	}
+
+	subscriptions[compositionId].delete(clientId);
+	if (subscriptions[compositionId].size === 0) {
+		delete subscriptions[compositionId];
+	}
+
+	releaseGlobalWatcher();
+};
+
+export const unsubscribeClientDefaultPropsWatchers = (clientId: string) => {
+	for (const compositionId of Object.keys(subscriptions)) {
+		if (subscriptions[compositionId].has(clientId)) {
+			subscriptions[compositionId].delete(clientId);
+			if (subscriptions[compositionId].size === 0) {
+				delete subscriptions[compositionId];
+			}
+
+			releaseGlobalWatcher();
+		}
+	}
+};

packages/studio-server/src/preview-server/live-events.ts

@@ -6,6 +6,7 @@ import type {
 import type {LogLevel} from '@remotion/renderer';
 import type {EventSourceEvent} from '@remotion/studio-shared';
 import {printServerReadyComment} from '../server-ready';
+import {unsubscribeClientDefaultPropsWatchers} from './default-props-watchers';
 import {unsubscribeClientFileExistenceWatchers} from './file-existence-watchers';
 import {unsubscribeClientSequencePropsWatchers} from './sequence-props-watchers';
 
@@ -16,6 +17,7 @@ type Client = {
 
 export type LiveEventsServer = {
 	sendEventToClient: (event: EventSourceEvent) => void;
+	sendEventToClientId: (clientId: string, event: EventSourceEvent) => void;
 	router: (request: IncomingMessage, response: ServerResponse) => Promise<void>;
 	closeConnections: () => Promise<void>;
 };
@@ -59,6 +61,7 @@ export const makeLiveEventsRouter = (logLevel: LogLevel): LiveEventsServer => {
 		}
 
 		request.on('close', () => {
+			unsubscribeClientDefaultPropsWatchers(clientId);
 			unsubscribeClientFileExistenceWatchers(clientId);
 			unsubscribeClientSequencePropsWatchers(clientId);
 			clients = clients.filter((client) => client.id !== clientId);
@@ -84,8 +87,16 @@ export const makeLiveEventsRouter = (logLevel: LogLevel): LiveEventsServer => {
 		});
 	};
 
+	const sendEventToClientId = (clientId: string, event: EventSourceEvent) => {
+		const client = clients.find((c) => c.id === clientId);
+		if (client) {
+			client.response.write(serializeMessage(event));
+		}
+	};
+
 	return {
 		sendEventToClient,
+		sendEventToClientId,
 		router,
 		closeConnections: () => {
 			return Promise.all(