From 8887c70332dfc38a8d9a37bd62621a7c318e18d7 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Mon, 3 Oct 2022 18:10:01 +0200
Subject: [PATCH] feat: static source code, fix #238

---
 .../app/components/panel/StorySourceCode.vue  | 158 +++++++++++++++---
 packages/histoire-shared/src/types/story.ts   |   3 +-
 packages/histoire/src/node/server.ts          |   7 +-
 packages/histoire/src/node/vite.ts            |  22 ++-
 4 files changed, 162 insertions(+), 28 deletions(-)

diff --git a/packages/histoire-app/src/app/components/panel/StorySourceCode.vue b/packages/histoire-app/src/app/components/panel/StorySourceCode.vue
index c6dc533d..d9c4a8d2 100644
--- a/packages/histoire-app/src/app/components/panel/StorySourceCode.vue
+++ b/packages/histoire-app/src/app/components/panel/StorySourceCode.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, markRaw, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
+import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { Icon } from '@iconify/vue'
 import { getHighlighter, Highlighter, setCDN } from 'shiki'
 import { HstCopyIcon } from '@histoire/controls'
@@ -25,53 +25,108 @@ watchEffect(async () => {
   }
 })
 
-const sourceCode = ref('')
 const highlighter = shallowRef<Highlighter>()
-const error = ref<string>(null)
 
-onMounted(async () => {
-  setCDN('https://unpkg.com/shiki@0.10.1/')
-  highlighter.value = await getHighlighter({
-    langs: [
-      'html',
-      'jsx',
-    ],
-    themes: [
-      'github-light',
-      'github-dark',
-    ],
-  })
-})
+const dynamicSourceCode = ref('')
+const error = ref<string>(null)
 
 watch(() => [props.variant, generateSourceCodeFn.value], async () => {
   if (!generateSourceCodeFn.value) return
   error.value = null
+  dynamicSourceCode.value = ''
   try {
     if (props.variant.source) {
-      sourceCode.value = props.variant.source
+      dynamicSourceCode.value = props.variant.source
     } else if (props.variant.slots?.().source) {
       const source = props.variant.slots?.().source()[0].children
       if (source) {
-        sourceCode.value = await unindent(source)
+        dynamicSourceCode.value = await unindent(source)
       }
     } else {
-      sourceCode.value = await generateSourceCodeFn.value(props.variant)
+      dynamicSourceCode.value = await generateSourceCodeFn.value(props.variant)
     }
   } catch (e) {
     console.error(e)
     error.value = e.message
   }
+
+  // Auto-switch
+  if (!dynamicSourceCode.value) {
+    displayedSource.value = 'static'
+  }
 }, {
   deep: true,
   immediate: true,
 })
 
