@gitlab/eslint-plugin 20.1.0 → 20.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [20.2.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v20.1.0...v20.2.0) (2024-09-03)
+
+
+### Features
+
+* add rule for uninitialised apollo query properties ([f89eace](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/f89eace7498900d90e06b0be214c51a589474d53)), closes [#74](https://gitlab.com/gitlab-org/frontend/eslint-plugin/issues/74)
+
 # [20.1.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v20.0.0...v20.1.0) (2024-08-28)
 
 

package/docs/rules/vue-no-undef-apollo-properties.md

@@ -0,0 +1,95 @@
+# @gitlab/vue-no-undef-apollo-properties
+
+Require Apollo query properties to be initialized in component data.
+
+Sensible initial values for Apollo queries should be defined in component data.
+This reduces the likelihood of unexpected behaviour, especially when running
+under @vue/compat.
+
+This rule does not detect whether the initial value is of the correct type.
+
+## Rule Details
+
+### Examples of **incorrect** code for this rule
+
+```html
+<script>
+  export default {
+    data() {
+      return {
+        foo: '',
+        qux: undefined,
+      };
+    },
+    apollo: {
+      $subscribe: {
+        foo: {
+          // ...
+        },
+        bar: {
+          // This isn't defined in data.
+          // ...
+        },
+      },
+      qux: {
+        // ...
+      },
+      bbq: {
+        // This isn't defined in data.
+        // ...
+      },
+    },
+    render(h) {
+      return h();
+    },
+  };
+</script>
+```
+
+### Examples of **correct** code for this rule
+
+```html
+<script>
+  export default {
+    data() {
+      return {
+        foo: '',
+        qux: undefined,
+        bar: null,
+        bbq: [],
+      };
+    },
+    apollo: {
+      $subscribe: {
+        foo: {
+          // ...
+        },
+        bar: {
+          // ...
+        },
+      },
+      qux: {
+        // ...
+      },
+      bbq: {
+        // ...
+      },
+    },
+    render(h) {
+      return h();
+    },
+  };
+</script>
+```
+
+## Options
+
+Nothing
+
+## Related rules
+
+Nothing
+
+## When Not To Use It
+
+If you don't use VueApollo with the Options API, don't use this rule.

package/docs/rules.md

@@ -8,15 +8,16 @@ Available rules:
 - [no-runtime-template-compiler](./rules/no-runtime-template-compiler.md): Disallow components which rely on a runtime template compiler.
 - [require-i18n-strings](./rules/require-i18n-strings.md): Detect a string which has been hard coded and requires externalization.
 - [require-valid-i18n-helpers](./rules/require-valid-i18n-helpers.md): Enforces valid usage of translation helpers in JavaScript.
-- [tailwind](./rules/tailwind.md): Prevents undesired Tailwind CSS features from being used.
+- [tailwind](./rules/tailwind.md): Ensures Tailwind CSS is used according to our internal guidelines.
 - [vtu-no-explicit-wrapper-destroy](./rules/vtu-no-explicit-wrapper-destroy.md): Prevents redundant destroy calls and null asignment
 - [vtu-no-wrapper-vm](./rules/vtu-no-wrapper-vm.md): Prevent direct access to `vm` internals for `@vue/test-utils` wrappers.
 - [vue-no-data-toggle](./rules/vue-no-data-toggle.md): Restrict the use of `data-toggle` bootstrap behaviors within Vue templates
 - [vue-no-new-non-primitive-in-template](./rules/vue-no-new-non-primitive-in-template.md): Prevents non-primitive values from being declared in templates
+- [vue-no-undef-apollo-properties](./rules/vue-no-undef-apollo-properties.md): Require Apollo query properties to be initialized in component data.
 - [vue-prefer-dollar-scopedslots](./rules/vue-prefer-dollar-scopedslots.md): Prefer $scopedSlots over $slots for Vue 2.x.
 - [vue-require-i18n-attribute-strings](./rules/vue-require-i18n-attribute-strings.md): Detect non externalized strings in vue `<template>` attributes
 - [vue-require-i18n-strings](./rules/vue-require-i18n-strings.md): enforce no bare strings in vue `<template>`
 - [vue-require-required-key](./rules/vue-require-required-key.md): Require the required key to be set
 - [vue-require-valid-i18n-helpers](./rules/vue-require-valid-i18n-helpers.md): Enforces valid usage of translation helpers in Vue templates.
 - [vue-slot-name-casing](./rules/vue-slot-name-casing.md): enforce specific casing for slot naming style in template
-- [vue-tailwind](./rules/vue-tailwind.md): Prevents undesired Tailwind CSS features from being used in Vue templates.
+- [vue-tailwind](./rules/vue-tailwind.md): Ensures Tailwind CSS is used according to our internal guidelines in Vue templates.

package/lib/index.js

@@ -12,6 +12,7 @@ module.exports = {
     'vtu-no-wrapper-vm': require('./rules/vtu-no-wrapper-vm.js'),
     'vue-no-data-toggle': require('./rules/vue-no-data-toggle.js'),
     'vue-no-new-non-primitive-in-template': require('./rules/vue-no-new-non-primitive-in-template.js'),
+    'vue-no-undef-apollo-properties': require('./rules/vue-no-undef-apollo-properties.js'),
     'vue-prefer-dollar-scopedslots': require('./rules/vue-prefer-dollar-scopedslots.js'),
     'vue-require-i18n-attribute-strings': require('./rules/vue-require-i18n-attribute-strings.js'),
     'vue-require-i18n-strings': require('./rules/vue-require-i18n-strings.js'),

package/lib/rules/vue-no-undef-apollo-properties.js

@@ -0,0 +1,102 @@
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+const { DOCS_BASE_URL } = require('../constants');
+const utils = require('eslint-plugin-vue/lib/utils');
+
+// ------------------------------------------------------------------------------
+//   Helpers
+// ------------------------------------------------------------------------------
+
+const DOLLAR_SUBSCRIBE = '$subscribe';
+
+const VUE_APOLLO_SPECIAL_OPTIONS = new Set([
+  '$skipAll',
+  '$skipAllQueries',
+  '$skipAllSubscriptions',
+  '$deep',
+  '$error',
+  '$query',
+
+  // This one isn't special in the same way as the rest, but the normal code
+  // paths below need to be skipped for this case as well. It is handled in a
+  // separate code path.
+  DOLLAR_SUBSCRIBE,
+]);
+
+function findProperty(objectExpression, name) {
+  return objectExpression.properties.find(
+    (p) =>
+      p.type === 'Property' &&
+      utils.getStaticPropertyName(p) === name &&
+      p.value.type === 'ObjectExpression',
+  );
+}
+
+function getDataKeys(componentObject) {
+  return new Set(
+    Array.from(utils.iterateProperties(componentObject, new Set(['data']))).map(({ name }) => name),
+  );
+}
+
+function* getApolloKeyNodeWrappers(componentObject) {
+  const apolloNode = findProperty(componentObject, 'apollo');
+
+  if (!apolloNode) return;
+
+  for (const nodeWrapper of utils.iterateObjectExpression(apolloNode.value)) {
+    if (VUE_APOLLO_SPECIAL_OPTIONS.has(nodeWrapper.name)) {
+      // Future-proofing against VueApollo 4's special options:
+      // https://apollo.vuejs.org/guide-option/special-options.html#special-options
+      continue;
+    }
+
+    yield nodeWrapper;
+  }
+
+  const subscribeNode = findProperty(apolloNode.value, DOLLAR_SUBSCRIBE);
+
+  if (subscribeNode) {
+    yield* utils.iterateObjectExpression(subscribeNode.value);
+  }
+}
+
+function* getApolloKeyNodes(componentObject) {
+  for (const nodeWrapper of getApolloKeyNodeWrappers(componentObject)) {
+    yield nodeWrapper.node;
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'error',
+    docs: {
+      description: 'Require Apollo query properties to be initialized in component data.',
+      url: DOCS_BASE_URL + '/vue-no-undef-apollo-properties.md',
+    },
+    messages: {
+      noInitialValue: 'Apollo query property {{name}} is not initialized in component data.',
+    },
+  },
+  create(context) {
+    return utils.executeOnVue(context, (node) => {
+      const dataKeys = getDataKeys(node);
+
+      for (const apolloKeyNode of getApolloKeyNodes(node)) {
+        if (!dataKeys.has(apolloKeyNode.name)) {
+          context.report({
+            node: apolloKeyNode,
+            messageId: 'noInitialValue',
+            data: {
+              name: apolloKeyNode.name,
+            },
+          });
+        }
+      }
+    });
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/eslint-plugin",
-  "version": "20.1.0",
+  "version": "20.2.0",
   "description": "GitLab package for our custom eslint rules",
   "main": "lib/index.js",
   "scripts": {