Added linting rule to use helper function to define component

Bug: 1205825
Change-Id: I78ce8199dc599be1f1121e65b72b83a8f73733c4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2878729
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Kriti Sapra <kritisapra@google.com>

front_end/.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     'rulesdir/l10n_no_unused_message': 2,
     'rulesdir/components_import': 2,
     'rulesdir/custom_element_definitions_location': 2,
+    'rulesdir/custom_element_component_definition': 2,
   },
   'overrides': [
     {

front_end/panels/elements/components/StylePropertyEditor.ts

@@ -252,7 +252,7 @@ export class GridEditor extends StylePropertyEditor {
   }
 }
 
-customElements.define('devtools-grid-editor', GridEditor);
+ComponentHelpers.CustomElements.defineComponent('devtools-grid-editor', GridEditor);
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

front_end/ui/components/helpers/custom-elements.ts

@@ -11,5 +11,6 @@ export function defineComponent(tagName: string, componentClass: CustomElementCo
     console.error(`${tagName} already defined!`);
     return;
   }
+  // eslint-disable-next-line rulesdir/custom_element_component_definition
   customElements.define(tagName, componentClass);
 }

scripts/eslint_rules/lib/custom_element_component_definition.js

@@ -0,0 +1,39 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+'use strict';
+
+/**
+ * @fileoverview Prevent usage of customElements.define() and use the helper
+ * function instead
+ */
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'problem',
+
+    docs: {
+      description: 'Usage of customElements.define',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    schema: []  // no options
+  },
+  create: function(context) {
+    return {
+      MemberExpression(node) {
+        if (node.object.name === 'customElements' && node.property.name === 'define') {
+          context.report({
+            node,
+            message:
+                'do not use customElements.define() to define a component. Use the CustomElements.defineComponent() function in front_end/ui/components/helper instead.'
+          });
+        }
+      }
+    };
+  }
+};

scripts/eslint_rules/tests/custom_element_component_definition_test.js

@@ -0,0 +1,33 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+'use strict';
+
+const rule = require('../lib/custom_element_component_definition.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+});
+
+ruleTester.run('custom_element_component_definition', rule, {
+  valid: [
+    {
+      code: `
+        ComponentHelpers.CustomElements.defineComponent('devtools-resources-frame-details-view', FrameDetailsReportView);
+      `,
+      filename: 'front_end/ui/components/component/file.ts',
+    },
+  ],
+
+  invalid: [
+    {
+      code: `
+        customElements.define('devtools-data-grid', DataGrid);
+      `,
+      filename: 'front_end/ui/components/component/file.ts',
+      errors: [{
+        message:
+            'do not use customElements.define() to define a component. Use the CustomElements.defineComponent() function in front_end/ui/components/helper instead.'
+      }],
+    },
+  ]
+});