From d788cf27e0f6014bd0773c70e6200f2bfe6d96ef Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 11 Feb 2022 17:31:25 +0100
Subject: [PATCH] [feat] use preserveValueImports flag in create-svelte (#3064)

TypeScript doesn't know about import usages in the template because it only sees the script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher, therefore also bump the version of TS and Prettier (the latter in order to deal with the new TS syntax).
Turning on preserveValueImports turns off the advanced but somewhat brittle import transpilation in svelte-preprocess which should give a small performance boost and more robustness.
---
 .changeset/metal-ears-travel.md                         | 5 +++++
 packages/create-svelte/shared/+prettier/package.json    | 4 ++--
 packages/create-svelte/shared/+typescript/package.json  | 4 ++--
 packages/create-svelte/shared/+typescript/tsconfig.json | 9 +++++++--
 4 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/metal-ears-travel.md

diff --git a/.changeset/metal-ears-travel.md b/.changeset/metal-ears-travel.md
new file mode 100644
index 000000000000..6960e7799183
--- /dev/null
+++ b/.changeset/metal-ears-travel.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+use preserveValueImports flag
diff --git a/packages/create-svelte/shared/+prettier/package.json b/packages/create-svelte/shared/+prettier/package.json
index e1c015443375..d107ca805a97 100644
--- a/packages/create-svelte/shared/+prettier/package.json
+++ b/packages/create-svelte/shared/+prettier/package.json
@@ -1,6 +1,6 @@
 {
 	"devDependencies": {
-		"prettier": "^2.4.1",
-		"prettier-plugin-svelte": "^2.4.0"
+		"prettier": "^2.5.1",
+		"prettier-plugin-svelte": "^2.5.0"
 	}
 }
diff --git a/packages/create-svelte/shared/+typescript/package.json b/packages/create-svelte/shared/+typescript/package.json
index e4c19f69a1c9..0f7aa043383a 100644
--- a/packages/create-svelte/shared/+typescript/package.json
+++ b/packages/create-svelte/shared/+typescript/package.json
@@ -4,9 +4,9 @@
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"typescript": "^4.4.3",
+		"typescript": "~4.5.4",
 		"tslib": "^2.3.1",
 		"svelte-check": "^2.2.6",
-		"svelte-preprocess": "^4.9.4"
+		"svelte-preprocess": "^4.10.1"
 	}
 }
diff --git a/packages/create-svelte/shared/+typescript/tsconfig.json b/packages/create-svelte/shared/+typescript/tsconfig.json
index 0555d526aa29..7b5a0dc0d400 100644
--- a/packages/create-svelte/shared/+typescript/tsconfig.json
+++ b/packages/create-svelte/shared/+typescript/tsconfig.json
@@ -7,14 +7,19 @@
 		/**
 			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",
+		/**
+			TypeScript doesn't know about import usages in the template because it only sees the
+			script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
+		*/
+		"preserveValueImports": true,
 		"isolatedModules": true,
 		"resolveJsonModule": true,
 		/**
 			To have warnings/errors of the Svelte compiler at the correct position,
 			enable source maps by default.
-			*/
+		*/
 		"sourceMap": true,
 		"esModuleInterop": true,
 		"skipLibCheck": true,