useDispatchWhenPropertyControlsInfoChanges()

Author: balazsbajorics

editor/src/components/canvas/canvas-external-store.tsx

@@ -1,6 +1,9 @@
+import React from 'react'
 import { DefaultThirdPartyControlDefinitions } from '../../core/third-party/third-party-controls'
 import type { PropertyControlsInfo } from '../custom-code/code-file'
 import { Substores, useEditorState } from '../editor/store/store-hook'
+import { useDispatch } from '../editor/store/dispatch-context'
+import { updatePropertyControlsInfo } from '../editor/actions/action-creators'
 
 export const PropertyControlsExportedForTestInspection: { current: PropertyControlsInfo } = {
   current: {},
@@ -31,14 +34,18 @@ function emitChange() {
 }
 
 export function usePropertyControlsInfo(): PropertyControlsInfo {
-  const override = useEditorState(
-    Substores.restOfEditor,
-    (store) => store.editor.propertyControlsInfoOverride,
-    'usePropertyControlsInfo override',
-  )
-
   // TODO don't forget about DefaultThirdPartyControlDefinitions
-  const defaultControls = DefaultThirdPartyControlDefinitions
+  return React.useSyncExternalStore(propControlsStore.subscribe, propControlsStore.getSnapshot)
+}
+
+export function useDispatchWhenPropertyControlsInfoChanges() {
+  const dispatch = useDispatch()
+
+  const previousPropControls = React.useRef<PropertyControlsInfo | null>(null)
+  const propControls = usePropertyControlsInfo()
+  if (previousPropControls.current !== propControls) {
+    dispatch([updatePropertyControlsInfo(propControls)])
+  }
 
-  return override ?? (null as any)
+  previousPropControls.current = propControls
 }

editor/src/components/canvas/canvas-globals.ts

@@ -15,6 +15,7 @@ import {
   PropertyControlsInfoKeepDeepEquality,
   PropertyControlsKeepDeepEquality,
 } from '../editor/store/store-deep-equality-instances'
+import { propControlsStore } from './canvas-external-store'
 
 export type ControlsToCheck = Promise<Either<string, Array<ComponentDescriptorWithName>>>
 
@@ -145,5 +146,7 @@ export async function validateControlsToCheck(
       registeredPropertyControlsInfo,
       wipPropertyControlsInfo,
     ).value
+
+    propControlsStore.setPropertyControls(registeredPropertyControlsInfo)
   }
 }

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

@@ -860,7 +860,6 @@ export interface SetShortcut {
 export interface UpdatePropertyControlsInfo {
   action: 'UPDATE_PROPERTY_CONTROLS_INFO'
   propertyControlsInfo: PropertyControlsInfo
-  moduleNamesOrPathsToDelete: Array<string>
 }
 
 export interface UpdateText {

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

@@ -1352,12 +1352,10 @@ export function setShortcut(shortcutName: string, newKey: Key): SetShortcut {
 
 export function updatePropertyControlsInfo(
   propertyControlsInfo: PropertyControlsInfo,
-  moduleNamesOrPathsToDelete: Array<string>,
 ): UpdatePropertyControlsInfo {
   return {
     action: 'UPDATE_PROPERTY_CONTROLS_INFO',
     propertyControlsInfo: propertyControlsInfo,
-    moduleNamesOrPathsToDelete: moduleNamesOrPathsToDelete,
   }
 }
 

editor/src/components/editor/actions/actions.tsx

@@ -4387,16 +4387,9 @@ export const UPDATE_FNS = {
     action: UpdatePropertyControlsInfo,
     editor: EditorState,
   ): EditorState => {
-    let updatedPropertyControlsInfo: PropertyControlsInfo = {
-      ...editor.propertyControlsInfo,
-      ...action.propertyControlsInfo,
-    }
-    for (const moduleNameOrPathToDelete of action.moduleNamesOrPathsToDelete) {
-      delete updatedPropertyControlsInfo[moduleNameOrPathToDelete]
-    }
     return {
       ...editor,
-      propertyControlsInfo: updatedPropertyControlsInfo,
+      propertyControlsInfo: action.propertyControlsInfo,
     }
   },
   UPDATE_TEXT: (action: UpdateText, editorStore: EditorStoreUnpatched): EditorStoreUnpatched => {

editor/src/components/editor/editor-component.tsx

@@ -74,6 +74,7 @@ import { CommentMaintainer } from '../../core/commenting/comment-maintainer'
 import { useIsLoggedIn, useLiveblocksConnectionListener } from '../../core/shared/multiplayer-hooks'
 import { ForkSearchParamKey, ProjectForkFlow } from './project-fork-flow'
 import { isRoomId, projectIdToRoomId } from '../../utils/room-id'
+import { useDispatchWhenPropertyControlsInfoChanges } from '../canvas/canvas-external-store'
 
 const liveModeToastId = 'play-mode-toast'
 
@@ -102,6 +103,9 @@ export interface EditorProps {}
 export const EditorComponentInner = React.memo((props: EditorProps) => {
   const room = useRoom()
   const dispatch = useDispatch()
+
+  useDispatchWhenPropertyControlsInfoChanges()
+
   const editorStoreRef = useRefEditorState((store) => store)
   const metadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
   const navigatorTargetsRef = useRefEditorState((store) => store.derived.navigatorTargets)