prop value shape deprecation lint rule

eslint-rules/lib/rules/prop-value-shape-deprecation.js

@@ -0,0 +1,138 @@
+const _ = require('lodash');
+const utils = require('../utils');
+
+const MAP_SCHEMA = {
+  type: 'object',
+  properties: {
+    components: {
+      type: 'array',
+      items: {
+        type: 'string'
+      }
+    },
+    propNames: {
+      type: 'array',
+      items: {
+        type: 'string'
+      }
+    },
+    shape: {
+      type: 'array',
+      items: {
+        type: 'object',
+        required: ['prop', 'message', 'fix'],
+        properties: {
+          prop: {
+            type: 'string'
+          },
+          message: {
+            type: 'string'
+          },
+          fix: {
+            type: 'object'
+          }
+        }
+      }
+    }
+  }
+};
+
+module.exports = {
+  meta: {
+    docs: {
+      description: "Detect deprecation of prop's value shape",
+      category: 'Best Practices',
+      recommended: true
+    },
+    messages: {
+      uiLib: "This prop's value shape is deprecated."
+    },
+    fixable: 'code',
+    schema: [MAP_SCHEMA]
+  },
+  create(context) {
+    function reportPropValueShapeDeprecation(attributePropertyKey, attributeName, origin, node) {
+      const nodeName = _.get(node, 'name.name');
+      const destination = _.get(origin, 'fix.propName');
+      const message = `The shape of '${attributeName}' prop of '${nodeName}' doesn't contain '${origin.prop}' anymore. Please use '${destination}' instead (fix is available).`;
+      context.report({
+        node,
+        message,
+        fix(fixer) {
+          if (destination && attributePropertyKey) {
+            return fixer.replaceText(attributePropertyKey, destination);
+          }
+        }
+      });
+    }
+
+    function testJSXAttributes(node) {
+      try {
+        const {deprecations} = _.get(context, 'options[0]');
+        const nodeName = _.get(node, 'name.name');
+        _.forEach(deprecations, deprecation => {
+          if (_.includes(deprecation.components, nodeName)) {
+            _.forEach(node.attributes, attribute => {
+              const attributeName = _.get(attribute, 'name.name');
+              if (attribute.type === 'JSXSpreadAttribute') {
+                const spreadSource = utils.findValueNodeOfIdentifier(attribute.argument.name, context.getScope());
+                const spreadSourceName = _.get(spreadSource, 'properties[0].key.name');
+                checkAttributeProperties(
+                  spreadSource.properties[0].value.properties,
+                  spreadSourceName,
+                  deprecation,
+                  node,
+                  context
+                );
+              } else if (_.includes(deprecation.propNames, attributeName)) {
+                checkAttribute(attribute, deprecation, node);
+              }
+            });
+          }
+        });
+      } catch (err) {
+        console.log('Found error in: ', context.getFilename());
+      }
+    }
+
+    function checkAttribute(attribute, deprecation, node) {
+      const attributeName = _.get(attribute, 'name.name');
+      const attributeType = _.get(attribute, 'value.expression.type');
+      if (attributeType === 'Identifier') {
+        const passedProp = utils.findValueNodeOfIdentifier(attribute.value.expression.name, context.getScope());
+        if (passedProp && passedProp.properties) {
+          checkAttributeProperties(passedProp.properties, attributeName, deprecation, node, context);
+        }
+      }
+      const attributeProps = _.get(attribute, 'value.expression.properties');
+      for (let index = 0; index < attributeProps.length; index++) {
+        const spreadElementType = _.get(attribute, `value.expression.properties[${index}].type`);
+        if (attributeType === 'ObjectExpression' && spreadElementType === 'ExperimentalSpreadProperty') {
+          const spreadSource = utils.findValueNodeOfIdentifier(
+            attribute.value.expression.properties[index].argument.name,
+            context.getScope()
+          );
+          if (spreadSource && spreadSource.properties) {
+            checkAttributeProperties(spreadSource.properties, attributeName, deprecation, node);
+          }
+        }
+      }
+      const attributeProperties = _.get(attribute, 'value.expression.properties');
+      checkAttributeProperties(attributeProperties, attributeName, deprecation, node);
+    }
+
+    function checkAttributeProperties(attributeProperties, attributeName, deprecation, node) {
+      for (let i = 0; i <= attributeProperties.length; i++) {
+        const propertyName = _.get(attributeProperties[i], 'key.name');
+        const origin = propertyName && _.find(deprecation.shape, ['prop', propertyName]);
+        if (origin && origin.prop && propertyName === origin.prop) {
+          reportPropValueShapeDeprecation(attributeProperties[i].key, attributeName, origin, node);
+        }
+      }
+    }
+
+    return {
+      JSXOpeningElement: testJSXAttributes
+    };
+  }
+};

