chore: fix some broken examples on docs site

docs-svelte-kit/package.json

@@ -59,6 +59,7 @@
     "svelte": "^5.2.10",
     "svelte-adapter-ghpages": "0.2.2",
     "twoslash-eslint": "^0.2.12",
+    "twoslash-protocol": "^0.2.12",
     "util": "^0.12.5",
     "vite": "^6.0.1",
     "vite-plugin-svelte-md": "^0.1.7"

docs-svelte-kit/src/site.css

@@ -1,55 +1,66 @@
 /* @import "prismjs/themes/prism"; */
-@import "prismjs/themes/prism-tomorrow";
-@import "@shikijs/twoslash/style-rich.css";
+@import 'prismjs/themes/prism-tomorrow';
+@import '@shikijs/twoslash/style-rich.css';
 
 .twoslash .twoslash-popup-container {
-  transform: translateY(2em);
-  white-space: pre-wrap;
+	transform: translateY(2em);
+	white-space: pre-wrap;
+	margin-right: 32px;
+}
+
+.twoslash .twoslash-error > span:not(.twoslash-popup-container):not(:has(*)) {
+	/*
+	Since elements with no content have a width of zero and no wavy line is displayed,
+	we specify a minimum width to display the wavy line.
+	e.g. https://sveltejs.github.io/eslint-plugin-svelte/rules/html-closing-bracket-new-line/
+	*/
+	min-width: 6px;
+	display: inline-block;
 }
 
 /* theme */
 :root {
-  --primary-color: #ffffff;
-  --secondary-color: #676778;
-  --tertiary-color: #edf0f8;
-  --background-without-opacity: rgba(255, 255, 255, 0.95);
+	--primary-color: #ffffff;
+	--secondary-color: #676778;
+	--tertiary-color: #edf0f8;
+	--background-without-opacity: rgba(255, 255, 255, 0.95);
 }
 
 /*** markdown ***/
 
 :not(pre) > code {
-  padding: 0.1rem 0.4rem 0;
-  margin: 0 0.2rem;
-  background: #e5eef5;
-  position: relative;
-  border-radius: 0.3em;
-  white-space: nowrap;
-  color: #444;
-  -webkit-font-smoothing: initial;
+	padding: 0.1rem 0.4rem 0;
+	margin: 0 0.2rem;
+	background: #e5eef5;
+	position: relative;
+	border-radius: 0.3em;
+	white-space: nowrap;
+	color: #444;
+	-webkit-font-smoothing: initial;
 }
 
 blockquote {
-  padding: 1rem;
-  color: #09f;
-  border: 1px solid #40b3ff;
-  margin: 1.6rem 2.4rem 2.4rem;
-  padding: 0.5rem 2.4rem;
-  border-radius: 0.4rem;
+	padding: 1rem;
+	color: #09f;
+	border: 1px solid #40b3ff;
+	margin: 1.6rem 2.4rem 2.4rem;
+	padding: 0.5rem 2.4rem;
+	border-radius: 0.4rem;
 }
 blockquote p {
-  color: #09f;
+	color: #09f;
 }
 
 table {
-  margin: 0 0 2em;
-  width: 100%;
-  font-size: var(--h5);
+	margin: 0 0 2em;
+	width: 100%;
+	font-size: var(--h5);
 }
 td,
 th {
-  text-align: left;
-  border-bottom: 1px solid rgba(0 0 0 / 0.1);
-  padding: 0.4rem 0.8rem 0.4rem 0;
+	text-align: left;
+	border-bottom: 1px solid rgba(0 0 0 / 0.1);
+	padding: 0.4rem 0.8rem 0.4rem 0;
 }
 
 /* header */
@@ -58,89 +69,89 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 400;
-  color: var(--heading-color);
+	font-weight: 400;
+	color: var(--heading-color);
 }
 
 h2 {
-  font-size: 1.2rem;
+	font-size: 1.2rem;
 }
 h3,
 h4,
 h5,
 h6 {
-  font-size: 1rem;
+	font-size: 1rem;
 }
 
 /*** custom container ***/
 
 .custom-block .custom-block-title {
-  font-weight: 600;
-  margin-bottom: -0.4rem;
+	font-weight: 600;
+	margin-bottom: -0.4rem;
 }
 
 .custom-block.danger,
 .custom-block.tip,
 .custom-block.warning {
-  padding: 0.1rem 1.5rem;
-  border-left-width: 4px;
-  border-left-style: solid;
-  margin: 1rem 0;
+	padding: 0.1rem 1.5rem;
+	border-left-width: 4px;
+	border-left-style: solid;
+	margin: 1rem 0;
 }
 
 .custom-block.tip {
-  background-color: #f3f5f7;
-  border-color: #42b983;
+	background-color: #f3f5f7;
+	border-color: #42b983;
 }
 
 .custom-block.warning {
-  background-color: rgba(255, 229, 100, 0.3);
-  border-color: #e7c000;
-  color: #6b5900;
+	background-color: rgba(255, 229, 100, 0.3);
+	border-color: #e7c000;
+	color: #6b5900;
 }
 
 .custom-block.warning .custom-block-title {
-  color: #b29400;
+	color: #b29400;
 }
 
 .custom-block.warning a {
-  color: #2c3e50;
+	color: #2c3e50;
 }
 
 .custom-block.danger {
-  background-color: #ffe6e6;
-  border-color: #c00;
-  color: #4d0000;
+	background-color: #ffe6e6;
+	border-color: #c00;
+	color: #4d0000;
 }
 
 .custom-block.danger .custom-block-title {
-  color: #900;
+	color: #900;
 }
 
 .custom-block.danger a {
-  color: #2c3e50;
+	color: #2c3e50;
 }
 
 .custom-block.details {
-  display: block;
-  position: relative;
-  border-radius: 2px;
-  margin: 1.6em 0;
-  padding: 1.6em;
-  background-color: #eee;
+	display: block;
+	position: relative;
+	border-radius: 2px;
+	margin: 1.6em 0;
+	padding: 1.6em;
+	background-color: #eee;
 }
 
 .custom-block.details h4 {
-  margin-top: 0;
+	margin-top: 0;
 }
 
 .custom-block.details figure:last-child,
 .custom-block.details p:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
