Make recoil-devtools use the same .prettierrc as Recoil (#875)

Summary: - delete `recoil-devtools/.prettierrc` - make it use the one from the root of the repo - reformat `recoil-devtools/*.js` now all code will be formatted with a single config shipit blew up so i'm reopening the PR Pull Request resolved: #875 Reviewed By: maxijb Differential Revision: D26282389 Pulled By: aaronabramov fbshipit-source-id: 0583e4d62c28dc12bd0a9a02acc48303322c483f
facebookexperimental · Feb 5, 2021 · e0871cb · e0871cb
1 parent 8186e9a
commit e0871cb
Show file tree

Hide file tree

Showing 52 changed files with 537 additions and 574 deletions.
diff --git a/packages/recoil-devtools/.prettierignore → .prettierignore b/packages/recoil-devtools/.prettierignore → .prettierignore
@@ -3,3 +3,5 @@ node_modules
 build
 
 yarn.lock
+
+flow-typed
diff --git a/packages/recoil-devtools/.prettierrc b/packages/recoil-devtools/.prettierrc
diff --git a/packages/recoil-devtools/src/constants/Constants.js b/packages/recoil-devtools/src/constants/Constants.js
@@ -36,7 +36,7 @@ export type MainTabsType = 'Diff' | 'State' | 'Graph';
 
 const MainTabs: MainTabsType[] = ['Diff', 'State', 'Graph'];
 
-const MainTabsTitle: { [MainTabsType]: string } = Object.freeze({
+const MainTabsTitle: {[MainTabsType]: string} = Object.freeze({
   Diff: 'Modified Values',
   State: 'Known Nodes',
   Graph: 'Registered Dependencies',

diff --git a/packages/recoil-devtools/src/pages/Background/Background.js b/packages/recoil-devtools/src/pages/Background/Background.js
@@ -14,18 +14,18 @@ import type {
   ConnectionPort,
 } from '../../types/DevtoolsTypes';
 
-const { RecoilDevToolsActions } = require('../../constants/Constants');
-const { debug, warn } = require('../../utils/Logger');
+const {RecoilDevToolsActions} = require('../../constants/Constants');
+const {debug, warn} = require('../../utils/Logger');
 const Store = require('../../utils/Store');
 
 const store = (window.store = new Store());
 
-const getConnectionId = ({ sender }: ConnectionPort): number => {
+const getConnectionId = ({sender}: ConnectionPort): number => {
   // If this is a devtool connection, there's no tab.id
   // But that ID is not required so we return 0
   return sender?.tab?.id ?? 0;
 };
-const getConnectionName = ({ name }: ConnectionPort): string => {
+const getConnectionName = ({name}: ConnectionPort): string => {
   let id = name || 'Recoil Connection';
   return id;
 };
@@ -50,7 +50,7 @@ function onConnect(port: ConnectionPort): void {
         msg.data?.initialValues,
         displayName,
         msg.data?.devMode,
-        port
+        port,
       );
       debug('CONNECT', connectionId);
       // This is only needed if we want to display a popup banner
@@ -92,4 +92,4 @@ function onConnect(port: ConnectionPort): void {
 // $FlowFixMe: add chrome types
 chrome.runtime.onConnect.addListener(onConnect);
 
-module.exports = { onConnect };
+module.exports = {onConnect};
diff --git a/packages/recoil-devtools/src/pages/Background/__tests__/Background.test.js b/packages/recoil-devtools/src/pages/Background/__tests__/Background.test.js
@@ -7,8 +7,8 @@ global.chrome = {
 };
 global.__DEV__ = true;
 
-const { onConnect } = require('../Background');
-const { RecoilDevToolsActions } = require('../../../constants/Constants');
+const {onConnect} = require('../Background');
+const {RecoilDevToolsActions} = require('../../../constants/Constants');
 
 describe('Background Proccess', () => {
   it('onConnect listern added', () => {
@@ -23,7 +23,7 @@ describe('Background Proccess', () => {
   let evtHandler = null;
   const port = {
     onMessage: {
-      addListener: jest.fn((fn) => (evtHandler = fn)),
+      addListener: jest.fn(fn => (evtHandler = fn)),
     },
     onDisconnect: {
       addListener: jest.fn(),
@@ -40,7 +40,7 @@ describe('Background Proccess', () => {
       action: RecoilDevToolsActions.INIT,
       data: {
         initialValues: {
-          a: { t: '0', v: 2 },
+          a: {t: '0', v: 2},
         },
       },
     });
@@ -53,14 +53,14 @@ describe('Background Proccess', () => {
       action: RecoilDevToolsActions.UPDATE,
       message: {
         modifiedValues: {
-          b: { t: '0', v: 2 },
+          b: {t: '0', v: 2},
         },
       },
     });
     expect(store.connections.get(0).transactions.getSize()).toBe(2);
     expect(
-      store.connections.get(0).transactions.get(1).modifiedValues
-    ).toEqual([{ isSubscriber: false, name: 'b' }]);
+      store.connections.get(0).transactions.get(1).modifiedValues,
+    ).toEqual([{isSubscriber: false, name: 'b'}]);
   });
 
   it('transaction in chunks is stored', () => {
@@ -87,8 +87,8 @@ describe('Background Proccess', () => {
 
     expect(store.connections.get(0).transactions.getSize()).toBe(3);
     expect(
-      store.connections.get(0).transactions.get(2).modifiedValues
-    ).toEqual([{ isSubscriber: false, name: 'c' }]);
+      store.connections.get(0).transactions.get(2).modifiedValues,
+    ).toEqual([{isSubscriber: false, name: 'c'}]);
   });
 
   it('mixed chunks are dealt with properly', () => {
@@ -138,10 +138,10 @@ describe('Background Proccess', () => {
 
     expect(store.connections.get(0).transactions.getSize()).toBe(5);
     expect(
-      store.connections.get(0).transactions.get(3).modifiedValues
-    ).toEqual([{ isSubscriber: false, name: 'd' }]);
+      store.connections.get(0).transactions.get(3).modifiedValues,
+    ).toEqual([{isSubscriber: false, name: 'd'}]);
     expect(
-      store.connections.get(0).transactions.get(4).modifiedValues
-    ).toEqual([{ isSubscriber: false, name: 'e' }]);
+      store.connections.get(0).transactions.get(4).modifiedValues,
+    ).toEqual([{isSubscriber: false, name: 'e'}]);
   });
 });
diff --git a/packages/recoil-devtools/src/pages/Content/ContentScript.js b/packages/recoil-devtools/src/pages/Content/ContentScript.js
@@ -10,18 +10,15 @@
 'use strict';
 
 /* global chrome */
-import type {
-  DevToolsOptions,
-  PostMessageData,
-} from '../../types/DevtoolsTypes';
+import type {DevToolsOptions, PostMessageData} from '../../types/DevtoolsTypes';
 
 const {
   ExtensionSource,
   ExtensionSourceContentScript,
   RecoilDevToolsActions,
   MessageChunkSize,
 } = require('../../constants/Constants');
-const { debug, warn } = require('../../utils/Logger');
+const {debug, warn} = require('../../utils/Logger');
 const nullthrows = require('nullthrows');
 
 // Init message listeners
@@ -51,14 +48,14 @@ function initContentScriptListeners() {
       name: props?.name ?? '',
     });
 
-    send({ action: RecoilDevToolsActions.INIT, data: { ...props } });
+    send({action: RecoilDevToolsActions.INIT, data: {...props}});
 
     bg.onDisconnect.addListener(() => {
       connected = false;
       bg = null;
     });
 
-    bg.onMessage.addListener((msg) => {
+    bg.onMessage.addListener(msg => {
       window.postMessage({
         source: ExtensionSourceContentScript,
         ...msg,
@@ -120,4 +117,4 @@ function initPageScript() {
 initContentScriptListeners();
 initPageScript();
 
-module.exports = { initContentScriptListeners };
+module.exports = {initContentScriptListeners};
diff --git a/packages/recoil-devtools/src/pages/Content/__tests__/ContentScript.test.js b/packages/recoil-devtools/src/pages/Content/__tests__/ContentScript.test.js
@@ -7,7 +7,7 @@ const bg = {
   onMessage: {
     addListener: jest.fn(),
   },
-  postMessage: jest.fn((msg) => {
+  postMessage: jest.fn(msg => {
     if (msg.message?.mustThrow) {
       throw new Error('Message length exceeded maximum allowed length.');
     }
@@ -49,7 +49,7 @@ jest.mock('../../../constants/Constants', () => ({
   MessageChunkSize: 50,
 }));
 
-const { initContentScriptListeners } = require('../ContentScript');
+const {initContentScriptListeners} = require('../ContentScript');
 
 describe('initializing Content Script listeners', () => {
   it('sets events handler', () => {
@@ -95,15 +95,15 @@ describe('initializing Content Script listeners', () => {
       data: {
         action: RecoilDevToolsActions.UPDATE,
         source: ExtensionSource,
-        message: { modifiedValues: { a: { t: '0', v: 2 } } },
+        message: {modifiedValues: {a: {t: '0', v: 2}}},
       },
     });
     expect(bg.postMessage).toHaveBeenLastCalledWith({
       action: RecoilDevToolsActions.UPDATE,
       source: ExtensionSource,
       message: {
         modifiedValues: {
-          a: { t: '0', v: 2 },
+          a: {t: '0', v: 2},
         },
       },
     });
@@ -116,7 +116,7 @@ describe('initializing Content Script listeners', () => {
       data: {
         action: RecoilDevToolsActions.UPDATE,
         source: ExtensionSource,
-        message: { mustThrow: true, modifiedValues: { a: { t: '0', v: 2 } } },
+        message: {mustThrow: true, modifiedValues: {a: {t: '0', v: 2}}},
       },
     });
     expect(bg.postMessage).toHaveBeenCalledTimes(4);

diff --git a/packages/recoil-devtools/src/pages/Devtools/DevtoolsScript.js b/packages/recoil-devtools/src/pages/Devtools/DevtoolsScript.js
@@ -15,5 +15,5 @@ chrome.devtools.panels.create(
   __DEV__ ? 'Recoil (DEV)' : 'Recoil',
   '',
   'devpanel.html',
-  () => {}
+  () => {},
 );
diff --git a/packages/recoil-devtools/src/pages/Devtools/index.html b/packages/recoil-devtools/src/pages/Devtools/index.html
@@ -1,14 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title></title>
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="app-container"></div>
-
-</body>
-
+  </body>
 </html>
diff --git a/packages/recoil-devtools/src/pages/Page/PageScript.js b/packages/recoil-devtools/src/pages/Page/PageScript.js
@@ -22,29 +22,29 @@ const {
   RecoilDevToolsActions,
 } = require('../../constants/Constants');
 const EvictableList = require('../../utils/EvictableList');
-const { serialize } = require('../../utils/Serialization');
-const { debug } = require('../../utils/Logger');
+const {serialize} = require('../../utils/Serialization');
+const {debug} = require('../../utils/Logger');
 
 const DefaultCustomSerialize = (item: mixed, _: string): mixed => item;
 
 async function normalizeSnapshot(
   snapshot: ?RecoilSnapshot,
   onlyDirty: boolean,
-  props: DevToolsConnnectProps
-): Promise<{ modifiedValues: { [string]: mixed } }> {
+  props: DevToolsConnnectProps,
+): Promise<{modifiedValues: {[string]: mixed}}> {
   if (snapshot == null) {
     return {};
   }
 
-  const dirtyNodes = snapshot.getNodes_UNSTABLE({ isModified: onlyDirty });
+  const dirtyNodes = snapshot.getNodes_UNSTABLE({isModified: onlyDirty});
   const customSerialize = props.serializeFn ?? DefaultCustomSerialize;
   const modifiedValues = {};
   const subscribers = new Set();
 
   // We wrap this loop into a promise to defer the execution
   // of the second (subscribers) loop, so selector
   // can settle before we check their values
-  await new Promise((resolve) => {
+  await new Promise(resolve => {
     for (const node of dirtyNodes) {
       const info = snapshot.getInfo_UNSTABLE(node);
       // We only accumulate subscribers if we are looking at only dirty nodes
@@ -55,10 +55,10 @@ async function normalizeSnapshot(
         content: serialize(
           customSerialize(info.loadable?.contents, node.key),
           props.maxDepth,
-          props.maxItems
+          props.maxItems,
         ),
         nodeType: info.type,
-        deps: Array.from(info.deps).map((n) => n.key),
+        deps: Array.from(info.deps).map(n => n.key),
       };
     }
     resolve();
@@ -71,11 +71,11 @@ async function normalizeSnapshot(
         content: serialize(
           customSerialize(info.loadable?.contents, node.key),
           props.maxDepth,
-          props.maxItems
+          props.maxItems,
         ),
         nodeType: info.type,
         isSubscriber: true,
-        deps: Array.from(info.deps).map((n) => n.key),
+        deps: Array.from(info.deps).map(n => n.key),
       };
     }
   }
@@ -97,9 +97,9 @@ const __RECOIL_DEVTOOLS_EXTENSION__ = {
   connect: (props: DevToolsConnnectProps) => {
     debug('CONNECT_PAGE', props);
     initConnection(props);
-    const { devMode, goToSnapshot, initialSnapshot } = props;
+    const {devMode, goToSnapshot, initialSnapshot} = props;
     const previousSnapshots = new EvictableList<RecoilSnapshot>(
-      props.persistenceLimit
+      props.persistenceLimit,
     );
     if (devMode && initialSnapshot != null) {
       previousSnapshots.add(initialSnapshot);
@@ -126,7 +126,7 @@ const __RECOIL_DEVTOOLS_EXTENSION__ = {
       async track(
         txID: number,
         snapshot: RecoilSnapshot,
-        _previousSnapshot: RecoilSnapshot
+        _previousSnapshot: RecoilSnapshot,
       ) {
         // if we just went to a snapshot, we don't need to record a new transaction
         if (
@@ -150,7 +150,7 @@ const __RECOIL_DEVTOOLS_EXTENSION__ = {
             txID,
             message: await normalizeSnapshot(snapshot, true, props),
           },
-          '*'
+          '*',
         );
       },
     };
@@ -161,7 +161,7 @@ async function initConnection(props: DevToolsConnnectProps) {
   const initialValues = await normalizeSnapshot(
     props.initialSnapshot,
     false,
-    props
+    props,
   );
   window.postMessage(
     {
@@ -174,7 +174,7 @@ async function initConnection(props: DevToolsConnnectProps) {
         initialValues: initialValues.modifiedValues,
       },
     },
-    '*'
+    '*',
   );
 }
 

diff --git a/packages/recoil-devtools/src/pages/Popup/Devpanel.html b/packages/recoil-devtools/src/pages/Popup/Devpanel.html
@@ -1,23 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      body {
+        width: 100% !important;
+        height: 100% !important;
+        margin: 0;
+        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
+          Courier, monospace;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+    </style>
+    <title></title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <style>
-    body {
-      width: 100% !important;
-      height: 100% !important;
-      margin: 0;
-      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-  </style>
-  <title></title>
-</head>
-
-<body>
-  <div id="app-container"></div>
-</body>
-
+  <body>
+    <div id="app-container"></div>
+  </body>
 </html>