#1 reads content from external file.

It will load the file and then listen for changes on that same path. This is helpful because amoxtli-vue will update the file at that same location from the server.js in the template

Author: ackzell

package.json

@@ -13,7 +13,9 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "install-in-amoxtli-vue": "cp -r dist/assets ../amoxtli-vue/src/templates/yehyecoa/ && cp dist/index.html ../amoxtli-vue/src/templates/yehyecoa/",
+    "bi": "npm run build && npm run install-in-amoxtli-vue"
   },
   "dependencies": {
     "@vue/repl": "^4.6.3",

src/App.vue

@@ -2,7 +2,7 @@
 import { Repl, useStore } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
 import '@vue/repl/style.css'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import ReplHeader from './ReplHeader.vue'
 import { useStorage } from '@vueuse/core'
 
@@ -21,22 +21,21 @@ window.addEventListener('resize', setVH)
 setVH()
 
 const store = useStore()
-// TODO: read the contents from an external file
-// so it is easier to have multiple examples
-// within the lessons
-const files = {
-  'src/App.vue': `<script setup lang="ts">
-  import { ref } from 'vue'
 
-  const msg = ref('Hola Mundo!')
-<\/script>
+onMounted(async () => {
+  // Initial load
+  const fileContents = await fetch('/lessonFile.vue').then((r) => r.text())
+  store.setFiles({ 'src/App.vue': fileContents })
 
-<template>
-  <h1>{{ msg }}</h1>
-  <input v-model="msg" />
-</template>`,
-}
-store.setFiles(files)
+  // Live updates via SSE
+  const es = new EventSource('/events')
+  es.addEventListener('fileUpdate', (event) => {
+    const { filename, content } = JSON.parse(event.data)
+    if (filename === 'lessonFile.vue') {
+      store.setFiles({ 'src/App.vue': content })
+    }
+  })
+})
 </script>
 
 <template>

src/ReplHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import Sun from '@/icons/Sun.vue'
-import Moon from '@/icons/Moon.vue'
+import Sun from '@/icons/SunIcon.vue'
+import Moon from '@/icons/MoonIcon.vue'
 
 defineProps<{
   theme: 'dark' | 'light'

src/icons/Download.vue renamed to src/icons/DownloadIcon.vue

@@ -1,7 +1,7 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/