refactor(sfc-playground): upgrade @vue/repl

[sxzz]

No description provided.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.4 kB	34.4 kB	31 kB
vue.global.prod.js	148 kB	53.7 kB	47.9 kB

Usages

Name	Size	Gzip	Brotli
createApp	50.5 kB	19.7 kB	18 kB
createSSRApp	53.8 kB	21.1 kB	19.3 kB
defineCustomElement	52.8 kB	20.5 kB	18.7 kB
overall	64.2 kB	24.8 kB	22.5 kB

[sxzz]

Language auto-completion has been implemented

[skirtles-code]

I understand these are likely upstream changes, but...

The preview seems to be showing dark mode, even though I have light mode set:

If I toggle dark mode on and off it fixes it, but only until I refresh.

More generally, having dark mode apply to the preview is likely to break the styling in documentation examples that rely on the Playground (throughout the ecosystem, not just in the Vue docs). I don't think this is a good change, it just makes it more work when writing a Playground example.

To give a specific example, this section of the Vue docs contains an example that doesn't work correctly with white text:

• Preview Playground

The text Hello isn't visible in dark mode, so you can't see it move when dragging the header.

[sxzz]

Preview sandbox themes now don't follow outside by default.