feat(runtime): store to support file and folder creation

Author: AriPerkkio

packages/react/src/Panels/EditorPanel.tsx

@@ -1,5 +1,5 @@
 import type { I18n } from '@tutorialkit/types';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, type ComponentProps } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle, type ImperativePanelHandle } from 'react-resizable-panels';
 import {
   CodeMirrorEditor,
@@ -29,6 +29,7 @@ interface Props {
   onEditorScroll?: OnEditorScroll;
   onHelpClick?: () => void;
   onFileSelect?: (value?: string) => void;
+  onFileTreeChange?: ComponentProps<typeof FileTree>['onFileChange'];
 }
 
 export function EditorPanel({
@@ -46,6 +47,7 @@ export function EditorPanel({
   onEditorScroll,
   onHelpClick,
   onFileSelect,
+  onFileTreeChange,
 }: Props) {
   const fileTreePanelRef = useRef<ImperativePanelHandle>(null);
 
@@ -81,6 +83,7 @@ export function EditorPanel({
           files={files}
           scope={fileTreeScope}
           onFileSelect={onFileSelect}
+          onFileChange={onFileTreeChange}
         />
       </Panel>
       <PanelResizeHandle

packages/react/src/Panels/WorkspacePanel.tsx

@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/react';
 import { TutorialStore } from '@tutorialkit/runtime';
 import type { I18n } from '@tutorialkit/types';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, type ComponentProps } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle, type ImperativePanelHandle } from 'react-resizable-panels';
 import type { Theme } from '../core/types.js';
 import resizePanelStyles from '../styles/resize-panel.module.css';
@@ -12,6 +12,8 @@ import { TerminalPanel } from './TerminalPanel.js';
 
 const DEFAULT_TERMINAL_SIZE = 25;
 
+type FileTreeChangeEvent = Parameters<NonNullable<ComponentProps<typeof EditorPanel>['onFileTreeChange']>>[0];
+
 interface Props {
   tutorialStore: TutorialStore;
   theme: Theme;
@@ -111,6 +113,16 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
     }
   }
 
+  function onFileTreeChange({ method, type, value }: FileTreeChangeEvent) {
+    if (method == 'ADD' && type === 'FILE') {
+      return tutorialStore.addFile(value);
+    }
+
+    if (method == 'ADD' && type === 'DIRECTORY') {
+      return tutorialStore.addFolder(value);
+    }
+  }
+
   useEffect(() => {
     if (tutorialStore.hasSolution()) {
       setHelpAction('solve');
@@ -139,6 +151,7 @@ function EditorSection({ theme, tutorialStore, hasEditor }: PanelProps) {
         helpAction={helpAction}
         onHelpClick={lessonFullyLoaded ? onHelpClick : undefined}
         onFileSelect={(filePath) => tutorialStore.setSelectedFile(filePath)}
+        onFileTreeChange={onFileTreeChange}
         selectedFile={selectedFile}
         onEditorScroll={(position) => tutorialStore.setCurrentDocumentScrollPosition(position)}
         onEditorChange={(update) => tutorialStore.setCurrentDocumentContent(update.content)}

packages/react/src/core/FileTree.tsx

@@ -4,10 +4,17 @@ import { classNames } from '../utils/classnames.js';
 const NODE_PADDING_LEFT = 12;
 const DEFAULT_HIDDEN_FILES = [/\/node_modules\//];
 
+interface FileChangeEvent {
+  type: 'FILE' | 'DIRECTORY';
+  method: 'ADD' | 'REMOVE' | 'RENAME';
+  value: string;
+}
+
 interface Props {
   files: string[];
   selectedFile?: string;
   onFileSelect?: (filePath: string) => void;
+  onFileChange?: (event: FileChangeEvent) => void;
   hideRoot: boolean;
   scope?: string;
   hiddenFiles?: Array<string | RegExp>;

packages/runtime/src/store/editor.ts

@@ -13,7 +13,7 @@ export interface ScrollPosition {
   left: number;
 }
 
-export type EditorDocuments = Record<string, EditorDocument>;
+export type EditorDocuments = Record<string, EditorDocument | undefined>;
 
 export class EditorStore {
   selectedFile = atom<string | undefined>();
@@ -83,6 +83,21 @@ export class EditorStore {
     });
   }
 
+  addFileOrFolder(filePath: string) {
+    // when adding file to empty folder, remove the empty folder from documents
+    const emptyDirectory = this.files.value?.find((path) => filePath.startsWith(path));
+
+    if (emptyDirectory) {
+      this.documents.setKey(emptyDirectory, undefined);
+    }
+
+    this.documents.setKey(filePath, {
+      filePath,
+      value: '',
+      loading: false,
+    });
+  }
+
   updateFile(filePath: string, content: string): boolean {
     const documentState = this.documents.get()[filePath];
 

packages/runtime/src/store/index.ts

@@ -308,6 +308,27 @@ export class TutorialStore {
     this._editorStore.setSelectedFile(filePath);
   }
 
+  addFile(filePath: string) {
+    // prevent creating duplicates
+    if (this._editorStore.files.get().includes(filePath)) {
+      return this.setSelectedFile(filePath);
+    }
+
+    this._editorStore.addFileOrFolder(filePath);
+    this.setSelectedFile(filePath);
+    this._runner.updateFile(filePath, '');
+  }
+
+  addFolder(folderPath: string) {
+    // prevent creating duplicates
+    if (this._editorStore.files.get().includes(folderPath)) {
+      return this.setSelectedFile(folderPath);
+    }
+
+    this._editorStore.addFileOrFolder(folderPath);
+    this._runner.createFolder(folderPath);
+  }
+
   updateFile(filePath: string, content: string) {
     const hasChanged = this._editorStore.updateFile(filePath, content);
 

packages/runtime/src/tutorial-runner.ts

@@ -98,6 +98,23 @@ export class TutorialRunner {
     this._currentCommandProcess?.resize({ cols, rows });
   }
 
+  createFolder(folderPAth: string): void {
+    const previousLoadPromise = this._currentLoadTask?.promise;
+
+    this._currentLoadTask = newTask(
+      async (signal) => {
+        await previousLoadPromise;
+
+        const webcontainer = await this._webcontainer;
+
+        signal.throwIfAborted();
+
+        await webcontainer.fs.mkdir(folderPAth);
+      },
+      { ignoreCancel: true },
+    );
+  }
+
   /**
    * Update the content of a single file in WebContainer.
    *