-
Notifications
You must be signed in to change notification settings - Fork 102
feat: sync new files from WebContainer to editor #394
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: sync new files from WebContainer to editor #394
Conversation
Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.
@AriPerkkio
AriPerkkio
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
commented
Oct 28, 2024
That API would work for me. I'm happy to implement it once @Nemikolh has a chance to review.
Nemikolh
commented
Oct 28, 2024
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
Nemikolh
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks pretty good!
Once this is implemented using watch, we can merge it ✨
b920c77 to
00f514a
Compare
isaacplmann
commented
Oct 29, 2024
PR and description updated to allow an array in the filesystem.watch property
isaacplmann
commented
Oct 30, 2024
- Now accounting for
renamefile deletion - Folder creation logic moved into
scheduleReadFor - Use
picomatch/posix - e2e tests for everything
@Nemikolh
Nemikolh
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fantastic work on this @isaacplmann ! 🤩
Love it 😍
Co-authored-by: Jòan <Nemikolh@users.noreply.github.com>
@AriPerkkio
AriPerkkio
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yup the code looks good to me. I'll do some manual testing before next release. Probably tomorrow.
/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
AriPerkkio
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
commented
Nov 5, 2024
Updated documentation as well
@AriPerkkio
AriPerkkio
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, thanks @isaacplmann! 💯
AriPerkkio
commented
Nov 5, 2024
Released in 1.2.0.
Uh oh!
There was an error while loading. Please reload this page.
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
watchlesson property to take either abooleanorstring[]. If passing astring[]it is interpreted as a list of globs.I added e2e tests for the new functionality as well.
If
watchis false or undefined, existing files are not synced and new files are not created.If
watchis true, existing files are synced, but new files are not created.If
watchis an array of glob strings, existing files are synced and new files whose paths match one of the globs listed in thewatcharray 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.