@alloy-js/core 0.19.0-dev.3 → 0.19.0

package/dist/src/render.js

@@ -8,7 +8,7 @@ import { effect, getContext, getElementCache, isCustomContext, root, untrack } f
 import { isRefkey } from "./refkey.js";
 import { isComponentCreator } from "./runtime/component.js";
 import { isIntrinsicElement } from "./runtime/intrinsic.js";
-import { flushJobs } from "./scheduler.js";
+import { flushJobs, flushJobsAsync } from "./scheduler.js";
 import { trace, TracePhase } from "./tracer.js";
 const {
   builders: {
@@ -129,6 +129,14 @@ export function isPrintHook(type) {
 export function render(children, options) {
   const tree = renderTree(children);
   flushJobs();
+  return sourceFilesForTree(tree, options);
+}
+export async function renderAsync(children, options) {
+  const tree = renderTree(children);
+  await flushJobsAsync();
+  return sourceFilesForTree(tree, options);
+}
+export function sourceFilesForTree(tree, options) {
   let rootDirectory = undefined;
 
   // when passing Output, the first render tree child is the Output component.
@@ -174,6 +182,17 @@ export function render(children, options) {
         })
       };
       currentDirectory.contents.push(sourceFile);
+    } else if (context.meta?.copyFile) {
+      if (!currentDirectory) {
+        // This shouldn't happen if you're using the Output component.
+        throw new Error("Copy file doesn't have parent directory. Make sure you have used the Output component.");
+      }
+      const sourceFile = {
+        kind: "file",
+        path: context.meta?.copyFile.path,
+        sourcePath: context.meta?.copyFile.sourcePath
+      };
+      currentDirectory.contents.push(sourceFile);
     } else {
       recurse(currentDirectory);
     }

package/dist/src/resource.d.ts

@@ -0,0 +1,80 @@
+import { Ref } from "@vue/reactivity";
+/**
+ * Represents an external resource fetched asynchronously.
+ */
+export interface Resource<T> {
+    /**
+     * The data if it's been loaded successfully. Null when not yet loaded or
+     * there was an error.
+     */
+    data: T | null;
+    /**
+     * Whether the resource is still being fetched.
+     */
+    loading: boolean;
+    /**
+     * The error loading the resource, if any.
+     */
+    error: null | Error;
+}
+/**
+ * Create a resource that fetches data asynchronously.
+ *
+ * This function has two overloads:
+ * 1. Simple fetcher - fetches data once when the resource is created
+ * 2. Reactive fetcher - fetches data when a reactive source changes
+ *
+ * @example
+ * ```typescript
+ * // Simple usage - fetches data once when created
+ * const userResource = createResource(async () => {
+ *   const response = await fetch('/api/user');
+ *   return response.json();
+ * });
+ *
+ * // Access the resource state
+ * console.log(userResource.loading); // true initially
+ * console.log(userResource.data);    // null initially
+ * console.log(userResource.error);   // null initially
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Reactive usage - fetches data when the ref changes
+ * const userId = ref(1);
+ *
+ * const userResource = createResource(userId, async (id) => {
+ *   const response = await fetch(`/api/user/${id}`);
+ *   return response.json();
+ * });
+ *
+ * // The fetcher will be called automatically when userId changes
+ * userId.value = 2; // This triggers a new fetch with id=2
+ * ```
+ */
+export declare function createResource<U>(fetcher: () => Promise<U>): Resource<U>;
+/**
+ * Create a resource that fetches data asynchronously based on a reactive source.
+ */
+export declare function createResource<T, U>(refSource: Ref<T> | (() => T), fetcher: (input: T) => Promise<U>): Resource<U>;
+/**
+ * Create a resource that reads a file from the file system.
+ *
+ * This is a convenience function that creates a resource for reading file content
+ * using the AlloyHost file system API. The file is read as text when the resource
+ * is created.
+ *
+ * @example
+ * ```typescript
+ * // Read a configuration file
+ * const configResource = createFileResource('./config.json');
+ *
+ * // Access the file content
+ * if (!configResource.loading && !configResource.error) {
+ *   const configText = configResource.data; // string content of the file
+ *   const config = JSON.parse(configText);
+ * }
+ * ```
+ */
+export declare function createFileResource(path: string): Resource<string>;
+//# sourceMappingURL=resource.d.ts.map

package/dist/src/resource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource.d.ts","sourceRoot":"","sources":["../../src/resource.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAKvD;;GAEG;AACH,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB;;;OAGG;IACH,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,KAAK,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC1E;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,EACjC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAC7B,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAChC,QAAQ,CAAC,CAAC,CAAC,CAAC;AA4Df;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,oBAI9C"}

package/dist/src/resource.js

@@ -0,0 +1,118 @@
+import { isRef, reactive } from "@vue/reactivity";
+import { AlloyHost } from "./host/alloy-host.js";
+import { effect } from "./reactivity.js";
+import { trackPromise } from "./scheduler.js";
+
+/**
+ * Represents an external resource fetched asynchronously.
+ */
+
+/**
+ * Create a resource that fetches data asynchronously.
+ *
+ * This function has two overloads:
+ * 1. Simple fetcher - fetches data once when the resource is created
+ * 2. Reactive fetcher - fetches data when a reactive source changes
+ *
+ * @example
+ * ```typescript
+ * // Simple usage - fetches data once when created
+ * const userResource = createResource(async () => {
+ *   const response = await fetch('/api/user');
+ *   return response.json();
+ * });
+ *
+ * // Access the resource state
+ * console.log(userResource.loading); // true initially
+ * console.log(userResource.data);    // null initially
+ * console.log(userResource.error);   // null initially
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Reactive usage - fetches data when the ref changes
+ * const userId = ref(1);
+ *
+ * const userResource = createResource(userId, async (id) => {
+ *   const response = await fetch(`/api/user/${id}`);
+ *   return response.json();
+ * });
+ *
+ * // The fetcher will be called automatically when userId changes
+ * userId.value = 2; // This triggers a new fetch with id=2
+ * ```
+ */
+
+/**
+ * Create a resource that fetches data asynchronously based on a reactive source.
+ */
+
+export function createResource(fetcherOrSource, maybeFetcher) {
+  let getter = null;
+  let fetcher;
+  if (arguments.length === 1) {
+    fetcher = fetcherOrSource;
+  } else {
+    getter = fetcherOrSource;
+    fetcher = maybeFetcher;
+  }
+  const resource = reactive({
+    data: null,
+    loading: true,
+    error: null
+  });
+  if (!getter) {
+    const promise = fetcher();
+    trackPromise(promise.then(result => {
+      resource.data = result;
+      resource.loading = false;
+    }).catch(error => {
+      resource.error = error;
+      resource.loading = false;
+    }));
+  } else {
+    effect(() => {
+      let input;
+      if (isRef(getter)) {
+        input = getter.value;
+      } else {
+        input = getter();
+      }
+      const promise = fetcher(input);
+      trackPromise(promise);
+      promise.then(result => {
+        resource.data = result;
+        resource.loading = false;
+      }, error => {
+        resource.error = error;
+        resource.loading = false;
+      });
+    });
+  }
+  return resource;
+}
+
+/**
+ * Create a resource that reads a file from the file system.
+ *
+ * This is a convenience function that creates a resource for reading file content
+ * using the AlloyHost file system API. The file is read as text when the resource
+ * is created.
+ *
+ * @example
+ * ```typescript
+ * // Read a configuration file
+ * const configResource = createFileResource('./config.json');
+ *
+ * // Access the file content
+ * if (!configResource.loading && !configResource.error) {
+ *   const configText = configResource.data; // string content of the file
+ *   const config = JSON.parse(configText);
+ * }
+ * ```
+ */
+export function createFileResource(path) {
+  return createResource(() => {
+    return AlloyHost.read(path).text();
+  });
+}

package/dist/src/scheduler.d.ts

@@ -4,5 +4,11 @@ export interface QueueJob {
 }
 export declare function scheduler(jobGetter: () => ReactiveEffectRunner, immediate?: boolean): () => void;
 export declare function queueJob(job: QueueJob, immediate?: boolean): void;
+/**
+ * Register a promise that the scheduler should wait for during flushJobs.
+ * This is used by async resources to ensure the scheduler waits for their completion.
+ */
+export declare function trackPromise(promise: Promise<any>): void;
 export declare function flushJobs(): void;
+export declare function flushJobsAsync(): Promise<void>;
 //# sourceMappingURL=scheduler.d.ts.map

package/dist/src/scheduler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scheduler.d.ts","sourceRoot":"","sources":["../../src/scheduler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,WAAW,QAAQ;IACvB,IAAI,GAAG,CAAC;CACT;AAID,wBAAgB,SAAS,CACvB,SAAS,EAAE,MAAM,oBAAoB,EACrC,SAAS,UAAQ,cAKlB;AACD,wBAAgB,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,UAAQ,QASxD;AAED,wBAAgB,SAAS,SAKxB"}
+{"version":3,"file":"scheduler.d.ts","sourceRoot":"","sources":["../../src/scheduler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,WAAW,QAAQ;IACvB,IAAI,GAAG,CAAC;CACT;AAKD,wBAAgB,SAAS,CACvB,SAAS,EAAE,MAAM,oBAAoB,EACrC,SAAS,UAAQ,cAKlB;AACD,wBAAgB,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,UAAQ,QASxD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,QAKjD;AAED,wBAAgB,SAAS,SAaxB;AAED,wBAAsB,cAAc,kBAiBnC"}

package/dist/src/scheduler.js

@@ -1,5 +1,6 @@
 const immediateQueue = new Set();
 const queue = new Set();
+const pendingPromises = new Set();
 export function scheduler(jobGetter, immediate = false) {
   return () => {
     queueJob(jobGetter(), immediate);
@@ -15,11 +16,46 @@ export function queueJob(job, immediate = false) {
     queue.add(job);
   }
 }
+
+/**
+ * Register a promise that the scheduler should wait for during flushJobs.
+ * This is used by async resources to ensure the scheduler waits for their completion.
+ */
+export function trackPromise(promise) {
+  pendingPromises.add(promise);
+  void promise.finally(() => {
+    pendingPromises.delete(promise);
+  });
+}
 export function flushJobs() {
+  // First, run all synchronous jobs
   let job;
   while ((job = takeJob()) !== null) {
     job();
   }
+
+  // If there are no pending promises, we're done
+  if (pendingPromises.size > 0) {
+    throw new Error("Asynchronous jobs were found but render was called synchronously. Use `asyncRender` instead.");
+  }
+}
+export async function flushJobsAsync() {
+  // Keep running jobs until both the queues are empty and all promises are resolved
+  while (true) {
+    // First, run all synchronous jobs
+    let job;
+    while ((job = takeJob()) !== null) {
+      job();
+    }
+
+    // If there are no pending promises, we're done
+    if (pendingPromises.size === 0) {
+      break;
+    }
+
+    // Wait for all current promises to complete
+    await Promise.allSettled(Array.from(pendingPromises));
+  }
 }
 function takeJob() {
   if (immediateQueue.size > 0) {

package/dist/src/write-output.d.ts

@@ -3,5 +3,5 @@ import { OutputDirectory } from "./render.js";
  * Write the output from {@link render} to the file system.
  *
  */
-export declare function writeOutput(output: OutputDirectory, basePath?: string): void;
+export declare function writeOutput(output: OutputDirectory, basePath?: string): Promise<void[]>;
 //# sourceMappingURL=write-output.d.ts.map

package/dist/src/write-output.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"write-output.d.ts","sourceRoot":"","sources":["../../src/write-output.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,eAAe,EAAE,QAAQ,GAAE,MAAW,QAwBzE"}
+{"version":3,"file":"write-output.d.ts","sourceRoot":"","sources":["../../src/write-output.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C;;;GAGG;AACH,wBAAsB,WAAW,CAC/B,MAAM,EAAE,eAAe,EACvB,QAAQ,GAAE,MAAW,mBAoDtB"}

package/dist/src/write-output.js

@@ -1,33 +1,52 @@
-import { existsSync, mkdirSync, writeFileSync } from "node:fs";
-import { relative, resolve } from "pathe";
+import { dirname, relative, resolve } from "pathe";
+import { AlloyHost } from "./host/alloy-host.js";
 import { traverseOutput } from "./utils.js";
 /**
  * Write the output from {@link render} to the file system.
  *
  */
-export function writeOutput(output, basePath = "") {
+export async function writeOutput(output, basePath = "") {
+  const ops = [];
   traverseOutput(output, {
     visitDirectory(directory) {
-      const path = resolve(basePath, directory.path);
-      if (existsSync(path)) {
-        return;
-      }
-      // eslint-disable-next-line no-console
-      console.log("create", relative(process.cwd(), path));
-      mkdirSync(path, {
-        recursive: true
-      });
-    },
-    visitFile(file) {
-      const path = resolve(basePath, file.path);
-      if (existsSync(path)) {
-        // eslint-disable-next-line no-console
-        console.log("overwrite", relative(process.cwd(), path));
-      } else {
+      ops.push((async () => {
+        const path = resolve(basePath, directory.path);
+        if (await AlloyHost.exists(path)) {
+          return;
+        }
         // eslint-disable-next-line no-console
         console.log("create", relative(process.cwd(), path));
-      }
-      writeFileSync(path, file.contents);
+        await AlloyHost.mkdir(path);
+      })());
+    },
+    visitFile(file) {
+      ops.push((async () => {
+        if ("contents" in file) {
+          const path = resolve(basePath, file.path);
+          if (await AlloyHost.exists(path)) {
+            // eslint-disable-next-line no-console
+            console.log("overwrite", relative(process.cwd(), path));
+          } else {
+            // eslint-disable-next-line no-console
+            console.log("create", relative(process.cwd(), path));
+          }
+          await AlloyHost.write(path, file.contents);
+        } else {
+          // copy file
+          const source = resolve(basePath, file.sourcePath);
+          const target = resolve(basePath, file.path);
+          if (await AlloyHost.exists(target)) {
+            // eslint-disable-next-line no-console
+            console.log("copy over", relative(process.cwd(), target));
+          } else {
+            // eslint-disable-next-line no-console
+            console.log("copy", relative(process.cwd(), target));
+          }
+          await AlloyHost.mkdir(dirname(target));
+          await AlloyHost.write(target, AlloyHost.read(source).stream());
+        }
+      })());
     }
   });
+  return Promise.all(ops);
 }

package/dist/test/components/append-file.test.d.ts

@@ -0,0 +1,2 @@
+import "../../testing/extend-expect.js";
+//# sourceMappingURL=append-file.test.d.ts.map

package/dist/test/components/append-file.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"append-file.test.d.ts","sourceRoot":"","sources":["../../../test/components/append-file.test.tsx"],"names":[],"mappings":"AAMA,OAAO,gCAAgC,CAAC"}

package/dist/test/components/append-file.test.js

@@ -0,0 +1,281 @@
+import { createComponent as _$createComponent } from "@alloy-js/core/jsx-runtime";
+import { existsSync, unlinkSync, writeFileSync } from "fs";
+import { tmpdir } from "os";
+import { join } from "path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { AppendFile, AppendRegion } from "../../src/components/AppendFile.js";
+import { render, renderAsync } from "../../src/render.js";
+import "../../testing/extend-expect.js";
+import { d } from "../../testing/render.js";
+describe("AppendFile", () => {
+  let testFilePath;
+  beforeEach(() => {
+    // Create a unique temporary file path for each test
+    testFilePath = join(tmpdir(), `test-append-file-${Date.now()}.txt`);
+  });
+  afterEach(() => {
+    // Clean up test file after each test
+    if (existsSync(testFilePath)) {
+      unlinkSync(testFilePath);
+    }
+  });
+  it("should append content to end of file when no sigils present", async () => {
+    // Create initial file content
+    writeFileSync(testFilePath, "Initial content", "utf-8");
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "append",
+          children: "New content"
+        });
+      }
+    });
+    await expect(result).toRenderToAsync("Initial content\nNew content");
+  });
+  it("should append content to end of file when no sigils present with no explicit append region", async () => {
+    // Create initial file content
+    writeFileSync(testFilePath, "Initial content", "utf-8");
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      children: "New content"
+    });
+    await expect(result).toRenderToAsync("Initial content\nNew content");
+  });
+  it("should append content within region sigils", async () => {
+    const initialContent = d`
+      Header content
+      <!-- alloy-main-start -->
+      <!-- alloy-main-end -->
+      Footer content
+    `;
+    writeFileSync(testFilePath, initialContent, "utf-8");
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      regions: ["main"],
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "main",
+          children: "New main content"
+        });
+      }
+    });
+    await expect(result).toRenderToAsync(d`
+      Header content
+      <!-- alloy-main-start -->
+      New main content
+      <!-- alloy-main-end -->
+      Footer content
+    `);
+  });
+  it("should handle multiple regions", async () => {
+    const initialContent = d`
+      <!-- alloy-header-start -->
+      <!-- alloy-header-end -->
+      Main content
+      <!-- alloy-footer-start -->
+      <!-- alloy-footer-end -->
+    `;
+    writeFileSync(testFilePath, initialContent, "utf-8");
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      regions: ["header", "footer"],
+      get children() {
+        return [_$createComponent(AppendRegion, {
+          id: "header",
+          children: "Header text"
+        }), _$createComponent(AppendRegion, {
+          id: "footer",
+          children: "Footer text"
+        })];
+      }
+    });
+    await expect(result).toRenderToAsync(d`
+      <!-- alloy-header-start -->
+      Header text
+      <!-- alloy-header-end -->
+      Main content
+      <!-- alloy-footer-start -->
+      Footer text
+      <!-- alloy-footer-end -->
+    `);
+  });
+  it("should preserve existing content and append new content", async () => {
+    const initialContent = d`
+      Header
+      <!-- alloy-main-start -->
+      Existing content
+      <!-- alloy-main-end -->
+      Footer
+    `;
+    writeFileSync(testFilePath, initialContent, "utf-8");
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      regions: ["main"],
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "main",
+          children: "New appended content"
+        });
+      }
+    });
+    await expect(result).toRenderToAsync(d`
+      Header
+      <!-- alloy-main-start -->
+      Existing content
+      New appended content
+      <!-- alloy-main-end -->
+      Footer
+    `);
+  });
+  it("should use content prop instead of children", async () => {
+    writeFileSync(testFilePath, "Start ", "utf-8");
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "append",
+          content: "End"
+        });
+      }
+    });
+    await expect(result).toRenderToAsync("Start\nEnd");
+  });
+  it("should default to 'append' region when no regions specified", async () => {
+    writeFileSync(testFilePath, "Content", "utf-8");
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "append",
+          children: "default region"
+        });
+      }
+    });
+    await expect(result).toRenderToAsync("Content\ndefault region");
+  });
+  it("should throw error when region is missing corresponding AppendRegion", async () => {
+    writeFileSync(testFilePath, "content", "utf-8");
+    expect(() => render(_$createComponent(AppendFile, {
+      path: testFilePath,
+      regions: ["missing"],
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "append",
+          children: "content"
+        });
+      }
+    }))).toThrow('Region "missing" specified but no corresponding AppendRegion child found');
+  });
+  it("should throw error when AppendRegion has neither children nor content", async () => {
+    writeFileSync(testFilePath, "content", "utf-8");
+    expect(() => render(_$createComponent(AppendFile, {
+      path: testFilePath,
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "append"
+        });
+      }
+    }))).toThrow('AppendRegion "append" must have either children or content');
+  });
+  it("should throw error when region has missing start sigil", async () => {
+    const contentWithOnlyEnd = d`
+      Content
+      <!-- alloy-incomplete-end -->
+    `;
+    writeFileSync(testFilePath, contentWithOnlyEnd, "utf-8");
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      regions: ["incomplete"],
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "incomplete",
+          children: "content"
+        });
+      }
+    });
+
+    // Should insert before the end sigil
+    await expect(result).toRenderToAsync(d`
+      Content
+      content
+      <!-- alloy-incomplete-end -->
+    `);
+  });
+  it("should throw error when region has missing end sigil", async () => {
+    const contentWithOnlyStart = d`
+      Content
+      <!-- alloy-incomplete-start -->
+    `;
+    writeFileSync(testFilePath, contentWithOnlyStart, "utf-8");
+    await expect(async () => renderAsync(_$createComponent(AppendFile, {
+      path: testFilePath,
+      regions: ["incomplete"],
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "incomplete",
+          children: "content"
+        });
+      }
+    }))).rejects.toThrow('Region "incomplete" has start sigil but no corresponding end sigil');
+  });
+  it("should handle complex nested content", async () => {
+    const initialContent = d`
+      <!-- alloy-config-start -->
+      <!-- alloy-config-end -->
+    `;
+    writeFileSync(testFilePath, initialContent, "utf-8");
+    const jsonContent = d`
+      {
+        "newProperty": "value",
+        "nested": {
+          "key": "data"
+        }
+      }
+    `;
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      regions: ["config"],
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "config",
+          children: jsonContent
+        });
+      }
+    });
+    await expect(result).toRenderToAsync(d`
+      <!-- alloy-config-start -->
+      {
+        "newProperty": "value",
+        "nested": {
+          "key": "data"
+        }
+      }
+      <!-- alloy-config-end -->
+    `);
+  });
+  it("should preserve indentation level of the end sigil", async () => {
+    const initialContent = d`
+      base
+        <!-- alloy-indented-start -->
+        <!-- alloy-indented-end -->
+    `;
+    writeFileSync(testFilePath, initialContent, "utf-8");
+    const result = _$createComponent(AppendFile, {
+      path: testFilePath,
+      regions: ["indented"],
+      get children() {
+        return _$createComponent(AppendRegion, {
+          id: "indented",
+          children: "new content"
+        });
+      }
+    });
+    await expect(result).toRenderToAsync(d`
+      base
+        <!-- alloy-indented-start -->
+        new content
+        <!-- alloy-indented-end -->
+    `);
+  });
+});