Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Nov 13, 2023
Merged
5 changes: 5 additions & 0 deletions .changeset/ten-bats-sneeze.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'create-svelte': minor
---

feat: upgrade to prettier 3 and prettier-plugin-svelte 3
1 change: 1 addition & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"overrides": [
{
"files": ["*.svelte"],
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-auto/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"adapters.js"
],
"scripts": {
"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw these were removed - could someone clarify why? Or why they were needed before? (probably related to the major version bump?)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prettier now ignores files in .gitignore by default. It will also search up the directory tree for a config file, so you don't need to point at the config file

"lint": "prettier --check .",
"format": "pnpm lint --write",
"check": "tsc"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-cloudflare-workers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-cloudflare/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-netlify/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-node/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-static/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-static/test/apps/prerendered/src/app.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-static/test/apps/spa/src/app.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
<a href="/about">about</a>
</nav>

<slot></slot>
<slot />
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<h1>This page was not prerendered</h1>
<h1>This page was not prerendered</h1>
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<h1>This page was prerendered</h1>
<h1>This page was prerendered</h1>
2 changes: 1 addition & 1 deletion packages/adapter-vercel/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/amp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"index.d.ts"
],
"scripts": {
"lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
"lint": "prettier --check .",
"format": "pnpm lint --write"
},
"peerDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/create-svelte/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,4 @@
/templates/*/.vercel_build_output
/templates/*/.netlify
/templates/*/dist
/templates/*/package
/templates/*/package
7 changes: 3 additions & 4 deletions packages/create-svelte/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
Expand Down
52 changes: 37 additions & 15 deletions packages/create-svelte/scripts/build-templates.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand Down Expand Up @@ -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)
Expand All @@ -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');
Expand All @@ -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,
Expand All @@ -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
Expand All @@ -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');

Expand Down Expand Up @@ -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(
Expand All @@ -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');

Expand All @@ -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[]} */
Expand All @@ -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
Expand Down Expand Up @@ -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));

Expand Down
4 changes: 2 additions & 2 deletions packages/create-svelte/shared/+eslint+prettier/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"eslint-config-prettier": "^8.5.0"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't eslint-config-prettier be bumped to v9? It does not depend on Prettier v3, but it is the only outdated package as of now. Changelog

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes. thanks for the suggestion. PR here: #11037

},
"scripts": {
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
}
}
1 change: 0 additions & 1 deletion packages/create-svelte/shared/+prettier/.prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,5 @@
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
4 changes: 2 additions & 2 deletions packages/create-svelte/shared/+prettier/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
4 changes: 2 additions & 2 deletions packages/create-svelte/shared/-eslint+prettier/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"scripts": {
"lint": "prettier --plugin-search-dir . --check .",
"format": "prettier --plugin-search-dir . --write ."
"lint": "prettier --check .",
"format": "prettier --write ."
}
}
2 changes: 1 addition & 1 deletion packages/create-svelte/templates/default/src/app.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down
2 changes: 1 addition & 1 deletion packages/create-svelte/templates/skeleton/src/app.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down
2 changes: 1 addition & 1 deletion packages/create-svelte/templates/skeletonlib/src/app.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down
1 change: 1 addition & 0 deletions packages/enhanced-img/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
test/Output.svelte
4 changes: 2 additions & 2 deletions packages/enhanced-img/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
Loading