feat: sync new files from WebContainer to editor

Author: isaacplmann

e2e/src/components/ButtonWriteToFile.tsx

@@ -16,6 +16,12 @@ export function ButtonWriteToFile({ filePath, newContent, access = 'store', test
       case 'webcontainer': {
         const webcontainerInstance = await webcontainer;
 
+        const folderPath = filePath.split('/').slice(0, -1).join('/');
+
+        if (folderPath) {
+          await webcontainerInstance.fs.mkdir(folderPath, { recursive: true });
+        }
+
         await webcontainerInstance.fs.writeFile(filePath, newContent);
 
         return;

e2e/src/content/tutorial/tests/filesystem/no-watch/content.mdx

@@ -9,3 +9,4 @@ import { ButtonWriteToFile } from '@components/ButtonWriteToFile';
 # Watch filesystem test
 
 <ButtonWriteToFile client:load access="webcontainer" filePath="/bar.txt" newContent='Something else' />
+<ButtonWriteToFile client:load access="webcontainer" filePath="/src/new.txt" newContent='New' testId='write-new-file' />

e2e/src/content/tutorial/tests/filesystem/watch/content.mdx

@@ -3,6 +3,7 @@ type: lesson
 title: Watch
 focus: /bar.txt
 filesystem:
+  addNewFilesInPaths: ['src']
   watch: true
 ---
 
@@ -12,3 +13,5 @@ import { ButtonWriteToFile } from '@components/ButtonWriteToFile';
 
 <ButtonWriteToFile client:load access="webcontainer" filePath="/bar.txt" newContent='Something else' />
 <ButtonWriteToFile client:load access="webcontainer" filePath="/a/b/baz.txt" newContent='Foo' testId='write-to-file-in-subfolder' />
+<ButtonWriteToFile client:load access="webcontainer" filePath="/src/new.txt" newContent='New' testId='write-new-file' />
+<ButtonWriteToFile client:load access="webcontainer" filePath="/unknown/other.txt" newContent='Ignore this' testId='write-new-ignored-file' />

e2e/test/filesystem.test.ts

@@ -34,6 +34,21 @@ test('editor should reflect changes made from webcontainer in file in nested fol
   });
 });
 
