html main files

Author: yyx990803

src/editor/Editor.vue

@@ -14,7 +14,7 @@ const onChange = debounce((code: string) => {
 
 const activeMode = computed(() => {
   const { filename } = store.state.activeFile
-  return filename.endsWith('.vue')
+  return filename.endsWith('.vue') || filename.endsWith('.html')
     ? 'htmlmixed'
     : filename.endsWith('.css')
     ? 'css'

src/output/Preview.vue

@@ -163,30 +163,22 @@ async function updatePreview() {
     console.log(`[@vue/repl] successfully compiled ${modules.length} modules.`)
 
     const codeToEval = [
-      `window.__modules__ = {};window.__css__ = '';document.body.innerHTML = ''`,
-      ...modules
+      `window.__modules__ = {};window.__css__ = '';` +
+        `if (window.__app__) window.__app__.unmount();` +
+        `document.body.innerHTML = '<div id="app"></div>'`,
+      ...modules,
+      `document.getElementById('__sfc-styles').innerHTML = window.__css__`
     ]
 
-    // determine app bootstrapping code - if main file is a vue file, mount it.
+    // if main file is a vue file, mount it.
     const mainFile = store.state.mainFile
     if (mainFile.endsWith('.vue')) {
       codeToEval.push(
         `import { createApp as _createApp } from "vue"
-        
-        if (window.__app__) {
-          window.__app__.unmount()
-        }
-        
-        document.body.innerHTML = '<div id="app"></div>'
-        document.getElementById('__sfc-styles').innerHTML = window.__css__
         const app = window.__app__ = _createApp(__modules__["${mainFile}"].default)
         app.config.errorHandler = e => console.error(e)
         app.mount('#app')`.trim()
       )
-    } else {
-      codeToEval.push(
-        `\ndocument.getElementById('__sfc-styles').innerHTML = window.__css__`
-      )
     }
 
     // eval code in sandbox

src/output/moduleCompiler.ts

@@ -46,12 +46,39 @@ function processFile(store: ReplStore, file: File, seen: Set<File>) {
   }
   seen.add(file)
 
-  const { js, css } = file.compiled
+  if (file.filename.endsWith('.html')) {
+    return processHtmlFile(store, file.code, file.filename, seen)
+  }
+
+  let [js, importedFiles] = processModule(
+    store,
+    file.compiled.js,
+    file.filename
+  )
+  // append css
+  if (file.compiled.css) {
+    js += `\nwindow.__css__ += ${JSON.stringify(file.compiled.css)}`
+  }
+  // crawl imports
+  const processed = [js]
+  if (importedFiles.size) {
+    for (const imported of importedFiles) {
+      processed.push(...processFile(store, store.state.files[imported], seen))
+    }
+  }
+  // return a list of files to further process
+  return processed
+}
 
-  const s = new MagicString(js)
+function processModule(
+  store: ReplStore,
+  src: string,
+  filename: string
+): [string, Set<string>] {
+  const s = new MagicString(src)
 
-  const ast = babelParse(js, {
-    sourceFilename: file.filename,
+  const ast = babelParse(src, {
+    sourceFilename: filename,
     sourceType: 'module',
     plugins: [...babelParserDefaultPlugins]
   }).program.body
@@ -86,7 +113,7 @@ function processFile(store: ReplStore, file: File, seen: Set<File>) {
   // 0. instantiate module
   s.prepend(
     `const ${moduleKey} = __modules__[${JSON.stringify(
-      file.filename
+      filename
     )}] = { [Symbol.toStringTag]: "Module" }\n\n`
   )
 
@@ -236,18 +263,35 @@ function processFile(store: ReplStore, file: File, seen: Set<File>) {
     }
   })
 
-  // append CSS injection code
-  if (css) {
-    s.append(`\nwindow.__css__ += ${JSON.stringify(css)}`)
-  }
+  return [s.toString(), importedFiles]
+}
 
-  const processed = [s.toString()]
-  if (importedFiles.size) {
-    for (const imported of importedFiles) {
-      processed.push(...processFile(store, store.state.files[imported], seen))
-    }
-  }
+const scriptRE = /<script\b(?:\s[^>]*>|>)([^]*?)<\/script>/gi
+const scriptModuleRE =
+  /<script\b[^>]*type\s*=\s*(?:"module"|'module')[^>]*>([^]*?)<\/script>/gi
 
-  // return a list of files to further process
-  return processed
+function processHtmlFile(
+  store: ReplStore,
+  src: string,
+  filename: string,
+  seen: Set<File>
+): string[] {
+  const deps: string[] = []
+  let jsCode = ''
+  const html = src
+    .replace(scriptModuleRE, (_, content) => {
+      const [code, importedFiles] = processModule(store, content, filename)
+      if (importedFiles.size) {
+        for (const imported of importedFiles) {
+          deps.push(...processFile(store, store.state.files[imported], seen))
+        }
+      }
+      jsCode += '\n' + code
+      return ''
+    })
+    .replace(scriptRE, (_, content) => {
+      jsCode += '\n' + content
+      return ''
+    })
+  return [jsCode, ...deps, `document.body.innerHTML = ${JSON.stringify(html)}`]
 }

src/transform.ts

@@ -24,18 +24,25 @@ export async function compileFile(
     return
   }
 
-  if (!filename.endsWith('.vue')) {
-    if (filename.endsWith('.css')) {
-      compiled.css = code
-    } else {
-      if (shouldTransformRef(code)) {
-        code = transformRef(code, { filename }).code
-      }
-      if (filename.endsWith('.ts')) {
-        code = await transformTS(code)
-      }
-      compiled.js = compiled.ssr = code
+  if (filename.endsWith('.css')) {
+    compiled.css = code
+    store.state.errors = []
+    return
+  }
+
+  if (filename.endsWith('.js') || filename.endsWith('.ts')) {
+    if (shouldTransformRef(code)) {
+      code = transformRef(code, { filename }).code
+    }
+    if (filename.endsWith('.ts')) {
+      code = await transformTS(code)
     }
+    compiled.js = compiled.ssr = code
+    store.state.errors = []
+    return
+  }
+
+  if (!filename.endsWith('.vue')) {
     store.state.errors = []
     return
   }

test/main.ts

@@ -15,8 +15,9 @@ const App = {
 
     setTimeout(() => {
       store.setFiles({
+        'index.html': '<h1>yo</h1>',
         'main.js': 'document.body.innerHTML = "<h1>hello</h1>"'
-      }, 'main.js')
+      }, 'index.html')
     }, 1000);
 
     // store.setVueVersion('3.2.8')