feat: sync new files from WebContainer to editor

isaacplmann commented 3 weeks ago

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.

stackblitz[bot] commented 3 weeks ago

Run & review this pull request in StackBlitz Codeflow.

isaacplmann commented 3 weeks ago

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

Nemikolh commented 3 weeks ago

Hey! Thanks a ton for the PR :smiley:

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

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.

isaacplmann commented 3 weeks ago

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

isaacplmann commented 3 weeks ago

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

AriPerkkio commented 3 weeks ago

/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

isaacplmann commented 2 weeks ago

Updated documentation as well

AriPerkkio commented 2 weeks ago

Released in 1.2.0.

stackblitz / tutorialkit

feat: sync new files from WebContainer to editor #394