-const sourceHtml = computed(() => sourceCode.value
-  ? highlighter.value?.codeToHtml(sourceCode.value, {
+// Static file source
+
+const staticSourceCode = ref('')
+watch(() => [props.story, props.story?.file?.source], async () => {
+  staticSourceCode.value = ''
+  const sourceLoader = props.story.file?.source
+  if (sourceLoader) {
+    staticSourceCode.value = (await sourceLoader()).default
+  }
+}, {
+  immediate: true,
+})
+
+const displayedSource = ref<'dynamic' | 'static'>('dynamic')
+
+const displayedSourceCode = computed(() => {
+  if (displayedSource.value === 'dynamic') {
+    return dynamicSourceCode.value
+  }
+  return staticSourceCode.value
+})
+
+// HTML render
+
+onMounted(async () => {
+  setCDN('https://unpkg.com/shiki@0.10.1/')
+  highlighter.value = await getHighlighter({
+    langs: [
+      'html',
+      'jsx',
+    ],
+    themes: [
+      'github-light',
+      'github-dark',
+    ],
+  })
+})
+
+const sourceHtml = computed(() => displayedSourceCode.value
+  ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
     lang: 'html',
     theme: isDark.value ? 'github-dark' : 'github-light',
   })
   : '')
+
+// Scrolling
+
+let lastScroll = 0
+
+// Reset
+watch(() => props.variant, () => {
+  lastScroll = 0
+})
+
+const scroller = ref<HTMLElement>()
+
+function onScroll (event) {
+  if (sourceHtml.value) {
+    lastScroll = event.target.scrollTop
+  }
+}
+
+watch(sourceHtml, async () => {
+  await nextTick()
+  if (scroller.value) {
+    scroller.value.scrollTop = lastScroll
+  }
+})
 </script>
 
 <template>
@@ -81,14 +136,63 @@ const sourceHtml = computed(() => sourceCode.value
     <!-- Toolbar -->
     <div
       v-if="!error"
-      class="htw-h-10 htw-flex-none htw-border-b htw-border-solid htw-border-gray-150 dark:htw-border-gray-850 htw-px-4 htw-flex htw-items-center"
+      class="htw-h-10 htw-flex-none htw-border-b htw-border-solid htw-border-gray-150 dark:htw-border-gray-850 htw-px-4 htw-flex htw-items-center htw-gap-2"
     >
       <div class="htw-text-gray-900 dark:htw-text-gray-100">
         Source
       </div>
       <div class="htw-flex-1" />
+
+      <!-- Display source modes -->
+      <div class="htw-flex htw-flex-none htw-gap-px htw-h-full htw-py-2">
+        <button
+          v-tooltip="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
+          class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-l htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden"
+          :class="[
+            displayedSource !== 'dynamic' ? 'htw-max-w-6 htw-opacity-70' : 'htw-max-w-[82px] htw-text-primary-600 dark:htw-text-primary-400',
+            dynamicSourceCode ? 'htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50' : 'htw-opacity-50',
+          ]"
+          @click="dynamicSourceCode && (displayedSource = 'dynamic')"
+        >
+          <Icon
+            icon="carbon:flash"
+            class="htw-w-4 htw-h-4 htw-flex-none"
+          />
+          <span
+            class="transition-opacity duration-300"
+            :class="{
+              'opacity-0': displayedSource !== 'dynamic',
+            }"
+          >
+            Dynamic
+          </span>
+        </button>
+        <button
+          v-tooltip="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
+          class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-r htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden"
+          :class="[
+            displayedSource !== 'static' ? 'htw-max-w-6 htw-opacity-70' : 'htw-max-w-[63px] htw-text-primary-600 dark:htw-text-primary-400',
+            staticSourceCode ? 'htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50' : 'htw-opacity-50',
+          ]"
+          @click="staticSourceCode && (displayedSource = 'static')"
+        >
+          <Icon
+            icon="carbon:document"
+            class="htw-w-4 htw-h-4 htw-flex-none"
+          />
+          <span
+            class="transition-opacity duration-300"
+            :class="{
+              'opacity-0': displayedSource !== 'static',
+            }"
+          >
+            Static
+          </span>
+        </button>
+      </div>
+
       <HstCopyIcon
-        :content="sourceCode"
+        :content="displayedSourceCode"
         class="htw-flex-none"
       />
     </div>
