breaking: init Svelte 5

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Dominic Gannaway <dg@domgan.com>

.changeset/config.json

@@ -5,7 +5,7 @@
 	"fixed": [],
 	"linked": [],
 	"access": "public",
-	"baseBranch": "svelte-4",
+	"baseBranch": "svelte-5",
 	"bumpVersionsWithWorkspaceProtocolOnly": true,
 	"ignore": ["!(@sveltejs/*|svelte)"]
 }

.eslintignore

@@ -0,0 +1,23 @@
+# NOTE: In general this should be kept in sync with .eslintignore
+
+**/dist/**
+**/config/**
+**/build/**
+**/playgrounds/sandbox/**
+**/npm/**
+**/*.js.flow
+**/*.d.ts
+**/playwright*/**
+**/vite.config.js
+**/vite.prod.config.js
+**/node_modules
+
+**/tests/**
+
+# documentation can contain invalid examples
+documentation/**
+
+# contains a fork of the REPL which doesn't adhere to eslint rules
+sites/svelte-5-preview/**
+# Wasn't checked previously, reenable at some point
+sites/svelte.dev/** 

.eslintrc.cjs

@@ -0,0 +1,54 @@
+module.exports = {
+	extends: ['@sveltejs'],
+
+	// TODO: add runes to eslint-plugin-svelte
+	globals: {
+		$state: true,
+		$derived: true,
+		$effect: true,
+		$props: true
+	},
+
+	overrides: [
+		{
+			// scripts and playground should be console logging so don't lint against them
+			files: ['playgrounds/**/*', 'scripts/**/*'],
+			rules: {
+				'no-console': 'off'
+			}
+		},
+		{
+			// the playgrounds can use public naming conventions since they're examples
+			files: ['playgrounds/**/*'],
+			rules: {
+				'lube/svelte-naming-convention': 'off'
+			}
+		},
+		{
+			files: ['packages/svelte/src/compiler/**/*'],
+			rules: {
+				'no-var': 'error'
+			}
+		}
+	],
+
+	plugins: ['lube'],
+
+	rules: {
+		'no-console': 'error',
+		'lube/svelte-naming-convention': ['error', { fixSameNames: true }],
+		// eslint isn't that well-versed with JSDoc to know that `foo: /** @type{..} */ (foo)` isn't a violation of this rule, so turn it off
+		'object-shorthand': 'off',
+		'no-var': 'off',
+
+		// TODO: enable these rules and run `pnpm lint:fix`
+		// skipping that for now so as to avoid impacting real work
+		'@typescript-eslint/array-type': 'off',
+		'@typescript-eslint/no-namespace': 'off',
+		'@typescript-eslint/no-non-null-assertion': 'off',
+		'@typescript-eslint/no-unused-vars': 'off',
+		'prefer-const': 'off',
+		'svelte/valid-compile': 'off',
+		quotes: 'off'
+	}
+};

.github/workflows/ci.yml

@@ -1,7 +1,7 @@
 name: CI
 on:
   push:
-    branches: [svelte-4]
+    branches: [svelte-5]
   pull_request:
 permissions:
   contents: read # to fetch code (actions/checkout)

.github/workflows/ecosystem-ci-trigger.yml

@@ -61,11 +61,11 @@ jobs:
               repo: pr.head.repo.full_name
             }
       - id: generate-token
-        uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92  #keep pinned for security reasons, currently 1.8.0
+        uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92 #keep pinned for security reasons, currently 1.8.0
         with:
           app_id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }}
           private_key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }}
-          repository: "${{ github.repository_owner }}/svelte-ecosystem-ci"
+          repository: '${{ github.repository_owner }}/svelte-ecosystem-ci'
       - uses: actions/github-script@v6
         id: trigger
         env:

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     branches:
-      - svelte-4
+      - svelte-5
 
 permissions: {}
 jobs:

.gitignore

@@ -1,6 +1,27 @@
+# Dependency directories
+node_modules/
+
+# IDE related
 .idea
-.DS_Store
 .vscode/*
 !.vscode/launch.json
-node_modules
+
+# Test coverage
+coverage
+*.lcov
+
+# Optional eslint cache
 .eslintcache
+
+# dotenv environment variables file
+.env
+.env.test
+
+# build output
+dist
+.vercel
+
+# OS-specific
+.DS_Store
+
+tmp

.prettierignore

@@ -0,0 +1,30 @@
+# NOTE: In general this should be kept in sync with .eslintignore
+
+packages/**/dist/*.js
+packages/**/build/*.js
+packages/**/npm/**/*
+packages/**/config/*.js
+packages/svelte/tests/**/*.svelte
+packages/svelte/tests/**/_expected*
+packages/svelte/tests/**/_actual*
+packages/svelte/tests/**/expected*
+packages/svelte/tests/**/_output
+packages/svelte/tests/**/shards/*.test.js
+packages/svelte/tests/hydration/samples/*/_before.html
+packages/svelte/tests/hydration/samples/*/_before_head.html
+packages/svelte/tests/hydration/samples/*/_after.html
+packages/svelte/tests/hydration/samples/*/_after_head.html
+packages/svelte/types
+packages/svelte/compiler.cjs
+playgrounds/demo/src
+playgrounds/sandbox/input/**.svelte
+playgrounds/sandbox/output
+**/*.md
+**/node_modules
+**/.svelte-kit
+flow-typed
+.github/CODEOWNERS
+.prettierignore
+.eslintignore
+pnpm-lock.yaml
+pnpm-workspace.yaml

