Upgrade Prettier to ^1.9.2 (arrowParens: always) 🎉 & update dependencies

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "bracketSpacing": false,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "arrowParens": "always"
 }

CHANGELOG.md

@@ -21,6 +21,55 @@
 * Added `shopify/polaris-prefer-sectioned-prop` rule
 * Added `shopify/react-initialize-state` rule
 * Added `shopify/react-type-state` rule
+* Added [`implicit-arrow-linebreak`][] rule
+* Added [`lines-around-comment`][] rule (as a [special
+  rule][lines-around-comment-special]).
+* Added [`no-unexpected-multiline`][] rule (as a [special rule][no-unexpected-multiline-special]).
+* Added [`flowtype/no-flow-fix-me-comments`](https://github.com/gajus/eslint-plugin-flowtype/blob/677e55c6a0f1dd355268a0f19618cd2696424c53/.README/rules/no-flow-fix-me-comments.md)
+* Added [`react/jsx-one-expression-per-line`][]
+* Added [`react/destructuring-assignment`][]
+* Added [`react/no-access-state-in-setstate`][]
+* Added [`react/button-has-type`][]
+* Added [`react/jsx-curly-brace-presence`][]
+* Added [`typescript/member-naming`](https://github.com/nzakas/eslint-plugin-typescript/tree/master/docs/rules/member-naming.md)
+* Added [`typescript/no-array-constructor`](https://github.com/nzakas/eslint-plugin-typescript/tree/master/docs/rules/no-array-constructor.md)
+* Added `yarn prettier` script (prettifies source files)
+
+[`implicit-arrow-linebreak`]: https://eslint.org/docs/rules/implicit-arrow-linebreak
+[lines-around-comment-special]: https://github.com/prettier/eslint-config-prettier/blob/5399175c37466747aae9d407021dffec2c169c8b/README.md#lines-around-comment
+[`lines-around-comment`]: https://eslint.org/docs/rules/lines-around-comment
+[no-unexpected-multiline-special]: https://github.com/prettier/eslint-config-prettier/blob/5399175c37466747aae9d407021dffec2c169c8b/README.md#no-unexpected-multiline
+[`no-unexpected-multiline`]: https://eslint.org/docs/rules/no-unexpected-multiline
+[`react/jsx-one-expression-per-line`]: https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules/jsx-one-expression-per-line.md
+[`react/destructuring-assignment`]: https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules/destructuring-assignment.md
+[`react/no-access-state-in-setstate`]: https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules/no-access-state-in-setstate.md
+[`react/button-has-type`]: https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules/button-has-type.md
+[`react/jsx-curly-brace-presence`]: https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules/jsx-curly-brace-presence.md
+
+### Changed
+* Updated dependencies to their latest versions (full details in [#63](https://github.com/Shopify/eslint-plugin-shopify/pull/63))
+* Updated prettier to 1.9.2, introducing a change in function parens style (set to `arrowParens: 'always'`):
+
+    ```js
+    // Before
+    const foo = myArray.map(foo => {});
+
+    // After
+    const foo = myArray.map((foo) => {});
+    ```
+
+    #### ⚠️ Upgrade path
+
+    Your project config files (`package.json`, `.prettierrc`, `.eslintrc`…)
+    may need to be updated like so:
+
+    ```diff
+       "singleQuote": true,
+       "bracketSpacing": false,
+       "trailingComma": "es5",
+    +  "arrowParens": "always"
+    ```
+* Prettified source files using the new config
 
 ## [18.3.1] - 2017-12-21
 

lib/config/prettier.js

@@ -11,11 +11,25 @@ module.exports = {
         trailingComma: 'all',
         bracketSpacing: false,
         jsxBracketSameLine: false,
+        arrowParens: 'always',
       },
     ],
 
     // rules to disable to prefer prettier
     'shopify/binary-assignment-parens': 'off',
     'babel/semi': 'off',
+
+    // Special rule for 'lines-around-comment'
+    // https://github.com/prettier/eslint-config-prettier/blob/984de70e8c6b57684b444283561019389ccebd11/README.md#lines-around-comment
+    'lines-around-comment': [
+      'error',
+      {
+        beforeBlockComment: true,
+      },
+    ],
+
+    // Special rule for 'no-unexpected-multiline'
+    // https://github.com/prettier/eslint-config-prettier/blob/5399175c37466747aae9d407021dffec2c169c8b/README.md#no-unexpected-multiline
+    'no-unexpected-multiline': 'error',
   },
 };

lib/config/rules/flowtype.js

@@ -11,6 +11,8 @@ module.exports = {
   'flowtype/generic-spacing': ['error', 'never'],
   // Checks for duplicate properties in Object annotations
   'flowtype/no-dupe-keys': 'error',
+  // Disallows $FlowFixMe comment suppressions
+  'flowtype/no-flow-fix-me-comments': 'off',
   // Disallows use of primitive constructors as types, such as Boolean, Number and String.
   'flowtype/no-primitive-constructor-types': 'error',
   // Disallows Flow type imports, aliases, and annotations in files missing a valid Flow file declaration (or a @noflow annotation).

lib/config/rules/import.js

@@ -28,6 +28,8 @@ module.exports = {
 
   // Report any invalid exports, i.e. re-export of the same name
   'import/export': 'error',
+  // Force exports to be declared at the bottom of the file
+  'import/exports-last': 'off',
   // Report use of exported name as identifier of default export
   'import/no-named-as-default': 'error',
   // Report use of exported name as property of default export

lib/config/rules/react.js

@@ -3,10 +3,14 @@ module.exports = {
 
   // Enforces consistent naming for boolean props
   'react/boolean-prop-naming': 'off',
+  // Prevent usage of button elements without an explicit type attribute
+  'react/button-has-type': 'error',
   // Prevent missing displayName in a React component definition
   'react/display-name': ['error', {ignoreTranspilerName: false}],
   // Prevent extraneous defaultProps on components
   'react/default-props-match-prop-types': 'error',
+  // Enforce consistent usage of destructuring assignment of props, state, and context
+  'react/destructuring-assignment': 'off',
   // Forbid certain props on Components
   'react/forbid-component-props': 'off',
   // Forbid certain elements e.g. forbid all <div /> and use <Box /> instead
@@ -15,6 +19,8 @@ module.exports = {
   'react/forbid-foreign-prop-types': 'error',
   // Forbid certain propTypes
   'react/forbid-prop-types': ['error', {forbid: ['any', 'array']}],
+  // Prevent using this.state within a this.setState
+  'react/no-access-state-in-setstate': 'error',
   // Prevent using Array index in key prop
   'react/no-array-index-key': 'error',
   // Prevent passing children as props
@@ -90,6 +96,8 @@ module.exports = {
   'react/jsx-closing-bracket-location': ['error', {location: 'tag-aligned'}],
   // Validate closing tag location in JSX
   'react/jsx-closing-tag-location': 'error',
+  // Enforce curly braces or disallow unnecessary curly braces in JSX props and/or children
+  'react/jsx-curly-brace-presence': ['error', 'never'],
   // Enforce or disallow spaces inside of curly braces in JSX attributes
   'react/jsx-curly-spacing': ['error', 'never', {allowMultiline: true}],
   // Enforce or disallow spaces around equal signs in JSX attributes
@@ -120,6 +128,8 @@ module.exports = {
   'react/jsx-no-target-blank': 'error',
   // Disallow undeclared variables in JSX
   'react/jsx-no-undef': 'error',
+  // Limits every line in JSX to one expression each
+  'react/jsx-one-expression-per-line': 'off',
   // Enforce PascalCase for user-defined JSX components
   'react/jsx-pascal-case': 'error',
   // Enforce props alphabetical sorting

lib/config/rules/stylistic-issues.js

@@ -48,6 +48,8 @@ module.exports = {
   ],
   // Require identifiers to match the provided regular expression
   'id-match': 'off',
+  // Enforce a consistent location for an arrow function containing an implicit return
+  'implicit-arrow-linebreak': 'off',
   // Disable eslint v4 stricter indent rules
   indent: 'off',
   // Use eslint v3 indent rules: This option sets a specific tab width for your code

lib/config/rules/typescript.js

@@ -10,15 +10,21 @@ module.exports = {
   // enforces interface names are prefixed. (interface-name from TSLint)
   'typescript/interface-name-prefix': 'off',
 
+  // enforces naming conventions for class members by visibility.
+  'typescript/member-naming': 'off',
+
   // enforces /// <reference /> is not used. (no-reference from TSLint)
   'typescript/no-triple-slash-reference': 'error',
 
-  // enforces the any type is not used. (no-any from TSLint)
-  'typescript/no-explicit-any': 'off',
+  // disallow generic Array constructors
+  'typescript/no-array-constructor': 'error',
 
   // enforces the use of as Type assertions instead of <Type> assertions. (no-angle-bracket-type-assertion from TSLint)
   'typescript/no-angle-bracket-type-assertion': 'error',
 
+  // enforces the any type is not used. (no-any from TSLint)
+  'typescript/no-explicit-any': 'off',
+
   // disallows the use of custom TypeScript modules and namespaces
   'typescript/no-namespace': 'off',
 

lib/rules/jquery-dollar-sign-reference.js

@@ -183,10 +183,10 @@ module.exports = {
       }
       const isjQueryRef = isjQueryReference(left);
       const valueNodeTypes = getValueNodes(right).map(isjQueryValue);
-      const hasDefinitejQueryValue = valueNodeTypes.some(nodeType => {
+      const hasDefinitejQueryValue = valueNodeTypes.some((nodeType) => {
         return nodeType.definite;
       });
-      const hasRegularValue = valueNodeTypes.some(nodeType => {
+      const hasRegularValue = valueNodeTypes.some((nodeType) => {
         return !nodeType.possible;
       });
 
@@ -231,7 +231,7 @@ module.exports = {
     }
 
     function checkObjectExpression(node) {
-      node.properties.forEach(prop => {
+      node.properties.forEach((prop) => {
         if (prop.computed && prop.key.type !== 'Literal') {
           return;
         }
@@ -241,7 +241,7 @@ module.exports = {
     }
 
     function checkClassProperty(node) {
-      const tokens = context.getFirstTokens(node, 2).filter(token => {
+      const tokens = context.getFirstTokens(node, 2).filter((token) => {
         return token.type === 'Identifier';
       });
 

lib/rules/jsx-no-hardcoded-content.js

@@ -88,16 +88,14 @@ module.exports = {
         if (check.prop === 'children') {
           context.report(
             node,
-            `Do not use hardcoded content as the children of the ${
-              elementName
-            } component.`
+            `Do not use hardcoded content as the children of the ${elementName} component.`
           );
         } else if (check.prop) {
           context.report(
             node,
-            `Do not use hardcoded content in the ${check.prop} prop of the ${
-              elementName
-            } component.`
+            `Do not use hardcoded content in the ${
+              check.prop
+            } prop of the ${elementName} component.`
           );
         }
       },
@@ -158,7 +156,7 @@ function checkContent(
   function isInvalidProp(propNode) {
     return (
       propNode.type === 'JSXAttribute' &&
-      checkProps.some(prop => prop === propNode.name.name) &&
+      checkProps.some((prop) => prop === propNode.name.name) &&
       isInvalidContent(
         propNode.value == null ? {type: 'Literal', value: true} : propNode.value
       )

lib/rules/polaris-prefer-sectioned-prop.js

@@ -34,9 +34,7 @@ module.exports = {
         if (child === `${component}.Section`) {
           context.report(
             node,
-            `Use the \`sectioned\` prop on ${
-              component
-            } instead of wrapping all its contents in a ${child}`
+            `Use the \`sectioned\` prop on ${component} instead of wrapping all its contents in a ${child}`
           );
         }
       },

lib/rules/prefer-class-properties.js

@@ -50,21 +50,21 @@ module.exports = {
 
     function getTopLevelThisAssignmentExpressions(functionNode) {
       return functionNode.body.body
-        .filter(bodyNode => {
+        .filter((bodyNode) => {
           return (
             bodyNode.type === 'ExpressionStatement' &&
             bodyNode.expression.type === 'AssignmentExpression' &&
             bodyNode.expression.left.type === 'MemberExpression' &&
             bodyNode.expression.left.object.type === 'ThisExpression'
           );
         })
-        .map(bodyNode => {
+        .map((bodyNode) => {
           return bodyNode.expression;
         });
     }
 
     function getConstructor(classNode) {
-      return classNode.body.body.find(propertyNode => {
+      return classNode.body.body.find((propertyNode) => {
         return (
           propertyNode.type === 'MethodDefinition' &&
           propertyNode.key.name === 'constructor'
@@ -73,7 +73,7 @@ module.exports = {
     }
 
     function getClassInstanceProperties(classNode) {
-      return classNode.body.body.filter(propertyNode => {
+      return classNode.body.body.filter((propertyNode) => {
         return propertyNode.type === 'ClassProperty' && !propertyNode.static;
       });
     }
@@ -89,7 +89,7 @@ module.exports = {
           checkConstructorThisAssignment
         );
       } else {
-        getClassInstanceProperties(node).forEach(propertyNode => {
+        getClassInstanceProperties(node).forEach((propertyNode) => {
           context.report({
             node: propertyNode,
             message: 'Unexpected class property.',

lib/rules/prefer-twine.js

@@ -9,7 +9,7 @@ module.exports = {
         if (node.source.value !== 'twine') {
           return;
         }
-        node.specifiers.forEach(specifier => {
+        node.specifiers.forEach((specifier) => {
           if (specifier.type !== 'ImportDefaultSpecifier') {
             return;
           }

lib/rules/react-initialize-state.js

@@ -51,7 +51,7 @@ module.exports = {
           classInfo.declaredState = true;
         }
       },
-      'ClassDeclaration:exit': node => {
+      'ClassDeclaration:exit': (node) => {
         if (classInfo && classInfo.hasStateType && !classInfo.declaredState) {
           context.report(
             node,

lib/rules/restrict-full-import.js

@@ -72,7 +72,7 @@ module.exports = {
               ? specifiers.find(isFullImportSpecifier)
               : node,
           // prettier-ignore
-          message: `Unexpected full import of restricted module '${node.source.value}'.`,
+          message: `Unexpected full import of restricted module '${node.source.value}'.`
         });
       }
     }
@@ -85,7 +85,7 @@ module.exports = {
         context.report({
           node,
           // prettier-ignore
-          message: `Unexpected full import of restricted module '${right.arguments[0].value}'.`,
+          message: `Unexpected full import of restricted module '${right.arguments[0].value}'.`
         });
       }
     }

lib/rules/webpack/no-unnamed-dynamic-imports.js

@@ -22,7 +22,7 @@ function isChunkNameComment(comment) {
 
 function hasLineChunkNameComment(comments) {
   return comments
-    .filter(comment => comment.type === 'Line')
+    .filter((comment) => comment.type === 'Line')
     .find(isChunkNameComment);
 }
 
@@ -46,7 +46,7 @@ module.exports = {
 
         const comments = source.getComments(node.arguments[0]).leading;
         const chunkNameBlockComment = comments
-          .filter(comment => comment.type === 'Block')
+          .filter((comment) => comment.type === 'Block')
           .find(isChunkNameComment);
 
         if (!chunkNameBlockComment) {