feat: add ability to include CSS links

nekosaur · nekosaur · commit a84174a4be24 · 2022-12-05T17:12:03.000+01:00
diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
@@ -7,10 +7,11 @@ const store = inject('store') as Store
 const pending = ref(false)
 const pendingFilename = ref('Comp.vue')
 const importMapFile = 'import-map.json'
+const linksFile = 'links.json'
 const showImportMap = inject('import-map') as Ref<boolean>
 const files = computed(() =>
   Object.entries(store.state.files)
-    .filter(([name, file]) => name !== importMapFile && !file.hidden)
+    .filter(([name, file]) => ![importMapFile, linksFile].includes(name) && !file.hidden)
     .map(([name]) => name)
 )
 
@@ -120,6 +121,9 @@ const activeFile = computed({
     <v-tab v-if="showImportMap" class="file import-map" size="small" :value="importMapFile">
       Import Map
     </v-tab>
+    <v-tab class="file" size="small" :value="linksFile">
+      Links
+    </v-tab>
   </v-tabs>
 </template>
 
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
@@ -48,6 +48,17 @@ watch(
   }
 )
 
+watch(
+  () => store.state.files['links.json'].code,
+  () => {
+    try {
+      createSandbox()
+    } catch (e) {
+      store.state.errors = [e as Error]
+    }
+  }
+)
+
 // reset sandbox when version changes
 watch(() => store.state.resetFlip, createSandbox)
 
@@ -85,10 +96,23 @@ function createSandbox() {
   if (!importMap.imports.vue) {
     importMap.imports.vue = store.state.vueRuntimeURL
   }
-  const sandboxSrc = srcdoc.replace(
-    /<!--IMPORT_MAP-->/,
-    JSON.stringify(importMap)
-  )
+  
+  const links = store.getLinks()
+
+  if (!links.css) {
+    links.css = []
+  }
+  
+  const sandboxSrc = srcdoc
+    .replace(
+      /<!--IMPORT_MAP-->/,
+      JSON.stringify(importMap)
+    )
+    .replace(
+      /<!--CSS-->/,
+      links.css.map((link: string) => `<link rel="stylesheet" type="text/css" href="${link}" />`).join('\n')
+    )
+
   sandbox.srcdoc = sandboxSrc
   container.value.appendChild(sandbox)
 
diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
@@ -252,6 +252,7 @@
 		<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
 		<script async src="https://unpkg.com/es-module-shims@1.5.18/dist/es-module-shims.wasm.js"></script>
 		<script type="importmap"><!--IMPORT_MAP--></script>
+		<!--CSS-->
 	</head>
 	<body></body>
 </html>
diff --git a/src/store.ts b/src/store.ts
@@ -70,6 +70,7 @@ export interface Store {
   getImportMap: () => any
   initialShowOutput: boolean
   initialOutputMode: OutputModes
+  getLinks: () => any
 }
 
 export interface StoreOptions {
@@ -133,6 +134,7 @@ export class ReplStore implements Store {
     })
 
     this.initImportMap()
+    this.initLinks()
   }
 
   // don't start compiling until the options are set
@@ -193,6 +195,7 @@ export class ReplStore implements Store {
     this.state.mainFile = mainFile
     this.state.files = files
     this.initImportMap()
+    this.initLinks()
     this.setActive(mainFile)
     this.forceSandboxReset()
   }
@@ -231,6 +234,18 @@ export class ReplStore implements Store {
     }
   }
 
+  private initLinks() {
+    const links = this.state.files['links.json']
+    if (!links) {
+      this.state.files['links.json'] = new File(
+        'links.json',
+        JSON.stringify({
+          css: []
+        }, null, 2)
+      )
+    }
+  }
+
   getImportMap() {
     try {
       return JSON.parse(this.state.files['import-map.json'].code)
@@ -281,4 +296,14 @@ export class ReplStore implements Store {
     this.forceSandboxReset()
     console.info(`[@vue/repl] Now using default Vue version`)
   }
+
+  getLinks() {
+    try {
+      return JSON.parse(this.state.files['links.json'].code)
+    } catch (e) {
+      this.state.errors = [
+        `Syntax error in links.json: ${(e as Error).message}`
+      ]
+    }
+  }
 }
