TransientActions: making elementsToRerender mandatory (#6428)

**Problem:**
TransientActions is the inspector's way of creating a continuous
interaction. This properly collates all undo events into a single undo
step representing the entire series of dispatched transient actions, and
it _optionally_ lets you set an array of ElementPaths that will make the
editor and the canvas switch to fast rerender mode. The problem is that
this elementsToRerender path is optional, which means some inspector
interactions will be slow!

**Fix:**
Make elementsToRerender mandatory and fill it in all places.

editor/src/components/editor/action-types.ts

@@ -295,7 +295,7 @@ export type SetZIndex = {
 export type TransientActions = {
   action: 'TRANSIENT_ACTIONS'
   transientActions: Array<EditorAction>
-  elementsToRerender: Array<ElementPath> | null
+  elementsToRerender: Array<ElementPath>
 }
 
 // This is a wrapper action which changes the undo behavior for the included actions.

editor/src/components/editor/actions/action-creators.ts

@@ -375,7 +375,7 @@ export function toggleDataCanCondense(targets: Array<ElementPath>): ToggleDataCa
 
 export function transientActions(
   actions: Array<EditorAction>,
-  elementsToRerender: Array<ElementPath> | null = null,
+  elementsToRerender: Array<ElementPath>,
 ): TransientActions {
   return {
     action: 'TRANSIENT_ACTIONS',

editor/src/components/editor/store/dispatch.tsx

@@ -424,7 +424,7 @@ function reducerToSplitToActionGroups(
       [[]],
     )
     const wrappedTransientActionGroups = transientActionGroups.map((actionGroup) => [
-      EditorActions.transientActions(actionGroup),
+      EditorActions.transientActions(actionGroup, currentAction.elementsToRerender),
     ])
     return [...actionGroups, ...wrappedTransientActionGroups]
   } else if (i > 0 && actions[i - 1].action === 'CLEAR_INTERACTION_SESSION') {

editor/src/components/inspector/common/longhand-shorthand-hooks.ts

@@ -190,7 +190,11 @@ export function useInspectorInfoLonghandShorthand<
             setProp_UNSAFE(selectedView, shorthandPropertyPath, printedValue),
           ]
         }, selectedViewsRef.current)
-        dispatch(transient ? [transientActions(actionsToDispatch)] : actionsToDispatch)
+        dispatch(
+          transient
+            ? [transientActions(actionsToDispatch, selectedViewsRef.current)]
+            : actionsToDispatch,
+        )
       } else {
         // we either have a dominant longhand key, or we need to append a new one
         const propertyPath = pathMappingFn(longhand, inspectorTargetPath)
@@ -203,7 +207,11 @@ export function useInspectorInfoLonghandShorthand<
             setProp_UNSAFE(selectedView, propertyPath, printedValue),
           ]
         }, selectedViewsRef.current)
-        dispatch(transient ? [transientActions(actionsToDispatch)] : actionsToDispatch)
+        dispatch(
+          transient
+            ? [transientActions(actionsToDispatch, selectedViewsRef.current)]
+            : actionsToDispatch,
+        )
       }
     }
 

editor/src/components/inspector/flex-section.tsx

@@ -834,7 +834,7 @@ const GapRowColumnControl = React.memo(() => {
       }
 
       const transientWrapper = (actions: EditorAction[]) =>
-        transient ? [transientActions(actions)] : actions
+        transient ? [transientActions(actions, [grid.elementPath])] : actions
 
       dispatch(
         transientWrapper([

editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx

@@ -443,7 +443,7 @@ export const longhandShorthandEventHandler = (
     }
 
     if (isTransient) {
-      dispatch([transientActions(actions)])
+      dispatch([transientActions(actions, selectedViewsRef.current)])
     } else {
       dispatch(actions)
     }

editor/src/templates/editor.tsx

@@ -151,9 +151,7 @@ function collectElementsToRerenderForTransientActions(
   action: EditorAction,
 ): Array<ElementPath> {
   if (action.action === 'TRANSIENT_ACTIONS') {
-    if (action.elementsToRerender != null) {
-      working.push(...action.elementsToRerender)
-    }
+    working.push(...action.elementsToRerender)
     working.push(
       ...action.transientActions.reduce(collectElementsToRerenderForTransientActions, working),
     )