🏗 Enable a lint rule to auto-sort destructure keys (ampproject#34523)

.eslintrc.js

@@ -49,6 +49,7 @@ module.exports = {
     'prettier',
     'react',
     'react-hooks',
+    'sort-destructure-keys',
     'sort-imports-es6-autofix',
     'sort-requires',
   ],
@@ -251,6 +252,7 @@ module.exports = {
         },
       },
     ],
+    'sort-destructure-keys/sort-destructure-keys': 2,
     'sort-imports-es6-autofix/sort-imports-es6': [
       2,
       {

ads/google/a4a/utils.js

@@ -301,7 +301,7 @@ export function googlePageParameters(a4a, startTime) {
   ]).then((promiseResults) => {
     const clientId = promiseResults[0];
     const referrer = promiseResults[1];
-    const {pageViewId, canonicalUrl} = Services.documentInfoForDoc(ampDoc);
+    const {canonicalUrl, pageViewId} = Services.documentInfoForDoc(ampDoc);
     // Read by GPT for GA/GPT integration.
     win.gaGlobal = win.gaGlobal || {cid: clientId, hid: pageViewId};
     const {screen} = win;

ads/google/ima/ima-video.js

@@ -291,7 +291,7 @@ function renderElements(elementOrDoc) {
 
   // Buttons toggle SVGs by including two each, one is displayed at a time.
   // See CSS selectors for buttons under .root[data-*].
-  const {'playButton': playButton, 'muteButton': muteButton} = elements;
+  const {'muteButton': muteButton, 'playButton': playButton} = elements;
 
   playButton.appendChild(icons.play(svg));
   playButton.appendChild(icons.pause(svg));
@@ -388,10 +388,10 @@ export function imaVideo(global, data) {
   imaLoadAllowed = true;
 
   const {
+    'fullscreenButton': fullscreenButton,
+    'muteButton': muteButton,
     'playButton': playButton,
     'progress': progress,
-    'muteButton': muteButton,
-    'fullscreenButton': fullscreenButton,
   } = elements;
 
   let mobileBrowser = false;
@@ -592,7 +592,7 @@ function onImaLoadFail() {
  * @visibleForTesting
  */
 export function onOverlayButtonInteract(global) {
-  const {'video': video, 'overlayButton': overlayButton} = elements;
+  const {'overlayButton': overlayButton, 'video': video} = elements;
   if (playbackStarted) {
     // Resart the video
     playVideo();
@@ -862,7 +862,7 @@ export function onContentPauseRequested(global) {
  * @visibleForTesting
  */
 export function onContentResumeRequested() {
-  const {'video': video, 'overlayButton': overlayButton} = elements;
+  const {'overlayButton': overlayButton, 'video': video} = elements;
   adsActive = false;
   addHoverEventToElement(
     /** @type {!Element} */ (video),
@@ -949,9 +949,9 @@ function playerDataTick() {
  */
 export function updateTime(currentTime, duration) {
   const {
-    'time': time,
     'progressLine': progressLine,
     'progressMarker': progressMarker,
+    'time': time,
   } = elements;
   time.textContent = formatTime(currentTime) + ' / ' + formatTime(duration);
   const progressPercent = Math.floor((currentTime / duration) * 100);
@@ -1031,7 +1031,7 @@ function onProgressClickEnd() {
  * @param {!Event} event
  */
 function onProgressMove(event) {
-  const {'video': video, 'progress': progress} = elements;
+  const {'progress': progress, 'video': video} = elements;
   const progressWrapperPosition = getPagePosition(progress);
   const progressListStart = progressWrapperPosition.x;
   const progressListWidth = progress./*OK*/ offsetWidth;

ads/inabox/frame-overlay-helper.js

@@ -50,7 +50,7 @@ const expandFrameImpl = function (win, iframe, onFinish) {
         );
       },
       mutate(state) {
-        const {width, height} = state.viewportSize;
+        const {height, width} = state.viewportSize;
         const expandedRect = layoutRectLtwh(0, 0, width, height);
 
         centerFrameUnderVsyncMutate(

ads/vendors/adform.js

@@ -33,7 +33,7 @@ const hosts = {
 export function adform(global, data) {
   validateData(data, [['src', 'bn', 'mid']]);
   global.Adform = {ampData: data};
-  const {src, bn, mid} = data;
+  const {bn, mid, src} = data;
   let url;
 
   // Custom ad url using "data-src" attribute

ads/vendors/imonomy.js

@@ -104,7 +104,7 @@ function reportStats(data, code) {
     if (typeof window.context.location.href !== 'undefined') {
       pageLocation = encodeURIComponent(window.context.location.href);
     }
-    const {subId, pid} = data,
+    const {pid, subId} = data,
       trackId = 'AMP',
       notFirst = true,
       cid = '',

ads/vendors/ketshwa.js

@@ -23,7 +23,7 @@ import {validateData, writeScript} from '../../3p/3p';
 export function ketshwa(global, data) {
   validateData(data, ['widgetid', 'externalid'], []);
 
-  const {widgetid, externalid} = data;
+  const {externalid, widgetid} = data;
   const skey = `widget_${widgetid}`;
 
   const dv = global.document.createElement('div');

ads/vendors/onnetwork.js

@@ -31,7 +31,7 @@ const hosts = {
 export function onnetwork(global, data) {
   validateData(data, [['src', 'sid', 'mid']]);
   global.onnetwork = {ampData: data};
-  const {src, sid, mid} = data;
+  const {mid, sid, src} = data;
   let url;
 
   // Custom movie url using "data-src" attribute

ads/vendors/vmfive.js

@@ -25,7 +25,7 @@ export function vmfive(global, data) {
   const mandatory_fields = ['appKey', 'placementId', 'adType'];
   const optional_fields = [];
 
-  const {appKey, placementId, adType} = data;
+  const {adType, appKey, placementId} = data;
 
   global._vmfive_amp = {appKey, placementId, adType};
 

build-system/babel-config/test-config.js

@@ -16,7 +16,7 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const {getReplacePlugin, getReplaceGlobalsPlugin} = require('./helpers');
+const {getReplaceGlobalsPlugin, getReplacePlugin} = require('./helpers');
 
 /**
  * Gets the config for babel transforms run during `amp [unit|integration|e2e]`.

build-system/babel-plugins/babel-plugin-amp-mode-transformer/index.js

@@ -19,7 +19,7 @@
  * and getMode().localDev to true.
  * @param {Object} babelTypes
  */
-const {resolve, dirname, join, relative} = require('path').posix;
+const {dirname, join, relative, resolve} = require('path').posix;
 
 let shouldResolveDevelopmentMode = true;
 
@@ -35,7 +35,7 @@ module.exports = function ({types: t}) {
     },
     visitor: {
       ImportDeclaration({node}, state) {
-        const {specifiers, source} = node;
+        const {source, specifiers} = node;
         if (!source.value.endsWith('/mode')) {
           return;
         }

build-system/babel-plugins/babel-plugin-transform-annotation-to-extern/index.js

@@ -43,7 +43,7 @@ module.exports = function (babel) {
   let shouldEmitTypedefs;
   return {
     pre() {
-      const {writeToFile = false, emitTypedefs = false} = this.opts;
+      const {emitTypedefs = false, writeToFile = false} = this.opts;
       shouldWriteToFile = writeToFile;
       shouldEmitTypedefs = emitTypedefs;
     },

build-system/babel-plugins/babel-plugin-transform-dev-methods/index.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-const {resolve, dirname, relative, join} = require('path').posix;
+const {dirname, join, relative, resolve} = require('path').posix;
 
 /**
  * Returns a new Map<string, {detected: boolean, removeable: Array<string>}
@@ -62,7 +62,7 @@ module.exports = function () {
       },
       ImportDeclaration({node}, state) {
         // Only remove the CallExpressions if this module imported the correct method ('dev') from '/log'.
-        const {specifiers, source} = node;
+        const {source, specifiers} = node;
         if (!source.value.endsWith('/log')) {
           return;
         }

build-system/babel-plugins/babel-plugin-transform-function-declarations/index.js

@@ -103,7 +103,7 @@ module.exports = function ({types: t}) {
    * @return {ReturnType<t['arrowFunctionExpression']>}
    */
   function createArrowFunctionExpression(node) {
-    const {params, body, async} = t.cloneNode(node);
+    const {async, body, params} = t.cloneNode(node);
     return t.arrowFunctionExpression(params, body.body[0].argument, async);
   }
 

build-system/babel-plugins/babel-plugin-transform-html-template/index.js

@@ -15,8 +15,8 @@
  */
 
 const {
-  staticTemplateTags,
   staticTemplateFactoryFns,
+  staticTemplateTags,
 } = require('../static-template-metadata');
 const {minify} = require('html-minifier');
 

build-system/babel-plugins/babel-plugin-transform-internal-version/index.js

@@ -44,7 +44,7 @@ module.exports = function (babel, options = {}) {
 
       TemplateElement(path) {
         const {node} = path;
-        const {raw, cooked} = node.value;
+        const {cooked, raw} = node.value;
         if (!raw.includes('$internalRuntimeVersion$')) {
           return;
         }

build-system/babel-plugins/babel-plugin-transform-json-import/index.js

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
+const {dirname, join, relative, resolve} = require('path');
 const {readFileSync} = require('fs');
-const {resolve, dirname, join, relative} = require('path');
 
 // Transforms JSON imports into a `JSON.parse` call:
 //
@@ -28,7 +28,7 @@ const {resolve, dirname, join, relative} = require('path');
 // ```
 // const key = JSON.parse('{"imported": "json"}');
 // ```
-module.exports = function ({types: t, template}, options) {
+module.exports = function ({template, types: t}, options) {
   const {freeze = true} = options;
 
   return {
@@ -38,7 +38,7 @@ module.exports = function ({types: t, template}, options) {
 
     visitor: {
       ImportDeclaration(path) {
-        const {specifiers, assertions, source} = path.node;
+        const {assertions, source, specifiers} = path.node;
         if (!assertions || assertions.length === 0) {
           return;
         }

build-system/babel-plugins/babel-plugin-transform-jss/index.js

@@ -49,7 +49,7 @@ const hash = require('./create-hash');
 const {addNamed} = require('@babel/helper-module-imports');
 const {create} = require('jss');
 const {default: preset} = require('jss-preset-default');
-const {relative, join} = require('path');
+const {join, relative} = require('path');
 const {transformCssSync} = require('../../tasks/css/jsify-css-sync');
 
 module.exports = function ({template, types: t}) {

build-system/common/ctrlcHandler.js

@@ -15,10 +15,10 @@
  */
 
 const colors = require('./colors');
-const {execScriptAsync, exec} = require('./exec');
+const {exec, execScriptAsync} = require('./exec');
 const {logLocalDev} = require('./logging');
 
-const {green, cyan} = colors;
+const {cyan, green} = colors;
 
 const killCmd = process.platform == 'win32' ? 'taskkill /f /pid' : 'kill -KILL';
 const killSuffix = process.platform == 'win32' ? '>NUL' : '';

build-system/common/git.js

@@ -20,10 +20,10 @@
  */
 
 const {
-  isCiBuild,
-  isPullRequestBuild,
   ciPullRequestBranch,
   ciPullRequestSha,
+  isCiBuild,
+  isPullRequestBuild,
 } = require('./ci');
 const {getStdout} = require('./process');
 

build-system/common/logging.js

@@ -15,7 +15,7 @@
  */
 'use strict';
 
-const {bold, yellow, gray} = require('./colors');
+const {bold, gray, yellow} = require('./colors');
 const {isCiBuild} = require('./ci');
 
 /**

build-system/common/utils.js

@@ -19,11 +19,11 @@ const experimentsConfig = require('../global-configs/experiments-config.json');
 const fs = require('fs-extra');
 const globby = require('globby');
 const {clean} = require('../tasks/clean');
+const {cyan, green, red, yellow} = require('./colors');
 const {default: ignore} = require('ignore');
 const {doBuild} = require('../tasks/build');
 const {doDist} = require('../tasks/dist');
 const {gitDiffNameOnlyMain} = require('./git');
-const {green, cyan, red, yellow} = require('./colors');
 const {log, logLocalDev} = require('./logging');
 
 /**

build-system/compile/check-for-unknown-deps.js

@@ -17,8 +17,8 @@
 
 const argv = require('minimist')(process.argv.slice(2));
 const fs = require('fs-extra');
+const {cyan, red, yellow} = require('../common/colors');
 const {log} = require('../common/logging');
-const {red, cyan, yellow} = require('../common/colors');
 
 /**
  * Searches for the identifier "module$", which Closure uses to uniquely

build-system/compile/compile.js

@@ -22,7 +22,7 @@ const path = require('path');
 const {checkForUnknownDeps} = require('./check-for-unknown-deps');
 const {CLOSURE_SRC_GLOBS} = require('./sources');
 const {cpus} = require('os');
-const {green, cyan} = require('../common/colors');
+const {cyan, green} = require('../common/colors');
 const {log, logLocalDev} = require('../common/logging');
 const {postClosureBabel} = require('./post-closure-babel');
 const {preClosureBabel} = require('./pre-closure-babel');

build-system/compile/post-closure-babel.js

@@ -20,7 +20,7 @@ const fs = require('fs-extra');
 const path = require('path');
 const Remapping = require('@ampproject/remapping');
 const terser = require('terser');
-const {debug, CompilationLifecycles} = require('./debug-compilation-lifecycle');
+const {CompilationLifecycles, debug} = require('./debug-compilation-lifecycle');
 const {jsBundles} = require('./bundles.config.js');
 
 /** @type {Remapping.default} */

build-system/compile/pre-closure-babel.js

@@ -21,9 +21,9 @@ const globby = require('globby');
 const path = require('path');
 const tempy = require('tempy');
 const {BABEL_SRC_GLOBS} = require('./sources');
-const {debug, CompilationLifecycles} = require('./debug-compilation-lifecycle');
+const {CompilationLifecycles, debug} = require('./debug-compilation-lifecycle');
+const {cyan, red} = require('../common/colors');
 const {log} = require('../common/logging');
-const {red, cyan} = require('../common/colors');
 const {TransformCache, batchedRead, md5} = require('../common/transform-cache');
 
 /**

build-system/eslint-rules/closure-type-primitives.js

@@ -92,7 +92,7 @@ function checkClosureComments(context, closureComment) {
     return;
   }
 
-  const {parsed, node} = closureComment;
+  const {node, parsed} = closureComment;
   traverse(parsed).forEach((astNode) => {
     if (!astNode) {
       return;
@@ -158,7 +158,7 @@ function checkNonNullableNodes(context, node, astNode) {
     return;
   }
 
-  const {type, name} = astNode.expression;
+  const {name, type} = astNode.expression;
   if (type === 'FunctionType') {
     reportNonNullablePrimitive(context, node, 'function');
   } else if (type === 'UndefinedLiteral') {

build-system/eslint-rules/html-template.js

@@ -17,8 +17,8 @@
 
 const {
   staticTemplateFactories,
-  staticTemplateTags,
   staticTemplateFactoryFns,
+  staticTemplateTags,
 } = require('../babel-plugins/static-template-metadata');
 
 /**
@@ -125,7 +125,7 @@ module.exports = function (context) {
       const {start} = template;
 
       for (let i = 0; i < invalids.length; i++) {
-        const {tag, offset} = invalids[i];
+        const {offset, tag} = invalids[i];
         context.report({
           node: template,
           loc: sourceCode.getLocFromIndex(start + offset),

build-system/eslint-rules/no-array-destructuring.js

@@ -49,7 +49,7 @@ module.exports = function (context) {
     }
 
     if (callee.type === 'MemberExpression') {
-      const {object, property, computed} = callee;
+      const {computed, object, property} = callee;
       if (computed) {
         return false;
       }