feat(runtime): reactive source for editor files

Author: AriPerkkio

packages/react/src/Panels/WorkspacePanel.tsx

@@ -89,6 +89,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
   const selectedFile = useStore(tutorialStore.selectedFile);
   const currentDocument = useStore(tutorialStore.currentDocument);
   const lessonFullyLoaded = useStore(tutorialStore.lessonFullyLoaded);
+  const files = useStore(tutorialStore.files);
 
   const lesson = tutorialStore.lesson!;
 
@@ -132,7 +133,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
         theme={theme}
         showFileTree={tutorialStore.hasFileTree()}
         editorDocument={currentDocument}
-        files={lesson.files[1]}
+        files={files}
         i18n={lesson.data.i18n as I18n}
         hideRoot={lesson.data.hideRoot}
         helpAction={helpAction}

packages/runtime/src/store/editor.ts

@@ -19,6 +19,7 @@ export class EditorStore {
   selectedFile = atom<string | undefined>();
   documents = map<EditorDocuments>({});
 
+  files = computed(this.documents, (documents) => Object.keys(documents).sort());
   currentDocument = computed([this.documents, this.selectedFile], (documents, selectedFile) => {
     if (!selectedFile) {
       return undefined;

packages/runtime/src/store/index.ts

@@ -207,6 +207,10 @@ export class TutorialStore {
     return this._editorStore.documents;
   }
 
+  get files(): ReadableAtom<string[]> {
+    return this._editorStore.files;
+  }
+
   get template(): Files | undefined {
     return this._lessonTemplate;
   }