+	margin-bottom: 0;
+	padding-bottom: 0;
 }
 
 .custom-block.details summary {
-  outline: none;
-  cursor: pointer;
+	outline: none;
+	cursor: pointer;
 }

docs-svelte-kit/tools/vite-plugin-svelte-md-option.mts

@@ -9,9 +9,12 @@ import containerPluginOption from './markdown-it-container-option.mjs';
 import slugify from '@sindresorhus/slugify';
 import type { Options } from 'vite-plugin-svelte-md';
 import { createTwoslasher as createTwoslasherESLint } from 'twoslash-eslint';
+import { type TwoslashGenericFunction } from 'twoslash-protocol';
 import Shiki from '@shikijs/markdown-it';
 import plugin from 'eslint-plugin-svelte';
 import { transformerTwoslash } from '@shikijs/twoslash';
+import tsParser from '@typescript-eslint/parser';
+import path from 'path';
 
 const shikiPlugin = await Shiki({
 	theme: 'dark-plus',
@@ -27,17 +30,48 @@ const shikiPlugin = await Shiki({
 			},
 			explicitTrigger: false,
 			// Pass the custom twoslasher
-			twoslasher: createTwoslasherESLint({
-				eslintConfig: [...plugin.configs['flat/base']],
-				includeDocs: false
-			}),
+			twoslasher: adjustTwoslasherESLint(
+				createTwoslasherESLint({
+					eslintConfig: [
+						...plugin.configs['flat/base'],
+						{
+							files: ['**/*.svelte'],
+							languageOptions: {
+								parserOptions: {
+									parser: {
+										ts: tsParser
+									}
+								}
+							},
+							settings: {
+								svelte: {
+									kit: {
+										files: {
+											routes: ''
+										}
+									}
+								}
+							}
+						}
+					],
+					includeDocs: false
+				})
+			),
 			rendererRich: {
 				errorRendering: 'hover'
 			}
 		})
 	]
 });
 
+function adjustTwoslasherESLint(base: TwoslashGenericFunction): TwoslashGenericFunction {
+	// Change the file name to `+page` to make the rules for Svelte Kit work.
+	return (code, file, options) => {
+		const filename = file?.includes('.') ? file : `+page.${file ?? 'ts'}`;
+		return base(code, path.join(process.cwd(), filename), options);
+	};
+}
+
 export default (options: { baseUrl: string; root: string }): Options => ({
 	wrapperClasses: [],
 	markdownItOptions: {

docs/rules/no-export-load-in-svelte-module-in-kit-pages.md

@@ -16,20 +16,6 @@ This rule reports unexpected exported `load` function at `<script context="modul
 At SvelteKit v1.0.0-next.405, `load` function has been moved into a separate file — `+page.js` for pages, `+layout.js` for layouts.
 And the API has changed.
 
-<script>
-  const config = {
-    settings: {
-      svelte: {
-        kit: {
-          files: {
-            routes: "",
-          },
-        },
-      },
-    },
-  }
-</script>
-
 <!--eslint-skip-->
 
 ```svelte

docs/rules/no-inner-declarations.md

@@ -25,7 +25,7 @@ This rule supports [svelte-eslint-parser]'s AST.
 
 ```svelte
 <script>
-  /* eslint svelte/no-inner-declarations: "error" */
+  /* eslint svelte/no-inner-declarations: ["error", "functions", { blockScopedFunctions: "disallow" }] */
 
   /* ✓ GOOD */
   function doSomething() {}
@@ -47,7 +47,8 @@ This rule supports [svelte-eslint-parser]'s AST.
 {
   "svelte/no-inner-declarations": [
     "error",
-    "functions" // or "both"
+    "functions", // or "both"
+    { "blockScopedFunctions": "allow" }
   ]
 }
 ```

docs/rules/valid-prop-names-in-kit-pages.md

@@ -15,17 +15,6 @@ since: 'v2.12.0'
 This rule reports unexpected exported variables at `<script>`.<br>
 At SvelteKit v1.0.0-next.405, instead of having multiple props corresponding to the props returned from a load function, page components now have a single data prop.
 
-<script>
-  const config = {settings: {
-    kit: {
-      files: {
-        routes: "",
-      },
-    },
-  },
-  }
-</script>
-
 <!--eslint-skip-->
 
 ```svelte