fix: prevent Twoslash poppers from persisting between slides

[elecmonkey]

Prevent Twoslash poppers from persisting when navigating across slides by watching currentSlideRoute.

Fixes #2202

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	cc40ca8
🔍 Latest deploy log	https://app.netlify.com/projects/slidev/deploys/68f66982680a77000850e42a
😎 Deploy Preview	https://deploy-preview-2292--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@slidev/client

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/client@2292

create-slidev

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev@2292

create-slidev-theme

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev-theme@2292

@slidev/parser

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/parser@2292

@slidev/cli

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/cli@2292

@slidev/types

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/types@2292

commit: cc40ca8

[elecmonkey]

The changes make a test fail. I think I should not fix this issue by using v-if, as it will destroy the components when navigation happens.

[elecmonkey]

The fixed popers displayed by ^? in Twoslash doesn’t work well in Slidev. When adjacent slides are preloaded—or when all slides are preloaded after three seconds— ^? poppers appear, even on slides they don’t belong to. Moreover, once these poppers show up, navigate to other slide pages doesn’t close them unless they were manually closed.

However, It isn't worthwhile to disrupt the current rendering or preload flow just to fix this. Is there a better solution under these constraints?
As for the issue #2202 (which could affect the presentation process), I believe the changes in useNav.ts can resolve that. But for the poppers showing during preload (which results in the slide being cluttered with popups on first load), my current thought is to close them after poping-up with a setTimeout. That said, this problem is generally less critical during a presentation compared to the one discussed in the issue #2202 , since it only happens when slides are initially loaded.

My thoughts might be a bit scattered — want to hear what the community and maintainers think.

[antfu]

This timeout time is too arbitrary. Could we find a better way to do that instead of relying on timeout?\

[elecmonkey]

It stems from FloatingVue's behavior. when v-popper directives are rendered to the DOM, FloatingVue immediately creates popper instances and shows them based on the :shown='true'... so I think maybe we could implement a custom Shiki transformer to intercept the Twoslash rendering process, and try to transform the code

[elecmonkey]

Seems like not the cleanest solution, but I think it works beautifully now!

record.mov

[antfu]

We should use the build-time flag rather than a custom codemod (which is unstable), like:

slidev/packages/slidev/node/options.ts

Lines 119 to 130 in 6750606

	function getDefine(options: Omit<ResolvedSlidevOptions, 'utils'>): Record<string, string> {
	const matchMode = (mode: string | boolean) => mode === true || mode === options.mode
	return objectMap(
	{
	__DEV__: options.mode === 'dev',
	__SLIDEV_CLIENT_ROOT__: toAtFS(options.clientRoot),
	__SLIDEV_HASH_ROUTE__: options.data.config.routerMode === 'hash',
	__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,
	__SLIDEV_FEATURE_RECORD__: matchMode(options.data.config.record),
	__SLIDEV_FEATURE_PRESENTER__: matchMode(options.data.config.presenter),

[elecmonkey]

Thanks so much for your review!

summarize my thoughts and questions:

• I don’t think it needs to be a configurable option. If it is not set to false, these popups will appear on pages where they don’t belong.
• Walking the Shiki-generated HAST tree and then modifying the tree (as in my latest commits). This seems better than doing string replacements — do you think this approach is stable enough?
• I’m not sure I got your point about the "build-time flag" - could you please clarify what this flag is supposed to do in your mind?