Support for dynamic components

README.md

@@ -7,7 +7,7 @@
 
 ## Rules
 
-- [component-not-registered](src/component-not-registered.js) - Warn if a component is used in a [SFC file](https://vuejs.org/v2/guide/single-file-components.html) without being registered (a.k.a. a globally registered component). **Does not support dynamically assigned components.**
+- [component-not-registered](src/component-not-registered.js) - Warn if a component is used in a [SFC file](https://vuejs.org/v2/guide/single-file-components.html) without being registered (a.k.a. a globally registered component). **Supports simple dynamically assigned components (only literal values).**
 
 ## License
 

package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-vue": "^5.2.3"
   },
   "devDependencies": {
+    "dedent": "^0.7.0",
     "eslint": "^6.2.2",
     "eslint-config-xo-space": "^0.21.0",
     "eslint-plugin-vue": "^5.2.3",

src/component-not-registered.js

@@ -1,7 +1,9 @@
 /**
  * @fileoverview Warn if a component is used in a template without being registered within that file.
  * @author sharkykh
- * Based on https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/component-name-in-template-casing.js
+ * Based on:
+ * 1. https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/component-name-in-template-casing.js
+ * 2. https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unused-components.js
  */
 'use strict';
 
@@ -111,6 +113,12 @@ module.exports = {
             report(open, name);
           }
         },
+        "VAttribute[directive=false][key.name='is']"(node) {
+          const name = node.value.value;
+          if (!isComponentRegistered(name)) {
+            report(node.value, name);
+          }
+        },
         Program(node) {
           hasInvalidEOF = utils.hasInvalidEOF(node);
         }

tests/component-not-registered.js

@@ -8,6 +8,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
+const dedent = require('dedent');
 const { RuleTester } = require('eslint');
 const rule = require('../src/component-not-registered.js');
 
@@ -25,24 +26,32 @@ const tester = new RuleTester({
 
 tester.run('component-not-registered', rule, {
   valid: [
-    { // 1
+    {
       filename: 'test.vue',
-      code: `<template>
+      code: dedent`
+      <template>
         <div>
           <my-component />
+          <MyComponent />
+          <other-component />
+          <OtherComponent />
         </div>
       </template>
       <script>
         export default {
           components: {
-            MyComponent
+            MyComponent,
+            'other-component': OtherComponent
           }
         }
       </script>`
     },
-    { // 2 -- dynamic components are not supported yet
+    { // Dynamic component names
       filename: 'test.vue',
-      code: `<template>
+      code: dedent`
+      <template>
+        <component :is="MyComponent" />
+        <component is="MyComponent" />
         <component is="my-component" />
       </template>
       <script>
@@ -52,20 +61,90 @@ tester.run('component-not-registered', rule, {
           },
         }
       </script>`
+    },
+    { // Non-literal dynamic component names is not supported
+      filename: 'test.vue',
+      code: dedent`
+      <template>
+        <component :is="'other-component'" />
+      </template>
+      <script>
+        export default {
+          components: {
+            MyComponent,
+          },
+        }
+      </script>`
+    },
+    { // Allowed components option
+      filename: 'test.vue',
+      code: dedent`
+      <template>
+        <router-link :to="home/" />
+      </template>
+      <script>
+        export default {}
+      </script>`,
+      options: [
+        [
+          'router-link'
+        ]
+      ]
+    },
+    { // Vue built-in components
+      filename: 'test.vue',
+      code: dedent`
+      <template>
+        <template />
+        <keep-alive />
+        <slot />
+        <transition />
+        <transition-group />
+      </template>
+      <script>
+        export default {}
+      </script>`
     }
   ],
   invalid: [
-    { // 1
+    {
+      filename: 'test.vue',
+      code: dedent`
+      <template>
+        <component is="other-component" />
+        <component is="OtherComponent" />
+      </template>
+      <script>
+        export default {
+          components: {
+            MyComponent,
+          },
+        }
+      </script>`,
+      errors: [{
+        message: 'Component "other-component" is used but not registered.',
+        line: 2,
+        column: 17
+      },
+      {
+        message: 'Component "OtherComponent" is used but not registered.',
+        line: 3,
+        column: 17
+      }]
+    },
+    {
       filename: 'test.vue',
-      code: `<template>
+      code: dedent`
+      <template>
         <my-component />
       </template>
       <script>
         export default {}
       </script>`,
       errors: [{
         message: 'Component "my-component" is used but not registered.',
-        line: 2
+        line: 2,
+        column: 3
       }]
     }
   ]

yarn.lock

@@ -207,6 +207,11 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
+
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"