feature(editor) Scoped variables show destructured parameters. (#4882)

- Added `propertiesExposedByParam` utility function.
- Added `findContainingComponent` utility function.
- `getVariablesInScope` now finds the correct component and not just the first one.
- Fixed `applyPropsParamToPassedProps` to correctly handle destructured values
  and repeated field usages.
- `createComponentRendererComponent` includes values exposed by the props param
  when building `spiedVariablesInScope`.

editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-component-renderer.tsx

@@ -5,6 +5,7 @@ import {
   isUtopiaJSXComponent,
   isSVGElement,
   isJSXElement,
+  propertiesExposedByParam,
 } from '../../../core/shared/element-template'
 import { optionalMap } from '../../../core/shared/optional-utils'
 import type {
@@ -36,6 +37,7 @@ import { usePubSubAtomReadOnly } from '../../../core/shared/atom-with-pub-sub'
 import { JSX_CANVAS_LOOKUP_FUNCTION_NAME } from '../../../core/shared/dom-utils'
 import { objectMap } from '../../../core/shared/object-utils'
 import type { ComponentRendererComponent } from './component-renderer-component'
+import { mapArrayToDictionary } from '../../../core/shared/array-utils'
 
 function tryToGetInstancePath(
   maybePath: ElementPath | null,
@@ -130,6 +132,22 @@ export function createComponentRendererComponent(params: {
       ...appliedProps,
     }
 
+    let spiedVariablesInScope: VariableData = {}
+    if (utopiaJsxComponent.param != null) {
+      spiedVariablesInScope = mapArrayToDictionary(
+        propertiesExposedByParam(utopiaJsxComponent.param),
+        (paramName) => {
+          return paramName
+        },
+        (paramName) => {
+          return {
+            spiedValue: scope[paramName],
+            insertionCeiling: instancePath,
+          }
+        },
+      )
+    }
+
     let codeError: Error | null = null
 
     // Protect against infinite recursion by taking the view that anything
@@ -161,8 +179,6 @@ export function createComponentRendererComponent(params: {
       })
     }
 
-    let definedWithinWithValues: MapLike<unknown> = {}
-
     if (utopiaJsxComponent.arbitraryJSBlock != null) {
       const lookupRenderer = createLookupRender(
         rootElementPath,
@@ -194,12 +210,23 @@ export function createComponentRendererComponent(params: {
         lookupRenderer,
       )
 
-      definedWithinWithValues = runBlockUpdatingScope(
+      const definedWithinWithValues = runBlockUpdatingScope(
         params.filePath,
         mutableContext.requireResult,
         utopiaJsxComponent.arbitraryJSBlock,
         scope,
       )
+
+      spiedVariablesInScope = {
+        ...spiedVariablesInScope,
+        ...objectMap(
+          (spiedValue) => ({
+            spiedValue: spiedValue,
+            insertionCeiling: null,
+          }),
+          definedWithinWithValues,
+        ),
+      }
     }
 
     function buildComponentRenderResult(element: JSXElementChild): React.ReactElement {
@@ -208,14 +235,6 @@ export function createComponentRendererComponent(params: {
         instancePath,
       )
 
-      const spiedVariablesInScope: VariableData = objectMap(
-        (spiedValue) => ({
-          spiedValue: spiedValue,
-          insertionCeiling: null,
-        }),
-        definedWithinWithValues,
-      )
-
       const renderedCoreElement = renderCoreElement(
         element,
         ownElementPath,

editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-props-utils.ts

@@ -38,39 +38,36 @@ export function applyPropsParamToPassedProps(
       output[paramName] = getParamValue(value, boundParam.defaultExpression)
     } else if (isDestructuredObject(boundParam)) {
       if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+        const valueAsRecord: Record<string, unknown> = { ...value }
         let remainingValues = { ...value } as Record<string, unknown>
-        let remainingKeys = Object.keys(remainingValues)
-        boundParam.parts.forEach((part) => {
+        for (const part of boundParam.parts) {
           const { propertyName, param } = part
-          if (propertyName != null) {
-            // e.g. `{ prop: renamedProp }` or `{ prop: { /* further destructuring */ } }`
-            // Can't spread if we have a property name
-            const innerValue = remainingValues[propertyName]
-            applyBoundParamToOutput(innerValue, param.boundParam)
-            remainingKeys = remainingKeys.filter((k) => k !== propertyName)
-            delete remainingValues[propertyName]
-          } else {
+          if (propertyName == null) {
             const { dotDotDotToken: spread, boundParam: innerBoundParam } = param
             if (isRegularParam(innerBoundParam)) {
               // e.g. `{ prop }` or `{ ...remainingProps }`
               const { paramName } = innerBoundParam
               if (spread) {
                 output[paramName] = remainingValues
-                remainingKeys = []
                 remainingValues = {}
               } else {
                 output[paramName] = getParamValue(
-                  remainingValues[paramName],
+                  valueAsRecord[paramName],
                   innerBoundParam.defaultExpression,
                 )
-                remainingKeys = remainingKeys.filter((k) => k !== paramName)
                 delete remainingValues[paramName]
               }
             }
+          } else {
+            // e.g. `{ prop: renamedProp }` or `{ prop: { /* further destructuring */ } }`
+            // Can't spread if we have a property name
+            const innerValue = valueAsRecord[propertyName]
+            applyBoundParamToOutput(innerValue, param.boundParam)
+            delete remainingValues[propertyName]
             // No other cases are legal
             // TODO Should we throw? Users will already have a lint error
           }
-        })
+        }
       }
       // TODO Throw, but what?
     } else {

editor/src/components/canvas/ui/floating-insert-menu.tsx

@@ -146,7 +146,11 @@ export function useGetInsertableComponents(
     }
   }, [fullPath, scopedVariables])
 
-  return insertableComponents.concat(insertableVariables)
+  if (insertMenuMode === 'insert') {
+    return insertableComponents.concat(insertableVariables)
+  } else {
+    return insertableComponents
+  }
 }
 
 export function useComponentSelectorStyles(): StylesConfig<InsertMenuItem, false> {