Support scoped variables for the parameter of an inline component.

[seanparsons]

Problem:
In the case where an inline component is used, for example:

      <FakeAwait data-uid={'fakeawaitelement'}>
        {(something) => {
          console.log('Something callback.')
          return (
            <div
              data-uid={'something-div'}
              style={{
                width: '100%',
                height: '100%',
                background: 'white',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              {something}
            </div>
          )
        }}
      </FakeAwait>

The parameters to that function (in the above case something) aren't made available in the scoped variables for the body of the function.

Fix:
Now we include the same parameter representation that is used in UtopiaJSXComponent in arbitrary blocks and expressions. During the canvas render, those values are additionally included when building the scoped variables by supplying them to the createLookupRender function.

In the process of doing this work, it was discovered that we were losing the destructured parameters from code when performing the Babel transformation. When attempting to parse the destructured parameters in the Babel AST this was the code that the transformer function would have access to:

return arr.map(function (_ref) {
  var n = _ref.n;
  return <View data-uid='aab' thing={n} />
});

This was due to the es2015 Babel preset applying before any of the plugins run (which is where our code lives), which amongst other things includes a plugin that transforms any object destructuring. Even though the ES2015 standard itself includes support for native object destructuring. The fix for this was to switch the preset to es2016 and then fix all the tests as that change resulted in the transpiled JavaScript values to be more representative of the original JavaScript.

Commit Details:

• The result of propertiesExposedByParams is passed to createLookupRender in most of the call sites so that the parameters are supplied to the elements within arbitrary expressions.
• Added params field to JSExpressionOtherJavaScript and ArbitraryJSBlock.
• Added propertiesExposedByParams utility function.
• Moved parseParam, parseParams and parseBindingName to parser-printer-parsing.ts so they can be called from the logic there as well.
• parseOtherJavaScript now takes a params parameter to the create parameter.
• parseOtherJavaScript parses out the params of single functions arbitrary blocks.
• Changed Babel transform preset from es2015 to es2016.

[github-actions]

Try me

[relativeci]

Job #10491: Bundle Size — 62.17MiB (~+0.01%).

36d7a38(current) vs d299c8d master#10488(baseline)

Warning

Bundle contains 58 duplicate packages – View duplicate packages

Bundle metrics   2 changes 1 regression

	Current Job #10491	Baseline Job #10488
Initial JS	35.21MiB(~+0.01%)	35.21MiB
Initial CSS	0B	0B
Cache Invalidation	21.94%	20.35%
Chunks	28	28
Assets	32	32
Modules	4360	4360
Duplicate Modules	494	494
Duplicate Code	30.8%	30.8%
Packages	467	467
Duplicate Packages	58	58

Bundle size by type   2 changes 1 regression 1 improvement

	Current Job #10491	Baseline Job #10488
JS	62.16MiB (~+0.01%)	62.15MiB
HTML	11.37KiB (-0.32%)	11.41KiB

---

View job #10491 report View feature/scoped-variables-inline-... branch activity View project dashboard

[github-actions]

Performance test results: