sfc playground - various (lost unicode, version is not retained, preview refresh to quick, compress links, console.clear,dark mode, full search)

[lidlanca]

Version

3.0.11

Reproduction link

https://sfc.vuejs.org

https://sfc-vue3.netlify.app

Steps to reproduce

1. unicode is is not retained in the base64 encoding/decoding of the url

use ✅ (U 2705) in the code, copy share link and open in new tab. the opened sandbox will no longer have the unicode char

2. changing active file, while typing, may not save changed made to the previous active file.
   will be more prominent if delay of debounce is increased.

3. due to low debounce delay, error message jumps back to quickly, while making changes
   this is a problem when the window height is low, and the red error box keep covering the editing area.
   in addition the low debounce mean more cpu usage while typing and editing code.

4. selecting a vue version is not retained in the shared link
   creating a link while working with vue 3.0.10 will be opened with the current version @03ae300
   it also not retained if the user select a version and refresh the page.

5. shared links can be quite large, allow for compression.

6. console.clear called every sandbox refresh. removed historical logs.
   remove the clear call and allow the developer to clear manually if they want to.

What is expected?

1. unicode is retained
2. changing active file should not be possible while debounce is in progress
3. make error less intrusive (allow hiding errors )
4. selected version should be part of the shared url
5. url should be more compact, which can be achieved with compression , but also be compatible with urls that were generated uncompressed.
6. refresh of sandbox should not clear the whole console.history. alternatively each sandbox logs can be in a console.group.

What is actually happening?

.

POC
version locked to 3.0.10

uncompressed ( will be upgraded once opened )
https://sfc-vue3.netlify.app/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE+e3sgbXNnIH19PC9oMT5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXA+XG5jb25zdCBtc2cgPSAnSGVsbG8gV29ybGQhJ1xuPC9zY3JpcHQ+In0=

compressed ( with unicode example )
https://sfc-vue3.netlify.app/#/s/eyJ2IjoiMy4wLjEwIiwidCI6IjEiLCJkIjp7IkFwcC52dWUiOiI8dGVtcGxhdGU+XG4gIDxoMT57eyBtc2cgfX08L2gxPlxuPC/LI1xuPHNjcmlwdCBzZXR1cD5cbmNvbnN0xTI9ICfinIUgSGVsbG8gV29ybGQhICfEQMYyPiJ9LCJj5QCGfQ==

[lidlanca]

3. making errors less intrusive

opened errors

minimized errors

minimized errors with quick tooltip

[lidlanca]

6. remove console.clear and group logs
   

[HcySunYang]

This PR can fix unicode problems #3662

[lidlanca]

@HcySunYang

I opened the issue and put up a demo with all the fixes to the issues I mentioned
to get some feedback and see if there is interest in this kind of changes , before I setup a PR.

SFC playground demo
https://sfc-vue3.netlify.app

• removed console.clear(), and replace with a context group
• higher debounce delay ( reduce cpu usage while typing )
• better handling of file navigation, with higher debounce delay of preview
• version is embedded in url and used on refresh/load
• url compression ( lzutf8 )
• base64 for better unicode support ( also provided by lzutf8 )
• url loader, with backward compatible to previously generated urls(atob()), and the newer compressed payload
• ability to minimize error, to status bar

The unicode fix in the PR #3662 relies on escape()/unescape() which has a deprecation warning on MDN
it does provide some backward compatibility, but the sfc tool does not target old browsers.

[HcySunYang]

@lidlanca If you have done some excellent work, then there is no doubt that you can make a PR 👍

[lidlanca]

added dark mode to editor ( mode persist )

[lidlanca]

allow browser built in search to find code that is not in the editor viewport. ( remove limit of search only of visible part )

[lidlanca]

loading from a github gist:

https://sfc-vue3.netlify.app/#/gist/c25471df90da7174730a2794f23a3bd9