search

stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
504 stars 48 forks source link

feat: sync files from WebContainer to editor #334

Closed Nemikolh closed 2 months ago

Nemikolh commented 2 months ago

This PR adds a new property filesystem to the metadata of a Tutorial / Chapter / Lesson:

filesystem:
  syncChanges: true # default to false

When syncChanges is set to true, if files are modified on WebContainer via a terminal or by a process spawned manually via the webcontainer export on tutorialkit:core, the changes will be reflected in the editor.

Closes #208

This is opt-in because it can have a performance impact on the UI if lots of files are being modified / generated.

In the future we will likely accept boolean | string for syncChanges to be able to narrow down the watched files and improve performance.

stackblitz[bot] commented 2 months ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

cloudflare-workers-and-pages[bot] commented 2 months ago

Deploying tutorialkit-demo-page with  Cloudflare Pages  Cloudflare Pages

Latest commit: c716577
Status: ✅  Deploy successful!
Preview URL: https://987bfb79.tutorialkit-demo-page.pages.dev
Branch Preview URL: https://joan-sync-files-from-fs.tutorialkit-demo-page.pages.dev

View logs

Nemikolh commented 2 months ago

Thanks for the questions! :smiley: Answering inline:

Does this enable users to create files from terminal/commands so that they appear in file editor?

It does not at the moment. I was thinking we would do this later. Maybe as part of the filesystem.visible work you started?

What do you think?

If not, maybe this doesn't close #208?

I think it does. Or at least based on what the first comment says:

I'm creating a NgRx (Angular state management library) and the first step is to add the library with the ng add @ngrx/store@latest. It adds the dependency in package.json and updates some files.

I added all these files in the _files folder as the student task is to run the script and sees how it affect the project. However even if the command succeeds, the files are not updated.

I think we can consider it closed when we merge this PR.

We should keep https://github.com/stackblitz/tutorialkit/pull/165 in mind during this PR. I think that could be filesystem.visible: string | string[].

Oh I really like that naming! :star2:

Naming of filesystem.syncChanges. As this could in future also allow globs for watched files, should we rename this to filesystem.watch instead?

Ah yeah this makes more sense, I'll rename it :+1:

AriPerkkio commented 2 months ago

Does this enable users to create files from terminal/commands so that they appear in file editor?

It does not at the moment. I was thinking we would do this later. Maybe as part of the filesystem.visible work you started?

What do you think?

Sounds good to me, let's leave it to the next PR.

Nemikolh commented 2 months ago

Oh very good point!!

Dang, I knew there was something missing with testing and this PR :sweat_smile: , I'll add it :+1: