feat(runtime): support glob patterns in editor.fileTree.allowEdits

Author: AriPerkkio

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

@@ -144,9 +144,11 @@ File tree can be set to allow file editing from right clicks by setting `fileTre
 The `Editor` type has the following shape:
 
 ```ts
+type GlobPattern = string
+
 type Editor =
     | false
-    | { editor: { allowEdits: boolean } }
+    | { editor: { allowEdits: boolean | GlobPattern | GlobPattern[] } }
 
 ```
 
@@ -161,6 +163,18 @@ editor: # Editor is visible
 editor: # Editor is visible
   fileTree: # File tree is visible
     allowEdits: true # User can add new files and folders from the file tree
+
+
+editor: # Editor is visible
+  fileTree: # File tree is visible
+    allowEdits: "/src/**" # User can add files and folders anywhere inside "/src/"
+
+editor: # Editor is visible
+  fileTree: # File tree is visible
+    allowEdits:
+      - "/*" # User can add files and folders directly in the root
+      - "/first-level/allowed-filename-only.js" # Only "allowed-filename-only.js" inside "/first-level" folder
+      - "**/second-level/**" # Anything inside "second-level" folders anywhere
 ```
 
 ##### `previews`

packages/runtime/src/webcontainer/editor-config.spec.ts

@@ -0,0 +1,125 @@
+import { expect, test } from 'vitest';
+import { EditorConfig } from './editor-config.js';
+
+expect.addSnapshotSerializer({
+  serialize: (val: EditorConfig) => JSON.stringify({ visible: val.visible, fileTree: val.fileTree }, null, 2),
+  test: (val) => val instanceof EditorConfig,
+});
+
+test('sets default values', () => {
+  const config = new EditorConfig();
+
+  expect(config).toMatchInlineSnapshot(`
+    {
+      "visible": true,
+      "fileTree": {
+        "visible": true,
+        "allowEdits": false
+      }
+    }
+  `);
+});
+
+test('false hides editor', () => {
+  const config = new EditorConfig(false);
+
+  expect(config).toMatchInlineSnapshot(`
+    {
+      "visible": false,
+      "fileTree": {
+        "visible": false,
+        "allowEdits": false
+      }
+    }
+  `);
+});
+
+test('true enables editor, doesnt allow editing', () => {
+  const config = new EditorConfig(true);
+
+  expect(config).toMatchInlineSnapshot(`
+    {
+      "visible": true,
+      "fileTree": {
+        "visible": true,
+        "allowEdits": false
+      }
+    }
+  `);
+});
+
+test('"fileTree: false" hides fileTree', () => {
+  const config = new EditorConfig({ fileTree: false });
+
+  expect(config).toMatchInlineSnapshot(`
+    {
+      "visible": true,
+      "fileTree": {
+        "visible": false,
+        "allowEdits": false
+      }
+    }
+  `);
+});
+
+test('"fileTree: true" enables fileTree, disables editing', () => {
+  const config = new EditorConfig({ fileTree: true });
+
+  expect(config.fileTree).toMatchInlineSnapshot(`
+    {
+      "allowEdits": false,
+      "visible": true,
+    }
+  `);
+});
+
+test('"fileTree.allowEdits: true" allows editing all entries', () => {
+  const config = new EditorConfig({ fileTree: { allowEdits: true } });
+
+  expect(config.fileTree).toMatchInlineSnapshot(`
+    {
+      "allowEdits": [
+        "**",
+      ],
+      "visible": true,
+    }
+  `);
+});
+
+test('"fileTree.allowEdits: false" disables all editing', () => {
+  const config = new EditorConfig({ fileTree: { allowEdits: false } });
+
+  expect(config.fileTree).toMatchInlineSnapshot(`
+    {
+      "allowEdits": false,
+      "visible": true,
+    }
+  `);
+});
+
+test('"fileTree.allowEdits" is converted to array', () => {
+  const config = new EditorConfig({ fileTree: { allowEdits: '/src/**' } });
+
+  expect(config.fileTree).toMatchInlineSnapshot(`
+    {
+      "allowEdits": [
+        "/src/**",
+      ],
+      "visible": true,
+    }
+  `);
+});
+
+test('"fileTree.allowEdits: [...]" works', () => {
+  const config = new EditorConfig({ fileTree: { allowEdits: ['/src/**', '**/*.test.ts'] } });
+
+  expect(config.fileTree).toMatchInlineSnapshot(`
+    {
+      "allowEdits": [
+        "/src/**",
+        "**/*.test.ts",
+      ],
+      "visible": true,
+    }
+  `);
+});

packages/runtime/src/webcontainer/editor-config.ts

@@ -9,7 +9,7 @@ interface NormalizedEditorConfig {
     visible: boolean;
 
     /** Whether to allow file and folder editing in file tree */
-    allowEdits: boolean;
+    allowEdits: false | string[];
   };
 }
 
@@ -60,11 +60,25 @@ function normalizeEditorConfig(config?: EditorSchema): NormalizedEditorConfig {
     };
   }
 
+  if (typeof config.fileTree?.allowEdits === 'boolean' || !config.fileTree?.allowEdits) {
+    return {
+      visible: true,
+      fileTree: {
+        visible: true,
+        allowEdits: config.fileTree?.allowEdits ? ['**'] : false,
+      },
+    };
+  }
+
   return {
     visible: true,
     fileTree: {
       visible: true,
-      allowEdits: config.fileTree?.allowEdits || false,
+      allowEdits: toArray(config.fileTree.allowEdits),
     },
   };
 }
+
+function toArray<T>(items: T | T[]): T[] {
+  return Array.isArray(items) ? items : [items];
+}

packages/types/src/schemas/common.ts

@@ -174,7 +174,16 @@ export const editorSchema = z.union([
         // or configure file tree with options
         z.strictObject({
           allowEdits: z
-            .boolean()
+            .union([
+              // allow editing all files or disable completely
+              z.boolean(),
+
+              // limit file editing to files and folders that match a single glob pattern
+              z.string(),
+
+              // limit file editing to files and folders that match one of multiple glob patterns
+              z.array(z.string()),
+            ])
             .describe(
               'Allow file tree’s items to be edited by right clicking them. Supports file and folder creation.',
             ),