eslint-rules/tests/lib/rules/prop-value-shape-deprecation.js

@@ -0,0 +1,148 @@
+const RuleTester = require('eslint').RuleTester;
+const rule = require('../../../lib/rules/prop-value-shape-deprecation');
+const deprecationsJson = require('../../prop-value-shape-deprecation.json');
+
+RuleTester.setDefaultConfig({
+  parser: 'babel-eslint',
+  parserOptions: {ecmaVersion: 6, ecmaFeatures: {jsx: true}}
+});
+
+const ruleTester = new RuleTester();
+const imageSource = 'imageSource: {uri: some_uri}';
+const source = 'source: {uri: some_uri}';
+const ruleOptions = [{deprecations: deprecationsJson}];
+const PassedPropExampleCode = `
+  const myProps = {
+    goodProp: goodValue,
+    ${imageSource}
+  };
+
+  <Label avatar={myProps}/>
+`;
+const PassedPropExampleOutput = `
+  const myProps = {
+    goodProp: goodValue,
+    ${source}
+  };
+
+  <Label avatar={myProps}/>
+`;
+
+const firstLevelSpreadCode = `
+const myProps = {
+  avatarProps: {
+    goodProp: goodValue,
+    ${imageSource}
+  }
+};
+
+<Label goodProp={'goodValue'} {...myProps}/>
+`;
+
+const firstLevelSpreadOutput = `
+const myProps = {
+  avatarProps: {
+    goodProp: goodValue,
+    ${source}
+  }
+};
+
+<Label goodProp={'goodValue'} {...myProps}/>
+`;
+
+const secondLevelSpreadCode = `
+const myProps = {
+  goodProp: goodValue,
+  ${imageSource}
+};
+
+<Label avatar={{goodProp: goodValue, ...myProps}}/>
+`;
+
+const secondLevelSpreadOutput = `
+const myProps = {
+  goodProp: goodValue,
+  ${source}
+};
+
+<Label avatar={{goodProp: goodValue, ...myProps}}/>
+`;
+
+ruleTester.run('prop-value-shape-deprecation', rule, {
+  valid: [
+    {
+      options: ruleOptions,
+      code: `<ListItem avatar={{${source}}}/>`
+    },
+    {
+      options: ruleOptions,
+      code: `<ListItem avatar={{someProp: goodValue, ${source}}}/>`
+    },
+    {
+      options: ruleOptions,
+      code: `<ListItem goodProp={{${imageSource}}} avatar={{${source}}}/>`
+    }
+  ],
+  invalid: [
+    {
+      options: ruleOptions,
+      code: `<ListItem avatar={{${imageSource}, someProp: someValue}}/>`,
+      errors: [
+        {
+          message: `The shape of 'avatar' prop of 'ListItem' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`
+        }
+      ],
+      output: `<ListItem avatar={{${source}, someProp: someValue}}/>`
+    },
+    {
+      options: ruleOptions,
+      code: `<ListItem avatar={{someProp: someValue, ${imageSource}}}/>`,
+      errors: [
+        {
+          message: `The shape of 'avatar' prop of 'ListItem' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`
+        }
+      ],
+      output: `<ListItem avatar={{someProp: someValue, ${source}}}/>`
+    },
+    {
+      options: ruleOptions,
+      code: `<ListItem someProp={someValue} avatar={{${imageSource}}}/>`,
+      errors: [
+        {
+          message: `The shape of 'avatar' prop of 'ListItem' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`
+        }
+      ],
+      output: `<ListItem someProp={someValue} avatar={{${source}}}/>`
+    },
+    {
+      options: ruleOptions,
+      code: PassedPropExampleCode,
+      errors: [
+        {
+          message: `The shape of 'avatar' prop of 'Label' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`
+        }
+      ],
+      output: PassedPropExampleOutput
+    },
+    {
+      options: ruleOptions,
+      code: firstLevelSpreadCode,
+      errors: [
+        {
+          message: `The shape of 'avatarProps' prop of 'Label' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`
+        }
+      ],
+      output: firstLevelSpreadOutput
+    },
+    {
+      options: ruleOptions,
+      code: secondLevelSpreadCode,
+      errors: [
+        {
+          message: `The shape of 'avatar' prop of 'Label' doesn't contain 'imageSource' anymore. Please use 'source' instead (fix is available).`
+        }
+      ],
+      output: secondLevelSpreadOutput
+    }
+  ]
+});

eslint-rules/tests/prop-value-shape-deprecation.json

@@ -0,0 +1,15 @@
+[
+  {
+    "components": ["ListItem", "Label"],
+    "propNames": ["avatar", "avatarProps"],
+    "shape": [
+      {
+        "prop": "imageSource",
+        "message": "Please use the 'source' prop instead (fix is available).",
+        "fix": {
+          "propName": "source"
+        }
+      }
+    ]
+  }
+]