Skip to content

Commit f6aefde

Browse files
Thomasan1999Thomasan1999
committed
incorporating PR feedback
1 parent c8bb2e0 commit f6aefde

File tree

2 files changed

+101
-18
lines changed

2 files changed

+101
-18
lines changed

‎lib/rules/prefer-use-template-ref.js

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ function addUseTemplateRefImport(context, fixer) {
6363
}
6464

6565
const body = sourceCode.ast.body
66-
6766
const imports = body.filter((node) => node.type === 'ImportDeclaration')
6867

6968
const vueDestructuredImport = imports.find(
@@ -79,13 +78,12 @@ function addUseTemplateRefImport(context, fixer) {
7978
const lastImportSpecifier = importSpecifiers[importSpecifiers.length - 1]
8079

8180
// @ts-ignore
82-
return fixer.insertTextAfter(lastImportSpecifier, `,useTemplateRef`)
81+
return fixer.insertTextAfter(lastImportSpecifier, `, useTemplateRef`)
8382
}
8483

84+
const importStatement = "import { useTemplateRef } from 'vue';"
8585
const lastImport = imports[imports.length - 1]
8686

87-
const importStatement = "import {useTemplateRef} from 'vue';"
88-
8987
if (lastImport) {
9088
const indent = createIndent(lastImport)
9189

@@ -168,16 +166,11 @@ module.exports = {
168166
name: scriptRef.node?.callee?.name
169167
},
170168
fix(fixer) {
171-
/** @type {Fix[]} */
172-
const fixes = []
173-
174169
const replaceFunctionFix = fixer.replaceText(
175170
scriptRef.node,
176171
`useTemplateRef('${scriptRef.ref}')`
177172
)
178173

179-
fixes.push(replaceFunctionFix)
180-
181174
if (!missingImportChecked) {
182175
missingImportChecked = true
183176

@@ -187,11 +180,11 @@ module.exports = {
187180
)
188181

189182
if (missingImportFix) {
190-
fixes.push(missingImportFix)
183+
return [replaceFunctionFix, missingImportFix]
191184
}
192185
}
193186

194-
return fixes
187+
return replaceFunctionFix
195188
}
196189
})
197190
}

‎tests/lib/rules/prefer-use-template-ref.js

