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 <[email protected]>
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": [