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

Author: skirtles-code

packages/sfc-playground/src/App.vue

@@ -10,7 +10,7 @@ window.addEventListener('resize', setVH)
 setVH()
 
 const useDevMode = ref(false)
-const useSSRMode = ref(false)
+const useSSRMode = ref<boolean | null>(false)
 
 let hash = location.hash.slice(1)
 if (hash.startsWith('__DEV__')) {
@@ -32,6 +32,20 @@ const store = new ReplStore({
     : `${location.origin}/src/vue-server-renderer-dev-proxy`
 })
 
+let { mainFile } = store.state
+
+if (mainFile === 'App.vue') {
+  const firstFile = Object.keys(store.getFiles())[0]
+  if (['index.html', 'main.js', 'main.ts'].includes(firstFile)) {
+    mainFile = firstFile
+    store.setFiles(store.getFiles(), mainFile)
+  }
+}
+
+if (!mainFile.endsWith('.vue')) {
+  useSSRMode.value = null
+}
+
 // enable experimental features
 const sfcOptions = {
   script: {
@@ -63,12 +77,12 @@ function toggleDevMode() {
     sfcOptions.template.isProd =
     sfcOptions.style.isProd =
       !dev
-  store.setFiles(store.getFiles())
+  store.setFiles(store.getFiles(), store.state.mainFile)
 }
 
 function toggleSSR() {
   useSSRMode.value = !useSSRMode.value
-  store.setFiles(store.getFiles())
+  store.setFiles(store.getFiles(), store.state.mainFile)
 }
 </script>
 
@@ -83,7 +97,7 @@ function toggleSSR() {
   <Repl
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
-    :ssr="useSSRMode"
+    :ssr="useSSRMode === true"
     :store="store"
     :showCompileOutput="true"
     :autoResize="true"

packages/sfc-playground/src/Header.vue

@@ -128,6 +128,7 @@ async function fetchVersions(): Promise<string[]> {
         <span>{{ dev ? 'DEV' : 'PROD' }}</span>
       </button>
       <button
+        v-if="ssr != null"
         title="Toggle server rendering mode"
         class="toggle-ssr"
         :class="{ enabled: ssr }"
@@ -143,6 +144,7 @@ async function fetchVersions(): Promise<string[]> {
         <Share />
       </button>
       <button
+        v-if="!store.state.mainFile.endsWith('.html')"
         title="Download project files"
         class="download"
         @click="downloadProject(store)"

packages/sfc-playground/src/download/download.ts

@@ -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'
@@ -14,6 +14,13 @@ export async function downloadProject(store: any) {
   const { default: JSZip } = await import('jszip')
   const zip = new JSZip()
 
+  const { mainFile } = store.state
+  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)
@@ -22,7 +29,14 @@ export async function downloadProject(store: any) {
 
   // 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) {