Merge branch 'main' into jonny/split-sequence-props-tests

Author: JonnyBurger

packages/core/src/Composition.tsx

@@ -199,7 +199,7 @@ const InnerComposition = <
 			defaultProps: serializeThenDeserializeInStudio(
 				(defaultProps ?? {}) as z.output<Schema> & Props,
 			) as InferProps<Schema, Props>,
-			nonce,
+			nonce: nonce.get(),
 			parentFolderName: parentName,
 			schema: schema ?? null,
 			calculateMetadata: compProps.calculateMetadata ?? null,

packages/core/src/CompositionManager.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type {AnyZodObject} from './any-zod-type.js';
 import type {CalculateMetadataFunction} from './Composition.js';
 import type {DownloadBehavior} from './download-behavior.js';
+import type {NonceHistory} from './nonce.js';
 import type {InferProps, PropsIfHasProps} from './props-if-has-props.js';
 import type {SequenceSchema} from './sequence-field-schema.js';
 
@@ -18,7 +19,7 @@ export type TComposition<
 	folderName: string | null;
 	parentFolderName: string | null;
 	component: LazyExoticComponent<ComponentType<Props>> | ComponentType<Props>;
-	nonce: number;
+	nonce: NonceHistory;
 	schema: Schema | null;
 	calculateMetadata: CalculateMetadataFunction<
 		InferProps<Schema, Props>
@@ -102,7 +103,7 @@ export type TSequence = {
 	parent: string | null;
 	rootId: string;
 	showInTimeline: boolean;
-	nonce: number;
+	nonce: NonceHistory;
 	loopDisplay: LoopDisplay | undefined;
 	stack: string | null;
 	premountDisplay: number | null;

packages/core/src/CompositionManagerContext.tsx

@@ -3,6 +3,7 @@ import {createContext} from 'react';
 import type {AnyZodObject} from './any-zod-type.js';
 import type {AnyComposition, TComposition} from './CompositionManager.js';
 import type {TFolder} from './Folder.js';
+import type {NonceHistory} from './nonce.js';
 import type {VideoConfig} from './video-config.js';
 
 export type BaseMetadata = Pick<
@@ -49,7 +50,11 @@ export type CompositionManagerSetters = {
 		comp: TComposition<Schema, Props>,
 	) => void;
 	unregisterComposition: (name: string) => void;
-	registerFolder: (name: string, parent: string | null) => void;
+	registerFolder: (
+		name: string,
+		parent: string | null,
+		nonce: NonceHistory,
+	) => void;
 	unregisterFolder: (name: string, parent: string | null) => void;
 	setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
 	updateCompositionDefaultProps: (

packages/core/src/CompositionManagerProvider.tsx

@@ -19,6 +19,7 @@ import {
 } from './CompositionManagerContext';
 import type {BaseMetadata} from './CompositionManagerContext.js';
 import type {TFolder} from './Folder';
+import type {NonceHistory} from './nonce.js';
 
 export const CompositionManagerProvider = ({
 	children,
@@ -65,11 +66,7 @@ export const CompositionManagerProvider = ({
 					);
 				}
 
-				const value = [...comps, comp]
-					.slice()
-
-					.sort((a, b) => a.nonce - b.nonce) as AnyComposition[];
-				return value;
+				return [...comps, comp] as AnyComposition[];
 			});
 		},
 		[updateCompositions],
@@ -81,17 +78,21 @@ export const CompositionManagerProvider = ({
 		});
 	}, []);
 
