@poveste/app 0.19.1 → 0.21.0

package/src/app/components/panel/StoryDocs.vue

@@ -5,9 +5,11 @@ import { Icon } from '@iconify/vue'
 import { markdownFiles } from 'virtual:$poveste-markdown-files'
 import { computed, nextTick, ref, toRefs, watch, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { onlySections, useComponentDocs } from '../../util/component-docs.js'
 import { povesteConfig } from '../../util/config.js'
 import BaseEmpty from '../base/BaseEmpty.vue'
 import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
+import ComponentDocs from './ComponentDocs.vue'
 
 export function useStoryDoc(story: Ref<Story>) {
   const renderedDoc = ref('')
@@ -76,6 +78,10 @@ const { story } = toRefs(props)
 
 const { renderedDoc } = useStoryDoc(story)
 
+// Opening the docs is what starts auto-docs extraction (#1159).
+const { components: allComponents, pending, off } = useComponentDocs(computed(() => story.value?.id))
+const components = computed(() => allComponents.value && onlySections(allComponents.value, story.value?.autoDocs))
+
 // Markdown links to other stories
 const router = useRouter()
 
@@ -184,8 +190,33 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
       />
     </div>
 
+    <!--
+      The same empty panel said "still reading" and "off, for a reason" alike (#1400).
+      A built book's data is a chunk away, so it shows nothing until then, not a spinner.
+    -->
+    <BaseEmpty
+      v-if="__POVESTE_DEV__ && !renderedDoc && !components?.length && pending"
+      data-testid="docs-pending"
+    >
+      <Icon
+        icon="carbon:circle-dash"
+        class="w-8 h-8 opacity-50 mb-6 animate-spin"
+      />
+      Reading component types…
+      <span class="text-sm opacity-70 mt-2">The first time can take a while.</span>
+    </BaseEmpty>
+    <BaseEmpty
+      v-else-if="!pending && !renderedDoc && !components?.length && off"
+      data-testid="docs-off"
+    >
+      <Icon
+        icon="carbon:document-unknown"
+        class="w-8 h-8 opacity-50 mb-6"
+      />
+      {{ off }}
+    </BaseEmpty>
     <BaseEmpty
-      v-if="!renderedDoc"
+      v-else-if="!pending && !renderedDoc && !components?.length"
     >
       <Icon
         icon="carbon:document-unknown"
@@ -194,11 +225,16 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
       No documentation available
     </BaseEmpty>
     <div
-      v-else
+      v-if="renderedDoc"
       ref="renderedEl"
       class="prose dark:prose-invert p-4 max-w-none"
       data-testid="story-docs"
       v-html="renderedDoc"
     />
+    <ComponentDocs
+      v-if="components?.length"
+      :components="components"
+      :story-file="story.file?.filePath"
+    />
   </div>
 </template>

package/src/app/components/panel/StorySourceCode.vue

@@ -6,7 +6,7 @@ import { Icon } from '@iconify/vue'
 import { HstCopyIcon, HstTooltip } from '@poveste/controls'
 import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { isDark } from '../../util/dark'
-import { getDynamicSourceCode, getStaticSourceCode, loadGenerateSourceCode } from '../../util/docs'
+import { getDynamicSourceCode, getStaticSourceCode, loadGenerateSourceCode, sourceLang } from '../../util/docs'
 import { getHighlighter } from '../../util/highlighter'
 import BaseEmpty from '../base/BaseEmpty.vue'
 
@@ -19,8 +19,21 @@ const props = defineProps<{
 // down were both errors about a type nobody meant to declare.
 const generateSourceCodeFn = shallowRef<GenerateSourceCode | null>(null)
 
+// Until a source has settled, an empty one means "not yet", not "none": a copy in
+// that window said "Nothing to copy" with the source a moment away (#1314).
+const dynamicSettled = ref(false)
+const staticSettled = ref(false)
+
 watchEffect(async () => {
-  const generate = await loadGenerateSourceCode(props.story)
+  let generate: GenerateSourceCode | undefined
+  try {
+    generate = await loadGenerateSourceCode(props.story)
+  }
+  finally {
+    if (!generate) {
+      dynamicSettled.value = true
+    }
+  }
   if (generate) {
     generateSourceCodeFn.value = markRaw(generate)
   }
@@ -40,6 +53,7 @@ watch(() => [props.variant, generateSourceCodeFn.value], async () => {
   if (!generateSourceCodeFn.value) return
   error.value = null
   dynamicSourceCode.value = ''
+  dynamicSettled.value = false
   try {
     dynamicSourceCode.value = (await getDynamicSourceCode(props.variant, generateSourceCodeFn.value)) ?? ''
   }
@@ -47,6 +61,7 @@ watch(() => [props.variant, generateSourceCodeFn.value], async () => {
     console.error(e)
     error.value = e instanceof Error ? e.message : String(e)
   }
+  dynamicSettled.value = true
 
   // Auto-switch
   if (!dynamicSourceCode.value) {
@@ -62,11 +77,19 @@ watch(() => [props.variant, generateSourceCodeFn.value], async () => {
 const staticSourceCode = ref('')
 watch(() => [props.story, props.story?.file?.source], async () => {
   staticSourceCode.value = ''
-  staticSourceCode.value = (await getStaticSourceCode(props.story)) ?? ''
+  staticSettled.value = false
+  try {
+    staticSourceCode.value = (await getStaticSourceCode(props.story)) ?? ''
+  }
+  finally {
+    staticSettled.value = true
+  }
 }, {
   immediate: true,
 })
 
+const loading = computed(() => displayedSource.value === 'dynamic' ? !dynamicSettled.value : !staticSettled.value)
+
 const displayedSourceCode = computed(() => {
   if (displayedSource.value === 'dynamic') {
     return dynamicSourceCode.value
@@ -89,7 +112,7 @@ onMounted(async () => {
 
 const sourceHtml = computed(() => displayedSourceCode.value
   ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
-      lang: 'html',
+      lang: sourceLang(props.story),
       theme: isDark.value ? 'github-dark' : 'github-light-high-contrast',
     })
   : '')
@@ -189,6 +212,7 @@ watch(sourceHtml, async () => {
 
       <HstCopyIcon
         :content="displayedSourceCode"
+        :loading="loading"
         class="flex-none"
       />
     </div>
@@ -205,7 +229,7 @@ watch(sourceHtml, async () => {
         icon="carbon:code-hide"
         class="w-8 h-8 opacity-50 mb-6"
       />
-      <span>Not available</span>
+      <span>{{ loading ? 'Loading' : 'Not available' }}</span>
     </BaseEmpty>
 
     <textarea

package/src/app/components/story/GenericMountStory.vue

@@ -7,8 +7,8 @@ export default {
 <script lang="ts" setup>
 import type { Component } from 'vue'
 import type { Story } from '../../types'
-import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { markRaw, ref, watchEffect } from 'vue'
+import { loadClientPlugin } from '../../util/client-plugin.js'
 
 const props = defineProps<{
   story: Story
@@ -17,10 +17,8 @@ const props = defineProps<{
 const mountComponent = ref<Component | null>(null)
 
 watchEffect(async () => {
-  const supportPluginId = props.story.file?.supportPluginId
-  const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
-  if (clientPlugin) {
-    const pluginModule = await clientPlugin()
+  const pluginModule = await loadClientPlugin(props.story.file?.supportPluginId)
+  if (pluginModule) {
     mountComponent.value = markRaw(pluginModule.MountStory)
   }
 })

package/src/app/components/story/GenericRenderStory.vue

@@ -7,8 +7,8 @@ export default {
 <script lang="ts" setup>
 import type { Component } from 'vue'
 import type { Story } from '../../types'
-import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { markRaw, ref, watchEffect } from 'vue'
+import { loadClientPlugin } from '../../util/client-plugin.js'
 
 const props = defineProps<{
   story: Story
@@ -17,17 +17,9 @@ const props = defineProps<{
 const mountComponent = ref<Component | null>(null)
 
 watchEffect(async () => {
-  const supportPluginId = props.story.file?.supportPluginId
-  const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
-  if (clientPlugin) {
-    try {
-      const pluginModule = await clientPlugin()
-      mountComponent.value = markRaw(pluginModule.RenderStory)
-    }
-    catch (e) {
-      console.error(e)
-      throw e
-    }
+  const pluginModule = await loadClientPlugin(props.story.file?.supportPluginId)
+  if (pluginModule) {
+    mountComponent.value = markRaw(pluginModule.RenderStory)
   }
 })
 </script>

package/src/app/components/story/StoryResponsivePreview.vue

@@ -6,6 +6,7 @@ import { HstTooltip } from '@poveste/controls'
 import { useEventListener } from '@vueuse/core'
 import { computed, onUnmounted, ref } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import { usePreviewDark } from '../../util/color-scheme'
 import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
 import HatchedPattern from '../misc/HatchedPattern.vue'
 
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<{
 })
 
 const settings = usePreviewSettingsStore().currentSettings
+const previewDark = usePreviewDark(settings)
 
 // Resize
 
@@ -183,7 +185,8 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
           // padding (#264). Gated on `responsive`, not `isResponsiveEnabled`:
           // a single-view story with `responsiveDisabled` still needs its own
           // chrome, it just loses the draggers.
-          responsive ? 'bg-white dark:bg-gray-700' : '',
+          // The preview's scheme, not the chrome's, which `dark:` would follow (#1449).
+          responsive ? (previewDark ? 'bg-gray-700' : 'bg-white') : '',
           isResponsiveEnabled ? {
             'w-fit': !!finalWidth,
             'h-fit': !!finalHeight,

package/src/app/components/story/StoryVariantGridItem.vue

@@ -148,8 +148,11 @@ const useIframe = computed(() => {
 
     <!-- Body -->
     <div
-      class="border bg-white dark:bg-gray-700 rounded flex-1 p-4 relative"
+      class="border rounded flex-1 p-4 relative"
       :class="{
+        // The preview's scheme, not the chrome's, which `dark:` would follow (#1449).
+        'bg-gray-700': previewDark,
+        'bg-white': !previewDark,
         'border-gray-100 dark:border-gray-800': !isActive,
         'border-primary-200 dark:border-primary-900': isActive,
       }"

package/src/app/components/story/StoryVariantSinglePreviewRemote.vue

@@ -50,7 +50,7 @@ function postState(changes: Record<string, any>) {
   iframe.value?.contentWindow?.postMessage({
     type: STATE_SYNC,
     state: changes,
-  })
+  }, window.location.origin)
 }
 
 let bridge = createStateBridge(postState)
@@ -105,9 +105,11 @@ function fromCurrentOccupant(data: { storyId?: string, variantId?: string }) {
 useEventListener(window, 'message', (event) => {
   // With many grid iframes mounted, every sandbox postMessage hits every
   // parent listener. Skip events that didn't originate from this iframe.
-  // Paired with the origin check in `sandbox.ts`, which guards the other
-  // direction (#379).
   if (event.source !== iframe.value?.contentWindow) return
+  // And from the book's own origin: the frame keeps its window when a story
+  // navigates it off-site, and the site it lands on could post here (#1494).
+  // The other direction is `sandbox.ts`'s check (#379).
+  if (event.origin !== window.location.origin) return
   switch (event.data?.type) {
     case STATE_SYNC:
       if (!fromCurrentOccupant(event.data)) break
@@ -279,7 +281,7 @@ function syncSettings() {
     iframe.value.contentWindow.postMessage({
       type: PREVIEW_SETTINGS_SYNC,
       settings: toRaw(settings),
-    })
+    }, window.location.origin)
   }
 }
 

package/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue

@@ -14,7 +14,6 @@ defineProps<{
   <HstTooltip :content="tooltip">
     <TopBarChipItem
       aria-label="Open story in editor"
-      target="_blank"
       class="poveste-toolbar-open-in-editor"
       @click="openInEditor(file)"
     >

package/src/app/index.ts

@@ -1,6 +1,6 @@
 import { addCollection } from '@iconify/vue'
 import { createPinia } from 'pinia'
-import { generation } from 'virtual:$poveste-stories'
+import { generation, onUpdate, icons as storyIcons } from 'virtual:$poveste-stories'
 import { createApp, watch } from 'vue'
 import App from './App.vue'
 import { setupPluginApi } from './plugin.js'
@@ -13,11 +13,20 @@ import 'virtual:$poveste-theme'
 export async function mountMainApp() {
   // The chrome's icon data ships with the app. Without this every Icon fetched
   // its data from api.iconify.design at runtime — a handful of CDN requests per
-  // boot, and no toolbar offline (#219). Story icons a user sets still resolve
-  // through the runtime lookup.
+  // boot, and no toolbar offline (#219).
   for (const collection of iconCollections) {
     addCollection(collection)
   }
+  // And the icons a book's stories name, where the book has the collection
+  // installed; the rest still resolve through the runtime lookup (#255).
+  for (const collection of storyIcons) {
+    addCollection(collection)
+  }
+  onUpdate((_files: unknown, _tree: unknown, icons: typeof storyIcons = []) => {
+    for (const collection of icons) {
+      addCollection(collection)
+    }
+  })
 
   // The chrome's own scheme, for the browser: it paints the chrome's native
   // controls and scrollbars, and reads no class (#991). Here rather than in the

package/src/app/sandbox.ts

@@ -18,6 +18,8 @@ import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } fro
 import { createStateBridge } from './util/state-bridge.js'
 import { toRawDeep } from './util/state.js'
 import { isBenignResizeObserverEvent } from './util/uncaught.js'
+// The book's `theme.colors`, under the private names the controls' tokens read (#1443).
+import 'virtual:$poveste-theme'
 
 const query = parseQuery(window.location.search)
 
@@ -115,6 +117,9 @@ watch(previewDark, (value) => {
       el.classList.toggle(className, value)
     }
   }
+  // A builtin control in the story keys its dark rules on `.ptw-dark`, so it follows
+  // the preview it sits in, not the chrome around it (#1443).
+  document.documentElement.classList.toggle('ptw-dark', value)
 }, {
   immediate: true,
 })

package/src/app/util/client-plugin.ts

@@ -0,0 +1,33 @@
+import type { ClientSupportPlugin } from '@poveste/shared'
+import type { Component } from 'vue'
+import { reportStoryError, toStoryError } from '@poveste/shared'
+import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
+import { occupant } from './occupant.js'
+
+/*
+ * A framework's client imports the book's setup file, so a setup file that throws
+ * when it loads fails here, for every story, before any story code runs. In a
+ * built book nothing else reported it: Vue's production build only logs an async
+ * effect's rejection, and every preview stayed blank with the error in the console
+ * alone (#1323). Not rethrown, because Vue's development build would rethrow it as
+ * an unhandled rejection, whose report would replace this one.
+ */
+export async function loadClientPlugin(supportPluginId: string | undefined): Promise<ClientSupportPlugin<Component> | undefined> {
+  const load = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
+  if (!load) {
+    return undefined
+  }
+  try {
+    return await load()
+  }
+  catch (error) {
+    const { message, stack } = toStoryError(error)
+    const reported = Object.assign(new Error(`The story renderer failed to load, and it imports the setup file: ${message}`), { stack })
+    reportStoryError(reported, {
+      storyId: occupant.storyId ?? undefined,
+      variantId: occupant.variantId ?? undefined,
+    })
+    console.error(error)
+    return undefined
+  }
+}

package/src/app/util/component-docs-data.ts

@@ -0,0 +1,6 @@
+import type { ComponentDoc } from '@poveste/shared'
+import { componentDocs as data } from 'virtual:$poveste-component-docs'
+
+// What `poveste build` extracted: a small map from each story to its components, each
+// in a chunk of its own, so a reader downloads only the tables of the stories they open (#1429).
+export const componentDocs: Record<string, Record<string, () => Promise<{ default: { doc: ComponentDoc } }>>> = data

package/src/app/util/component-docs.ts

@@ -0,0 +1,169 @@
+import type { AutoDocsSection, ComponentDoc, DocTag } from '@poveste/shared'
+import type { Ref } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+export interface ComponentDocsEntry {
+  /** Relative to the book's root. */
+  file: string
+  /** The component's own name, else the file name without its extension. */
+  name: string
+  doc?: ComponentDoc
+  error?: string
+}
+
+interface StoryDocsResult {
+  storyId: string
+  components: Record<string, { doc?: ComponentDoc, error?: string, name?: string }>
+  /** Why auto-docs is off for this story, as the terminal says it. */
+  off?: string
+}
+
+export function toEntries(result: StoryDocsResult): ComponentDocsEntry[] {
+  return Object.entries(result.components).map(([file, { doc, error, name }]) => ({
+    file,
+    // A JSX story's result is keyed by the story file, so the extractor names the component,
+    // and an unnamed one, such as an inline function, goes by the story's file name.
+    name: doc?.name ?? name ?? file.split('/').pop()!.replace(/(?:\.story)?\.[^.]+$/, ''),
+    ...doc ? { doc } : {},
+    ...error ? { error } : {},
+  }))
+}
+
+/**
+ * Only the sections a story's `autoDocs` names, in the table's own order. A component
+ * left with nothing to show is dropped; one that failed keeps its error (#1398).
+ */
+export function onlySections(entries: ComponentDocsEntry[], autoDocs: boolean | AutoDocsSection[] | undefined): ComponentDocsEntry[] {
+  if (!Array.isArray(autoDocs)) {
+    return entries
+  }
+  return entries.flatMap((entry) => {
+    if (!entry.doc) {
+      return [entry]
+    }
+    const doc = {
+      ...entry.doc,
+      props: autoDocs.includes('props') ? entry.doc.props : [],
+      slots: autoDocs.includes('slots') ? entry.doc.slots : [],
+      events: autoDocs.includes('events') ? entry.doc.events : [],
+    }
+    return doc.props.length || doc.slots.length || doc.events.length ? [{ ...entry, doc }] : []
+  })
+}
+
+/** Above this many, a story's components after the first start collapsed: a compound story can name 27 parts (#1432). */
+export const OPEN_PARTS = 3
+
+/**
+ * A compound component's root first, `SelectRoot` before `SelectTrigger`, else the order
+ * they came in. A story rendering two families, such as a Select inside a Calendar, opens
+ * the root its own folder or file is named for: `Calendar/story/CalendarSelect.story.vue`
+ * opens `CalendarRoot`, not the `SelectRoot` it imported first.
+ */
+export function rootFirst(entries: ComponentDocsEntry[], storyFile?: string): ComponentDocsEntry[] {
+  const roots = entries.filter(entry => entry.name.endsWith('Root'))
+  const family = (entry: ComponentDocsEntry) => entry.name.slice(0, -'Root'.length)
+  const segments = storyFile?.split(/[\\/]/) ?? []
+  const fileName = segments.at(-1) ?? ''
+  const root = roots.find(entry => segments.slice(0, -1).includes(family(entry)))
+    ?? roots.find(entry => fileName.startsWith(family(entry)))
+    ?? roots[0]
+  return root ? [root, ...entries.filter(entry => entry !== root)] : entries
+}
+
+/**
+ * The `v-model` a prop and its `update:` event make together, as a template writes it:
+ * `v-model` for `modelValue`, `v-model:open` for `open` (#1436). Asked with either name,
+ * so the two rows of a pair, one under Props and one under Events, carry the same mark.
+ */
+export function modelLabel(doc: ComponentDoc, name: string): string | undefined {
+  const prop = name.startsWith('update:') ? name.slice('update:'.length) : name
+  const paired = doc.props.some(candidate => candidate.name === prop) && doc.events.some(event => event.name === `update:${prop}`)
+  if (!paired) {
+    return undefined
+  }
+  return prop === 'modelValue' ? 'v-model' : `v-model:${prop}`
+}
+
+export function tagText(tags: DocTag[], name: string): string | undefined {
+  const tag = tags.find(tag => tag.name === name)
+  return tag ? (tag.text ?? '') : undefined
+}
+
+/** A `@see` or `@link` points somewhere only when it carries a URL. */
+export function tagHref(text: string): string | undefined {
+  return /https?:\/\/\S+/.exec(text)?.[0]
+}
+
+/**
+ * The components a story imports, documented. In dev they are asked of the server
+ * when this is first used, which is what starts extraction at all (#1159); in a
+ * built book they come from what `poveste build` extracted.
+ */
+export function useComponentDocs(storyId: Ref<string | undefined>) {
+  const components = ref<ComponentDocsEntry[]>()
+  // Asked and not yet answered: the first answer can take many seconds (#1400).
+  const pending = ref(false)
+  const off = ref<string>()
+  const hot = import.meta.hot
+  if (!hot) {
+    // The chunk loads on first use, and until then the tab said there were no docs (#1400).
+    watch(storyId, async (id, _, onCleanup) => {
+      // Another story opened while these loaded.
+      let stale = false
+      onCleanup(() => stale = true)
+      pending.value = true
+      try {
+        const { componentDocs } = await import('./component-docs-data')
+        const loaders = id ? componentDocs[id] : undefined
+        const docs = loaders && Object.fromEntries(await Promise.all(Object.entries(loaders).map(async ([file, load]) => [file, (await load()).default])))
+        if (!stale) {
+          components.value = id && docs ? toEntries({ storyId: id, components: docs }) : undefined
+        }
+      }
+      catch (error) {
+        // A chunk the server no longer has, as in a tab left open across a deploy:
+        // no table, rather than a tab that waits forever.
+        if (!stale) {
+          components.value = undefined
+          console.error('[poveste] could not load this story\'s component docs:', error)
+        }
+      }
+      finally {
+        if (!stale) {
+          pending.value = false
+        }
+      }
+    }, { immediate: true })
+    return { components, pending, off }
+  }
+
+  function ask() {
+    if (storyId.value) {
+      pending.value = true
+      hot!.send('poveste:docgen-request', { storyId: storyId.value })
+    }
+  }
+  function onResult(result: StoryDocsResult) {
+    if (result.storyId === storyId.value) {
+      components.value = toEntries(result)
+      off.value = result.off
+      pending.value = false
+    }
+  }
+
+  hot.on('poveste:docgen-result', onResult)
+  hot.on('poveste:docgen-stale', ask)
+  onBeforeUnmount(() => {
+    hot.off('poveste:docgen-result', onResult)
+    hot.off('poveste:docgen-stale', ask)
+  })
+  watch(storyId, () => {
+    components.value = undefined
+    off.value = undefined
+    pending.value = false
+    ask()
+  }, { immediate: true })
+
+  return { components, pending, off }
+}

package/src/app/util/dark.ts

@@ -2,11 +2,17 @@ import { useDark, useToggle } from '@vueuse/core'
 import { watch } from 'vue'
 import { povesteConfig } from './config.js'
 
+// A sandboxed story's realm reads the chrome's setting but shows the story preview's
+// dark, which `sandbox.ts` puts on its `<html>` for the controls; applying this one
+// there too would fight it (#1443).
+const inSandbox = location.href.includes('__sandbox')
+
 export const isDark = useDark({
   valueDark: 'ptw-dark',
   ...povesteConfig.theme.defaultColorScheme ? { initialValue: povesteConfig.theme.defaultColorScheme } : {},
   storageKey: 'poveste-color-scheme',
   storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage,
+  ...inSandbox ? { onChanged: () => {} } : {},
 })
 export const toggleDark = useToggle(isDark)
 

package/src/app/util/docs.ts

@@ -7,8 +7,15 @@ export type GenerateSourceCode = ClientSupportPlugin['generateSourceCode']
 
 /** What the variant declares, or what its framework generates from it; `undefined` when neither has anything. */
 export async function getDynamicSourceCode(variant: Variant, generate: GenerateSourceCode | undefined): Promise<string | undefined> {
-  if (variant.source) {
-    return variant.source
+  // A Svelte story's `source` can be a function of the variant's state, so the
+  // panel follows the controls; handed on as it was, it reached the highlighter and
+  // threw (#1511).
+  const source: unknown = variant.source
+  if (typeof source === 'function') {
+    return source(variant.state) || undefined
+  }
+  if (source) {
+    return source as string
   }
   const sourceSlot = variant.slots?.().source
   if (sourceSlot) {
@@ -18,6 +25,15 @@ export async function getDynamicSourceCode(variant: Variant, generate: GenerateS
   return (await generate?.(variant)) || undefined
 }
 
+/**
+ * The grammar a story's source reads in: a Vue or Svelte story is HTML with script
+ * inside, and a Solid or React story file is TypeScript with JSX, which the HTML
+ * grammar left plain (#1521). A variant's own source follows its story's.
+ */
+export function sourceLang(story: Story | undefined): 'html' | 'tsx' {
+  return /\.[cm]?[jt]sx$/.test(story?.file?.filePath ?? '') ? 'tsx' : 'html'
+}
+
 export async function getStaticSourceCode(story: Story): Promise<string | undefined> {
   const sourceLoader = story.file?.source
   return sourceLoader ? (await sourceLoader()).default : undefined

package/src/app/util/highlighter.ts

@@ -19,9 +19,10 @@ let highlighterPromise: Promise<HighlighterCore> | undefined
  */
 export function getHighlighter(): Promise<HighlighterCore> {
   highlighterPromise ??= createHighlighterCore({
+    // `tsx` reads JSX too, and a `.story.tsx` file's types besides (#1521).
     langs: [
       import('shiki/langs/html.mjs'),
-      import('shiki/langs/jsx.mjs'),
+      import('shiki/langs/tsx.mjs'),
     ],
     /*
      * `github-light-high-contrast`, not `github-light`. The plain one paints