Skip to content

Commit 073e728

Browse files
ony3000ony3000
authored
Merge pull request #120 from ony3000/fix-svelte-script
Correctly calculates the line positions of expressions when there are two or more line breaks inside a script tag
2 parents c2b2c02 + bcb070d commit 073e728

File tree

6 files changed

+187
-6
lines changed

6 files changed

+187
-6
lines changed

‎src/core-parts/index.ts‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,9 @@ export function refineSvelteAst(preprocessedText: string, ast: AST) {
8686
const [temporaryAttributeWithLeadingSpace, encodedContent] = matchResult;
8787
const plainContent = base64Decode(encodedContent);
8888

89-
const restoreOffset =
89+
const restoreTextOffset =
9090
plainContent.length - (temporaryAttributeWithLeadingSpace.length + '{}'.length);
91+
const restoreLineOffset = plainContent.split(EOL).length - 1;
9192

9293
function recursion(node: unknown): void {
9394
if (!isTypeof(node, z.object({ type: z.string() }))) {
@@ -122,10 +123,40 @@ export function refineSvelteAst(preprocessedText: string, ast: AST) {
122123
}
123124

124125
if (ast.instance.end <= node.start) {
125-
node.start += restoreOffset;
126+
node.start += restoreTextOffset;
127+
128+
if (
129+
isTypeof(
130+
node,
131+
z.object({
132+
loc: z.object({
133+
start: z.object({
134+
line: z.number(),
135+
}),
136+
}),
137+
}),
138+
)
139+
) {
140+
node.loc.start.line += restoreLineOffset;
141+
}
126142
}
127143
if (ast.instance.end <= node.end) {
128-
node.end += restoreOffset;
144+
node.end += restoreTextOffset;
145+
146+
if (
147+
isTypeof(
148+
node,
149+
z.object({
150+
loc: z.object({
151+
end: z.object({
152+
line: z.number(),
153+
}),
154+
}),
155+
}),
156+
)
157+
) {
158+
node.loc.end.line += restoreLineOffset;
159+
}
129160
}
130161
}
131162

@@ -134,16 +165,16 @@ export function refineSvelteAst(preprocessedText: string, ast: AST) {
134165
ast.instance = {
135166
type: 'RefinedScript',
136167
start: ast.instance.start,
137-
end: ast.instance.end + restoreOffset,
168+
end: ast.instance.end + restoreTextOffset,
138169
loc: {
139170
start: {
140171
line: preprocessedText.slice(0, ast.instance.start).split(EOL).length,
141172
},
142173
},
143174
content: {
144175
type: 'RefinedScriptSource',
145-
start: ast.instance.end + restoreOffset - ('</script>'.length + plainContent.length),
146-
end: ast.instance.end + restoreOffset - '</script>'.length,
176+
start: ast.instance.end + restoreTextOffset - ('</script>'.length + plainContent.length),
177+
end: ast.instance.end + restoreTextOffset - '</script>'.length,
147178
loc: {
148179
start: {
149180
line: ast.instance.content.body[0].loc.start.line,

‎tests/svelte/issue-119/__snapshots__/absolute.test.ts.snap‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`'(1) These fixtures must have the same…' > expectation 1`] = `
4+
"<!-- ------------------------------------------------------| printWidth=60 (in snapshot) -->
5+
<div
6+
class={[
7+
\`flex w-0 cursor-default overflow-clip
8+
transition-[width] duration-300 group-hover:w-5
9+
focus-visible:w-5\`,
10+
]}
11+
></div>
12+
"
13+
`;
14+
15+
exports[`'(2) These fixtures must have the same…' > expectation 1`] = `
16+
"<!-- ------------------------------------------------------| printWidth=60 (in snapshot) -->
17+
<script>
18+
</script>
19+
20+
<div
21+
class={[
22+
\`flex w-0 cursor-default overflow-clip
23+
transition-[width] duration-300 group-hover:w-5
24+
focus-visible:w-5\`,
25+
]}
26+
></div>
27+
"
28+
`;
29+
30+
exports[`'(3) These fixtures must have the same…' > expectation 1`] = `
31+
"<!-- ------------------------------------------------------| printWidth=60 (in snapshot) -->
32+
<script>
33+
//
34+
</script>
35+
36+
<div
37+
class={[
38+
\`flex w-0 cursor-default overflow-clip
39+
transition-[width] duration-300 group-hover:w-5
40+
focus-visible:w-5\`,
41+
]}
42+
></div>
43+
"
44+
`;

‎tests/svelte/issue-119/__snapshots__/relative.test.ts.snap‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`'(1) These fixtures must have the same…' > expectation 1`] = `
4+
"<!-- ------------------------------------------------------| printWidth=60 (in snapshot) -->
5+
<div
6+
class={[
7+
\`flex w-0 cursor-default overflow-clip transition-[width]
8+
duration-300 group-hover:w-5 focus-visible:w-5\`,
9+
]}
10+
></div>
11+
"
12+
`;
13+
14+
exports[`'(2) These fixtures must have the same…' > expectation 1`] = `
15+
"<!-- ------------------------------------------------------| printWidth=60 (in snapshot) -->
16+
<script>
17+
</script>
18+
19+
<div
20+
class={[
21+
\`flex w-0 cursor-default overflow-clip transition-[width]
22+
duration-300 group-hover:w-5 focus-visible:w-5\`,
23+
]}
24+
></div>
25+
"
26+
`;
27+
28+
exports[`'(3) These fixtures must have the same…' > expectation 1`] = `
29+
"<!-- ------------------------------------------------------| printWidth=60 (in snapshot) -->
30+
<script>
31+
//
32+
</script>
33+
34+
<div
35+
class={[
36+
\`flex w-0 cursor-default overflow-clip transition-[width]
37+
duration-300 group-hover:w-5 focus-visible:w-5\`,
38+
]}
39+
></div>
40+
"
41+
`;

‎tests/svelte/issue-119/absolute.test.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { thisPlugin, testSnapshotEach } from '../../adaptor';
2+
import { baseOptions } from '../../settings';
3+
import { fixtures } from './fixtures';
4+
5+
const options = {
6+
...baseOptions,
7+
plugins: ['prettier-plugin-svelte', thisPlugin],
8+
parser: 'svelte',
9+
endingPosition: 'absolute',
10+
};
11+
12+
testSnapshotEach(fixtures, options);

‎tests/svelte/issue-119/fixtures.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { Fixture } from '../../settings';
2+
3+
export const fixtures: Omit<Fixture, 'output'>[] = [
4+
{
5+
name: '(1) These fixtures must have the same class name formatting results.',
6+
input: `
7+
<!-- ------------------------------------------------------| printWidth=60 (in snapshot) -->
8+
<div class={['flex w-0 cursor-default overflow-clip transition-[width] duration-300 group-hover:w-5 focus-visible:w-5']}></div>
9+
`,
10+
options: {
11+
printWidth: 60,
12+
},
13+
},
14+
{
15+
name: '(2) These fixtures must have the same class name formatting results.',
16+
input: `
17+
<!-- ------------------------------------------------------| printWidth=60 (in snapshot) -->
18+
<script>
19+
</script>
20+
21+
<div class={['flex w-0 cursor-default overflow-clip transition-[width] duration-300 group-hover:w-5 focus-visible:w-5']}></div>
22+
`,
23+
options: {
24+
printWidth: 60,
25+
},
26+
},
27+
{
28+
name: '(3) These fixtures must have the same class name formatting results.',
29+
input: `
30+
<!-- ------------------------------------------------------| printWidth=60 (in snapshot) -->
31+
<script>
32+
//
33+
</script>
34+
35+
<div class={['flex w-0 cursor-default overflow-clip transition-[width] duration-300 group-hover:w-5 focus-visible:w-5']}></div>
36+
`,
37+
options: {
38+
printWidth: 60,
39+
},
40+
},
41+
];

‎tests/svelte/issue-119/relative.test.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { thisPlugin, testSnapshotEach } from '../../adaptor';
2+
import { baseOptions } from '../../settings';
3+
import { fixtures } from './fixtures';
4+
5+
const options = {
6+
...baseOptions,
7+
plugins: ['prettier-plugin-svelte', thisPlugin],
8+
parser: 'svelte',
9+
endingPosition: 'relative',
10+
};
11+
12+
testSnapshotEach(fixtures, options);

0 commit comments

Comments
 (0)