feat: local JSON files (vuejs#82)

Co-authored-by: Evan You <[email protected]>

Author: skirtles-code

src/editor/Editor.vue

@@ -31,7 +31,6 @@ const onChange = debounce((code: string) => {
 
 const activeMode = computed(() => {
   const { filename } = store.state.activeFile
-
   const mode = modes[filename.split('.').pop()!]
 
   return filename.lastIndexOf('.') !== -1 && mode

src/editor/FileSelector.vue

@@ -48,9 +48,9 @@ function doneAddFile() {
   if (!pending.value) return
   const filename = pendingFilename.value
 
-  if (!/\.(vue|js|ts|css)$/.test(filename)) {
+  if (!/\.(vue|js|ts|css|json)$/.test(filename)) {
     store.state.errors = [
-      `Playground only supports *.vue, *.js, *.ts, *.css files.`
+      `Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`
     ]
     return
   }

src/transform.ts

@@ -40,6 +40,20 @@ export async function compileFile(
     return
   }
 
+  if (filename.endsWith('.json')) {
+    let parsed
+    try {
+      parsed = JSON.parse(code)
+    } catch (err: any) {
+      console.error(`Error parsing ${filename}`, err.message)
+      store.state.errors = [err.message]
+      return
+    }
+    compiled.js = compiled.ssr = `export default ${JSON.stringify(parsed)}`
+    store.state.errors = []
+    return
+  }
+
   if (!filename.endsWith('.vue')) {
     store.state.errors = []
     return