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-glob/_files/a/b/baz.txt

@@ -0,0 +1 @@
+Baz

e2e/src/content/tutorial/tests/filesystem/watch-glob/_files/bar.txt

@@ -0,0 +1 @@
+Initial content

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

@@ -0,0 +1,16 @@
+---
+type: lesson
+title: Watch Glob
+focus: /bar.txt
+filesystem:
+  watch: ['/*', '/a/**/*', '/src/**/*']
+---
+
+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="/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/src/content/tutorial/tests/filesystem/watch/content.mdx

@@ -12,3 +12,4 @@ 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="/unknown/other.txt" newContent='Ignore this' testId='write-new-ignored-file' />

e2e/test/filesystem.test.ts

@@ -17,10 +17,11 @@ test('editor should reflect changes made from webcontainer', async ({ page }) =>
   });
 });
 
-test('editor should reflect changes made from webcontainer in file in nested folder', async ({ page }) => {
+test('editor should reflect changes made from webcontainer in file in nested folder and not add new files', async ({ page }) => {
   const testCase = 'watch';
   await page.goto(`${BASE_URL}/${testCase}`);
 
+  await page.getByTestId('write-new-ignored-file').click();
   await page.getByRole('button', { name: 'baz.txt' }).click();
 
   await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText('Baz', {
@@ -32,6 +33,37 @@ test('editor should reflect changes made from webcontainer in file in nested fol
   await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText('Foo', {
     useInnerText: true,
   });
+  expect(await page.getByRole('button', { name: 'other.txt' }).count()).toEqual(0);
+});
+
+test('editor should reflect changes made from webcontainer in specified paths', async ({ page }) => {
+  const testCase = 'watch-glob';
+  await page.goto(`${BASE_URL}/${testCase}`);
+
+  await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText('Initial content\n', {
+    useInnerText: true,
+  });
+
+  await page.getByTestId('write-to-file').click();
+
+  await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText('Something else', {
+    useInnerText: true,
+  });
+});
+
+test('editor should reflect new files added in specified paths in webcontainer', async ({ page }) => {
+  const testCase = 'watch-glob';
+  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 }) => {

packages/runtime/package.json

@@ -35,9 +35,11 @@
   "dependencies": {
     "@tutorialkit/types": "workspace:*",
     "@webcontainer/api": "1.2.4",
-    "nanostores": "^0.10.3"
+    "nanostores": "^0.10.3",
+    "picomatch": "^4.0.2"
   },
   "devDependencies": {
+    "@types/picomatch": "^3.0.1",
     "typescript": "^5.4.5",
     "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2",

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/tutorial-runner.ts

@@ -1,5 +1,6 @@
 import type { CommandsSchema, Files } from '@tutorialkit/types';
 import type { IFSWatcher, WebContainer, WebContainerProcess } from '@webcontainer/api';
+import picomatch from 'picomatch';
 import { newTask, type Task, type TaskCancelled } from '../tasks.js';
 import { MultiCounter } from '../utils/multi-counter.js';
 import { clearTerminal, escapeCodes, type ITerminal } from '../utils/terminal.js';
@@ -65,7 +66,7 @@ export class TutorialRunner {
 
   private _ignoreFileEvents = new MultiCounter();
   private _watcher: IFSWatcher | undefined;
-  private _watchContentFromWebContainer = false;
+  private _watchContentFromWebContainer: string[] | boolean = false;
   private _readyToWatch = false;
 
   private _packageJsonDirty = false;
@@ -82,7 +83,7 @@ export class TutorialRunner {
     private _stepController: StepsController,
   ) {}
 
-  setWatchFromWebContainer(value: boolean) {
+  setWatchFromWebContainer(value: boolean | string[]) {
     this._watchContentFromWebContainer = value;
 
     if (this._readyToWatch && this._watchContentFromWebContainer) {
@@ -654,19 +655,39 @@ export class TutorialRunner {
         return;
       }
 
-      // for now we only care about 'change' event
-      if (eventType !== 'change') {
+      if (
+        Array.isArray(this._watchContentFromWebContainer) &&
+        !this._watchContentFromWebContainer.some((pattern) => picomatch.isMatch(filePath, pattern))
+      ) {
         return;
       }
 
-      // we ignore all paths that aren't exposed in the `_editorStore`
-      const file = this._editorStore.documents.get()[filePath];
+      if (eventType === 'change') {
+        // 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' && Array.isArray(this._watchContentFromWebContainer)) {
+        const segments = filePath.split('/');
+        segments.forEach((_, index) => {
+          if (index == segments.length - 1) {
+            return;
+          }
 
-      scheduleReadFor(filePath, typeof file.value === 'string' ? 'utf-8' : null);
+          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');
+      }
     });
   }