workflow(sfc-playground): improve support for non-SFC entry points

[skirtles-code]

Update: Since I opened this, Pinia has introduced its own Playground at https://play.pinia.vuejs.org/. But this PR covers the more general case of working with plugins and isn't just for Pinia.

---

My objective is to allow plugins like Pinia to be used with the SFC Playground. Example.

I haven't added any UI support for creating a Playground like this. My thinking is that (for now) we could provide a reference Pinia URL, e.g. for bug reporting, and then people can edit the files from there.

To some extent, this is already possible with the existing SFC Playground. The REPL already supports using a .js, .ts or .html file as the entry point, instead of App.vue. However, there are a few gremlins if you try to do that:

• You can't have a file called App.vue, otherwise it becomes the entry point.
• The SSR switch adds an App.vue and makes it the entry point. Update: When I first opened this PR, the same happened for the PROD/DEV switch, but that has now been fixed in fc7902982a4bc9f0c9cdb0c9c222bc43a9d5c458.
• The download button doesn't take alternative entry points into account.

Here's an example that uses the existing Playground with Pinia: play.vuejs.org.

The changes in this PR attempt to address these problems.

I have avoided changing @vue/repl. It might be that some of these changes would be better placed there.

For the name of the entry point, I have changed the logic to:

1. If the first file is called main.js, main.ts or index.html then use that. Otherwise...
2. If there's a file called App.vue then use that. Otherwise...
3. Use the first file.

The existing Playground only has steps 2 & 3. Step 1 is the new addition.

I have hidden the SSR switch in cases where the entry point is not a .vue file. It isn't clear how SSR could work in that scenario, as the createApp/createSSRApp call is no longer under our control.

For the download button, I have attempted to make it work for entry points that are .js, .ts or .vue. If the entry point is a .html then the button is hidden.

Here are some examples for testing purposes:

• main.js: Example. No SSR button.
• main.ts: Example. No SSR button. Download uses main.ts.
• index.html: Example. No SSR button. No download button.

[github-actions[bot]]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.5 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.7 kB	19.8 kB	18.1 kB
createSSRApp	54.1 kB	21.1 kB	19.3 kB
defineCustomElement	53 kB	20.6 kB	18.7 kB
overall	64.4 kB	24.8 kB	22.5 kB