Skip to content

Commit 88776b3

Browse files
adamDilgeradamDilger
authored
(#276) Fixed dollar sign group replace in vue preprocessor (#283)
* (#276) Fixed dollar sign group replace in vue preprocessor * (#218) format both script and script setup tags if they exist
1 parent 8072158 commit 88776b3

File tree

4 files changed

+197
-3
lines changed

4 files changed

+197
-3
lines changed

‎src/preprocessors/vue-preprocessor.ts‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,31 @@ export function vuePreprocessor(code: string, options: PrettierOptions) {
55
const { parse } = require('@vue/compiler-sfc');
66
const { descriptor } = parse(code);
77

8-
const content = (descriptor.script ?? descriptor.scriptSetup)?.content;
9-
if (!content) {
8+
const scriptContent = descriptor.script?.content;
9+
const scriptSetupContent = descriptor.scriptSetup?.content;
10+
11+
if (!scriptContent && !scriptSetupContent) {
1012
return code;
1113
}
1214

13-
return code.replace(content, `\n${preprocessor(content, options)}\n`);
15+
let transformedCode = code;
16+
17+
const replacer = (content: string) => {
18+
// we pass the second argument as a function to avoid issues with the replacement string
19+
// if string contained special groups (like $&, $`, $', $n, $<n>, etc.) this would produce invalid results
20+
return transformedCode.replace(
21+
content,
22+
() => `\n${preprocessor(content, options)}\n`,
23+
);
24+
};
25+
26+
if (scriptContent) {
27+
transformedCode = replacer(scriptContent);
28+
}
29+
30+
if (scriptSetupContent) {
31+
transformedCode = replacer(scriptSetupContent);
32+
}
33+
34+
return transformedCode;
1435
}

‎tests/Vue/__snapshots__/ppsi.spec.js.snap‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,109 @@ function add(a, b) {
5757
5858
`;
5959

60+
exports[`setupAndScript.vue - vue-verify: setupAndScript.vue 1`] = `
61+
<script>
62+
// I am top level comment in this file.
63+
import z from 'z';
64+
import threeLevelRelativePath from "../../../threeLevelRelativePath";
65+
import sameLevelRelativePath from "./sameLevelRelativePath";
66+
import thirdParty from "third-party";
67+
import oneLevelRelativePath from "../oneLevelRelativePath";
68+
import otherthing from "@core/otherthing";
69+
import abc from "@core/abc";
70+
import twoLevelRelativePath from "../../twoLevelRelativePath";
71+
import component from "@ui/hello";
72+
import fourLevelRelativePath from "../../../../fourLevelRelativePath";
73+
import something from "@server/something";
74+
import xyz from "@ui/xyz";
75+
import { defineComponent } from 'vue'
76+
77+
function firstAdd(a,b) {
78+
return a + b;
79+
}
80+
</script>
81+
82+
<script setup>
83+
// I am top level comment in this file.
84+
import z from 'z';
85+
import threeLevelRelativePath from "../../../threeLevelRelativePath";
86+
import sameLevelRelativePath from "./sameLevelRelativePath";
87+
import thirdParty from "third-party";
88+
import oneLevelRelativePath from "../oneLevelRelativePath";
89+
import otherthing from "@core/otherthing";
90+
import abc from "@core/abc";
91+
import twoLevelRelativePath from "../../twoLevelRelativePath";
92+
import component from "@ui/hello";
93+
import fourLevelRelativePath from "../../../../fourLevelRelativePath";
94+
import something from "@server/something";
95+
import xyz from "@ui/xyz";
96+
import { defineComponent } from 'vue'
97+
98+
function add(a,b) {
99+
return a + b;
100+
}
101+
</script>
102+
103+
<template>
104+
<div></div>
105+
</template>
106+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
107+
<script>
108+
// I am top level comment in this file.
109+
import thirdParty from "third-party";
110+
import { defineComponent } from "vue";
111+
import z from "z";
112+
113+
import abc from "@core/abc";
114+
import otherthing from "@core/otherthing";
115+
116+
import something from "@server/something";
117+
118+
import component from "@ui/hello";
119+
import xyz from "@ui/xyz";
120+
121+
import fourLevelRelativePath from "../../../../fourLevelRelativePath";
122+
import threeLevelRelativePath from "../../../threeLevelRelativePath";
123+
import twoLevelRelativePath from "../../twoLevelRelativePath";
124+
import oneLevelRelativePath from "../oneLevelRelativePath";
125+
import sameLevelRelativePath from "./sameLevelRelativePath";
126+
127+
function firstAdd(a, b) {
128+
return a + b;
129+
}
130+
</script>
131+
132+
<script setup>
133+
// I am top level comment in this file.
134+
import thirdParty from "third-party";
135+
import { defineComponent } from "vue";
136+
import z from "z";
137+
138+
import abc from "@core/abc";
139+
import otherthing from "@core/otherthing";
140+
141+
import something from "@server/something";
142+
143+
import component from "@ui/hello";
144+
import xyz from "@ui/xyz";
145+
146+
import fourLevelRelativePath from "../../../../fourLevelRelativePath";
147+
import threeLevelRelativePath from "../../../threeLevelRelativePath";
148+
import twoLevelRelativePath from "../../twoLevelRelativePath";
149+
import oneLevelRelativePath from "../oneLevelRelativePath";
150+
import sameLevelRelativePath from "./sameLevelRelativePath";
151+
152+
function add(a, b) {
153+
return a + b;
154+
}
155+
</script>
156+
157+
<template>
158+
<div></div>
159+
</template>
160+
161+
`;
162+
60163
exports[`sfc.vue - vue-verify: sfc.vue 1`] = `
61164
<script>
62165
// I am top level comment in this file.
@@ -137,6 +240,25 @@ div {
137240
138241
`;
139242

243+
exports[`sfcWithSpecialReplacerGroups.vue - vue-verify: sfcWithSpecialReplacerGroups.vue 1`] = `
244+
<script setup>
245+
let a = '$';
246+
let b = '$';
247+
let c = '$$';
248+
</script>
249+
<template><div>{{ a + b + c }}</div></template>
250+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
251+
<script setup>
252+
let a = "$";
253+
let b = "$";
254+
let c = "$$";
255+
</script>
256+
<template>
257+
<div>{{ a + b + c }}</div>
258+
</template>
259+
260+
`;
261+
140262
exports[`ts.vue - vue-verify: ts.vue 1`] = `
141263
<script lang="ts">
142264
// I am top level comment in this file.

‎tests/Vue/setupAndScript.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script>
2+
// I am top level comment in this file.
3+
import z from 'z';
4+
import threeLevelRelativePath from "../../../threeLevelRelativePath";
5+
import sameLevelRelativePath from "./sameLevelRelativePath";
6+
import thirdParty from "third-party";
7+
import oneLevelRelativePath from "../oneLevelRelativePath";
8+
import otherthing from "@core/otherthing";
9+
import abc from "@core/abc";
10+
import twoLevelRelativePath from "../../twoLevelRelativePath";
11+
import component from "@ui/hello";
12+
import fourLevelRelativePath from "../../../../fourLevelRelativePath";
13+
import something from "@server/something";
14+
import xyz from "@ui/xyz";
15+
import { defineComponent } from 'vue'
16+
17+
function firstAdd(a,b) {
18+
return a + b;
19+
}
20+
</script>
21+
22+
<script setup>
23+
// I am top level comment in this file.
24+
import z from 'z';
25+
import threeLevelRelativePath from "../../../threeLevelRelativePath";
26+
import sameLevelRelativePath from "./sameLevelRelativePath";
27+
import thirdParty from "third-party";
28+
import oneLevelRelativePath from "../oneLevelRelativePath";
29+
import otherthing from "@core/otherthing";
30+
import abc from "@core/abc";
31+
import twoLevelRelativePath from "../../twoLevelRelativePath";
32+
import component from "@ui/hello";
33+
import fourLevelRelativePath from "../../../../fourLevelRelativePath";
34+
import something from "@server/something";
35+
import xyz from "@ui/xyz";
36+
import { defineComponent } from 'vue'
37+
38+
function add(a,b) {
39+
return a + b;
40+
}
41+
</script>
42+
43+
<template>
44+
<div></div>
45+
</template>

‎tests/Vue/sfcWithSpecialReplacerGroups.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<script setup>
2+
let a = '$';
3+
let b = '$';
4+
let c = '$$';
5+
</script>
6+
<template><div>{{ a + b + c }}</div></template>

0 commit comments

Comments
 (0)