Skip to content

Commit 21989c1

Browse files
ota-meshiota-meshi
authored
chore: fix some broken examples on docs site (#1027)
1 parent 0ef0f99 commit 21989c1

6 files changed

+115
-93
lines changed

‎docs-svelte-kit/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"svelte": "^5.2.10",
6060
"svelte-adapter-ghpages": "0.2.2",
6161
"twoslash-eslint": "^0.2.12",
62+
"twoslash-protocol": "^0.2.12",
6263
"util": "^0.12.5",
6364
"vite": "^6.0.1",
6465
"vite-plugin-svelte-md": "^0.1.7"

‎docs-svelte-kit/src/site.css

+73-62
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,66 @@
11
/* @import "prismjs/themes/prism"; */
2-
@import "prismjs/themes/prism-tomorrow";
3-
@import "@shikijs/twoslash/style-rich.css";
2+
@import 'prismjs/themes/prism-tomorrow';
3+
@import '@shikijs/twoslash/style-rich.css';
44

55
.twoslash .twoslash-popup-container {
6-
transform: translateY(2em);
7-
white-space: pre-wrap;
6+
transform: translateY(2em);
7+
white-space: pre-wrap;
8+
margin-right: 32px;
9+
}
10+
11+
.twoslash .twoslash-error > span:not(.twoslash-popup-container):not(:has(*)) {
12+
/*
13+
Since elements with no content have a width of zero and no wavy line is displayed,
14+
we specify a minimum width to display the wavy line.
15+
e.g. https://sveltejs.github.io/eslint-plugin-svelte/rules/html-closing-bracket-new-line/
16+
*/
17+
min-width: 6px;
18+
display: inline-block;
819
}
920

1021
/* theme */
1122
:root {
12-
--primary-color: #ffffff;
13-
--secondary-color: #676778;
14-
--tertiary-color: #edf0f8;
15-
--background-without-opacity: rgba(255, 255, 255, 0.95);
23+
--primary-color: #ffffff;
24+
--secondary-color: #676778;
25+
--tertiary-color: #edf0f8;
26+
--background-without-opacity: rgba(255, 255, 255, 0.95);
1627
}
1728

1829
/*** markdown ***/
1930

2031
:not(pre) > code {
21-
padding: 0.1rem 0.4rem 0;
22-
margin: 0 0.2rem;
23-
background: #e5eef5;
24-
position: relative;
25-
border-radius: 0.3em;
26-
white-space: nowrap;
27-
color: #444;
28-
-webkit-font-smoothing: initial;
32+
padding: 0.1rem 0.4rem 0;
33+
margin: 0 0.2rem;
34+
background: #e5eef5;
35+
position: relative;
36+
border-radius: 0.3em;
37+
white-space: nowrap;
38+
color: #444;
39+
-webkit-font-smoothing: initial;
2940
}
3041

3142
blockquote {
32-
padding: 1rem;
33-
color: #09f;
34-
border: 1px solid #40b3ff;
35-
margin: 1.6rem 2.4rem 2.4rem;
36-
padding: 0.5rem 2.4rem;
37-
border-radius: 0.4rem;
43+
padding: 1rem;
44+
color: #09f;
45+
border: 1px solid #40b3ff;
46+
margin: 1.6rem 2.4rem 2.4rem;
47+
padding: 0.5rem 2.4rem;
48+
border-radius: 0.4rem;
3849
}
3950
blockquote p {
40-
color: #09f;
51+
color: #09f;
4152
}
4253

4354
table {
44-
margin: 0 0 2em;
45-
width: 100%;
46-
font-size: var(--h5);
55+
margin: 0 0 2em;
56+
width: 100%;
57+
font-size: var(--h5);
4758
}
4859
td,
4960
th {
50-
text-align: left;
51-
border-bottom: 1px solid rgba(0 0 0 / 0.1);
52-
padding: 0.4rem 0.8rem 0.4rem 0;
61+
text-align: left;
62+
border-bottom: 1px solid rgba(0 0 0 / 0.1);
63+
padding: 0.4rem 0.8rem 0.4rem 0;
5364
}
5465

5566
/* header */
@@ -58,89 +69,89 @@ h3,
5869
h4,
5970
h5,
6071
h6 {
61-
font-weight: 400;
62-
color: var(--heading-color);
72+
font-weight: 400;
73+
color: var(--heading-color);
6374
}
6475

6576
h2 {
66-
font-size: 1.2rem;
77+
font-size: 1.2rem;
6778
}
6879
h3,
6980
h4,
7081
h5,
7182
h6 {
72-
font-size: 1rem;
83+
font-size: 1rem;
7384
}
7485

7586
/*** custom container ***/
7687

7788
.custom-block .custom-block-title {
78-
font-weight: 600;
79-
margin-bottom: -0.4rem;
89+
font-weight: 600;
90+
margin-bottom: -0.4rem;
8091
}
8192

8293
.custom-block.danger,
8394
.custom-block.tip,
8495
.custom-block.warning {
85-
padding: 0.1rem 1.5rem;
86-
border-left-width: 4px;
87-
border-left-style: solid;
88-
margin: 1rem 0;
96+
padding: 0.1rem 1.5rem;
97+
border-left-width: 4px;
98+
border-left-style: solid;
99+
margin: 1rem 0;
89100
}
90101

91102
.custom-block.tip {
92-
background-color: #f3f5f7;
93-
border-color: #42b983;
103+
background-color: #f3f5f7;
104+
border-color: #42b983;
94105
}
95106

96107
.custom-block.warning {
97-
background-color: rgba(255, 229, 100, 0.3);
98-
border-color: #e7c000;
99-
color: #6b5900;
108+
background-color: rgba(255, 229, 100, 0.3);
109+
border-color: #e7c000;
110+
color: #6b5900;
100111
}
101112

102113
.custom-block.warning .custom-block-title {
103-
color: #b29400;
114+
color: #b29400;
104115
}
105116

106117
.custom-block.warning a {
107-
color: #2c3e50;
118+
color: #2c3e50;
108119
}
109120

110121
.custom-block.danger {
111-
background-color: #ffe6e6;
112-
border-color: #c00;
113-
color: #4d0000;
122+
background-color: #ffe6e6;
123+
border-color: #c00;
124+
color: #4d0000;
114125
}
115126

116127
.custom-block.danger .custom-block-title {
117-
color: #900;
128+
color: #900;
118129
}
119130

120131
.custom-block.danger a {
121-
color: #2c3e50;
132+
color: #2c3e50;
122133
}
123134

124135
.custom-block.details {
125-
display: block;
126-
position: relative;
127-
border-radius: 2px;
128-
margin: 1.6em 0;
129-
padding: 1.6em;
130-
background-color: #eee;
136+
display: block;
137+
position: relative;
138+
border-radius: 2px;
139+
margin: 1.6em 0;
140+
padding: 1.6em;
141+
background-color: #eee;
131142
}
132143

133144
.custom-block.details h4 {
134-
margin-top: 0;
145+
margin-top: 0;
135146
}
136147

137148
.custom-block.details figure:last-child,
138149
.custom-block.details p:last-child {
139-
margin-bottom: 0;
140-
padding-bottom: 0;
150+
margin-bottom: 0;
151+
padding-bottom: 0;
141152
}
142153

143154
.custom-block.details summary {
144-
outline: none;
145-
cursor: pointer;
155+
outline: none;
156+
cursor: pointer;
146157
}

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

+38-4
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@ import containerPluginOption from './markdown-it-container-option.mjs';
99
import slugify from '@sindresorhus/slugify';
1010
import type { Options } from 'vite-plugin-svelte-md';
1111
import { createTwoslasher as createTwoslasherESLint } from 'twoslash-eslint';
12+
import { type TwoslashGenericFunction } from 'twoslash-protocol';
1213
import Shiki from '@shikijs/markdown-it';
1314
import plugin from 'eslint-plugin-svelte';
1415
import { transformerTwoslash } from '@shikijs/twoslash';
16+
import tsParser from '@typescript-eslint/parser';
17+
import path from 'path';
1518

1619
const shikiPlugin = await Shiki({
1720
theme: 'dark-plus',
@@ -27,17 +30,48 @@ const shikiPlugin = await Shiki({
2730
},
2831
explicitTrigger: false,
2932
// Pass the custom twoslasher
30-
twoslasher: createTwoslasherESLint({
31-
eslintConfig: [...plugin.configs['flat/base']],
32-
includeDocs: false
33-
}),
33+
twoslasher: adjustTwoslasherESLint(
34+
createTwoslasherESLint({
35+
eslintConfig: [
36+
...plugin.configs['flat/base'],
37+
{
38+
files: ['**/*.svelte'],
39+
languageOptions: {
40+
parserOptions: {
41+
parser: {
42+
ts: tsParser
43+
}
44+
}
45+
},
46+
settings: {
47+
svelte: {
48+
kit: {
49+
files: {
50+
routes: ''
51+
}
52+
}
53+
}
54+
}
55+
}
56+
],
57+
includeDocs: false
58+
})
59+
),
3460
rendererRich: {
3561
errorRendering: 'hover'
3662
}
3763
})
3864
]
3965
});
4066

