chore(eslint): add custom rule to disallow componentOnReady method (#…

…25944)

core/.eslintrc.js

@@ -16,7 +16,8 @@ module.exports = {
     "sourceType": "module"
   },
   "plugins": [
-    "@typescript-eslint"
+    "@typescript-eslint",
+    "custom-rules"
   ],
   "rules": {
     "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -29,6 +30,7 @@ module.exports = {
     ],
     "no-useless-catch": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "no-case-declarations": "off"
+    "no-case-declarations": "off",
+    "custom-rules/no-component-on-ready-method": "error"
   }
 };

core/custom-rules/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'no-component-on-ready-method': require('./no-component-on-ready-method.js')
+  }
+}

core/custom-rules/no-component-on-ready-method.js

@@ -0,0 +1,23 @@
+module.exports = {
+    meta: {
+      messages: {
+        noComponentOnReadyMethod: 'Using the componentOnReady method is not allowed. Use the componentOnReady helper utility in src/utils/helpers.ts instead.',
+      },
+    },
+    create(context) {
+      return {
+        CallExpression(node) {
+          /**
+           * We only want to exclude usages of componentOnReady().
+           * Checking for the existence of the componentOnReady method
+           * is a way of determining if we are in a lazy loaded build
+           * or custom elements build, so we want to allow that.
+           */
+          const callee = node.callee;
+          if (callee.type === 'MemberExpression' && callee.property.name === 'componentOnReady') {
+            context.report({ node: node, messageId: 'noComponentOnReadyMethod' });
+          }
+      }
+    }
+  }
+};

core/custom-rules/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "eslint-plugin-custom-rules",
+  "version": "1.0.0",
+  "main": "index.js"
+}