From 422351e9ade5af99a8f2e0a3edfed0312035aafe Mon Sep 17 00:00:00 2001
From: Sean Parsons <git@futurenotfound.com>
Date: Fri, 16 Feb 2024 17:55:34 +0000
Subject: [PATCH 1/3] feature(editor) Support scoped variables for the
 parameter of an inline component. - 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.

---
 ...solute-reparent-strategy.spec.browser2.tsx |   4 +-
 .../canvas/scoped-variables.spec.tsx          | 214 +++++++++++++
 .../ui-jsx-canvas-component-renderer.tsx      |   6 +-
 .../ui-jsx-canvas-element-renderer-utils.tsx  |   6 +-
 .../ui-jsx-canvas-execution-scope.tsx         |   9 +-
 ...i-jsx-canvas-spy-wrapper.spec.browser2.tsx |   8 +-
 .../src/components/editor/actions/actions.tsx |   1 +
 .../store-deep-equality-instances-2.spec.ts   |   6 +
 .../store-deep-equality-instances.spec.ts     |   3 +
 .../store/store-deep-equality-instances.ts    |  66 +---
 .../navigator-conditionals.spec.browser2.tsx  |  24 +-
 .../navigator/navigator.spec.browser2.tsx     |  28 +-
 .../model/element-metadata-utils.spec.tsx     |   2 +
 editor/src/core/model/jsx-attributes.spec.ts  |   4 +
 editor/src/core/model/scene-utils.ts          |   1 +
 .../core/model/test-ui-js-file.test-utils.ts  |   4 +
 .../property-control-values.spec.ts           |   1 +
 .../property-control-values.ts                |   2 +-
 .../element-path-tree.spec.browser2.tsx       |   6 +-
 .../src/core/shared/element-template.spec.ts  |  12 +-
 editor/src/core/shared/element-template.ts    |  11 +
 .../core/shared/jsx-attributes.benchmark.ts   |   3 +
 editor/src/core/shared/uid-utils.ts           |   1 +
 .../react-three-fiber-components.ts           |   1 +
 ...parser-printer-arbitrary-elements.spec.tsx |  14 +
 ...rser-printer-functional-components.spec.ts |   6 +
 .../parser-printer/parser-printer-parsing.ts  | 284 +++++++++++++++++-
 .../parser-printer-uids.spec.tsx              |   2 +
 .../parser-printer/parser-printer.spec.ts     |  75 ++++-
 .../parser-printer.test-utils.ts              |   7 +-
 .../workers/parser-printer/parser-printer.ts  | 211 +------------
 .../workers/parser-printer/uid-fix.spec.ts    |   1 +
 editor/src/core/workers/ts/ts-worker.spec.ts  |   2 +
 33 files changed, 718 insertions(+), 307 deletions(-)
 create mode 100644 editor/src/components/canvas/scoped-variables.spec.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.browser2.tsx
index 27af62a220fa..f2f07365c096 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.browser2.tsx
@@ -890,11 +890,11 @@ export var ${BakedInStoryboardVariableName} = (props) => {
       'regular-sb/scene1',
       'regular-sb/scene1/container1',
       'regular-sb/scene1/container1:container-root-div',
-      'regular-sb/scene1/container1:container-root-div/74f',
+      'regular-sb/scene1/container1:container-root-div/898',
       'regular-sb/scene1/container1/hello',
       'regular-sb/container2',
       'regular-sb/container2:container-root-div',
-      'regular-sb/container2:container-root-div/74f',
+      'regular-sb/container2:container-root-div/898',
       'regular-sb/container2/hi',
     ])
 
