From 17c06cfb84cf57288725efaf7a442cc692fdafe5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 31 Mar 2021 19:58:30 +0100
Subject: [PATCH] Import image assets as needed to allow proper bundling

---
 .../DataTable/TableLoadingOverlay/LoadingOverlay.svelte    | 3 ++-
 .../builder/src/components/start/CreateAppModal.svelte     | 3 ++-
 .../builder/src/pages/builder/[application]/_reset.svelte  | 3 ++-
 .../src/pages/builder/[application]/deploy/index.svelte    | 7 +++----
 packages/builder/src/pages/builder/_layout.svelte          | 6 ++----
 packages/builder/src/pages/builder/index.svelte            | 3 ++-
 packages/builder/vite.config.js                            | 1 +
 7 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
index df2e68fd12..9d4f0f10ba 100644
--- a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
@@ -1,11 +1,12 @@
 <script>
   import Spinner from "components/common/Spinner.svelte"
   import { fade } from "svelte/transition"
+  import Logo from "/assets/bb-logo.svg"
 </script>
 
 <div class="ag-overlay-loading-center loading-container">
   <div transition:fade class="loading-overlay">
-    <img height="30" width="30" src="/assets/bb-logo.svg" alt="Budibase icon" />
+    <img height="30" width="30" src={Logo} alt="Budibase icon" />
     <span> Loading Your Data </span>
     <Spinner size="12" />
   </div>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index f060450f69..896b217a17 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -19,6 +19,7 @@
   import { post } from "builderStore/api"
   import analytics from "analytics"
   import { onMount } from "svelte"
+  import Logo from "/assets/bb-logo.svg"
 
   //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
   const createAppStore = writable({ currentStep: 0, values: {} })
@@ -242,7 +243,7 @@
       {/if}
     </div>
   </div>
-  <img src="/assets/bb-logo.svg" alt="budibase icon" />
+  <img src={Logo} alt="budibase icon" />
   {#if submitting}
     <div in:fade class="spinner-container">
       <Spinner />
diff --git a/packages/builder/src/pages/builder/[application]/_reset.svelte b/packages/builder/src/pages/builder/[application]/_reset.svelte
index b8504e4f21..5cbf5252c4 100644
--- a/packages/builder/src/pages/builder/[application]/_reset.svelte
+++ b/packages/builder/src/pages/builder/[application]/_reset.svelte
@@ -6,6 +6,7 @@
   import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
   import { get } from "builderStore/api"
   import { isActive, goto, layout } from "@roxi/routify"
+  import Logo from "/assets/bb-logo.svg"
 
   // Get Package and set store
   export let application
@@ -49,7 +50,7 @@
     <div class="topleftnav">
       <button class="home-logo">
         <img
-          src="/assets/bb-logo.svg"
+          src={Logo}
           alt="budibase icon"
           on:click={() => $goto(`/builder/`)} />
       </button>
diff --git a/packages/builder/src/pages/builder/[application]/deploy/index.svelte b/packages/builder/src/pages/builder/[application]/deploy/index.svelte
index 7f519de853..83126c6047 100644
--- a/packages/builder/src/pages/builder/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/deploy/index.svelte
@@ -1,13 +1,12 @@
 <script>
-  import { onMount } from "svelte"
-  import { Button, Spacer, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import { store, hostingStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import api from "builderStore/api"
-  import Spinner from "components/common/Spinner.svelte"
   import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
   import analytics from "analytics"
   import FeedbackIframe from "components/feedback/FeedbackIframe.svelte"
+  import Rocket from "/assets/deploy-rocket.jpg"
 
   let loading = false
   let deployments = []
@@ -63,7 +62,7 @@
     <h4>It's time to shine!</h4>
     <Button secondary medium on:click={deployApp}>Deploy App</Button>
   </div>
-  <img src="/assets/deploy-rocket.jpg" alt="Rocket flying through sky" />
+  <img src={Rocket} alt="Rocket flying through sky" />
 </section>
 <Modal bind:this={feedbackModal}>
   <FeedbackIframe on:finished={() => feedbackModal.hide()} />
diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index 00bce1785a..22e3a81c7c 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -8,16 +8,14 @@
     BugIcon,
   } from "components/common/Icons"
   import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
+  import Logo from "/assets/budibase-logo.svg"
 
   let modal
 </script>
 
 <div class="root">
   <div class="ui-nav">
-    <div class="home-logo">
-      <img src="/assets/budibase-logo.svg" alt="Budibase icon" />
-    </div>
-
+    <div class="home-logo"><img src={Logo} alt="Budibase icon" /></div>
     <div class="nav-section">
       <div class="nav-top">
         <Link icon={AppsIcon} title="Apps" href="/" active />
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 35ebbf60e2..7a04d3b927 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -6,6 +6,7 @@
   import { Button, Heading, Modal, Spacer } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
+  import Banner from "/assets/orange-landscape.png"
 
   let hasKey
   let template
@@ -65,7 +66,7 @@
   </div>
 
   <div class="banner">
-    <img src="/assets/orange-landscape.png" alt="rocket" />
+    <img src={Banner} alt="rocket" />
     <div class="banner-content">
       Every accomplishment starts with a decision to try.
     </div>
diff --git a/packages/builder/vite.config.js b/packages/builder/vite.config.js
index 18c3e3122d..b7ca281a63 100644
--- a/packages/builder/vite.config.js
+++ b/packages/builder/vite.config.js
@@ -9,6 +9,7 @@ export default ({ mode }) => {
     base: "/builder/",
     build: {
       minify: isProduction,
+      outDir: "../server/builder",
     },
     plugins: [
       svelte({