feat: sync new files from WebContainer to editor

[isaacplmann]

I work at Nx and in order to use tutorialkit for our tutorials, we need the editor to show files that are created by terminal commands.

This PR shows a prototype that enables the editor to show new files in the webcontainer that are created in a specific set of paths. This is needed to use tutorialkit for Nx tutorials.

Updates the watch lesson property to take either a boolean or string[]. If passing a string[] it is interpreted as a list of globs.

I added e2e tests for the new functionality as well.

If watch is false or undefined, existing files are not synced and new files are not created.
If watch is true, existing files are synced, but new files are not created.
If watch is an array of glob strings, existing files are synced and new files whose paths match one of the globs listed in the watch array are created in the editor. Files that are deleted in one of the glob patterns are removed from the editor. New files that are not in those paths do not get added to the editor.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[AriPerkkio]

In #334 it was discussed whether we should allow fs.watch: [<glob>, <glob>]. I think instead of adding new addNewFilesInPaths, we should instead make this a default functionality of fs.watch. And add pattern matching for fs.watch to avoid performance issues.

@Nemikolh has better understanding of fs.watch so let's wait for his comments before any changes.

[isaacplmann]

That API would work for me. I'm happy to implement it once @Nemikolh has a chance to review.

[Nemikolh]

Hey! Thanks a ton for the PR 😃

The proposal of having watch accepting [<glob>] to restrict what get reflected in the file tree, sounds really good! 🙌

In terms of performance concerns, we won't be able to provide that down to fs.watch just yet. It's something we want to add at some point though but it should not block this PR from landing.

[Nemikolh]

Looks pretty good!

Once this is implemented using watch, we can merge it ✨

[isaacplmann]

PR and description updated to allow an array in the filesystem.watch property

[isaacplmann]

• Now accounting for rename file deletion
• Folder creation logic moved into scheduleReadFor
• Use picomatch/posix
• e2e tests for everything

[Nemikolh]

Fantastic work on this @isaacplmann ! 🤩

Love it 😍

[AriPerkkio]

Yup the code looks good to me. I'll do some manual testing before next release. Probably tomorrow.

[AriPerkkio]

/pkg-pr-new

⚡️ Your npm packages are published.
@tutorialkit/react: npm i https://pkg.pr.new/@tutorialkit/react@e288f4e
@tutorialkit/astro: npm i https://pkg.pr.new/@tutorialkit/astro@e288f4e
@tutorialkit/runtime: npm i https://pkg.pr.new/@tutorialkit/runtime@e288f4e
@tutorialkit/theme: npm i https://pkg.pr.new/@tutorialkit/theme@e288f4e
@tutorialkit/types: npm i https://pkg.pr.new/@tutorialkit/types@e288f4e

[AriPerkkio]

There's a bug in new file/folder creation. Empty folders are added/duplicated. Is this just related to the test case or an actual bug?

tk-fs-bug.mov

[isaacplmann]

Updated documentation as well

[AriPerkkio]

Looks good, thanks @isaacplmann! 💯

[AriPerkkio]

Released in 1.2.0.