+test('editor should reflect new files added in specified paths in webcontainer', async ({ page }) => {
+  const testCase = 'watch';
+  await page.goto(`${BASE_URL}/${testCase}`);
+
+  await page.getByTestId('write-new-ignored-file').click();
+  await page.getByTestId('write-new-file').click();
+
+  await page.getByRole('button', { name: 'new.txt' }).click();
+  expect(await page.getByRole('button', { name: 'other.txt' }).count()).toEqual(0);
+
+  await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText('New', {
+    useInnerText: true,
+  });
+});
+
 test('editor should not reflect changes made from webcontainer if watch is not set', async ({ page }) => {
   const testCase = 'no-watch';
   await page.goto(`${BASE_URL}/${testCase}`);

packages/runtime/src/store/editor.ts

@@ -99,9 +99,9 @@ export class EditorStore {
 
   addFileOrFolder(file: FileDescriptor) {
     // when adding file or folder to empty folder, remove the empty folder from documents
-    const emptyFolder = this.files.get().find((f) => f.type === 'folder' && file.path.startsWith(f.path));
+    const emptyFolder = this.files.get().find((f) => file.path.startsWith(f.path));
 
-    if (emptyFolder && emptyFolder.type === 'folder') {
+    if (emptyFolder) {
       this.documents.setKey(emptyFolder.path, undefined);
     }
 

packages/runtime/src/store/index.ts

@@ -151,7 +151,7 @@ export class TutorialStore {
       return;
     }
 
-    this._runner.setWatchFromWebContainer(lesson.data.filesystem?.watch ?? false);
+    this._runner.setWatchFromWebContainer(lesson.data.filesystem);
 
     this._lessonTask = newTask(
       async (signal) => {

packages/runtime/src/store/tutorial-runner.ts

@@ -1,4 +1,4 @@
-import type { CommandsSchema, Files } from '@tutorialkit/types';
+import type { CommandsSchema, Files, FileSystemSchema } from '@tutorialkit/types';
 import type { IFSWatcher, WebContainer, WebContainerProcess } from '@webcontainer/api';
 import { newTask, type Task, type TaskCancelled } from '../tasks.js';
 import { MultiCounter } from '../utils/multi-counter.js';
@@ -66,6 +66,7 @@ export class TutorialRunner {
   private _ignoreFileEvents = new MultiCounter();
   private _watcher: IFSWatcher | undefined;
   private _watchContentFromWebContainer = false;
+  private _watcherAddNewFilesInPaths: string[] | undefined = undefined;
   private _readyToWatch = false;
 
   private _packageJsonDirty = false;
@@ -82,8 +83,9 @@ export class TutorialRunner {
     private _stepController: StepsController,
   ) {}
 
-  setWatchFromWebContainer(value: boolean) {
-    this._watchContentFromWebContainer = value;
+  setWatchFromWebContainer(fileSystemConfig?: FileSystemSchema) {
+    this._watchContentFromWebContainer = fileSystemConfig?.watch || false;
+    this._watcherAddNewFilesInPaths = fileSystemConfig?.addNewFilesInPaths;
 
     if (this._readyToWatch && this._watchContentFromWebContainer) {
       this._webcontainer.then((webcontainer) => this._setupWatcher(webcontainer));
@@ -654,19 +656,36 @@ export class TutorialRunner {
         return;
       }
 
-      // for now we only care about 'change' event
-      if (eventType !== 'change') {
-        return;
-      }
+      if (eventType === 'change') {
+        // we ignore all paths that aren't exposed in the `_editorStore`
+        const file = this._editorStore.documents.get()[filePath];
 
-      // we ignore all paths that aren't exposed in the `_editorStore`
-      const file = this._editorStore.documents.get()[filePath];
+        if (!file) {
+          return;
+        }
 
-      if (!file) {
-        return;
-      }
+        scheduleReadFor(filePath, typeof file.value === 'string' ? 'utf-8' : null);
+      } else if (eventType === 'rename' && this._watcherAddNewFilesInPaths) {
+        if (!this._watcherAddNewFilesInPaths.some((path) => filePath.startsWith('/' + path))) {
+          return;
+        }
 
-      scheduleReadFor(filePath, typeof file.value === 'string' ? 'utf-8' : null);
+        const segments = filePath.split('/');
+        segments.forEach((_, index) => {
+          if (index == segments.length - 1) {
+            return;
+          }
+
+          const folderPath = segments.slice(0, index + 1).join('/');
+
+          if (!this._editorStore.documents.get()[folderPath]) {
+            this._editorStore.addFileOrFolder({ path: folderPath, type: 'folder' });
+          }
+        });
+        this._editorStore.addFileOrFolder({ path: filePath, type: 'file' });
+        this._updateCurrentFiles({ [filePath]: 'test' });
+        scheduleReadFor(filePath, 'utf-8');
+      }
     });
   }
 

packages/types/src/schemas/common.ts

@@ -57,10 +57,14 @@ export const previewSchema = z.union([
 export type PreviewSchema = z.infer<typeof previewSchema>;
 
 export const fileSystemSchema = z.object({
+  addNewFilesInPaths: z
+    .array(z.string())
+    .describe('Can specify an array of file paths to watch for new files')
+    .optional(),
   watch: z
     .boolean()
-    .optional()
-    .describe('When set to true, file changes in WebContainer are updated in the editor as well.'),
+    .describe('When set to true, file changes in WebContainer are updated in the editor as well.')
+    .optional(),
 });
 
 export type FileSystemSchema = z.infer<typeof fileSystemSchema>;