67+
function adjustTwoslasherESLint(base: TwoslashGenericFunction): TwoslashGenericFunction {
68+
// Change the file name to `+page` to make the rules for Svelte Kit work.
69+
return (code, file, options) => {
70+
const filename = file?.includes('.') ? file : `+page.${file ?? 'ts'}`;
71+
return base(code, path.join(process.cwd(), filename), options);
72+
};
73+
}
74+
4175
export default (options: { baseUrl: string; root: string }): Options => ({
4276
wrapperClasses: [],
4377
markdownItOptions: {

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

-14
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,6 @@ This rule reports unexpected exported `load` function at `<script context="modul
1616
At SvelteKit v1.0.0-next.405, `load` function has been moved into a separate file — `+page.js` for pages, `+layout.js` for layouts.
1717
And the API has changed.
1818

19-
<script>
20-
const config = {
21-
settings: {
22-
svelte: {
23-
kit: {
24-
files: {
25-
routes: "",
26-
},
27-
},
28-
},
29-
},
30-
}
31-
</script>
32-
3319
<!--eslint-skip-->
3420

3521
```svelte

‎docs/rules/no-inner-declarations.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ This rule supports [svelte-eslint-parser]'s AST.
2525

2626
```svelte
2727
<script>
28-
/* eslint svelte/no-inner-declarations: "error" */
28+
/* eslint svelte/no-inner-declarations: ["error", "functions", { blockScopedFunctions: "disallow" }] */
2929
3030
/* ✓ GOOD */
3131
function doSomething() {}
@@ -47,7 +47,8 @@ This rule supports [svelte-eslint-parser]'s AST.
4747
{
4848
"svelte/no-inner-declarations": [
4949
"error",
50-
"functions" // or "both"
50+
"functions", // or "both"
51+
{ "blockScopedFunctions": "allow" }
5152
]
5253
}
5354
```

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

-11
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,6 @@ since: 'v2.12.0'
1515
This rule reports unexpected exported variables at `<script>`.<br>
1616
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.
1717

18-
<script>
19-
const config = {settings: {
20-
kit: {
21-
files: {
22-
routes: "",
23-
},
24-
},
25-
},
26-
}
27-
</script>
28-
2918
<!--eslint-skip-->
3019

3120
```svelte

0 commit comments

Comments
 (0)