feat: upgrade to prettier 3 and prettier-plugin-svelte 3 (#10410)

This will give users the new versions via create-svelte. The rest of the change is internal closes #10751 closes #10716 --------- Co-authored-by: Tee Ming <chewteeming01@gmail.com>
sveltejs · Nov 13, 2023 · cbd60cc · cbd60cc
1 parent 2903eb9
commit cbd60cc
Show file tree

Hide file tree

Showing 118 changed files with 278 additions and 288 deletions.
diff --git a/.changeset/ten-bats-sneeze.md b/.changeset/ten-bats-sneeze.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': minor
+---
+
+feat: upgrade to prettier 3 and prettier-plugin-svelte 3
diff --git a/.prettierrc b/.prettierrc
@@ -3,6 +3,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
 	"overrides": [
 		{
 			"files": ["*.svelte"],

diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
 		"postinstall": "pnpm -r generate:types"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.26.0",
+		"@changesets/cli": "^2.26.2",
 		"@rollup/plugin-commonjs": "^25.0.0",
 		"@rollup/plugin-json": "^6.0.0",
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -32,7 +32,7 @@
 		"eslint-plugin-svelte": "^2.31.0",
 		"eslint-plugin-unicorn": "^49.0.0",
 		"playwright": "1.30.0",
-		"prettier": "^2.8.0",
+		"prettier": "^3.1.0",
 		"rollup": "^3.29.4",
 		"svelte": "^4.2.2",
 		"typescript": "^4.9.4"

diff --git a/packages/adapter-auto/package.json b/packages/adapter-auto/package.json
@@ -25,7 +25,7 @@
 		"adapters.js"
 	],
 	"scripts": {
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+		"lint": "prettier --check .",
 		"format": "pnpm lint --write",
 		"check": "tsc"
 	},

diff --git a/packages/adapter-cloudflare-workers/package.json b/packages/adapter-cloudflare-workers/package.json
@@ -25,7 +25,7 @@
 		"index.d.ts"
 	],
 	"scripts": {
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+		"lint": "prettier --check .",
 		"format": "pnpm lint --write",
 		"check": "tsc"
 	},

diff --git a/packages/adapter-cloudflare/package.json b/packages/adapter-cloudflare/package.json
@@ -26,7 +26,7 @@
 	],
 	"scripts": {
 		"build": "esbuild src/worker.js --bundle --outfile=files/worker.js --external:SERVER --external:MANIFEST --format=esm",
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+		"lint": "prettier --check .",
 		"format": "pnpm lint --write",
 		"check": "tsc --skipLibCheck",
 		"prepublishOnly": "pnpm build"

diff --git a/packages/adapter-netlify/package.json b/packages/adapter-netlify/package.json
@@ -28,7 +28,7 @@
 		"build": "node -e \"fs.rmSync('files', { force: true, recursive: true })\" && rollup -c && cp src/edge.js files/edge.js",
 		"test": "vitest run",
 		"check": "tsc",
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+		"lint": "prettier --check .",
 		"format": "pnpm lint --write",
 		"prepublishOnly": "pnpm build"
 	},

diff --git a/packages/adapter-node/package.json b/packages/adapter-node/package.json
@@ -28,7 +28,7 @@
 		"build": "node -e \"fs.rmSync('files', { force: true, recursive: true })\" && rollup -c",
 		"test": "echo \"tests temporarily disabled\" # c8 vitest run",
 		"check": "tsc",
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+		"lint": "prettier --check .",
 		"format": "pnpm lint --write",
 		"prepublishOnly": "pnpm build"
 	},

