From 74cd7584ac3ae5bcc5abeb887ecf74629b91e722 Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Wed, 28 Jul 2021 18:21:55 +0200 Subject: [PATCH] chore: enable linting with ESLint for TSX files (#7885) --- package.json | 2 +- src/web/components/source.tsx | 24 ++++++------- src/web/components/splitView.tsx | 4 +-- src/web/recorder/callLog.tsx | 4 +-- src/web/recorder/recorder.tsx | 8 ++--- src/web/traceViewer/index.tsx | 2 +- src/web/traceViewer/ui/actionList.tsx | 3 +- src/web/traceViewer/ui/callTab.tsx | 50 +++++++++++++------------- src/web/traceViewer/ui/snapshotTab.tsx | 12 ++++--- src/web/traceViewer/ui/tabbedPane.tsx | 7 ++-- src/web/traceViewer/ui/timeline.tsx | 2 -- src/web/traceViewer/ui/workbench.tsx | 2 +- 12 files changed, 59 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index 6bef719bfb..65fdd60254 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "etest": "npm run basetest -- --config=tests/config/electron.config.ts", "ttest": "npm run basetest -- --config=tests/playwright-test/playwright-test.config.ts", "test": "npm run basetest -- --config=tests/config/default.config.ts", - "eslint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe --ext ts . || eslint --ext ts .", + "eslint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe --ext ts,tsx . || eslint --ext ts,tsx .", "tsc": "tsc -p .", "build-installer": "babel -s --extensions \".ts\" --out-dir lib/utils/ src/utils", "doc": "node utils/doclint/cli.js", diff --git a/src/web/components/source.tsx b/src/web/components/source.tsx index 1e805cdfcf..7d3dee3a5a 100644 --- a/src/web/components/source.tsx +++ b/src/web/components/source.tsx @@ -47,23 +47,23 @@ export const Source: React.FC = ({ result.push(highlighted.value); } return result; - }, [text]); + }, [text, language]); const revealedLineRef = React.createRef(); React.useLayoutEffect(() => { if (typeof revealLine === 'number' && revealedLineRef.current) revealedLineRef.current.scrollIntoView({ block: 'center', inline: 'nearest' }); - }, [revealedLineRef]); + }, [revealedLineRef, revealLine]); return
{ - lines.map((markup, index) => { - const lineNumber = index + 1; - const lineHighlight = highlight.find(h => h.line === lineNumber); - const lineClass = lineHighlight ? `source-line source-line-${lineHighlight.type}` : 'source-line'; - return
-
{lineNumber}
-
-
; - }) - }
+ lines.map((markup, index) => { + const lineNumber = index + 1; + const lineHighlight = highlight.find(h => h.line === lineNumber); + const lineClass = lineHighlight ? `source-line source-line-${lineHighlight.type}` : 'source-line'; + return
+
{lineNumber}
+
+
; + }) + }; }; diff --git a/src/web/components/splitView.tsx b/src/web/components/splitView.tsx index 7103b2fdc8..a610f9bae2 100644 --- a/src/web/components/splitView.tsx +++ b/src/web/components/splitView.tsx @@ -33,7 +33,7 @@ export const SplitView: React.FC = ({ orientation = 'vertical', children }) => { - let [size, setSize] = React.useState(Math.max(kMinSidebarSize, sidebarSize)); + const [size, setSize] = React.useState(Math.max(kMinSidebarSize, sidebarSize)); const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null); const childrenArray = React.Children.toArray(children); @@ -44,7 +44,7 @@ export const SplitView: React.FC = ({ resizerStyle = { top: resizing ? 0 : size - 4, bottom: resizing ? 0 : undefined, height: resizing ? 'initial' : 8 }; else resizerStyle = { bottom: resizing ? 0 : size - 4, top: resizing ? 0 : undefined, height: resizing ? 'initial' : 8 }; -} else { + } else { if (sidebarIsFirst) resizerStyle = { left: resizing ? 0 : size - 4, right: resizing ? 0 : undefined, width: resizing ? 'initial' : 8 }; else diff --git a/src/web/recorder/callLog.tsx b/src/web/recorder/callLog.tsx index 228a3edc0d..defd914210 100644 --- a/src/web/recorder/callLog.tsx +++ b/src/web/recorder/callLog.tsx @@ -31,7 +31,7 @@ export const CallLogView: React.FC = ({ React.useLayoutEffect(() => { if (log.find(callLog => callLog.reveal)) messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' }); - }, [messagesEndRef]); + }, [messagesEndRef, log]); return
{log.map(callLog => { const expandOverride = expandOverrides.get(callLog.id); @@ -55,7 +55,7 @@ export const CallLogView: React.FC = ({
; })} { !!callLog.error && } - + ; })}
; diff --git a/src/web/recorder/recorder.tsx b/src/web/recorder/recorder.tsx index c2e4973603..dd404f5b07 100644 --- a/src/web/recorder/recorder.tsx +++ b/src/web/recorder/recorder.tsx @@ -80,7 +80,7 @@ export const Recorder: React.FC = ({ return
- { + { window.dispatch({ event: 'setMode', params: { mode: mode === 'recording' ? 'none' : 'recording' }}); }}>Record { @@ -98,8 +98,8 @@ export const Recorder: React.FC = ({
Target:
{ diff --git a/src/web/traceViewer/index.tsx b/src/web/traceViewer/index.tsx index 45ab724a91..8921e30a3e 100644 --- a/src/web/traceViewer/index.tsx +++ b/src/web/traceViewer/index.tsx @@ -1,4 +1,4 @@ -1;/** +/** * Copyright (c) Microsoft Corporation. * * Licensed under the Apache License, Version 2.0 (the "License"); diff --git a/src/web/traceViewer/ui/actionList.tsx b/src/web/traceViewer/ui/actionList.tsx index 2d8ae255c2..d4cd0e87e8 100644 --- a/src/web/traceViewer/ui/actionList.tsx +++ b/src/web/traceViewer/ui/actionList.tsx @@ -41,7 +41,7 @@ export const ActionList: React.FC = ({ React.useEffect(() => { actionListRef.current?.focus(); - }, [selectedAction]); + }, [selectedAction, actionListRef]); return
@@ -75,7 +75,6 @@ export const ActionList: React.FC = ({ const { metadata } = action; const selectedSuffix = action === selectedAction ? ' selected' : ''; const highlightedSuffix = action === highlightedAction ? ' highlighted' : ''; - const page = modelUtil.page(action); const { errors, warnings } = modelUtil.stats(action); return
- ; + ; }; function renderLine(metadata: CallMetadata, name: string, value: any) { @@ -63,7 +63,7 @@ function renderLine(metadata: CallMetadata, name: string, value: any) { let text = trimRight(title.replace(/\n/g, '↵'), 80); if (type === 'string') text = `"${text}"`; - return
{name}: {text}
+ return
{name}: {text}
; } function toString(metadata: CallMetadata, name: string, value: any): { title: string, type: string } { diff --git a/src/web/traceViewer/ui/snapshotTab.tsx b/src/web/traceViewer/ui/snapshotTab.tsx index b435a8b78e..41943ed3f0 100644 --- a/src/web/traceViewer/ui/snapshotTab.tsx +++ b/src/web/traceViewer/ui/snapshotTab.tsx @@ -27,7 +27,7 @@ export const SnapshotTab: React.FunctionComponent<{ snapshotSize: Size, }> = ({ action, snapshotSize }) => { const [measure, ref] = useMeasure(); - let [snapshotIndex, setSnapshotIndex] = React.useState(0); + const [snapshotIndex, setSnapshotIndex] = React.useState(0); const snapshotMap = new Map(); for (const snapshot of action?.metadata.snapshots || []) @@ -35,8 +35,10 @@ export const SnapshotTab: React.FunctionComponent<{ const actionSnapshot = snapshotMap.get('action') || snapshotMap.get('after'); const snapshots = [actionSnapshot ? { ...actionSnapshot, title: 'action' } : undefined, snapshotMap.get('before'), snapshotMap.get('after')].filter(Boolean) as { title: string, snapshotName: string }[]; - if (snapshotIndex >= snapshots.length) - snapshotIndex = snapshots.length - 1; + React.useEffect(() => { + if (snapshotIndex >= snapshots.length) + setSnapshotIndex(snapshots.length - 1); + }, [snapshotIndex, snapshots]); const iframeRef = React.createRef(); React.useEffect(() => { @@ -57,7 +59,7 @@ export const SnapshotTab: React.FunctionComponent<{ (iframeRef.current.contentWindow as any).showSnapshot(snapshotUrl, { point }); } catch (e) { } - }, [action, snapshotIndex]); + }, [action, snapshotIndex, iframeRef, snapshots]); const scale = Math.min(measure.width / snapshotSize.width, measure.height / snapshotSize.height); const scaledSize = { @@ -79,7 +81,7 @@ export const SnapshotTab: React.FunctionComponent<{ onClick={() => setSnapshotIndex(index)} key={snapshot.title}>
{renderTitle(snapshot.title)}
-
+
; })}
diff --git a/src/web/traceViewer/ui/tabbedPane.tsx b/src/web/traceViewer/ui/tabbedPane.tsx index 1e1e66efda..8bcd46f9c3 100644 --- a/src/web/traceViewer/ui/tabbedPane.tsx +++ b/src/web/traceViewer/ui/tabbedPane.tsx @@ -16,7 +16,6 @@ import './tabbedPane.css'; import * as React from 'react'; -import { count } from 'console'; export interface TabbedPaneTab { id: string; @@ -34,14 +33,14 @@ export const TabbedPane: React.FunctionComponent<{
{ - tabs.map(tab => { - return
( +
setSelectedTab(tab.id)} key={tab.id}>
{tab.title}
{tab.count || ''}
- }) + )) }
{ diff --git a/src/web/traceViewer/ui/timeline.tsx b/src/web/traceViewer/ui/timeline.tsx index 68e271e8d9..eaa7f5ef50 100644 --- a/src/web/traceViewer/ui/timeline.tsx +++ b/src/web/traceViewer/ui/timeline.tsx @@ -58,8 +58,6 @@ export const Timeline: React.FunctionComponent<{ const bars: TimelineBar[] = []; for (const page of context.pages) { for (const entry of page.actions) { - if (!entry.metadata.params) - console.log(entry); let detail = trimRight(entry.metadata.params.selector || '', 50); if (entry.metadata.method === 'goto') detail = trimRight(entry.metadata.params.url || '', 50); diff --git a/src/web/traceViewer/ui/workbench.tsx b/src/web/traceViewer/ui/workbench.tsx index 3980427b39..46b6293f8d 100644 --- a/src/web/traceViewer/ui/workbench.tsx +++ b/src/web/traceViewer/ui/workbench.tsx @@ -39,7 +39,7 @@ export const Workbench: React.FunctionComponent<{ const [highlightedAction, setHighlightedAction] = React.useState(); const [selectedTab, setSelectedTab] = React.useState('logs'); - let context = useAsyncMemo(async () => { + const context = useAsyncMemo(async () => { if (!debugName) return emptyContext; const context = (await fetch(`/context/${debugName}`).then(response => response.json())) as ContextEntry;