format everything with prettier

public/css/react-table.css

@@ -134,7 +134,7 @@
   left: 100%;
   top: 50%;
   border: solid transparent;
-  content: " ";
+  content: ' ';
   height: 0;
   width: 0;
   position: absolute;
@@ -232,7 +232,7 @@
   margin: 0 10px;
 }
 .ReactTable .rt-expander:after {
-  content: "";
+  content: '';
   position: absolute;
   width: 0;
   height: 0;

service_worker_postfix_shim.js

@@ -1,10 +1,10 @@
-self.addEventListener("message", event => {
+self.addEventListener('message', event => {
   if (!event.data) {
     return;
   }
 
   switch (event.data) {
-    case "skipWaiting":
+    case 'skipWaiting':
       console.info("Skipping waiting at user's request");
       self.skipWaiting();
       break;

src/App.tsx

@@ -1,18 +1,14 @@
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import React, { Suspense, lazy } from "react";
-import Header from "./Header";
-import TestProcess from "./TestProcess";
-import ErrorBoundry from "./ErrorBoundry";
-import { Location } from "history";
-import {
-  ImportResolveState,
-  ProcessedImportState,
-  ImportHistory,
-} from "./types";
-import { stateFromProcessedKey, stateFromResolveKey } from "./routes";
+import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
+import React, {Suspense, lazy} from 'react';
+import Header from './Header';
+import TestProcess from './TestProcess';
+import ErrorBoundry from './ErrorBoundry';
+import {Location} from 'history';
+import {ImportResolveState, ProcessedImportState, ImportHistory} from './types';
+import {stateFromProcessedKey, stateFromResolveKey} from './routes';
 
-const Bundle = lazy(() => import("./bundle/Bundle"));
-const Home = lazy(() => import("./home/Home"));
+const Bundle = lazy(() => import('./bundle/Bundle'));
+const Home = lazy(() => import('./home/Home'));
 
 export default function App() {
   return (
@@ -24,16 +20,10 @@ export default function App() {
               <Switch>
                 <Route
                   path="/bundle"
-                  component={({
-                    location,
-                  }: {
-                    location: Location<ProcessedImportState>;
-                  }) => {
-                    const state = stateFromProcessedKey(
-                      (location.state as any).key
-                    );
+                  component={({location}: {location: Location<ProcessedImportState>}) => {
+                    const state = stateFromProcessedKey((location.state as any).key);
                     if (state == null) {
-                      throw new Error("invalid state");
+                      throw new Error('invalid state');
                     }
 
                     let params = new URLSearchParams(location.search);
@@ -44,7 +34,7 @@ export default function App() {
                           trimmedNetwork={state.trimmedNetwork}
                           rollups={state.rollups}
                           duplicateNodeModules={state.duplicateNodeModules}
-                          selected={params.get("selected")}
+                          selected={params.get('selected')}
                           hierarchy={state.hierarchy}
                         />
                       </div>
@@ -55,11 +45,7 @@ export default function App() {
                 {/* TODO remove this test route */}
                 <Route
                   path="/testProcess"
-                  component={({
-                    location,
-                  }: {
-                    location: Location<ProcessedImportState>;
-                  }) => {
+                  component={({location}: {location: Location<ProcessedImportState>}) => {
                     return <TestProcess />;
                   }}
                 />
@@ -70,9 +56,7 @@ export default function App() {
                     location: Location<ImportResolveState>;
                     history: ImportHistory;
                   }) => {
-                    const state = stateFromResolveKey(
-                      ((h.location.state as any) || { key: "" }).key
-                    );
+                    const state = stateFromResolveKey(((h.location.state as any) || {key: ''}).key);
 
                     return (
                       <Home

src/ErrorBoundry.tsx

@@ -1,24 +1,24 @@
-import React, { Component } from "react";
-import * as Sentry from "@sentry/browser";
-import { ReportErrorUri } from "./report_error";
+import React, {Component} from 'react';
+import * as Sentry from '@sentry/browser';
+import {ReportErrorUri} from './report_error';
 
-class ErrorBoundry extends Component<{}, { error: Error | null }> {
+class ErrorBoundry extends Component<{}, {error: Error | null}> {
   constructor(props: {}) {
     super(props);
-    if (process.env.NODE_ENV === "production") {
+    if (process.env.NODE_ENV === 'production') {
       Sentry.init({
-        dsn: "https://9e475abe454047779775876c0d1af187@sentry.io/1365297"
+        dsn: 'https://9e475abe454047779775876c0d1af187@sentry.io/1365297',
       });
     }
-    this.state = { error: null };
+    this.state = {error: null};
   }
 
   static getDerivedStateFromError(error: Error) {
-    return { error };
+    return {error};
   }
 
   componentDidCatch(error: Error, errorInfo: any) {
-    if (process.env.NODE_ENV === "production") {
+    if (process.env.NODE_ENV === 'production') {
       Sentry.withScope(scope => {
         Object.keys(errorInfo).forEach(key => {
           scope.setExtra(key, errorInfo[key]);
@@ -33,20 +33,16 @@ class ErrorBoundry extends Component<{}, { error: Error | null }> {
   render() {
     if (this.state.error) {
       const errorReport = new ReportErrorUri();
-      errorReport.addError("Uncaught application error", this.state.error);
+      errorReport.addError('Uncaught application error', this.state.error);
 
       return (
         <div>
           <p>
             <span role="img" aria-label="shrug emoji">
               🤷
-            </span>{" "}
+            </span>{' '}
             error encountered, please&nbsp;
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={errorReport.toUri()}
-            >
+            <a target="_blank" rel="noopener noreferrer" href={errorReport.toUri()}>
               file a bug!
             </a>
           </p>

src/Header.tsx

@@ -1,18 +1,12 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React from 'react';
+import {Link} from 'react-router-dom';
 
 // noopener noreferrer
 export default function Header() {
   return (
     <header className="App-header flex baseline padding">
       <Link className="header-link flex" to="/">
-        <img
-          className="logo"
-          src="/icon.png"
-          width="30"
-          height="30"
-          alt="Bundle Buddy logo"
-        />
+        <img className="logo" src="/icon.png" width="30" height="30" alt="Bundle Buddy logo" />
         <h1>Bundle Buddy</h1>
       </Link>
       <a
@@ -27,9 +21,9 @@ export default function Header() {
           height="50"
           viewBox="0 0 250 250"
           style={{
-            fill: "#151513",
-            color: "#fff",
-            position: "absolute",
+            fill: '#151513',
+            color: '#fff',
+            position: 'absolute',
             top: 0,
             border: 0,
             right: 0,
@@ -40,7 +34,7 @@ export default function Header() {
           <path
             d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
             fill="currentColor"
-            style={{ transformOrigin: "130px 106px" }}
+            style={{transformOrigin: '130px 106px'}}
             className="octo-arm"
           ></path>
           <path
@@ -53,11 +47,11 @@ export default function Header() {
       <div className="alpha-warning">
         <span aria-label="warning" role="img">
           ⚠
-        </span>{" "}
-        ️Project is in an experimental phase{" "}
+        </span>{' '}
+        ️Project is in an experimental phase{' '}
         <span aria-label="warning" role="img">
           ⚠
-        </span>{" "}
+        </span>{' '}
         ️
       </div>
     </header>

src/Home.test.js

@@ -1,9 +1,9 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
-it("renders without crashing", () => {
-  const div = document.createElement("div");
+it('renders without crashing', () => {
+  const div = document.createElement('div');
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });

src/TestProcess.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { transform } from "./resolve/process";
+import React from 'react';
+import {transform} from './resolve/process';
 
-import edges from "./test-process/edges.json";
-import sizes from "./test-process/sizes.json";
-import names from "./test-process/names.json";
+import edges from './test-process/edges.json';
+import sizes from './test-process/sizes.json';
+import names from './test-process/names.json';
 
 export default function TestProcess() {
   transform(edges, sizes, names);

src/bundle/Analyze.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import FileDetails from "./FileDetails";
-import RippleChart from "./RippleChart";
-import { ProcessedImportState } from "../types";
+import React from 'react';
+import FileDetails from './FileDetails';
+import RippleChart from './RippleChart';
+import {ProcessedImportState} from '../types';
 
 type Props = {
   total?: number;
   changeSelected: React.Dispatch<string | null>;
-  directoryColors: { [dir: string]: string };
-  svgDirectoryColors: { [dir: string]: string };
-  network: ProcessedImportState["trimmedNetwork"];
-  hierarchy: ProcessedImportState["hierarchy"];
+  directoryColors: {[dir: string]: string};
+  svgDirectoryColors: {[dir: string]: string};
+  network: ProcessedImportState['trimmedNetwork'];
+  hierarchy: ProcessedImportState['hierarchy'];
   selected: string | null;
   directories: string[];
 };
@@ -26,7 +26,7 @@ export default function Analyze(props: Props) {
     selected,
   } = props;
 
-  const { nodes = [], edges = [] } = network;
+  const {nodes = [], edges = []} = network;
 
   const max =
     network &&
@@ -41,15 +41,15 @@ export default function Analyze(props: Props) {
   let withNodeModules = 0;
   let withoutNodeModules = 0;
 
-  nodes.forEach((n) => {
-    if (n.id.indexOf("node_modules") !== -1) withNodeModules++;
+  nodes.forEach(n => {
+    if (n.id.indexOf('node_modules') !== -1) withNodeModules++;
     else withoutNodeModules++;
   });
 
   return (
     <div className="Analyze">
       <div className="flex header">
-        <div className="right-padding left-panel" style={{ width: "25vw" }}>
+        <div className="right-padding left-panel" style={{width: '25vw'}}>
           <h1 className="uppercase-header">Analyze</h1>
         </div>
         <div>
@@ -58,13 +58,13 @@ export default function Analyze(props: Props) {
             <b>Details</b>
           </p>
           <p>
-            This project bundled{" "}
+            This project bundled{' '}
             {withNodeModules && (
               <span>
                 <b>{withNodeModules}</b> node_modules
               </span>
-            )}{" "}
-            {withNodeModules && "with "}
+            )}{' '}
+            {withNodeModules && 'with '}
             <b>{withoutNodeModules}</b> files
           </p>
         </div>
@@ -84,8 +84,8 @@ export default function Analyze(props: Props) {
         <div className="bottom-panel paper">
           <RippleChart
             changeSelected={changeSelected}
-            nodes={nodes.map((d) => Object.assign({}, d))}
-            edges={edges.map((d) => Object.assign({}, d))}
+            nodes={nodes.map(d => Object.assign({}, d))}
+            edges={edges.map(d => Object.assign({}, d))}
             max={max}
             selected={selected}
             directoryColors={svgDirectoryColors}

src/bundle/BarChart.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { scaleLinear } from "d3-scale";
+import React from 'react';
+import {scaleLinear} from 'd3-scale';
 
 //handle pattern
 
 type Props = {
-  margin: { top?: number; bottom?: number; left?: number };
+  margin: {top?: number; bottom?: number; left?: number};
   barHeight?: number;
   rExtent?: [number, number];
   oAccessor: (d: any) => string;
@@ -22,13 +22,13 @@ export default function BarChart(props: Props) {
     data = [],
     rAccessor,
     oAccessor,
-    margin = {} as Props["margin"],
+    margin = {} as Props['margin'],
     oLabel,
     bar,
     oPadding = 3,
     barHeight = 45,
     onBarClick,
-    rExtent
+    rExtent,
   } = props;
 
   const max = data.reduce((p, c) => {
@@ -43,24 +43,22 @@ export default function BarChart(props: Props) {
 
   return (
     <div className="bar-chart relative">
-      <div style={{ paddingTop: margin.top }}>
+      <div style={{paddingTop: margin.top}}>
         {data.map(d => {
           const o = oAccessor(d);
           const r = rAccessor(d);
           return (
             <div
-              className={`flex ${(onBarClick && "pointer") || ""}`}
+              className={`flex ${(onBarClick && 'pointer') || ''}`}
               onClick={onBarClick && (() => onBarClick(d.id))}
               style={{
                 height: barHeight,
-                padding: oPadding
+                padding: oPadding,
               }}
               key={o}
             >
-              <div style={{ width: margin.left }}>
-                {oLabel && oLabel(d, o, r)}
-              </div>
-              <div style={{ flexGrow: 1, height: "100%" }}>
+              <div style={{width: margin.left}}>{oLabel && oLabel(d, o, r)}</div>
+              <div style={{flexGrow: 1, height: '100%'}}>
                 {bar && bar(d, `${Math.round(percentScale(r))}%`)}
               </div>
             </div>