.prettierrc

@@ -18,6 +18,5 @@
 				"tabWidth": 2
 			}
 		}
-	],
-	"pluginSearchDirs": ["."]
+	]
 }

.vscode/launch.json

@@ -14,7 +14,7 @@
 			"name": "Playground: Server",
 			"outputCapture": "std",
 			"program": "start.js",
-			"cwd": "${workspaceFolder}/packages/playground",
+			"cwd": "${workspaceFolder}/playgrounds/demo",
 			"cascadeTerminateToConfigurations": ["Playground: Browser"]
 		}
 	],

documentation/examples/06-lifecycle/02-update/App.svelte

@@ -31,22 +31,28 @@
 
 			const reply = eliza.transform(text);
 
-			setTimeout(() => {
-				comments = comments.concat({
-					author: 'eliza',
-					text: '...',
-					placeholder: true
-				});
-
-				setTimeout(() => {
-					comments = comments
-						.filter((comment) => !comment.placeholder)
-						.concat({
-							author: 'eliza',
-							text: reply
-						});
-				}, 500 + Math.random() * 500);
-			}, 200 + Math.random() * 200);
+			setTimeout(
+				() => {
+					comments = comments.concat({
+						author: 'eliza',
+						text: '...',
+						placeholder: true
+					});
+
+					setTimeout(
+						() => {
+							comments = comments
+								.filter((comment) => !comment.placeholder)
+								.concat({
+									author: 'eliza',
+									text: reply
+								});
+						},
+						500 + Math.random() * 500
+					);
+				},
+				200 + Math.random() * 200
+			);
 		}
 	}
 </script>

documentation/examples/17-special-elements/00-svelte-self/Folder.svelte

@@ -34,8 +34,8 @@
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
-		border:none;
-		font-size:14px;
+		border: none;
+		font-size: 14px;
 	}
 
 	.expanded {

documentation/examples/21-miscellaneous/02-immutable-data/App.svelte

@@ -27,10 +27,10 @@
 
 <h2>Immutable</h2>
 {#each todos as todo}
-	<ImmutableTodo {todo} on:click={() => toggle(todo.id)} /><br>
+	<ImmutableTodo {todo} on:click={() => toggle(todo.id)} /><br />
 {/each}
 
 <h2>Mutable</h2>
 {#each todos as todo}
-	<MutableTodo {todo} on:click={() => toggle(todo.id)} /><br>
+	<MutableTodo {todo} on:click={() => toggle(todo.id)} /><br />
 {/each}

documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte

@@ -23,8 +23,8 @@
 <style>
 	button {
 		cursor: pointer;
-		border:none;
-		background:none;
-		font-size:14px;
+		border: none;
+		background: none;
+		font-size: 14px;
 	}
 </style>

documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte

@@ -21,8 +21,8 @@
 <style>
 	button {
 		cursor: pointer;
-		border:none;
-		background:none;
-		font-size:14px;
+		border: none;
+		background: none;
+		font-size: 14px;
 	}
 </style>

documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte

@@ -13,6 +13,6 @@
 
 <style>
 	button {
-		width:200px;
+		width: 200px;
 	}
 </style>

documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte

@@ -13,6 +13,6 @@
 
 <style>
 	button {
-		width:200px;
+		width: 200px;
 	}
 </style>

documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte

@@ -34,7 +34,7 @@
 		padding: 0.2em 1em 0.3em;
 		text-align: center;
 		border-radius: 0.2em;
-		color:#333333;
+		color: #333333;
 		background-color: #ffdfd3;
 	}
 </style>

documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte

@@ -34,7 +34,7 @@
 		padding: 0.2em 1em 0.3em;
 		text-align: center;
 		border-radius: 0.2em;
-		color:#333333;
+		color: #333333;
 		background-color: #ffdfd3;
 	}
 </style>

documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte

@@ -31,22 +31,28 @@
 
 			const reply = eliza.transform(text);
 
-			setTimeout(() => {
-				comments = comments.concat({
-					author: 'eliza',
-					text: '...',
-					placeholder: true
-				});
-
-				setTimeout(() => {
-					comments = comments
-						.filter((comment) => !comment.placeholder)
-						.concat({
-							author: 'eliza',
-							text: reply
-						});
-				}, 500 + Math.random() * 500);
-			}, 200 + Math.random() * 200);
+			setTimeout(
+				() => {
+					comments = comments.concat({
+						author: 'eliza',
+						text: '...',
+						placeholder: true
+					});
+
+					setTimeout(
+						() => {
+							comments = comments
+								.filter((comment) => !comment.placeholder)
+								.concat({
+									author: 'eliza',
+									text: reply
+								});
+						},
+						500 + Math.random() * 500
+					);
+				},
+				200 + Math.random() * 200
+			);
 		}
 	}
 </script>