From bf6a876f5c24b5f5c53311d8e921eb9f2faaf3a3 Mon Sep 17 00:00:00 2001
From: TO <takahiro.ohori@gmail.com>
Date: Sun, 1 Jan 2023 11:21:12 +0900
Subject: [PATCH 1/4] fix: component-name-in-template-casing rule

---
 .../component-name-in-template-casing.js      |  3 +-
 lib/utils/vue2-builtin-components.js          |  4 ++-
 .../component-name-in-template-casing.js      | 32 ++-----------------
 3 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index df06a0b1c..3c07c56a4 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -93,7 +93,8 @@ module.exports = {
       if (
         (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
         utils.isHtmlWellKnownElementName(node.rawName) ||
-        utils.isSvgWellKnownElementName(node.rawName)
+        utils.isSvgWellKnownElementName(node.rawName) ||
+        utils.isBuiltInComponentName(node.rawName)
       ) {
         return false
       }
diff --git a/lib/utils/vue2-builtin-components.js b/lib/utils/vue2-builtin-components.js
index 54acbc9e8..a9dbe42e4 100644
--- a/lib/utils/vue2-builtin-components.js
+++ b/lib/utils/vue2-builtin-components.js
@@ -8,5 +8,7 @@ module.exports = [
   'transition-group',
   'TransitionGroup',
   'keep-alive',
-  'KeepAlive'
+  'KeepAlive',
+  'client-only',
+  'ClientOnly'
 ]
diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index d57a5ffbf..e9beb1bc5 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -159,7 +159,8 @@ tester.run('component-name-in-template-casing', rule, {
           <client-only />
           <keep-alive />
         </template>
-      `
+      `,
+      options: ['PascalCase', { registeredComponentsOnly: false }]
     },
 
     {
@@ -811,35 +812,6 @@ tester.run('component-name-in-template-casing', rule, {
         'Component name "FooBar_Baz-qux" is not kebab-case.'
       ]
     },
-    {
-      // built-in components (behave the same way as other components)
-      code: `
-        <template>
-          <component />
-          <suspense />
-          <teleport />
-          <client-only />
-          <keep-alive />
-        </template>
-      `,
-      output: `
-        <template>
-          <Component />
-          <Suspense />
-          <Teleport />
-          <ClientOnly />
-          <KeepAlive />
-        </template>
-      `,
-      options: ['PascalCase', { registeredComponentsOnly: false }],
-      errors: [
-        'Component name "component" is not PascalCase.',
-        'Component name "suspense" is not PascalCase.',
-        'Component name "teleport" is not PascalCase.',
-        'Component name "client-only" is not PascalCase.',
-        'Component name "keep-alive" is not PascalCase.'
-      ]
-    },
     {
       code: `
         <template>

From 929bf51cf8657654b27818fcd4c9ad80e2d7ca06 Mon Sep 17 00:00:00 2001
From: TO <takahiro.ohori@gmail.com>
Date: Sat, 7 Jan 2023 12:51:08 +0900
Subject: [PATCH 2/4] Revert "fix: component-name-in-template-casing rule"

This reverts commit bf6a876f5c24b5f5c53311d8e921eb9f2faaf3a3.
---
 .../component-name-in-template-casing.js      |  3 +-
 lib/utils/vue2-builtin-components.js          |  4 +--
 .../component-name-in-template-casing.js      | 32 +++++++++++++++++--
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index 3c07c56a4..df06a0b1c 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -93,8 +93,7 @@ module.exports = {
       if (
         (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
         utils.isHtmlWellKnownElementName(node.rawName) ||
-        utils.isSvgWellKnownElementName(node.rawName) ||
-        utils.isBuiltInComponentName(node.rawName)
+        utils.isSvgWellKnownElementName(node.rawName)
       ) {
         return false
       }
diff --git a/lib/utils/vue2-builtin-components.js b/lib/utils/vue2-builtin-components.js
index a9dbe42e4..54acbc9e8 100644
--- a/lib/utils/vue2-builtin-components.js
+++ b/lib/utils/vue2-builtin-components.js
@@ -8,7 +8,5 @@ module.exports = [
   'transition-group',
   'TransitionGroup',
   'keep-alive',
-  'KeepAlive',
-  'client-only',
-  'ClientOnly'
+  'KeepAlive'
 ]
diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index e9beb1bc5..d57a5ffbf 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -159,8 +159,7 @@ tester.run('component-name-in-template-casing', rule, {
           <client-only />
           <keep-alive />
         </template>
-      `,
-      options: ['PascalCase', { registeredComponentsOnly: false }]
+      `
     },
 
     {
@@ -812,6 +811,35 @@ tester.run('component-name-in-template-casing', rule, {
         'Component name "FooBar_Baz-qux" is not kebab-case.'
       ]
     },
+    {
+      // built-in components (behave the same way as other components)
+      code: `
+        <template>
+          <component />
+          <suspense />
+          <teleport />
+          <client-only />
+          <keep-alive />
+        </template>
+      `,
+      output: `
+        <template>
+          <Component />
+          <Suspense />
+          <Teleport />
+          <ClientOnly />
+          <KeepAlive />
+        </template>
+      `,
+      options: ['PascalCase', { registeredComponentsOnly: false }],
+      errors: [
+        'Component name "component" is not PascalCase.',
+        'Component name "suspense" is not PascalCase.',
+        'Component name "teleport" is not PascalCase.',
+        'Component name "client-only" is not PascalCase.',
+        'Component name "keep-alive" is not PascalCase.'
+      ]
+    },
     {
       code: `
         <template>

From 51fa121842dde6064189f52bb1b90da16dc7c0b1 Mon Sep 17 00:00:00 2001
From: TO <takahiro.ohori@gmail.com>
Date: Sat, 7 Jan 2023 13:45:08 +0900
Subject: [PATCH 3/4] fix: component-name-in-template-casing rule

---
 .../component-name-in-template-casing.js      |  29 ++++-
 .../component-name-in-template-casing.js      | 115 ++++++++++++++++++
 2 files changed, 143 insertions(+), 1 deletion(-)

diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index df06a0b1c..b457ffa61 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -11,6 +11,30 @@ const { toRegExp } = require('../utils/regexp')
 const allowedCaseOptions = ['PascalCase', 'kebab-case']
 const defaultCase = 'PascalCase'
 
+/**
+ * Checks whether the given variable is the type-only import object.
+ * @param {Variable} variable
+ * @returns {boolean} `true` if the given variable is the type-only import.
+ */
+function isTypeOnlyImport(variable) {
+  if (variable.defs.length === 0) return false
+
+  return variable.defs.every((def) => {
+    if (def.type !== 'ImportBinding') {
+      return false
+    }
+    if (def.parent.importKind === 'type') {
+      // check for `import type Foo from './xxx'`
+      return true
+    }
+    if (def.node.type === 'ImportSpecifier' && def.node.importKind === 'type') {
+      // check for `import { type Foo } from './xxx'`
+      return true
+    }
+    return false
+  })
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -75,10 +99,13 @@ module.exports = {
           (scope) => scope.type === 'module'
         )
         for (const variable of (moduleScope && moduleScope.variables) || []) {
-          registeredComponents.add(variable.name)
+          if (!isTypeOnlyImport(variable)) {
+            registeredComponents.add(variable.name)
+          }
         }
       }
     }
+
     /**
      * Checks whether the given node is the verification target node.
      * @param {VElement} node element node
diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index d57a5ffbf..ccd7792d1 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -193,6 +193,35 @@ tester.run('component-name-in-template-casing', rule, {
         </template>
       `,
       options: ['kebab-case', { globals: ['RouterView', 'router-link'] }]
+    },
+
+    // type-only imports
+    {
+      code: `
+        <script setup lang="ts">
+          import type Foo from './Foo.vue'
+          import type { HelloWorld1 } from './components/HelloWorld'
+          import { type HelloWorld2 } from './components/HelloWorld2'
+          import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
+          import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+          import { type default as HelloWorld5 } from './components/HelloWorld5';
+          import { type Component } from 'vue';
+        </script>
+
+        <template>
+          <foo />
+          <hello-world1 />
+          <hello-world2 />
+          <hello-world3 />
+          <hello-world4 />
+          <hello-world5 />
+          <component />
+        </template>
+      `,
+      options: ['PascalCase', { registeredComponentsOnly: true }],
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser')
+      }
     }
   ],
   invalid: [
@@ -939,6 +968,92 @@ tester.run('component-name-in-template-casing', rule, {
           column: 11
         }
       ]
+    },
+    // type-only imports
+    {
+      code: `
+        <script setup lang="ts">
+          import type Foo from './Foo.vue'
+          import type { HelloWorld1 } from './components/HelloWorld'
+          import { type HelloWorld2 } from './components/HelloWorld2'
+          import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
+          import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+          import { type default as HelloWorld5 } from './components/HelloWorld5';
+          import { type Component } from 'vue';
+        </script>
+
+        <template>
+          <foo />
+          <hello-world1 />
+          <hello-world2 />
+          <hello-world3 />
+          <hello-world4 />
+          <hello-world5 />
+          <component />
+        </template>
+      `,
+      options: ['PascalCase', { registeredComponentsOnly: false }],
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser')
+      },
+      output: `
+        <script setup lang="ts">
+          import type Foo from './Foo.vue'
+          import type { HelloWorld1 } from './components/HelloWorld'
+          import { type HelloWorld2 } from './components/HelloWorld2'
+          import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
+          import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+          import { type default as HelloWorld5 } from './components/HelloWorld5';
+          import { type Component } from 'vue';
+        </script>
+
+        <template>
+          <Foo />
+          <HelloWorld1 />
+          <HelloWorld2 />
+          <HelloWorld3 />
+          <HelloWorld4 />
+          <HelloWorld5 />
+          <Component />
+        </template>
+      `,
+      errors: [
+        {
+          message: 'Component name "foo" is not PascalCase.',
+          line: 13,
+          column: 11
+        },
+        {
+          message: 'Component name "hello-world1" is not PascalCase.',
+          line: 14,
+          column: 11
+        },
+        {
+          message: 'Component name "hello-world2" is not PascalCase.',
+          line: 15,
+          column: 11
+        },
+        {
+          message: 'Component name "hello-world3" is not PascalCase.',
+          line: 16,
+          column: 11
+        },
+        {
+          message: 'Component name "hello-world4" is not PascalCase.',
+          line: 17,
+          column: 11
+        },
+        {
+          message: 'Component name "hello-world5" is not PascalCase.',
+          line: 18,
+          column: 11
+        },
+        {
+          message: 'Component name "component" is not PascalCase.',
+          line: 19,
+          column: 11
+        }
+      ]
     }
   ]
 })

From 1aac59c34a53afd25a48422239d23afffecc56f0 Mon Sep 17 00:00:00 2001
From: TO <takahiro.ohori@gmail.com>
Date: Sat, 7 Jan 2023 15:00:44 +0900
Subject: [PATCH 4/4] fix: test failure in ts-eslint-v4

---
 .../component-name-in-template-casing.js      | 233 ++++++++++--------
 1 file changed, 124 insertions(+), 109 deletions(-)

diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index ccd7792d1..7b3f012c8 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -4,6 +4,7 @@
 'use strict'
 
 const rule = require('../../../lib/rules/component-name-in-template-casing')
+const semver = require('semver')
 const RuleTester = require('eslint').RuleTester
 
 const tester = new RuleTester({
@@ -196,33 +197,40 @@ tester.run('component-name-in-template-casing', rule, {
     },
 
     // type-only imports
-    {
-      code: `
-        <script setup lang="ts">
-          import type Foo from './Foo.vue'
-          import type { HelloWorld1 } from './components/HelloWorld'
-          import { type HelloWorld2 } from './components/HelloWorld2'
-          import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
-          import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
-          import { type default as HelloWorld5 } from './components/HelloWorld5';
-          import { type Component } from 'vue';
-        </script>
+    ...(semver.gte(
+      require('@typescript-eslint/parser/package.json').version,
+      '5.0.0'
+    )
+      ? [
+          {
+            code: `
+              <script setup lang="ts">
+                import type Foo from './Foo.vue'
+                import type { HelloWorld1 } from './components/HelloWorld'
+                import { type HelloWorld2 } from './components/HelloWorld2'
+                import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
+                import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+                import { type default as HelloWorld5 } from './components/HelloWorld5';
+                import { type Component } from 'vue';
+              </script>
 
-        <template>
-          <foo />
-          <hello-world1 />
-          <hello-world2 />
-          <hello-world3 />
-          <hello-world4 />
-          <hello-world5 />
-          <component />
-        </template>
-      `,
-      options: ['PascalCase', { registeredComponentsOnly: true }],
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      }
-    }
+              <template>
+                <foo />
+                <hello-world1 />
+                <hello-world2 />
+                <hello-world3 />
+                <hello-world4 />
+                <hello-world5 />
+                <component />
+              </template>
+            `,
+            options: ['PascalCase', { registeredComponentsOnly: true }],
+            parserOptions: {
+              parser: require.resolve('@typescript-eslint/parser')
+            }
+          }
+        ]
+      : [])
   ],
   invalid: [
     {
@@ -970,90 +978,97 @@ tester.run('component-name-in-template-casing', rule, {
       ]
     },
     // type-only imports
-    {
-      code: `
-        <script setup lang="ts">
-          import type Foo from './Foo.vue'
-          import type { HelloWorld1 } from './components/HelloWorld'
-          import { type HelloWorld2 } from './components/HelloWorld2'
-          import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
-          import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
-          import { type default as HelloWorld5 } from './components/HelloWorld5';
-          import { type Component } from 'vue';
-        </script>
+    ...(semver.gte(
+      require('@typescript-eslint/parser/package.json').version,
+      '5.0.0'
+    )
+      ? [
+          {
+            code: `
+              <script setup lang="ts">
+                import type Foo from './Foo.vue'
+                import type { HelloWorld1 } from './components/HelloWorld'
+                import { type HelloWorld2 } from './components/HelloWorld2'
+                import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
+                import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+                import { type default as HelloWorld5 } from './components/HelloWorld5';
+                import { type Component } from 'vue';
+              </script>
 
-        <template>
-          <foo />
-          <hello-world1 />
-          <hello-world2 />
-          <hello-world3 />
-          <hello-world4 />
-          <hello-world5 />
-          <component />
-        </template>
-      `,
-      options: ['PascalCase', { registeredComponentsOnly: false }],
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
-      output: `
-        <script setup lang="ts">
-          import type Foo from './Foo.vue'
-          import type { HelloWorld1 } from './components/HelloWorld'
-          import { type HelloWorld2 } from './components/HelloWorld2'
-          import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
-          import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
-          import { type default as HelloWorld5 } from './components/HelloWorld5';
-          import { type Component } from 'vue';
-        </script>
+              <template>
+                <foo />
+                <hello-world1 />
+                <hello-world2 />
+                <hello-world3 />
+                <hello-world4 />
+                <hello-world5 />
+                <component />
+              </template>
+            `,
+            options: ['PascalCase', { registeredComponentsOnly: false }],
+            parserOptions: {
+              parser: require.resolve('@typescript-eslint/parser')
+            },
+            output: `
+              <script setup lang="ts">
+                import type Foo from './Foo.vue'
+                import type { HelloWorld1 } from './components/HelloWorld'
+                import { type HelloWorld2 } from './components/HelloWorld2'
+                import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
+                import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+                import { type default as HelloWorld5 } from './components/HelloWorld5';
+                import { type Component } from 'vue';
+              </script>
 
-        <template>
-          <Foo />
-          <HelloWorld1 />
-          <HelloWorld2 />
-          <HelloWorld3 />
-          <HelloWorld4 />
-          <HelloWorld5 />
-          <Component />
-        </template>
-      `,
-      errors: [
-        {
-          message: 'Component name "foo" is not PascalCase.',
-          line: 13,
-          column: 11
-        },
-        {
-          message: 'Component name "hello-world1" is not PascalCase.',
-          line: 14,
-          column: 11
-        },
-        {
-          message: 'Component name "hello-world2" is not PascalCase.',
-          line: 15,
-          column: 11
-        },
-        {
-          message: 'Component name "hello-world3" is not PascalCase.',
-          line: 16,
-          column: 11
-        },
-        {
-          message: 'Component name "hello-world4" is not PascalCase.',
-          line: 17,
-          column: 11
-        },
-        {
-          message: 'Component name "hello-world5" is not PascalCase.',
-          line: 18,
-          column: 11
-        },
-        {
-          message: 'Component name "component" is not PascalCase.',
-          line: 19,
-          column: 11
-        }
-      ]
-    }
+              <template>
+                <Foo />
+                <HelloWorld1 />
+                <HelloWorld2 />
+                <HelloWorld3 />
+                <HelloWorld4 />
+                <HelloWorld5 />
+                <Component />
+              </template>
+            `,
+            errors: [
+              {
+                message: 'Component name "foo" is not PascalCase.',
+                line: 13,
+                column: 17
+              },
+              {
+                message: 'Component name "hello-world1" is not PascalCase.',
+                line: 14,
+                column: 17
+              },
+              {
+                message: 'Component name "hello-world2" is not PascalCase.',
+                line: 15,
+                column: 17
+              },
+              {
+                message: 'Component name "hello-world3" is not PascalCase.',
+                line: 16,
+                column: 17
+              },
+              {
+                message: 'Component name "hello-world4" is not PascalCase.',
+                line: 17,
+                column: 17
+              },
+              {
+                message: 'Component name "hello-world5" is not PascalCase.',
+                line: 18,
+                column: 17
+              },
+              {
+                message: 'Component name "component" is not PascalCase.',
+                line: 19,
+                column: 17
+              }
+            ]
+          }
+        ]
+      : [])
   ]
 })