Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e3f8192
workflow(sfc-playground): improve support for non-SFC entry points
skirtles-code Dec 9, 2022
acad9b0
chore: Merge remote-tracking branch 'origin/main' into playground-ent…
skirtles-code Feb 7, 2023
815f79b
Merge branch 'main' into playground-entry-points
skirtles-code Oct 20, 2023
8350c8e
Fix problems caused by merging in 'main'
skirtles-code Oct 20, 2023
a987012
Merge branch 'main' into playground-entry-points
skirtles-code Nov 12, 2023
a933ec8
Merge branch 'main' into playground-entry-points
skirtles-code Dec 31, 2023
202711e
Merge branch 'main' into playground-entry-points
skirtles-code Mar 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions packages/sfc-playground/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const setVH = () => {
window.addEventListener('resize', setVH)
setVH()

const useSSRMode = ref(false)
const useSSRMode = ref<boolean | null>(false)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm using null as a sentinel value to indicate that the SSR button shouldn't even be shown.


const { productionMode, vueVersion, importMap } = useVueImportMap({
runtimeDev: import.meta.env.PROD
Expand Down Expand Up @@ -71,6 +71,20 @@ const store = useStore(
// @ts-expect-error
globalThis.store = store

let { mainFile } = store

if (mainFile === 'src/App.vue') {
const firstFile = Object.keys(store.getFiles())[0]
if (['index.html', 'main.js', 'main.ts'].includes(firstFile)) {
mainFile = `src/${firstFile}`
store.setFiles(store.getFiles(), mainFile)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

}
}

if (!mainFile.endsWith('.vue')) {
useSSRMode.value = null
}

// persist state
watchEffect(() => {
const newHash = store
Expand Down Expand Up @@ -121,7 +135,7 @@ onMounted(() => {
:editor="Monaco"
@keydown.ctrl.s.prevent
@keydown.meta.s.prevent
:ssr="useSSRMode"
:ssr="useSSRMode === true"
:store="store"
:showCompileOutput="true"
:autoResize="true"
Expand Down
4 changes: 3 additions & 1 deletion packages/sfc-playground/src/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import VersionSelect from './VersionSelect.vue'
const props = defineProps<{
store: ReplStore
prod: boolean
ssr: boolean
ssr: boolean | null
}>()
const emit = defineEmits([
'toggle-theme',
Expand Down Expand Up @@ -100,6 +100,7 @@ function toggleDark() {
<span>{{ prod ? 'PROD' : 'DEV' }}</span>
</button>
<button
v-if="ssr != null"
title="Toggle server rendering mode"
class="toggle-ssr"
:class="{ enabled: ssr }"
Expand All @@ -118,6 +119,7 @@ function toggleDark() {
<Reload />
</button>
<button
v-if="!store.mainFile.endsWith('.html')"
title="Download project files"
class="download"
@click="downloadProject(store)"
Expand Down
20 changes: 17 additions & 3 deletions packages/sfc-playground/src/download/download.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { saveAs } from 'file-saver'

import index from './template/index.html?raw'
import main from './template/main.js?raw'
import indexTemplate from './template/index.html?raw'
import mainTemplate from './template/main.js?raw'
import pkg from './template/package.json?raw'
import config from './template/vite.config.js?raw'
import readme from './template/README.md?raw'
Expand All @@ -15,6 +15,13 @@ export async function downloadProject(store: ReplStore) {
const { default: JSZip } = await import('jszip')
const zip = new JSZip()

const mainFile = store.mainFile.replace(/^.*\//, '')
const isMainFileJs = mainFile.endsWith('.js') || mainFile.endsWith('.ts')

const index = isMainFileJs
? indexTemplate.replace('/src/main.js', `/src/${mainFile}`)
: indexTemplate

// basic structure
zip.file('index.html', index)
zip.file('package.json', pkg)
Expand All @@ -23,7 +30,14 @@ export async function downloadProject(store: ReplStore) {

// project src
const src = zip.folder('src')!
src.file('main.js', main)

if (!isMainFileJs) {
const main = mainFile.endsWith('.vue')
? mainTemplate.replace('./App.vue', `./${mainFile}`)
: mainTemplate

src.file('main.js', main)
}

const files = store.getFiles()
for (const file in files) {
Expand Down