workflow(sfc-playground): improve support for non-SFC entry points #7311
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
skirtles-code
force-pushed
the
playground-entry-points
branch
from
75cb7a1 to
e3f8192
Compare
skirtles-code
commented
Dec 9, 2022
| const firstFile = Object.keys(store.getFiles())[0] | ||
| if (['index.html', 'main.js', 'main.ts'].includes(firstFile)) { | ||
| mainFile = firstFile | ||
| store.setFiles(store.getFiles(), mainFile) |
There was a problem hiding this comment.
setFiles is async and I'm not waiting for it here. This doesn't seem to matter, but the SSR check that follows this section needs to use mainFile and not store.state.mainFile, as the latter won't be updated yet.
| @@ -10,7 +10,7 @@ window.addEventListener('resize', setVH) | |||
| setVH() | |||
|
|
|||
| const useDevMode = ref(false) | |||
| const useSSRMode = ref(false) | |||
| const useSSRMode = ref<boolean | null>(false) | |||
There was a problem hiding this comment.
I'm using null as a sentinel value to indicate that the SSR button shouldn't even be shown.
Size ReportBundles
Usages
|
# Conflicts: # packages/sfc-playground/src/App.vue
# Conflicts: # packages/sfc-playground/src/App.vue # packages/sfc-playground/src/Header.vue
# Conflicts: # packages/sfc-playground/src/App.vue
haoqunjiang
added
the
🍰 p2-nice-to-have
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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,.tsor.htmlfile as the entry point, instead ofApp.vue. However, there are a few gremlins if you try to do that:App.vue, otherwise it becomes the entry point.App.vueand 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 fc79029.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:
main.js,main.tsorindex.htmlthen use that. Otherwise...App.vuethen use that. Otherwise...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
.vuefile. It isn't clear how SSR could work in that scenario, as thecreateApp/createSSRAppcall is no longer under our control.For the download button, I have attempted to make it work for entry points that are
.js,.tsor.vue. If the entry point is a.htmlthen the button is hidden.Here are some examples for testing purposes:
main.js: Example. No SSR button.main.ts: Example. No SSR button. Download usesmain.ts.index.html: Example. No SSR button. No download button.