fix: prevent all Twoslash poppers from showing by default on load

Author: elecmonkey

packages/client/composables/useNav.ts

@@ -5,6 +5,7 @@ import { slides } from '#slidev/slides'
 import { clamp } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/utils'
 import { createSharedComposable } from '@vueuse/core'
+import { hideAllPoppers } from 'floating-vue'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { CLICKS_MAX } from '../constants'
@@ -118,6 +119,8 @@ export function useNavBase(
 
   watch(currentSlideRoute, (next, prev) => {
     navDirection.value = next.no - prev.no
+    if (prev)
+      hideAllPoppers()
   })
 
   async function openInEditor(url?: string) {

packages/slidev/node/options.ts

@@ -123,6 +123,7 @@ function getDefine(options: Omit<ResolvedSlidevOptions, 'utils'>): Record<string
       __DEV__: options.mode === 'dev',
       __SLIDEV_CLIENT_ROOT__: toAtFS(options.clientRoot),
       __SLIDEV_HASH_ROUTE__: options.data.config.routerMode === 'hash',
+      __SLIDEV_FEATURE_TWOSLASH_AUTOSHOW__: false,
       __SLIDEV_FEATURE_DRAWINGS__: matchMode(options.data.config.drawings.enabled),
       __SLIDEV_FEATURE_EDITOR__: options.mode === 'dev' && options.data.config.editor !== false,
       __SLIDEV_FEATURE_DRAWINGS_PERSIST__: !!options.data.config.drawings.persist,

packages/slidev/node/syntax/markdown-it/markdown-it-shiki.ts

@@ -2,6 +2,7 @@ import type { ResolvedSlidevOptions } from '@slidev/types'
 import type { ShikiTransformer } from 'shiki'
 import { isTruthy } from '@antfu/utils'
 import { fromHighlighter } from '@shikijs/markdown-it/core'
+import { transformerTwoslashConditional } from '../transform/twoslash-conditional'
 import { escapeVueInCode } from '../transform/utils'
 
 export default async function MarkdownItShiki({ data: { config }, mode, utils }: ResolvedSlidevOptions) {
@@ -16,6 +17,8 @@ export default async function MarkdownItShiki({ data: { config }, mode, utils }:
         },
       },
     }),
+    (config.twoslash === true || config.twoslash === mode)
+    && transformerTwoslashConditional(),
     {
       pre(pre) {
         this.addClassToHast(pre, 'slidev-code')

packages/slidev/node/syntax/transform/twoslash-conditional.ts

@@ -0,0 +1,33 @@
+import type { Element } from 'hast'
+import type { ShikiTransformer } from 'shiki'
+
+const FLAG_NAME = '__SLIDEV_FEATURE_TWOSLASH_AUTOSHOW__'
+
+function applyAutoShowFlag(node: Element | undefined) {
+  if (!node)
+    return
+
+  if (node.tagName === 'v-menu') {
+    const properties = node.properties || (node.properties = {})
+    if (properties[':shown'] === 'true')
+      properties[':shown'] = FLAG_NAME
+  }
+
+  const children = Array.isArray(node.children) ? node.children : []
+  for (const child of children) {
+    if (child && typeof child === 'object' && 'type' in child && child.type === 'element')
+      applyAutoShowFlag(child as Element)
+  }
+}
+
+/**
+ * Custom Twoslash transformer that rewrites the shown binding to use the build-time flag.
+ */
+export function transformerTwoslashConditional(): ShikiTransformer {
+  return {
+    name: 'slidev:twoslash-conditional',
+    code(codeEl) {
+      applyAutoShowFlag(codeEl as Element)
+    },
+  }
+}