From 2597b415c14014d520ecefcd589bf3bd2d11acbf Mon Sep 17 00:00:00 2001
From: Kriti Sapra <kritisapra@google.com>
Date: Fri, 7 May 2021 10:11:10 +0000
Subject: [PATCH] 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                        |  1 +
 .../components/StylePropertyEditor.ts         |  2 +-
 .../ui/components/helpers/custom-elements.ts  |  1 +
 .../custom_element_component_definition.js    | 39 +++++++++++++++++++
 ...ustom_element_component_definition_test.js | 33 ++++++++++++++++
 5 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 scripts/eslint_rules/lib/custom_element_component_definition.js
 create mode 100644 scripts/eslint_rules/tests/custom_element_component_definition_test.js

diff --git a/front_end/.eslintrc.js b/front_end/.eslintrc.js
index ab0a768a1a..219b4501ea 100644
--- a/front_end/.eslintrc.js
+++ b/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': [
     {
diff --git a/front_end/panels/elements/components/StylePropertyEditor.ts b/front_end/panels/elements/components/StylePropertyEditor.ts
index 3023e1d3f7..66c0bd9594 100644
--- a/front_end/panels/elements/components/StylePropertyEditor.ts
+++ b/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
diff --git a/front_end/ui/components/helpers/custom-elements.ts b/front_end/ui/components/helpers/custom-elements.ts
index e8232e70ae..c134b67944 100644
--- a/front_end/ui/components/helpers/custom-elements.ts
+++ b/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);
 }
diff --git a/scripts/eslint_rules/lib/custom_element_component_definition.js b/scripts/eslint_rules/lib/custom_element_component_definition.js
new file mode 100644
index 0000000000..faf1de42cd
--- /dev/null
+++ b/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.'
+          });
+        }
+      }
+    };
+  }
+};
diff --git a/scripts/eslint_rules/tests/custom_element_component_definition_test.js b/scripts/eslint_rules/tests/custom_element_component_definition_test.js
new file mode 100644
index 0000000000..8295c1d908
--- /dev/null
+++ b/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.'
+      }],
+    },
+  ]
+});