add TypeScript support at project init

.changeset/soft-bats-build.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Add TypeScript support at project init

packages/create-svelte/cli/index.js

@@ -6,6 +6,7 @@ import { mkdirp } from '@sveltejs/app-utils';
 import gitignore_contents from '../template/.gitignore';
 import prompts from 'prompts/lib/index';
 import glob from 'tiny-glob/sync';
+import add_typescript from './modifications/add_typescript.js';
 
 async function main() {
 	const target = process.argv[2] || '.';
@@ -52,6 +53,21 @@ async function main() {
 	fs.writeFileSync(pkg_file, pkg_json.replace(/workspace:/g, '').replace('~TODO~', name));
 
 	console.log(bold(green(`✔ Copied project files`)));
+
+	// modifications
+	const modifications = [['Use TypeScript in components?', false, add_typescript]];
+
+	for (const [message, initial, fn] of modifications) {
+		const response = await prompts({
+			type: 'confirm',
+			name: 'value',
+			message,
+			initial
+		});
+
+		await fn(target, response.value);
+	}
+
 	console.log(`\nNext steps:`);
 	let i = 1;
 

packages/create-svelte/cli/modifications/add_typescript.js

@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path from 'path';
+import { bold, cyan, green } from 'kleur/colors';
+
+export default async function add_typescript(cwd, yes) {
+	if (yes) {
+		// update package.json
+		const pkg_file = path.join(cwd, 'package.json');
+		const pkg_json = fs.readFileSync(pkg_file, 'utf-8');
+		const pkg = JSON.parse(pkg_json);
+
+		pkg.devDependencies['typescript'] = '^4.0.0';
+
+		fs.writeFileSync(pkg_file, JSON.stringify(pkg, null, '\t'));
+
+		// update example component
+		const file = path.join(cwd, 'src/components/Counter.svelte');
+		const code = fs.readFileSync(file, 'utf-8');
+		fs.writeFileSync(file, code.replace('<script>', '<script lang="ts">').replace('let count = 0', 'let count: number = 0'));
+
+		console.log(bold(green(`✔ Added 'typescript' to package.json`)));
+	} else {
+		console.log(`You can add TypeScript support later with ${bold(cyan('npm install -D typescript'))}`);
+	}
+}

packages/create-svelte/template/package.json

@@ -9,6 +9,7 @@
 		"@sveltejs/adapter-node": "workspace:0.0.7",
 		"@sveltejs/kit": "workspace:0.0.17",
 		"@sveltejs/snowpack-config": "workspace:^0.0.3",
-		"svelte": "^3.29.0"
+		"svelte": "^3.29.0",
+		"svelte-preprocess": "^4.5.1"
 	}
 }

packages/create-svelte/template/src/components/Counter.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let count = 0;
+	let count = 0;
 
 	const increment = () => {
 		count += 1;

packages/create-svelte/template/svelte.config.js

@@ -1,6 +1,12 @@
+const preprocess = require('svelte-preprocess');
+
 module.exports = {
 	// By default, `npm run build` will create a standard Node app.
 	// You can create optimized builds for different platforms by
 	// specifying a different adapter
-	adapter: '@sveltejs/adapter-node'
+	adapter: '@sveltejs/adapter-node',
+
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: preprocess()
 };