diff --git a/packages/adapter-static/package.json b/packages/adapter-static/package.json
@@ -24,7 +24,7 @@
 		"platforms.js"
 	],
 	"scripts": {
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+		"lint": "prettier --check .",
 		"check": "tsc",
 		"format": "pnpm lint --write",
 		"test": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test"

diff --git a/packages/adapter-static/test/apps/prerendered/src/app.html b/packages/adapter-static/test/apps/prerendered/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/packages/adapter-static/test/apps/spa/src/app.html b/packages/adapter-static/test/apps/spa/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/packages/adapter-static/test/apps/spa/src/routes/+layout.svelte b/packages/adapter-static/test/apps/spa/src/routes/+layout.svelte
@@ -3,4 +3,4 @@
 	<a href="/about">about</a>
 </nav>
 
-<slot></slot>
+<slot />
diff --git a/packages/adapter-static/test/apps/spa/src/routes/+page.svelte b/packages/adapter-static/test/apps/spa/src/routes/+page.svelte
@@ -1 +1 @@
-<h1>This page was not prerendered</h1>
+<h1>This page was not prerendered</h1>
diff --git a/packages/adapter-static/test/apps/spa/src/routes/about/+page.svelte b/packages/adapter-static/test/apps/spa/src/routes/about/+page.svelte
@@ -1 +1 @@
-<h1>This page was prerendered</h1>
+<h1>This page was prerendered</h1>
diff --git a/packages/adapter-vercel/package.json b/packages/adapter-vercel/package.json
@@ -25,7 +25,7 @@
 		"index.d.ts"
 	],
 	"scripts": {
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+		"lint": "prettier --check .",
 		"format": "pnpm lint --write",
 		"check": "tsc",
 		"test": "vitest run"

diff --git a/packages/amp/package.json b/packages/amp/package.json
@@ -23,7 +23,7 @@
 		"index.d.ts"
 	],
 	"scripts": {
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+		"lint": "prettier --check .",
 		"format": "pnpm lint --write"
 	},
 	"peerDependencies": {

diff --git a/packages/create-svelte/.gitignore b/packages/create-svelte/.gitignore
@@ -11,4 +11,4 @@
 /templates/*/.vercel_build_output
 /templates/*/.netlify
 /templates/*/dist
-/templates/*/package
+/templates/*/package
diff --git a/packages/create-svelte/package.json b/packages/create-svelte/package.json
@@ -18,10 +18,9 @@
 	"devDependencies": {
 		"@playwright/test": "1.30.0",
 		"@types/gitignore-parser": "^0.0.2",
-		"@types/prettier": "^2.7.1",
 		"gitignore-parser": "^0.0.2",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
+		"prettier": "^3.1.0",
+		"prettier-plugin-svelte": "^3.0.0",
 		"sucrase": "^3.29.0",
 		"svelte": "^4.2.2",
 		"tiny-glob": "^0.2.9",
@@ -31,7 +30,7 @@
 		"build": "node scripts/build-templates",
 		"test": "pnpm build && vitest run",
 		"check": "tsc",
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path ../../.gitignore --ignore-path .gitignore --plugin prettier-plugin-svelte --plugin-search-dir=.",
+		"lint": "prettier --check . --config ../../.prettierrc --ignore-path ../../.gitignore --ignore-path .gitignore",
 		"format": "pnpm lint --write",
 		"prepublishOnly": "pnpm build",
 		"postpublish": "echo \"Updating template repo\" && bash ./scripts/update-template-repo.sh"

diff --git a/packages/create-svelte/scripts/build-templates.js b/packages/create-svelte/scripts/build-templates.js
@@ -7,7 +7,7 @@ import glob from 'tiny-glob/sync.js';
 import { mkdirp, rimraf } from '../utils.js';
 
 /** @param {string} content */
-function convert_typescript(content) {
+async function convert_typescript(content) {
 	let { code } = transform(content, {
 		transforms: ['typescript'],
 		disableESTransforms: true
@@ -19,7 +19,7 @@ function convert_typescript(content) {
 	// Prettier strips 'unnecessary' parens from .ts files, we need to hack them back in
 	code = code.replace(/(\/\*\* @type.+? \*\/) (.+?) \/\*\*\*\//g, '$1($2)');
 
-	return prettier.format(code, {
+	return await prettier.format(code, {
 		parser: 'babel',
 		useTabs: true,
 		singleQuote: true,
@@ -78,7 +78,8 @@ async function generate_templates(shared) {
 			null: []
 		};
 
-		glob('**/*', { cwd, filesOnly: true, dot: true }).forEach((name) => {
+		const files = glob('**/*', { cwd, filesOnly: true, dot: true });
+		for (const name of files) {
 			// the package.template.json thing is a bit annoying — basically we want
 			// to be able to develop and deploy the app from here, but have a different
 			// package.json in newly created projects (based on package.template.json)
@@ -87,14 +88,14 @@ async function generate_templates(shared) {
 				// TODO package-specific versions
 				contents = contents.replace(/workspace:\*/g, 'next');
 				fs.writeFileSync(`${dir}/package.json`, contents);
-				return;
+				continue;
 			}
 
 			// ignore files that are written conditionally
-			if (shared.has(name)) return;
+			if (shared.has(name)) continue;
 
 			// ignore contents of .gitignore or .ignore
-			if (!gitignore.accepts(name) || !ignore.accepts(name) || name === '.ignore') return;
+			if (!gitignore.accepts(name) || !ignore.accepts(name) || name === '.ignore') continue;
 
 			if (/\.(ts|svelte)$/.test(name)) {
 				const contents = fs.readFileSync(path.join(cwd, name), 'utf8');
@@ -103,7 +104,7 @@ async function generate_templates(shared) {
 					if (name.endsWith('app.d.ts')) types.checkjs.push({ name, contents });
 					types.typescript.push({ name, contents });
 				} else if (name.endsWith('.ts')) {
-					const js = convert_typescript(contents);
+					const js = await convert_typescript(contents);
 
 					types.typescript.push({
 						name,
@@ -125,9 +126,14 @@ async function generate_templates(shared) {
 					// possible (e.g. preserving double line breaks). Sucrase is the best
 					// tool for the job because it just removes the types; Prettier then
 					// tidies up the end result
-					const js_contents = contents.replace(
+					const js_contents = await replace_async(
+						contents,
 						/<script([^>]+)>([\s\S]+?)<\/script>/g,
-						(m, attrs, typescript) => {
+						async (
+							/** @type {any} */ m,
+							/** @type {string} */ attrs,
+							/** @type {string} */ typescript
+						) => {
 							// Sucrase assumes 'unused' imports (which _are_ used, but only
 							// in the markup) are type imports, and strips them. This step
 							// prevents it from drawing that conclusion
@@ -149,14 +155,15 @@ async function generate_templates(shared) {
 								disableESTransforms: true
 							}).code.slice(0, -suffix.length);
 
-							const contents = prettier
-								.format(transformed, {
+							const contents = (
+								await prettier.format(transformed, {
 									parser: 'babel',
 									useTabs: true,
 									singleQuote: true,
 									trailingComma: 'none',
 									printWidth: 100
 								})
+							)
 								.trim()
 								.replace(/^(.)/gm, '\t$1');
 
@@ -184,7 +191,7 @@ async function generate_templates(shared) {
 				mkdirp(path.dirname(dest));
 				fs.copyFileSync(path.join(cwd, name), dest);
 			}
-		});
+		}
 
 		fs.copyFileSync(meta_file, `${dir}/meta.json`);
 		fs.writeFileSync(
@@ -196,6 +203,20 @@ async function generate_templates(shared) {
 	}
 }
 
+/**
+ * @param {string} string
+ * @param {RegExp} regexp
+ * @param {{ (m: any, attrs: string, typescript: string): Promise<string>; (arg0: any): any; }} replacer
+ */
+async function replace_async(string, regexp, replacer) {
+	const replacements = await Promise.all(
+		// @ts-ignore
+		Array.from(string.matchAll(regexp), (match) => replacer(...match))
+	);
+	let i = 0;
+	return string.replace(regexp, () => replacements[i++]);
+}
+
 async function generate_shared() {
 	const cwd = path.resolve('shared');
 
@@ -205,7 +226,8 @@ async function generate_shared() {
 	/** @type {Array<{ name: string, include: string[], exclude: string[], contents: string }>} */
 	const files = [];
 
-	glob('**/*', { cwd, filesOnly: true, dot: true }).forEach((file) => {
+	const globbed = glob('**/*', { cwd, filesOnly: true, dot: true });
+	for (const file of globbed) {
 		const contents = fs.readFileSync(path.join(cwd, file), 'utf8');
 
 		/** @type {string[]} */
@@ -232,7 +254,7 @@ async function generate_shared() {
 		if (name.endsWith('.ts') && !include.includes('typescript')) {
 			// file includes types in TypeScript and JSDoc —
 			// create .js file, with and without JSDoc
-			const js = convert_typescript(contents);
+			const js = await convert_typescript(contents);
 			const js_name = name.replace(/\.ts$/, '.js');
 
 			// typescript
@@ -265,7 +287,7 @@ async function generate_shared() {
 			shared.add(name);
 			files.push({ name, include, exclude, contents });
 		}
-	});
+	}
 
 	files.sort((a, b) => a.include.length + a.exclude.length - (b.include.length + b.exclude.length));
 

diff --git a/packages/create-svelte/shared/+eslint+prettier/package.json b/packages/create-svelte/shared/+eslint+prettier/package.json
@@ -3,7 +3,7 @@
 		"eslint-config-prettier": "^8.5.0"
 	},
 	"scripts": {
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
 	}
 }
diff --git a/packages/create-svelte/shared/+prettier/.prettierrc b/packages/create-svelte/shared/+prettier/.prettierrc
@@ -4,6 +4,5 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/packages/create-svelte/shared/+prettier/package.json b/packages/create-svelte/shared/+prettier/package.json
@@ -1,6 +1,6 @@
 {
 	"devDependencies": {
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1"
+		"prettier": "^3.0.0",
+		"prettier-plugin-svelte": "^3.0.0"
 	}
 }
diff --git a/packages/create-svelte/shared/-eslint+prettier/package.json b/packages/create-svelte/shared/-eslint+prettier/package.json
@@ -1,6 +1,6 @@
 {
 	"scripts": {
-		"lint": "prettier --plugin-search-dir . --check .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
 	}
 }
diff --git a/packages/create-svelte/templates/default/src/app.html b/packages/create-svelte/templates/default/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/packages/create-svelte/templates/skeleton/src/app.html b/packages/create-svelte/templates/skeleton/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/packages/create-svelte/templates/skeletonlib/src/app.html b/packages/create-svelte/templates/skeletonlib/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/packages/enhanced-img/.prettierignore b/packages/enhanced-img/.prettierignore
@@ -0,0 +1 @@
+test/Output.svelte
diff --git a/packages/enhanced-img/package.json b/packages/enhanced-img/package.json
@@ -11,9 +11,9 @@
 	"homepage": "https://kit.svelte.dev",
 	"type": "module",
 	"scripts": {
-		"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+		"lint": "prettier --check .",
 		"check": "tsc",
-		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore",
+		"format": "prettier --write .",
 		"test": "vitest"
 	},
 	"files": [