Lines changed: 97 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ tester.run('prefer-use-template-ref', rule, {
316316
<div ref="root"/>
317317
</template>
318318
<script setup>
319-
import { ref,useTemplateRef } from 'vue';
319+
import { ref, useTemplateRef } from 'vue';
320320
const root = useTemplateRef('root');
321321
</script>
322322
`,
@@ -350,7 +350,7 @@ tester.run('prefer-use-template-ref', rule, {
350350
<a href="" ref="link">Link</a>
351351
</template>
352352
<script setup>
353-
import { ref,useTemplateRef } from 'vue';
353+
import { ref, useTemplateRef } from 'vue';
354354
const buttonRef = ref();
355355
const link = useTemplateRef('link');
356356
</script>
@@ -385,7 +385,7 @@ tester.run('prefer-use-template-ref', rule, {
385385
<a href="" ref="link">Link</a>
386386
</template>
387387
<script setup>
388-
import { ref,useTemplateRef } from 'vue';
388+
import { ref, useTemplateRef } from 'vue';
389389
const heading = useTemplateRef('heading');
390390
const link = useTemplateRef('link');
391391
</script>
@@ -433,7 +433,7 @@ tester.run('prefer-use-template-ref', rule, {
433433
<button ref="button">Click</button>
434434
</template>
435435
<script>
436-
import { ref,useTemplateRef } from 'vue';
436+
import { ref, useTemplateRef } from 'vue';
437437
export default {
438438
name: 'Counter',
439439
setup() {
@@ -470,7 +470,7 @@ tester.run('prefer-use-template-ref', rule, {
470470
<div ref="root"/>
471471
</template>
472472
<script setup>
473-
import { shallowRef,useTemplateRef } from 'vue';
473+
import { shallowRef, useTemplateRef } from 'vue';
474474
const root = useTemplateRef('root');
475475
</script>
476476
`,
@@ -500,6 +500,19 @@ tester.run('prefer-use-template-ref', rule, {
500500
}
501501
</script>
502502
`,
503+
output: `
504+
<template>
505+
<button ref="button">Click</button>
506+
</template>
507+
<script>
508+
import { ref, useTemplateRef } from 'vue';
509+
export default {
510+
setup: () => {
511+
const button = useTemplateRef('button');
512+
}
513+
}
514+
</script>
515+
`,
503516
errors: [
504517
{
505518
messageId: 'preferUseTemplateRef',
@@ -523,6 +536,20 @@ tester.run('prefer-use-template-ref', rule, {
523536
const root = ref()
524537
</script>
525538
539+
<script>
540+
const A = 'foo'
541+
</script>
542+
`,
543+
output: `
544+
<template>
545+
<div ref="root" :data-a="A" />
546+
</template>
547+
548+
<script setup>
549+
import { ref, useTemplateRef } from 'vue'
550+
const root = useTemplateRef('root')
551+
</script>
552+
526553
<script>
527554
const A = 'foo'
528555
</script>
@@ -554,6 +581,20 @@ tester.run('prefer-use-template-ref', rule, {
554581
const root = ref()
555582
</script>
556583
`,
584+
output: `
585+
<template>
586+
<div ref="root" :data-a="A" />
587+
</template>
588+
589+
<script>
590+
const A = 'foo'
591+
</script>
592+
593+
<script setup>
594+
import { ref, useTemplateRef } from 'vue'
595+
const root = useTemplateRef('root')
596+
</script>
597+
`,
557598
errors: [
558599
{
559600
messageId: 'preferUseTemplateRef',
@@ -593,7 +634,7 @@ tester.run('prefer-use-template-ref', rule, {
593634
</template>
594635
<script>
595636
import { isEqual } from 'lodash';
596-
import {useTemplateRef} from 'vue';
637+
import { useTemplateRef } from 'vue';
597638
export default {
598639
name: 'Counter',
599640
setup() {
@@ -640,7 +681,7 @@ tester.run('prefer-use-template-ref', rule, {
640681
<button ref="button">Click</button>
641682
</template>
642683
<script>
643-
import {useTemplateRef} from 'vue';
684+
import { useTemplateRef } from 'vue';
644685
export default {
645686
name: 'Counter',
646687
setup() {
@@ -660,6 +701,55 @@ tester.run('prefer-use-template-ref', rule, {
660701
column: 28
661702
}
662703
]
704+
},
705+
{
706+
filename: 'script-lang-ts.vue',
707+
code: `
708+
<template>
709+
<p>Button clicked {{counter}} times.</p>
710+
<button ref="button">Click</button>
711+
</template>
712+
<script lang="ts">
713+
export default {
714+
name: 'Counter',
715+
setup() {
716+
const counter = ref(0);
717+
const button = ref<HTMLDivElement>();
718+
}
719+
}
720+
</script>
721+
`,
722+
output: `
723+
<template>
724+
<p>Button clicked {{counter}} times.</p>
725+
<button ref="button">Click</button>
726+
</template>
727+
<script lang="ts">
728+
import { useTemplateRef } from 'vue';
729+
export default {
730+
name: 'Counter',
731+
setup() {
732+
const counter = ref(0);
733+
const button = useTemplateRef('button');
734+
}
735+
}
736+
</script>
737+
`,
738+
languageOptions: {
739+
parserOptions: {
740+
parser: require.resolve('@typescript-eslint/parser')
741+
}
742+
},
743+
errors: [
744+
{
745+
messageId: 'preferUseTemplateRef',
746+
data: {
747+
name: 'ref'
748+
},
749+
line: 11,
750+
column: 28
751+
}
752+
]
663753
}
664754
]
665755
})

0 commit comments

Comments
 (0)