@@ -100,7 +204,7 @@ const sourceHtml = computed(() => sourceCode.value
       Error: {{ error }}
     </div>
 
-    <BaseEmpty v-else-if="!sourceCode">
+    <BaseEmpty v-else-if="!displayedSourceCode">
       <Icon
         icon="carbon:code-hide"
         class="htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
@@ -110,16 +214,20 @@ const sourceHtml = computed(() => sourceCode.value
 
     <textarea
       v-else-if="!sourceHtml"
+      ref="scroller"
       class="__histoire-code-placeholder htw-w-full htw-h-full htw-p-4 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0"
-      :value="sourceCode"
+      :value="displayedSourceCode"
       readonly
       data-test-id="story-source-code"
+      @scroll="onScroll"
     />
     <!-- eslint-disable vue/no-v-html -->
     <div
       v-else
+      ref="scroller"
       class="htw-w-full htw-h-full htw-overflow-auto"
       data-test-id="story-source-code"
+      @scroll="onScroll"
     >
       <div
         class="__histoire-code htw-p-4 htw-w-fit"
diff --git a/packages/histoire-shared/src/types/story.ts b/packages/histoire-shared/src/types/story.ts
index af48a69c..61d16e46 100644
--- a/packages/histoire-shared/src/types/story.ts
+++ b/packages/histoire-shared/src/types/story.ts
@@ -5,6 +5,7 @@ export interface StoryFile {
   story: Story
   path: string[]
   filePath: string
+  source: () => Promise<{ default: string }>
 }
 
 export type StoryLayout = {
@@ -59,7 +60,7 @@ export interface Variant {
   icon?: string
   iconColor?: string
   setupApp?: (payload: any) => unknown
-  slots?: () => { default: any, controls: any }
+  slots?: () => { default: any, controls: any, source: any }
   state: any
   source?: string
   responsiveDisabled?: boolean
diff --git a/packages/histoire/src/node/server.ts b/packages/histoire/src/node/server.ts
index 3d9c518e..a67bbb14 100644
--- a/packages/histoire/src/node/server.ts
+++ b/packages/histoire/src/node/server.ts
@@ -111,7 +111,12 @@ export async function createServer (ctx: Context, port: number) {
     console.log('Collect stories start', changedFile?.path ?? 'all')
     const time = Date.now()
     if (changedFile && !queuedAll) {
-      await Promise.all(queuedFiles.map(storyFile => executeStoryFile(storyFile)))
+      await Promise.all(queuedFiles.map(async storyFile => {
+        await executeStoryFile(storyFile)
+        if (storyFile.story) {
+          await invalidateModule(`/__resolved__virtual:story-source:${storyFile.story.id}`)
+        }
+      }))
     } else {
       // Full update
 
diff --git a/packages/histoire/src/node/vite.ts b/packages/histoire/src/node/vite.ts
index 49a4dc4f..d4cefce5 100644
--- a/packages/histoire/src/node/vite.ts
+++ b/packages/histoire/src/node/vite.ts
@@ -10,6 +10,7 @@ import {
   loadConfigFromFile as loadViteConfigFromFile,
 } from 'vite'
 import { lookup as lookupMime } from 'mrmime'
+import fs from 'fs-extra'
 import { APP_PATH, TEMP_PATH } from './alias.js'
 import { Context } from './context.js'
 import { notifyStoryChange } from './stories.js'
@@ -234,6 +235,11 @@ export async function getViteConfigWithPlugins (isServer: boolean, ctx: Context)
       if (id.startsWith('virtual:story:')) {
         return `\0${id}`
       }
+      if (id.startsWith('virtual:story-source:')) {
+        return `/__resolved__${id}`
+        // @TODO
+        // return `\0${id}`
+      }
     },
 
     async load (id) {
@@ -260,7 +266,7 @@ ${resolvedStories.map((file, index) => {
     }
     return supportPlugin.importStoryComponent(file, index)
   }).filter(Boolean).join('\n')}
-export let files = [${files.map((file) => `{${JSON.stringify(file).slice(1, -1)}, component: Comp${file.index}}`).join(',\n')}]
+export let files = [${files.map((file) => `{${JSON.stringify(file).slice(1, -1)}, component: Comp${file.index}, source: () => import('virtual:story-source:${file.story.id}')}`).join(',\n')}]
 export let tree = ${JSON.stringify(makeTree(ctx.config, resolvedStories))}
 const handlers = []
 export function onUpdate (cb) {
@@ -381,6 +387,20 @@ if (import.meta.hot) {
           return storyFile.moduleCode
         }
       }
+
+      if (id.startsWith('/__resolved__virtual:story-source:')) {
+        const storyId = id.slice('/__resolved__virtual:story-source:'.length)
+        const storyFile = ctx.storyFiles.find(f => f.story?.id === storyId)
+        if (storyFile) {
+          let source: string
+          if (storyFile.virtual) {
+            source = storyFile.moduleCode
+          } else {
+            source = await fs.readFile(resolve(ctx.root, storyFile.relativePath), 'utf-8')
+          }
+          return `export default ${JSON.stringify(source)}`
+        }
+      }
     },
 
     handleHotUpdate (updateContext) {