From a40c095212f00cfcc158e24917a96bde225f580a Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Mon, 27 Mar 2023 08:48:20 +0100
Subject: [PATCH] feat: local JSON files

---
 src/codemirror/CodeMirror.vue |  2 +-
 src/editor/Editor.vue         |  2 ++
 src/editor/FileSelector.vue   |  4 ++--
 src/transform.ts              | 14 ++++++++++++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index a724b68f..da9337d2 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -8,7 +8,7 @@ import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 
 export interface Props {
-  mode?: string
+  mode?: string | { name: string, json: boolean }
   value?: string
   readonly?: boolean
 }
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index a68994fd..34d84ea0 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -18,6 +18,8 @@ const activeMode = computed(() => {
     ? 'htmlmixed'
     : filename.endsWith('.css')
     ? 'css'
+    : filename.endsWith('.json')
+    ? { name: 'javascript', json: true }
     : 'javascript'
 })
 </script>
diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index e8782506..242e1ae5 100644
--- a/src/editor/FileSelector.vue
+++ b/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
   }
diff --git a/src/transform.ts b/src/transform.ts
index f984426f..c5803f03 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -45,6 +45,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