From ff89a6a7a6cb4020d282f79589712402110c6351 Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Wed, 7 Jul 2021 16:31:42 -0500
Subject: [PATCH] fix: make create-astro component injection less brittle
 (#623)

---
 packages/create-astro/src/index.ts | 32 ++++++++----------------------
 1 file changed, 8 insertions(+), 24 deletions(-)

diff --git a/packages/create-astro/src/index.ts b/packages/create-astro/src/index.ts
index 73410d6e3..36ad1934b 100644
--- a/packages/create-astro/src/index.ts
+++ b/packages/create-astro/src/index.ts
@@ -159,30 +159,14 @@ export async function main() {
 
     const pageFileLoc = path.resolve(path.join(cwd, 'src', 'pages', 'index.astro'));
     const content = (await fs.promises.readFile(pageFileLoc)).toString();
-    const lines = content.split('\n');
-    const indent = '        ';
-    const doc = `\n<!-- 
-   - Use imported Framework Components directly in your markup!
-   - 
-   - Note: by default, components are NOT interactive on the client.
-   - The \`:visible\` directive tells Astro to make it interactive.
-   -
-   - See https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/component-hydration.md
-   -->
-`;
-    lines.splice(
-      41,
-      0,
-      importStatements.length > 0
-        ? doc
-            .split('\n')
-            .map((ln) => `${indent}${ln}`)
-            .join('\n')
-        : '',
-      ...components.map((ln) => `${indent}${ln}`)
-    );
-    lines.splice(3, 0, importStatements.length > 0 ? `// Framework Component Imports` : '', ...importStatements);
-    await fs.promises.writeFile(pageFileLoc, lines.join('\n'));
+    const newContent = content
+      .replace(/^(\s*)\/\* ASTRO\:COMPONENT_IMPORTS \*\//gm, (_, indent) => {
+        return indent + importStatements.join('\n');
+      })
+      .replace(/^(\s*)<!-- ASTRO:COMPONENT_MARKUP -->/gm, (_, indent) => {
+        return components.map(ln => indent + ln).join('\n');
+      });
+    await fs.promises.writeFile(pageFileLoc, newContent);
   }
 
   console.log(bold(green('✔') + ' Done!'));