Add template tsconfigs for users to extend from (#4439)

* Add tsconfig templates to extend from

* Add changeset

* Right order for assign parameters

* Add tsconfigs to export map

4 files changed, 33 insertions, 63 deletions

diff --git a/packages/create-astro/package.json b/packages/create-astro/package.json
index aee43f726..ba21ac1e8 100644
--- a/packages/create-astro/package.json
+++ b/packages/create-astro/package.json
@@ -30,6 +30,7 @@
   ],
   "dependencies": {
     "chalk": "^5.0.1",
+    "comment-json": "^4.2.3",
     "degit": "^2.8.4",
     "execa": "^6.1.0",
     "kleur": "^4.1.4",
diff --git a/packages/create-astro/src/index.ts b/packages/create-astro/src/index.ts
index c3d86912f..3e7d4f4d2 100644
--- a/packages/create-astro/src/index.ts
+++ b/packages/create-astro/src/index.ts
@@ -1,4 +1,5 @@
 /* eslint no-console: 'off' */
+import { assign, parse, stringify } from 'comment-json';
 import degit from 'degit';
 import { execa, execaCommand } from 'execa';
 import fs from 'fs';
@@ -7,7 +8,6 @@ import ora from 'ora';
 import os from 'os';
 import path from 'path';
 import prompts from 'prompts';
-import url from 'url';
 import detectPackageManager from 'which-pm-runs';
 import yargs from 'yargs-parser';
 import { loadWithRocketGradient, rocketAscii } from './gradient.js';
@@ -117,6 +117,7 @@ export async function main() {
 	const hash = args.commit ? `#${args.commit}` : '';
 
 	// Don't touch the template name if a GitHub repo was provided, ex: `--template cassidoo/shopify-react-astro`
+	const isThirdParty = options.template.includes('/');
 	const templateTarget = options.template.includes('/')
 		? options.template
 		: `withastro/astro/examples/${options.template}#latest`;
@@ -308,7 +309,7 @@ export async function main() {
 				{
 					title: 'Strictest',
 					description: 'Enable all typechecking rules',
-					value: 'stricter',
+					value: 'strictest',
 				},
 				{
 					title: 'I prefer not to use TypeScript',
@@ -335,7 +336,7 @@ export async function main() {
 		console.log(`  Astro supports TypeScript inside of ".astro" component scripts, so`);
 		console.log(`  we still need to create some TypeScript-related files in your project.`);
 		console.log(`  You can safely ignore these files, but don't delete them!`);
-		console.log(dim('  (ex: tsconfig.json, src/types.d.ts)'));
+		console.log(dim('  (ex: tsconfig.json, src/env.d.ts)'));
 		console.log(``);
 		tsResponse.typescript = 'default';
 		await wait(300);
@@ -344,14 +345,34 @@ export async function main() {
 		ora().info(dim(`--dry-run enabled, skipping.`));
 	} else if (tsResponse.typescript) {
 		if (tsResponse.typescript !== 'default') {
-			fs.copyFileSync(
-				path.join(
-					url.fileURLToPath(new URL('..', import.meta.url)),
-					'tsconfigs',
-					`tsconfig.${tsResponse.typescript}.json`
-				),
-				path.join(cwd, 'tsconfig.json')
-			);
+			const templateTSConfigPath = path.join(cwd, 'tsconfig.json');
+			fs.readFile(templateTSConfigPath, (err, data) => {
+				if (err && err.code === 'ENOENT') {
+					// If the template doesn't have a tsconfig.json, let's add one instead
+					fs.writeFileSync(
+						templateTSConfigPath,
+						stringify({ extends: `astro/tsconfigs/${tsResponse.typescript}` }, null, 2)
+					);
+
+					return;
+				}
+
+				const templateTSConfig = parse(data.toString());
+
+				if (templateTSConfig && typeof templateTSConfig === 'object') {
+					const result = assign(templateTSConfig, {
+						extends: `astro/tsconfigs/${tsResponse.typescript}`,
+					});
+
+					fs.writeFileSync(templateTSConfigPath, stringify(result, null, 2));
+				} else {
+					console.log(
+						yellow(
+							"There was an error applying the requested TypeScript settings. This could be because the template's tsconfig.json is malformed"
+						)
+					);
+				}
+			});
 		}
 		ora().succeed('TypeScript settings applied!');
 	}
diff --git a/packages/create-astro/tsconfigs/tsconfig.strict.json b/packages/create-astro/tsconfigs/tsconfig.strict.json
deleted file mode 100644
index a2ebcb5c4..000000000
--- a/packages/create-astro/tsconfigs/tsconfig.strict.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    // Enable top-level await, and other modern ESM features.
-    "target": "ESNext",
-    "module": "ESNext",
-    // Enable node-style module resolution, for things like npm package imports.
-    "moduleResolution": "node",
-    // Enable JSON imports.
-    "resolveJsonModule": true,
-    // Enable stricter transpilation for better output.
-    "isolatedModules": true,
-    // Astro will directly run your TypeScript code, no transpilation needed.
-    "noEmit": true,
-    // Enable strict type checking.
-    "strict": true,
-    // Error when a value import is only used as a type.
-    "importsNotUsedAsValues": "error"
-  }
-}
diff --git a/packages/create-astro/tsconfigs/tsconfig.stricter.json b/packages/create-astro/tsconfigs/tsconfig.stricter.json
deleted file mode 100644
index 2d046f7c0..000000000
--- a/packages/create-astro/tsconfigs/tsconfig.stricter.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    // Enable top-level await, and other modern ESM features.
-    "target": "ESNext",
-    "module": "ESNext",
-    // Enable node-style module resolution, for things like npm package imports.
-    "moduleResolution": "node",
-    // Enable JSON imports.
-    "resolveJsonModule": true,
-    // Enable stricter transpilation for better output.
-    "isolatedModules": true,
-    // Astro will directly run your TypeScript code, no transpilation needed.
-    "noEmit": true,
-    // Enable strict type checking.
-    "strict": true,
-    // Error when a value import is only used as a type.
-    "importsNotUsedAsValues": "error",
-    // Report errors for fallthrough cases in switch statements
-    "noFallthroughCasesInSwitch": true,
-    // Force functions designed to override their parent class to be specified as `override`.
-    "noImplicitOverride": true,
-    // Force functions to specify that they can return `undefined` if a possible code path does not return a value.
-    "noImplicitReturns": true,
-    // Report an error when a variable is declared but never used.
-    "noUnusedLocals": true,
-    // Report an error when a parameter is declared but never used.
-    "noUnusedParameters": true,
-    // Force the usage of the indexed syntax to access fields declared using an index signature.
-    "noUncheckedIndexedAccess": true,
-    // Report an error when the value `undefined` is given to an optional property that doesn't specify `undefined` as a valid value.
-    "exactOptionalPropertyTypes": true
-  }
-}