diff --git a/editor/src/components/canvas/scoped-variables.spec.tsx b/editor/src/components/canvas/scoped-variables.spec.tsx
new file mode 100644
index 000000000000..278ba6e9b5b2
--- /dev/null
+++ b/editor/src/components/canvas/scoped-variables.spec.tsx
@@ -0,0 +1,214 @@
+import { createBuiltInDependenciesList } from '../../core/es-modules/package-manager/built-in-dependencies-list'
+import { getSamplePreviewFile, getSamplePreviewHTMLFile } from '../../core/model/new-project-files'
+import type { ProjectContents, TextFile } from '../../core/shared/project-file-types'
+import {
+  textFile,
+  textFileContents,
+  unparsed,
+  RevisionsState,
+  directory,
+} from '../../core/shared/project-file-types'
+import { complexDefaultProjectPreParsed } from '../../sample-projects/sample-project-utils.test-utils'
+import { contentsToTree } from '../assets'
+import type { PersistentModel } from '../editor/store/editor-state'
+import {
+  DefaultPackageJson,
+  StoryboardFilePath,
+  persistentModelForProjectContents,
+} from '../editor/store/editor-state'
+import { DefaultStartingFeatureSwitches, renderTestEditorWithModel } from './ui-jsx.test-utils'
+
+function projectWithInlineComponentContents(): ProjectContents {
+  function createCodeFile(path: string, contents: string): TextFile {
+    return textFile(textFileContents(contents, unparsed, RevisionsState.CodeAhead), null, null, 0)
+  }
+
+  return {
+    '/package.json': textFile(
+      textFileContents(
+        JSON.stringify(DefaultPackageJson, null, 2),
+        unparsed,
+        RevisionsState.CodeAhead,
+      ),
+      null,
+      null,
+      0,
+    ),
+    '/src': directory(),
+    '/assets': directory(),
+    '/public': directory(),
+    [StoryboardFilePath]: createCodeFile(
+      StoryboardFilePath,
+      `import * as React from 'react'
+import Utopia, {
+  Scene,
+  Storyboard,
+  registerModule,
+} from 'utopia-api'
+import { App } from '/src/app.js'
+
+export var storyboard = (
+  <Storyboard data-uid='storyboard-entity'>
+    <Scene
+      data-label='Imported App'
+      data-uid='scene-1-entity'
+      style={{ position: 'absolute', left: 0, top: 0, width: 375, height: 812 }}
+    >
+      <App data-uid='app-entity' />
+    </Scene>
+  </Storyboard>
+)`,
+    ),
+    '/src/app.js': createCodeFile(
+      '/src/app.js',
+      `import * as React from 'react'
+
+
+export const FakeAwait = (props) => {
+  const computed =
+    typeof props.children === 'function'
+      ? props.children(
+          <div data-uid={'elephant'}>Elephant</div>,
+        )
+      : 'Oh no'
+  return <div data-uid='fakeawait'>{computed}</div>
+}
+
+export var App = (props) => {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        background: 'white',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <FakeAwait data-uid={'fakeawaitelement'}>
+        {(something) => {
+          return (
+            <div
+              data-uid={'something-div'}
+              style={{
+                width: '100%',
+                height: '100%',
+                background: 'white',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              {something}
+            </div>
+          )
+        }}
+      </FakeAwait>
+    </div>
+  )
+}`,
+    ),
+  }
+}
+
+function projectWithInlineComponent(): PersistentModel {
+  const projectContents: ProjectContents = projectWithInlineComponentContents()
+  const persistentModel = persistentModelForProjectContents(contentsToTree(projectContents))
+  return persistentModel
+}
+
+describe('scoped variables', () => {
+  it('includes scoped variables for an inline component', async () => {
+    const renderResult = await renderTestEditorWithModel(
+      projectWithInlineComponent(),
+      'dont-await-first-dom-report',
+    )
+
+    expect(renderResult.getEditorState().editor.variablesInScope).toMatchInlineSnapshot(`
+      Object {
+        "storyboard-entity": Object {},
+        "storyboard-entity/scene-1-entity": Object {},
+        "storyboard-entity/scene-1-entity/app-entity": Object {},
+        "storyboard-entity/scene-1-entity/app-entity:cb0": Object {
+          "props": Object {
+            "insertionCeiling": Object {
+              "parts": Array [
+                Array [
+                  "storyboard-entity",
+                  "scene-1-entity",
+                  "app-entity",
+                ],
+              ],
+              "type": "elementpath",
+            },
+            "spiedValue": Object {
+              "data-uid": "app-entity",
+            },
+          },
+        },
+        "storyboard-entity/scene-1-entity/app-entity:cb0/fakeawaitelement": Object {
+          "props": Object {
+            "insertionCeiling": Object {
+              "parts": Array [
+                Array [
+                  "storyboard-entity",
+                  "scene-1-entity",
+                  "app-entity",
+                ],
+              ],
+              "type": "elementpath",
+            },
+            "spiedValue": Object {
+              "data-uid": "app-entity",
+            },
+          },
+        },
+        "storyboard-entity/scene-1-entity/app-entity:cb0/fakeawaitelement/e63/something-div~~~1": Object {
+          "props": Object {
+            "insertionCeiling": Object {
+              "parts": Array [
+                Array [
+                  "storyboard-entity",
+                  "scene-1-entity",
+                  "app-entity",
+                ],
+              ],
+              "type": "elementpath",
+            },
+            "spiedValue": Object {
+              "data-uid": "app-entity",
+            },
+          },
+          "something": Object {
+            "insertionCeiling": Object {
+              "parts": Array [
+                Array [
+                  "storyboard-entity",
+                  "scene-1-entity",
+                  "app-entity",
+                ],
+                Array [
+                  "cb0",
+                  "fakeawaitelement",
+                  "e63",
+                  "something-div~~~1",
+                ],
+              ],
+              "type": "elementpath",
+            },
+            "spiedValue": <div
+              data-path="storyboard-entity/scene-1-entity/app-entity:cb0/fakeawaitelement:fakeawait/elephant~~~1"
+              data-uid="elephant~~~1"
+            >
+              <UtopiaSpiedExoticType(Symbol(react.fragment))>
+                <UtopiaSpiedExoticType(Symbol(react.fragment))>
+                  Elephant
+
+                </UtopiaSpiedExoticType(Symbol(react.fragment))>
+              </UtopiaSpiedExoticType(Symbol(react.fragment))>
+            </div>,
+          },
+        },
+      }
+    `)
+  })
+})
diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-component-renderer.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-component-renderer.tsx
index 960194cc9377..89e61b6337a8 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-component-renderer.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-component-renderer.tsx
@@ -6,6 +6,7 @@ import {
   isSVGElement,
   isJSXElement,
   propertiesExposedByParam,
+  propertiesExposedByParams,
 } from '../../../core/shared/element-template'
 import { optionalMap } from '../../../core/shared/optional-utils'
 import type {
@@ -180,6 +181,9 @@ export function createComponentRendererComponent(params: {
     }
 
     if (utopiaJsxComponent.arbitraryJSBlock != null) {
+      const propertiesFromParams = propertiesExposedByParams(
+        utopiaJsxComponent.arbitraryJSBlock.params,
+      )
       const lookupRenderer = createLookupRender(
         rootElementPath,
         scope,
@@ -201,7 +205,7 @@ export function createComponentRendererComponent(params: {
         rerenderUtopiaContext.editedText,
         null,
         {},
-        [],
+        propertiesFromParams,
       )
 
       scope[JSX_CANVAS_LOOKUP_FUNCTION_NAME] = utopiaCanvasJSXLookup(
diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-element-renderer-utils.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-element-renderer-utils.tsx
index 732f9039e80a..6458c28ba3ce 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-element-renderer-utils.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-element-renderer-utils.tsx
@@ -24,6 +24,8 @@ import {
   isJSXFragment,
   isJSExpression,
   isJSXMapExpression,
+  propertiesExposedByParam,
+  propertiesExposedByParams,
 } from '../../../core/shared/element-template'
 import {
   getAccumulatedElementsWithin,
@@ -308,7 +310,9 @@ export function renderCoreElement(
       }
 
       const valuesInScopeFromParameters =
-        element.type === 'JSX_MAP_EXPRESSION' ? element.valuesInScopeFromParameters : []
+        element.type === 'JSX_MAP_EXPRESSION'
+          ? element.valuesInScopeFromParameters
+          : propertiesExposedByParams(element.params)
 
       if (elementIsTextEdited) {
         const runJSExpressionLazy = () => {
diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-execution-scope.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-execution-scope.tsx
index 8fe85442e27e..191a93fdb601 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-execution-scope.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-execution-scope.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
 import type { MapLike } from 'typescript'
 import type { UtopiaJSXComponent } from '../../../core/shared/element-template'
-import { ArbitraryJSBlock, isUtopiaJSXComponent } from '../../../core/shared/element-template'
+import {
+  ArbitraryJSBlock,
+  isUtopiaJSXComponent,
+  propertiesExposedByParams,
+} from '../../../core/shared/element-template'
 import { fastForEach } from '../../../core/shared/utils'
 import type { ProjectContentTreeRoot } from '../../assets'
 import { getProjectFileByFilePath, ProjectContentsTree } from '../../assets'
@@ -119,6 +123,7 @@ export function createExecutionScope(
   // First make sure everything is in scope
   if (combinedTopLevelArbitraryBlock != null && openStoryboardFileNameKILLME != null) {
     const { highlightBounds, code } = getCodeAndHighlightBoundsForFile(filePath, projectContents)
+    const propertiesFromParams = propertiesExposedByParams(combinedTopLevelArbitraryBlock.params)
     const lookupRenderer = createLookupRender(
       EP.emptyElementPath,
       executionScope,
@@ -140,7 +145,7 @@ export function createExecutionScope(
       editedText,
       null,
       {},
-      [],
+      propertiesFromParams,
     )
 
     executionScope[JSX_CANVAS_LOOKUP_FUNCTION_NAME] = utopiaCanvasJSXLookup(
diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-spy-wrapper.spec.browser2.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-spy-wrapper.spec.browser2.tsx
index 119ce56d6322..46296b1c799f 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-spy-wrapper.spec.browser2.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-spy-wrapper.spec.browser2.tsx
@@ -581,7 +581,7 @@ describe('Spy Wrapper Template Path Tests', () => {
         "storyboard/scene-1/app:other-app-root/other-inner-div/other-card-instance:other-button-instance:other-button-root": Object {
           "name": "div",
         },
-        "storyboard/scene-1/app:other-app-root/other-inner-div/other-card-instance:other-button-instance:other-button-root/5c6": Object {
+        "storyboard/scene-1/app:other-app-root/other-inner-div/other-card-instance:other-button-instance:other-button-root/43c": Object {
           "name": "not-jsx-element",
         },
         "storyboard/scene-2": Object {
@@ -684,7 +684,7 @@ describe('Spy Wrapper Template Path Tests', () => {
         "storyboard/scene-1/app:other-app-root/other-inner-div/other-card-instance:other-button-instance:other-button-root": Object {
           "name": "div",
         },
-        "storyboard/scene-1/app:other-app-root/other-inner-div/other-card-instance:other-button-instance:other-button-root/5c6": Object {
+        "storyboard/scene-1/app:other-app-root/other-inner-div/other-card-instance:other-button-instance:other-button-root/43c": Object {
           "name": "not-jsx-element",
         },
         "storyboard/scene-2": Object {
@@ -1864,7 +1864,7 @@ describe('Spy Wrapper Multifile With Cyclic Dependencies', () => {
         "storyboard/scene-2/app2:app-outer-div/card-instance:button-instance/expr/hi-element~~~2:hi-element-root": Object {
           "name": "div",
         },
-        "storyboard/scene-2/app2:app-outer-div/card-instance:button-instance/expr/hi-element~~~2:hi-element-root/eff": Object {
+        "storyboard/scene-2/app2:app-outer-div/card-instance:button-instance/expr/hi-element~~~2:hi-element-root/478": Object {
           "name": "not-jsx-element",
         },
         "storyboard/scene-2/app2:app-outer-div/card-instance:button-instance/expr/hi-element~~~3": Object {
@@ -1976,7 +1976,7 @@ describe('Spy Wrapper Multifile With Cyclic Dependencies', () => {
         "storyboard/scene-2/app2:app-outer-div/card-instance:button-instance/expr/hi-element~~~2:hi-element-root": Object {
           "name": "div",
         },
-        "storyboard/scene-2/app2:app-outer-div/card-instance:button-instance/expr/hi-element~~~2:hi-element-root/eff": Object {
+        "storyboard/scene-2/app2:app-outer-div/card-instance:button-instance/expr/hi-element~~~2:hi-element-root/478": Object {
           "name": "not-jsx-element",
         },
         "storyboard/scene-2/app2:app-outer-div/card-instance:button-instance/expr/hi-element~~~3": Object {
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 619618514d2a..001d758ac592 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -4109,6 +4109,7 @@ export const UPDATE_FNS = {
         return {
           ...element,
           condition: jsExpressionOtherJavaScript(
+            [],
             action.expression,
             action.expression,
             action.expression,
diff --git a/editor/src/components/editor/store/store-deep-equality-instances-2.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-2.spec.ts
index 8a6d61d322b7..73953c86c949 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances-2.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances-2.spec.ts
@@ -166,6 +166,7 @@ describe('ElementsWithinKeepDeepEqualityCall', () => {
 describe('ArbitraryJsBlockKeepDeepEquality', () => {
   const oldValue: ArbitraryJSBlock = {
     type: 'ARBITRARY_JS_BLOCK',
+    params: [],
     javascript: 'old',
     transpiledJavascript: 'old',
     definedWithin: ['old'],
@@ -176,6 +177,7 @@ describe('ArbitraryJsBlockKeepDeepEquality', () => {
   }
   const newSameValue: ArbitraryJSBlock = {
     type: 'ARBITRARY_JS_BLOCK',
+    params: [],
     javascript: 'old',
     transpiledJavascript: 'old',
     definedWithin: ['old'],
@@ -186,6 +188,7 @@ describe('ArbitraryJsBlockKeepDeepEquality', () => {
   }
   const newDifferentValue: ArbitraryJSBlock = {
     type: 'ARBITRARY_JS_BLOCK',
+    params: [],
     javascript: 'new',
     transpiledJavascript: 'old',
     definedWithin: ['old'],
@@ -811,6 +814,7 @@ describe('UtopiaJSXComponentKeepDeepEquality', () => {
     },
     arbitraryJSBlock: {
       type: 'ARBITRARY_JS_BLOCK',
+      params: [],
       javascript: 'old',
       transpiledJavascript: 'old',
       definedWithin: ['old'],
@@ -858,6 +862,7 @@ describe('UtopiaJSXComponentKeepDeepEquality', () => {
     },
     arbitraryJSBlock: {
       type: 'ARBITRARY_JS_BLOCK',
+      params: [],
       javascript: 'old',
       transpiledJavascript: 'old',
       definedWithin: ['old'],
@@ -905,6 +910,7 @@ describe('UtopiaJSXComponentKeepDeepEquality', () => {
     },
     arbitraryJSBlock: {
       type: 'ARBITRARY_JS_BLOCK',
+      params: [],
       javascript: 'old',
       transpiledJavascript: 'old',
       definedWithin: ['old'],
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances.spec.ts
index c5821bf9184e..f4914f85057a 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.spec.ts
@@ -475,6 +475,7 @@ describe('JSXAttributeValueKeepDeepEqualityCall', () => {
 describe('JSXAttributeOtherJavaScriptKeepDeepEqualityCall', () => {
   const oldValue: JSExpressionOtherJavaScript = {
     type: 'ATTRIBUTE_OTHER_JAVASCRIPT',
+    params: [],
     originalJavascript: 'old',
     javascript: 'old',
     transpiledJavascript: 'old',
@@ -486,6 +487,7 @@ describe('JSXAttributeOtherJavaScriptKeepDeepEqualityCall', () => {
   }
   const newSameValue: JSExpressionOtherJavaScript = {
     type: 'ATTRIBUTE_OTHER_JAVASCRIPT',
+    params: [],
     originalJavascript: 'old',
     javascript: 'old',
     transpiledJavascript: 'old',
@@ -497,6 +499,7 @@ describe('JSXAttributeOtherJavaScriptKeepDeepEqualityCall', () => {
   }
   const newDifferentValue: JSExpressionOtherJavaScript = {
     type: 'ATTRIBUTE_OTHER_JAVASCRIPT',
+    params: [],
     originalJavascript: 'new',
     javascript: 'new',
     transpiledJavascript: 'old',
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 46913e4c135b..82980bfe829a 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -186,6 +186,8 @@ import {
   jsxConditionalExpression,
   isJSExpressionOtherJavaScript,
   isJSXMapExpression,
+  arbitraryJSBlock,
+  jsExpressionOtherJavaScript,
 } from '../../../core/shared/element-template'
 import type {
   CanvasRectangle,
@@ -857,45 +859,26 @@ export const RawSourceMapKeepDeepEquality: KeepDeepEqualityCall<RawSourceMap> =
   )
 
 export function JSExpressionOtherJavaScriptKeepDeepEqualityCall(): KeepDeepEqualityCall<JSExpressionOtherJavaScript> {
-  return combine8EqualityCalls(
-    (attribute) => attribute.javascript,
-    createCallWithTripleEquals<string>(),
+  return combine9EqualityCalls(
+    (attribute) => attribute.params,
+    arrayDeepEquality(ParamKeepDeepEquality()),
     (attribute) => attribute.originalJavascript,
     createCallWithTripleEquals<string>(),
+    (attribute) => attribute.javascript,
+    createCallWithTripleEquals<string>(),
     (attribute) => attribute.transpiledJavascript,
     createCallWithTripleEquals<string>(),
     (attribute) => attribute.definedElsewhere,
     arrayDeepEquality(createCallWithTripleEquals()),
     (attribute) => attribute.sourceMap,
     nullableDeepEquality(RawSourceMapKeepDeepEquality),
-    (attribute) => attribute.uid,
-    createCallWithTripleEquals(),
     (block) => block.elementsWithin,
     ElementsWithinKeepDeepEqualityCall(),
     (block) => block.comments,
     ParsedCommentsKeepDeepEqualityCall,
-    (
-      javascript,
-      originalJavascript,
-      transpiledJavascript,
-      definedElsewhere,
-      sourceMap,
-      uniqueID,
-      elementsWithin,
-      comments,
-    ) => {
-      return {
-        type: 'ATTRIBUTE_OTHER_JAVASCRIPT',
-        javascript: javascript,
-        originalJavascript: originalJavascript,
-        transpiledJavascript: transpiledJavascript,
-        definedElsewhere: definedElsewhere,
-        sourceMap: sourceMap,
-        uid: uniqueID,
-        elementsWithin: elementsWithin,
-        comments: comments,
-      }
-    },
+    (attribute) => attribute.uid,
+    createCallWithTripleEquals(),
+    jsExpressionOtherJavaScript,
   )
 }
 
@@ -1163,7 +1146,9 @@ export function ElementsWithinKeepDeepEqualityCall(): KeepDeepEqualityCall<Eleme
 }
 
 export function ArbitraryJSBlockKeepDeepEquality(): KeepDeepEqualityCall<ArbitraryJSBlock> {
-  return combine7EqualityCalls(
+  return combine8EqualityCalls(
+    (block) => block.params,
+    arrayDeepEquality(ParamKeepDeepEquality()),
     (block) => block.javascript,
     createCallWithTripleEquals(),
     (block) => block.transpiledJavascript,
@@ -1174,30 +1159,11 @@ export function ArbitraryJSBlockKeepDeepEquality(): KeepDeepEqualityCall<Arbitra
     arrayDeepEquality(createCallWithTripleEquals()),
     (block) => block.sourceMap,
     nullableDeepEquality(RawSourceMapKeepDeepEquality),
-    (block) => block.uid,
-    createCallWithTripleEquals(),
     (block) => block.elementsWithin,
     ElementsWithinKeepDeepEqualityCall(),
-    (
-      javascript: string,
-      transpiledJavascript: string,
-      definedWithin: Array<string>,
-      definedElsewhere: Array<string>,
-      sourceMap: RawSourceMap | null,
-      uid: string,
-      elementsWithin: ElementsWithin,
-    ) => {
-      return {
-        type: 'ARBITRARY_JS_BLOCK',
-        javascript: javascript,
-        transpiledJavascript: transpiledJavascript,
-        definedWithin: definedWithin,
-        definedElsewhere: definedElsewhere,
-        sourceMap: sourceMap,
-        uid: uid,
-        elementsWithin: elementsWithin,
-      }
-    },
+    (block) => block.uid,
+    createCallWithTripleEquals(),
+    arbitraryJSBlock,
   )
 }
 
diff --git a/editor/src/components/navigator/navigator-conditionals.spec.browser2.tsx b/editor/src/components/navigator/navigator-conditionals.spec.browser2.tsx
index fdb16c75e798..062b6a4f08c6 100644
--- a/editor/src/components/navigator/navigator-conditionals.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator-conditionals.spec.browser2.tsx
@@ -1685,7 +1685,7 @@ describe('conditionals in the navigator', () => {
 
       const labelColor = (
         await screen.findByTestId(
-          `NavigatorItemTestId-regular_utopia_storyboard_uid/scene_aaa/containing_div/conditional/ae0/46a~~~1`,
+          `NavigatorItemTestId-regular_utopia_storyboard_uid/scene_aaa/containing_div/conditional/3b7/46a~~~1`,
         )
       ).style.color
 
@@ -1706,13 +1706,13 @@ describe('conditionals in the navigator', () => {
     regular-utopia-storyboard-uid/scene-aaa/containing-div
       regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional
         conditional-clause-utopia-storyboard-uid/scene-aaa/containing-div/conditional-true-case
-          regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ae0
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ae0/46a~~~1
-              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ae0/46a~~~1/33d
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ae0/46a~~~2
-              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ae0/46a~~~2/33d
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ae0/46a~~~3
-              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ae0/46a~~~3/33d
+          regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~1
+              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~1/33d
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~2
+              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~2/33d
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~3
+              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~3/33d
         conditional-clause-utopia-storyboard-uid/scene-aaa/containing-div/conditional-false-case
           synthetic-utopia-storyboard-uid/scene-aaa/containing-div/conditional/else-div-element-else-div`)
     })
@@ -1731,10 +1731,10 @@ describe('conditionals in the navigator', () => {
     regular-utopia-storyboard-uid/scene-aaa/containing-div
       regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional
         conditional-clause-utopia-storyboard-uid/scene-aaa/containing-div/conditional-true-case
-          regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ba8
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ba8/33d~~~1
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ba8/33d~~~2
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/ba8/33d~~~3
+          regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a23
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a23/33d~~~1
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a23/33d~~~2
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a23/33d~~~3
         conditional-clause-utopia-storyboard-uid/scene-aaa/containing-div/conditional-false-case
           synthetic-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a25-attribute
     regular-utopia-storyboard-uid/scene-aaa/268
diff --git a/editor/src/components/navigator/navigator.spec.browser2.tsx b/editor/src/components/navigator/navigator.spec.browser2.tsx
index 3274619c82db..dab153df374c 100644
--- a/editor/src/components/navigator/navigator.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator.spec.browser2.tsx
@@ -4983,42 +4983,42 @@ describe('Navigator row order', () => {
         'regular-sb/group',
         'regular-sb/group/70f',
         'regular-sb/group/70f/33d~~~1',
-        'regular-sb/group/70f/33d~~~1/708',
+        'regular-sb/group/70f/33d~~~1/29a',
         'regular-sb/group/70f/33d~~~2',
-        'regular-sb/group/70f/33d~~~2/708',
+        'regular-sb/group/70f/33d~~~2/29a',
         'regular-sb/group/70f/33d~~~3',
-        'regular-sb/group/70f/33d~~~3/708',
+        'regular-sb/group/70f/33d~~~3/29a',
         'regular-sb/group/foo',
         'regular-sb/group/b68',
         'regular-sb/group/b68/46a~~~1',
-        'regular-sb/group/b68/46a~~~1/3e0',
+        'regular-sb/group/b68/46a~~~1/8ed',
         'regular-sb/group/b68/a59~~~2',
-        'regular-sb/group/b68/a59~~~2/157',
+        'regular-sb/group/b68/a59~~~2/2cd',
         'regular-sb/group/b68/46a~~~3',
-        'regular-sb/group/b68/46a~~~3/3e0',
+        'regular-sb/group/b68/46a~~~3/8ed',
         'regular-sb/group/b68/a59~~~4',
-        'regular-sb/group/b68/a59~~~4/157',
+        'regular-sb/group/b68/a59~~~4/2cd',
         'regular-sb/group/b68/46a~~~5',
-        'regular-sb/group/b68/46a~~~5/3e0',
+        'regular-sb/group/b68/46a~~~5/8ed',
         'regular-sb/group/b68/a59~~~6',
-        'regular-sb/group/b68/a59~~~6/157',
+        'regular-sb/group/b68/a59~~~6/2cd',
         'regular-sb/group/cond',
         'conditional-clause-sb/group/cond-true-case',
         'regular-sb/group/cond/929',
         'regular-sb/group/cond/929/f23~~~1',
-        'regular-sb/group/cond/929/f23~~~1/8bc',
+        'regular-sb/group/cond/929/f23~~~1/7d5',
         'regular-sb/group/cond/929/f23~~~2',
-        'regular-sb/group/cond/929/f23~~~2/8bc',
+        'regular-sb/group/cond/929/f23~~~2/7d5',
         'regular-sb/group/cond/929/f23~~~3',
-        'regular-sb/group/cond/929/f23~~~3/8bc',
+        'regular-sb/group/cond/929/f23~~~3/7d5',
         'conditional-clause-sb/group/cond-false-case',
         'synthetic-sb/group/cond/15e-element-15e',
         'regular-sb/group/bar',
         'regular-sb/group/651',
         'regular-sb/group/651/3bc~~~1',
-        'regular-sb/group/651/3bc~~~1/634',
+        'regular-sb/group/651/3bc~~~1/6a3',
         'regular-sb/group/651/3bc~~~2',
-        'regular-sb/group/651/3bc~~~2/634',
+        'regular-sb/group/651/3bc~~~2/6a3',
         'regular-sb/group/text-expr-cond-wrapper',
         'regular-sb/group/text-expr-cond-wrapper/text-expr-cond',
         'conditional-clause-sb/group/text-expr-cond-wrapper/text-expr-cond-true-case',
diff --git a/editor/src/core/model/element-metadata-utils.spec.tsx b/editor/src/core/model/element-metadata-utils.spec.tsx
index ef1870f9bd95..aa9f0a697ab3 100644
--- a/editor/src/core/model/element-metadata-utils.spec.tsx
+++ b/editor/src/core/model/element-metadata-utils.spec.tsx
@@ -468,6 +468,7 @@ describe('targetElementSupportsChildren', () => {
       path,
       [
         jsExpressionOtherJavaScript(
+          [],
           '<div />',
           '<div />;',
           'return <div />;',
@@ -548,6 +549,7 @@ describe('targetElementSupportsChildren', () => {
             [],
             [
               jsExpressionOtherJavaScript(
+                [],
                 '<div />',
                 '<div />;',
                 'return <div />;',
diff --git a/editor/src/core/model/jsx-attributes.spec.ts b/editor/src/core/model/jsx-attributes.spec.ts
index 326bae0ba2de..21047a356020 100644
--- a/editor/src/core/model/jsx-attributes.spec.ts
+++ b/editor/src/core/model/jsx-attributes.spec.ts
@@ -61,6 +61,7 @@ function sampleJsxAttributes(): JSXAttributes {
           jsxPropertyAssignment(
             'shadow',
             jsExpressionOtherJavaScript(
+              [],
               'props.someShadow',
               'props.someShadow',
               'return props.someShadow;',
@@ -117,6 +118,7 @@ function sampleJsxAttributes(): JSXAttributes {
         emptyComments,
       ),
       doggo: jsExpressionOtherJavaScript(
+        [],
         'props.hello',
         'props.hello',
         'return props.hello;',
@@ -136,6 +138,7 @@ function sampleJsxAttributes(): JSXAttributes {
         emptyComments,
       ),
       otherJs: jsExpressionOtherJavaScript(
+        [],
         'true ? 10 : 5',
         'true ? 10 : 5',
         'return true ? 10 : 5',
@@ -862,6 +865,7 @@ describe('unsetJSXValueAtPath', () => {
   it('fails when attempting to remove a property from an invalid attribute value', () => {
     const startingValue = jsxAttributesFromMap({
       style: jsExpressionOtherJavaScript(
+        [],
         'undefined',
         'undefined',
         'undefined',
diff --git a/editor/src/core/model/scene-utils.ts b/editor/src/core/model/scene-utils.ts
index d389d567ae46..132aa77ce84e 100644
--- a/editor/src/core/model/scene-utils.ts
+++ b/editor/src/core/model/scene-utils.ts
@@ -54,6 +54,7 @@ export function createSceneUidFromIndex(sceneIndex: number): string {
 export function mapScene(scene: SceneMetadata): JSXElement {
   const sceneProps = jsxAttributesFromMap({
     component: jsExpressionOtherJavaScript(
+      [],
       scene.component ?? 'null',
       scene.component ?? 'null',
       `return ${scene.component}`,
diff --git a/editor/src/core/model/test-ui-js-file.test-utils.ts b/editor/src/core/model/test-ui-js-file.test-utils.ts
index 3d7a7b9f0966..c33611ed68e3 100644
--- a/editor/src/core/model/test-ui-js-file.test-utils.ts
+++ b/editor/src/core/model/test-ui-js-file.test-utils.ts
@@ -69,6 +69,7 @@ const mainComponentForTests = utopiaJSXComponent(
       layout: jsxAttributeNestedObjectSimple(
         jsxAttributesFromMap({
           left: jsExpressionOtherJavaScript(
+            [],
             `props.style.left`,
             `props.style.left`,
             `return props.style.left`,
@@ -78,6 +79,7 @@ const mainComponentForTests = utopiaJSXComponent(
             emptyComments,
           ),
           top: jsExpressionOtherJavaScript(
+            [],
             `props.style.top`,
             `props.style.top`,
             `return props.style.top`,
@@ -87,6 +89,7 @@ const mainComponentForTests = utopiaJSXComponent(
             emptyComments,
           ),
           width: jsExpressionOtherJavaScript(
+            [],
             `props.style.width`,
             `props.style.width`,
             `return props.style.width`,
@@ -96,6 +99,7 @@ const mainComponentForTests = utopiaJSXComponent(
             emptyComments,
           ),
           height: jsExpressionOtherJavaScript(
+            [],
             `props.style.height`,
             `props.style.height`,
             `return props.style.height`,
diff --git a/editor/src/core/property-controls/property-control-values.spec.ts b/editor/src/core/property-controls/property-control-values.spec.ts
index 0ca36bab4a8c..97b52e8411d0 100644
--- a/editor/src/core/property-controls/property-control-values.spec.ts
+++ b/editor/src/core/property-controls/property-control-values.spec.ts
@@ -116,6 +116,7 @@ describe('ExpressionInputControlDescription', () => {
 
   const validValue = 'Cake'
   const wrappedValidValue = jsExpressionOtherJavaScript(
+    [],
     validValue,
     validValue,
     ``,
diff --git a/editor/src/core/property-controls/property-control-values.ts b/editor/src/core/property-controls/property-control-values.ts
index 6bd22d34dca7..32c4cf09a7ba 100644
--- a/editor/src/core/property-controls/property-control-values.ts
+++ b/editor/src/core/property-controls/property-control-values.ts
@@ -429,7 +429,7 @@ function printColor(value: unknown): JSExpression {
 }
 
 function printJS<T>(value: T): JSExpression {
-  return jsExpressionOtherJavaScript(`${value}`, `${value}`, ``, [], null, {}, emptyComments)
+  return jsExpressionOtherJavaScript([], `${value}`, `${value}`, ``, [], null, {}, emptyComments)
 }
 
 export function printerForBasePropertyControl(control: BaseControlDescription): Printer<unknown> {
diff --git a/editor/src/core/shared/element-path-tree.spec.browser2.tsx b/editor/src/core/shared/element-path-tree.spec.browser2.tsx
index 3971a57dbc32..a4eefda22023 100644
--- a/editor/src/core/shared/element-path-tree.spec.browser2.tsx
+++ b/editor/src/core/shared/element-path-tree.spec.browser2.tsx
@@ -142,8 +142,8 @@ describe('Building and ordering the element path tree for a real project', () =>
             sb/sc/app:app-root/frag/cond-1/cond-1-true
               sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-1-true-child
               sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2
-                sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/9ca
-                  sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/9ca/cond-2-child~~~1
+                sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/2bb
+                  sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/2bb/cond-2-child~~~1
       sb/sc/app/app-child
 `,
     )
@@ -163,7 +163,7 @@ describe('getChildrenOrdered', () => {
     )
 
     expect(childrenOfCond2.map((c) => EP.toString(c.elementPath))).toEqual([
-      'sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/9ca',
+      'sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/2bb',
     ])
   })
 })
diff --git a/editor/src/core/shared/element-template.spec.ts b/editor/src/core/shared/element-template.spec.ts
index af2514ccc694..7feac3caf0fb 100644
--- a/editor/src/core/shared/element-template.spec.ts
+++ b/editor/src/core/shared/element-template.spec.ts
@@ -79,6 +79,7 @@ describe('attributeReferencesElsewhere', () => {
     expect(
       attributeReferencesElsewhere(
         jsExpressionOtherJavaScript(
+          [],
           'otherThing',
           'otherThing',
           'return otherThing',
@@ -93,7 +94,7 @@ describe('attributeReferencesElsewhere', () => {
   it('ATTRIBUTE_OTHER_JAVASCRIPT returns false if it does not have a definedElsewhere entry', () => {
     expect(
       attributeReferencesElsewhere(
-        jsExpressionOtherJavaScript('5', '5', 'return 5', [], null, {}, emptyComments),
+        jsExpressionOtherJavaScript([], '5', '5', 'return 5', [], null, {}, emptyComments),
       ),
     ).toEqual(false)
   })
@@ -104,6 +105,7 @@ describe('attributeReferencesElsewhere', () => {
           [
             jsxArrayValue(
               jsExpressionOtherJavaScript(
+                [],
                 'otherThing',
                 'otherThing',
                 'return otherThing',
@@ -126,7 +128,7 @@ describe('attributeReferencesElsewhere', () => {
         jsExpressionNestedArray(
           [
             jsxArrayValue(
-              jsExpressionOtherJavaScript('5', '5', 'return 5', [], null, {}, emptyComments),
+              jsExpressionOtherJavaScript([], '5', '5', 'return 5', [], null, {}, emptyComments),
               emptyComments,
             ),
           ],
@@ -143,6 +145,7 @@ describe('attributeReferencesElsewhere', () => {
             jsxPropertyAssignment(
               'someKey',
               jsExpressionOtherJavaScript(
+                [],
                 'otherThing',
                 'otherThing',
                 'return otherThing',
@@ -167,7 +170,7 @@ describe('attributeReferencesElsewhere', () => {
           [
             jsxPropertyAssignment(
               'someKey',
-              jsExpressionOtherJavaScript('5', '5', 'return 5', [], null, {}, emptyComments),
+              jsExpressionOtherJavaScript([], '5', '5', 'return 5', [], null, {}, emptyComments),
               emptyComments,
               emptyComments,
             ),
@@ -183,6 +186,7 @@ describe('attributeReferencesElsewhere', () => {
       attributeReferencesElsewhere(
         jsExpressionFunctionCall('someFn', [
           jsExpressionOtherJavaScript(
+            [],
             'otherThing',
             'otherThing',
             'return otherThing',
@@ -199,7 +203,7 @@ describe('attributeReferencesElsewhere', () => {
     expect(
       attributeReferencesElsewhere(
         jsExpressionFunctionCall('someFn', [
-          jsExpressionOtherJavaScript('5', '5', 'return 5', [], null, {}, emptyComments),
+          jsExpressionOtherJavaScript([], '5', '5', 'return 5', [], null, {}, emptyComments),
         ]),
       ),
     ).toEqual(false)
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index 46ff0105e01d..800541c6fef6 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -174,6 +174,7 @@ export function jsxAttributeNotFound(): JSXAttributeNotFound {
 
 export interface JSExpressionOtherJavaScript extends WithComments, WithElementsWithin {
   type: 'ATTRIBUTE_OTHER_JAVASCRIPT'
+  params: Array<Param>
   originalJavascript: string
   javascript: string
   transpiledJavascript: string
@@ -183,6 +184,7 @@ export interface JSExpressionOtherJavaScript extends WithComments, WithElementsW
 }
 
 export function jsExpressionOtherJavaScript(
+  params: Array<Param>,
   originalJavascript: string,
   javascript: string,
   transpiledJavascript: string,
@@ -194,6 +196,7 @@ export function jsExpressionOtherJavaScript(
 ): JSExpressionOtherJavaScript {
   return {
     type: 'ATTRIBUTE_OTHER_JAVASCRIPT',
+    params: params,
     originalJavascript: originalJavascript,
     javascript: javascript,
     transpiledJavascript: transpiledJavascript,
@@ -210,6 +213,7 @@ export function jsExpressionOtherJavaScriptSimple(
   definedElsewhere: Array<string>,
 ): JSExpressionOtherJavaScript {
   return jsExpressionOtherJavaScript(
+    [],
     javascript,
     javascript,
     `return ${javascript}`,
@@ -1598,6 +1602,7 @@ export function utopiaJSXComponent(
 }
 
 export function arbitraryJSBlock(
+  params: Array<Param>,
   javascript: string,
   transpiledJavascript: string,
   definedWithin: Array<string>,
@@ -1608,6 +1613,7 @@ export function arbitraryJSBlock(
 ): ArbitraryJSBlock {
   return {
     type: 'ARBITRARY_JS_BLOCK',
+    params: params,
     javascript: javascript,
     transpiledJavascript: transpiledJavascript,
     definedWithin: definedWithin,
@@ -1777,6 +1783,10 @@ export function propNamesForParam(param: Param): Array<string> {
   }
 }
 
+export function propertiesExposedByParams(params: Array<Param>): Array<string> {
+  return params.flatMap(propertiesExposedByParam)
+}
+
 export function propertiesExposedByParam(param: Param): Array<string> {
   switch (param.boundParam.type) {
     case 'REGULAR_PARAM':
@@ -1826,6 +1836,7 @@ export interface UtopiaJSXComponent {
 
 export type ArbitraryJSBlock = {
   type: 'ARBITRARY_JS_BLOCK'
+  params: Array<Param>
   javascript: string
   transpiledJavascript: string
   definedWithin: Array<string>
diff --git a/editor/src/core/shared/jsx-attributes.benchmark.ts b/editor/src/core/shared/jsx-attributes.benchmark.ts
index f95e137208dd..ffa521cd5fe2 100644
--- a/editor/src/core/shared/jsx-attributes.benchmark.ts
+++ b/editor/src/core/shared/jsx-attributes.benchmark.ts
@@ -33,6 +33,7 @@ function sampleJsxAttributes(): JSXAttributes {
         jsxPropertyAssignment(
           'shadow',
           jsExpressionOtherJavaScript(
+            [],
             'props.someShadow',
             'props.someShadow',
             'return props.someShadow;',
@@ -100,6 +101,7 @@ function sampleJsxAttributes(): JSXAttributes {
       emptyComments,
     ),
     doggo: jsExpressionOtherJavaScript(
+      [],
       'props.hello',
       'props.hello',
       'return props.hello;',
@@ -119,6 +121,7 @@ function sampleJsxAttributes(): JSXAttributes {
       emptyComments,
     ),
     otherJs: jsExpressionOtherJavaScript(
+      [],
       'true ? 10 : 5',
       'true ? 10 : 5',
       'return true ? 10 : 5',
diff --git a/editor/src/core/shared/uid-utils.ts b/editor/src/core/shared/uid-utils.ts
index 7484432187bb..a94665ebe16e 100644
--- a/editor/src/core/shared/uid-utils.ts
+++ b/editor/src/core/shared/uid-utils.ts
@@ -748,6 +748,7 @@ export function setUtopiaID(element: JSXElementChild, uid: string): JSXElementCh
     return jsExpressionFunctionCall(element.functionName, element.parameters, uid)
   } else if (isUtopiaJSExpressionOtherJavaScript(element)) {
     return jsExpressionOtherJavaScript(
+      element.params,
       element.originalJavascript,
       element.javascript,
       element.transpiledJavascript,
diff --git a/editor/src/core/third-party/react-three-fiber-components.ts b/editor/src/core/third-party/react-three-fiber-components.ts
index e51a598e964a..391674e210b7 100644
--- a/editor/src/core/third-party/react-three-fiber-components.ts
+++ b/editor/src/core/third-party/react-three-fiber-components.ts
@@ -19,6 +19,7 @@ function threeAttribute(key: string, fromThree: string): JSXAttributesEntry {
   return jsxAttributesEntry(
     key,
     jsExpressionOtherJavaScript(
+      [],
       `THREE.${fromThree}`,
       `THREE.${fromThree}`,
       `return THREE.${fromThree}`,
diff --git a/editor/src/core/workers/parser-printer/parser-printer-arbitrary-elements.spec.tsx b/editor/src/core/workers/parser-printer/parser-printer-arbitrary-elements.spec.tsx
index c46d8c0a2347..8f561bc8846d 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-arbitrary-elements.spec.tsx
+++ b/editor/src/core/workers/parser-printer/parser-printer-arbitrary-elements.spec.tsx
@@ -226,6 +226,7 @@ export var whatever = props => (
     )
 
     const codeBlock = jsExpressionOtherJavaScript(
+      [],
       `<MyComp data-uid='aab'/>`,
       `<MyComp data-uid='aab' />;`,
       `return utopiaCanvasJSXLookup("aab", {
@@ -322,6 +323,7 @@ export var whatever = (props) => {
               jsxAttributesFromMap({
                 'data-uid': jsExpressionValue('aab', emptyComments),
                 thing: jsExpressionOtherJavaScript(
+                  [],
                   'n',
                   'n',
                   'return n;',
@@ -349,6 +351,7 @@ export var whatever = (props) => {
 }];
 return { arr: arr };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['arr'],
@@ -429,6 +432,7 @@ export var whatever = (props) => {
               jsxAttributesFromMap({
                 'data-uid': jsExpressionValue('aab', emptyComments),
                 thing: jsExpressionOtherJavaScript(
+                  [],
                   'n',
                   'n',
                   'return n;',
@@ -458,6 +462,7 @@ export var whatever = (props) => {
 }];
 return { arr: arr };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['arr'],
@@ -543,6 +548,7 @@ export var whatever = (props) => {
               jsxAttributesFromMap({
                 'data-uid': jsExpressionValue('aab', emptyComments),
                 thing: jsExpressionOtherJavaScript(
+                  [],
                   'n',
                   'n',
                   'return n;',
@@ -568,6 +574,7 @@ export var whatever = (props) => {
     const transpiledJsCode = `var arr = [[1]];
 return { arr: arr };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['arr'],
@@ -653,6 +660,7 @@ export var whatever = (props) => {
                   }),
                   [
                     jsExpressionOtherJavaScript(
+                      [],
                       `n`,
                       `n;`,
                       `return n;`,
@@ -732,6 +740,7 @@ export var whatever = (props) => {
       }),
       [
         jsExpressionOtherJavaScript(
+          [],
           mapJsCode,
           mapJsCode,
           transpiledMapJsCode,
@@ -748,6 +757,7 @@ export var whatever = (props) => {
               jsxAttributesFromMap({
                 'data-uid': jsExpressionValue('aab', emptyComments),
                 thing: jsExpressionOtherJavaScript(
+                  [],
                   'n',
                   'n',
                   'return n;',
@@ -772,6 +782,7 @@ export var whatever = (props) => {
     const transpiledJsCode = `var arr = [[[1]]];
 return { arr: arr };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['arr'],
@@ -857,6 +868,7 @@ export var whatever = (props) => {
                   }),
                   [
                     jsExpressionOtherJavaScript(
+                      [],
                       `n`,
                       `n;`,
                       `return n;`,
@@ -952,6 +964,7 @@ export var whatever = (props) => {
               jsxAttributesFromMap({
                 'data-uid': jsExpressionValue('aab', emptyComments),
                 thing: jsExpressionOtherJavaScript(
+                  [],
                   'n',
                   'n',
                   'return n;',
@@ -977,6 +990,7 @@ export var whatever = (props) => {
     const transpiledJsCode = `var arr = [[[1]]];
 return { arr: arr };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['arr'],
diff --git a/editor/src/core/workers/parser-printer/parser-printer-functional-components.spec.ts b/editor/src/core/workers/parser-printer/parser-printer-functional-components.spec.ts
index 220018ac7fe2..ab353362d1fa 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-functional-components.spec.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer-functional-components.spec.ts
@@ -232,6 +232,7 @@ describe('Parsing a function component with props', () => {
       regularParam(
         'props',
         jsExpressionOtherJavaScript(
+          [],
           '{thing: true}',
           '{thing: true}',
           `return ({
@@ -366,6 +367,7 @@ describe('Parsing a function component with props', () => {
       regularParam(
         'prop',
         jsExpressionOtherJavaScript(
+          [],
           '5',
           '5',
           'return 5;',
@@ -465,6 +467,7 @@ describe('Parsing a function component with props', () => {
       regularParam(
         'renamedProp',
         jsExpressionOtherJavaScript(
+          [],
           '5',
           '5',
           'return 5;',
@@ -604,6 +607,7 @@ describe('Parsing a function component with props', () => {
       regularParam(
         'prop',
         jsExpressionOtherJavaScript(
+          [],
           '5',
           '5',
           'return 5;',
@@ -757,6 +761,7 @@ describe('Parsing a function component with props', () => {
       regularParam(
         'renamedProp2',
         jsExpressionOtherJavaScript(
+          [],
           '{thing: true}',
           '{thing: true}',
           `return ({
@@ -782,6 +787,7 @@ describe('Parsing a function component with props', () => {
       regularParam(
         'prop1',
         jsExpressionOtherJavaScript(
+          [],
           '5',
           '5',
           'return 5;',
diff --git a/editor/src/core/workers/parser-printer/parser-printer-parsing.ts b/editor/src/core/workers/parser-printer/parser-printer-parsing.ts
index 0c29cbef02d0..2cce5406681d 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-parsing.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer-parsing.ts
@@ -45,6 +45,10 @@ import type {
   JSXTextBlock,
   JSXMapExpression,
   JSExpressionMapOrOtherJavascript,
+  BoundParam,
+  DestructuredArrayPart,
+  DestructuredParamPart,
+  Param,
 } from '../../shared/element-template'
 import {
   arbitraryJSBlock,
@@ -84,6 +88,13 @@ import {
   isJSXElementLike,
   isJSXAttributeValue,
   jsxMapExpression,
+  destructuredArray,
+  destructuredObject,
+  destructuredParamPart,
+  functionParam,
+  isRegularParam,
+  omittedParam,
+  regularParam,
 } from '../../shared/element-template'
 import { maybeToArray, forceNotNull } from '../../shared/optional-utils'
 import type {
@@ -118,6 +129,210 @@ import { emptySet } from '../../../core/shared/set-utils'
 import { getAllUniqueUidsFromAttributes } from '../../../core/model/get-unique-ids'
 import type { SteganographyMode } from './parser-printer'
 
+export function parseParams(
+  params: TS.NodeArray<TS.ParameterDeclaration>,
+  file: TS.SourceFile,
+  sourceText: string,
+  filename: string,
+  imports: Imports,
+  topLevelNames: Array<string>,
+  existingHighlightBounds: Readonly<HighlightBoundsForUids>,
+  existingUIDs: Set<string>,
+  applySteganography: SteganographyMode,
+): Either<string, WithParserMetadata<Array<Param>>> {
+  let parsedParams: Array<Param> = []
+  let highlightBounds: HighlightBoundsForUids = { ...existingHighlightBounds }
+  let propsUsed: Array<string> = []
+  for (const param of params) {
+    const parseResult = parseParam(
+      param,
+      file,
+      sourceText,
+      filename,
+      imports,
+      topLevelNames,
+      highlightBounds,
+      existingUIDs,
+      applySteganography,
+    )
+    if (isRight(parseResult)) {
+      const parsedParam = parseResult.value
+      highlightBounds = {
+        ...highlightBounds,
+        ...parsedParam.highlightBounds,
+      }
+      propsUsed = [...propsUsed, ...parsedParam.propsUsed]
+      parsedParams.push(parsedParam.value)
+    } else {
+      return parseResult
+    }
+  }
+  return right(withParserMetadata(parsedParams, highlightBounds, propsUsed, []))
+}
+
+export function parseParam(
+  param: TS.ParameterDeclaration | TS.BindingElement,
+  file: TS.SourceFile,
+  sourceText: string,
+  filename: string,
+  imports: Imports,
+  topLevelNames: Array<string>,
+  existingHighlightBounds: Readonly<HighlightBoundsForUids>,
+  existingUIDs: Set<string>,
+  applySteganography: SteganographyMode,
+): Either<string, WithParserMetadata<Param>> {
+  const dotDotDotToken = param.dotDotDotToken != null
+  const parsedExpression: Either<
+    string,
+    WithParserMetadata<JSExpressionMapOrOtherJavascript | undefined>
+  > = param.initializer == null
+    ? right(withParserMetadata(undefined, existingHighlightBounds, [], []))
+    : parseAttributeOtherJavaScript(
+        file,
+        sourceText,
+        filename,
+        imports,
+        topLevelNames,
+        null,
+        param.initializer,
+        existingHighlightBounds,
+        existingUIDs,
+        applySteganography,
+      )
+  return flatMapEither((paramExpression) => {
+    const parsedBindingName = parseBindingName(
+      param.name,
+      paramExpression,
+      file,
+      sourceText,
+      filename,
+      imports,
+      topLevelNames,
+      existingHighlightBounds,
+      existingUIDs,
+      applySteganography,
+    )
+    return mapEither(
+      (bindingName) =>
+        withParserMetadata(
+          functionParam(dotDotDotToken, bindingName.value),
+          bindingName.highlightBounds,
+          bindingName.propsUsed,
+          [],
+        ),
+      parsedBindingName,
+    )
+  }, parsedExpression)
+}
+
+function parseBindingName(
+  elem: TS.BindingName,
+  expression: WithParserMetadata<JSExpressionMapOrOtherJavascript | undefined>,
+  file: TS.SourceFile,
+  sourceText: string,
+  filename: string,
+  imports: Imports,
+  topLevelNames: Array<string>,
+  existingHighlightBounds: Readonly<HighlightBoundsForUids>,
+  existingUIDs: Set<string>,
+  applySteganography: SteganographyMode,
+): Either<string, WithParserMetadata<BoundParam>> {
+  let highlightBounds: HighlightBoundsForUids = {
+    ...existingHighlightBounds,
+    ...expression.highlightBounds,
+  }
+  let propsUsed: Array<string> = [...expression.propsUsed]
+
+  if (TS.isIdentifier(elem)) {
+    const parsedParamName = getPropertyNameText(elem, file)
+    return mapEither(
+      (paramName) =>
+        withParserMetadata(
+          regularParam(paramName, expression.value ?? null),
+          highlightBounds,
+          propsUsed,
+          [],
+        ),
+      parsedParamName,
+    )
+  } else if (TS.isObjectBindingPattern(elem)) {
+    let parts: Array<DestructuredParamPart> = []
+    for (const element of elem.elements) {
+      const parsedPropertyName: Either<string, string | null> =
+        element.propertyName == null ? right(null) : getPropertyNameText(element.propertyName, file)
+      if (isRight(parsedPropertyName)) {
+        const propertyName = parsedPropertyName.value
+        const parsedParam = parseParam(
+          element,
+          file,
+          sourceText,
+          filename,
+          imports,
+          topLevelNames,
+          highlightBounds,
+          existingUIDs,
+          applySteganography,
+        )
+        if (isRight(parsedParam)) {
+          const bound = parsedParam.value.value
+          highlightBounds = {
+            ...highlightBounds,
+            ...parsedParam.value.highlightBounds,
+          }
+          propsUsed = [...propsUsed, ...parsedParam.value.propsUsed]
+          if (propertyName == null) {
+            if (isRegularParam(bound.boundParam)) {
+              parts.push(destructuredParamPart(undefined, bound, null))
+            } else {
+              return left('Unable to parse bound object parameter with no parameter propertyName')
+            }
+          } else {
+            parts.push(destructuredParamPart(propertyName, bound, null))
+          }
+        } else {
+          return parsedParam
+        }
+      } else {
+        return parsedPropertyName
+      }
+    }
+    return right(withParserMetadata(destructuredObject(parts), highlightBounds, propsUsed, []))
+  } else if (TS.isArrayBindingPattern(elem)) {
+    let parts: Array<DestructuredArrayPart> = []
+    for (const element of elem.elements) {
+      if (TS.isOmittedExpression(element)) {
+        parts.push(omittedParam())
+      } else {
+        const parsedParam = parseParam(
+          element,
+          file,
+          sourceText,
+          filename,
+          imports,
+          topLevelNames,
+          highlightBounds,
+          existingUIDs,
+          applySteganography,
+        )
+        if (isRight(parsedParam)) {
+          const bound = parsedParam.value.value
+          highlightBounds = {
+            ...highlightBounds,
+            ...parsedParam.value.highlightBounds,
+          }
+          propsUsed = [...propsUsed, ...parsedParam.value.propsUsed]
+          parts.push(bound)
+        } else {
+          return parsedParam
+        }
+      }
+    }
+    return right(withParserMetadata(destructuredArray(parts), highlightBounds, propsUsed, []))
+  } else {
+    return left('Unable to parse binding element')
+  }
+}
+
 function inPositionToElementsWithin(elements: ElementsWithinInPosition): ElementsWithin {
   let result: ElementsWithin = {}
   fastForEach(elements, (element) => {
@@ -627,6 +842,7 @@ function parseOtherJavaScript<E extends TS.Node, T extends { uid: string }>(
     fileNode: typeof SourceNode,
     parsedElementsWithin: ElementsWithinInPosition,
     otherJavaScriptType: OtherJavaScriptType,
+    params: Array<Param>,
   ) => Either<string, T>,
 ): Either<string, WithParserMetadata<T>> {
   if (expressionsAndTexts.length === 0) {
@@ -1000,6 +1216,7 @@ function parseOtherJavaScript<E extends TS.Node, T extends { uid: string }>(
 
     let expressionsText: Array<string> = []
     let expressionsNodes: Array<typeof SourceNode> = []
+    let params: Either<string, WithParserMetadata<Array<Param>> | null> = right(null)
     for (const expressionAndText of expressionsAndTexts) {
       // Update the code offsets used when locating elements within
       const startPosition = TS.getLineAndCharacterOfPosition(sourceFile, expressionAndText.startPos)
@@ -1014,6 +1231,22 @@ function parseOtherJavaScript<E extends TS.Node, T extends { uid: string }>(
 
       const expression = expressionAndText.expression
       if (expression != null) {
+        // Handle the parameters, as this is a single expression and if it's a function.
+        if (expressionsAndTexts.length === 1) {
+          if (TS.isArrowFunction(expression) || TS.isFunctionExpression(expression)) {
+            params = parseParams(
+              expression.parameters,
+              sourceFile,
+              sourceText,
+              filename,
+              imports,
+              topLevelNames,
+              existingHighlightBounds,
+              alreadyExistingUIDs,
+              applySteganography,
+            )
+          }
+        }
         addIfDefinedElsewhere([], expression, false)
         const expressionText = expressionAndText.text
         if (expressionText.length > 0) {
@@ -1071,6 +1304,20 @@ function parseOtherJavaScript<E extends TS.Node, T extends { uid: string }>(
       return !definedWithin.includes(e)
     })
 
+    const paramsToUse = foldEither(
+      () => {
+        return []
+      },
+      (paramsSuccess) => {
+        if (paramsSuccess == null) {
+          return []
+        } else {
+          return paramsSuccess.value
+        }
+      },
+      params,
+    )
+
     return mapEither((created) => {
       // Add in the bounds for the entire value.
       highlightBounds = addToHighlightBounds(
@@ -1078,7 +1325,7 @@ function parseOtherJavaScript<E extends TS.Node, T extends { uid: string }>(
         buildHighlightBoundsForExpressionsAndText(sourceFile, expressionsAndTexts, created.uid),
       )
       return withParserMetadata(created, highlightBounds, propsUsed, definedElsewhere)
-    }, create(code, definedWithin, definedElsewhere, fileNode, parsedElementsWithin, otherJavaScriptType))
+    }, create(code, definedWithin, definedElsewhere, fileNode, parsedElementsWithin, otherJavaScriptType, paramsToUse))
   }
 }
 
@@ -1113,7 +1360,15 @@ export function parseAttributeOtherJavaScript(
     alreadyExistingUIDs,
     '',
     applySteganography,
-    (code, _, definedElsewhere, fileSourceNode, parsedElementsWithin, otherJavaScriptType) => {
+    (
+      code,
+      _,
+      definedElsewhere,
+      fileSourceNode,
+      parsedElementsWithin,
+      otherJavaScriptType,
+      params,
+    ) => {
       const { code: codeFromFile, map } = fileSourceNode.toStringWithSourceMap({ file: filename })
       const rawMap = JSON.parse(map.toString())
 
@@ -1147,6 +1402,7 @@ export function parseAttributeOtherJavaScript(
         return createExpressionOtherJavaScript(
           sourceFile,
           expression,
+          params,
           expressionAndText.text,
           code,
           prependedWithReturn.code,
@@ -1219,12 +1475,21 @@ function parseJSExpression(
     alreadyExistingUIDs,
     '',
     applySteganography,
-    (code, _definedWithin, definedElsewhere, _fileSourceNode, parsedElementsWithin, isList) => {
+    (
+      code,
+      _definedWithin,
+      definedElsewhere,
+      _fileSourceNode,
+      parsedElementsWithin,
+      isList,
+      params,
+    ) => {
       if (code === '') {
         return right(
           createExpressionOtherJavaScript(
             sourceFile,
             jsxExpression,
+            params,
             expressionFullText,
             expressionFullText,
             'return undefined',
@@ -1274,6 +1539,7 @@ function parseJSExpression(
             return createExpressionOtherJavaScript(
               sourceFile,
               jsxExpression,
+              params,
               expressionFullText,
               dataUIDFixResult.code,
               returnPrepended.code,
@@ -1336,6 +1602,7 @@ function createExpressionValue(
 function createExpressionOtherJavaScript(
   sourceFile: TS.SourceFile,
   node: TS.Node,
+  params: Array<Param>,
   originalJavascript: string,
   javascript: string,
   transpiledJavascript: string,
@@ -1363,6 +1630,7 @@ function createExpressionOtherJavaScript(
           '',
         )
       : jsExpressionOtherJavaScript(
+          params,
           originalJavascript,
           javascript,
           transpiledJavascript,
@@ -1396,6 +1664,7 @@ function createExpressionOtherJavaScript(
         uid,
       )
     : jsExpressionOtherJavaScript(
+        params,
         originalJavascript,
         javascript,
         transpiledJavascript,
@@ -1469,6 +1738,7 @@ function createExpressionFunctionCall(
 
 function createArbitraryJSBlock(
   sourceFile: TS.SourceFile,
+  params: Array<Param>,
   javascript: string,
   transpiledJavascript: string,
   definedWithin: Array<string>,
@@ -1478,6 +1748,7 @@ function createArbitraryJSBlock(
   alreadyExistingUIDs: Set<string>,
 ): ArbitraryJSBlock {
   const value = arbitraryJSBlock(
+    params,
     javascript,
     transpiledJavascript,
     definedWithin,
@@ -1488,6 +1759,7 @@ function createArbitraryJSBlock(
   )
   const uid = generateUIDAndAddToExistingUIDs(sourceFile, value, alreadyExistingUIDs)
   return arbitraryJSBlock(
+    params,
     javascript,
     transpiledJavascript,
     definedWithin,
@@ -1759,6 +2031,7 @@ function getAttributeExpression(
       const withoutParserMetadata = createExpressionOtherJavaScript(
         sourceFile,
         initializer,
+        [],
         'null',
         'null',
         'null',
@@ -2942,7 +3215,7 @@ export function parseArbitraryNodes(
     alreadyExistingUIDs,
     trailingCode,
     applySteganography,
-    (code, definedWithin, definedElsewhere, fileSourceNode, parsedElementsWithin) => {
+    (code, definedWithin, definedElsewhere, fileSourceNode, parsedElementsWithin, _, params) => {
       const definedWithinFields = definedWithin.map((within) => `${within}: ${within}`).join(', ')
       const definedWithCode = `return { ${definedWithinFields} };`
 
@@ -2969,6 +3242,7 @@ export function parseArbitraryNodes(
           const transpiled = `${transpileResult.code}\n${definedWithCode}`
           return createArbitraryJSBlock(
             sourceFile,
+            params,
             code,
             transpiled,
             definedWithin,
@@ -3028,6 +3302,7 @@ export function parseOutFunctionContents(
   sourceFile: TS.SourceFile,
   sourceText: string,
   filename: string,
+  params: Array<Param>,
   imports: Imports,
   topLevelNames: Array<string>,
   propsObjectName: string | null,
@@ -3081,6 +3356,7 @@ export function parseOutFunctionContents(
       } else {
         jsBlock = createArbitraryJSBlock(
           sourceFile,
+          [],
           returnStatementPrefixCode,
           returnStatementPrefixCode,
           [],
diff --git a/editor/src/core/workers/parser-printer/parser-printer-uids.spec.tsx b/editor/src/core/workers/parser-printer/parser-printer-uids.spec.tsx
index 3dd12aca5d27..4f51ddf2884d 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-uids.spec.tsx
+++ b/editor/src/core/workers/parser-printer/parser-printer-uids.spec.tsx
@@ -9,6 +9,7 @@ import {
   jsExpressionValue,
   jsxElement,
   utopiaJSXComponent,
+  isJSExpressionOtherJavaScript,
 } from '../../shared/element-template'
 import type { ProjectContents } from '../../shared/project-file-types'
 import { directory } from '../../shared/project-file-types'
@@ -391,6 +392,7 @@ export var app = (props) => {
                   ),
                 }
                 const updatedFirstChild = jsExpressionOtherJavaScript(
+                  isJSExpressionOtherJavaScript(firstChild) ? firstChild.params : [],
                   firstChild.originalJavascript,
                   firstChild.javascript,
                   firstChild.transpiledJavascript,
diff --git a/editor/src/core/workers/parser-printer/parser-printer.spec.ts b/editor/src/core/workers/parser-printer/parser-printer.spec.ts
index 056ea1f8f5bb..207f26289565 100644
--- a/editor/src/core/workers/parser-printer/parser-printer.spec.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer.spec.ts
@@ -102,6 +102,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -244,6 +245,7 @@ export function whatever(props) {
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -390,6 +392,7 @@ export default function whatever(props) {
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -533,6 +536,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -615,6 +619,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -630,6 +635,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aac', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -704,6 +710,7 @@ export var whatever = (props) => <View data-uid='aaa'>
         'data-uid': jsExpressionValue('aac', emptyComments),
         style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
         left: jsExpressionOtherJavaScript(
+          [],
           'props.leftOfTheCake[0].hat',
           'props.leftOfTheCake[0].hat',
           'return props.leftOfTheCake[0].hat;',
@@ -779,6 +786,7 @@ export var whatever = (props) => <View data-uid='aaa'>
         'data-label': jsExpressionValue('First cake', emptyComments),
         style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
         left: jsExpressionOtherJavaScript(
+          [],
           'props.leftOfTheCake[0].hat',
           'props.leftOfTheCake[0].hat',
           'return props.leftOfTheCake[0].hat;',
@@ -796,6 +804,7 @@ export var whatever = (props) => <View data-uid='aaa'>
         'data-label': jsExpressionValue('Second cake', emptyComments),
         style: jsExpressionValue({ backgroundColor: 'blue' }, emptyComments),
         left: jsExpressionOtherJavaScript(
+          [],
           'props.rightOfTheCake[0].hat',
           'props.rightOfTheCake[0].hat',
           'return props.rightOfTheCake[0].hat;',
@@ -874,6 +883,7 @@ export var whatever = (props) => <View data-uid='aaa'>
         emptyComments,
       ),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -955,6 +965,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'getSizing(spacing)',
         'getSizing(spacing)',
         'return getSizing(spacing);',
@@ -970,6 +981,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       right: jsExpressionValue(20, emptyComments),
       top: jsExpressionValue(-20, emptyComments),
       onClick: jsExpressionOtherJavaScript(
+        [],
         `function click(){console.log('click')}`,
         `function click(){console.log('click')}`,
         `return (function click() {
@@ -1012,6 +1024,7 @@ export var whatever = (props) => <View data-uid='aaa'>
 }
 return { getSizing: getSizing };`
     const arbitraryBlock1 = arbitraryJSBlock(
+      [],
       jsCode1,
       transpiledJsCode1,
       ['getSizing'],
@@ -1027,6 +1040,7 @@ return { getSizing: getSizing };`
     const transpiledJsCode2 = `var spacing = 20;
 return { spacing: spacing };`
     const arbitraryBlock2 = arbitraryJSBlock(
+      [],
       jsCode2,
       transpiledJsCode2,
       ['spacing'],
@@ -1049,6 +1063,7 @@ var spacing = 20`
 var spacing = 20;
 return { getSizing: getSizing, spacing: spacing };`
     const combinedArbitraryBlock = arbitraryJSBlock(
+      [],
       combinedJsCode,
       transpiledcombinedJsCode,
       ['getSizing', 'spacing'],
@@ -1109,6 +1124,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -1147,6 +1163,7 @@ export var whatever = (props) => <View data-uid='aaa'>
 }
 return { getSizing: getSizing };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['getSizing'],
@@ -1212,6 +1229,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -1261,6 +1279,7 @@ export var whatever = (props) => <View data-uid='aaa'>
 }
 return { getSizing: getSizing };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['getSizing'],
@@ -1321,6 +1340,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.leftOfTheCake[0].hat',
         'props.leftOfTheCake[0].hat',
         'return props.leftOfTheCake[0].hat;',
@@ -1359,6 +1379,7 @@ export var whatever = (props) => <View data-uid='aaa'>
 });
 return {  };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       [],
@@ -1417,6 +1438,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'spacing',
         'spacing',
         'return spacing;',
@@ -1454,6 +1476,7 @@ export var whatever = (props) => <View data-uid='aaa'>
     const transpiledJSCode = `var spacing = 20;
 return { spacing: spacing };`
     const jsVariable = arbitraryJSBlock(
+      [],
       'var spacing = 20',
       transpiledJSCode,
       ['spacing'],
@@ -1506,6 +1529,7 @@ export var whatever = (props) => {
       style: jsxAttributeNestedObjectSimple(
         jsxAttributesFromMap({
           backgroundColor: jsExpressionOtherJavaScript(
+            [],
             'bgs[0]',
             'bgs[0]',
             'return bgs[0];',
@@ -1529,6 +1553,7 @@ export var whatever = (props) => {
 var bg = bgs[0];
 return { bgs: bgs, bg: bg };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['bgs', 'bg'],
@@ -1586,6 +1611,7 @@ export var whatever = (props) => {
           jsxArrayValue(jsExpressionValue('black', emptyComments), emptyComments),
           jsxArraySpread(
             jsExpressionOtherJavaScript(
+              [],
               'greys',
               'greys',
               'return greys;',
@@ -1609,6 +1635,7 @@ export var whatever = (props) => {
     const transpiledJsCode = `var greys = ['lightGrey', 'grey'];
 return { greys: greys };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['greys'],
@@ -1663,6 +1690,7 @@ export var whatever = (props) => {
     const viewAttributes: JSXAttributes = jsxAttributesFromMap({
       'data-uid': jsExpressionValue('aaa', emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'a + b',
         'a + b',
         'return a + b;',
@@ -1683,6 +1711,7 @@ export var whatever = (props) => {
 var b = 20;
 return { a: a, b: b };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['a', 'b'],
@@ -1738,6 +1767,7 @@ export var whatever = (props) => {
     const viewAttributes: JSXAttributes = jsxAttributesFromMap({
       'data-uid': jsExpressionValue('aaa', emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'a ? b : c',
         'a ? b : c',
         'return a ? b : c;',
@@ -1760,6 +1790,7 @@ var b = 10;
 var c = 20;
 return { a: a, b: b, c: c };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['a', 'b', 'c'],
@@ -1813,6 +1844,7 @@ export var whatever = (props) => {
     const viewAttributes: JSXAttributes = jsxAttributesFromMap({
       'data-uid': jsExpressionValue('aaa', emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'a++',
         'a++',
         'return a++;',
@@ -1826,6 +1858,7 @@ export var whatever = (props) => {
         emptyComments,
       ),
       right: jsExpressionOtherJavaScript(
+        [],
         '++a',
         '++a',
         'return ++a;',
@@ -1844,6 +1877,7 @@ export var whatever = (props) => {
     const transpiledJsCode = `var a = 10;
 return { a: a };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['a'],
@@ -1898,6 +1932,7 @@ export var whatever = (props) => {
     const viewAttributes: JSXAttributes = jsxAttributesFromMap({
       'data-uid': jsExpressionValue('aaa', emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'b.a',
         'b.a',
         'return b.a;',
@@ -1920,6 +1955,7 @@ var b = {
 };
 return { a: a, b: b };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['a', 'b'],
@@ -2036,6 +2072,7 @@ export var whatever = (props) => {
         [
           jsxSpreadAssignment(
             jsExpressionOtherJavaScript(
+              [],
               'bg',
               'bg',
               'return bg;',
@@ -2061,6 +2098,7 @@ export var whatever = (props) => {
 };
 return { bg: bg };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['bg'],
@@ -2122,6 +2160,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       text: jsExpressionOtherJavaScript(
+        [],
         '`Count ${count}`',
         '`Count ${count}`',
         'return "Count ".concat(count);',
@@ -2158,6 +2197,7 @@ export var whatever = (props) => <View data-uid='aaa'>
     const transpiledJSCode = `var count = 10;
 return { count: count };`
     const jsVariable = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJSCode,
       ['count'],
@@ -2215,6 +2255,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'use20 ? 20 : 10',
         'use20 ? 20 : 10',
         'return use20 ? 20 : 10;',
@@ -2252,6 +2293,7 @@ export var whatever = (props) => <View data-uid='aaa'>
     const transpiledJSCode = `var use20 = true;
 return { use20: use20 };`
     const jsVariable = arbitraryJSBlock(
+      [],
       'var use20 = true',
       transpiledJSCode,
       ['use20'],
@@ -2324,6 +2366,7 @@ export var whatever = (props) => <View data-uid='aaa'>
     const transpiledJSCode = `var mySet = new Set();
 return { mySet: mySet };`
     const jsVariable = arbitraryJSBlock(
+      [],
       'var mySet = new Set()',
       transpiledJSCode,
       ['mySet'],
@@ -2373,6 +2416,7 @@ export var whatever = (props) => <View data-uid='aaa'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'props.left + spacing',
         'props.left + spacing',
         'return props.left + spacing;',
@@ -2410,6 +2454,7 @@ export var whatever = (props) => <View data-uid='aaa'>
     const transpiledJSCode = `var spacing = 20;
 return { spacing: spacing };`
     const jsVariable = arbitraryJSBlock(
+      [],
       'var spacing = 20',
       transpiledJSCode,
       ['spacing'],
@@ -2499,6 +2544,7 @@ export var whatever = (props) => <View data-uid='aaa'>
 return { MyComp: MyComp };`
     const definedElseWhere = ['React', JSX_CANVAS_LOOKUP_FUNCTION_NAME]
     const MyComp = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJsCode,
       ['MyComp'],
@@ -2596,6 +2642,7 @@ export var whatever = props => (
           jsxPropertyAssignment(
             'left',
             jsExpressionOtherJavaScript(
+              [],
               'props.layout.left',
               'props.layout.left',
               'return props.layout.left;',
@@ -2610,6 +2657,7 @@ export var whatever = props => (
           jsxPropertyAssignment(
             'top',
             jsExpressionOtherJavaScript(
+              [],
               'props.layout.top',
               'props.layout.top',
               'return props.layout.top;',
@@ -2786,6 +2834,7 @@ export var whatever = (props) => <View data-uid='aaa'>
               backgroundColor: jsExpressionValue('red', emptyComments),
               color: jsxAttributeNestedArraySimple([
                 jsExpressionOtherJavaScript(
+                  [],
                   'props.color',
                   'props.color',
                   'return props.color;',
@@ -2932,7 +2981,7 @@ export var App = (props) => <View data-uid='bbb'>
       clearParseResultUniqueIDsAndEmptyBlocks(testParseCode(code)),
     )
     const emptyBrackets = {
-      ...jsExpressionOtherJavaScript('', '', 'return undefined', [], null, {}, emptyComments),
+      ...jsExpressionOtherJavaScript([], '', '', 'return undefined', [], null, {}, emptyComments),
       uid: expect.any(String),
     }
     const view = clearJSXElementChildUniqueIDs(
@@ -3060,6 +3109,7 @@ export var App = (props) => <View data-uid='bbb'>
       'data-uid': jsExpressionValue('aab', emptyComments),
       style: jsExpressionValue({ backgroundColor: 'red' }, emptyComments),
       left: jsExpressionOtherJavaScript(
+        [],
         'getSizing(spacing)',
         'getSizing(spacing)',
         'return getSizing(spacing);',
@@ -3102,6 +3152,7 @@ export var App = (props) => <View data-uid='bbb'>
 }
 return { getSizing: getSizing };`
     const arbitraryBlock1 = arbitraryJSBlock(
+      [],
       jsCode1,
       transpiledJSCode1,
       ['getSizing'],
@@ -3117,6 +3168,7 @@ return { getSizing: getSizing };`
     const transpiledJSCode2 = `var spacing = 20;
 return { spacing: spacing };`
     const arbitraryBlock2 = arbitraryJSBlock(
+      [],
       jsCode2,
       transpiledJSCode2,
       ['spacing'],
@@ -3139,6 +3191,7 @@ var spacing = 20`
 var spacing = 20;
 return { getSizing: getSizing, spacing: spacing };`
     const combinedArbitraryBlock = arbitraryJSBlock(
+      [],
       combinedJSCode,
       transpiledcombinedJSCode,
       ['getSizing', 'spacing'],
@@ -3463,6 +3516,7 @@ export var whatever = props => {
             backgroundColor: jsExpressionValue('red', emptyComments),
             color: jsxAttributeNestedArraySimple([
               jsExpressionOtherJavaScript(
+                [],
                 'props.color',
                 'props.color',
                 'return props.color;',
@@ -3476,6 +3530,7 @@ export var whatever = props => {
             boxShadow: jsExpressionFunctionCall('createShadow', [
               jsExpressionValue(15, emptyComments),
               jsExpressionOtherJavaScript(
+                [],
                 'props.shadowValue',
                 'props.shadowValue',
                 'return props.shadowValue;',
@@ -3487,6 +3542,7 @@ export var whatever = props => {
               jsxAttributeNestedArraySimple([
                 jsExpressionValue('hello', emptyComments),
                 jsExpressionOtherJavaScript(
+                  [],
                   'props.there',
                   'props.there',
                   'return props.there;',
@@ -3626,6 +3682,7 @@ return { test: test };`
       sampleImportsForTests,
     )
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       jsCode,
       transpiledJSCode,
       ['test'],
@@ -3661,6 +3718,7 @@ return { test: test };`
                   jsxAttributesFromMap({
                     'data-uid': jsExpressionValue('aab', emptyComments),
                     left: jsExpressionOtherJavaScript(
+                      [],
                       'test(100)',
                       'test(100)',
                       'return test(100);',
@@ -3731,6 +3789,7 @@ return { test: test };`
                 jsxAttributesFromMap({
                   'data-uid': jsExpressionValue('aab', emptyComments),
                   left: jsExpressionOtherJavaScript(
+                    [],
                     'test(100)',
                     'test(100)',
                     'return test(100);',
@@ -3749,6 +3808,7 @@ return { test: test };`
             ],
           ),
           arbitraryJSBlock(
+            [],
             jsCode,
             transpiledJSCode,
             ['test'],
@@ -4226,6 +4286,7 @@ export var App = props => {
           layout: jsxAttributeNestedObjectSimple(
             jsxAttributesFromMap({
               height: jsExpressionOtherJavaScript(
+                [],
                 'props.layout.height',
                 'props.layout.height',
                 'return props.layout.height;',
@@ -4235,6 +4296,7 @@ export var App = props => {
                 emptyComments,
               ),
               left: jsExpressionOtherJavaScript(
+                [],
                 'props.layout.left',
                 'props.layout.left',
                 'return props.layout.left;',
@@ -4244,6 +4306,7 @@ export var App = props => {
                 emptyComments,
               ),
               width: jsExpressionOtherJavaScript(
+                [],
                 'props.layout.width',
                 'props.layout.width',
                 'return props.layout.width;',
@@ -4253,6 +4316,7 @@ export var App = props => {
                 emptyComments,
               ),
               top: jsExpressionOtherJavaScript(
+                [],
                 'props.layout.top',
                 'props.layout.top',
                 'return props.layout.top;',
@@ -4269,6 +4333,7 @@ export var App = props => {
         [myCustomComponent, view],
       ),
       arbitraryJSBlock(
+        [],
         `const a = 20;
   const b = 40;
   const MyCustomComponent = props => <View data-uid="abc">{props.children}</View>;`,
@@ -4504,6 +4569,7 @@ while (true) {
 }
 return {  };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       arbitraryBlockCode,
       arbitraryBlockTranspiledCode,
       [],
@@ -4579,6 +4645,7 @@ for (var n = 0; n < 5; n++) {
 }
 return { result: result };`
     const arbitraryBlock = arbitraryJSBlock(
+      [],
       arbitraryBlockCode,
       arbitraryBlockTranspiledCode,
       ['result'],
@@ -4597,6 +4664,7 @@ return { result: result };`
       },
     )
     const innerBlock = jsExpressionOtherJavaScript(
+      [],
       'result',
       'result;',
       'return result;',
@@ -4672,6 +4740,7 @@ export var whatever = props => {
               jsxPropertyAssignment(
                 'left',
                 jsExpressionOtherJavaScript(
+                  [],
                   `n * 30`,
                   `n * 30`,
                   `return n * 30;`,
@@ -4686,6 +4755,7 @@ export var whatever = props => {
               jsxPropertyAssignment(
                 'top',
                 jsExpressionOtherJavaScript(
+                  [],
                   `n * 30`,
                   `n * 30`,
                   `return n * 30;`,
@@ -4786,6 +4856,7 @@ export var whatever = props => {
               jsxPropertyAssignment(
                 'left',
                 jsExpressionOtherJavaScript(
+                  [],
                   `n * a`,
                   `n * a`,
                   `return n * a;`,
@@ -4800,6 +4871,7 @@ export var whatever = props => {
               jsxPropertyAssignment(
                 'top',
                 jsExpressionOtherJavaScript(
+                  [],
                   `n * a`,
                   `n * a`,
                   `return n * a;`,
@@ -4835,6 +4907,7 @@ export var whatever = props => {
     )
 
     const topLevelArbitraryBlock = arbitraryJSBlock(
+      [],
       `const a = 30`,
       `var a = 30;
 return { a: a };`,
diff --git a/editor/src/core/workers/parser-printer/parser-printer.test-utils.ts b/editor/src/core/workers/parser-printer/parser-printer.test-utils.ts
index 817de91c6036..dec826c72cb4 100644
--- a/editor/src/core/workers/parser-printer/parser-printer.test-utils.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer.test-utils.ts
@@ -556,6 +556,7 @@ export function jsxArbitraryBlockArbitrary(): Arbitrary<JSExpression> {
   return uidArbitrary().chain((uid) =>
     FastCheck.constant(
       jsExpressionOtherJavaScript(
+        [],
         '1 + 2',
         '1 + 2;',
         'return 1 + 2;',
@@ -593,7 +594,7 @@ export function jsxAttributeValueArbitrary(): Arbitrary<JSExpressionValue<any>>
 export function jsxAttributeOtherJavaScriptArbitrary(): Arbitrary<JSExpressionOtherJavaScript> {
   return uidArbitrary().chain((uid) =>
     FastCheck.constant(
-      jsExpressionOtherJavaScript('1 + 2', '1 + 2', '1 + 2', [], null, {}, emptyComments, uid),
+      jsExpressionOtherJavaScript([], '1 + 2', '1 + 2', '1 + 2', [], null, {}, emptyComments, uid),
     ),
   )
 }
@@ -788,8 +789,8 @@ export function jsxElementChildArbitrary(depth: number): Arbitrary<JSXElementChi
 
 export function arbitraryJSBlockArbitrary(): Arbitrary<ArbitraryJSBlock> {
   return FastCheck.oneof(
-    FastCheck.constant(arbitraryJSBlock('1 + 2;', '1 + 2', [], [], null, {})),
-    FastCheck.constant(arbitraryJSBlock(' \n ', ' \n ', [], [], null, {})),
+    FastCheck.constant(arbitraryJSBlock([], '1 + 2;', '1 + 2', [], [], null, {})),
+    FastCheck.constant(arbitraryJSBlock([], ' \n ', ' \n ', [], [], null, {})),
   )
 }
 
diff --git a/editor/src/core/workers/parser-printer/parser-printer.ts b/editor/src/core/workers/parser-printer/parser-printer.ts
index c6877474caf9..1cda30f29bca 100644
--- a/editor/src/core/workers/parser-printer/parser-printer.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer.ts
@@ -106,6 +106,7 @@ import {
   extractPrefixedCode,
   markedAsExported,
   markedAsDefault,
+  parseParams,
 } from './parser-printer-parsing'
 import { jsonToExpression } from './json-to-expression'
 import { difference } from '../../shared/set-utils'
@@ -1498,11 +1499,15 @@ export function parseCode(
                 boundParam != null && isRegularParam(boundParam) ? boundParam.paramName : null
 
               propsUsed = param == null ? [] : propNamesForParam(param.value)
-
               parsedContents = parseOutFunctionContents(
                 sourceFile,
                 sourceText,
                 filePath,
+                foldEither(
+                  () => [],
+                  (paramsSuccess) => paramsSuccess.value,
+                  parsedFunctionParams,
+                ),
                 imports,
                 topLevelNames,
                 propsObjectName,
@@ -1762,210 +1767,6 @@ export function parseCode(
   }
 }
 
-function parseParams(
-  params: TS.NodeArray<TS.ParameterDeclaration>,
-  file: TS.SourceFile,
-  sourceText: string,
-  filename: string,
-  imports: Imports,
-  topLevelNames: Array<string>,
-  existingHighlightBounds: Readonly<HighlightBoundsForUids>,
-  existingUIDs: Set<string>,
-  applySteganography: SteganographyMode,
-): Either<string, WithParserMetadata<Array<Param>>> {
-  let parsedParams: Array<Param> = []
-  let highlightBounds: HighlightBoundsForUids = { ...existingHighlightBounds }
-  let propsUsed: Array<string> = []
-  for (const param of params) {
-    const parseResult = parseParam(
-      param,
-      file,
-      sourceText,
-      filename,
-      imports,
-      topLevelNames,
-      highlightBounds,
-      existingUIDs,
-      applySteganography,
-    )
-    if (isRight(parseResult)) {
-      const parsedParam = parseResult.value
-      highlightBounds = {
-        ...highlightBounds,
-        ...parsedParam.highlightBounds,
-      }
-      propsUsed = [...propsUsed, ...parsedParam.propsUsed]
-      parsedParams.push(parsedParam.value)
-    } else {
-      return parseResult
-    }
-  }
-  return right(withParserMetadata(parsedParams, highlightBounds, propsUsed, []))
-}
-
-function parseParam(
-  param: TS.ParameterDeclaration | TS.BindingElement,
-  file: TS.SourceFile,
-  sourceText: string,
-  filename: string,
-  imports: Imports,
-  topLevelNames: Array<string>,
-  existingHighlightBounds: Readonly<HighlightBoundsForUids>,
-  existingUIDs: Set<string>,
-  applySteganography: SteganographyMode,
-): Either<string, WithParserMetadata<Param>> {
-  const dotDotDotToken = param.dotDotDotToken != null
-  const parsedExpression: Either<
-    string,
-    WithParserMetadata<JSExpressionMapOrOtherJavascript | undefined>
-  > = param.initializer == null
-    ? right(withParserMetadata(undefined, existingHighlightBounds, [], []))
-    : parseAttributeOtherJavaScript(
-        file,
-        sourceText,
-        filename,
-        imports,
-        topLevelNames,
-        null,
-        param.initializer,
-        existingHighlightBounds,
-        existingUIDs,
-        applySteganography,
-      )
-  return flatMapEither((paramExpression) => {
-    const parsedBindingName = parseBindingName(
-      param.name,
-      paramExpression,
-      file,
-      sourceText,
-      filename,
-      imports,
-      topLevelNames,
-      existingHighlightBounds,
-      existingUIDs,
-      applySteganography,
-    )
-    return mapEither(
-      (bindingName) =>
-        withParserMetadata(
-          functionParam(dotDotDotToken, bindingName.value),
-          bindingName.highlightBounds,
-          bindingName.propsUsed,
-          [],
-        ),
-      parsedBindingName,
-    )
-  }, parsedExpression)
-}
-
-function parseBindingName(
-  elem: TS.BindingName,
-  expression: WithParserMetadata<JSExpressionMapOrOtherJavascript | undefined>,
-  file: TS.SourceFile,
-  sourceText: string,
-  filename: string,
-  imports: Imports,
-  topLevelNames: Array<string>,
-  existingHighlightBounds: Readonly<HighlightBoundsForUids>,
-  existingUIDs: Set<string>,
-  applySteganography: SteganographyMode,
-): Either<string, WithParserMetadata<BoundParam>> {
-  let highlightBounds: HighlightBoundsForUids = {
-    ...existingHighlightBounds,
-    ...expression.highlightBounds,
-  }
-  let propsUsed: Array<string> = [...expression.propsUsed]
-
-  if (TS.isIdentifier(elem)) {
-    const parsedParamName = getPropertyNameText(elem, file)
-    return mapEither(
-      (paramName) =>
-        withParserMetadata(
-          regularParam(paramName, expression.value ?? null),
-          highlightBounds,
-          propsUsed,
-          [],
-        ),
-      parsedParamName,
-    )
-  } else if (TS.isObjectBindingPattern(elem)) {
-    let parts: Array<DestructuredParamPart> = []
-    for (const element of elem.elements) {
-      const parsedPropertyName: Either<string, string | null> =
-        element.propertyName == null ? right(null) : getPropertyNameText(element.propertyName, file)
-      if (isRight(parsedPropertyName)) {
-        const propertyName = parsedPropertyName.value
-        const parsedParam = parseParam(
-          element,
-          file,
-          sourceText,
-          filename,
-          imports,
-          topLevelNames,
-          highlightBounds,
-          existingUIDs,
-          applySteganography,
-        )
-        if (isRight(parsedParam)) {
-          const bound = parsedParam.value.value
-          highlightBounds = {
-            ...highlightBounds,
-            ...parsedParam.value.highlightBounds,
-          }
-          propsUsed = [...propsUsed, ...parsedParam.value.propsUsed]
-          if (propertyName == null) {
-            if (isRegularParam(bound.boundParam)) {
-              parts.push(destructuredParamPart(undefined, bound, null))
-            } else {
-              return left('Unable to parse bound object parameter with no parameter propertyName')
-            }
-          } else {
-            parts.push(destructuredParamPart(propertyName, bound, null))
-          }
-        } else {
-          return parsedParam
-        }
-      } else {
-        return parsedPropertyName
-      }
-    }
-    return right(withParserMetadata(destructuredObject(parts), highlightBounds, propsUsed, []))
-  } else if (TS.isArrayBindingPattern(elem)) {
-    let parts: Array<DestructuredArrayPart> = []
-    for (const element of elem.elements) {
-      if (TS.isOmittedExpression(element)) {
-        parts.push(omittedParam())
-      } else {
-        const parsedParam = parseParam(
-          element,
-          file,
-          sourceText,
-          filename,
-          imports,
-          topLevelNames,
-          highlightBounds,
-          existingUIDs,
-          applySteganography,
-        )
-        if (isRight(parsedParam)) {
-          const bound = parsedParam.value.value
-          highlightBounds = {
-            ...highlightBounds,
-            ...parsedParam.value.highlightBounds,
-          }
-          propsUsed = [...propsUsed, ...parsedParam.value.propsUsed]
-          parts.push(bound)
-        } else {
-          return parsedParam
-        }
-      }
-    }
-    return right(withParserMetadata(destructuredArray(parts), highlightBounds, propsUsed, []))
-  } else {
-    return left('Unable to parse binding element')
-  }
-}
-
 // In practical usage currently these highlight bounds should only include entries
 // that are selectable, potentially in the future this will extend beyond that but for
 // the moment it doesn't make sense to include highlight bounds for a value deep within
diff --git a/editor/src/core/workers/parser-printer/uid-fix.spec.ts b/editor/src/core/workers/parser-printer/uid-fix.spec.ts
index c52a7180b04d..dc56cacd3bf8 100644
--- a/editor/src/core/workers/parser-printer/uid-fix.spec.ts
+++ b/editor/src/core/workers/parser-printer/uid-fix.spec.ts
@@ -653,6 +653,7 @@ describe('fixJSXElementChildUIDs', () => {
   it('handles the case where an element gets wrapped with an expression', () => {
     const before = jsxElement('div', 'div-uid', [], [])
     const after = jsExpressionOtherJavaScript(
+      [],
       'something',
       'something',
       'return something',
diff --git a/editor/src/core/workers/ts/ts-worker.spec.ts b/editor/src/core/workers/ts/ts-worker.spec.ts
index e26d6de58af8..38e80be6301c 100644
--- a/editor/src/core/workers/ts/ts-worker.spec.ts
+++ b/editor/src/core/workers/ts/ts-worker.spec.ts
@@ -180,6 +180,7 @@ const SampleInitTSWorkerMessage: IncomingWorkerMessage = {
                         type: 'SPREAD_ASSIGNMENT',
                         value: {
                           type: 'ATTRIBUTE_OTHER_JAVASCRIPT',
+                          params: [],
                           originalJavascript: 'props.style',
                           javascript: 'props.style',
                           transpiledJavascript: 'return props.style;',
@@ -205,6 +206,7 @@ const SampleInitTSWorkerMessage: IncomingWorkerMessage = {
                         key: 'backgroundColor',
                         value: {
                           type: 'ATTRIBUTE_OTHER_JAVASCRIPT',
+                          params: [],
                           originalJavascript: 'colorTheme.white.value',
                           javascript: 'colorTheme.white.value',
                           transpiledJavascript: 'return colorTheme.white.value;',

From adcc1b4bb1c2d7be61d2011bfeb06c3591b4f575 Mon Sep 17 00:00:00 2001
From: Sean Parsons <git@futurenotfound.com>
Date: Fri, 16 Feb 2024 18:50:54 +0000
Subject: [PATCH 2/3] feature(editor) Added additional test.

---
 .../canvas/scoped-variables.spec.tsx          | 199 ++++++++++++++++++
 1 file changed, 199 insertions(+)

diff --git a/editor/src/components/canvas/scoped-variables.spec.tsx b/editor/src/components/canvas/scoped-variables.spec.tsx
index 278ba6e9b5b2..c5b10200da7b 100644
--- a/editor/src/components/canvas/scoped-variables.spec.tsx
+++ b/editor/src/components/canvas/scoped-variables.spec.tsx
@@ -116,7 +116,206 @@ function projectWithInlineComponent(): PersistentModel {
   return persistentModel
 }
 
+function projectWithInlineComponentDestructuredContents(): ProjectContents {
+  function createCodeFile(path: string, contents: string): TextFile {
+    return textFile(textFileContents(contents, unparsed, RevisionsState.CodeAhead), null, null, 0)
+  }
+
+  return {
+    '/package.json': textFile(
+      textFileContents(
+        JSON.stringify(DefaultPackageJson, null, 2),
+        unparsed,
+        RevisionsState.CodeAhead,
+      ),
+      null,
+      null,
+      0,
+    ),
+    '/src': directory(),
+    '/assets': directory(),
+    '/public': directory(),
+    [StoryboardFilePath]: createCodeFile(
+      StoryboardFilePath,
+      `import * as React from 'react'
+import Utopia, {
+  Scene,
+  Storyboard,
+  registerModule,
+} from 'utopia-api'
+import { App } from '/src/app.js'
+
+export var storyboard = (
+  <Storyboard data-uid='storyboard-entity'>
+    <Scene
+      data-label='Imported App'
+      data-uid='scene-1-entity'
+      style={{ position: 'absolute', left: 0, top: 0, width: 375, height: 812 }}
+    >
+      <App data-uid='app-entity' />
+    </Scene>
+  </Storyboard>
+)`,
+    ),
+    '/src/app.js': createCodeFile(
+      '/src/app.js',
+      `import * as React from 'react'
+
+
+export const FakeAwait = (props) => {
+  const computed =
+    typeof props.children === 'function'
+      ? props.children({first: 1, second: {thing: 'a string'}})
+      : 'Oh no'
+  return <div data-uid='fakeawait'>{computed}</div>
+}
+
+export var App = (props) => {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        background: 'white',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <FakeAwait data-uid={'fakeawaitelement'}>
+        {({first, second: {thing}}) => {
+          return (
+            <div
+              data-uid={'something-div'}
+              style={{
+                width: '100%',
+                height: '100%',
+                background: 'white',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              {first}
+            </div>
+          )
+        }}
+      </FakeAwait>
+    </div>
+  )
+}`,
+    ),
+  }
+}
+
+function projectWithInlineComponentDestructured(): PersistentModel {
+  const projectContents: ProjectContents = projectWithInlineComponentDestructuredContents()
+  const persistentModel = persistentModelForProjectContents(contentsToTree(projectContents))
+  return persistentModel
+}
+
 describe('scoped variables', () => {
+  it('includes scoped variables for an inline component destructuring the parameter', async () => {
+    const renderResult = await renderTestEditorWithModel(
+      projectWithInlineComponentDestructured(),
+      'dont-await-first-dom-report',
+    )
+    expect(renderResult.getEditorState().editor.variablesInScope).toMatchInlineSnapshot(`
+      Object {
+        "storyboard-entity": Object {},
+        "storyboard-entity/scene-1-entity": Object {},
+        "storyboard-entity/scene-1-entity/app-entity": Object {},
+        "storyboard-entity/scene-1-entity/app-entity:cb0": Object {
+          "props": Object {
+            "insertionCeiling": Object {
+              "parts": Array [
+                Array [
+                  "storyboard-entity",
+                  "scene-1-entity",
+                  "app-entity",
+                ],
+              ],
+              "type": "elementpath",
+            },
+            "spiedValue": Object {
+              "data-uid": "app-entity",
+            },
+          },
+        },
+        "storyboard-entity/scene-1-entity/app-entity:cb0/fakeawaitelement": Object {
+          "props": Object {
+            "insertionCeiling": Object {
+              "parts": Array [
+                Array [
+                  "storyboard-entity",
+                  "scene-1-entity",
+                  "app-entity",
+                ],
+              ],
+              "type": "elementpath",
+            },
+            "spiedValue": Object {
+              "data-uid": "app-entity",
+            },
+          },
+        },
+        "storyboard-entity/scene-1-entity/app-entity:cb0/fakeawaitelement/5b3/something-div~~~1": Object {
+          "first": Object {
+            "insertionCeiling": Object {
+              "parts": Array [
+                Array [
+                  "storyboard-entity",
+                  "scene-1-entity",
+                  "app-entity",
+                ],
+                Array [
+                  "cb0",
+                  "fakeawaitelement",
+                  "5b3",
+                  "something-div~~~1",
+                ],
+              ],
+              "type": "elementpath",
+            },
+            "spiedValue": 1,
+          },
+          "props": Object {
+            "insertionCeiling": Object {
+              "parts": Array [
+                Array [
+                  "storyboard-entity",
+                  "scene-1-entity",
+                  "app-entity",
+                ],
+              ],
+              "type": "elementpath",
+            },
+            "spiedValue": Object {
+              "data-uid": "app-entity",
+            },
+          },
+          "thing": Object {
+            "insertionCeiling": Object {
+              "parts": Array [
+                Array [
+                  "storyboard-entity",
+                  "scene-1-entity",
+                  "app-entity",
+                ],
+                Array [
+                  "cb0",
+                  "fakeawaitelement",
+                  "5b3",
+                  "something-div~~~1",
+                ],
+              ],
+              "type": "elementpath",
+            },
+            "spiedValue": "a string",
+          },
+        },
+      }
+    `)
+  })
+
   it('includes scoped variables for an inline component', async () => {
     const renderResult = await renderTestEditorWithModel(
       projectWithInlineComponent(),

From 36d7a38ba1aa76361c508281cb3e1e47cd853be0 Mon Sep 17 00:00:00 2001
From: Sean Parsons <git@futurenotfound.com>
Date: Mon, 19 Feb 2024 16:08:30 +0000
Subject: [PATCH 3/3] feature(editor) Use es2016 instead of es2015 with Babel.

---
 editor/src/bundled-dependencies/codeBundle.ts |   12 +-
 .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 1004 +++++++++--------
 .../canvas/scoped-variables.spec.tsx          |   10 +-
 .../canvas/ui-jsx-canvas-bugs.spec.tsx        |    2 +-
 .../__snapshots__/code-file.spec.ts.snap      |  202 ++--
 .../components/custom-code/code-file.spec.ts  |   24 +-
 .../editor/variablesmenu.spec.browser2.tsx    |   16 +-
 .../navigator-conditionals.spec.browser2.tsx  |   24 +-
 .../navigator/navigator.spec.browser2.tsx     |    4 +-
 .../core/es-modules/evaluator/evaluator.ts    |    2 +-
 .../element-path-tree.spec.browser2.tsx       |    6 +-
 ...r-printer-arbitrary-elements.spec.tsx.snap |   95 +-
 .../parser-printer-dot-notation.spec.tsx.snap |    6 +-
 .../__snapshots__/parser-printer.spec.ts.snap |  165 +--
 ...parser-printer-arbitrary-elements.spec.tsx |  178 +--
 .../parser-printer-bugs.spec.ts               |   10 +-
 .../parser-printer-transpiling.ts             |   16 +-
 .../parser-printer/parser-printer.spec.ts     |   90 +-
 .../workers/parser-printer/uid-fix.spec.ts    |   24 +-
 .../ts/__snapshots__/ts-worker.spec.ts.snap   |  148 ++-
 editor/src/core/workers/ts/ts-worker.ts       |    2 +-
 21 files changed, 1032 insertions(+), 1008 deletions(-)

diff --git a/editor/src/bundled-dependencies/codeBundle.ts b/editor/src/bundled-dependencies/codeBundle.ts
index 32cc5bd204df..9c0ae1b7cf8d 100644
--- a/editor/src/bundled-dependencies/codeBundle.ts
+++ b/editor/src/bundled-dependencies/codeBundle.ts
@@ -6,14 +6,14 @@ import type { ExportsInfo } from '../core/workers/common/worker-types'
 export const SampleFileBuildResult = JSON.parse(`{
   "/src/app.js": {
     "errors": [],
-    "transpiledCode": "\\"use strict\\";\\n\\nvar __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  var desc = Object.getOwnPropertyDescriptor(m, k);\\n\\n  if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\\n    desc = {\\n      enumerable: true,\\n      get: function get() {\\n        return m[k];\\n      }\\n    };\\n  }\\n\\n  Object.defineProperty(o, k2, desc);\\n} : function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  o[k2] = m[k];\\n});\\n\\nvar __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {\\n  Object.defineProperty(o, \\"default\\", {\\n    enumerable: true,\\n    value: v\\n  });\\n} : function (o, v) {\\n  o[\\"default\\"] = v;\\n});\\n\\nvar __importStar = this && this.__importStar || function (mod) {\\n  if (mod && mod.__esModule) return mod;\\n  var result = {};\\n  if (mod != null) for (var k in mod) {\\n    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\\n  }\\n\\n  __setModuleDefault(result, mod);\\n\\n  return result;\\n};\\n\\nObject.defineProperty(exports, \\"__esModule\\", {\\n  value: true\\n});\\nexports.App = void 0;\\n\\nvar jsx_runtime_1 = require(\\"react/jsx-runtime\\");\\n\\nvar React = __importStar(require(\\"react\\"));\\n\\nvar App = function App(props) {\\n  return (0, jsx_runtime_1.jsx)(\\"div\\", {\\n    style: {\\n      width: '100%',\\n      height: '100%',\\n      backgroundColor: '#FFFFFF',\\n      position: 'relative'\\n    }\\n  });\\n};\\n\\nexports.App = App; //# sourceMappingURL=app.js.map",
+    "transpiledCode": "\\"use strict\\";\\n\\nvar __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  var desc = Object.getOwnPropertyDescriptor(m, k);\\n\\n  if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\\n    desc = {\\n      enumerable: true,\\n      get: function () {\\n        return m[k];\\n      }\\n    };\\n  }\\n\\n  Object.defineProperty(o, k2, desc);\\n} : function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  o[k2] = m[k];\\n});\\n\\nvar __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {\\n  Object.defineProperty(o, \\"default\\", {\\n    enumerable: true,\\n    value: v\\n  });\\n} : function (o, v) {\\n  o[\\"default\\"] = v;\\n});\\n\\nvar __importStar = this && this.__importStar || function (mod) {\\n  if (mod && mod.__esModule) return mod;\\n  var result = {};\\n  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\\n\\n  __setModuleDefault(result, mod);\\n\\n  return result;\\n};\\n\\nObject.defineProperty(exports, \\"__esModule\\", {\\n  value: true\\n});\\nexports.App = void 0;\\n\\nconst jsx_runtime_1 = require(\\"react/jsx-runtime\\");\\n\\nconst React = __importStar(require(\\"react\\"));\\n\\nvar App = props => {\\n  return (0, jsx_runtime_1.jsx)(\\"div\\", {\\n    style: {\\n      width: '100%',\\n      height: '100%',\\n      backgroundColor: '#FFFFFF',\\n      position: 'relative'\\n    }\\n  });\\n};\\n\\nexports.App = App; //# sourceMappingURL=app.js.map",
     "sourceMap": {
       "version": 3,
       "sources": [
         "../../src/app.js"
       ],
       "names": [],
-      "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACO,IAAI,GAAG,GAAG,SAAN,GAAM,CAAC,KAAD,EAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE;AAAE,MAAA,KAAK,EAAE,MAAT;AAAiB,MAAA,MAAM,EAAE,MAAzB;AAAiC,MAAA,eAAe,EAAE,SAAlD;AAA6D,MAAA,QAAQ,EAAE;AAAvE;AADT,GAAA,CADF;AAKD,CANM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
+      "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACO,IAAI,GAAG,GAAI,KAAD,IAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE;AAAE,MAAA,KAAK,EAAE,MAAT;AAAiB,MAAA,MAAM,EAAE,MAAzB;AAAiC,MAAA,eAAe,EAAE,SAAlD;AAA6D,MAAA,QAAQ,EAAE;AAAvE;AADT,GAAA,CADF;AAKD,CANM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
       "sourcesContent": [
         "\\nimport * as React from 'react'\\nexport var App = (props) => {\\n  return (\\n    <div\\n      style={{ width: '100%', height: '100%', backgroundColor: '#FFFFFF', position: 'relative' }}\\n    />\\n  )\\n}"
       ],
@@ -23,14 +23,14 @@ export const SampleFileBuildResult = JSON.parse(`{
   },
   "/src/index.js": {
     "errors": [],
-    "transpiledCode": "\\"use strict\\";\\n\\nvar __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  var desc = Object.getOwnPropertyDescriptor(m, k);\\n\\n  if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\\n    desc = {\\n      enumerable: true,\\n      get: function get() {\\n        return m[k];\\n      }\\n    };\\n  }\\n\\n  Object.defineProperty(o, k2, desc);\\n} : function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  o[k2] = m[k];\\n});\\n\\nvar __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {\\n  Object.defineProperty(o, \\"default\\", {\\n    enumerable: true,\\n    value: v\\n  });\\n} : function (o, v) {\\n  o[\\"default\\"] = v;\\n});\\n\\nvar __importStar = this && this.__importStar || function (mod) {\\n  if (mod && mod.__esModule) return mod;\\n  var result = {};\\n  if (mod != null) for (var k in mod) {\\n    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\\n  }\\n\\n  __setModuleDefault(result, mod);\\n\\n  return result;\\n};\\n\\nObject.defineProperty(exports, \\"__esModule\\", {\\n  value: true\\n});\\n\\nvar jsx_runtime_1 = require(\\"react/jsx-runtime\\");\\n\\nvar React = __importStar(require(\\"react\\"));\\n\\nvar ReactDOM = __importStar(require(\\"react-dom\\"));\\n\\nvar app_1 = require(\\"../src/app\\");\\n\\nvar root = document.getElementById(\\"root\\");\\n\\nif (root != null) {\\n  ReactDOM.render((0, jsx_runtime_1.jsx)(app_1.App, {\\n    \\"data-uid\\": 'preview-app'\\n  }), root);\\n} //# sourceMappingURL=index.js.map",
+    "transpiledCode": "\\"use strict\\";\\n\\nvar __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  var desc = Object.getOwnPropertyDescriptor(m, k);\\n\\n  if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\\n    desc = {\\n      enumerable: true,\\n      get: function () {\\n        return m[k];\\n      }\\n    };\\n  }\\n\\n  Object.defineProperty(o, k2, desc);\\n} : function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  o[k2] = m[k];\\n});\\n\\nvar __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {\\n  Object.defineProperty(o, \\"default\\", {\\n    enumerable: true,\\n    value: v\\n  });\\n} : function (o, v) {\\n  o[\\"default\\"] = v;\\n});\\n\\nvar __importStar = this && this.__importStar || function (mod) {\\n  if (mod && mod.__esModule) return mod;\\n  var result = {};\\n  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\\n\\n  __setModuleDefault(result, mod);\\n\\n  return result;\\n};\\n\\nObject.defineProperty(exports, \\"__esModule\\", {\\n  value: true\\n});\\n\\nconst jsx_runtime_1 = require(\\"react/jsx-runtime\\");\\n\\nconst React = __importStar(require(\\"react\\"));\\n\\nconst ReactDOM = __importStar(require(\\"react-dom\\"));\\n\\nconst app_1 = require(\\"../src/app\\");\\n\\nconst root = document.getElementById(\\"root\\");\\n\\nif (root != null) {\\n  ReactDOM.render((0, jsx_runtime_1.jsx)(app_1.App, {\\n    \\"data-uid\\": 'preview-app'\\n  }), root);\\n} //# sourceMappingURL=index.js.map",
     "sourceMap": {
       "version": 3,
       "sources": [
         "../../src/index.js"
       ],
       "names": [],
-      "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,QAAA,GAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,CAAA;;AACA,IAAA,KAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAEA,IAAM,IAAI,GAAG,QAAQ,CAAC,cAAT,CAAwB,MAAxB,CAAb;;AACA,IAAI,IAAI,IAAI,IAAZ,EAAkB;AAChB,EAAA,QAAQ,CAAC,MAAT,CAAgB,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,KAAA,CAAA,GAAD,EAAI;AAAA,gBAAU;AAAV,GAAJ,CAAhB,EAAgD,IAAhD;AACD,C",
+      "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,QAAA,GAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,CAAA;;AACA,MAAA,KAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAEA,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAT,CAAwB,MAAxB,CAAb;;AACA,IAAI,IAAI,IAAI,IAAZ,EAAkB;AAChB,EAAA,QAAQ,CAAC,MAAT,CAAgB,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,KAAA,CAAA,GAAD,EAAI;AAAA,gBAAU;AAAV,GAAJ,CAAhB,EAAgD,IAAhD;AACD,C",
       "sourcesContent": [
         "import * as React from \\"react\\";\\nimport * as ReactDOM from \\"react-dom\\";\\nimport { App } from \\"../src/app\\";\\n\\nconst root = document.getElementById(\\"root\\");\\nif (root != null) {\\n  ReactDOM.render(<App data-uid='preview-app' />, root);\\n}"
       ],
@@ -40,14 +40,14 @@ export const SampleFileBuildResult = JSON.parse(`{
   },
   "/utopia/storyboard.js": {
     "errors": [],
-    "transpiledCode": "\\"use strict\\";\\n\\nvar __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  var desc = Object.getOwnPropertyDescriptor(m, k);\\n\\n  if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\\n    desc = {\\n      enumerable: true,\\n      get: function get() {\\n        return m[k];\\n      }\\n    };\\n  }\\n\\n  Object.defineProperty(o, k2, desc);\\n} : function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  o[k2] = m[k];\\n});\\n\\nvar __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {\\n  Object.defineProperty(o, \\"default\\", {\\n    enumerable: true,\\n    value: v\\n  });\\n} : function (o, v) {\\n  o[\\"default\\"] = v;\\n});\\n\\nvar __importStar = this && this.__importStar || function (mod) {\\n  if (mod && mod.__esModule) return mod;\\n  var result = {};\\n  if (mod != null) for (var k in mod) {\\n    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\\n  }\\n\\n  __setModuleDefault(result, mod);\\n\\n  return result;\\n};\\n\\nObject.defineProperty(exports, \\"__esModule\\", {\\n  value: true\\n});\\nexports.storyboard = void 0;\\n\\nvar jsx_runtime_1 = require(\\"react/jsx-runtime\\");\\n\\nvar React = __importStar(require(\\"react\\"));\\n\\nvar utopia_api_1 = require(\\"utopia-api\\");\\n\\nvar app_js_1 = require(\\"/src/app.js\\");\\n\\nexports.storyboard = (0, jsx_runtime_1.jsx)(utopia_api_1.Storyboard, {\\n  \\"data-uid\\": 'sample-storyboard',\\n  children: (0, jsx_runtime_1.jsx)(utopia_api_1.Scene, {\\n    \\"data-uid\\": 'sample-scene',\\n    style: {\\n      position: 'absolute',\\n      left: 0,\\n      top: 0,\\n      width: 375,\\n      height: 812\\n    },\\n    children: (0, jsx_runtime_1.jsx)(app_js_1.App, {\\n      \\"data-uid\\": 'sample-app'\\n    })\\n  })\\n}); //# sourceMappingURL=storyboard.js.map",
+    "transpiledCode": "\\"use strict\\";\\n\\nvar __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  var desc = Object.getOwnPropertyDescriptor(m, k);\\n\\n  if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\\n    desc = {\\n      enumerable: true,\\n      get: function () {\\n        return m[k];\\n      }\\n    };\\n  }\\n\\n  Object.defineProperty(o, k2, desc);\\n} : function (o, m, k, k2) {\\n  if (k2 === undefined) k2 = k;\\n  o[k2] = m[k];\\n});\\n\\nvar __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {\\n  Object.defineProperty(o, \\"default\\", {\\n    enumerable: true,\\n    value: v\\n  });\\n} : function (o, v) {\\n  o[\\"default\\"] = v;\\n});\\n\\nvar __importStar = this && this.__importStar || function (mod) {\\n  if (mod && mod.__esModule) return mod;\\n  var result = {};\\n  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\\n\\n  __setModuleDefault(result, mod);\\n\\n  return result;\\n};\\n\\nObject.defineProperty(exports, \\"__esModule\\", {\\n  value: true\\n});\\nexports.storyboard = void 0;\\n\\nconst jsx_runtime_1 = require(\\"react/jsx-runtime\\");\\n\\nconst React = __importStar(require(\\"react\\"));\\n\\nconst utopia_api_1 = require(\\"utopia-api\\");\\n\\nconst app_js_1 = require(\\"/src/app.js\\");\\n\\nexports.storyboard = (0, jsx_runtime_1.jsx)(utopia_api_1.Storyboard, {\\n  \\"data-uid\\": 'sample-storyboard',\\n  children: (0, jsx_runtime_1.jsx)(utopia_api_1.Scene, {\\n    \\"data-uid\\": 'sample-scene',\\n    style: {\\n      position: 'absolute',\\n      left: 0,\\n      top: 0,\\n      width: 375,\\n      height: 812\\n    },\\n    children: (0, jsx_runtime_1.jsx)(app_js_1.App, {\\n      \\"data-uid\\": 'sample-app'\\n    })\\n  })\\n}); //# sourceMappingURL=storyboard.js.map",
     "sourceMap": {
       "version": 3,
       "sources": [
         "../../utopia/storyboard.js"
       ],
       "names": [],
-      "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAKA,IAAA,QAAA,GAAA,OAAA,CAAA,aAAA,CAAA;;AACW,OAAA,CAAA,UAAA,GACT,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,UAAD,EAAW;AAAA,cAAU,mBAAV;AAA6B,EAAA,QAAA,EACtC,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,KAAD,EAAM;AAAA,gBACK,cADL;AAEJ,IAAA,KAAK,EAAE;AAAE,MAAA,QAAQ,EAAE,UAAZ;AAAwB,MAAA,IAAI,EAAE,CAA9B;AAAiC,MAAA,GAAG,EAAE,CAAtC;AAAyC,MAAA,KAAK,EAAE,GAAhD;AAAqD,MAAA,MAAM,EAAE;AAA7D,KAFH;AAEqE,IAAA,QAAA,EAEzE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,QAAA,CAAA,GAAD,EAAI;AAAA,kBAAU;AAAV,KAAJ;AAJI,GAAN;AADS,CAAX,CADS,C",
+      "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAKA,MAAA,QAAA,GAAA,OAAA,CAAA,aAAA,CAAA;;AACW,OAAA,CAAA,UAAA,GACT,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,UAAD,EAAW;AAAA,cAAU,mBAAV;AAA6B,EAAA,QAAA,EACtC,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,KAAD,EAAM;AAAA,gBACK,cADL;AAEJ,IAAA,KAAK,EAAE;AAAE,MAAA,QAAQ,EAAE,UAAZ;AAAwB,MAAA,IAAI,EAAE,CAA9B;AAAiC,MAAA,GAAG,EAAE,CAAtC;AAAyC,MAAA,KAAK,EAAE,GAAhD;AAAqD,MAAA,MAAM,EAAE;AAA7D,KAFH;AAEqE,IAAA,QAAA,EAEzE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,QAAA,CAAA,GAAD,EAAI;AAAA,kBAAU;AAAV,KAAJ;AAJI,GAAN;AADS,CAAX,CADS,C",
       "sourcesContent": [
         "\\nimport * as React from 'react'\\nimport Utopia, {\\n  Scene,\\n  Storyboard,\\n  registerModule,\\n} from 'utopia-api'\\nimport { App } from '/src/app.js'\\nexport var storyboard = (\\n  <Storyboard data-uid='sample-storyboard'>\\n    <Scene\\n      data-uid='sample-scene'\\n      style={{ position: 'absolute', left: 0, top: 0, width: 375, height: 812 }}\\n    >\\n      <App data-uid='sample-app' />\\n    </Scene>\\n  </Storyboard>\\n)\\n\\n"
       ],
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
index d8ff26dd0a4a..fd968d4607f0 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`UiJsxCanvas render Label carried through for generated elements 1`] = `
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/4e3 utopia-storyboard-uid/scene-aaa/app-entity:aaa/4e3/bbb\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/b88 utopia-storyboard-uid/scene-aaa/app-entity:aaa/b88/bbb\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -41,17 +41,17 @@ exports[`UiJsxCanvas render Label carried through for generated elements 1`] = `
         <div
           data-uid=\\"bbb~~~1\\"
           data-label=\\"Plane\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/4e3/bbb~~~1\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/b88/bbb~~~1\\"
         ></div>
         <div
           data-uid=\\"bbb~~~2\\"
           data-label=\\"Plane\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/4e3/bbb~~~2\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/b88/bbb~~~2\\"
         ></div>
         <div
           data-uid=\\"bbb~~~3\\"
           data-label=\\"Plane\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/4e3/bbb~~~3\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/b88/bbb~~~3\\"
         ></div>
       </div>
     </div>
@@ -471,7 +471,7 @@ Object {
           })",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,UAAC,CAAD,EAAK;AACR;AAAA;AAAA;AAAA;AADZ,CAAE,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAc,CAAD,IAAK;AACR;AAAA;AAAA;AAAA;AADZ,CAAE,CAAD",
               "names": Array [],
               "sources": Array [
                 "code.tsx",
@@ -506,7 +506,7 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [1, 2, 3].map(function (n) {
+            "transpiledJavascript": "return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     callerThis: this
@@ -556,6 +556,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAIiCA,KAAMC,MAAND",
@@ -710,7 +711,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/4e3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/b88": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -783,7 +784,7 @@ Object {
           })",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,UAAC,CAAD,EAAK;AACR;AAAA;AAAA;AAAA;AADZ,CAAE,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAc,CAAD,IAAK;AACR;AAAA;AAAA;AAAA;AADZ,CAAE,CAAD",
           "names": Array [],
           "sources": Array [
             "code.tsx",
@@ -818,7 +819,7 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [1, 2, 3].map(function (n) {
+        "transpiledJavascript": "return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     callerThis: this
@@ -840,7 +841,7 @@ Object {
         ],
         Array [
           "aaa",
-          "4e3",
+          "b88",
         ],
       ],
       "type": "elementpath",
@@ -910,7 +911,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/4e3/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/b88/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -974,7 +975,7 @@ Object {
         ],
         Array [
           "aaa",
-          "4e3",
+          "b88",
           "bbb~~~1",
         ],
       ],
@@ -1049,7 +1050,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/4e3/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/b88/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -1113,7 +1114,7 @@ Object {
         ],
         Array [
           "aaa",
-          "4e3",
+          "b88",
           "bbb~~~2",
         ],
       ],
@@ -1188,7 +1189,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/4e3/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/b88/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -1252,7 +1253,7 @@ Object {
         ],
         Array [
           "aaa",
-          "4e3",
+          "b88",
           "bbb~~~3",
         ],
       ],
@@ -1757,6 +1758,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAIiCA,KAAMC,MAAND",
@@ -1961,9 +1963,9 @@ exports[`UiJsxCanvas render Renders input tag without errors 1`] = `
       data-uid=\\"scene-aaa\\"
     >
       <input
-        data-uid=\\"846\\"
+        data-uid=\\"cb0\\"
         style=\\"top: 10px\\"
-        data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:567:846\\"
+        data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:567:cb0\\"
       />
     </div>
   </div>
@@ -2436,7 +2438,7 @@ exports[`UiJsxCanvas render arbitrary jsx block inside an element inside an arbi
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:zzz utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa/b6e\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:zzz utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa/563\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -2469,19 +2471,19 @@ exports[`UiJsxCanvas render arbitrary jsx block inside an element inside an arbi
       >
         <div
           data-uid=\\"aaa~~~1\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa~~~1\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa~~~1\\"
         >
           1
         </div>
         <div
           data-uid=\\"aaa~~~2\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa~~~2\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa~~~2\\"
         >
           2
         </div>
         <div
           data-uid=\\"aaa~~~3\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa~~~3\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa~~~3\\"
         >
           3
         </div>
@@ -2860,6 +2862,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "n;",
                     "originalJavascript": "n",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAAA,CAACA",
@@ -2941,7 +2944,7 @@ Object {
            })",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACT;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACT;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
               "names": Array [
                 "n",
               ],
@@ -2978,7 +2981,7 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [1, 2, 3].map(function (n) {
+            "transpiledJavascript": "return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup(\\"aaa\\", {
     n: n,
     callerThis: this
@@ -3102,7 +3105,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -3132,6 +3135,7 @@ Object {
                 "elementsWithin": Object {},
                 "javascript": "n;",
                 "originalJavascript": "n",
+                "params": Array [],
                 "sourceMap": Object {
                   "file": "code.tsx",
                   "mappings": "OAAA,CAACA",
@@ -3213,7 +3217,7 @@ Object {
            })",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACT;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACT;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
           "names": Array [
             "n",
           ],
@@ -3250,7 +3254,7 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [1, 2, 3].map(function (n) {
+        "transpiledJavascript": "return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup(\\"aaa\\", {
     n: n,
     callerThis: this
@@ -3272,7 +3276,7 @@ Object {
         ],
         Array [
           "zzz",
-          "76c",
+          "4fc",
         ],
       ],
       "type": "elementpath",
@@ -3342,7 +3346,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -3362,6 +3366,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n;",
             "originalJavascript": "n",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAA,CAACA",
@@ -3444,7 +3449,7 @@ Object {
         ],
         Array [
           "zzz",
-          "76c",
+          "4fc",
           "aaa~~~1",
         ],
       ],
@@ -3519,7 +3524,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa~~~1/b6e": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa~~~1/563": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -3537,6 +3542,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n;",
         "originalJavascript": "n",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAA,CAACA",
@@ -3590,9 +3596,9 @@ Object {
         ],
         Array [
           "zzz",
-          "76c",
+          "4fc",
           "aaa~~~1",
-          "b6e",
+          "563",
         ],
       ],
       "type": "elementpath",
@@ -3662,7 +3668,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -3682,6 +3688,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n;",
             "originalJavascript": "n",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAA,CAACA",
@@ -3764,7 +3771,7 @@ Object {
         ],
         Array [
           "zzz",
-          "76c",
+          "4fc",
           "aaa~~~2",
         ],
       ],
@@ -3839,7 +3846,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa~~~2/b6e": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa~~~2/563": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -3857,6 +3864,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n;",
         "originalJavascript": "n",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAA,CAACA",
@@ -3910,9 +3918,9 @@ Object {
         ],
         Array [
           "zzz",
-          "76c",
+          "4fc",
           "aaa~~~2",
-          "b6e",
+          "563",
         ],
       ],
       "type": "elementpath",
@@ -3982,7 +3990,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -4002,6 +4010,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n;",
             "originalJavascript": "n",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAA,CAACA",
@@ -4084,7 +4093,7 @@ Object {
         ],
         Array [
           "zzz",
-          "76c",
+          "4fc",
           "aaa~~~3",
         ],
       ],
@@ -4159,7 +4168,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/76c/aaa~~~3/b6e": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/4fc/aaa~~~3/563": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -4177,6 +4186,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n;",
         "originalJavascript": "n",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAA,CAACA",
@@ -4230,9 +4240,9 @@ Object {
         ],
         Array [
           "zzz",
-          "76c",
+          "4fc",
           "aaa~~~3",
-          "b6e",
+          "563",
         ],
       ],
       "type": "elementpath",
@@ -4311,7 +4321,7 @@ exports[`UiJsxCanvas render arbitrary jsx block inside an element inside an arbi
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:zzz utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5 utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa/60a utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa/60a/bbb utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa/60a/bbb/d0c\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:zzz utopia-storyboard-uid/scene-aaa/app-entity:zzz/362 utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa/607 utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa/607/bbb utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa/607/bbb/471\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -4344,69 +4354,69 @@ exports[`UiJsxCanvas render arbitrary jsx block inside an element inside an arbi
       >
         <div
           data-uid=\\"aaa~~~1\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1\\"
         >
           <div
             data-uid=\\"bbb~~~1\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a/bbb~~~1\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607/bbb~~~1\\"
           >
             4
           </div>
           <div
             data-uid=\\"bbb~~~2\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a/bbb~~~2\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607/bbb~~~2\\"
           >
             5
           </div>
           <div
             data-uid=\\"bbb~~~3\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a/bbb~~~3\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607/bbb~~~3\\"
           >
             6
           </div>
         </div>
         <div
           data-uid=\\"aaa~~~2\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2\\"
         >
           <div
             data-uid=\\"bbb~~~1\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a/bbb~~~1\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607/bbb~~~1\\"
           >
             8
           </div>
           <div
             data-uid=\\"bbb~~~2\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a/bbb~~~2\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607/bbb~~~2\\"
           >
             10
           </div>
           <div
             data-uid=\\"bbb~~~3\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a/bbb~~~3\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607/bbb~~~3\\"
           >
             12
           </div>
         </div>
         <div
           data-uid=\\"aaa~~~3\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3\\"
         >
           <div
             data-uid=\\"bbb~~~1\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a/bbb~~~1\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607/bbb~~~1\\"
           >
             12
           </div>
           <div
             data-uid=\\"bbb~~~2\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a/bbb~~~2\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607/bbb~~~2\\"
           >
             15
           </div>
           <div
             data-uid=\\"bbb~~~3\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a/bbb~~~3\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607/bbb~~~3\\"
           >
             18
           </div>
@@ -4800,6 +4810,7 @@ Object {
                             "elementsWithin": Object {},
                             "javascript": "n * m;",
                             "originalJavascript": "n * m",
+                            "params": Array [],
                             "sourceMap": Object {
                               "file": "code.tsx",
                               "mappings": "OAAE,IAAF,CAACA",
@@ -4886,7 +4897,7 @@ Object {
                })",
                     "sourceMap": Object {
                       "file": "code.tsx",
-                      "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
+                      "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
                       "names": Array [
                         "m",
                       ],
@@ -4928,7 +4939,7 @@ Object {
                       ],
                       "version": 3,
                     },
-                    "transpiledJavascript": "return [4, 5, 6].map(function (m) {
+                    "transpiledJavascript": "return [4, 5, 6].map(m => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     m: m,
@@ -4987,7 +4998,7 @@ Object {
            })",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
               "names": Array [
                 "n",
               ],
@@ -5029,7 +5040,7 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [1, 2, 3].map(function (n) {
+            "transpiledJavascript": "return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup(\\"aaa\\", {
     n: n,
     React: React,
@@ -5155,7 +5166,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -5199,6 +5210,7 @@ Object {
                         "elementsWithin": Object {},
                         "javascript": "n * m;",
                         "originalJavascript": "n * m",
+                        "params": Array [],
                         "sourceMap": Object {
                           "file": "code.tsx",
                           "mappings": "OAAE,IAAF,CAACA",
@@ -5285,7 +5297,7 @@ Object {
                })",
                 "sourceMap": Object {
                   "file": "code.tsx",
-                  "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
+                  "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
                   "names": Array [
                     "m",
                   ],
@@ -5327,7 +5339,7 @@ Object {
                   ],
                   "version": 3,
                 },
-                "transpiledJavascript": "return [4, 5, 6].map(function (m) {
+                "transpiledJavascript": "return [4, 5, 6].map(m => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     m: m,
@@ -5386,7 +5398,7 @@ Object {
            })",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
           "names": Array [
             "n",
           ],
@@ -5428,7 +5440,7 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [1, 2, 3].map(function (n) {
+        "transpiledJavascript": "return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup(\\"aaa\\", {
     n: n,
     React: React,
@@ -5452,7 +5464,7 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
         ],
       ],
       "type": "elementpath",
@@ -5522,7 +5534,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -5556,6 +5568,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "n * m;",
                     "originalJavascript": "n * m",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAAE,IAAF,CAACA",
@@ -5642,7 +5655,7 @@ Object {
                })",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
               "names": Array [
                 "m",
               ],
@@ -5684,7 +5697,7 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [4, 5, 6].map(function (m) {
+            "transpiledJavascript": "return [4, 5, 6].map(m => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     m: m,
@@ -5736,7 +5749,7 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~1",
         ],
       ],
@@ -5811,7 +5824,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -5843,6 +5856,7 @@ Object {
                 "elementsWithin": Object {},
                 "javascript": "n * m;",
                 "originalJavascript": "n * m",
+                "params": Array [],
                 "sourceMap": Object {
                   "file": "code.tsx",
                   "mappings": "OAAE,IAAF,CAACA",
@@ -5929,7 +5943,7 @@ Object {
                })",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
           "names": Array [
             "m",
           ],
@@ -5971,7 +5985,7 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [4, 5, 6].map(function (m) {
+        "transpiledJavascript": "return [4, 5, 6].map(m => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     m: m,
@@ -5994,9 +6008,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~1",
-          "60a",
+          "607",
         ],
       ],
       "type": "elementpath",
@@ -6066,7 +6080,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -6087,6 +6101,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n * m;",
             "originalJavascript": "n * m",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,IAAF,CAACA",
@@ -6174,9 +6189,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~1",
-          "60a",
+          "607",
           "bbb~~~1",
         ],
       ],
@@ -6251,7 +6266,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a/bbb~~~1/d0c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607/bbb~~~1/471": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -6270,6 +6285,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n * m;",
         "originalJavascript": "n * m",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,IAAF,CAACA",
@@ -6328,11 +6344,11 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~1",
-          "60a",
+          "607",
           "bbb~~~1",
-          "d0c",
+          "471",
         ],
       ],
       "type": "elementpath",
@@ -6402,7 +6418,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -6423,6 +6439,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n * m;",
             "originalJavascript": "n * m",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,IAAF,CAACA",
@@ -6510,9 +6527,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~1",
-          "60a",
+          "607",
           "bbb~~~2",
         ],
       ],
@@ -6587,7 +6604,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a/bbb~~~2/d0c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607/bbb~~~2/471": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -6606,6 +6623,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n * m;",
         "originalJavascript": "n * m",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,IAAF,CAACA",
@@ -6664,11 +6682,11 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~1",
-          "60a",
+          "607",
           "bbb~~~2",
-          "d0c",
+          "471",
         ],
       ],
       "type": "elementpath",
@@ -6738,7 +6756,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -6759,6 +6777,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n * m;",
             "originalJavascript": "n * m",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,IAAF,CAACA",
@@ -6846,9 +6865,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~1",
-          "60a",
+          "607",
           "bbb~~~3",
         ],
       ],
@@ -6923,7 +6942,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~1/60a/bbb~~~3/d0c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~1/607/bbb~~~3/471": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -6942,6 +6961,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n * m;",
         "originalJavascript": "n * m",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,IAAF,CAACA",
@@ -7000,11 +7020,11 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~1",
-          "60a",
+          "607",
           "bbb~~~3",
-          "d0c",
+          "471",
         ],
       ],
       "type": "elementpath",
@@ -7074,7 +7094,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -7108,6 +7128,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "n * m;",
                     "originalJavascript": "n * m",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAAE,IAAF,CAACA",
@@ -7194,7 +7215,7 @@ Object {
                })",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
               "names": Array [
                 "m",
               ],
@@ -7236,7 +7257,7 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [4, 5, 6].map(function (m) {
+            "transpiledJavascript": "return [4, 5, 6].map(m => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     m: m,
@@ -7288,7 +7309,7 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~2",
         ],
       ],
@@ -7363,7 +7384,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -7395,6 +7416,7 @@ Object {
                 "elementsWithin": Object {},
                 "javascript": "n * m;",
                 "originalJavascript": "n * m",
+                "params": Array [],
                 "sourceMap": Object {
                   "file": "code.tsx",
                   "mappings": "OAAE,IAAF,CAACA",
@@ -7481,7 +7503,7 @@ Object {
                })",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
           "names": Array [
             "m",
           ],
@@ -7523,7 +7545,7 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [4, 5, 6].map(function (m) {
+        "transpiledJavascript": "return [4, 5, 6].map(m => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     m: m,
@@ -7546,9 +7568,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~2",
-          "60a",
+          "607",
         ],
       ],
       "type": "elementpath",
@@ -7618,7 +7640,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -7639,6 +7661,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n * m;",
             "originalJavascript": "n * m",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,IAAF,CAACA",
@@ -7726,9 +7749,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~2",
-          "60a",
+          "607",
           "bbb~~~1",
         ],
       ],
@@ -7803,7 +7826,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a/bbb~~~1/d0c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607/bbb~~~1/471": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -7822,6 +7845,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n * m;",
         "originalJavascript": "n * m",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,IAAF,CAACA",
@@ -7880,11 +7904,11 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~2",
-          "60a",
+          "607",
           "bbb~~~1",
-          "d0c",
+          "471",
         ],
       ],
       "type": "elementpath",
@@ -7954,7 +7978,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -7975,6 +7999,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n * m;",
             "originalJavascript": "n * m",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,IAAF,CAACA",
@@ -8062,9 +8087,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~2",
-          "60a",
+          "607",
           "bbb~~~2",
         ],
       ],
@@ -8139,7 +8164,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a/bbb~~~2/d0c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607/bbb~~~2/471": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -8158,6 +8183,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n * m;",
         "originalJavascript": "n * m",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,IAAF,CAACA",
@@ -8216,11 +8242,11 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~2",
-          "60a",
+          "607",
           "bbb~~~2",
-          "d0c",
+          "471",
         ],
       ],
       "type": "elementpath",
@@ -8290,7 +8316,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -8311,6 +8337,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n * m;",
             "originalJavascript": "n * m",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,IAAF,CAACA",
@@ -8398,9 +8425,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~2",
-          "60a",
+          "607",
           "bbb~~~3",
         ],
       ],
@@ -8475,7 +8502,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~2/60a/bbb~~~3/d0c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~2/607/bbb~~~3/471": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -8494,6 +8521,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n * m;",
         "originalJavascript": "n * m",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,IAAF,CAACA",
@@ -8552,11 +8580,11 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~2",
-          "60a",
+          "607",
           "bbb~~~3",
-          "d0c",
+          "471",
         ],
       ],
       "type": "elementpath",
@@ -8626,7 +8654,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -8660,6 +8688,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "n * m;",
                     "originalJavascript": "n * m",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAAE,IAAF,CAACA",
@@ -8746,7 +8775,7 @@ Object {
                })",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
               "names": Array [
                 "m",
               ],
@@ -8788,7 +8817,7 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [4, 5, 6].map(function (m) {
+            "transpiledJavascript": "return [4, 5, 6].map(m => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     m: m,
@@ -8840,7 +8869,7 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~3",
         ],
       ],
@@ -8915,7 +8944,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -8947,6 +8976,7 @@ Object {
                 "elementsWithin": Object {},
                 "javascript": "n * m;",
                 "originalJavascript": "n * m",
+                "params": Array [],
                 "sourceMap": Object {
                   "file": "code.tsx",
                   "mappings": "OAAE,IAAF,CAACA",
@@ -9033,7 +9063,7 @@ Object {
                })",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAcA,UAAD,CAACA,EAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,CAACA,IAAM;AACL;AAAA;AAAA;AAAA;AAAA;AADjB,CAAE,CAAD",
           "names": Array [
             "m",
           ],
@@ -9075,7 +9105,7 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [4, 5, 6].map(function (m) {
+        "transpiledJavascript": "return [4, 5, 6].map(m => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     m: m,
@@ -9098,9 +9128,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~3",
-          "60a",
+          "607",
         ],
       ],
       "type": "elementpath",
@@ -9170,7 +9200,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -9191,6 +9221,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n * m;",
             "originalJavascript": "n * m",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,IAAF,CAACA",
@@ -9278,9 +9309,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~3",
-          "60a",
+          "607",
           "bbb~~~1",
         ],
       ],
@@ -9355,7 +9386,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a/bbb~~~1/d0c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607/bbb~~~1/471": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -9374,6 +9405,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n * m;",
         "originalJavascript": "n * m",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,IAAF,CAACA",
@@ -9432,11 +9464,11 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~3",
-          "60a",
+          "607",
           "bbb~~~1",
-          "d0c",
+          "471",
         ],
       ],
       "type": "elementpath",
@@ -9506,7 +9538,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -9527,6 +9559,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n * m;",
             "originalJavascript": "n * m",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,IAAF,CAACA",
@@ -9614,9 +9647,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~3",
-          "60a",
+          "607",
           "bbb~~~2",
         ],
       ],
@@ -9691,7 +9724,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a/bbb~~~2/d0c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607/bbb~~~2/471": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -9710,6 +9743,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n * m;",
         "originalJavascript": "n * m",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,IAAF,CAACA",
@@ -9768,11 +9802,11 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~3",
-          "60a",
+          "607",
           "bbb~~~2",
-          "d0c",
+          "471",
         ],
       ],
       "type": "elementpath",
@@ -9842,7 +9876,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -9863,6 +9897,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n * m;",
             "originalJavascript": "n * m",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,IAAF,CAACA",
@@ -9950,9 +9985,9 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~3",
-          "60a",
+          "607",
           "bbb~~~3",
         ],
       ],
@@ -10027,7 +10062,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/5c5/aaa~~~3/60a/bbb~~~3/d0c": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/362/aaa~~~3/607/bbb~~~3/471": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -10046,6 +10081,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n * m;",
         "originalJavascript": "n * m",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,IAAF,CAACA",
@@ -10104,11 +10140,11 @@ Object {
         ],
         Array [
           "zzz",
-          "5c5",
+          "362",
           "aaa~~~3",
-          "60a",
+          "607",
           "bbb~~~3",
-          "d0c",
+          "471",
         ],
       ],
       "type": "elementpath",
@@ -11425,6 +11461,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAMiCA,KAAMC,MAAND",
@@ -11586,7 +11623,7 @@ exports[`UiJsxCanvas render does not crash if the metadata scenes are not the ap
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/f08 utopia-storyboard-uid/scene-aaa/app-entity:aaa/f08/bbb\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/346 utopia-storyboard-uid/scene-aaa/app-entity:aaa/346/bbb\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -11619,19 +11656,19 @@ exports[`UiJsxCanvas render does not crash if the metadata scenes are not the ap
       >
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/f08/bbb~~~1:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/346/bbb~~~1:xxx\\"
         >
           n1
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/f08/bbb~~~2:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/346/bbb~~~2:xxx\\"
         >
           n2
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/f08/bbb~~~3:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/346/bbb~~~3:xxx\\"
         >
           n3
         </div>
@@ -12042,6 +12079,7 @@ Object {
                       "elementsWithin": Object {},
                       "javascript": "'n' + n",
                       "originalJavascript": "'n' + n",
+                      "params": Array [],
                       "sourceMap": Object {
                         "file": "code.tsx",
                         "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -12101,7 +12139,7 @@ Object {
            ))",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW,UAAC,CAAD;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAY,CAAD;AAAA;AAAA;AAAA,EAAX,CAAD",
               "names": Array [],
               "sources": Array [
                 "code.tsx",
@@ -12138,12 +12176,10 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [1, 2, 3].map(function (n) {
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    n: n,
-    callerThis: this
-  });
-});",
+            "transpiledJavascript": "return [1, 2, 3].map(n => utopiaCanvasJSXLookup(\\"bbb\\", {
+  n: n,
+  callerThis: this
+}));",
             "type": "JSX_MAP_EXPRESSION",
             "uid": "",
             "valuesInScopeFromParameters": Array [
@@ -12263,7 +12299,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/f08": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/346": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -12325,6 +12361,7 @@ Object {
                   "elementsWithin": Object {},
                   "javascript": "'n' + n",
                   "originalJavascript": "'n' + n",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -12384,7 +12421,7 @@ Object {
            ))",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW,UAAC,CAAD;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAY,CAAD;AAAA;AAAA;AAAA,EAAX,CAAD",
           "names": Array [],
           "sources": Array [
             "code.tsx",
@@ -12421,12 +12458,10 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [1, 2, 3].map(function (n) {
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    n: n,
-    callerThis: this
-  });
-});",
+        "transpiledJavascript": "return [1, 2, 3].map(n => utopiaCanvasJSXLookup(\\"bbb\\", {
+  n: n,
+  callerThis: this
+}));",
         "type": "JSX_MAP_EXPRESSION",
         "uid": "",
         "valuesInScopeFromParameters": Array [
@@ -12443,7 +12478,7 @@ Object {
         ],
         Array [
           "aaa",
-          "f08",
+          "346",
         ],
       ],
       "type": "elementpath",
@@ -12513,7 +12548,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/f08/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/346/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -12564,6 +12599,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -12625,7 +12661,7 @@ Object {
         ],
         Array [
           "aaa",
-          "f08",
+          "346",
           "bbb~~~1",
         ],
       ],
@@ -12700,7 +12736,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/f08/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/346/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -12751,6 +12787,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -12812,7 +12849,7 @@ Object {
         ],
         Array [
           "aaa",
-          "f08",
+          "346",
           "bbb~~~2",
         ],
       ],
@@ -12887,7 +12924,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/f08/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/346/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -12938,6 +12975,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -12999,7 +13037,7 @@ Object {
         ],
         Array [
           "aaa",
-          "f08",
+          "346",
           "bbb~~~3",
         ],
       ],
@@ -13083,7 +13121,7 @@ exports[`UiJsxCanvas render does not crash if the metadata scenes are undefined
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/311 utopia-storyboard-uid/scene-aaa/app-entity:aaa/311/bbb\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/2a8 utopia-storyboard-uid/scene-aaa/app-entity:aaa/2a8/bbb\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -13116,19 +13154,19 @@ exports[`UiJsxCanvas render does not crash if the metadata scenes are undefined
       >
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/311/bbb~~~1:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/2a8/bbb~~~1:xxx\\"
         >
           n1
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/311/bbb~~~2:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/2a8/bbb~~~2:xxx\\"
         >
           n2
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/311/bbb~~~3:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/2a8/bbb~~~3:xxx\\"
         >
           n3
         </div>
@@ -13539,6 +13577,7 @@ Object {
                       "elementsWithin": Object {},
                       "javascript": "'n' + n",
                       "originalJavascript": "'n' + n",
+                      "params": Array [],
                       "sourceMap": Object {
                         "file": "code.tsx",
                         "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -13598,7 +13637,7 @@ Object {
            ))",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW,UAAC,CAAD;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAY,CAAD;AAAA;AAAA;AAAA,EAAX,CAAD",
               "names": Array [],
               "sources": Array [
                 "code.tsx",
@@ -13635,12 +13674,10 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [1, 2, 3].map(function (n) {
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    n: n,
-    callerThis: this
-  });
-});",
+            "transpiledJavascript": "return [1, 2, 3].map(n => utopiaCanvasJSXLookup(\\"bbb\\", {
+  n: n,
+  callerThis: this
+}));",
             "type": "JSX_MAP_EXPRESSION",
             "uid": "",
             "valuesInScopeFromParameters": Array [
@@ -13760,7 +13797,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/311": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/2a8": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -13822,6 +13859,7 @@ Object {
                   "elementsWithin": Object {},
                   "javascript": "'n' + n",
                   "originalJavascript": "'n' + n",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -13881,7 +13919,7 @@ Object {
            ))",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW,UAAC,CAAD;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAY,CAAD;AAAA;AAAA;AAAA,EAAX,CAAD",
           "names": Array [],
           "sources": Array [
             "code.tsx",
@@ -13918,12 +13956,10 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [1, 2, 3].map(function (n) {
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    n: n,
-    callerThis: this
-  });
-});",
+        "transpiledJavascript": "return [1, 2, 3].map(n => utopiaCanvasJSXLookup(\\"bbb\\", {
+  n: n,
+  callerThis: this
+}));",
         "type": "JSX_MAP_EXPRESSION",
         "uid": "",
         "valuesInScopeFromParameters": Array [
@@ -13940,7 +13976,7 @@ Object {
         ],
         Array [
           "aaa",
-          "311",
+          "2a8",
         ],
       ],
       "type": "elementpath",
@@ -14010,7 +14046,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/311/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/2a8/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -14061,6 +14097,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -14122,7 +14159,7 @@ Object {
         ],
         Array [
           "aaa",
-          "311",
+          "2a8",
           "bbb~~~1",
         ],
       ],
@@ -14197,7 +14234,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/311/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/2a8/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -14248,6 +14285,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -14309,7 +14347,7 @@ Object {
         ],
         Array [
           "aaa",
-          "311",
+          "2a8",
           "bbb~~~2",
         ],
       ],
@@ -14384,7 +14422,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/311/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/2a8/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -14435,6 +14473,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -14496,7 +14535,7 @@ Object {
         ],
         Array [
           "aaa",
-          "311",
+          "2a8",
           "bbb~~~3",
         ],
       ],
@@ -15398,7 +15437,7 @@ exports[`UiJsxCanvas render function component works inside a map 1`] = `
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:zzz utopia-storyboard-uid/scene-aaa/app-entity:zzz/dcf utopia-storyboard-uid/scene-aaa/app-entity:zzz/dcf/aaa\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:zzz utopia-storyboard-uid/scene-aaa/app-entity:zzz/e82 utopia-storyboard-uid/scene-aaa/app-entity:zzz/e82/aaa\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -15431,13 +15470,13 @@ exports[`UiJsxCanvas render function component works inside a map 1`] = `
       >
         <div
           data-uid=\\"ccc\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/dcf/aaa~~~1:ccc\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/e82/aaa~~~1:ccc\\"
         >
           Thing
         </div>
         <div
           data-uid=\\"ccc\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/dcf/aaa~~~2:ccc\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:zzz/e82/aaa~~~2:ccc\\"
         >
           Thing
         </div>
@@ -15843,7 +15882,7 @@ Object {
             })",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAWA,UAAD,IAACA,EAAS;AACR;AAAA;AAAA;AAAA;AADd,CAAE,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAU,IAACA,IAAS;AACR;AAAA;AAAA;AAAA;AADd,CAAE,CAAD",
               "names": Array [
                 "data",
               ],
@@ -15881,7 +15920,7 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [1, 2].map(function (data) {
+            "transpiledJavascript": "return [1, 2].map(data => {
   return utopiaCanvasJSXLookup(\\"aaa\\", {
     data: data,
     callerThis: this
@@ -16005,7 +16044,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/dcf": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/e82": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -16062,7 +16101,7 @@ Object {
             })",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAWA,UAAD,IAACA,EAAS;AACR;AAAA;AAAA;AAAA;AADd,CAAE,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAU,IAACA,IAAS;AACR;AAAA;AAAA;AAAA;AADd,CAAE,CAAD",
           "names": Array [
             "data",
           ],
@@ -16100,7 +16139,7 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [1, 2].map(function (data) {
+        "transpiledJavascript": "return [1, 2].map(data => {
   return utopiaCanvasJSXLookup(\\"aaa\\", {
     data: data,
     callerThis: this
@@ -16122,7 +16161,7 @@ Object {
         ],
         Array [
           "zzz",
-          "dcf",
+          "e82",
         ],
       ],
       "type": "elementpath",
@@ -16192,7 +16231,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/dcf/aaa~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/e82/aaa~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -16239,7 +16278,7 @@ Object {
         ],
         Array [
           "zzz",
-          "dcf",
+          "e82",
           "aaa~~~1",
         ],
       ],
@@ -16314,7 +16353,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/dcf/aaa~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/e82/aaa~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -16361,7 +16400,7 @@ Object {
         ],
         Array [
           "zzz",
-          "dcf",
+          "e82",
           "aaa~~~2",
         ],
       ],
@@ -16935,6 +16974,7 @@ Object {
                   "elementsWithin": Object {},
                   "javascript": "props.title",
                   "originalJavascript": "props.title",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAWsGA,KAAMC,MAAND",
@@ -17028,6 +17068,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAQyBA,KAAMC,MAAND",
@@ -17281,6 +17322,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "props.title",
               "originalJavascript": "props.title",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAWsGA,KAAMC,MAAND",
@@ -17918,6 +17960,7 @@ Object {
                   "elementsWithin": Object {},
                   "javascript": "props.title",
                   "originalJavascript": "props.title",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAWuGA,KAAMC,MAAND",
@@ -18011,6 +18054,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAQyBA,KAAMC,MAAND",
@@ -18264,6 +18308,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "props.title",
               "originalJavascript": "props.title",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAWuGA,KAAMC,MAAND",
@@ -18914,6 +18959,7 @@ Object {
                         "elementsWithin": Object {},
                         "javascript": "props.title",
                         "originalJavascript": "props.title",
+                        "params": Array [],
                         "sourceMap": Object {
                           "file": "code.tsx",
                           "mappings": "OAW0GA,KAAMC,MAAND",
@@ -19046,6 +19092,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAQyBA,KAAMC,MAAND",
@@ -19311,6 +19358,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.title",
                     "originalJavascript": "props.title",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAW0GA,KAAMC,MAAND",
@@ -20000,6 +20048,7 @@ Object {
                         "elementsWithin": Object {},
                         "javascript": "props.title",
                         "originalJavascript": "props.title",
+                        "params": Array [],
                         "sourceMap": Object {
                           "file": "code.tsx",
                           "mappings": "OAW0GA,KAAMC,MAAND",
@@ -20132,6 +20181,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAQyBA,KAAMC,MAAND",
@@ -20397,6 +20447,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.title",
                     "originalJavascript": "props.title",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAW0GA,KAAMC,MAAND",
@@ -21086,7 +21137,7 @@ exports[`UiJsxCanvas render handles fragments in an arbitrary block 1`] = `
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834 utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834/604 utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999 utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999/000\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96 utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834 utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834/35b utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999 utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999/000\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -21142,32 +21193,32 @@ exports[`UiJsxCanvas render handles fragments in an arbitrary block 1`] = `
           <div
             data-uid=\\"834~~~1\\"
             data-label=\\"Copy\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834~~~1\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834~~~1\\"
           >
             Copy
           </div>
           <div
             data-uid=\\"999~~~2\\"
             data-label=\\"⌘,⎇,C\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~2\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~2\\"
           >
             <span
               data-uid=\\"6a8\\"
-              data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~2/000:6a8\\"
+              data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~2/000:6a8\\"
               ><span
                 style=\\"padding: 6px\\"
                 data-uid=\\"726~~~1\\"
-                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~2/000:6a8/84e/726~~~1\\"
+                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~2/000:6a8/a21/726~~~1\\"
                 >⌘</span
               ><span
                 style=\\"padding: 6px\\"
                 data-uid=\\"726~~~2\\"
-                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~2/000:6a8/84e/726~~~2\\"
+                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~2/000:6a8/a21/726~~~2\\"
                 >⎇</span
               ><span
                 style=\\"padding: 6px\\"
                 data-uid=\\"726~~~3\\"
-                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~2/000:6a8/84e/726~~~3\\"
+                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~2/000:6a8/a21/726~~~3\\"
                 >C</span
               ></span
             >
@@ -21175,32 +21226,32 @@ exports[`UiJsxCanvas render handles fragments in an arbitrary block 1`] = `
           <div
             data-uid=\\"834~~~3\\"
             data-label=\\"Paste\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834~~~3\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834~~~3\\"
           >
             Paste
           </div>
           <div
             data-uid=\\"999~~~4\\"
             data-label=\\"⌘⎇V\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~4\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~4\\"
           >
             <span
               data-uid=\\"6a8\\"
-              data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~4/000:6a8\\"
+              data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~4/000:6a8\\"
               ><span
                 style=\\"padding: 6px\\"
                 data-uid=\\"726~~~1\\"
-                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~4/000:6a8/84e/726~~~1\\"
+                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~4/000:6a8/a21/726~~~1\\"
                 >⌘</span
               ><span
                 style=\\"padding: 6px\\"
                 data-uid=\\"726~~~2\\"
-                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~4/000:6a8/84e/726~~~2\\"
+                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~4/000:6a8/a21/726~~~2\\"
                 >⎇</span
               ><span
                 style=\\"padding: 6px\\"
                 data-uid=\\"726~~~3\\"
-                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~4/000:6a8/84e/726~~~3\\"
+                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~4/000:6a8/a21/726~~~3\\"
                 >V</span
               ></span
             >
@@ -21208,32 +21259,32 @@ exports[`UiJsxCanvas render handles fragments in an arbitrary block 1`] = `
           <div
             data-uid=\\"834~~~5\\"
             data-label=\\"Cut\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834~~~5\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834~~~5\\"
           >
             Cut
           </div>
           <div
             data-uid=\\"999~~~6\\"
             data-label=\\"⌘⎇C\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~6\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~6\\"
           >
             <span
               data-uid=\\"6a8\\"
-              data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~6/000:6a8\\"
+              data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~6/000:6a8\\"
               ><span
                 style=\\"padding: 6px\\"
                 data-uid=\\"726~~~1\\"
-                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~6/000:6a8/84e/726~~~1\\"
+                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~6/000:6a8/a21/726~~~1\\"
                 >⌘</span
               ><span
                 style=\\"padding: 6px\\"
                 data-uid=\\"726~~~2\\"
-                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~6/000:6a8/84e/726~~~2\\"
+                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~6/000:6a8/a21/726~~~2\\"
                 >⎇</span
               ><span
                 style=\\"padding: 6px\\"
                 data-uid=\\"726~~~3\\"
-                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~6/000:6a8/84e/726~~~3\\"
+                data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~6/000:6a8/a21/726~~~3\\"
                 >C</span
               ></span
             >
@@ -21618,6 +21669,7 @@ Object {
                         "elementsWithin": Object {},
                         "javascript": "pair.label;",
                         "originalJavascript": "pair.label",
+                        "params": Array [],
                         "sourceMap": Object {
                           "file": "code.tsx",
                           "mappings": "OAACA,IAAKC,CAAN,KAACD",
@@ -21774,6 +21826,7 @@ export var storyboard = (props) => {
                           "elementsWithin": Object {},
                           "javascript": "pair.label",
                           "originalJavascript": "pair.label",
+                          "params": Array [],
                           "sourceMap": Object {
                             "file": "code.tsx",
                             "mappings": "OAmE+CA,IAAKC,MAALD",
@@ -21938,6 +21991,7 @@ export var storyboard = (props) => {
                               "elementsWithin": Object {},
                               "javascript": "pair.macKeys",
                               "originalJavascript": "pair.macKeys",
+                              "params": Array [],
                               "sourceMap": Object {
                                 "file": "code.tsx",
                                 "mappings": "OAuE4DA,IAAKC,QAALD",
@@ -22099,6 +22153,7 @@ export var storyboard = (props) => {
                           "elementsWithin": Object {},
                           "javascript": "pair.macKeys",
                           "originalJavascript": "pair.macKeys",
+                          "params": Array [],
                           "sourceMap": Object {
                             "file": "code.tsx",
                             "mappings": "OAsE+CA,IAAKC,QAALD",
@@ -22239,7 +22294,7 @@ export var storyboard = (props) => {
         ))",
                 "sourceMap": Object {
                   "file": "code.tsx",
-                  "mappings": "OAACA,iBAAkBC,CAAlBD,IAAuBE,UAAD,IAACA;AAAAA,SACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KADcA;AAAAA,CAAvBF",
+                  "mappings": "OAACA,iBAAkBC,CAAlBD,IAAsB,IAACE,IACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GADTF",
                   "names": Array [
                     "keyboardShortcuts",
                     "map",
@@ -22347,15 +22402,13 @@ export var storyboard = (props) => {
                   ],
                   "version": 3,
                 },
-                "transpiledJavascript": "return keyboardShortcuts.map(function (pair) {
-  return React.createElement(React.Fragment, null, utopiaCanvasJSXLookup(\\"834\\", {
-    pair: pair,
-    callerThis: this
-  }), utopiaCanvasJSXLookup(\\"999\\", {
-    pair: pair,
-    callerThis: this
-  }));
-});",
+                "transpiledJavascript": "return keyboardShortcuts.map(pair => React.createElement(React.Fragment, null, utopiaCanvasJSXLookup(\\"834\\", {
+  pair: pair,
+  callerThis: this
+}), utopiaCanvasJSXLookup(\\"999\\", {
+  pair: pair,
+  callerThis: this
+})));",
                 "type": "JSX_MAP_EXPRESSION",
                 "uid": "",
                 "valuesInScopeFromParameters": Array [
@@ -22429,6 +22482,7 @@ export var storyboard = (props) => {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAmDYA,KAAMC,MAAND",
@@ -22855,6 +22909,7 @@ export var storyboard = (props) => {
                     "elementsWithin": Object {},
                     "javascript": "pair.label;",
                     "originalJavascript": "pair.label",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAACA,IAAKC,CAAN,KAACD",
@@ -23011,6 +23066,7 @@ export var storyboard = (props) => {
                       "elementsWithin": Object {},
                       "javascript": "pair.label",
                       "originalJavascript": "pair.label",
+                      "params": Array [],
                       "sourceMap": Object {
                         "file": "code.tsx",
                         "mappings": "OAmE+CA,IAAKC,MAALD",
@@ -23175,6 +23231,7 @@ export var storyboard = (props) => {
                           "elementsWithin": Object {},
                           "javascript": "pair.macKeys",
                           "originalJavascript": "pair.macKeys",
+                          "params": Array [],
                           "sourceMap": Object {
                             "file": "code.tsx",
                             "mappings": "OAuE4DA,IAAKC,QAALD",
@@ -23336,6 +23393,7 @@ export var storyboard = (props) => {
                       "elementsWithin": Object {},
                       "javascript": "pair.macKeys",
                       "originalJavascript": "pair.macKeys",
+                      "params": Array [],
                       "sourceMap": Object {
                         "file": "code.tsx",
                         "mappings": "OAsE+CA,IAAKC,QAALD",
@@ -23476,7 +23534,7 @@ export var storyboard = (props) => {
         ))",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAACA,iBAAkBC,CAAlBD,IAAuBE,UAAD,IAACA;AAAAA,SACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KADcA;AAAAA,CAAvBF",
+              "mappings": "OAACA,iBAAkBC,CAAlBD,IAAsB,IAACE,IACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GADTF",
               "names": Array [
                 "keyboardShortcuts",
                 "map",
@@ -23584,15 +23642,13 @@ export var storyboard = (props) => {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return keyboardShortcuts.map(function (pair) {
-  return React.createElement(React.Fragment, null, utopiaCanvasJSXLookup(\\"834\\", {
-    pair: pair,
-    callerThis: this
-  }), utopiaCanvasJSXLookup(\\"999\\", {
-    pair: pair,
-    callerThis: this
-  }));
-});",
+            "transpiledJavascript": "return keyboardShortcuts.map(pair => React.createElement(React.Fragment, null, utopiaCanvasJSXLookup(\\"834\\", {
+  pair: pair,
+  callerThis: this
+}), utopiaCanvasJSXLookup(\\"999\\", {
+  pair: pair,
+  callerThis: this
+})));",
             "type": "JSX_MAP_EXPRESSION",
             "uid": "",
             "valuesInScopeFromParameters": Array [
@@ -23712,7 +23768,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -23744,6 +23800,7 @@ export var storyboard = (props) => {
                 "elementsWithin": Object {},
                 "javascript": "pair.label;",
                 "originalJavascript": "pair.label",
+                "params": Array [],
                 "sourceMap": Object {
                   "file": "code.tsx",
                   "mappings": "OAACA,IAAKC,CAAN,KAACD",
@@ -23900,6 +23957,7 @@ export var storyboard = (props) => {
                   "elementsWithin": Object {},
                   "javascript": "pair.label",
                   "originalJavascript": "pair.label",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAmE+CA,IAAKC,MAALD",
@@ -24064,6 +24122,7 @@ export var storyboard = (props) => {
                       "elementsWithin": Object {},
                       "javascript": "pair.macKeys",
                       "originalJavascript": "pair.macKeys",
+                      "params": Array [],
                       "sourceMap": Object {
                         "file": "code.tsx",
                         "mappings": "OAuE4DA,IAAKC,QAALD",
@@ -24225,6 +24284,7 @@ export var storyboard = (props) => {
                   "elementsWithin": Object {},
                   "javascript": "pair.macKeys",
                   "originalJavascript": "pair.macKeys",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAsE+CA,IAAKC,QAALD",
@@ -24365,7 +24425,7 @@ export var storyboard = (props) => {
         ))",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAACA,iBAAkBC,CAAlBD,IAAuBE,UAAD,IAACA;AAAAA,SACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KADcA;AAAAA,CAAvBF",
+          "mappings": "OAACA,iBAAkBC,CAAlBD,IAAsB,IAACE,IACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GADTF",
           "names": Array [
             "keyboardShortcuts",
             "map",
@@ -24473,15 +24533,13 @@ export var storyboard = (props) => {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return keyboardShortcuts.map(function (pair) {
-  return React.createElement(React.Fragment, null, utopiaCanvasJSXLookup(\\"834\\", {
-    pair: pair,
-    callerThis: this
-  }), utopiaCanvasJSXLookup(\\"999\\", {
-    pair: pair,
-    callerThis: this
-  }));
-});",
+        "transpiledJavascript": "return keyboardShortcuts.map(pair => React.createElement(React.Fragment, null, utopiaCanvasJSXLookup(\\"834\\", {
+  pair: pair,
+  callerThis: this
+}), utopiaCanvasJSXLookup(\\"999\\", {
+  pair: pair,
+  callerThis: this
+})));",
         "type": "JSX_MAP_EXPRESSION",
         "uid": "",
         "valuesInScopeFromParameters": Array [
@@ -24499,7 +24557,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
         ],
       ],
       "type": "elementpath",
@@ -24569,7 +24627,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -24589,6 +24647,7 @@ export var storyboard = (props) => {
             "elementsWithin": Object {},
             "javascript": "pair.label;",
             "originalJavascript": "pair.label",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAACA,IAAKC,CAAN,KAACD",
@@ -24745,6 +24804,7 @@ export var storyboard = (props) => {
               "elementsWithin": Object {},
               "javascript": "pair.label",
               "originalJavascript": "pair.label",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAmE+CA,IAAKC,MAALD",
@@ -24874,7 +24934,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "834~~~1",
         ],
       ],
@@ -24949,7 +25009,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834~~~1/604": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834~~~1/35b": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -24967,6 +25027,7 @@ export var storyboard = (props) => {
         "elementsWithin": Object {},
         "javascript": "pair.label;",
         "originalJavascript": "pair.label",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAACA,IAAKC,CAAN,KAACD",
@@ -25091,9 +25152,9 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "834~~~1",
-          "604",
+          "35b",
         ],
       ],
       "type": "elementpath",
@@ -25163,7 +25224,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -25183,6 +25244,7 @@ export var storyboard = (props) => {
             "elementsWithin": Object {},
             "javascript": "pair.label;",
             "originalJavascript": "pair.label",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAACA,IAAKC,CAAN,KAACD",
@@ -25339,6 +25401,7 @@ export var storyboard = (props) => {
               "elementsWithin": Object {},
               "javascript": "pair.label",
               "originalJavascript": "pair.label",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAmE+CA,IAAKC,MAALD",
@@ -25468,7 +25531,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "834~~~3",
         ],
       ],
@@ -25543,7 +25606,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834~~~3/604": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834~~~3/35b": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -25561,6 +25624,7 @@ export var storyboard = (props) => {
         "elementsWithin": Object {},
         "javascript": "pair.label;",
         "originalJavascript": "pair.label",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAACA,IAAKC,CAAN,KAACD",
@@ -25685,9 +25749,9 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "834~~~3",
-          "604",
+          "35b",
         ],
       ],
       "type": "elementpath",
@@ -25757,7 +25821,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834~~~5": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834~~~5": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -25777,6 +25841,7 @@ export var storyboard = (props) => {
             "elementsWithin": Object {},
             "javascript": "pair.label;",
             "originalJavascript": "pair.label",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAACA,IAAKC,CAAN,KAACD",
@@ -25933,6 +25998,7 @@ export var storyboard = (props) => {
               "elementsWithin": Object {},
               "javascript": "pair.label",
               "originalJavascript": "pair.label",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAmE+CA,IAAKC,MAALD",
@@ -26062,7 +26128,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "834~~~5",
         ],
       ],
@@ -26137,7 +26203,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/834~~~5/604": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/834~~~5/35b": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -26155,6 +26221,7 @@ export var storyboard = (props) => {
         "elementsWithin": Object {},
         "javascript": "pair.label;",
         "originalJavascript": "pair.label",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAACA,IAAKC,CAAN,KAACD",
@@ -26279,9 +26346,9 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "834~~~5",
-          "604",
+          "35b",
         ],
       ],
       "type": "elementpath",
@@ -26351,7 +26418,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -26404,6 +26471,7 @@ export var storyboard = (props) => {
                   "elementsWithin": Object {},
                   "javascript": "pair.macKeys",
                   "originalJavascript": "pair.macKeys",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAuE4DA,IAAKC,QAALD",
@@ -26565,6 +26633,7 @@ export var storyboard = (props) => {
               "elementsWithin": Object {},
               "javascript": "pair.macKeys",
               "originalJavascript": "pair.macKeys",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAsE+CA,IAAKC,QAALD",
@@ -26694,7 +26763,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "999~~~2",
         ],
       ],
@@ -26769,7 +26838,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~2/000": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~2/000": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -26820,6 +26889,7 @@ export var storyboard = (props) => {
               "elementsWithin": Object {},
               "javascript": "pair.macKeys",
               "originalJavascript": "pair.macKeys",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAuE4DA,IAAKC,QAALD",
@@ -26949,7 +27019,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "999~~~2",
           "000",
         ],
@@ -27025,7 +27095,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~4": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~4": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -27078,6 +27148,7 @@ export var storyboard = (props) => {
                   "elementsWithin": Object {},
                   "javascript": "pair.macKeys",
                   "originalJavascript": "pair.macKeys",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAuE4DA,IAAKC,QAALD",
@@ -27239,6 +27310,7 @@ export var storyboard = (props) => {
               "elementsWithin": Object {},
               "javascript": "pair.macKeys",
               "originalJavascript": "pair.macKeys",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAsE+CA,IAAKC,QAALD",
@@ -27368,7 +27440,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "999~~~4",
         ],
       ],
@@ -27443,7 +27515,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~4/000": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~4/000": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -27494,6 +27566,7 @@ export var storyboard = (props) => {
               "elementsWithin": Object {},
               "javascript": "pair.macKeys",
               "originalJavascript": "pair.macKeys",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAuE4DA,IAAKC,QAALD",
@@ -27623,7 +27696,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "999~~~4",
           "000",
         ],
@@ -27699,7 +27772,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~6": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~6": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -27752,6 +27825,7 @@ export var storyboard = (props) => {
                   "elementsWithin": Object {},
                   "javascript": "pair.macKeys",
                   "originalJavascript": "pair.macKeys",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAuE4DA,IAAKC,QAALD",
@@ -27913,6 +27987,7 @@ export var storyboard = (props) => {
               "elementsWithin": Object {},
               "javascript": "pair.macKeys",
               "originalJavascript": "pair.macKeys",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAsE+CA,IAAKC,QAALD",
@@ -28042,7 +28117,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "999~~~6",
         ],
       ],
@@ -28117,7 +28192,7 @@ export var storyboard = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/d3e/999~~~6/000": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/03a/c96/999~~~6/000": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -28168,6 +28243,7 @@ export var storyboard = (props) => {
               "elementsWithin": Object {},
               "javascript": "pair.macKeys",
               "originalJavascript": "pair.macKeys",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAuE4DA,IAAKC,QAALD",
@@ -28297,7 +28373,7 @@ export var storyboard = (props) => {
         Array [
           "aaa",
           "03a",
-          "d3e",
+          "c96",
           "999~~~6",
           "000",
         ],
@@ -29687,15 +29763,16 @@ Object {
               "elementsWithin": Object {},
               "javascript": "() => console.log('class component')",
               "originalJavascript": "() => console.log('class component')",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
-                "mappings": "OAS4BA,CAACC;AAAAA,SAAKC,OAAQC,IAARD,CAAaE,iBAAbF,CAALD;AAAAA,CAADD",
+                "mappings": "OAS6BA,MAAKC,OAAQC,IAARD,CAAaE,iBAAbF,CAANG",
                 "names": Array [
-                  "(",
                   ")",
                   "console",
                   "log",
                   "class",
+                  "(",
                 ],
                 "sources": Array [
                   "code.tsx",
@@ -29731,9 +29808,7 @@ Object {
                 ],
                 "version": 3,
               },
-              "transpiledJavascript": "return (function () {
-  return console.log('class component');
-});",
+              "transpiledJavascript": "return () => console.log('class component');",
               "type": "ATTRIBUTE_OTHER_JAVASCRIPT",
               "uid": "",
             },
@@ -30259,15 +30334,16 @@ Object {
               "elementsWithin": Object {},
               "javascript": "() => console.log('functional component')",
               "originalJavascript": "() => console.log('functional component')",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
-                "mappings": "OAI0BA,CAACC;AAAAA,SAAKC,OAAQC,IAARD,CAAaE,sBAAbF,CAALD;AAAAA,CAADD",
+                "mappings": "OAI2BA,MAAKC,OAAQC,IAARD,CAAaE,sBAAbF,CAANG",
                 "names": Array [
-                  "(",
                   ")",
                   "console",
                   "log",
                   "functional",
+                  "(",
                 ],
                 "sources": Array [
                   "code.tsx",
@@ -30298,9 +30374,7 @@ Object {
                 ],
                 "version": 3,
               },
-              "transpiledJavascript": "return (function () {
-  return console.log('functional component');
-});",
+              "transpiledJavascript": "return () => console.log('functional component');",
               "type": "ATTRIBUTE_OTHER_JAVASCRIPT",
               "uid": "",
             },
@@ -30335,6 +30409,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAIiFA,KAAMC,MAAND",
@@ -32033,6 +32108,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAOyBA,KAAMC,MAAND",
@@ -32606,6 +32682,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "Test.specialValue * 2",
                     "originalJavascript": "Test.specialValue * 2",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAmB4EA,IAAKC,aAALD,GAAoBE,CAApBF",
@@ -33042,6 +33119,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAQyBA,KAAMC,MAAND",
@@ -33380,7 +33458,7 @@ exports[`UiJsxCanvas render renders a canvas testing a multitude of export style
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:b93 utopia-storyboard-uid/scene-aaa/app-entity:b93/2f0 utopia-storyboard-uid/scene-aaa/app-entity:b93/59c utopia-storyboard-uid/scene-aaa/app-entity:b93/54b utopia-storyboard-uid/scene-aaa/app-entity:b93/d18 utopia-storyboard-uid/scene-aaa/app-entity:b93/995 utopia-storyboard-uid/scene-aaa/app-entity:b93/0cf utopia-storyboard-uid/scene-aaa/app-entity:b93/d00 utopia-storyboard-uid/scene-aaa/app-entity:b93/7d0 utopia-storyboard-uid/scene-aaa/app-entity:b93/4cf utopia-storyboard-uid/scene-aaa/app-entity:b93/4cf/477 utopia-storyboard-uid/scene-aaa/app-entity:b93/d7f utopia-storyboard-uid/scene-aaa/app-entity:b93/315 utopia-storyboard-uid/scene-aaa/app-entity:b93/5b9 utopia-storyboard-uid/scene-aaa/app-entity:b93/1a1 utopia-storyboard-uid/scene-aaa/app-entity:b93/301 utopia-storyboard-uid/scene-aaa/app-entity:b93/8ce utopia-storyboard-uid/scene-aaa/app-entity:b93/f77 utopia-storyboard-uid/scene-aaa/app-entity:b93/218 utopia-storyboard-uid/scene-aaa/app-entity:b93/a17 utopia-storyboard-uid/scene-aaa/app-entity:b93/8aa\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:b93 utopia-storyboard-uid/scene-aaa/app-entity:b93/2f0 utopia-storyboard-uid/scene-aaa/app-entity:b93/59c utopia-storyboard-uid/scene-aaa/app-entity:b93/54b utopia-storyboard-uid/scene-aaa/app-entity:b93/d18 utopia-storyboard-uid/scene-aaa/app-entity:b93/995 utopia-storyboard-uid/scene-aaa/app-entity:b93/0cf utopia-storyboard-uid/scene-aaa/app-entity:b93/d00 utopia-storyboard-uid/scene-aaa/app-entity:b93/7d0 utopia-storyboard-uid/scene-aaa/app-entity:b93/4cf utopia-storyboard-uid/scene-aaa/app-entity:b93/4cf/0bb utopia-storyboard-uid/scene-aaa/app-entity:b93/d7f utopia-storyboard-uid/scene-aaa/app-entity:b93/315 utopia-storyboard-uid/scene-aaa/app-entity:b93/5b9 utopia-storyboard-uid/scene-aaa/app-entity:b93/1a1 utopia-storyboard-uid/scene-aaa/app-entity:b93/301 utopia-storyboard-uid/scene-aaa/app-entity:b93/8ce utopia-storyboard-uid/scene-aaa/app-entity:b93/f77 utopia-storyboard-uid/scene-aaa/app-entity:b93/218 utopia-storyboard-uid/scene-aaa/app-entity:b93/a17 utopia-storyboard-uid/scene-aaa/app-entity:b93/8aa\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -34132,6 +34210,7 @@ Object {
                 "elementsWithin": Object {},
                 "javascript": "DefaultExpression;",
                 "originalJavascript": "DefaultExpression",
+                "params": Array [],
                 "sourceMap": Object {
                   "file": "code.tsx",
                   "mappings": "OAAA,iBAACA",
@@ -35395,6 +35474,7 @@ export var App = (props) => {
             "elementsWithin": Object {},
             "javascript": "DefaultExpression;",
             "originalJavascript": "DefaultExpression",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAA,iBAACA",
@@ -35569,7 +35649,7 @@ export var App = (props) => {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:b93/4cf/477": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:b93/4cf/0bb": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -35587,6 +35667,7 @@ export var App = (props) => {
         "elementsWithin": Object {},
         "javascript": "DefaultExpression;",
         "originalJavascript": "DefaultExpression",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAA,iBAACA",
@@ -35659,7 +35740,7 @@ export var App = (props) => {
         Array [
           "b93",
           "4cf",
-          "477",
+          "0bb",
         ],
       ],
       "type": "elementpath",
@@ -37206,7 +37287,7 @@ exports[`UiJsxCanvas render renders a component used in an arbitrary block corre
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/b05 utopia-storyboard-uid/scene-aaa/app-entity:aaa/b05/bbb\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/626 utopia-storyboard-uid/scene-aaa/app-entity:aaa/626/bbb\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -37239,19 +37320,19 @@ exports[`UiJsxCanvas render renders a component used in an arbitrary block corre
       >
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/b05/bbb~~~1:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/626/bbb~~~1:xxx\\"
         >
           n1
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/b05/bbb~~~2:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/626/bbb~~~2:xxx\\"
         >
           n2
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/b05/bbb~~~3:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/626/bbb~~~3:xxx\\"
         >
           n3
         </div>
@@ -37662,6 +37743,7 @@ Object {
                       "elementsWithin": Object {},
                       "javascript": "'n' + n",
                       "originalJavascript": "'n' + n",
+                      "params": Array [],
                       "sourceMap": Object {
                         "file": "code.tsx",
                         "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -37721,7 +37803,7 @@ Object {
            ))",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW,UAAC,CAAD;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAY,CAAD;AAAA;AAAA;AAAA,EAAX,CAAD",
               "names": Array [],
               "sources": Array [
                 "code.tsx",
@@ -37758,12 +37840,10 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [1, 2, 3].map(function (n) {
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    n: n,
-    callerThis: this
-  });
-});",
+            "transpiledJavascript": "return [1, 2, 3].map(n => utopiaCanvasJSXLookup(\\"bbb\\", {
+  n: n,
+  callerThis: this
+}));",
             "type": "JSX_MAP_EXPRESSION",
             "uid": "",
             "valuesInScopeFromParameters": Array [
@@ -37883,7 +37963,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/b05": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/626": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -37945,6 +38025,7 @@ Object {
                   "elementsWithin": Object {},
                   "javascript": "'n' + n",
                   "originalJavascript": "'n' + n",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -38004,7 +38085,7 @@ Object {
            ))",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW,UAAC,CAAD;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAY,CAAD;AAAA;AAAA;AAAA,EAAX,CAAD",
           "names": Array [],
           "sources": Array [
             "code.tsx",
@@ -38041,12 +38122,10 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [1, 2, 3].map(function (n) {
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    n: n,
-    callerThis: this
-  });
-});",
+        "transpiledJavascript": "return [1, 2, 3].map(n => utopiaCanvasJSXLookup(\\"bbb\\", {
+  n: n,
+  callerThis: this
+}));",
         "type": "JSX_MAP_EXPRESSION",
         "uid": "",
         "valuesInScopeFromParameters": Array [
@@ -38063,7 +38142,7 @@ Object {
         ],
         Array [
           "aaa",
-          "b05",
+          "626",
         ],
       ],
       "type": "elementpath",
@@ -38133,7 +38212,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/b05/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/626/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -38184,6 +38263,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -38245,7 +38325,7 @@ Object {
         ],
         Array [
           "aaa",
-          "b05",
+          "626",
           "bbb~~~1",
         ],
       ],
@@ -38320,7 +38400,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/b05/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/626/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -38371,6 +38451,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -38432,7 +38513,7 @@ Object {
         ],
         Array [
           "aaa",
-          "b05",
+          "626",
           "bbb~~~2",
         ],
       ],
@@ -38507,7 +38588,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/b05/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/626/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -38558,6 +38639,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKA,CAANC",
@@ -38619,7 +38701,7 @@ Object {
         ],
         Array [
           "aaa",
-          "b05",
+          "626",
           "bbb~~~3",
         ],
       ],
@@ -38703,7 +38785,7 @@ exports[`UiJsxCanvas render renders a component used in an arbitrary block corre
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/ec0 utopia-storyboard-uid/scene-aaa/app-entity:aaa/ec0/bbb\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/f2b utopia-storyboard-uid/scene-aaa/app-entity:aaa/f2b/bbb\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -38736,19 +38818,19 @@ exports[`UiJsxCanvas render renders a component used in an arbitrary block corre
       >
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/ec0/bbb~~~1:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/f2b/bbb~~~1:xxx\\"
         >
           n1
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/ec0/bbb~~~2:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/f2b/bbb~~~2:xxx\\"
         >
           n2
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/ec0/bbb~~~3:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/f2b/bbb~~~3:xxx\\"
         >
           n3
         </div>
@@ -39159,6 +39241,7 @@ Object {
                       "elementsWithin": Object {},
                       "javascript": "'n' + div",
                       "originalJavascript": "'n' + div",
+                      "params": Array [],
                       "sourceMap": Object {
                         "file": "code.tsx",
                         "mappings": "OAQ+CA,MAAKC,GAANC",
@@ -39219,7 +39302,7 @@ Object {
            ))",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW;AAAA;AAAA;AAAA,EAAX,CAAD",
               "names": Array [],
               "sources": Array [
                 "code.tsx",
@@ -39256,12 +39339,10 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [1, 2, 3].map(function (div) {
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    div: div,
-    callerThis: this
-  });
-});",
+            "transpiledJavascript": "return [1, 2, 3].map(div => utopiaCanvasJSXLookup(\\"bbb\\", {
+  div: div,
+  callerThis: this
+}));",
             "type": "JSX_MAP_EXPRESSION",
             "uid": "",
             "valuesInScopeFromParameters": Array [
@@ -39381,7 +39462,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/ec0": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/f2b": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -39443,6 +39524,7 @@ Object {
                   "elementsWithin": Object {},
                   "javascript": "'n' + div",
                   "originalJavascript": "'n' + div",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAQ+CA,MAAKC,GAANC",
@@ -39503,7 +39585,7 @@ Object {
            ))",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAW;AAAA;AAAA;AAAA,EAAX,CAAD",
           "names": Array [],
           "sources": Array [
             "code.tsx",
@@ -39540,12 +39622,10 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [1, 2, 3].map(function (div) {
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    div: div,
-    callerThis: this
-  });
-});",
+        "transpiledJavascript": "return [1, 2, 3].map(div => utopiaCanvasJSXLookup(\\"bbb\\", {
+  div: div,
+  callerThis: this
+}));",
         "type": "JSX_MAP_EXPRESSION",
         "uid": "",
         "valuesInScopeFromParameters": Array [
@@ -39562,7 +39642,7 @@ Object {
         ],
         Array [
           "aaa",
-          "ec0",
+          "f2b",
         ],
       ],
       "type": "elementpath",
@@ -39632,7 +39712,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/ec0/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/f2b/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -39683,6 +39763,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + div",
               "originalJavascript": "'n' + div",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKC,GAANC",
@@ -39745,7 +39826,7 @@ Object {
         ],
         Array [
           "aaa",
-          "ec0",
+          "f2b",
           "bbb~~~1",
         ],
       ],
@@ -39820,7 +39901,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/ec0/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/f2b/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -39871,6 +39952,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + div",
               "originalJavascript": "'n' + div",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKC,GAANC",
@@ -39933,7 +40015,7 @@ Object {
         ],
         Array [
           "aaa",
-          "ec0",
+          "f2b",
           "bbb~~~2",
         ],
       ],
@@ -40008,7 +40090,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/ec0/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/f2b/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -40059,6 +40141,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + div",
               "originalJavascript": "'n' + div",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAQ+CA,MAAKC,GAANC",
@@ -40121,7 +40204,7 @@ Object {
         ],
         Array [
           "aaa",
-          "ec0",
+          "f2b",
           "bbb~~~3",
         ],
       ],
@@ -40205,7 +40288,7 @@ exports[`UiJsxCanvas render renders a component used in an arbitrary block with
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/1f1 utopia-storyboard-uid/scene-aaa/app-entity:aaa/1f1/bbb\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/970 utopia-storyboard-uid/scene-aaa/app-entity:aaa/970/bbb\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -40238,19 +40321,19 @@ exports[`UiJsxCanvas render renders a component used in an arbitrary block with
       >
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/1f1/bbb~~~1:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/970/bbb~~~1:xxx\\"
         >
           n1
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/1f1/bbb~~~2:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/970/bbb~~~2:xxx\\"
         >
           n2
         </div>
         <div
           data-uid=\\"xxx\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/1f1/bbb~~~3:xxx\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/970/bbb~~~3:xxx\\"
         >
           n3
         </div>
@@ -40662,6 +40745,7 @@ Object {
                       "elementsWithin": Object {},
                       "javascript": "'n' + n",
                       "originalJavascript": "'n' + n",
+                      "params": Array [],
                       "sourceMap": Object {
                         "file": "code.tsx",
                         "mappings": "OAS+CA,MAAKA,CAANC",
@@ -40721,10 +40805,11 @@ Object {
            ))",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAACA,YAAaC,CAAbD,IAAkB;AAAA,mDAAG,CAAH,CAAQ,CAAR,CAAa,CAAb;AAAA,MAAD,CAAC;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlBA",
+              "mappings": "OAACA,YAAaC,CAAbD,IAAkB;AAAG,KAAE;AAAG,OAAE;AAAG,SAAIE,CAAlB,CAAkBA;AAAP;AAAL;AAAL;AAAA;AAAA;AAAA,EAAlBF",
               "names": Array [
                 "nestedThings",
                 "map",
+                "n",
               ],
               "sources": Array [
                 "code.tsx",
@@ -40761,16 +40846,16 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return nestedThings.map(function (_ref) {
-  var _ref$a$b$c = babelHelpers.slicedToArray(_ref.a.b.c, 1),
-      n = _ref$a$b$c[0];
-
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    _ref: _ref,
-    n: n,
-    callerThis: this
-  });
-});",
+            "transpiledJavascript": "return nestedThings.map(({
+  a: {
+    b: {
+      c: [n]
+    }
+  }
+}) => utopiaCanvasJSXLookup(\\"bbb\\", {
+  n: n,
+  callerThis: this
+}));",
             "type": "JSX_MAP_EXPRESSION",
             "uid": "",
             "valuesInScopeFromParameters": Array [
@@ -40890,7 +40975,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/1f1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/970": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -40953,6 +41038,7 @@ Object {
                   "elementsWithin": Object {},
                   "javascript": "'n' + n",
                   "originalJavascript": "'n' + n",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAS+CA,MAAKA,CAANC",
@@ -41012,10 +41098,11 @@ Object {
            ))",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAACA,YAAaC,CAAbD,IAAkB;AAAA,mDAAG,CAAH,CAAQ,CAAR,CAAa,CAAb;AAAA,MAAD,CAAC;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlBA",
+          "mappings": "OAACA,YAAaC,CAAbD,IAAkB;AAAG,KAAE;AAAG,OAAE;AAAG,SAAIE,CAAlB,CAAkBA;AAAP;AAAL;AAAL;AAAA;AAAA;AAAA,EAAlBF",
           "names": Array [
             "nestedThings",
             "map",
+            "n",
           ],
           "sources": Array [
             "code.tsx",
@@ -41052,16 +41139,16 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return nestedThings.map(function (_ref) {
-  var _ref$a$b$c = babelHelpers.slicedToArray(_ref.a.b.c, 1),
-      n = _ref$a$b$c[0];
-
-  return utopiaCanvasJSXLookup(\\"bbb\\", {
-    _ref: _ref,
-    n: n,
-    callerThis: this
-  });
-});",
+        "transpiledJavascript": "return nestedThings.map(({
+  a: {
+    b: {
+      c: [n]
+    }
+  }
+}) => utopiaCanvasJSXLookup(\\"bbb\\", {
+  n: n,
+  callerThis: this
+}));",
         "type": "JSX_MAP_EXPRESSION",
         "uid": "",
         "valuesInScopeFromParameters": Array [
@@ -41078,7 +41165,7 @@ Object {
         ],
         Array [
           "aaa",
-          "1f1",
+          "970",
         ],
       ],
       "type": "elementpath",
@@ -41148,7 +41235,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/1f1/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/970/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -41199,6 +41286,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAS+CA,MAAKA,CAANC",
@@ -41260,7 +41348,7 @@ Object {
         ],
         Array [
           "aaa",
-          "1f1",
+          "970",
           "bbb~~~1",
         ],
       ],
@@ -41335,7 +41423,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/1f1/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/970/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -41386,6 +41474,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAS+CA,MAAKA,CAANC",
@@ -41447,7 +41536,7 @@ Object {
         ],
         Array [
           "aaa",
-          "1f1",
+          "970",
           "bbb~~~2",
         ],
       ],
@@ -41522,7 +41611,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/1f1/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/970/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -41573,6 +41662,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "'n' + n",
               "originalJavascript": "'n' + n",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAS+CA,MAAKA,CAANC",
@@ -41634,7 +41724,7 @@ Object {
         ],
         Array [
           "aaa",
-          "1f1",
+          "970",
           "bbb~~~3",
         ],
       ],
@@ -42219,6 +42309,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "props",
               "originalJavascript": "props",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAOiBA",
@@ -43752,6 +43843,7 @@ Object {
                   },
                   "javascript": "<div data-uid={'ccc'}>test</div>",
                   "originalJavascript": "<div data-uid={'ccc'}>test</div>",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAesCA;AAAAA;AAAAA",
@@ -44032,6 +44124,7 @@ export var storyboard = (
               },
               "javascript": "<div data-uid={'ccc'}>test</div>",
               "originalJavascript": "<div data-uid={'ccc'}>test</div>",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAesCA;AAAAA;AAAAA",
@@ -44599,6 +44692,7 @@ Object {
               "elementsWithin": Object {},
               "javascript": "storeRef",
               "originalJavascript": "storeRef",
+              "params": Array [],
               "sourceMap": Object {
                 "file": "code.tsx",
                 "mappings": "OAaiCA",
@@ -46052,7 +46146,7 @@ exports[`UiJsxCanvas render renders fine with two circularly referencing arbitra
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene utopia-storyboard-uid/scene/app-entity utopia-storyboard-uid/scene/app-entity:aaa utopia-storyboard-uid/scene/app-entity:aaa/ada utopia-storyboard-uid/scene/app-entity:aaa/848\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene utopia-storyboard-uid/scene/app-entity utopia-storyboard-uid/scene/app-entity:aaa utopia-storyboard-uid/scene/app-entity:aaa/773 utopia-storyboard-uid/scene/app-entity:aaa/f4f\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -46402,6 +46496,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "b(5);",
             "originalJavascript": "b(5)",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,CAAC,CAAH,CAAG,CAAFA",
@@ -46478,6 +46573,7 @@ export var storyboard = (
             "elementsWithin": Object {},
             "javascript": "a(5);",
             "originalJavascript": "a(5)",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,CAAC,CAAH,CAAG,CAAFA",
@@ -46671,7 +46767,7 @@ export var storyboard = (
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene/app-entity:aaa/848": Object {
+  "utopia-storyboard-uid/scene/app-entity:aaa/773": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -46684,16 +46780,17 @@ export var storyboard = (
           "trailingComments": Array [],
         },
         "definedElsewhere": Array [
-          "a",
+          "b",
         ],
         "elementsWithin": Object {},
-        "javascript": "a(5);",
-        "originalJavascript": "a(5)",
+        "javascript": "b(5);",
+        "originalJavascript": "b(5)",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,CAAC,CAAH,CAAG,CAAFA",
           "names": Array [
-            "a",
+            "b",
           ],
           "sources": Array [
             "code.tsx",
@@ -46745,7 +46842,7 @@ export var storyboard = (
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return a(5);",
+        "transpiledJavascript": "return b(5);",
         "type": "ATTRIBUTE_OTHER_JAVASCRIPT",
         "uid": "",
       },
@@ -46759,7 +46856,7 @@ export var storyboard = (
         ],
         Array [
           "aaa",
-          "848",
+          "773",
         ],
       ],
       "type": "elementpath",
@@ -46829,7 +46926,7 @@ export var storyboard = (
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene/app-entity:aaa/ada": Object {
+  "utopia-storyboard-uid/scene/app-entity:aaa/f4f": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -46842,16 +46939,17 @@ export var storyboard = (
           "trailingComments": Array [],
         },
         "definedElsewhere": Array [
-          "b",
+          "a",
         ],
         "elementsWithin": Object {},
-        "javascript": "b(5);",
-        "originalJavascript": "b(5)",
+        "javascript": "a(5);",
+        "originalJavascript": "a(5)",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAE,CAAC,CAAH,CAAG,CAAFA",
           "names": Array [
-            "b",
+            "a",
           ],
           "sources": Array [
             "code.tsx",
@@ -46903,7 +47001,7 @@ export var storyboard = (
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return b(5);",
+        "transpiledJavascript": "return a(5);",
         "type": "ATTRIBUTE_OTHER_JAVASCRIPT",
         "uid": "",
       },
@@ -46917,7 +47015,7 @@ export var storyboard = (
         ],
         Array [
           "aaa",
-          "ada",
+          "f4f",
         ],
       ],
       "type": "elementpath",
@@ -48105,6 +48203,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "props.style",
                     "originalJavascript": "props.style",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAMmBA,KAAMC,MAAND",
@@ -50446,7 +50545,7 @@ exports[`UiJsxCanvas render supports passing down the scope to children of compo
     id=\\"canvas-container\\"
     data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
-    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59 utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb/ccc utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb/ccc/b6e\\"
+    data-utopia-valid-paths=\\"utopia-storyboard-uid utopia-storyboard-uid/scene-aaa utopia-storyboard-uid/scene-aaa/app-entity utopia-storyboard-uid/scene-aaa/app-entity:aaa utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb/ccc utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb/ccc/563\\"
     data-utopia-root-element-path=\\"utopia-storyboard-uid\\"
   >
     <div
@@ -50479,33 +50578,33 @@ exports[`UiJsxCanvas render supports passing down the scope to children of compo
       >
         <div
           data-uid=\\"bbb~~~1\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~1\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~1\\"
         >
           <div
             data-uid=\\"ccc\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~1/ccc\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~1/ccc\\"
           >
             1
           </div>
         </div>
         <div
           data-uid=\\"bbb~~~2\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~2\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~2\\"
         >
           <div
             data-uid=\\"ccc\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~2/ccc\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~2/ccc\\"
           >
             2
           </div>
         </div>
         <div
           data-uid=\\"bbb~~~3\\"
-          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~3\\"
+          data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~3\\"
         >
           <div
             data-uid=\\"ccc\\"
-            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~3/ccc\\"
+            data-path=\\"utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~3/ccc\\"
           >
             3
           </div>
@@ -50887,6 +50986,7 @@ Object {
                         "elementsWithin": Object {},
                         "javascript": "n;",
                         "originalJavascript": "n",
+                        "params": Array [],
                         "sourceMap": Object {
                           "file": "code.tsx",
                           "mappings": "OAAA,CAACA",
@@ -51004,7 +51104,7 @@ Object {
            })",
             "sourceMap": Object {
               "file": "code.tsx",
-              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,UAAC,CAAD,EAAK;AACP;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
+              "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAc,CAAD,IAAK;AACP;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
               "names": Array [],
               "sources": Array [
                 "code.tsx",
@@ -51042,7 +51142,7 @@ Object {
               ],
               "version": 3,
             },
-            "transpiledJavascript": "return [1, 2, 3].map(function (n) {
+            "transpiledJavascript": "return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     callerThis: this
@@ -51167,7 +51267,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -51199,6 +51299,7 @@ Object {
                     "elementsWithin": Object {},
                     "javascript": "n;",
                     "originalJavascript": "n",
+                    "params": Array [],
                     "sourceMap": Object {
                       "file": "code.tsx",
                       "mappings": "OAAA,CAACA",
@@ -51316,7 +51417,7 @@ Object {
            })",
         "sourceMap": Object {
           "file": "code.tsx",
-          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAa,UAAC,CAAD,EAAK;AACP;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
+          "mappings": "OAAE,CAAD,CAAC,EAAD,CAAC,EAAD,CAAC,EAAD,GAAC,CAAc,CAAD,IAAK;AACP;AAAA;AAAA;AAAA;AADb,CAAE,CAAD",
           "names": Array [],
           "sources": Array [
             "code.tsx",
@@ -51354,7 +51455,7 @@ Object {
           ],
           "version": 3,
         },
-        "transpiledJavascript": "return [1, 2, 3].map(function (n) {
+        "transpiledJavascript": "return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup(\\"bbb\\", {
     n: n,
     callerThis: this
@@ -51376,7 +51477,7 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
         ],
       ],
       "type": "elementpath",
@@ -51446,7 +51547,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~1": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~1": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -51468,6 +51569,7 @@ Object {
                 "elementsWithin": Object {},
                 "javascript": "n;",
                 "originalJavascript": "n",
+                "params": Array [],
                 "sourceMap": Object {
                   "file": "code.tsx",
                   "mappings": "OAAA,CAACA",
@@ -51582,7 +51684,7 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
           "bbb~~~1",
         ],
       ],
@@ -51657,7 +51759,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~1/ccc": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~1/ccc": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -51677,6 +51779,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n;",
             "originalJavascript": "n",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAA,CAACA",
@@ -51762,7 +51865,7 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
           "bbb~~~1",
           "ccc",
         ],
@@ -51838,7 +51941,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~1/ccc/b6e": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~1/ccc/563": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -51856,6 +51959,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n;",
         "originalJavascript": "n",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAA,CAACA",
@@ -51912,10 +52016,10 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
           "bbb~~~1",
           "ccc",
-          "b6e",
+          "563",
         ],
       ],
       "type": "elementpath",
@@ -51985,7 +52089,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~2": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -52007,6 +52111,7 @@ Object {
                 "elementsWithin": Object {},
                 "javascript": "n;",
                 "originalJavascript": "n",
+                "params": Array [],
                 "sourceMap": Object {
                   "file": "code.tsx",
                   "mappings": "OAAA,CAACA",
@@ -52121,7 +52226,7 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
           "bbb~~~2",
         ],
       ],
@@ -52196,7 +52301,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~2/ccc": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~2/ccc": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -52216,6 +52321,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n;",
             "originalJavascript": "n",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAA,CAACA",
@@ -52301,7 +52407,7 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
           "bbb~~~2",
           "ccc",
         ],
@@ -52377,7 +52483,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~2/ccc/b6e": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~2/ccc/563": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -52395,6 +52501,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n;",
         "originalJavascript": "n",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAA,CAACA",
@@ -52451,10 +52558,10 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
           "bbb~~~2",
           "ccc",
-          "b6e",
+          "563",
         ],
       ],
       "type": "elementpath",
@@ -52524,7 +52631,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~3": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -52546,6 +52653,7 @@ Object {
                 "elementsWithin": Object {},
                 "javascript": "n;",
                 "originalJavascript": "n",
+                "params": Array [],
                 "sourceMap": Object {
                   "file": "code.tsx",
                   "mappings": "OAAA,CAACA",
@@ -52660,7 +52768,7 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
           "bbb~~~3",
         ],
       ],
@@ -52735,7 +52843,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~3/ccc": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~3/ccc": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -52755,6 +52863,7 @@ Object {
             "elementsWithin": Object {},
             "javascript": "n;",
             "originalJavascript": "n",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAA,CAACA",
@@ -52840,7 +52949,7 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
           "bbb~~~3",
           "ccc",
         ],
@@ -52916,7 +53025,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/d59/bbb~~~3/ccc/b6e": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/29d/bbb~~~3/ccc/563": Object {
     "attributeMetadatada": Object {},
     "componentInstance": false,
     "computedStyle": Object {},
@@ -52934,6 +53043,7 @@ Object {
         "elementsWithin": Object {},
         "javascript": "n;",
         "originalJavascript": "n",
+        "params": Array [],
         "sourceMap": Object {
           "file": "code.tsx",
           "mappings": "OAAA,CAACA",
@@ -52990,10 +53100,10 @@ Object {
         ],
         Array [
           "aaa",
-          "d59",
+          "29d",
           "bbb~~~3",
           "ccc",
-          "b6e",
+          "563",
         ],
       ],
       "type": "elementpath",
diff --git a/editor/src/components/canvas/scoped-variables.spec.tsx b/editor/src/components/canvas/scoped-variables.spec.tsx
index c5b10200da7b..35a1f75af1d6 100644
--- a/editor/src/components/canvas/scoped-variables.spec.tsx
+++ b/editor/src/components/canvas/scoped-variables.spec.tsx
@@ -257,7 +257,7 @@ describe('scoped variables', () => {
             },
           },
         },
-        "storyboard-entity/scene-1-entity/app-entity:cb0/fakeawaitelement/5b3/something-div~~~1": Object {
+        "storyboard-entity/scene-1-entity/app-entity:cb0/fakeawaitelement/ef7/something-div~~~1": Object {
           "first": Object {
             "insertionCeiling": Object {
               "parts": Array [
@@ -269,7 +269,7 @@ describe('scoped variables', () => {
                 Array [
                   "cb0",
                   "fakeawaitelement",
-                  "5b3",
+                  "ef7",
                   "something-div~~~1",
                 ],
               ],
@@ -303,7 +303,7 @@ describe('scoped variables', () => {
                 Array [
                   "cb0",
                   "fakeawaitelement",
-                  "5b3",
+                  "ef7",
                   "something-div~~~1",
                 ],
               ],
@@ -361,7 +361,7 @@ describe('scoped variables', () => {
             },
           },
         },
-        "storyboard-entity/scene-1-entity/app-entity:cb0/fakeawaitelement/e63/something-div~~~1": Object {
+        "storyboard-entity/scene-1-entity/app-entity:cb0/fakeawaitelement/a00/something-div~~~1": Object {
           "props": Object {
             "insertionCeiling": Object {
               "parts": Array [
@@ -388,7 +388,7 @@ describe('scoped variables', () => {
                 Array [
                   "cb0",
                   "fakeawaitelement",
-                  "e63",
+                  "a00",
                   "something-div~~~1",
                 ],
               ],
diff --git a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
index 5426dc028835..70ee6d702ce5 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
@@ -435,7 +435,7 @@ export default function () {
           id=\\"canvas-container\\"
           data-testid=\\"canvas-container\\"
           style=\\"position: absolute\\"
-          data-utopia-valid-paths=\\"storyboard-entity storyboard-entity/scene-1-entity storyboard-entity/scene-1-entity/app-entity storyboard-entity/scene-1-entity/app-entity:app-outer-div storyboard-entity/scene-1-entity/app-entity:app-outer-div/card-instance storyboard-entity/scene-1-entity/app-entity:app-outer-div/2a5 storyboard-entity/scene-1-entity/app-entity:app-outer-div/d7f\\"
+          data-utopia-valid-paths=\\"storyboard-entity storyboard-entity/scene-1-entity storyboard-entity/scene-1-entity/app-entity storyboard-entity/scene-1-entity/app-entity:app-outer-div storyboard-entity/scene-1-entity/app-entity:app-outer-div/card-instance storyboard-entity/scene-1-entity/app-entity:app-outer-div/40f storyboard-entity/scene-1-entity/app-entity:app-outer-div/d7f\\"
           data-utopia-root-element-path=\\"storyboard-entity\\"
         >
           <div
diff --git a/editor/src/components/custom-code/__snapshots__/code-file.spec.ts.snap b/editor/src/components/custom-code/__snapshots__/code-file.spec.ts.snap
index 938e9a85b816..e76534016858 100644
--- a/editor/src/components/custom-code/__snapshots__/code-file.spec.ts.snap
+++ b/editor/src/components/custom-code/__snapshots__/code-file.spec.ts.snap
@@ -295,7 +295,7 @@ Object {
       },
       "sourceMap": Object {
         "file": "app.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AASA,IAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAqCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,YAAY,EAAE,EADY;AAE1B,EAAA,YAAY,EAAE,EAFY;AAG1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CAHkB;AAW1B,EAAA,eAAe,EAAE;AAXS,CAAjB;;AAeJ,IAAI,GAAG,GAAG,SAAN,GAAM,CAAC,KAAD,EAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AASA,MAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAqCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,YAAY,EAAE,EADY;AAE1B,EAAA,YAAY,EAAE,EAFY;AAG1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CAHkB;AAW1B,EAAA,eAAe,EAAE;AAXS,CAAjB;;AAeJ,IAAI,GAAG,GAAI,KAAD,IAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -388,7 +388,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -412,9 +412,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -426,13 +424,13 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.App = exports.canvasMetadata = void 0;
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\");
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\");
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var utopia_api_1 = require(\\"utopia-api\\");
+const utopia_api_1 = require(\\"utopia-api\\");
 
-var uuiui_1 = require(\\"uuiui\\");
+const uuiui_1 = require(\\"uuiui\\");
 
 exports.canvasMetadata = {
   specialNodes: [],
@@ -460,7 +458,7 @@ exports.canvasMetadata = {
   elementMetadata: {}
 };
 
-var App = function App(props) {
+var App = props => {
   return (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
     style: { ...props.style,
       backgroundColor: uuiui_1.colorTheme.white.value
@@ -498,7 +496,7 @@ exports.App = App; //# sourceMappingURL=app.js.map",
       },
       "sourceMap": Object {
         "file": "components.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAA;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAEA,OAAA,CAAA,OAAA,GAAe,UAAC,KAAD;AAAA,SACb,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AAAC,IAAA,MAAM,EAAE,KAAK,CAAC,MAAf;AAAuB,IAAA,KAAK,EAAE,KAAK,CAAC,KAApC;AAA2C,IAAA,WAAW,EAAE,KAAK,CAAC,WAA9D;AAAyE,IAAA,QAAA,EAC5E,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,MAAA,KAAK,EAAE;AAAE,QAAA,QAAQ,EAAE,EAAZ;AAAgB,QAAA,SAAS,EAAE;AAA3B,OADJ;AAEH,MAAA,IAAI,EAAE,KAAK,CAAC,IAFT;AAGH,MAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,CADA;AAEN,QAAA,GAAG,EAAE,EAFC;AAGN,QAAA,KAAK,EAAE,MAHD;AAIN,QAAA,MAAM,EAAE;AAJF,OAHL;AASH,MAAA,UAAU,EAAE;AATT,KAAL;AADG,GAAL,CADa;AAAA,CAAf;;AAgBa,OAAA,CAAA,KAAA,GAAQ,cAAR;;AAEN,IAAM,kBAAkB,GAAG,SAArB,kBAAqB,CAAC,KAAD,EAAU;AAC1C,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE,EACL,GAAG,KAAK,CAAC,KADJ;AAEL,MAAA,eAAe,EAAE,KAAK,CAAC,IAAN,GAAa,SAAb,GAAyB,aAFrC;AAGL,MAAA,UAAU,EAAE;AAHP,KADT;AAKG,IAAA,QAAA,EAEA,CAAC,KAAK,CAAC,IAAN,GAAa,GAAd,EAAmB,MAAnB,CAA0B,KAAK,CAAC,GAAhC;AAPH,GAAA,CADF;AAWD,CAZM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAcb,OAAA,CAAA,kBAAA,CAAmB,gBAAnB,GAAsC;AACpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,QADF;AAEJ,IAAA,KAAK,EAAE,OAFH;AAGJ,IAAA,YAAY,EAAE;AAHV,GAD8B;AAMpC,EAAA,GAAG,EAAE;AACH,IAAA,IAAI,EAAE,QADH;AAEH,IAAA,KAAK,EAAE,QAFJ;AAGH,IAAA,YAAY,EAAE;AAHX,GAN+B;AAWpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,SADF;AAEJ,IAAA,KAAK,EAAE,SAFH;AAGJ,IAAA,YAAY,EAAE;AAHV;AAX8B,CAAtC,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAAA;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAEA,OAAA,CAAA,OAAA,GAAgB,KAAD,IACb,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AAAC,EAAA,MAAM,EAAE,KAAK,CAAC,MAAf;AAAuB,EAAA,KAAK,EAAE,KAAK,CAAC,KAApC;AAA2C,EAAA,WAAW,EAAE,KAAK,CAAC,WAA9D;AAAyE,EAAA,QAAA,EAC5E,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE;AAAE,MAAA,QAAQ,EAAE,EAAZ;AAAgB,MAAA,SAAS,EAAE;AAA3B,KADJ;AAEH,IAAA,IAAI,EAAE,KAAK,CAAC,IAFT;AAGH,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,CADA;AAEN,MAAA,GAAG,EAAE,EAFC;AAGN,MAAA,KAAK,EAAE,MAHD;AAIN,MAAA,MAAM,EAAE;AAJF,KAHL;AASH,IAAA,UAAU,EAAE;AATT,GAAL;AADG,CAAL,CADF;;AAgBa,OAAA,CAAA,KAAA,GAAQ,cAAR;;AAEN,MAAM,kBAAkB,GAAI,KAAD,IAAU;AAC1C,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE,EACL,GAAG,KAAK,CAAC,KADJ;AAEL,MAAA,eAAe,EAAE,KAAK,CAAC,IAAN,GAAa,SAAb,GAAyB,aAFrC;AAGL,MAAA,UAAU,EAAE;AAHP,KADT;AAKG,IAAA,QAAA,EAEA,CAAC,KAAK,CAAC,IAAN,GAAa,GAAd,EAAmB,MAAnB,CAA0B,KAAK,CAAC,GAAhC;AAPH,GAAA,CADF;AAWD,CAZM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAcb,OAAA,CAAA,kBAAA,CAAmB,gBAAnB,GAAsC;AACpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,QADF;AAEJ,IAAA,KAAK,EAAE,OAFH;AAGJ,IAAA,YAAY,EAAE;AAHV,GAD8B;AAMpC,EAAA,GAAG,EAAE;AACH,IAAA,IAAI,EAAE,QADH;AAEH,IAAA,KAAK,EAAE,QAFJ;AAGH,IAAA,YAAY,EAAE;AAHX,GAN+B;AAWpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,SADF;AAEJ,IAAA,KAAK,EAAE,SAFH;AAGJ,IAAA,YAAY,EAAE;AAHV;AAX8B,CAAtC,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -572,7 +570,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -596,9 +594,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -610,38 +606,36 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.ComponentWithProps = exports.LABEL = void 0;
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\"); // component library
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\"); // component library
 
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var utopia_api_1 = require(\\"utopia-api\\");
+const utopia_api_1 = require(\\"utopia-api\\");
 
-exports.default = function (props) {
-  return (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
-    layout: props.layout,
-    style: props.style,
-    onMouseDown: props.onMouseDown,
-    children: (0, jsx_runtime_1.jsx)(utopia_api_1.Text, {
-      style: {
-        fontSize: 16,
-        textAlign: 'center'
-      },
-      text: props.text,
-      layout: {
-        left: 0,
-        top: 10,
-        width: '100%',
-        height: '100%'
-      },
-      textSizing: 'fixed'
-    })
-  });
-};
+exports.default = props => (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
+  layout: props.layout,
+  style: props.style,
+  onMouseDown: props.onMouseDown,
+  children: (0, jsx_runtime_1.jsx)(utopia_api_1.Text, {
+    style: {
+      fontSize: 16,
+      textAlign: 'center'
+    },
+    text: props.text,
+    layout: {
+      left: 0,
+      top: 10,
+      width: '100%',
+      height: '100%'
+    },
+    textSizing: 'fixed'
+  })
+});
 
 exports.LABEL = 'press me! 😉';
 
-var ComponentWithProps = function ComponentWithProps(props) {
+const ComponentWithProps = props => {
   return (0, jsx_runtime_1.jsx)(\\"div\\", {
     style: { ...props.style,
       backgroundColor: props.pink ? 'hotpink' : 'transparent',
@@ -872,7 +866,7 @@ ReactDOM.render(<App />, root);
       "errors": Array [],
       "sourceMap": Object {
         "file": "app.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AASA,IAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAqCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,YAAY,EAAE,EADY;AAE1B,EAAA,YAAY,EAAE,EAFY;AAG1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CAHkB;AAW1B,EAAA,eAAe,EAAE;AAXS,CAAjB;;AAeJ,IAAI,GAAG,GAAG,SAAN,GAAM,CAAC,KAAD,EAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AASA,MAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAqCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,YAAY,EAAE,EADY;AAE1B,EAAA,YAAY,EAAE,EAFY;AAG1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CAHkB;AAW1B,EAAA,eAAe,EAAE;AAXS,CAAjB;;AAeJ,IAAI,GAAG,GAAI,KAAD,IAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -965,7 +959,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -989,9 +983,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -1003,13 +995,13 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.App = exports.canvasMetadata = void 0;
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\");
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\");
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var utopia_api_1 = require(\\"utopia-api\\");
+const utopia_api_1 = require(\\"utopia-api\\");
 
-var uuiui_1 = require(\\"uuiui\\");
+const uuiui_1 = require(\\"uuiui\\");
 
 exports.canvasMetadata = {
   specialNodes: [],
@@ -1037,7 +1029,7 @@ exports.canvasMetadata = {
   elementMetadata: {}
 };
 
-var App = function App(props) {
+var App = props => {
   return (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
     style: { ...props.style,
       backgroundColor: uuiui_1.colorTheme.white.value
@@ -1055,7 +1047,7 @@ exports.App = App; //# sourceMappingURL=app.js.map",
       "errors": Array [],
       "sourceMap": Object {
         "file": "preview.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,QAAA,GAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,CAAA;;AACA,IAAA,KAAA,GAAA,OAAA,CAAA,QAAA,CAAA;;AAEA,IAAM,IAAI,GAAG,QAAQ,CAAC,cAAT,CAAwB,MAAxB,CAAb;;AACA,IAAI,IAAI,IAAI,IAAZ,EAAkB;AAClB,EAAA,QAAQ,CAAC,MAAT,CAAgB,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,KAAA,CAAA,GAAD,EAAI,EAAJ,CAAhB,EAAyB,IAAzB;AACC,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,QAAA,GAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,CAAA;;AACA,MAAA,KAAA,GAAA,OAAA,CAAA,QAAA,CAAA;;AAEA,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAT,CAAwB,MAAxB,CAAb;;AACA,IAAI,IAAI,IAAI,IAAZ,EAAkB;AAClB,EAAA,QAAQ,CAAC,MAAT,CAAgB,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,KAAA,CAAA,GAAD,EAAI,EAAJ,CAAhB,EAAyB,IAAzB;AACC,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -1082,7 +1074,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -1106,9 +1098,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -1119,15 +1109,15 @@ Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\");
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\");
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var ReactDOM = __importStar(require(\\"react-dom\\"));
+const ReactDOM = __importStar(require(\\"react-dom\\"));
 
-var app_1 = require(\\"../app\\");
+const app_1 = require(\\"../app\\");
 
-var root = document.getElementById(\\"root\\");
+const root = document.getElementById(\\"root\\");
 
 if (root != null) {
   ReactDOM.render((0, jsx_runtime_1.jsx)(app_1.App, {}), root);
@@ -1137,7 +1127,7 @@ if (root != null) {
       "errors": Array [],
       "sourceMap": Object {
         "file": "components.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAA;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAEA,OAAA,CAAA,OAAA,GAAe,UAAC,KAAD;AAAA,SACb,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AAAC,IAAA,MAAM,EAAE,KAAK,CAAC,MAAf;AAAuB,IAAA,KAAK,EAAE,KAAK,CAAC,KAApC;AAA2C,IAAA,WAAW,EAAE,KAAK,CAAC,WAA9D;AAAyE,IAAA,QAAA,EAC5E,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,MAAA,KAAK,EAAE;AAAE,QAAA,QAAQ,EAAE,EAAZ;AAAgB,QAAA,SAAS,EAAE;AAA3B,OADJ;AAEH,MAAA,IAAI,EAAE,KAAK,CAAC,IAFT;AAGH,MAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,CADA;AAEN,QAAA,GAAG,EAAE,EAFC;AAGN,QAAA,KAAK,EAAE,MAHD;AAIN,QAAA,MAAM,EAAE;AAJF,OAHL;AASH,MAAA,UAAU,EAAE;AATT,KAAL;AADG,GAAL,CADa;AAAA,CAAf;;AAgBa,OAAA,CAAA,KAAA,GAAQ,cAAR;;AAEN,IAAM,kBAAkB,GAAG,SAArB,kBAAqB,CAAC,KAAD,EAAU;AAC1C,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE,EACL,GAAG,KAAK,CAAC,KADJ;AAEL,MAAA,eAAe,EAAE,KAAK,CAAC,IAAN,GAAa,SAAb,GAAyB,aAFrC;AAGL,MAAA,UAAU,EAAE;AAHP,KADT;AAKG,IAAA,QAAA,EAEA,CAAC,KAAK,CAAC,IAAN,GAAa,GAAd,EAAmB,MAAnB,CAA0B,KAAK,CAAC,GAAhC;AAPH,GAAA,CADF;AAWD,CAZM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAcb,OAAA,CAAA,kBAAA,CAAmB,gBAAnB,GAAsC;AACpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,QADF;AAEJ,IAAA,KAAK,EAAE,OAFH;AAGJ,IAAA,YAAY,EAAE;AAHV,GAD8B;AAMpC,EAAA,GAAG,EAAE;AACH,IAAA,IAAI,EAAE,QADH;AAEH,IAAA,KAAK,EAAE,QAFJ;AAGH,IAAA,YAAY,EAAE;AAHX,GAN+B;AAWpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,SADF;AAEJ,IAAA,KAAK,EAAE,SAFH;AAGJ,IAAA,YAAY,EAAE;AAHV;AAX8B,CAAtC,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAAA;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAEA,OAAA,CAAA,OAAA,GAAgB,KAAD,IACb,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AAAC,EAAA,MAAM,EAAE,KAAK,CAAC,MAAf;AAAuB,EAAA,KAAK,EAAE,KAAK,CAAC,KAApC;AAA2C,EAAA,WAAW,EAAE,KAAK,CAAC,WAA9D;AAAyE,EAAA,QAAA,EAC5E,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE;AAAE,MAAA,QAAQ,EAAE,EAAZ;AAAgB,MAAA,SAAS,EAAE;AAA3B,KADJ;AAEH,IAAA,IAAI,EAAE,KAAK,CAAC,IAFT;AAGH,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,CADA;AAEN,MAAA,GAAG,EAAE,EAFC;AAGN,MAAA,KAAK,EAAE,MAHD;AAIN,MAAA,MAAM,EAAE;AAJF,KAHL;AASH,IAAA,UAAU,EAAE;AATT,GAAL;AADG,CAAL,CADF;;AAgBa,OAAA,CAAA,KAAA,GAAQ,cAAR;;AAEN,MAAM,kBAAkB,GAAI,KAAD,IAAU;AAC1C,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE,EACL,GAAG,KAAK,CAAC,KADJ;AAEL,MAAA,eAAe,EAAE,KAAK,CAAC,IAAN,GAAa,SAAb,GAAyB,aAFrC;AAGL,MAAA,UAAU,EAAE;AAHP,KADT;AAKG,IAAA,QAAA,EAEA,CAAC,KAAK,CAAC,IAAN,GAAa,GAAd,EAAmB,MAAnB,CAA0B,KAAK,CAAC,GAAhC;AAPH,GAAA,CADF;AAWD,CAZM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAcb,OAAA,CAAA,kBAAA,CAAmB,gBAAnB,GAAsC;AACpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,QADF;AAEJ,IAAA,KAAK,EAAE,OAFH;AAGJ,IAAA,YAAY,EAAE;AAHV,GAD8B;AAMpC,EAAA,GAAG,EAAE;AACH,IAAA,IAAI,EAAE,QADH;AAEH,IAAA,KAAK,EAAE,QAFJ;AAGH,IAAA,YAAY,EAAE;AAHX,GAN+B;AAWpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,SADF;AAEJ,IAAA,KAAK,EAAE,SAFH;AAGJ,IAAA,YAAY,EAAE;AAHV;AAX8B,CAAtC,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -1211,7 +1201,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -1235,9 +1225,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -1249,38 +1237,36 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.ComponentWithProps = exports.LABEL = void 0;
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\"); // component library
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\"); // component library
 
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var utopia_api_1 = require(\\"utopia-api\\");
+const utopia_api_1 = require(\\"utopia-api\\");
 
-exports.default = function (props) {
-  return (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
-    layout: props.layout,
-    style: props.style,
-    onMouseDown: props.onMouseDown,
-    children: (0, jsx_runtime_1.jsx)(utopia_api_1.Text, {
-      style: {
-        fontSize: 16,
-        textAlign: 'center'
-      },
-      text: props.text,
-      layout: {
-        left: 0,
-        top: 10,
-        width: '100%',
-        height: '100%'
-      },
-      textSizing: 'fixed'
-    })
-  });
-};
+exports.default = props => (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
+  layout: props.layout,
+  style: props.style,
+  onMouseDown: props.onMouseDown,
+  children: (0, jsx_runtime_1.jsx)(utopia_api_1.Text, {
+    style: {
+      fontSize: 16,
+      textAlign: 'center'
+    },
+    text: props.text,
+    layout: {
+      left: 0,
+      top: 10,
+      width: '100%',
+      height: '100%'
+    },
+    textSizing: 'fixed'
+  })
+});
 
 exports.LABEL = 'press me! 😉';
 
-var ComponentWithProps = function ComponentWithProps(props) {
+const ComponentWithProps = props => {
   return (0, jsx_runtime_1.jsx)(\\"div\\", {
     style: { ...props.style,
       backgroundColor: props.pink ? 'hotpink' : 'transparent',
@@ -1341,7 +1327,7 @@ Object {
       },
       "sourceMap": Object {
         "file": "app.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AASA,IAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAqCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,YAAY,EAAE,EADY;AAE1B,EAAA,YAAY,EAAE,EAFY;AAG1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CAHkB;AAW1B,EAAA,eAAe,EAAE;AAXS,CAAjB;;AAcJ,IAAI,GAAG,GAAG,SAAN,GAAM,CAAC,KAAD,EAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AASA,MAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAqCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,YAAY,EAAE,EADY;AAE1B,EAAA,YAAY,EAAE,EAFY;AAG1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CAHkB;AAW1B,EAAA,eAAe,EAAE;AAXS,CAAjB;;AAcJ,IAAI,GAAG,GAAI,KAAD,IAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -1433,7 +1419,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -1457,9 +1443,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -1471,13 +1455,13 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.App = exports.canvasMetadata = void 0;
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\");
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\");
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var utopia_api_1 = require(\\"utopia-api\\");
+const utopia_api_1 = require(\\"utopia-api\\");
 
-var uuiui_1 = require(\\"uuiui\\");
+const uuiui_1 = require(\\"uuiui\\");
 
 exports.canvasMetadata = {
   specialNodes: [],
@@ -1505,7 +1489,7 @@ exports.canvasMetadata = {
   elementMetadata: {}
 };
 
-var App = function App(props) {
+var App = props => {
   return (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
     style: { ...props.style,
       backgroundColor: uuiui_1.colorTheme.white.value
@@ -1627,7 +1611,7 @@ export var App = (props) => {
       "errors": Array [],
       "sourceMap": Object {
         "file": "app.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AASA,IAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAqCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,YAAY,EAAE,EADY;AAE1B,EAAA,YAAY,EAAE,EAFY;AAG1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CAHkB;AAW1B,EAAA,eAAe,EAAE;AAXS,CAAjB;;AAcJ,IAAI,GAAG,GAAG,SAAN,GAAM,CAAC,KAAD,EAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AASA,MAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAqCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,YAAY,EAAE,EADY;AAE1B,EAAA,YAAY,EAAE,EAFY;AAG1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CAHkB;AAW1B,EAAA,eAAe,EAAE;AAXS,CAAjB;;AAcJ,IAAI,GAAG,GAAI,KAAD,IAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -1719,7 +1703,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -1743,9 +1727,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -1757,13 +1739,13 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.App = exports.canvasMetadata = void 0;
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\");
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\");
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var utopia_api_1 = require(\\"utopia-api\\");
+const utopia_api_1 = require(\\"utopia-api\\");
 
-var uuiui_1 = require(\\"uuiui\\");
+const uuiui_1 = require(\\"uuiui\\");
 
 exports.canvasMetadata = {
   specialNodes: [],
@@ -1791,7 +1773,7 @@ exports.canvasMetadata = {
   elementMetadata: {}
 };
 
-var App = function App(props) {
+var App = props => {
   return (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
     style: { ...props.style,
       backgroundColor: uuiui_1.colorTheme.white.value
diff --git a/editor/src/components/custom-code/code-file.spec.ts b/editor/src/components/custom-code/code-file.spec.ts
index c1bef7568f7f..90aea6411bbd 100644
--- a/editor/src/components/custom-code/code-file.spec.ts
+++ b/editor/src/components/custom-code/code-file.spec.ts
@@ -251,7 +251,7 @@ describe('transpileCode', () => {
           "errors": Array [],
           "sourceMap": Object {
             "file": "app.js",
-            "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACE,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,UAAA,GAAA,eAAA,CAAA,OAAA,CAAA,YAAA,CAAA,CAAA;;AACO,IAAI,GAAG,GAAG,SAAN,GAAM,CAAC,KAAD;AAAA,SAAW,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AAAA,gBAAe,KAAf;AAAoB,IAAA,QAAA,EAAG,UAAA,CAAA;AAAvB,GAAA,CAAX;AAAA,CAAV;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
+            "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACE,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,UAAA,GAAA,eAAA,CAAA,OAAA,CAAA,YAAA,CAAA,CAAA;;AACO,IAAI,GAAG,GAAI,KAAD,IAAW,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AAAA,cAAe,KAAf;AAAoB,EAAA,QAAA,EAAG,UAAA,CAAA;AAAvB,CAAA,CAArB;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
             "names": Array [],
             "sourceRoot": "",
             "sources": Array [
@@ -275,7 +275,7 @@ describe('transpileCode', () => {
         if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
           desc = {
             enumerable: true,
-            get: function get() {
+            get: function () {
               return m[k];
             }
           };
@@ -299,9 +299,7 @@ describe('transpileCode', () => {
       var __importStar = this && this.__importStar || function (mod) {
         if (mod && mod.__esModule) return mod;
         var result = {};
-        if (mod != null) for (var k in mod) {
-          if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-        }
+        if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
         __setModuleDefault(result, mod);
 
@@ -319,18 +317,16 @@ describe('transpileCode', () => {
       });
       exports.App = void 0;
 
-      var jsx_runtime_1 = require(\\"react/jsx-runtime\\");
+      const jsx_runtime_1 = require(\\"react/jsx-runtime\\");
 
-      var React = __importStar(require(\\"react\\"));
+      const React = __importStar(require(\\"react\\"));
 
-      var icon_css_1 = __importDefault(require(\\"./icon.css\\"));
+      const icon_css_1 = __importDefault(require(\\"./icon.css\\"));
 
-      var App = function App(props) {
-        return (0, jsx_runtime_1.jsx)(\\"div\\", {
-          \\"data-uid\\": 'aaa',
-          children: icon_css_1.default
-        });
-      };
+      var App = props => (0, jsx_runtime_1.jsx)(\\"div\\", {
+        \\"data-uid\\": 'aaa',
+        children: icon_css_1.default
+      });
 
       exports.App = App; //# sourceMappingURL=app.js.map",
         },
diff --git a/editor/src/components/editor/variablesmenu.spec.browser2.tsx b/editor/src/components/editor/variablesmenu.spec.browser2.tsx
index 898656a4f7a3..dc776618ede1 100644
--- a/editor/src/components/editor/variablesmenu.spec.browser2.tsx
+++ b/editor/src/components/editor/variablesmenu.spec.browser2.tsx
@@ -171,7 +171,7 @@ describe('variables menu', () => {
 
       await selectComponentsForTest(editor, [
         EP.fromString(
-          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/976/020~~~1`,
+          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/b5f/020~~~1`,
         ),
       ])
 
@@ -206,7 +206,7 @@ describe('variables menu', () => {
 
       await selectComponentsForTest(editor, [
         EP.fromString(
-          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/3e2/586~~~1`,
+          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/414/586~~~1`,
         ),
       ])
 
@@ -287,7 +287,7 @@ describe('variables menu', () => {
 
       await selectComponentsForTest(editor, [
         EP.fromString(
-          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/3e2/586~~~1`,
+          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/414/586~~~1`,
         ),
       ])
 
@@ -369,7 +369,7 @@ describe('variables menu', () => {
 
       await selectComponentsForTest(editor, [
         EP.fromString(
-          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/3e2/586~~~1`,
+          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/414/586~~~1`,
         ),
       ])
 
@@ -451,7 +451,7 @@ describe('variables menu', () => {
 
       await selectComponentsForTest(editor, [
         EP.fromString(
-          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/3e2/586~~~1`,
+          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/414/586~~~1`,
         ),
       ])
 
@@ -533,7 +533,7 @@ describe('variables menu', () => {
 
       await selectComponentsForTest(editor, [
         EP.fromString(
-          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/3e2/586~~~1`,
+          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/414/586~~~1`,
         ),
       ])
 
@@ -615,10 +615,10 @@ describe('variables menu', () => {
 
       await selectComponentsForTest(editor, [
         EP.fromString(
-          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/3e2/586~~~1`,
+          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/414/586~~~1`,
         ),
         EP.fromString(
-          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/3e2/586~~~2`,
+          `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container/414/586~~~2`,
         ),
       ])
 
diff --git a/editor/src/components/navigator/navigator-conditionals.spec.browser2.tsx b/editor/src/components/navigator/navigator-conditionals.spec.browser2.tsx
index 062b6a4f08c6..ddf6f01939a3 100644
--- a/editor/src/components/navigator/navigator-conditionals.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator-conditionals.spec.browser2.tsx
@@ -1685,7 +1685,7 @@ describe('conditionals in the navigator', () => {
 
       const labelColor = (
         await screen.findByTestId(
-          `NavigatorItemTestId-regular_utopia_storyboard_uid/scene_aaa/containing_div/conditional/3b7/46a~~~1`,
+          `NavigatorItemTestId-regular_utopia_storyboard_uid/scene_aaa/containing_div/conditional/488/46a~~~1`,
         )
       ).style.color
 
@@ -1706,13 +1706,13 @@ describe('conditionals in the navigator', () => {
     regular-utopia-storyboard-uid/scene-aaa/containing-div
       regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional
         conditional-clause-utopia-storyboard-uid/scene-aaa/containing-div/conditional-true-case
-          regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~1
-              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~1/33d
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~2
-              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~2/33d
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~3
-              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/3b7/46a~~~3/33d
+          regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/488
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/488/46a~~~1
+              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/488/46a~~~1/33d
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/488/46a~~~2
+              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/488/46a~~~2/33d
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/488/46a~~~3
+              regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/488/46a~~~3/33d
         conditional-clause-utopia-storyboard-uid/scene-aaa/containing-div/conditional-false-case
           synthetic-utopia-storyboard-uid/scene-aaa/containing-div/conditional/else-div-element-else-div`)
     })
@@ -1731,10 +1731,10 @@ describe('conditionals in the navigator', () => {
     regular-utopia-storyboard-uid/scene-aaa/containing-div
       regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional
         conditional-clause-utopia-storyboard-uid/scene-aaa/containing-div/conditional-true-case
-          regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a23
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a23/33d~~~1
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a23/33d~~~2
-            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a23/33d~~~3
+          regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/c56
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/c56/33d~~~1
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/c56/33d~~~2
+            regular-utopia-storyboard-uid/scene-aaa/containing-div/conditional/c56/33d~~~3
         conditional-clause-utopia-storyboard-uid/scene-aaa/containing-div/conditional-false-case
           synthetic-utopia-storyboard-uid/scene-aaa/containing-div/conditional/a25-attribute
     regular-utopia-storyboard-uid/scene-aaa/268
diff --git a/editor/src/components/navigator/navigator.spec.browser2.tsx b/editor/src/components/navigator/navigator.spec.browser2.tsx
index dab153df374c..2e4115a5da5a 100644
--- a/editor/src/components/navigator/navigator.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator.spec.browser2.tsx
@@ -5026,7 +5026,7 @@ describe('Navigator row order', () => {
         'conditional-clause-sb/group/text-expr-cond-wrapper/text-expr-cond-false-case',
         'synthetic-sb/group/text-expr-cond-wrapper/text-expr-cond/2f3-element-2f3',
         'regular-sb/group/zero-length-map-wrapper',
-        'regular-sb/group/zero-length-map-wrapper/097',
+        'regular-sb/group/zero-length-map-wrapper/3b1',
       ],
     )
     expect(
@@ -5064,7 +5064,7 @@ describe('Navigator row order', () => {
       'conditional-clause-sb/group/text-expr-cond-wrapper/text-expr-cond-false-case',
       'synthetic-sb/group/text-expr-cond-wrapper/text-expr-cond/2f3-element-2f3',
       'regular-sb/group/zero-length-map-wrapper',
-      'regular-sb/group/zero-length-map-wrapper/097',
+      'regular-sb/group/zero-length-map-wrapper/3b1',
     ])
   })
 
diff --git a/editor/src/core/es-modules/evaluator/evaluator.ts b/editor/src/core/es-modules/evaluator/evaluator.ts
index 2ca4f2158191..1dc264c06926 100644
--- a/editor/src/core/es-modules/evaluator/evaluator.ts
+++ b/editor/src/core/es-modules/evaluator/evaluator.ts
@@ -31,7 +31,7 @@ function transformToCommonJS(
 ): { transpiledCode: string; sourceMap: RawSourceMap } {
   const plugins = [BabelTransformCommonJS, BabelExportNamespaceFrom, BabelClassProperties]
   const result = Babel.transform(moduleCode, {
-    presets: ['es2015', 'react'],
+    presets: ['es2016', 'react'],
     plugins: plugins,
     sourceType: 'module',
     sourceFileName: filePath,
diff --git a/editor/src/core/shared/element-path-tree.spec.browser2.tsx b/editor/src/core/shared/element-path-tree.spec.browser2.tsx
index a4eefda22023..369eb5eb0e63 100644
--- a/editor/src/core/shared/element-path-tree.spec.browser2.tsx
+++ b/editor/src/core/shared/element-path-tree.spec.browser2.tsx
@@ -142,8 +142,8 @@ describe('Building and ordering the element path tree for a real project', () =>
             sb/sc/app:app-root/frag/cond-1/cond-1-true
               sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-1-true-child
               sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2
-                sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/2bb
-                  sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/2bb/cond-2-child~~~1
+                sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/dd6
+                  sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/dd6/cond-2-child~~~1
       sb/sc/app/app-child
 `,
     )
@@ -163,7 +163,7 @@ describe('getChildrenOrdered', () => {
     )
 
     expect(childrenOfCond2.map((c) => EP.toString(c.elementPath))).toEqual([
-      'sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/2bb',
+      'sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/dd6',
     ])
   })
 })
diff --git a/editor/src/core/workers/parser-printer/__snapshots__/parser-printer-arbitrary-elements.spec.tsx.snap b/editor/src/core/workers/parser-printer/__snapshots__/parser-printer-arbitrary-elements.spec.tsx.snap
index dbd63778d3d5..284bedb1a703 100644
--- a/editor/src/core/workers/parser-printer/__snapshots__/parser-printer-arbitrary-elements.spec.tsx.snap
+++ b/editor/src/core/workers/parser-printer/__snapshots__/parser-printer-arbitrary-elements.spec.tsx.snap
@@ -26,6 +26,7 @@ function b(n) {
     return a(n - 1)
   }
 }",
+    "params": Array [],
     "sourceMap": Object {
       "file": "code.tsx",
       "mappings": "AAQCA,SAASC,CAATD,CAAWE,CAAXF,EAAcG;AACZC,MAAIF,CAACG,IAAIC,CAATF,EAAYD;AACVI,WAAOD,CAAPC;AACDF,GAFDD,MAEOD;AACLI,WAAOC,CAACC,CAACP,CAACG,GAAGK,CAALD,CAARF;AACDI;AAWFA;;AAEDX,SAASQ,CAATR,CAAWE,CAAXF,EAAcG;AACZC,MAAIF,CAACG,IAAIC,CAATF,EAAYD;AACVI,WAAOD,CAAPC;AACDF,GAFDD,MAEOD;AACLI,WAAON,CAACQ,CAACP,CAACG,GAAGK,CAALD,CAARF;AACDI;AACHC",
@@ -126,6 +127,13 @@ return { a: a, b: b };",
     },
   ],
   "fullHighlightBounds": Object {
+    "066": Object {
+      "endCol": 1,
+      "endLine": 32,
+      "startCol": 0,
+      "startLine": 26,
+      "uid": "066",
+    },
     "0a3": Object {
       "endCol": 28,
       "endLine": 20,
@@ -147,13 +155,6 @@ return { a: a, b: b };",
       "startLine": 20,
       "uid": "138",
     },
-    "163": Object {
-      "endCol": 1,
-      "endLine": 14,
-      "startCol": 0,
-      "startLine": 8,
-      "uid": "163",
-    },
     "207": Object {
       "endCol": 35,
       "endLine": 38,
@@ -161,13 +162,6 @@ return { a: a, b: b };",
       "startLine": 38,
       "uid": "207",
     },
-    "34d": Object {
-      "endCol": 1,
-      "endLine": 32,
-      "startCol": 0,
-      "startLine": 26,
-      "uid": "34d",
-    },
     "356": Object {
       "endCol": 64,
       "endLine": 35,
@@ -182,6 +176,13 @@ return { a: a, b: b };",
       "startLine": 21,
       "uid": "377",
     },
+    "44c": Object {
+      "endCol": 3,
+      "endLine": 23,
+      "startCol": 2,
+      "startLine": 17,
+      "uid": "44c",
+    },
     "4bd": Object {
       "endCol": 64,
       "endLine": 38,
@@ -203,12 +204,12 @@ return { a: a, b: b };",
       "startLine": 19,
       "uid": "6e3",
     },
-    "6f7": Object {
-      "endCol": 3,
-      "endLine": 23,
-      "startCol": 2,
-      "startLine": 17,
-      "uid": "6f7",
+    "773": Object {
+      "endCol": 10,
+      "endLine": 22,
+      "startCol": 6,
+      "startLine": 22,
+      "uid": "773",
     },
     "77c": Object {
       "endCol": 20,
@@ -231,13 +232,6 @@ return { a: a, b: b };",
       "startLine": 38,
       "uid": "791",
     },
-    "848": Object {
-      "endCol": 19,
-      "endLine": 22,
-      "startCol": 15,
-      "startLine": 22,
-      "uid": "848",
-    },
     "854": Object {
       "endCol": 28,
       "endLine": 35,
@@ -252,6 +246,13 @@ return { a: a, b: b };",
       "startLine": 40,
       "uid": "8b3",
     },
+    "98f": Object {
+      "endCol": 1,
+      "endLine": 14,
+      "startCol": 0,
+      "startLine": 8,
+      "uid": "98f",
+    },
     "a42": Object {
       "endCol": 44,
       "endLine": 20,
@@ -273,13 +274,6 @@ return { a: a, b: b };",
       "startLine": 20,
       "uid": "ab2",
     },
-    "ada": Object {
-      "endCol": 10,
-      "endLine": 22,
-      "startCol": 6,
-      "startLine": 22,
-      "uid": "ada",
-    },
     "app": Object {
       "endCol": 28,
       "endLine": 40,
@@ -322,14 +316,21 @@ return { a: a, b: b };",
       "startLine": 21,
       "uid": "d4f",
     },
-  },
-  "highlightBounds": Object {
-    "848": Object {
+    "f4f": Object {
       "endCol": 19,
       "endLine": 22,
       "startCol": 15,
       "startLine": 22,
-      "uid": "848",
+      "uid": "f4f",
+    },
+  },
+  "highlightBounds": Object {
+    "773": Object {
+      "endCol": 10,
+      "endLine": 22,
+      "startCol": 6,
+      "startLine": 22,
+      "uid": "773",
     },
     "aaa": Object {
       "endCol": 26,
@@ -338,13 +339,6 @@ return { a: a, b: b };",
       "startLine": 18,
       "uid": "aaa",
     },
-    "ada": Object {
-      "endCol": 10,
-      "endLine": 22,
-      "startCol": 6,
-      "startLine": 22,
-      "uid": "ada",
-    },
     "app": Object {
       "endCol": 28,
       "endLine": 40,
@@ -366,6 +360,13 @@ return { a: a, b: b };",
       "startLine": 36,
       "uid": "ccc",
     },
+    "f4f": Object {
+      "endCol": 19,
+      "endLine": 22,
+      "startCol": 15,
+      "startLine": 22,
+      "uid": "f4f",
+    },
   },
   "imports": Object {
     "react": Object {
@@ -450,6 +451,7 @@ return { a: a, b: b };",
     return b(n - 1)
   }
 }",
+      "params": Array [],
       "sourceMap": Object {
         "file": "code.tsx",
         "mappings": "AAQCA,SAASC,CAATD,CAAWE,CAAXF,EAAcG;AACZC,MAAIF,CAACG,IAAIC,CAATF,EAAYD;AACVI,WAAOD,CAAPC;AACDF,GAFDD,MAEOD;AACLI,WAAOC,CAACC,CAACP,CAACG,GAAGK,CAALD,CAARF;AACDI;AACHC",
@@ -570,6 +572,7 @@ return { a: a };",
             "elementsWithin": Object {},
             "javascript": "b(5);",
             "originalJavascript": "b(5)",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,CAAC,CAAH,CAAG,CAAFA",
@@ -647,6 +650,7 @@ export var storyboard = (
             "elementsWithin": Object {},
             "javascript": "a(5);",
             "originalJavascript": "a(5)",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAE,CAAC,CAAH,CAAG,CAAFA",
@@ -802,6 +806,7 @@ export var storyboard = (
     return a(n - 1)
   }
 }",
+      "params": Array [],
       "sourceMap": Object {
         "file": "code.tsx",
         "mappings": "AA0BCA,SAASC,CAATD,CAAWE,CAAXF,EAAcG;AACZC,MAAIF,CAACG,IAAIC,CAATF,EAAYD;AACVI,WAAOD,CAAPC;AACDF,GAFDD,MAEOD;AACLI,WAAOC,CAACC,CAACP,CAACG,GAAGK,CAALD,CAARF;AACDI;AACHC",
diff --git a/editor/src/core/workers/parser-printer/__snapshots__/parser-printer-dot-notation.spec.tsx.snap b/editor/src/core/workers/parser-printer/__snapshots__/parser-printer-dot-notation.spec.tsx.snap
index fe739dd36a15..8e7691fc75c8 100644
--- a/editor/src/core/workers/parser-printer/__snapshots__/parser-printer-dot-notation.spec.tsx.snap
+++ b/editor/src/core/workers/parser-printer/__snapshots__/parser-printer-dot-notation.spec.tsx.snap
@@ -109,6 +109,7 @@ Array [
           },
           "javascript": "<div data-uid='bbb' />;",
           "originalJavascript": "<div data-uid='bbb' />",
+          "params": Array [],
           "sourceMap": Object {
             "file": "code.tsx",
             "mappings": "OAAA;AAAA;AAAA",
@@ -220,9 +221,10 @@ export var storyboard = (props) => {
     </Storyboard>
   )
 }",
+    "params": Array [],
     "sourceMap": Object {
       "file": "code.tsx",
-      "mappings": "AAWQA,IAAIC,UAAUC,GAAGC,SAAbF,UAAaE,CAACC,KAADD,EAAWE;AACjCC,SACEC,oBAACC,UAADD;AAAYE,gBAASC;AAArBH,KACEA,oBAACI,KAADJ;AACEK,IAAAA,KAAKC,EAAER;AAAES,MAAAA,IAAIC,EAAEC,CAARX;AAAWY,MAAAA,GAAGF,EAAEC,CAAhBX;AAAmBa,MAAAA,KAAKH,EAAEI,GAA1Bd;AAA+Be,MAAAA,MAAML,EAAEI;AAAvCd,KADTE;AAEEE,gBAASC;AAFXH,KAIEA,oBAACc,GAADd;AACEE,gBAASC,YADXH;AAEEK,IAAAA,KAAKC,EAAER;AAAEiB,MAAAA,MAAMP,EAAEC,CAAVX;AAAaS,MAAAA,IAAIC,EAAEC,CAAnBX;AAAsBkB,MAAAA,KAAKR,EAAEC,CAA7BX;AAAgCY,MAAAA,GAAGF,EAAEC;AAArCX;AAFTE,IAJFA,CADFA,CADFD;AAaFkB,CAdOxB",
+      "mappings": "AAWQA,IAAIC,UAAUC,GAAIE,KAADD,IAAWE;AACjCC,SACEC,oBAACC,UAADD;AAAYE,gBAASC;AAArBH,KACEA,oBAACI,KAADJ;AACEK,IAAAA,KAAKC,EAAER;AAAES,MAAAA,IAAIC,EAAEC,CAARX;AAAWY,MAAAA,GAAGF,EAAEC,CAAhBX;AAAmBa,MAAAA,KAAKH,EAAEI,GAA1Bd;AAA+Be,MAAAA,MAAML,EAAEI;AAAvCd,KADTE;AAEEE,gBAASC;AAFXH,KAIEA,oBAACc,GAADd;AACEE,gBAASC,YADXH;AAEEK,IAAAA,KAAKC,EAAER;AAAEiB,MAAAA,MAAMP,EAAEC,CAAVX;AAAaS,MAAAA,IAAIC,EAAEC,CAAnBX;AAAsBkB,MAAAA,KAAKR,EAAEC,CAA7BX;AAAgCY,MAAAA,GAAGF,EAAEC;AAArCX;AAFTE,IAJFA,CADFA,CADFD;AAaFkB,CAdOxB",
       "names": Array [
         "var",
         "storyboard",
@@ -284,7 +286,7 @@ export var storyboard = (props) => {
       ],
       "version": 3,
     },
-    "transpiledJavascript": "var storyboard = function storyboard(props) {
+    "transpiledJavascript": "var storyboard = props => {
   return React.createElement(Storyboard, {
     \\"data-uid\\": \\"utopia-storyboard-uid\\"
   }, React.createElement(Scene, {
diff --git a/editor/src/core/workers/parser-printer/__snapshots__/parser-printer.spec.ts.snap b/editor/src/core/workers/parser-printer/__snapshots__/parser-printer.spec.ts.snap
index e221082175d5..8bf1061fc153 100644
--- a/editor/src/core/workers/parser-printer/__snapshots__/parser-printer.spec.ts.snap
+++ b/editor/src/core/workers/parser-printer/__snapshots__/parser-printer.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Babel transpile can transpile jsx fragment 1`] = `
 Object {
   "type": "RIGHT",
   "value": Object {
-    "code": "var App = function App(props) {
+    "code": "var App = props => {
   return React.createElement(React.Fragment, null, React.createElement(View, {
     style: { ...props.style,
       backgroundColor: '#FFFFFF'
@@ -17,7 +17,7 @@ Object {
 };",
     "sourceMap": Object {
       "file": "test.js",
-      "mappings": "AAcEA,IAAAA,GAAAA,GAAAA,SAAAA,GAAAA,CAAAA,KAAAA,EAAAA;AACDA,SACcC,0CACJD,oBAAAA,IAAAA;AACJA,IAAAA,KAAAA,EAAAA,EAAAA,GAAAA,KAAAA,CAAAA,KAAAA;AAAAA,MAAAA,eAAAA,EAAAA;AAAAA,KADIA;AAECA,IAAAA,MAAAA,EAAAA;AAAAA,MAAAA,YAAAA,EAAAA;AAAAA,KAFDA;AAGFE,gBAAaC;AAHXH,IADIC,CADdD;AASKI,CAVJJ",
+      "mappings": "AAcEA,IAAAA,GAAAA,GAAAA,KAAAA,IAAAA;AACDA,SACcC,0CACJD,oBAAAA,IAAAA;AACJA,IAAAA,KAAAA,EAAAA,EAAAA,GAAAA,KAAAA,CAAAA,KAAAA;AAAAA,MAAAA,eAAAA,EAAAA;AAAAA,KADIA;AAECA,IAAAA,MAAAA,EAAAA;AAAAA,MAAAA,YAAAA,EAAAA;AAAAA,KAFDA;AAGFE,gBAAaC;AAHXH,IADIC,CADdD;AASKI,CAVJJ",
       "names": Array [
         "
 ",
@@ -82,6 +82,7 @@ Object {
 function otherFn(n) {
   return n
 }",
+    "params": Array [],
     "sourceMap": Object {
       "file": "code.tsx",
       "mappings": "AAYCA,SAASC,MAATD,CAAgBE,CAAhBF,EAAmBG;AACjBC,SAAOF,CAAPE;AACDC;;AACDL,SAASM,OAATN,CAAiBE,CAAjBF,EAAoBG;AAClBC,SAAOF,CAAPE;AACFG",
@@ -150,12 +151,12 @@ return { cakeFn: cakeFn, otherFn: otherFn };",
     },
   ],
   "fullHighlightBounds": Object {
-    "067": Object {
-      "endCol": 1,
-      "endLine": 17,
-      "startCol": 0,
-      "startLine": 15,
-      "uid": "067",
+    "0b3": Object {
+      "endCol": 38,
+      "endLine": 23,
+      "startCol": 14,
+      "startLine": 23,
+      "uid": "0b3",
     },
     "6e3": Object {
       "endCol": 24,
@@ -164,13 +165,6 @@ return { cakeFn: cakeFn, otherFn: otherFn };",
       "startLine": 20,
       "uid": "6e3",
     },
-    "8a0": Object {
-      "endCol": 3,
-      "endLine": 26,
-      "startCol": 2,
-      "startLine": 19,
-      "uid": "8a0",
-    },
     "aaa": Object {
       "endCol": 11,
       "endLine": 25,
@@ -185,19 +179,26 @@ return { cakeFn: cakeFn, otherFn: otherFn };",
       "startLine": 21,
       "uid": "aab",
     },
-    "c5d": Object {
+    "b63": Object {
+      "endCol": 1,
+      "endLine": 17,
+      "startCol": 0,
+      "startLine": 15,
+      "uid": "b63",
+    },
+    "bcc": Object {
       "endCol": 1,
       "endLine": 14,
       "startCol": 0,
       "startLine": 12,
-      "uid": "c5d",
+      "uid": "bcc",
     },
-    "dda": Object {
-      "endCol": 38,
-      "endLine": 23,
-      "startCol": 14,
-      "startLine": 23,
-      "uid": "dda",
+    "f8d": Object {
+      "endCol": 3,
+      "endLine": 26,
+      "startCol": 2,
+      "startLine": 19,
+      "uid": "f8d",
     },
     "feb": Object {
       "endCol": 22,
@@ -350,6 +351,7 @@ return { cakeFn: cakeFn, otherFn: otherFn };",
       "javascript": "function cakeFn(n) {
   return n
 }",
+      "params": Array [],
       "sourceMap": Object {
         "file": "code.tsx",
         "mappings": "AAYCA,SAASC,MAATD,CAAgBE,CAAhBF,EAAmBG;AACjBC,SAAOF,CAAPE;AACFC",
@@ -420,6 +422,7 @@ return { cakeFn: cakeFn };",
       "javascript": "function otherFn(n) {
   return n
 }",
+      "params": Array [],
       "sourceMap": Object {
         "file": "code.tsx",
         "mappings": "AAeCA,SAASC,OAATD,CAAiBE,CAAjBF,EAAoBG;AAClBC,SAAOF,CAAPE;AACFC",
@@ -546,6 +549,7 @@ return { otherFn: otherFn };",
                   "elementsWithin": Object {},
                   "javascript": "cakeFn(otherFn('b') + 2)",
                   "originalJavascript": "cakeFn(otherFn('b') + 2)",
+                  "params": Array [],
                   "sourceMap": Object {
                     "file": "code.tsx",
                     "mappings": "OAuBeA,MAAOC,QAAQC,CAACC,GAADD,CAARD,GAAgBG,CAAhBH,CAAPD",
@@ -653,12 +657,12 @@ Object {
     },
   ],
   "fullHighlightBounds": Object {
-    "020": Object {
+    "169": Object {
       "endCol": 45,
       "endLine": 6,
       "startCol": 40,
       "startLine": 6,
-      "uid": "020",
+      "uid": "169",
     },
     "1e3": Object {
       "endCol": 37,
@@ -667,6 +671,20 @@ Object {
       "startLine": 6,
       "uid": "1e3",
     },
+    "327": Object {
+      "endCol": 22,
+      "endLine": 6,
+      "startCol": 17,
+      "startLine": 6,
+      "uid": "327",
+    },
+    "343": Object {
+      "endCol": 45,
+      "endLine": 4,
+      "startCol": 40,
+      "startLine": 4,
+      "uid": "343",
+    },
     "34a": Object {
       "endCol": 31,
       "endLine": 6,
@@ -681,26 +699,19 @@ Object {
       "startLine": 4,
       "uid": "4cf",
     },
-    "4f0": Object {
-      "endCol": 22,
-      "endLine": 6,
-      "startCol": 17,
-      "startLine": 6,
-      "uid": "4f0",
-    },
-    "56f": Object {
-      "endCol": 22,
+    "67f": Object {
+      "endCol": 45,
       "endLine": 4,
       "startCol": 17,
       "startLine": 4,
-      "uid": "56f",
+      "uid": "67f",
     },
-    "67f": Object {
-      "endCol": 45,
+    "6b5": Object {
+      "endCol": 22,
       "endLine": 4,
       "startCol": 17,
       "startLine": 4,
-      "uid": "67f",
+      "uid": "6b5",
     },
     "6c7": Object {
       "endCol": 45,
@@ -716,13 +727,6 @@ Object {
       "startLine": 5,
       "uid": "6e3",
     },
-    "74c": Object {
-      "endCol": 45,
-      "endLine": 4,
-      "startCol": 40,
-      "startLine": 4,
-      "uid": "74c",
-    },
     "aaa": Object {
       "endCol": 56,
       "endLine": 5,
@@ -753,33 +757,33 @@ Object {
     },
   },
   "highlightBounds": Object {
-    "020": Object {
+    "169": Object {
       "endCol": 45,
       "endLine": 6,
       "startCol": 40,
       "startLine": 6,
-      "uid": "020",
-    },
-    "4cf": Object {
-      "endCol": 37,
-      "endLine": 4,
-      "startCol": 25,
-      "startLine": 4,
-      "uid": "4cf",
+      "uid": "169",
     },
-    "4f0": Object {
+    "327": Object {
       "endCol": 22,
       "endLine": 6,
       "startCol": 17,
       "startLine": 6,
-      "uid": "4f0",
+      "uid": "327",
     },
-    "56f": Object {
-      "endCol": 22,
+    "343": Object {
+      "endCol": 45,
       "endLine": 4,
-      "startCol": 17,
+      "startCol": 40,
+      "startLine": 4,
+      "uid": "343",
+    },
+    "4cf": Object {
+      "endCol": 37,
+      "endLine": 4,
+      "startCol": 25,
       "startLine": 4,
-      "uid": "56f",
+      "uid": "4cf",
     },
     "67f": Object {
       "endCol": 45,
@@ -788,6 +792,13 @@ Object {
       "startLine": 4,
       "uid": "67f",
     },
+    "6b5": Object {
+      "endCol": 22,
+      "endLine": 4,
+      "startCol": 17,
+      "startLine": 4,
+      "uid": "6b5",
+    },
     "6c7": Object {
       "endCol": 45,
       "endLine": 6,
@@ -795,13 +806,6 @@ Object {
       "startLine": 6,
       "uid": "6c7",
     },
-    "74c": Object {
-      "endCol": 45,
-      "endLine": 4,
-      "startCol": 40,
-      "startLine": 4,
-      "uid": "74c",
-    },
     "aaa": Object {
       "endCol": 56,
       "endLine": 5,
@@ -907,6 +911,7 @@ Object {
           "elementsWithin": Object {},
           "javascript": "n > 0",
           "originalJavascript": "n > 0",
+          "params": Array [],
           "sourceMap": Object {
             "file": "code.tsx",
             "mappings": "OAImBA,CAACC,GAAEC,CAAJC",
@@ -949,6 +954,7 @@ const b = (n) => n > 0 ? <div>n</div> : a(10)
           "elementsWithin": Object {},
           "javascript": "b(10)",
           "originalJavascript": "b(10)",
+          "params": Array [],
           "sourceMap": Object {
             "file": "code.tsx",
             "mappings": "OAI0CA,CAACC,IAAFC",
@@ -1120,6 +1126,7 @@ const b = (n) => n > 0 ? <div>n</div> : a(10)
           "elementsWithin": Object {},
           "javascript": "n > 0",
           "originalJavascript": "n > 0",
+          "params": Array [],
           "sourceMap": Object {
             "file": "code.tsx",
             "mappings": "OAMmBA,CAACC,GAAEC,CAAJC",
@@ -1162,6 +1169,7 @@ const b = (n) => n > 0 ? <div>n</div> : a(10)
           "elementsWithin": Object {},
           "javascript": "a(10)",
           "originalJavascript": "a(10)",
+          "params": Array [],
           "sourceMap": Object {
             "file": "code.tsx",
             "mappings": "OAM0CA,CAACC,IAAFC",
@@ -1250,9 +1258,10 @@ Object {
     ],
     "elementsWithin": Object {},
     "javascript": "const a = \\"cake\\"",
+    "params": Array [],
     "sourceMap": Object {
       "file": "code.tsx",
-      "mappings": "AAWCA,IAAMC,CAACC,GAAGC,MAAVH",
+      "mappings": "AAWCA,MAAMC,CAACC,GAAGC,MAAVH",
       "names": Array [
         "const",
         "a",
@@ -1282,7 +1291,7 @@ export var App = (props) => <View data-uid='bbb'>
       ],
       "version": 3,
     },
-    "transpiledJavascript": "var a = \\"cake\\";
+    "transpiledJavascript": "const a = \\"cake\\";
 return { a: a };",
     "type": "ARBITRARY_JS_BLOCK",
     "uid": "",
@@ -1294,12 +1303,12 @@ return { a: a };",
     },
   ],
   "fullHighlightBounds": Object {
-    "24a": Object {
+    "23f": Object {
       "endCol": 9,
       "endLine": 13,
       "startCol": 3,
       "startLine": 13,
-      "uid": "24a",
+      "uid": "23f",
     },
     "854": Object {
       "endCol": 48,
@@ -1308,12 +1317,12 @@ return { a: a };",
       "startLine": 12,
       "uid": "854",
     },
-    "a5b": Object {
+    "86a": Object {
       "endCol": 16,
       "endLine": 11,
       "startCol": 0,
       "startLine": 11,
-      "uid": "a5b",
+      "uid": "86a",
     },
     "bbb": Object {
       "endCol": 7,
@@ -1324,12 +1333,12 @@ return { a: a };",
     },
   },
   "highlightBounds": Object {
-    "24a": Object {
+    "23f": Object {
       "endCol": 9,
       "endLine": 13,
       "startCol": 3,
       "startLine": 13,
-      "uid": "24a",
+      "uid": "23f",
     },
     "bbb": Object {
       "endCol": 7,
@@ -1439,9 +1448,10 @@ return { a: a };",
       ],
       "elementsWithin": Object {},
       "javascript": "const a = \\"cake\\"",
+      "params": Array [],
       "sourceMap": Object {
         "file": "code.tsx",
-        "mappings": "AAWCA,IAAMC,CAACC,GAAGC,MAAVH",
+        "mappings": "AAWCA,MAAMC,CAACC,GAAGC,MAAVH",
         "names": Array [
           "const",
           "a",
@@ -1471,7 +1481,7 @@ export var App = (props) => <View data-uid='bbb'>
         ],
         "version": 3,
       },
-      "transpiledJavascript": "var a = \\"cake\\";
+      "transpiledJavascript": "const a = \\"cake\\";
 return { a: a };",
       "type": "ARBITRARY_JS_BLOCK",
       "uid": "",
@@ -1514,6 +1524,7 @@ return { a: a };",
             "elementsWithin": Object {},
             "javascript": "({ a: a });",
             "originalJavascript": "{a: a}",
+            "params": Array [],
             "sourceMap": Object {
               "file": "code.tsx",
               "mappings": "OAAA,CAAC;AAAE,KAAH;AAAC,CAAD",
diff --git a/editor/src/core/workers/parser-printer/parser-printer-arbitrary-elements.spec.tsx b/editor/src/core/workers/parser-printer/parser-printer-arbitrary-elements.spec.tsx
index 8f561bc8846d..2ca989cfbf8b 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-arbitrary-elements.spec.tsx
+++ b/editor/src/core/workers/parser-printer/parser-printer-arbitrary-elements.spec.tsx
@@ -302,14 +302,12 @@ export var whatever = (props) => {
         jsxMapExpression(
           `arr.map(({ n }) => <View data-uid='aab' thing={n} /> )`,
           `arr.map(({ n }) => <View data-uid='aab' thing={n} />);`,
-          `return arr.map(function (_ref) {
-  var n = _ref.n;
-  return utopiaCanvasJSXLookup("aab", {
-    _ref: _ref,
-    n: n,
-    callerThis: this
-  });
-});`,
+          `return arr.map(({
+  n
+}) => utopiaCanvasJSXLookup("aab", {
+  n: n,
+  callerThis: this
+}));`,
           ['arr', 'React', 'View', 'utopiaCanvasJSXLookup'],
           expect.objectContaining({
             sources: ['code.tsx'],
@@ -346,7 +344,7 @@ export var whatever = (props) => {
       ],
     )
     const jsCode = `const arr = [ { n: 1 } ]`
-    const transpiledJsCode = `var arr = [{
+    const transpiledJsCode = `const arr = [{
   n: 1
 }];
 return { arr: arr };`
@@ -411,14 +409,14 @@ export var whatever = (props) => {
         jsxMapExpression(
           `arr.map(({ a: { n } }) => <View data-uid='aab' thing={n} /> )`,
           `arr.map(({ a: { n } }) => <View data-uid='aab' thing={n} />);`,
-          `return arr.map(function (_ref) {
-  var n = _ref.a.n;
-  return utopiaCanvasJSXLookup("aab", {
-    _ref: _ref,
-    n: n,
-    callerThis: this
-  });
-});`,
+          `return arr.map(({
+  a: {
+    n
+  }
+}) => utopiaCanvasJSXLookup("aab", {
+  n: n,
+  callerThis: this
+}));`,
           ['arr', 'React', 'View', 'utopiaCanvasJSXLookup'],
           expect.objectContaining({
             sources: ['code.tsx'],
@@ -455,7 +453,7 @@ export var whatever = (props) => {
       ],
     )
     const jsCode = `const arr = [ { a: { n: 1 } } ]`
-    const transpiledJsCode = `var arr = [{
+    const transpiledJsCode = `const arr = [{
   a: {
     n: 1
   }
@@ -514,16 +512,10 @@ export var whatever = (props) => {
     const actualResult = clearParseResultUniqueIDsAndEmptyBlocks(testParseCode(code))
     const originalMapJsCode = `arr.map(([ n ]) => <View data-uid='aab' thing={n} /> )`
     const mapJsCode = `arr.map(([n]) => <View data-uid='aab' thing={n} />);`
-    const transpiledMapJsCode = `return arr.map(function (_ref) {
-  var _ref2 = babelHelpers.slicedToArray(_ref, 1),
-      n = _ref2[0];
-
-  return utopiaCanvasJSXLookup(\"aab\", {
-    _ref: _ref,
-    n: n,
-    callerThis: this
-  });
-});`
+    const transpiledMapJsCode = `return arr.map(([n]) => utopiaCanvasJSXLookup(\"aab\", {
+  n: n,
+  callerThis: this
+}));`
     const view = jsxElement(
       'View',
       'aaa',
@@ -571,7 +563,7 @@ export var whatever = (props) => {
       ],
     )
     const jsCode = `const arr = [ [ 1 ] ]`
-    const transpiledJsCode = `var arr = [[1]];
+    const transpiledJsCode = `const arr = [[1]];
 return { arr: arr };`
     const arbitraryBlock = arbitraryJSBlock(
       [],
@@ -632,12 +624,10 @@ export var whatever = (props) => {
         jsxMapExpression(
           `[1].map((n) => <div data-uid='aab'><div data-uid='aac'>{n}</div></div> )`,
           `[1].map((n) => <div data-uid='aab'><div data-uid='aac'>{n}</div></div>);`,
-          `return [1].map(function (n) {
-  return utopiaCanvasJSXLookup("aab", {
-    n: n,
-    callerThis: this
-  });
-});`,
+          `return [1].map(n => utopiaCanvasJSXLookup("aab", {
+  n: n,
+  callerThis: this
+}));`,
           ['React', 'utopiaCanvasJSXLookup'],
           expect.objectContaining({
             sources: ['code.tsx'],
@@ -840,12 +830,10 @@ export var whatever = (props) => {
         jsxMapExpression(
           `[1].map((n) => <div data-uid='aab'><div data-uid='aac'>{n}</div></div> )`,
           `[1].map((n) => <div data-uid='aab'><div data-uid='aac'>{n}</div></div>);`,
-          `return [1].map(function (n) {
-  return utopiaCanvasJSXLookup("aab", {
-    n: n,
-    callerThis: this
-  });
-});`,
+          `return [1].map(n => utopiaCanvasJSXLookup("aab", {
+  n: n,
+  callerThis: this
+}));`,
           ['React', 'utopiaCanvasJSXLookup'],
           expect.objectContaining({
             sources: ['code.tsx'],
@@ -1160,40 +1148,21 @@ export var storyboard = (
             "219",
             "971",
           ],
-          "js": "function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = babelHelpers.getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = babelHelpers.getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return babelHelpers.possibleConstructorReturn(this, result); }; }
-
-        function _isNativeReflectConstruct() { if (typeof Reflect === \\"undefined\\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \\"function\\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-        function getPicker() {
-          var Picker = function (_React$Component) {
-            \\"use strict\\";
-
-            babelHelpers.inherits(Picker, _React$Component);
-
-            var _super = _createSuper(Picker);
+          "js": "function getPicker() {
+          class Picker extends React.Component {
+            renderPicker(locale) {
+              return React.createElement(RenderPropsFunctionChild, null, size => {
+                return React.createElement(\\"div\\", {
+                  id: \\"nasty-div\\"
+                }, locale, \\" \\", size);
+              });
+            }
 
-            function Picker() {
-              babelHelpers.classCallCheck(this, Picker);
-              return _super.apply(this, arguments);
+            render() {
+              return React.createElement(RenderPropsFunctionChild, null, this.renderPicker);
             }
 
-            babelHelpers.createClass(Picker, [{
-              key: \\"renderPicker\\",
-              value: function renderPicker(locale) {
-                return React.createElement(RenderPropsFunctionChild, null, function (size) {
-                  return React.createElement(\\"div\\", {
-                    id: \\"nasty-div\\"
-                  }, locale, \\" \\", size);
-                });
-              }
-            }, {
-              key: \\"render\\",
-              value: function render() {
-                return React.createElement(RenderPropsFunctionChild, null, this.renderPicker);
-              }
-            }]);
-            return Picker;
-          }(React.Component);
+          }
 
           return Picker;
         }
@@ -1208,66 +1177,33 @@ export var storyboard = (
             "d1b",
             "064",
           ],
-          "js": "function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = babelHelpers.getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = babelHelpers.getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return babelHelpers.possibleConstructorReturn(this, result); }; }
-
-        function _isNativeReflectConstruct() { if (typeof Reflect === \\"undefined\\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \\"function\\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-        var RenderPropsFunctionChild = function (_React$Component) {
-          \\"use strict\\";
-
-          babelHelpers.inherits(RenderPropsFunctionChild, _React$Component);
-
-          var _super = _createSuper(RenderPropsFunctionChild);
-
-          function RenderPropsFunctionChild() {
-            babelHelpers.classCallCheck(this, RenderPropsFunctionChild);
-            return _super.apply(this, arguments);
+          "js": "class RenderPropsFunctionChild extends React.Component {
+          render() {
+            return this.props.children('huha');
           }
 
-          babelHelpers.createClass(RenderPropsFunctionChild, [{
-            key: \\"render\\",
-            value: function render() {
-              return this.props.children('huha');
-            }
-          }]);
-          return RenderPropsFunctionChild;
-        }(React.Component);
+        }
 
         function getPicker() {
-          var Picker = function (_React$Component2) {
-            \\"use strict\\";
-
-            babelHelpers.inherits(Picker, _React$Component2);
-
-            var _super2 = _createSuper(Picker);
+          class Picker extends React.Component {
+            renderPicker(locale) {
+              return React.createElement(RenderPropsFunctionChild, null, size => {
+                return React.createElement(\\"div\\", {
+                  id: \\"nasty-div\\"
+                }, locale, \\" \\", size);
+              });
+            }
 
-            function Picker() {
-              babelHelpers.classCallCheck(this, Picker);
-              return _super2.apply(this, arguments);
+            render() {
+              return React.createElement(RenderPropsFunctionChild, null, this.renderPicker);
             }
 
-            babelHelpers.createClass(Picker, [{
-              key: \\"renderPicker\\",
-              value: function renderPicker(locale) {
-                return React.createElement(RenderPropsFunctionChild, null, function (size) {
-                  return React.createElement(\\"div\\", {
-                    id: \\"nasty-div\\"
-                  }, locale, \\" \\", size);
-                });
-              }
-            }, {
-              key: \\"render\\",
-              value: function render() {
-                return React.createElement(RenderPropsFunctionChild, null, this.renderPicker);
-              }
-            }]);
-            return Picker;
-          }(React.Component);
+          }
 
           return Picker;
         }
 
-        var Thing = getPicker();
+        const Thing = getPicker();
         return { RenderPropsFunctionChild: RenderPropsFunctionChild, getPicker: getPicker, Thing: Thing };",
         }
       `)
diff --git a/editor/src/core/workers/parser-printer/parser-printer-bugs.spec.ts b/editor/src/core/workers/parser-printer/parser-printer-bugs.spec.ts
index b7219907c7b4..0cf381a56d2f 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-bugs.spec.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer-bugs.spec.ts
@@ -47,11 +47,11 @@ export var App = props => {
         UNPARSED_CODE
         UTOPIA_JSX_COMPONENT - App
           JSX_ELEMENT - div - aaa
-            JSX_MAP_EXPRESSION - 79a
+            JSX_MAP_EXPRESSION - b13
               JSX_ELEMENT - div - bbb
-                ATTRIBUTE_OTHER_JAVASCRIPT - b6e
+                ATTRIBUTE_OTHER_JAVASCRIPT - 563
                 JSX_TEXT_BLOCK - d01
-                ATTRIBUTE_OTHER_JAVASCRIPT - 481"
+                ATTRIBUTE_OTHER_JAVASCRIPT - df5"
       `)
 
       const aaaElement = findJSXElementAtStaticPath(
@@ -184,7 +184,7 @@ export var App = props => {
       UNPARSED_CODE
       UTOPIA_JSX_COMPONENT - Test
         JSX_ELEMENT - div - mapper-parent
-          JSX_MAP_EXPRESSION - 919
+          JSX_MAP_EXPRESSION - 95a
             JSX_ELEMENT - Card - card"
     `)
     expect(elementsStructure((testParseCode(spreadCode) as any).topLevelElements))
@@ -196,7 +196,7 @@ export var App = props => {
       UNPARSED_CODE
       UTOPIA_JSX_COMPONENT - Test
         JSX_ELEMENT - div - mapper-parent
-          JSX_MAP_EXPRESSION - c34
+          JSX_MAP_EXPRESSION - 493
             JSX_ELEMENT - Card - card"
     `)
   })
diff --git a/editor/src/core/workers/parser-printer/parser-printer-transpiling.ts b/editor/src/core/workers/parser-printer/parser-printer-transpiling.ts
index a29d4269ff7a..3749f1314a30 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-transpiling.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer-transpiling.ts
@@ -45,8 +45,10 @@ function getIdentifiersFromFunctionParam(
       if (BabelTypes.isIdentifier(property)) {
         addIdentifier(identifiers, property)
       } else if (BabelTypes.isObjectProperty(property)) {
-        if (BabelTypes.isIdentifier(property.key)) {
-          identifiers.push(...getIdentifiersFromFunctionParam(property.key))
+        if (BabelTypes.isIdentifier(property.value)) {
+          addIdentifier(identifiers, property.value)
+        } else if (BabelTypes.isObjectPattern(property.value)) {
+          identifiers.push(...fromObjectPattern(property.value))
         }
       }
     }
@@ -495,10 +497,10 @@ export function transpileJavascriptFromCode(
       mapToUse = wrappedInAnonFunction.sourceMap
     }
 
-    let plugins: Array<any> =
-      applySteganography === 'apply-steganography'
-        ? [applySteganographyPlugin(sourceFileName, mapToUse, sourceFileText.split('\n'))]
-        : []
+    let plugins: Array<any> = []
+    if (applySteganography === 'apply-steganography') {
+      plugins.push(applySteganographyPlugin(sourceFileName, mapToUse, sourceFileText.split('\n')))
+    }
     if (Object.keys(elementsWithin).length > 0) {
       plugins.push(babelRewriteJSExpressionCode(elementsWithin, true))
     }
@@ -509,7 +511,7 @@ export function transpileJavascriptFromCode(
     plugins.push('proposal-class-properties')
     plugins.push(ReactTransformPlugin)
     const transformResult = Babel.transform(codeToUse, {
-      presets: ['es2015', 'react'],
+      presets: ['es2016', 'react'],
       plugins: plugins,
       sourceType: 'script',
       sourceMaps: true,
diff --git a/editor/src/core/workers/parser-printer/parser-printer.spec.ts b/editor/src/core/workers/parser-printer/parser-printer.spec.ts
index 207f26289565..41511dd35f42 100644
--- a/editor/src/core/workers/parser-printer/parser-printer.spec.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer.spec.ts
@@ -1374,9 +1374,9 @@ export var whatever = (props) => <View data-uid='aaa'>
     const jsCode = `export default (n) => {
   return 100 + n
 }`
-    const transpiledJsCode = `(function (n) {
+    const transpiledJsCode = `n => {
   return 100 + n;
-});
+};
 return {  };`
     const arbitraryBlock = arbitraryJSBlock(
       [],
@@ -1549,8 +1549,8 @@ export var whatever = (props) => {
     const view = jsxElement('View', 'aaa', viewAttributes, [])
     const jsCode = `const bgs = ['black', 'grey']
   const bg = bgs[0]`
-    const transpiledJsCode = `var bgs = ['black', 'grey'];
-var bg = bgs[0];
+    const transpiledJsCode = `const bgs = ['black', 'grey'];
+const bg = bgs[0];
 return { bgs: bgs, bg: bg };`
     const arbitraryBlock = arbitraryJSBlock(
       [],
@@ -1632,7 +1632,7 @@ export var whatever = (props) => {
     })
     const view = jsxElement('View', 'aaa', viewAttributes, [])
     const jsCode = `const greys = ['lightGrey', 'grey']`
-    const transpiledJsCode = `var greys = ['lightGrey', 'grey'];
+    const transpiledJsCode = `const greys = ['lightGrey', 'grey'];
 return { greys: greys };`
     const arbitraryBlock = arbitraryJSBlock(
       [],
@@ -1707,8 +1707,8 @@ export var whatever = (props) => {
     const view = jsxElement('View', 'aaa', viewAttributes, [])
     const jsCode = `const a = 10
   const b = 20`
-    const transpiledJsCode = `var a = 10;
-var b = 20;
+    const transpiledJsCode = `const a = 10;
+const b = 20;
 return { a: a, b: b };`
     const arbitraryBlock = arbitraryJSBlock(
       [],
@@ -1785,9 +1785,9 @@ export var whatever = (props) => {
     const jsCode = `const a = true
   const b = 10
   const c = 20`
-    const transpiledJsCode = `var a = true;
-var b = 10;
-var c = 20;
+    const transpiledJsCode = `const a = true;
+const b = 10;
+const c = 20;
 return { a: a, b: b, c: c };`
     const arbitraryBlock = arbitraryJSBlock(
       [],
@@ -1874,7 +1874,7 @@ export var whatever = (props) => {
     })
     const view = jsxElement('View', 'aaa', viewAttributes, [])
     const jsCode = `let a = 10`
-    const transpiledJsCode = `var a = 10;
+    const transpiledJsCode = `let a = 10;
 return { a: a };`
     const arbitraryBlock = arbitraryJSBlock(
       [],
@@ -1949,8 +1949,8 @@ export var whatever = (props) => {
     const view = jsxElement('View', 'aaa', viewAttributes, [])
     const jsCode = `const a = 10
   const b = { a: a }`
-    const transpiledJsCode = `var a = 10;
-var b = {
+    const transpiledJsCode = `const a = 10;
+const b = {
   a: a
 };
 return { a: a, b: b };`
@@ -2093,7 +2093,7 @@ export var whatever = (props) => {
     })
     const view = jsxElement('View', 'aaa', viewAttributes, [])
     const jsCode = `const bg = { backgroundColor: 'grey' }`
-    const transpiledJsCode = `var bg = {
+    const transpiledJsCode = `const bg = {
   backgroundColor: 'grey'
 };
 return { bg: bg };`
@@ -2163,7 +2163,7 @@ export var whatever = (props) => <View data-uid='aaa'>
         [],
         '`Count ${count}`',
         '`Count ${count}`',
-        'return "Count ".concat(count);',
+        'return `Count ${count}`;',
         ['count'],
         expect.objectContaining({
           sources: ['code.tsx'],
@@ -2532,7 +2532,7 @@ export var whatever = (props) => <View data-uid='aaa'>
     "hello"
   );
 };`
-    const transpiledJsCode = `var MyComp = function MyComp(props) {
+    const transpiledJsCode = `var MyComp = props => {
   return React.createElement("div", {
     style: {
       position: "absolute",
@@ -3908,12 +3908,10 @@ export var App = props => {
           jsxMapExpression(
             `[1,2,3].map(x=> <View data-uid='abc' />)`,
             `[1, 2, 3].map((x) => <View data-uid='abc' />);`,
-            `return [1, 2, 3].map(function (x) {
-  return utopiaCanvasJSXLookup("abc", {
-    x: x,
-    callerThis: this
-  });
-});`,
+            `return [1, 2, 3].map(x => utopiaCanvasJSXLookup("abc", {
+  x: x,
+  callerThis: this
+}));`,
             ['React', 'View', 'utopiaCanvasJSXLookup'],
             expect.objectContaining({
               sources: ['code.tsx'],
@@ -4043,12 +4041,10 @@ export var App = props => {
       ))`,
             `[1, 2, 3].map((n) =>
 <div data-uid="abc" />);`,
-            `return [1, 2, 3].map(function (n) {
-  return utopiaCanvasJSXLookup("abc", {
-    n: n,
-    callerThis: this
-  });
-});`,
+            `return [1, 2, 3].map(n => utopiaCanvasJSXLookup("abc", {
+  n: n,
+  callerThis: this
+}));`,
             ['React', 'utopiaCanvasJSXLookup'],
             expect.objectContaining({
               sources: ['code.tsx'],
@@ -4108,12 +4104,10 @@ export var App = props => {
     ))`,
             `[1, 2, 3].map((n) =>
 <div data-uid='abc' />);`,
-            `return [1, 2, 3].map(function (n) {
-  return utopiaCanvasJSXLookup("abc", {
-    n: n,
-    callerThis: this
-  });
-});`,
+            `return [1, 2, 3].map(n => utopiaCanvasJSXLookup("abc", {
+  n: n,
+  callerThis: this
+}));`,
             ['React', 'utopiaCanvasJSXLookup'],
             expect.objectContaining({
               sources: ['code.tsx'],
@@ -4337,15 +4331,13 @@ export var App = props => {
         `const a = 20;
   const b = 40;
   const MyCustomComponent = props => <View data-uid="abc">{props.children}</View>;`,
-        `var a = 20;
-var b = 40;
+        `const a = 20;
+const b = 40;
 
-var MyCustomComponent = function MyCustomComponent(props) {
-  return ${JSX_CANVAS_LOOKUP_FUNCTION_NAME}("abc", {
-    props: props,
-    callerThis: this
-  });
-};
+const MyCustomComponent = props => ${JSX_CANVAS_LOOKUP_FUNCTION_NAME}("abc", {
+  props: props,
+  callerThis: this
+});
 return { a: a, b: b, MyCustomComponent: MyCustomComponent };`,
         ['a', 'b', 'MyCustomComponent'],
         ['React', 'View', JSX_CANVAS_LOOKUP_FUNCTION_NAME],
@@ -4557,7 +4549,7 @@ for (var n = 0; n != -1; n++) {
     throw new RangeError('${InfiniteLoopError}');
   }
 
-  var n2 = n * 2;
+  const n2 = n * 2;
 }
 
 while (true) {
@@ -4565,7 +4557,7 @@ while (true) {
     throw new RangeError('${InfiniteLoopError}');
   }
 
-  var a = 1;
+  const a = 1;
 }
 return {  };`
     const arbitraryBlock = arbitraryJSBlock(
@@ -4629,14 +4621,14 @@ export var whatever = props => {
     result.push(<div style={{ left: n, top: n2 }} data-uid='bbb' />)
   }`
     const arbitraryBlockTranspiledCode = `var _loopIt = 0;
-var result = [];
+let result = [];
 
 for (var n = 0; n < 5; n++) {
   if (_loopIt++ > ${InfiniteLoopMaxIterations}) {
     throw new RangeError('${InfiniteLoopError}');
   }
 
-  var n2 = n * 2;
+  const n2 = n * 2;
   result.push(${JSX_CANVAS_LOOKUP_FUNCTION_NAME}("bbb", {
     n: n,
     n2: n2,
@@ -4724,7 +4716,7 @@ export var whatever = props => {
     const arbitraryBlockCode = `[1, 2, 3].map((n) => {
   return <div style={{ left: n * 30, top: n * 30 }} data-uid='bbb' />;
 });`
-    const arbitraryBlockTranspiledCode = `return [1, 2, 3].map(function (n) {
+    const arbitraryBlockTranspiledCode = `return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup("bbb", {
     n: n,
     callerThis: this
@@ -4839,7 +4831,7 @@ export var whatever = props => {
     const arbitraryBlockCode = `[1, 2, 3].map((n) => {
   return <div style={{ left: n * a, top: n * a }} data-uid='bbb' />;
 });`
-    const arbitraryBlockTranspiledCode = `return [1, 2, 3].map(function (n) {
+    const arbitraryBlockTranspiledCode = `return [1, 2, 3].map(n => {
   return utopiaCanvasJSXLookup("bbb", {
     n: n,
     a: a,
@@ -4909,7 +4901,7 @@ export var whatever = props => {
     const topLevelArbitraryBlock = arbitraryJSBlock(
       [],
       `const a = 30`,
-      `var a = 30;
+      `const a = 30;
 return { a: a };`,
       ['a'],
       [JSX_CANVAS_LOOKUP_FUNCTION_NAME],
diff --git a/editor/src/core/workers/parser-printer/uid-fix.spec.ts b/editor/src/core/workers/parser-printer/uid-fix.spec.ts
index dc56cacd3bf8..8e9ccf0486c1 100644
--- a/editor/src/core/workers/parser-printer/uid-fix.spec.ts
+++ b/editor/src/core/workers/parser-printer/uid-fix.spec.ts
@@ -166,7 +166,7 @@ describe('fixParseSuccessUIDs', () => {
     expect(getUidTree(parsedFile)).toEqual(getUidTree(modifiedBaseFile))
     expect(getUidTree(parsedFile)).toMatchInlineSnapshot(`
       "4edsuffix
-        865
+        2d8
       434suffix
         112
       storyboardsuffix
@@ -221,7 +221,7 @@ describe('fixParseSuccessUIDs', () => {
     expect(getUidTree(newFile)).toEqual(getUidTree(baseFile))
     expect(getUidTree(newFile)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       434
         112
       storyboard
@@ -248,7 +248,7 @@ describe('fixParseSuccessUIDs', () => {
     expect(getUidTree(newFileFixed)).toEqual(getUidTree(newFile))
     expect(getUidTree(newFileFixed)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       e86
         c60
       434
@@ -277,7 +277,7 @@ describe('fixParseSuccessUIDs', () => {
     expect(getUidTree(fileWithFragmentUpdated)).toEqual(getUidTree(fileWithFragment))
     expect(getUidTree(fileWithFragmentUpdated)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       292
         434
         112
@@ -298,7 +298,7 @@ describe('fixParseSuccessUIDs', () => {
     expect(getUidTree(newFile)).toEqual(getUidTree(baseFile))
     expect(getUidTree(newFile)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       434
         112
       storyboard
@@ -317,7 +317,7 @@ describe('fixParseSuccessUIDs', () => {
     )
     expect(getUidTree(newFile)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       434
         c60
         112
@@ -337,7 +337,7 @@ describe('fixParseSuccessUIDs', () => {
     )
     expect(getUidTree(newFile)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       434
         112
         dda
@@ -365,7 +365,7 @@ describe('fixParseSuccessUIDs', () => {
     )
     expect(getUidTree(fourViews)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       434
         a6c
         112
@@ -448,7 +448,7 @@ describe('fixParseSuccessUIDs', () => {
     )
     expect(getUidTree(beforeReOrder)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       434
         c60
         112
@@ -458,7 +458,7 @@ describe('fixParseSuccessUIDs', () => {
     `)
     expect(getUidTree(afterReOrder)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       434
         112
         c60
@@ -514,7 +514,7 @@ describe('fixParseSuccessUIDs', () => {
     )
     expect(getUidTree(firstResult)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       434
         c85
           f9b
@@ -531,7 +531,7 @@ describe('fixParseSuccessUIDs', () => {
     )
     expect(getUidTree(secondResult)).toMatchInlineSnapshot(`
       "4ed
-        865
+        2d8
       434
         c85
           aab
diff --git a/editor/src/core/workers/ts/__snapshots__/ts-worker.spec.ts.snap b/editor/src/core/workers/ts/__snapshots__/ts-worker.spec.ts.snap
index aacda9b6df90..fa46d61e52e1 100644
--- a/editor/src/core/workers/ts/__snapshots__/ts-worker.spec.ts.snap
+++ b/editor/src/core/workers/ts/__snapshots__/ts-worker.spec.ts.snap
@@ -7,7 +7,7 @@ Object {
       "errors": Array [],
       "sourceMap": Object {
         "file": "app.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAUA,IAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAsCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CADkB;AAS1B,EAAA,eAAe,EAAE;AATS,CAAjB;;AAYJ,IAAI,GAAG,GAAG,SAAN,GAAM,CAAC,KAAD,EAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAUA,MAAA,OAAA,GAAA,OAAA,CAAA,OAAA,CAAA;;AAsCW,OAAA,CAAA,cAAA,GAAiB;AAC1B,EAAA,MAAM,EAAE,CACN;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,IAAI,EAAE,CAArB;AAAwB,MAAA,KAAK,EAAE,GAA/B;AAAoC,MAAA,GAAG,EAAE;AAAzC,KAFT;AAGE,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAE,QAAA,GAAG,EAAE,CAAP;AAAU,QAAA,IAAI,EAAE,CAAhB;AAAmB,QAAA,MAAM,EAAE,CAA3B;AAA8B,QAAA,KAAK,EAAE;AAArC;AAAV,KAHT;AAIE,IAAA,SAAS,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB;AAJb,GADM,CADkB;AAS1B,EAAA,eAAe,EAAE;AATS,CAAjB;;AAYJ,IAAI,GAAG,GAAI,KAAD,IAAU;AACzB,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAX;AAAkB,MAAA,eAAe,EAAE,OAAA,CAAA,UAAA,CAAW,KAAX,CAAiB;AAApD,KADJ;AAEH,IAAA,MAAM,EAAE;AAAE,MAAA,YAAY,EAAE;AAAhB,KAFL;AAEkC,gBAC3B;AAHP,GAAL,CADF;AAOD,CARM;;AAAI,OAAA,CAAA,GAAA,GAAG,GAAH,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -99,7 +99,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -123,9 +123,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -137,13 +135,13 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.App = exports.canvasMetadata = void 0;
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\");
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\");
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var utopia_api_1 = require(\\"utopia-api\\");
+const utopia_api_1 = require(\\"utopia-api\\");
 
-var uuiui_1 = require(\\"uuiui\\");
+const uuiui_1 = require(\\"uuiui\\");
 
 exports.canvasMetadata = {
   scenes: [{
@@ -169,7 +167,7 @@ exports.canvasMetadata = {
   elementMetadata: {}
 };
 
-var App = function App(props) {
+var App = props => {
   return (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
     style: { ...props.style,
       backgroundColor: uuiui_1.colorTheme.white.value
@@ -187,7 +185,7 @@ exports.App = App; //# sourceMappingURL=app.js.map",
       "errors": Array [],
       "sourceMap": Object {
         "file": "components.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAA;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAEA,OAAA,CAAA,OAAA,GAAe,UAAC,KAAD;AAAA,SACb,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AAAC,IAAA,MAAM,EAAE,KAAK,CAAC,MAAf;AAAuB,IAAA,KAAK,EAAE,KAAK,CAAC,KAApC;AAA2C,IAAA,WAAW,EAAE,KAAK,CAAC,WAA9D;AAAyE,IAAA,QAAA,EAC5E,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,MAAA,KAAK,EAAE;AAAE,QAAA,QAAQ,EAAE,EAAZ;AAAgB,QAAA,SAAS,EAAE;AAA3B,OADJ;AAEH,MAAA,IAAI,EAAE,KAAK,CAAC,IAFT;AAGH,MAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,CADA;AAEN,QAAA,GAAG,EAAE,EAFC;AAGN,QAAA,KAAK,EAAE,MAHD;AAIN,QAAA,MAAM,EAAE;AAJF,OAHL;AASH,MAAA,UAAU,EAAE;AATT,KAAL;AADG,GAAL,CADa;AAAA,CAAf;;AAgBa,OAAA,CAAA,KAAA,GAAQ,cAAR;;AAEN,IAAM,kBAAkB,GAAG,SAArB,kBAAqB,CAAC,KAAD,EAAU;AAC1C,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE,EACL,GAAG,KAAK,CAAC,KADJ;AAEL,MAAA,eAAe,EAAE,KAAK,CAAC,IAAN,GAAa,SAAb,GAAyB,aAFrC;AAGL,MAAA,UAAU,EAAE;AAHP,KADT;AAKG,IAAA,QAAA,EAEA,CAAC,KAAK,CAAC,IAAN,GAAa,GAAd,EAAmB,MAAnB,CAA0B,KAAK,CAAC,GAAhC;AAPH,GAAA,CADF;AAWD,CAZM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAcb,OAAA,CAAA,kBAAA,CAAmB,gBAAnB,GAAsC;AACpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,QADF;AAEJ,IAAA,KAAK,EAAE,OAFH;AAGJ,IAAA,YAAY,EAAE;AAHV,GAD8B;AAMpC,EAAA,GAAG,EAAE;AACH,IAAA,IAAI,EAAE,QADH;AAEH,IAAA,KAAK,EAAE,QAFJ;AAGH,IAAA,YAAY,EAAE;AAHX,GAN+B;AAWpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,SADF;AAEJ,IAAA,KAAK,EAAE,SAFH;AAGJ,IAAA,YAAY,EAAE;AAHV;AAX8B,CAAtC,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAAA;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAEA,OAAA,CAAA,OAAA,GAAgB,KAAD,IACb,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AAAC,EAAA,MAAM,EAAE,KAAK,CAAC,MAAf;AAAuB,EAAA,KAAK,EAAE,KAAK,CAAC,KAApC;AAA2C,EAAA,WAAW,EAAE,KAAK,CAAC,WAA9D;AAAyE,EAAA,QAAA,EAC5E,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE;AAAE,MAAA,QAAQ,EAAE,EAAZ;AAAgB,MAAA,SAAS,EAAE;AAA3B,KADJ;AAEH,IAAA,IAAI,EAAE,KAAK,CAAC,IAFT;AAGH,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,CADA;AAEN,MAAA,GAAG,EAAE,EAFC;AAGN,MAAA,KAAK,EAAE,MAHD;AAIN,MAAA,MAAM,EAAE;AAJF,KAHL;AASH,IAAA,UAAU,EAAE;AATT,GAAL;AADG,CAAL,CADF;;AAgBa,OAAA,CAAA,KAAA,GAAQ,cAAR;;AAEN,MAAM,kBAAkB,GAAI,KAAD,IAAU;AAC1C,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE,EACL,GAAG,KAAK,CAAC,KADJ;AAEL,MAAA,eAAe,EAAE,KAAK,CAAC,IAAN,GAAa,SAAb,GAAyB,aAFrC;AAGL,MAAA,UAAU,EAAE;AAHP,KADT;AAKG,IAAA,QAAA,EAEA,CAAC,KAAK,CAAC,IAAN,GAAa,GAAd,EAAmB,MAAnB,CAA0B,KAAK,CAAC,GAAhC;AAPH,GAAA,CADF;AAWD,CAZM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAcb,OAAA,CAAA,kBAAA,CAAmB,gBAAnB,GAAsC;AACpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,QADF;AAEJ,IAAA,KAAK,EAAE,OAFH;AAGJ,IAAA,YAAY,EAAE;AAHV,GAD8B;AAMpC,EAAA,GAAG,EAAE;AACH,IAAA,IAAI,EAAE,QADH;AAEH,IAAA,KAAK,EAAE,QAFJ;AAGH,IAAA,YAAY,EAAE;AAHX,GAN+B;AAWpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,SADF;AAEJ,IAAA,KAAK,EAAE,SAFH;AAGJ,IAAA,YAAY,EAAE;AAHV;AAX8B,CAAtC,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -261,7 +259,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -285,9 +283,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -299,38 +295,36 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.ComponentWithProps = exports.LABEL = void 0;
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\"); // component library
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\"); // component library
 
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var utopia_api_1 = require(\\"utopia-api\\");
+const utopia_api_1 = require(\\"utopia-api\\");
 
-exports.default = function (props) {
-  return (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
-    layout: props.layout,
-    style: props.style,
-    onMouseDown: props.onMouseDown,
-    children: (0, jsx_runtime_1.jsx)(utopia_api_1.Text, {
-      style: {
-        fontSize: 16,
-        textAlign: 'center'
-      },
-      text: props.text,
-      layout: {
-        left: 0,
-        top: 10,
-        width: '100%',
-        height: '100%'
-      },
-      textSizing: 'fixed'
-    })
-  });
-};
+exports.default = props => (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
+  layout: props.layout,
+  style: props.style,
+  onMouseDown: props.onMouseDown,
+  children: (0, jsx_runtime_1.jsx)(utopia_api_1.Text, {
+    style: {
+      fontSize: 16,
+      textAlign: 'center'
+    },
+    text: props.text,
+    layout: {
+      left: 0,
+      top: 10,
+      width: '100%',
+      height: '100%'
+    },
+    textSizing: 'fixed'
+  })
+});
 
 exports.LABEL = 'press me! 😉';
 
-var ComponentWithProps = function ComponentWithProps(props) {
+const ComponentWithProps = props => {
   return (0, jsx_runtime_1.jsx)(\\"div\\", {
     style: { ...props.style,
       backgroundColor: props.pink ? 'hotpink' : 'transparent',
@@ -363,7 +357,7 @@ exports.ComponentWithProps.propertyControls = {
       "errors": Array [],
       "sourceMap": Object {
         "file": "index.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,QAAA,GAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,CAAA;;AACA,IAAA,KAAA,GAAA,OAAA,CAAA,QAAA,CAAA;;AAEA,IAAM,IAAI,GAAG,QAAQ,CAAC,cAAT,CAAwB,MAAxB,CAAb;;AACA,IAAI,IAAI,IAAI,IAAZ,EAAkB;AAClB,EAAA,QAAQ,CAAC,MAAT,CAAgB,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,KAAA,CAAA,GAAD,EAAI,EAAJ,CAAhB,EAAyB,IAAzB;AACC,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,QAAA,GAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,CAAA;;AACA,MAAA,KAAA,GAAA,OAAA,CAAA,QAAA,CAAA;;AAEA,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAT,CAAwB,MAAxB,CAAb;;AACA,IAAI,IAAI,IAAI,IAAZ,EAAkB;AAClB,EAAA,QAAQ,CAAC,MAAT,CAAgB,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,KAAA,CAAA,GAAD,EAAI,EAAJ,CAAhB,EAAyB,IAAzB;AACC,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -390,7 +384,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -414,9 +408,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -427,15 +419,15 @@ Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\");
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\");
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var ReactDOM = __importStar(require(\\"react-dom\\"));
+const ReactDOM = __importStar(require(\\"react-dom\\"));
 
-var app_1 = require(\\"../app\\");
+const app_1 = require(\\"../app\\");
 
-var root = document.getElementById(\\"root\\");
+const root = document.getElementById(\\"root\\");
 
 if (root != null) {
   ReactDOM.render((0, jsx_runtime_1.jsx)(app_1.App, {}), root);
@@ -643,7 +635,7 @@ Object {
       "errors": Array [],
       "sourceMap": Object {
         "file": "components.js",
-        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAA;;;AACA,IAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAGA,OAAA,CAAA,OAAA,GAAe,UAAC,KAAD;AAAA,SACb,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AAAC,IAAA,MAAM,EAAE,KAAK,CAAC,MAAf;AAAuB,IAAA,KAAK,EAAE,KAAK,CAAC,KAApC;AAA2C,IAAA,WAAW,EAAE,KAAK,CAAC,WAA9D;AAAyE,IAAA,QAAA,EAC5E,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,MAAA,KAAK,EAAE;AAAE,QAAA,QAAQ,EAAE,EAAZ;AAAgB,QAAA,SAAS,EAAE;AAA3B,OADJ;AAEH,MAAA,IAAI,EAAE,KAAK,CAAC,IAFT;AAGH,MAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,CADA;AAEN,QAAA,GAAG,EAAE,EAFC;AAGN,QAAA,KAAK,EAAE,MAHD;AAIN,QAAA,MAAM,EAAE;AAJF,OAHL;AASH,MAAA,UAAU,EAAE;AATT,KAAL;AADG,GAAL,CADa;AAAA,CAAf;;AAgBa,OAAA,CAAA,KAAA,GAAQ,cAAR;;AAEN,IAAM,kBAAkB,GAAG,SAArB,kBAAqB,CAAC,KAAD,EAAU;AAC1C,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE,EACL,GAAG,KAAK,CAAC,KADJ;AAEL,MAAA,eAAe,EAAE,KAAK,CAAC,IAAN,GAAa,SAAb,GAAyB,aAFrC;AAGL,MAAA,UAAU,EAAE;AAHP,KADT;AAKG,IAAA,QAAA,EAEA,CAAC,KAAK,CAAC,IAAN,GAAa,GAAd,EAAmB,MAAnB,CAA0B,KAAK,CAAC,GAAhC;AAPH,GAAA,CADF;AAWD,CAZM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAcb,OAAA,CAAA,kBAAA,CAAmB,gBAAnB,GAAsC;AACpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,QADF;AAEJ,IAAA,KAAK,EAAE,OAFH;AAGJ,IAAA,YAAY,EAAE;AAHV,GAD8B;AAMpC,EAAA,GAAG,EAAE;AACH,IAAA,IAAI,EAAE,QADH;AAEH,IAAA,KAAK,EAAE,QAFJ;AAGH,IAAA,YAAY,EAAE;AAHX,GAN+B;AAWpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,SADF;AAEJ,IAAA,KAAK,EAAE,SAFH;AAGJ,IAAA,YAAY,EAAE;AAHV;AAX8B,CAAtC,C",
+        "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAAA;;;AACA,MAAA,KAAA,GAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,MAAA,YAAA,GAAA,OAAA,CAAA,YAAA,CAAA;;AAGA,OAAA,CAAA,OAAA,GAAgB,KAAD,IACb,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AAAC,EAAA,MAAM,EAAE,KAAK,CAAC,MAAf;AAAuB,EAAA,KAAK,EAAE,KAAK,CAAC,KAApC;AAA2C,EAAA,WAAW,EAAE,KAAK,CAAC,WAA9D;AAAyE,EAAA,QAAA,EAC5E,CAAA,GAAA,aAAA,CAAA,GAAA,EAAC,YAAA,CAAA,IAAD,EAAK;AACH,IAAA,KAAK,EAAE;AAAE,MAAA,QAAQ,EAAE,EAAZ;AAAgB,MAAA,SAAS,EAAE;AAA3B,KADJ;AAEH,IAAA,IAAI,EAAE,KAAK,CAAC,IAFT;AAGH,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,CADA;AAEN,MAAA,GAAG,EAAE,EAFC;AAGN,MAAA,KAAK,EAAE,MAHD;AAIN,MAAA,MAAM,EAAE;AAJF,KAHL;AASH,IAAA,UAAU,EAAE;AATT,GAAL;AADG,CAAL,CADF;;AAgBa,OAAA,CAAA,KAAA,GAAQ,cAAR;;AAEN,MAAM,kBAAkB,GAAI,KAAD,IAAU;AAC1C,SACE,CAAA,GAAA,aAAA,CAAA,GAAA,EAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE,EACL,GAAG,KAAK,CAAC,KADJ;AAEL,MAAA,eAAe,EAAE,KAAK,CAAC,IAAN,GAAa,SAAb,GAAyB,aAFrC;AAGL,MAAA,UAAU,EAAE;AAHP,KADT;AAKG,IAAA,QAAA,EAEA,CAAC,KAAK,CAAC,IAAN,GAAa,GAAd,EAAmB,MAAnB,CAA0B,KAAK,CAAC,GAAhC;AAPH,GAAA,CADF;AAWD,CAZM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAcb,OAAA,CAAA,kBAAA,CAAmB,gBAAnB,GAAsC;AACpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,QADF;AAEJ,IAAA,KAAK,EAAE,OAFH;AAGJ,IAAA,YAAY,EAAE;AAHV,GAD8B;AAMpC,EAAA,GAAG,EAAE;AACH,IAAA,IAAI,EAAE,QADH;AAEH,IAAA,KAAK,EAAE,QAFJ;AAGH,IAAA,YAAY,EAAE;AAHX,GAN+B;AAWpC,EAAA,IAAI,EAAE;AACJ,IAAA,IAAI,EAAE,SADF;AAEJ,IAAA,KAAK,EAAE,SAFH;AAGJ,IAAA,YAAY,EAAE;AAHV;AAX8B,CAAtC,C",
         "names": Array [],
         "sourceRoot": "",
         "sources": Array [
@@ -717,7 +709,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
   if (!desc || (\\"get\\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -741,9 +733,7 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) {
-    if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  }
+  if (mod != null) for (var k in mod) if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
 
   __setModuleDefault(result, mod);
 
@@ -755,38 +745,36 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.ComponentWithProps = exports.LABEL = void 0;
 
-var jsx_runtime_1 = require(\\"react/jsx-runtime\\"); // component library
+const jsx_runtime_1 = require(\\"react/jsx-runtime\\"); // component library
 
 
-var React = __importStar(require(\\"react\\"));
+const React = __importStar(require(\\"react\\"));
 
-var utopia_api_1 = require(\\"utopia-api\\");
+const utopia_api_1 = require(\\"utopia-api\\");
 
-exports.default = function (props) {
-  return (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
-    layout: props.layout,
-    style: props.style,
-    onMouseDown: props.onMouseDown,
-    children: (0, jsx_runtime_1.jsx)(utopia_api_1.Text, {
-      style: {
-        fontSize: 16,
-        textAlign: 'center'
-      },
-      text: props.text,
-      layout: {
-        left: 0,
-        top: 10,
-        width: '100%',
-        height: '100%'
-      },
-      textSizing: 'fixed'
-    })
-  });
-};
+exports.default = props => (0, jsx_runtime_1.jsx)(utopia_api_1.View, {
+  layout: props.layout,
+  style: props.style,
+  onMouseDown: props.onMouseDown,
+  children: (0, jsx_runtime_1.jsx)(utopia_api_1.Text, {
+    style: {
+      fontSize: 16,
+      textAlign: 'center'
+    },
+    text: props.text,
+    layout: {
+      left: 0,
+      top: 10,
+      width: '100%',
+      height: '100%'
+    },
+    textSizing: 'fixed'
+  })
+});
 
 exports.LABEL = 'press me! 😉';
 
-var ComponentWithProps = function ComponentWithProps(props) {
+const ComponentWithProps = props => {
   return (0, jsx_runtime_1.jsx)(\\"div\\", {
     style: { ...props.style,
       backgroundColor: props.pink ? 'hotpink' : 'transparent',
diff --git a/editor/src/core/workers/ts/ts-worker.ts b/editor/src/core/workers/ts/ts-worker.ts
index e31030e9cbd4..b818d59cec52 100644
--- a/editor/src/core/workers/ts/ts-worker.ts
+++ b/editor/src/core/workers/ts/ts-worker.ts
@@ -699,7 +699,7 @@ function watch(
 function runBabel(code: string, filename: string, sourceMap: RawSourceMap | null) {
   const plugins = [infiniteLoopPrevention]
   return Babel.transform(code, {
-    presets: ['es2015'],
+    presets: ['es2016'],
     plugins: plugins,
     sourceType: 'script',
     sourceMaps: true,