Use jsconfig in JS projects

.changeset/lemon-taxis-juggle.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+jsconfig for js projects

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

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import { bold, green } from 'kleur/colors';
-import path from 'path';
+import { join } from 'path';
 import { add_svelte_preprocess_to_config, update_component, update_package_json } from './utils';
 
 export default async function add_typescript(cwd, yes) {
@@ -14,6 +14,7 @@ export default async function add_typescript(cwd, yes) {
 			['<script>', '<script lang="ts">'],
 			['let count = 0', 'let count: number = 0']
 		]);
+		update_component(cwd, 'src/routes/index.svelte', [['<script>', '<script lang="ts">']]);
 		add_svelte_preprocess_to_config(cwd);
 		add_tsconfig(cwd);
 		add_d_ts_file(cwd);
@@ -32,94 +33,14 @@ export default async function add_typescript(cwd, yes) {
 }
 
 function add_tsconfig(cwd) {
-	fs.writeFileSync(
-		path.join(cwd, 'tsconfig.json'),
-		`{
-	"compilerOptions": {
-		"moduleResolution": "node",
-		"target": "es2017",
-		/**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-			*/
-		"importsNotUsedAsValues": "error",
-		"isolatedModules": true,
-		/**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-			*/
-		"sourceMap": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
-		"paths": {
-			"$components/*": ["./src/components/*"]
-		}
-	},
-	"include": ["src/**/*"],
-	"exclude": ["node_modules/*", ".svelte"]
-}`
-	);
+	fs.unlinkSync(join(cwd, 'jsconfig.json'));
+	copy_from_ts_template(cwd, 'tsconfig.json');
 }
 
 function add_d_ts_file(cwd) {
-	fs.writeFileSync(
-		path.join(cwd, 'src', 'globals.d.ts'),
-		`/// <reference types="@sveltejs/kit" />
-
-//#region Ensure Svelte file endings have a type for TypeScript
-/**
- * These declarations tell TypeScript that we allow import of Svelte files in TS files, e.g.
- * \`\`\`
-		import Component from './Component.svelte';
-	 \`\`\`
- */
-declare module '*.svelte' {
-	export { SvelteComponent as default } from 'svelte';
-}
-//#endregion
-
-//#region Ensure image file endings have a type for TypeScript
-/**
- * These declarations tell TypeScript that we allow import of images, e.g.
- * \`\`\`
-		<script lang='ts'>
-			import successkid from 'images/successkid.jpg';
-		</script>
-		<img src="{successkid}">
-	 \`\`\`
- */
-declare module "*.gif" {
-	const value: string;
-	export = value;
-}
-
-declare module "*.jpg" {
-	const value: string;
-	export = value;
-}
-
-declare module "*.jpeg" {
-	const value: string;
-	export = value;
-}
-
-declare module "*.png" {
-	const value: string;
-	export = value;
+	copy_from_ts_template(cwd, 'src', 'globals.d.ts');
 }
 
-declare module "*.svg" {
-	const value: string;
-	export = value;
-}
-
-declare module "*.webp" {
-	const value: string;
-	export = value;
-}
-//#endregion
-`
-	);
+function copy_from_ts_template(cwd, ...path) {
+	fs.copyFileSync(join(__dirname, 'ts-template', ...path), join(cwd, ...path));
 }

packages/create-svelte/template/tsconfig.json → packages/create-svelte/template/jsconfig.json

@@ -1,6 +1,5 @@
 {
 	"compilerOptions": {
-		"allowJs": true,
 		"paths": {
 			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
 			"$components/*": ["src/components/*"]

packages/create-svelte/ts-template/src/globals.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="@sveltejs/kit" />
+
+//#region Ensure Svelte file endings have a type for TypeScript
+/**
+ * These declarations tell TypeScript that we allow import of Svelte files in TS files, e.g.
+ * ```
+		import Component from './Component.svelte';
+	 ```
+ */
+declare module '*.svelte' {
+	export { SvelteComponent as default } from 'svelte';
+}
+//#endregion
+
+//#region Ensure image file endings have a type for TypeScript
+/**
+ * These declarations tell TypeScript that we allow import of images, e.g.
+ * ```
+        <script lang='ts'>
+            import successkid from 'images/successkid.jpg';
+        </script>
+        <img src="{successkid}">
+        ```
+    */
+declare module '*.gif' {
+	const value: string;
+	export = value;
+}
+
+declare module '*.jpg' {
+	const value: string;
+	export = value;
+}
+
+declare module '*.jpeg' {
+	const value: string;
+	export = value;
+}
+
+declare module '*.png' {
+	const value: string;
+	export = value;
+}
+
+declare module '*.svg' {
+	const value: string;
+	export = value;
+}
+
+declare module '*.webp' {
+	const value: string;
+	export = value;
+}
+//#endregion

packages/create-svelte/ts-template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"target": "es2017",
+		/**
+			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+			to enforce using \`import type\` instead of \`import\` for Types.
+			*/
+		"importsNotUsedAsValues": "error",
+		"isolatedModules": true,
+		/**
+			To have warnings/errors of the Svelte compiler at the correct position,
+			enable source maps by default.
+			*/
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": ".",
+		"allowJs": true,
+		"paths": {
+			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
+			"$components/*": ["src/components/*"]
+		}
+	},
+	"include": ["src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+}