-	const registerFolder = useCallback((name: string, parent: string | null) => {
-		setFolders((prevFolders) => {
-			return [
-				...prevFolders,
-				{
-					name,
-					parent,
-				},
-			];
-		});
-	}, []);
+	const registerFolder = useCallback(
+		(name: string, parent: string | null, nonce: NonceHistory) => {
+			setFolders((prevFolders) => {
+				return [
+					...prevFolders,
+					{
+						name,
+						parent,
+						nonce,
+					},
+				];
+			});
+		},
+		[],
+	);
 
 	const unregisterFolder = useCallback(
 		(name: string, parent: string | null) => {

packages/core/src/Folder.tsx

@@ -1,12 +1,15 @@
 import type {FC} from 'react';
 import {createContext, useContext, useEffect, useMemo} from 'react';
 import {CompositionSetters} from './CompositionManagerContext.js';
+import type {NonceHistory} from './nonce.js';
+import {useNonce} from './nonce.js';
 import {truthy} from './truthy.js';
 import {validateFolderName} from './validation/validate-folder-name.js';
 
 export type TFolder = {
 	name: string;
 	parent: string | null;
+	nonce: NonceHistory;
 };
 
 type FolderContextType = {
@@ -29,6 +32,7 @@ export const Folder: FC<{
 }> = ({name, children}) => {
 	const parent = useContext(FolderContext);
 	const {registerFolder, unregisterFolder} = useContext(CompositionSetters);
+	const nonce = useNonce();
 
 	validateFolderName(name);
 
@@ -45,12 +49,19 @@ export const Folder: FC<{
 	}, [name, parentName]);
 
 	useEffect(() => {
-		registerFolder(name, parentName);
+		registerFolder(name, parentName, nonce.get());
 
 		return () => {
 			unregisterFolder(name, parentName);
 		};
-	}, [name, parent.folderName, parentName, registerFolder, unregisterFolder]);
+	}, [
+		name,
+		parent.folderName,
+		parentName,
+		registerFolder,
+		unregisterFolder,
+		nonce,
+	]);
 
 	return (
 		<FolderContext.Provider value={value}>{children}</FolderContext.Provider>

packages/core/src/RemotionRoot.tsx

@@ -21,7 +21,6 @@ export const RemotionRootContexts: React.FC<{
 	readonly videoEnabled: boolean;
 	readonly audioEnabled: boolean;
 	readonly frameState: Record<string, number> | null;
-	readonly nonceContextSeed: number;
 	readonly visualModeEnabled: boolean;
 }> = ({
 	children,
@@ -31,16 +30,14 @@ export const RemotionRootContexts: React.FC<{
 	videoEnabled,
 	audioEnabled,
 	frameState,
-	nonceContextSeed,
 	visualModeEnabled,
 }) => {
 	const nonceContext = useMemo((): TNonceContext => {
 		let counter = 0;
 		return {
 			getNonce: () => counter++,
 		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [nonceContextSeed]);
+	}, []);
 
 	const logging: LoggingContextValue = useMemo(() => {
 		return {logLevel, mountTime: Date.now()};

packages/core/src/Sequence.tsx

@@ -223,7 +223,7 @@ const RegularSequenceRefForwardingFunction: React.ForwardRefRenderFunction<
 			type: 'sequence',
 			rootId,
 			showInTimeline,
-			nonce,
+			nonce: nonce.get(),
 			loopDisplay,
 			stack: stack ?? inheritedStack,
 			premountDisplay: premountDisplay ?? null,

packages/core/src/index.ts

@@ -148,6 +148,7 @@ export {DownloadBehavior} from './download-behavior.js';
 export * from './easing.js';
 export * from './Folder.js';
 export * from './freeze.js';
+export type {NonceHistory} from './nonce.js';
 export {getRemotionEnvironment} from './get-remotion-environment.js';
 export {getStaticFiles, StaticFile} from './get-static-files.js';
 export * from './IFrame.js';

packages/core/src/internals.ts

@@ -63,6 +63,7 @@ import type {LoggingContextValue} from './log-level-context.js';
 import {LogLevelContext, useLogLevel} from './log-level-context.js';
 import {Log} from './log.js';
 import {MaxMediaCacheSizeContext} from './max-video-cache-size.js';
+import type {NonceHistory} from './nonce.js';
 import {NonceContext} from './nonce.js';
 import {playbackLogging} from './playback-logging.js';
 import {portalNode} from './portal-node.js';
@@ -301,4 +302,5 @@ export type {
 	ScheduleAudioNodeOptions,
 	CanUpdateSequencePropStatus,
 	ScheduleAudioNodeResult,
+	NonceHistory,
 };

packages/core/src/nonce.ts

@@ -1,4 +1,4 @@
-import {createContext, useContext, useEffect, useRef, useState} from 'react';
+import {createContext, useCallback, useContext, useMemo, useRef} from 'react';
 
 // Nonces keep track of the order of compositions.
 // It's a counter that goes up and sequences and compositions get a nonce
@@ -11,25 +11,59 @@ export type TNonceContext = {
 	getNonce: () => number;
 };
 
+type NonceHistoryItem = [number, number];
+
+export type NonceHistory = NonceHistoryItem[];
+
+export type NonceHistoryContext = {
+	get: () => NonceHistory;
+};
+
 export const NonceContext = createContext<TNonceContext>({
 	getNonce: () => 0,
 });
 
-export const useNonce = (): number => {
-	const context = useContext(NonceContext);
-	const [nonce, setNonce] = useState(() => context.getNonce());
-	const lastContext = useRef<TNonceContext | null>(context);
+let fastRefreshNonce = 0;
 
-	// Only if context changes, but not initially
-	useEffect(() => {
-		if (lastContext.current === context) {
-			return;
+declare const __webpack_module__: {
+	hot: {
+		addStatusHandler(callback: (status: string) => void): void;
+	};
+};
+
+try {
+	if (typeof __webpack_module__ !== 'undefined') {
+		if (__webpack_module__.hot) {
+			__webpack_module__.hot.addStatusHandler((status) => {
+				if (status === 'idle') {
+					fastRefreshNonce++;
+				}
+			});
 		}
+	}
+} catch {
+	// __webpack_module__ may throw ReferenceError in some environments
+}
 
-		lastContext.current = context;
+export const useNonce = (): NonceHistoryContext => {
+	const context = useContext(NonceContext);
+	const nonce = context.getNonce();
+	const nonceRef = useRef(nonce);
+	nonceRef.current = nonce;
+	const history = useRef<NonceHistoryItem[]>([[fastRefreshNonce, nonce]]);
+
+	const get = useCallback(() => {
+		if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
+			history.current = [
+				...history.current,
+				[fastRefreshNonce, nonceRef.current],
+			];
+		}
 
-		setNonce(context.getNonce);
-	}, [context]);
+		return history.current;
+	}, [history]);
 
-	return nonce;
+	return useMemo(() => {
+		return {get};
+	}, [get]);
 };