refactor: syncChanges -> watch

Author: Nemikolh

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx

@@ -221,7 +221,7 @@ type Command = string
 ##### `filesystem`
 Configures how changes such as files being modified or added in WebContainer should be reflected in the editor when they weren't caused by the user directly. By default, the editor will not reflect these changes.
 
-An example use case is when a user runs a command that modifies a file. For instance when a `package.json` is modified by doing an `npm install <xyz>`. If `syncChanges` is set to `true`, the file will be updated in the editor. If set to `false`, the file will not be updated.
+An example use case is when a user runs a command that modifies a file. For instance when a `package.json` is modified by doing an `npm install <xyz>`. If `watch` is set to `true`, the file will be updated in the editor. If set to `false`, the file will not be updated.
 
 This property is by default set to `false` as it can impact performance. If you are creating a lesson where the user is expected to modify files directly, you may want to keep this to `false`.
 
@@ -231,7 +231,7 @@ The `FileSystem` type has the following shape:
 
 ```ts
 type FileSystem = {
-  syncChanges: boolean
+  watch: boolean
 }
 
 ```
@@ -240,10 +240,10 @@ Example values:
 
 ```yaml
 filesystem:
-  syncChanges: true  # Filesystem changes are reflected in the editor
+  watch: true  # Filesystem changes are reflected in the editor
 
 filesystem:
-  syncChanges: false # Or if it's omitted, the default value is false
+  watch: false # Or if it's omitted, the default value is false
 ```
 
 

e2e/src/content/tutorial/tests/filesystem-sync/meta.md

@@ -1,6 +1,6 @@
 ---
 type: chapter
-title: filesystem.syncChanges
+title: filesystem.watch
 filesystem:
-  syncChanges: true
+  watch: true
 ---

packages/runtime/src/store/index.ts

@@ -150,7 +150,7 @@ export class TutorialStore {
       return;
     }
 
-    this._runner.setSyncChangesFromWebContainer(lesson.data.filesystem?.syncChanges ?? false);
+    this._runner.setWatchFromWebContainer(lesson.data.filesystem?.watch ?? false);
 
     this._lessonTask = newTask(
       async (signal) => {

packages/runtime/src/store/tutorial-runner.ts

@@ -65,7 +65,7 @@ export class TutorialRunner {
 
   private _ignoreFileEvents = new MultiCounter();
   private _watcher: IFSWatcher | undefined;
-  private _syncContentFromWebContainer = false;
+  private _watchContentFromWebContainer = false;
   private _readyToWatch = false;
 
   private _packageJsonDirty = false;
@@ -82,12 +82,12 @@ export class TutorialRunner {
     private _stepController: StepsController,
   ) {}
 
-  setSyncChangesFromWebContainer(value: boolean) {
-    this._syncContentFromWebContainer = value;
+  setWatchFromWebContainer(value: boolean) {
+    this._watchContentFromWebContainer = value;
 
-    if (this._readyToWatch && this._syncContentFromWebContainer) {
+    if (this._readyToWatch && this._watchContentFromWebContainer) {
       this._webcontainer.then((webcontainer) => this._setupWatcher(webcontainer));
-    } else if (!this._syncContentFromWebContainer) {
+    } else if (!this._watchContentFromWebContainer) {
       this._stopWatcher();
     }
   }
@@ -565,7 +565,7 @@ export class TutorialRunner {
     this._readyToWatch = true;
 
     // if the watcher is alreay setup or we don't sync content we exit
-    if (this._watcher || !this._syncContentFromWebContainer) {
+    if (this._watcher || !this._watchContentFromWebContainer) {
       return;
     }
 

packages/template/src/content/tutorial/1-basics/meta.md

@@ -2,5 +2,5 @@
 type: part
 title: Basics
 filesystem:
-  syncChanges: true
+  watch: true
 ---

packages/types/src/schemas/common.ts

@@ -56,7 +56,7 @@ export const previewSchema = z.union([
 export type PreviewSchema = z.infer<typeof previewSchema>;
 
 export const fileSystemSchema = z.object({
-  syncChanges: z
+  watch: z
     .boolean()
     .optional()
     .describe('When set to true, when a file is changed in WebContainer, it is updated in the editor as well.'),