Scoped variables show destructured parameters.

[seanparsons]

Problem:
With code like the following in a component:

export function App({ style: { background } }) {

The destructured values aren't made available into the scoped variables menu.

Fix:
The main fixes needed for this to work were the following:

• createComponentRendererComponent now uses propertiesExposedByParam to identify the properties that are brought into scope from the destructuring, which are added to the dictionary of scoped variables.
• As a result of the above work, it was observed that applyPropsParamToPassedProps wasn't properly handled destructured fields that are renamed.

In the process of doing the above work I noticed that getVariablesInScope was looking for the first component it could find, not the targeted component. To perform the lookup findContainingComponent was implemented.

Commit Details:

• 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.

[github-actions]

Try me

[relativeci]

Job #10393: Bundle Size — 61.74MiB (~+0.01%).

dcab6d0(current) vs d299c8d master#10389(baseline)

Warning

Bundle contains 57 duplicate packages – View duplicate packages

Bundle metrics   2 changes 1 regression

	Current Job #10393	Baseline Job #10389
Initial JS	34.78MiB(+0.01%)	34.78MiB
Initial CSS	0B	0B
Cache Invalidation	22.05%	20.45%
Chunks	28	28
Assets	32	32
Modules	4294	4294
Duplicate Modules	493	493
Duplicate Code	31.01%	31.01%
Packages	455	455
Duplicate Packages	57	57

Bundle size by type   2 changes 1 regression 1 improvement

	Current Job #10393	Baseline Job #10389
JS	61.72MiB (~+0.01%)	61.72MiB
HTML	11.37KiB (-0.32%)	11.41KiB

---

View job #10393 report View feature/scoped-nested-parameters branch activity View project dashboard

[github-actions]

Performance test results:
Highlight Regular (2%)

Highlight All Elements (-2%)

Selection (-1%)

De-Selection (1%)

Selection Change (6%)
Before: 61.6ms (54.3-72.7ms)
After: 65.6ms (57.2-85.3ms)

Scroll Canvas (20%)
Before: 3ms (2.4-9.2ms)
After: 3.6ms (2.8-8.8ms)