Upgrade prettier, update prettier & react-hooks eslint plugins (#456)

Re-ran prettier with latest version

package.json

@@ -39,15 +39,15 @@
     "acorn": "7.2.0",
     "aphrodite": "2.1.0",
     "eslint": "8.0.0",
-    "eslint-plugin-prettier": "2.6.0",
-    "eslint-plugin-react-hooks": "4.0.2",
+    "eslint-plugin-prettier": "5.1.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "jest": "24.3.0",
     "jsverify": "0.8.3",
     "jszip": "3.1.5",
     "pako": "1.0.6",
     "parcel-bundler": "1.12.4",
     "preact": "10.4.1",
-    "prettier": "2.0.4",
+    "prettier": "3.1.1",
     "protobufjs": "6.8.8",
     "source-map": "0.6.1",
     "ts-jest": "24.3.0",

src/gl/flamechart-color-pass-renderer.ts

@@ -102,7 +102,10 @@ export class FlamechartColorPassRenderer {
   private material: Graphics.Material
   private buffer: Graphics.VertexBuffer
 
-  constructor(private gl: Graphics.Context, theme: Theme) {
+  constructor(
+    private gl: Graphics.Context,
+    theme: Theme,
+  ) {
     const vertices = [
       {pos: [-1, 1], uv: [0, 1]},
       {pos: [1, 1], uv: [1, 1]},

src/gl/overlay-rectangle-renderer.ts

@@ -70,7 +70,10 @@ export class ViewportRectangleRenderer {
   private material: Graphics.Material
   private buffer: Graphics.VertexBuffer
 
-  constructor(private gl: Graphics.Context, theme: Theme) {
+  constructor(
+    private gl: Graphics.Context,
+    theme: Theme,
+  ) {
     const vertices = [
       [-1, 1],
       [1, 1],

src/import/callgrind.ts

@@ -95,7 +95,10 @@ class CallGraph {
   private totalWeights = new Map<Frame, number>()
   private childrenTotalWeights = new Map<Frame, Map<Frame, number>>()
 
-  constructor(private fileName: string, private fieldName: string) {}
+  constructor(
+    private fileName: string,
+    private fieldName: string,
+  ) {}
 
   private getOrInsertFrame(info: FrameInfo): Frame {
     return Frame.getOrInsert(this.frameSet, info)
@@ -345,7 +348,10 @@ class CallgrindParser {
   private savedFileNames: {[id: string]: string} = {}
   private savedFunctionNames: {[id: string]: string} = {}
 
-  constructor(contents: TextFileContent, private importedFileName: string) {
+  constructor(
+    contents: TextFileContent,
+    private importedFileName: string,
+  ) {
     this.lines = [...contents.splitLines()]
     this.lineNum = 0
   }

src/import/instruments.test.ts

@@ -35,7 +35,10 @@ class ZipBackedFileSystemEntry implements Omit<FileSystemEntry, 'filesystem' | '
   private zipDir: any | null
   private zipFile: JSZip.JSZipObject | null
 
-  constructor(private zip: JSZip, fullPath: string) {
+  constructor(
+    private zip: JSZip,
+    fullPath: string,
+  ) {
     this.fullPath = fullPath
 
     this.zipFile = zip.file(fullPath)
@@ -75,7 +78,7 @@ class ZipBackedFileSystemEntry implements Omit<FileSystemEntry, 'filesystem' | '
         const ret: FileSystemEntry[] = []
         this.zipDir.forEach((relativePath: string, file: {name: string}) => {
           if (relativePath.split('/').length === (relativePath.endsWith('/') ? 2 : 1)) {
-            ret.push((new ZipBackedFileSystemEntry(this.zip, file.name) as any) as FileSystemEntry)
+            ret.push(new ZipBackedFileSystemEntry(this.zip, file.name) as any as FileSystemEntry)
           }
         })
         cb(ret)

src/import/utils.ts

@@ -204,7 +204,10 @@ export class StringBackedTextFileContent implements TextFileContent {
 }
 
 export class TextProfileDataSource implements ProfileDataSource {
-  constructor(private fileName: string, private contents: string) {}
+  constructor(
+    private fileName: string,
+    private contents: string,
+  ) {}
   async name() {
     return this.fileName
   }

src/import/v8proflog.ts

@@ -87,8 +87,8 @@ function codeToFrameInfo(code: Code, v8log: V8LogProfile): FrameInfo {
           matches[1].length > 0
             ? matches[1]
             : file
-            ? `(anonymous ${file.split('/').pop()}:${line})`
-            : '(anonymous)'
+              ? `(anonymous ${file.split('/').pop()}:${line})`
+              : '(anonymous)'
         return {
           key: name,
           name: functionName,

src/lib/atom.ts

@@ -82,7 +82,10 @@ if (process.env.NODE_ENV === 'development') {
 
 export class Atom<T> {
   private observers: AtomListener[] = []
-  constructor(protected state: T, debugKey: string) {
+  constructor(
+    protected state: T,
+    debugKey: string,
+  ) {
     if (process.env.NODE_ENV === 'development') {
       if (hotReloadStash?.has(debugKey)) {
         // If we have a stored value from a previous hot reload, use that

src/lib/color.ts

@@ -20,14 +20,14 @@ export class Color {
       hPrime < 1
         ? [C, X, 0]
         : hPrime < 2
-        ? [X, C, 0]
-        : hPrime < 3
-        ? [0, C, X]
-        : hPrime < 4
-        ? [0, X, C]
-        : hPrime < 5
-        ? [X, 0, C]
-        : [C, 0, X]
+          ? [X, C, 0]
+          : hPrime < 3
+            ? [0, C, X]
+            : hPrime < 4
+              ? [0, X, C]
+              : hPrime < 5
+                ? [X, 0, C]
+                : [C, 0, X]
 
     const m = L - (0.3 * R1 + 0.59 * G1 + 0.11 * B1)
 

src/lib/math.ts

@@ -5,7 +5,10 @@ export function clamp(x: number, minVal: number, maxVal: number) {
 }
 
 export class Vec2 {
-  constructor(readonly x: number, readonly y: number) {}
+  constructor(
+    readonly x: number,
+    readonly y: number,
+  ) {}
   withX(x: number) {
     return new Vec2(x, this.y)
   }
@@ -251,7 +254,10 @@ export class AffineTransform {
 }
 
 export class Rect {
-  constructor(readonly origin: Vec2, readonly size: Vec2) {}
+  constructor(
+    readonly origin: Vec2,
+    readonly size: Vec2,
+  ) {}
 
   isEmpty() {
     return this.width() == 0 || this.height() == 0

src/lib/profile-search.ts

@@ -39,7 +39,10 @@ export function exactMatchStrings(text: string, pattern: string): [number, numbe
 // A utility class for storing cached search results to avoid recomputation when
 // the search results & profile did not change.
 export class ProfileSearchResults {
-  constructor(readonly profile: Profile, readonly searchQuery: string) {}
+  constructor(
+    readonly profile: Profile,
+    readonly searchQuery: string,
+  ) {}
 
   private matches: Map<Frame, [number, number][] | null> | null = null
   getMatchForFrame(frame: Frame): [number, number][] | null {
@@ -65,7 +68,10 @@ interface CachedFlamechartResult {
 }
 
 export class FlamechartSearchResults {
-  constructor(readonly flamechart: Flamechart, readonly profileResults: ProfileSearchResults) {}
+  constructor(
+    readonly flamechart: Flamechart,
+    readonly profileResults: ProfileSearchResults,
+  ) {}
 
   private matches: CachedFlamechartResult | null = null
   private getResults(): CachedFlamechartResult {

src/lib/profile.ts

@@ -99,7 +99,10 @@ export class CallTreeNode extends HasWeights {
     this.frozen = true
   }
 
-  constructor(readonly frame: Frame, readonly parent: CallTreeNode | null) {
+  constructor(
+    readonly frame: Frame,
+    readonly parent: CallTreeNode | null,
+  ) {
     super()
   }
 }

src/lib/stats.ts

@@ -76,7 +76,11 @@ class Panel {
   private GRAPH_WIDTH = 74 * PR
   private GRAPH_HEIGHT = 30 * PR
 
-  constructor(private name: string, private fg: string, private bg: string) {
+  constructor(
+    private name: string,
+    private fg: string,
+    private bg: string,
+  ) {
     this.canvas.width = this.WIDTH
     this.canvas.height = this.HEIGHT
     this.canvas.style.cssText = 'width:80px;height:48px'

src/lib/utils.test.ts

@@ -42,7 +42,10 @@ test('getOrInsert', () => {
 })
 
 class ValueType {
-  private constructor(readonly a: string, readonly num: number) {}
+  private constructor(
+    readonly a: string,
+    readonly num: number,
+  ) {}
   get key() {
     return `${this.a}_${this.num}`
   }

src/lib/utils.ts

@@ -213,17 +213,15 @@ export function lazyStatic<T>(cb: () => T): () => T {
   }
 }
 
-const base64lookupTable = lazyStatic(
-  (): Map<string, number> => {
-    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
-    const ret = new Map<string, number>()
-    for (let i = 0; i < alphabet.length; i++) {
-      ret.set(alphabet.charAt(i), i)
-    }
-    ret.set('=', -1)
-    return ret
-  },
-)
+const base64lookupTable = lazyStatic((): Map<string, number> => {
+  const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+  const ret = new Map<string, number>()
+  for (let i = 0; i < alphabet.length; i++) {
+    ret.set(alphabet.charAt(i), i)
+  }
+  ret.set('=', -1)
+  return ret
+})
 
 // NOTE: There are probably simpler solutions to this problem, but I have this written already, so
 // until we run into problems with this, let's just use this.

src/views/application-container.tsx

@@ -20,10 +20,10 @@ import {Application} from './application'
 export const ApplicationContainer = memo(() => {
   const canvas = useAtom(glCanvasAtom)
   const theme = useTheme()
-  const canvasContext = useMemo(() => (canvas ? getCanvasContext({theme, canvas}) : null), [
-    theme,
-    canvas,
-  ])
+  const canvasContext = useMemo(
+    () => (canvas ? getCanvasContext({theme, canvas}) : null),
+    [theme, canvas],
+  )
 
   return (
     <ProfileSearchContextProvider>

src/views/flamechart-minimap-view.tsx

@@ -308,9 +308,8 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
     const logicalSpaceMouse = this.windowToLogicalViewSpace().transformPosition(
       new Vec2(ev.clientX, ev.clientY),
     )
-    const physicalSpaceMouse = this.logicalToPhysicalViewSpace().transformPosition(
-      logicalSpaceMouse,
-    )
+    const physicalSpaceMouse =
+      this.logicalToPhysicalViewSpace().transformPosition(logicalSpaceMouse)
     return this.configSpaceToPhysicalViewSpace().inverseTransformPosition(physicalSpaceMouse)
   }
 

src/views/flamechart-pan-zoom-view.tsx

@@ -543,12 +543,10 @@ export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps,
   private zoom(logicalViewSpaceCenter: Vec2, multiplier: number) {
     this.interactionLock = 'zoom'
 
-    const physicalCenter = this.logicalToPhysicalViewSpace().transformPosition(
-      logicalViewSpaceCenter,
-    )
-    const configSpaceCenter = this.configSpaceToPhysicalViewSpace().inverseTransformPosition(
-      physicalCenter,
-    )
+    const physicalCenter =
+      this.logicalToPhysicalViewSpace().transformPosition(logicalViewSpaceCenter)
+    const configSpaceCenter =
+      this.configSpaceToPhysicalViewSpace().inverseTransformPosition(physicalCenter)
     if (!configSpaceCenter) return
 
     const zoomTransform = AffineTransform.withTranslation(configSpaceCenter.times(-1))
@@ -633,12 +631,10 @@ export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps,
     }
 
     const logicalViewSpaceMouse = new Vec2(ev.offsetX, ev.offsetY)
-    const physicalViewSpaceMouse = this.logicalToPhysicalViewSpace().transformPosition(
-      logicalViewSpaceMouse,
-    )
-    const configSpaceMouse = this.configSpaceToPhysicalViewSpace().inverseTransformPosition(
-      physicalViewSpaceMouse,
-    )
+    const physicalViewSpaceMouse =
+      this.logicalToPhysicalViewSpace().transformPosition(logicalViewSpaceMouse)
+    const configSpaceMouse =
+      this.configSpaceToPhysicalViewSpace().inverseTransformPosition(physicalViewSpaceMouse)
 
     if (!configSpaceMouse) return
 

src/views/profile-table-view.tsx

@@ -268,12 +268,14 @@ export const ProfileTableView = memo(
       [sandwichContext],
     )
 
-    const onTotalClick = useCallback((ev: MouseEvent) => onSortClick(SortField.TOTAL, ev), [
-      onSortClick,
-    ])
-    const onSelfClick = useCallback((ev: MouseEvent) => onSortClick(SortField.SELF, ev), [
-      onSortClick,
-    ])
+    const onTotalClick = useCallback(
+      (ev: MouseEvent) => onSortClick(SortField.TOTAL, ev),
+      [onSortClick],
+    )
+    const onSelfClick = useCallback(
+      (ev: MouseEvent) => onSortClick(SortField.SELF, ev),
+      [onSortClick],
+    )
     const onSymbolNameClick = useCallback(
       (ev: MouseEvent) => onSortClick(SortField.SYMBOL_NAME, ev),
       [onSortClick],