From 1f63152734f6c37be0ada9e401bb812c8e745e7b Mon Sep 17 00:00:00 2001
From: Liad Yosef <liad.yosef@gmail.com>
Date: Wed, 2 Oct 2024 15:56:02 +0300
Subject: [PATCH 1/4] fix(import): identify correctly separately exported
 component

---
 editor/src/components/canvas/canvas-utils.ts | 4 ++--
 editor/src/core/model/project-file-utils.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/canvas/canvas-utils.ts b/editor/src/components/canvas/canvas-utils.ts
index de3d1b6857ea..9dea074fca68 100644
--- a/editor/src/components/canvas/canvas-utils.ts
+++ b/editor/src/components/canvas/canvas-utils.ts
@@ -63,7 +63,7 @@ import type {
   HighlightBoundsForUids,
   ExportsDetail,
 } from '../../core/shared/project-file-types'
-import { isParseSuccess, isTextFile } from '../../core/shared/project-file-types'
+import { isExportDefault, isParseSuccess, isTextFile } from '../../core/shared/project-file-types'
 import {
   applyUtopiaJSXComponentsChanges,
   getDefaultExportedTopLevelElement,
@@ -1732,7 +1732,7 @@ export function getValidElementPaths(
       // Handle default exports as they may actually be named.
       if (originTopLevelName == null) {
         for (const exportDetail of exportsDetail) {
-          if (exportDetail.type === 'EXPORT_DEFAULT_FUNCTION_OR_CLASS') {
+          if (isExportDefault(exportDetail)) {
             originTopLevelName = exportDetail.name
           }
         }
diff --git a/editor/src/core/model/project-file-utils.ts b/editor/src/core/model/project-file-utils.ts
index 2b41567a1571..259bbbf7f89d 100644
--- a/editor/src/core/model/project-file-utils.ts
+++ b/editor/src/core/model/project-file-utils.ts
@@ -840,7 +840,7 @@ export function getDefaultExportedTopLevelElement(file: TextFile): JSXElementChi
   }
 
   const defaultExportName =
-    file.fileContents.parsed.exportsDetail.find(isExportDefaultFunctionOrClass)?.name ?? null
+    file.fileContents.parsed.exportsDetail.find(isExportDefault)?.name ?? null
 
   if (defaultExportName == null) {
     return null

From 76dc192f8dbfce85a392c322dc9b1b8c5843a202 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liad.yosef@gmail.com>
Date: Wed, 2 Oct 2024 18:02:24 +0300
Subject: [PATCH 2/4] support import default as

---
 editor/src/components/canvas/canvas-utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/canvas-utils.ts b/editor/src/components/canvas/canvas-utils.ts
index 9dea074fca68..50b5f71e9ac6 100644
--- a/editor/src/components/canvas/canvas-utils.ts
+++ b/editor/src/components/canvas/canvas-utils.ts
@@ -1730,7 +1730,7 @@ export function getValidElementPaths(
       const { topLevelElements: resolvedTopLevelElements, exportsDetail } =
         getParseSuccessForFilePath(resolvedFilePath, projectContents)
       // Handle default exports as they may actually be named.
-      if (originTopLevelName == null) {
+      if (originTopLevelName == null || originTopLevelName === 'default') {
         for (const exportDetail of exportsDetail) {
           if (isExportDefault(exportDetail)) {
             originTopLevelName = exportDetail.name

From 0703513b49dc9c029de476fe06305dd062d8bc5b Mon Sep 17 00:00:00 2001
From: Liad Yosef <liad.yosef@gmail.com>
Date: Fri, 4 Oct 2024 18:13:45 +0300
Subject: [PATCH 3/4] test

---
 .../canvas/ui-jsx-canvas-bugs.spec.tsx        | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)

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 92e358376fe7..2f6849476dd7 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
@@ -185,6 +185,83 @@ export default function App(props) {
     `)
   })
 
+  it('Handles importing default exports declared separately', () => {
+    const result = testCanvasRenderInlineMultifile(
+      null,
+      `
+import React from 'react'
+import Utopia, {
+  Scene,
+  Storyboard,
+} from 'utopia-api'
+import {default as Appy} from './app'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      data-uid='scene'
+      style={{ position: 'absolute', left: 0, top: 0, width: 375, height: 812 }}
+    >
+      <Appy data-uid='app' />
+    </Scene>
+  </Storyboard>
+)
+`,
+      {
+        'app.js': `
+import React from 'react'
+function App(props) {
+  return <div data-uid='app-outer-div'>
+    <div data-uid='inner-div'>hello</div>
+  </div>
+}
+export default App`,
+      },
+    )
+
+    expect(result).toMatchInlineSnapshot(`
+      "<div style=\\"all: initial\\">
+        <div
+          id=\\"canvas-container\\"
+          data-testid=\\"canvas-container\\"
+          style=\\"position: absolute\\"
+          data-utopia-valid-paths=\\"sb sb/scene sb/scene/app\\"
+          data-utopia-root-element-path=\\"sb\\"
+        >
+          <div
+            data-utopia-scene-id=\\"sb/scene\\"
+            data-path=\\"sb/scene\\"
+            style=\\"
+              overflow: hidden;
+              position: absolute;
+              background-color: var(--utopitheme-emphasizedBackground);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
+              background-image: conic-gradient(
+                var(--utopitheme-checkerboardLight) 0.25turn,
+                var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
+                var(--utopitheme-checkerboardLight) 0.5turn 0.75turn,
+                var(--utopitheme-checkerboardDark) 0.75turn
+              );
+              background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px;
+              background-position: -9px 0px, -3px -6px, 3px 6px, -3px 0;
+              left: 0;
+              top: 0;
+              width: 375px;
+              height: 812px;
+            \\"
+            data-uid=\\"scene\\"
+          >
+            <div data-uid=\\"app-outer-div\\" data-path=\\"sb/scene/app\\">
+              <div data-uid=\\"inner-div\\">hello</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      "
+    `)
+  })
+
   it('#1717 - Works with user components called Scene', () => {
     const result = testCanvasRenderInlineMultifile(
       null,

From 44c94f6f24521a32f9ce7608d12bed2db4c96535 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liad.yosef@gmail.com>
Date: Sun, 6 Oct 2024 03:49:24 +0300
Subject: [PATCH 4/4] fix test

---
 .../components/canvas/ui-jsx-canvas-bugs.spec.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

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 2f6849476dd7..cfaf215ccaed 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
@@ -194,7 +194,7 @@ import Utopia, {
   Scene,
   Storyboard,
 } from 'utopia-api'
-import {default as Appy} from './app'
+import {default as Appy} from '/app'
 
 export var storyboard = (
   <Storyboard data-uid='sb'>
@@ -208,7 +208,7 @@ export var storyboard = (
 )
 `,
       {
-        'app.js': `
+        '/app.js': `
 import React from 'react'
 function App(props) {
   return <div data-uid='app-outer-div'>
@@ -225,7 +225,7 @@ export default App`,
           id=\\"canvas-container\\"
           data-testid=\\"canvas-container\\"
           style=\\"position: absolute\\"
-          data-utopia-valid-paths=\\"sb sb/scene sb/scene/app\\"
+          data-utopia-valid-paths=\\"sb sb/scene sb/scene/app sb/scene/app:app-outer-div sb/scene/app:app-outer-div/inner-div\\"
           data-utopia-root-element-path=\\"sb\\"
         >
           <div
@@ -252,8 +252,13 @@ export default App`,
             \\"
             data-uid=\\"scene\\"
           >
-            <div data-uid=\\"app-outer-div\\" data-path=\\"sb/scene/app\\">
-              <div data-uid=\\"inner-div\\">hello</div>
+            <div data-uid=\\"app-outer-div\\" data-path=\\"sb/scene/app:app-outer-div\\">
+              <div
+                data-uid=\\"inner-div\\"
+                data-path=\\"sb/scene/app:app-outer-div/inner-div\\"
+              >
+                hello
+              </div>
             </div>
           </div>
         </div>