chore: add arrow-body-style rule

.eslintrc.js

@@ -26,5 +26,6 @@ module.exports = {
 
     // I'll probably add some typescript types instead
     'react/prop-types': 'off',
+    'arrow-body-style': ['error', 'always'],
   },
 };

devtools/src/content-script/contentScript.js

@@ -38,7 +38,9 @@ function init() {
 
     if (data.highlight) {
       hook.highlighter.highlight({
-        nodes: (result.elements || []).map((x) => x.target),
+        nodes: (result.elements || []).map((x) => {
+          return x.target;
+        }),
         hideAfterTimeout: data.hideAfterTimeout,
       });
     }

devtools/src/content-script/highlighter/Overlay.js

@@ -182,9 +182,9 @@ export default class Overlay {
   inspect(nodes) {
     // We can't get the size of text nodes or comment nodes. React as of v15
     // heavily uses comment nodes to delimit text.
-    const elements = nodes.filter(
-      (node) => node.nodeType === Node.ELEMENT_NODE,
-    );
+    const elements = nodes.filter((node) => {
+      return node.nodeType === Node.ELEMENT_NODE;
+    });
 
     while (this.rects.length > elements.length) {
       const rect = this.rects.pop();

devtools/src/content-script/highlighter/index.js

@@ -18,7 +18,9 @@ import { hideOverlay, showOverlay } from './Highlighter';
 let iframesListeningTo = new Set();
 
 function withMessageData(fn) {
-  return ({ data }) => fn(data);
+  return ({ data }) => {
+    return fn(data);
+  };
 }
 
 export default function setupHighlighter({
@@ -89,8 +91,12 @@ export default function setupHighlighter({
 
     if (nodes?.[0]) {
       const elems = nodes
-        .map((x) => (typeof x === 'string' ? document.querySelector(x) : x))
-        .filter((x) => x.nodeType === Node.ELEMENT_NODE);
+        .map((x) => {
+          return typeof x === 'string' ? document.querySelector(x) : x;
+        })
+        .filter((x) => {
+          return x.nodeType === Node.ELEMENT_NODE;
+        });
 
       showOverlay(elems, hideAfterTimeout);
     } else {

devtools/src/devtools/components/MenuBar.js

@@ -14,19 +14,19 @@ function MenuBar({ cssPath, suggestion }) {
       <button
         className="focus:outline-none"
         title="select element"
-        onClick={() =>
-          Bridge.sendMessage('START_INSPECTING', null, 'content-script')
-        }
+        onClick={() => {
+          return Bridge.sendMessage('START_INSPECTING', null, 'content-script');
+        }}
       >
         <SelectIcon />
       </button>
 
       <button
         className="focus:outline-none"
         title="clear highlights"
-        onClick={() =>
-          Bridge.sendMessage('CLEAR_HIGHLIGHTS', null, 'content-script')
-        }
+        onClick={() => {
+          return Bridge.sendMessage('CLEAR_HIGHLIGHTS', null, 'content-script');
+        }}
       >
         <LayersIcon />
       </button>
@@ -37,7 +37,9 @@ function MenuBar({ cssPath, suggestion }) {
         className="focus:outline-none"
         title="Inspect the matching DOM element"
         disabled={!cssPath}
-        onClick={() => inspectedWindow.inspect(cssPath.toString())}
+        onClick={() => {
+          return inspectedWindow.inspect(cssPath.toString());
+        }}
       >
         <InspectIcon />
       </button>
@@ -46,7 +48,9 @@ function MenuBar({ cssPath, suggestion }) {
         className="focus:outline-none"
         title="Log the suggested query and result to console"
         disabled={!suggestion?.expression}
-        onClick={() => inspectedWindow.logQuery(suggestion?.expression)}
+        onClick={() => {
+          return inspectedWindow.logQuery(suggestion?.expression);
+        }}
       >
         <LogIcon />
       </button>

devtools/src/devtools/main.js

@@ -7,9 +7,9 @@ const name = isChrome ? '🐸 Testing Playground' : 'Testing Playground';
 
 panels.create(name, '', '/devtools/panel.html');
 
-panels.elements.createSidebarPane(name, (sidebar) =>
-  sidebar.setPage('/devtools/pane.html'),
-);
+panels.elements.createSidebarPane(name, (sidebar) => {
+  return sidebar.setPage('/devtools/pane.html');
+});
 
 function onSelectionChanged() {
   chrome.devtools.inspectedWindow.eval(

scripts/build-client.js

@@ -6,11 +6,13 @@ const workbox = require('workbox-build');
 
 const hashRegExp = /\.[0-9a-fA-F]{8}\./;
 
-const removeRevisionManifestTransform = async (manifestEntries) => ({
-  manifest: manifestEntries.map((entry) =>
-    hashRegExp.test(entry.url) ? { ...entry, revision: null } : entry,
-  ),
-});
+const removeRevisionManifestTransform = async (manifestEntries) => {
+  return {
+    manifest: manifestEntries.map((entry) => {
+      return hashRegExp.test(entry.url) ? { ...entry, revision: null } : entry;
+    }),
+  };
+};
 
 const workboxConfig = {
   globDirectory: 'dist/client',
@@ -35,7 +37,9 @@ async function fixWebManifest({ dest }) {
 
   // fix image paths in manifest.json
   const iconSrcHashTable = (await readdir(dest))
-    .filter((file) => /\.png/.test(file))
+    .filter((file) => {
+      return /\.png/.test(file);
+    })
     .reduce((index, file) => {
       index[file.replace(hashRegExp, '.')] = file;
       return index;

scripts/build-devtools.js

@@ -25,9 +25,9 @@ async function main() {
   const manifest = require(join(dest, 'manifest.json'));
 
   await Promise.all(
-    Object.values(manifest.icons).map((icon) =>
-      copy(icon.replace(/^icons/, 'public'), join(dest, icon)),
-    ),
+    Object.values(manifest.icons).map((icon) => {
+      return copy(icon.replace(/^icons/, 'public'), join(dest, icon));
+    }),
   );
 
   if (parcel.watching) {

scripts/build.js

@@ -57,7 +57,9 @@ async function build({ entries, dest, port, serve = !isProduction }) {
     } else {
       parcel
         .run()
-        .then((build) => resolve({ build, config, watching: false }))
+        .then((build) => {
+          return resolve({ build, config, watching: false });
+        })
         .catch(reject);
     }
   });

scripts/changelog.js

@@ -59,7 +59,9 @@ async function generate({ version, from, to, showHeader } = {}) {
         lines = lines.slice(3); // strip header and 2 blank lines
       }
 
-      lines = lines.map((x) => (x.startsWith('#') ? x.substr(1) : x));
+      lines = lines.map((x) => {
+        return x.startsWith('#') ? x.substr(1) : x;
+      });
 
       content = lines.join('\n');
       return resolve(content);

src/components/DomEvents.js

@@ -38,7 +38,9 @@ function getElementData(element) {
     element.tagName === 'SELECT' && element.multiple
       ? element.selectedOptions.length > 0
         ? JSON.stringify(
-            Array.from(element.selectedOptions).map((o) => o.value),
+            Array.from(element.selectedOptions).map((o) => {
+              return o.value;
+            }),
           )
         : null
       : element.value;
@@ -127,9 +129,15 @@ function DomEvents() {
   };
 
   const flush = useCallback(
-    throttle(() => setEventCount(buffer.current.length), 16, {
-      leading: false,
-    }),
+    throttle(
+      () => {
+        return setEventCount(buffer.current.length);
+      },
+      16,
+      {
+        leading: false,
+      },
+    ),
     [setEventCount],
   );
 
@@ -143,9 +151,12 @@ function DomEvents() {
       });
       setEventListeners(eventListeners);
     } else if (previewRef.current) {
-      eventListeners.forEach((event) =>
-        previewRef.current.removeEventListener(event.name, event.listener),
-      );
+      eventListeners.forEach((event) => {
+        return previewRef.current.removeEventListener(
+          event.name,
+          event.listener,
+        );
+      });
       previewRef.current = null;
     }
   }, []);
@@ -195,20 +206,22 @@ function DomEvents() {
               </div>
             ) : (
               <AutoSizer>
-                {({ width, height }) => (
-                  <StickyList
-                    mode="bottom"
-                    ref={listRef}
-                    height={height}
-                    itemCount={eventCount}
-                    itemData={buffer.current}
-                    itemSize={32}
-                    width={width}
-                    outerElementType={VirtualScrollable}
-                  >
-                    {EventRecord}
-                  </StickyList>
-                )}
+                {({ width, height }) => {
+                  return (
+                    <StickyList
+                      mode="bottom"
+                      ref={listRef}
+                      height={height}
+                      itemCount={eventCount}
+                      itemData={buffer.current}
+                      itemSize={32}
+                      width={width}
+                      outerElementType={VirtualScrollable}
+                    >
+                      {EventRecord}
+                    </StickyList>
+                  );
+                }}
               </AutoSizer>
             )}
           </div>

src/components/Editor.js

@@ -45,7 +45,9 @@ const options = {
 
 const suggestions = {
   screen: Object.keys(queries)
-    .filter((x) => x.startsWith('getBy'))
+    .filter((x) => {
+      return x.startsWith('getBy');
+    })
     .sort(),
   container: ['querySelector', 'querySelectorAll'],
 };
@@ -83,13 +85,15 @@ function getQueryHints(cm) {
   } else if (word.includes('.')) {
     // user is already one level deeper, entered `screen.get...`
     const [obj, method] = word.split('.');
-    const values = (suggestions[obj] || []).filter((x) =>
-      x.toLowerCase().includes(method),
-    );
+    const values = (suggestions[obj] || []).filter((x) => {
+      return x.toLowerCase().includes(method);
+    });
     list.push(...values);
   } else {
     // browsing the root level, user types something like `scr` -> `screen``
-    const values = Object.keys(suggestions).filter((x) => x.startsWith(word));
+    const values = Object.keys(suggestions).filter((x) => {
+      return x.startsWith(word);
+    });
     list.push(...values);
   }
 

src/components/Embedded.js

@@ -35,8 +35,12 @@ function Embedded() {
 
   const panes = params.panes
     ? Array.from(new Set(params.panes.split(',')))
-        .map((x) => x.trim())
-        .filter((x) => SUPPORTED_PANES[x])
+        .map((x) => {
+          return x.trim();
+        })
+        .filter((x) => {
+          return SUPPORTED_PANES[x];
+        })
     : ['markup', 'preview', 'query', 'result'];
 
   // TODO: we should add tabs to handle > 2 panes
@@ -54,7 +58,9 @@ function Embedded() {
 
   useEffect(() => {
     document.body.classList.add('embedded');
-    return () => document.body.classList.remove('embedded');
+    return () => {
+      return document.body.classList.remove('embedded');
+    };
   }, []);
 
   return (

src/components/Expandable.js

@@ -49,7 +49,9 @@ function Expandable({ children, className, variant }) {
           <IconButton
             className="bg-inherit absolute bottom-0 right-0 mx-4 my-2"
             variant={variant}
-            onClick={() => setExpanded(!expanded)}
+            onClick={() => {
+              return setExpanded(!expanded);
+            }}
           >
             <ChevronDown />
           </IconButton>
@@ -65,7 +67,9 @@ function Expandable({ children, className, variant }) {
       <IconButton
         className="bg-inherit"
         variant={variant}
-        onClick={() => setExpanded(!expanded)}
+        onClick={() => {
+          return setExpanded(!expanded);
+        }}
       >
         <ChevronUp />
       </IconButton>

src/components/Header.js

@@ -36,24 +36,28 @@ function Header() {
 
           <div className="border-r border-gray-600 mx-4 h-8 hidden md:block" />
 
-          {headerLinks.map((x) => (
-            <a
-              className="hover:underline hidden md:block"
-              key={x.title}
-              href={x.url}
-            >
-              {x.title}
-            </a>
-          ))}
+          {headerLinks.map((x) => {
+            return (
+              <a
+                className="hover:underline hidden md:block"
+                key={x.title}
+                href={x.url}
+              >
+                {x.title}
+              </a>
+            );
+          })}
         </div>
       </div>
 
       <div className="flex justify-between sm:justify-end items-center bg-gray-800 px-8 h-10 md:hidden space-x-8">
-        {headerLinks.map((x) => (
-          <a className="hover:underline truncate" key={x.title} href={x.url}>
-            {x.title}
-          </a>
-        ))}
+        {headerLinks.map((x) => {
+          return (
+            <a className="hover:underline truncate" key={x.title} href={x.url}>
+              {x.title}
+            </a>
+          );
+        })}
       </div>
     </nav>
   );