feat(runtime): store to support file creation

stackblitz · Sep 4, 2024 · 88e4815 · 88e4815
1 parent 81eac67
commit 88e4815
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 0 deletions.
diff --git a/packages/react/src/Panels/EditorPanel.tsx b/packages/react/src/Panels/EditorPanel.tsx
@@ -29,6 +29,7 @@ interface Props {
   onEditorScroll?: OnEditorScroll;
   onHelpClick?: () => void;
   onFileSelect?: (value?: string) => void;
+  onFileCreate?: (value: string) => void;
 }
 
 export function EditorPanel({
@@ -46,6 +47,7 @@ export function EditorPanel({
   onEditorScroll,
   onHelpClick,
   onFileSelect,
+  onFileCreate,
 }: Props) {
   const fileTreePanelRef = useRef<ImperativePanelHandle>(null);
 
@@ -81,6 +83,7 @@ export function EditorPanel({
           files={files}
           scope={fileTreeScope}
           onFileSelect={onFileSelect}
+          onFileCreate={onFileCreate}
         />
       </Panel>
       <PanelResizeHandle

diff --git a/packages/react/src/Panels/WorkspacePanel.tsx b/packages/react/src/Panels/WorkspacePanel.tsx
@@ -139,6 +139,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
         helpAction={helpAction}
         onHelpClick={lessonFullyLoaded ? onHelpClick : undefined}
         onFileSelect={(filePath) => tutorialStore.setSelectedFile(filePath)}
+        onFileCreate={(filePath) => tutorialStore.addFile(filePath)}
         selectedFile={selectedFile}
         onEditorScroll={(position) => tutorialStore.setCurrentDocumentScrollPosition(position)}
         onEditorChange={(update) => tutorialStore.setCurrentDocumentContent(update.content)}

diff --git a/packages/react/src/core/FileTree.tsx b/packages/react/src/core/FileTree.tsx
@@ -8,6 +8,7 @@ interface Props {
   files: string[];
   selectedFile?: string;
   onFileSelect?: (filePath: string) => void;
+  onFileCreate?: (filePath: string) => void;
   hideRoot: boolean;
   scope?: string;
   hiddenFiles?: Array<string | RegExp>;

diff --git a/packages/runtime/src/store/editor.ts b/packages/runtime/src/store/editor.ts
@@ -83,6 +83,15 @@ export class EditorStore {
     });
   }
 
+  addFile(filePath: string) {
+    this.documents.setKey(filePath, {
+      filePath,
+      value: '',
+      loading: false,
+    });
+    this.setSelectedFile(filePath);
+  }
+
   updateFile(filePath: string, content: string): boolean {
     const documentState = this.documents.get()[filePath];
 

diff --git a/packages/runtime/src/store/index.ts b/packages/runtime/src/store/index.ts
@@ -308,6 +308,11 @@ export class TutorialStore {
     this._editorStore.setSelectedFile(filePath);
   }
 
+  addFile(filePath: string) {
+    this._editorStore.addFile(filePath);
+    this._runner.updateFile(filePath, '');
+  }
+
   updateFile(filePath: string, content: string) {
     const hasChanged = this._editorStore.updateFile(filePath, content);