From 7c7eec6ddff74615b3956dbc4f37d7e97365571f Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Thu, 17 Feb 2022 14:21:35 +0100
Subject: [PATCH] fix(build): support custom logos

---
 packages/histoire/src/client/app/components/HomeView.vue | 4 ++--
 .../histoire/src/client/app/components/app/AppLogo.vue   | 6 +++---
 packages/histoire/src/client/app/util/config.ts          | 3 ++-
 packages/histoire/src/node/plugin.ts                     | 9 ++++++++-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/histoire/src/client/app/components/HomeView.vue b/packages/histoire/src/client/app/components/HomeView.vue
index 926c7214..798852f5 100644
--- a/packages/histoire/src/client/app/components/HomeView.vue
+++ b/packages/histoire/src/client/app/components/HomeView.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { histoireConfig } from '../util/config.js'
+import { histoireConfig, customLogos } from '../util/config.js'
 import HistoireLogo from '../assets/histoire.svg'
 
-const logoUrl = computed(() => histoireConfig.theme?.logo?.square ?? HistoireLogo)
+const logoUrl = computed(() => histoireConfig.theme?.logo?.square ? customLogos.square : HistoireLogo)
 </script>
 
 <template>
diff --git a/packages/histoire/src/client/app/components/app/AppLogo.vue b/packages/histoire/src/client/app/components/app/AppLogo.vue
index 8166a9cc..5ae5539d 100644
--- a/packages/histoire/src/client/app/components/app/AppLogo.vue
+++ b/packages/histoire/src/client/app/components/app/AppLogo.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import { isDark } from '../../util/dark'
 import { computed } from 'vue'
-import { histoireConfig } from '../../util/config.js'
+import { histoireConfig, customLogos } from '../../util/config.js'
 
 import HistoireLogoDark from '../../assets/histoire-text-dark.svg'
 import HistoireLogoLight from '../../assets/histoire-text.svg'
 
 const logoUrl = computed(() => {
   if (isDark.value) {
-    return histoireConfig.theme.logo?.dark ?? HistoireLogoDark
+    return histoireConfig.theme.logo?.dark ? customLogos.dark : HistoireLogoDark
   }
-  return histoireConfig.theme.logo?.light ?? HistoireLogoLight
+  return histoireConfig.theme.logo?.light ? customLogos.light : HistoireLogoLight
 })
 
 const altText = computed(() => histoireConfig.theme.title + ' logo')
diff --git a/packages/histoire/src/client/app/util/config.ts b/packages/histoire/src/client/app/util/config.ts
index 9c3a0644..c8a8f58d 100644
--- a/packages/histoire/src/client/app/util/config.ts
+++ b/packages/histoire/src/client/app/util/config.ts
@@ -1,5 +1,6 @@
 import type { HistoireConfig } from '../../../node/config'
 // @ts-expect-error virtual module
-import configRaw from '$histoire-config'
+import { config as configRaw, logos as logosRaw } from '$histoire-config'
 
 export const histoireConfig: HistoireConfig = configRaw
+export const customLogos: HistoireConfig['theme']['logo'] = logosRaw
diff --git a/packages/histoire/src/node/plugin.ts b/packages/histoire/src/node/plugin.ts
index 4bf1b2e5..ee177622 100644
--- a/packages/histoire/src/node/plugin.ts
+++ b/packages/histoire/src/node/plugin.ts
@@ -102,7 +102,14 @@ if (import.meta.hot) {
         return `export default () => {}`
       }
       if (id === RESOLVED_CONFIG_ID) {
-        return `export default ${JSON.stringify(ctx.config)}`
+        let js = `export const config = ${JSON.stringify(ctx.config)}\n`
+        if (ctx.config.theme?.logo) {
+          for (const key in ctx.config.theme.logo) {
+            js += `import Logo_${key} from '${ctx.config.theme.logo[key]}'\n`
+          }
+        }
+        js += `export const logos = {${Object.keys(ctx.config.theme?.logo ?? {}).map(key => `${key}: Logo_${key}`).join(', ')}}\n`
+        return js
       }
       if (id === RESOLVED_THEME_ID) {
         let css = '*, ::before, ::after {'