Inspector values for Remix elements (#4327)

* fix * remove unused imports * update snapshots
concrete-utopia · Oct 5, 2023 · 25f07a7 · 25f07a7
1 parent e72f432
commit 25f07a7
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 38 deletions.
diff --git a/editor/src/components/inspector/inspector.tsx b/editor/src/components/inspector/inspector.tsx
@@ -1,9 +1,5 @@
 import React from 'react'
-import {
-  findElementAtPath,
-  getSimpleAttributeAtPath,
-  MetadataUtils,
-} from '../../core/model/element-metadata-utils'
+import { getSimpleAttributeAtPath, MetadataUtils } from '../../core/model/element-metadata-utils'
 import { isRight, right } from '../../core/shared/either'
 import type {
   JSExpression,
@@ -28,10 +24,10 @@ import {
   unsetProperty,
 } from '../editor/actions/action-creators'
 
-import type { EditorStorePatched, ElementsToRerender } from '../editor/store/editor-state'
+import type { ElementsToRerender } from '../editor/store/editor-state'
 import {
+  getElementFromProjectContents,
   getJSXComponentsAndImportsForPathFromState,
-  getOpenUtopiaJSXComponentsFromStateMultifile,
   isOpenFileUiJs,
 } from '../editor/store/editor-state'
 import { Substores, useEditorState, useRefEditorState } from '../editor/store/store-hook'
@@ -59,7 +55,6 @@ import { Icn, useColorTheme, UtopiaTheme, FlexRow, Button } from '../../uuiui'
 import { getElementsToTarget } from './common/inspector-utils'
 import type { ElementPath, PropertyPath } from '../../core/shared/project-file-types'
 import { unless, when } from '../../utils/react-conditionals'
-import { createSelector } from 'reselect'
 import { isTwindEnabled } from '../../core/tailwind/tailwind'
 import {
   isKeyboardAbsoluteStrategy,
@@ -511,14 +506,12 @@ export const SingleInspectorEntryPoint: React.FunctionComponent<
 > = React.memo((props) => {
   const { selectedViews } = props
   const dispatch = useDispatch()
-  const { jsxMetadata, isUIJSFile, pathTrees, allElementProps } = useEditorState(
+  const { jsxMetadata, isUIJSFile } = useEditorState(
     Substores.fullStore,
     (store) => {
       return {
         jsxMetadata: store.editor.jsxMetadata,
         isUIJSFile: isOpenFileUiJs(store.editor),
-        pathTrees: store.editor.elementPathTree,
-        allElementProps: store.editor.allElementProps,
       }
     },
     'SingleInspectorEntryPoint',
@@ -615,16 +608,6 @@ export const SingleInspectorEntryPoint: React.FunctionComponent<
   return inspector
 })
 
-const rootComponentsSelector = createSelector(
-  (store: EditorStorePatched) => store.editor.projectContents,
-  (store: EditorStorePatched) => store.editor.codeResultCache.curriedResolveFn,
-  (store: EditorStorePatched) => store.editor.canvas.openFile?.filename ?? null,
-  (projectContents, curriedResolveFn, openFilePath) => {
-    const resolveFn = curriedResolveFn(projectContents)
-    return getOpenUtopiaJSXComponentsFromStateMultifile(projectContents, resolveFn, openFilePath)
-  },
-)
-
 export const InspectorContextProvider = React.memo<{
   selectedViews: Array<ElementPath>
   targetPath: Array<string>
@@ -634,25 +617,18 @@ export const InspectorContextProvider = React.memo<{
   const dispatch = useDispatch()
   const metadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
 
-  const { jsxMetadata, allElementProps } = useEditorState(
-    Substores.metadata,
+  const { jsxMetadata, allElementProps, projectContents } = useEditorState(
+    Substores.projectContentsAndMetadata,
     (store) => {
       return {
         jsxMetadata: store.editor.jsxMetadata,
         allElementProps: store.editor.allElementProps,
+        projectContents: store.editor.projectContents,
       }
     },
     'InspectorContextProvider',
   )
 
-  const rootComponents = useKeepReferenceEqualityIfPossible(
-    useEditorState(
-      Substores.fullStore,
-      rootComponentsSelector,
-      'InspectorContextProvider rootComponents',
-    ),
-  )
-
   let newEditedMultiSelectedProps: JSXAttributes[] = []
   let newSpiedProps: Array<{ [key: string]: any }> = []
   let newComputedStyles: Array<ComputedStyle> = []
@@ -669,7 +645,7 @@ export const InspectorContextProvider = React.memo<{
          */
         return
       }
-      const jsxElement = findElementAtPath(path, rootComponents)
+      const jsxElement = getElementFromProjectContents(path, projectContents)
       if (jsxElement == null) {
         /**
          * This early return will cause the inspector to render with empty fields.

diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -1358,8 +1358,6 @@ Array [
   "/div/CanvasFloatingToolbars/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.provider)///Symbol(react.memo)(Inspector)",
-  "/Symbol(react.provider)///Symbol(react.memo)()",
   "////UtopiaSpiedFunctionComponent()",
   "////UtopiaSpiedExoticType(Symbol(react.provider))",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent()/UtopiaSpiedExoticType(Symbol(react.provider))",
@@ -2126,8 +2124,6 @@ Array [
   "/div/CanvasFloatingToolbars/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.provider)///Symbol(react.memo)(Inspector)",
-  "/Symbol(react.provider)///Symbol(react.memo)()",
   "////UtopiaSpiedFunctionComponent()",
   "////UtopiaSpiedExoticType(Symbol(react.provider))",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent()/UtopiaSpiedExoticType(Symbol(react.provider))",

diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`718`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`716`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`763`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`761`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })