From 04b03224e71d85ca15159b8400b3355ab90708ac Mon Sep 17 00:00:00 2001 From: Katzper Michno Date: Wed, 23 Oct 2024 15:34:39 +0200 Subject: [PATCH] Add extension typecheck workflow and enhance lint workflow (#604) ## Changes Enhanced linting and typecheck in `vscode-extension` #### Typecheck - typecheck CI workflow to run on changes in `vscode-extension` - added default `replaysEnabled: false` to `ProjectContextProps` in `ProjectProvider.tsx` (typecheck was failing because it was missing) #### Lint - `eslint` is now run also on `.tsx/.js/.jsx` files, so I fixed issues in them - fixed `prettier --check` in CI which was not working - fixed some lint warnings about `!=` instead of `!==` - added `no-unused-vars` rule to `eslint` to prevent unused imports and variables, fixed issues that have been found - set `{ args: none }` in `no-unused-vars` rule because we have some functions with arguments that are not used - but I didn't want to change any interfaces --- .github/workflows/typecheck-extension.yml | 37 ++++++++++++ packages/vscode-extension/.eslintrc.json | 11 +++- packages/vscode-extension/package.json | 2 +- .../src/builders/PlatformBuildCache.ts | 1 - .../src/debugging/DebugAdapter.ts | 10 ++-- .../src/debugging/DebugSession.ts | 1 - .../vscode-extension/src/debugging/cdp.ts | 2 - .../src/devices/DeviceBase.ts | 2 +- .../vscode-extension/src/devices/preview.ts | 2 +- .../src/panels/LaunchConfigController.ts | 2 +- .../src/panels/WebviewController.ts | 2 +- .../src/panels/webviewContentGenerator.ts | 3 +- .../vscode-extension/src/project/metro.ts | 2 +- .../src/utilities/packageManager.ts | 11 +--- .../vscode-extension/src/utilities/utils.ts | 2 +- .../components/DeviceRemovalConfirmation.tsx | 2 +- .../components/DeviceSettingsDropdown.tsx | 2 +- .../components/IconButtonWithOptions.tsx | 5 +- .../webview/components/InspectDataMenu.css | 10 ++-- .../src/webview/components/Preview.tsx | 4 +- .../src/webview/components/PreviewLoader.tsx | 2 +- .../src/webview/components/ReplayOverlay.tsx | 20 ++++--- .../src/webview/components/UrlSelect.tsx | 2 +- .../src/webview/components/shared/Alert.tsx | 1 - .../src/webview/components/shared/Modal.tsx | 4 -- .../src/webview/hooks/useResizableProps.tsx | 2 +- .../src/webview/providers/AlertProvider.tsx | 10 ++-- .../providers/DependenciesProvider.tsx | 4 +- .../src/webview/providers/ModalProvider.tsx | 6 +- .../src/webview/providers/ProjectProvider.tsx | 58 ++++++++----------- .../src/webview/views/CreateDeviceView.tsx | 2 +- .../webview/views/DeviceLocalizationView.tsx | 4 +- .../src/webview/views/DeviceLocationView.tsx | 4 +- .../src/webview/views/DevicesNotFoundView.tsx | 1 - .../webview/views/LaunchConfigurationView.tsx | 6 +- .../src/webview/views/PreviewView.tsx | 7 +-- 36 files changed, 130 insertions(+), 116 deletions(-) create mode 100644 .github/workflows/typecheck-extension.yml diff --git a/.github/workflows/typecheck-extension.yml b/.github/workflows/typecheck-extension.yml new file mode 100644 index 000000000..aa323eec2 --- /dev/null +++ b/.github/workflows/typecheck-extension.yml @@ -0,0 +1,37 @@ +name: Typecheck vscode-extension +on: + push: + branches: + - main + paths: + - ".github/workflows/typecheck-extension.yml" + - "packages/vscode-extension/**" + pull_request: + paths: + - ".github/workflows/typecheck-extension.yml" + - "packages/vscode-extension/**" + +jobs: + check: + if: github.repository == 'software-mansion/radon-ide' + runs-on: ubuntu-latest + env: + WORKING_DIRECTORY: packages/vscode-extension + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup node + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: "npm" + cache-dependency-path: packages/vscode-extension/package-lock.json + + - name: Install node dependencies + working-directory: ${{ env.WORKING_DIRECTORY }} + run: npm i + + - name: Typecheck extension + working-directory: ${{ env.WORKING_DIRECTORY }} + run: npm run typecheck diff --git a/packages/vscode-extension/.eslintrc.json b/packages/vscode-extension/.eslintrc.json index a7731b536..e7a120fc1 100644 --- a/packages/vscode-extension/.eslintrc.json +++ b/packages/vscode-extension/.eslintrc.json @@ -7,13 +7,20 @@ }, "plugins": ["@typescript-eslint", "import"], "rules": { - "@typescript-eslint/naming-convention": "off", - "@typescript-eslint/semi": "warn", "curly": "warn", "eqeqeq": "warn", "no-throw-literal": "warn", "semi": "off", + "@typescript-eslint/naming-convention": "off", + "@typescript-eslint/semi": "warn", "@typescript-eslint/no-shadow": "error", + "@typescript-eslint/no-unused-vars": [ + "error", + { + "varsIgnorePattern": "^_", + "args": "none" + } + ], "import/order": ["warn", { "groups": ["builtin", "external"] }] }, "ignorePatterns": ["webview-ui/**"], diff --git a/packages/vscode-extension/package.json b/packages/vscode-extension/package.json index 4667eeed2..c3f6188eb 100644 --- a/packages/vscode-extension/package.json +++ b/packages/vscode-extension/package.json @@ -438,7 +438,7 @@ "build:dist": "npm run build:extension && npm run build:sim-server && npm run build:webview", "watch:extension": "vite", "package": "rm -rf dist/ && npm run build:dist", - "lint": "eslint src --ext ts && npm exec prettier --check src", + "lint": "eslint src/**/*.\\{ts,tsx,js,jsx\\} && prettier --check src", "typecheck": "tsc --noEmit", "format": "prettier --write --list-different src", "build:tests": "tsc --project tsconfig.test.json", diff --git a/packages/vscode-extension/src/builders/PlatformBuildCache.ts b/packages/vscode-extension/src/builders/PlatformBuildCache.ts index 4697ce0f1..a89b040cd 100644 --- a/packages/vscode-extension/src/builders/PlatformBuildCache.ts +++ b/packages/vscode-extension/src/builders/PlatformBuildCache.ts @@ -8,7 +8,6 @@ import { IOSBuildResult } from "./buildIOS"; import { AndroidBuildResult } from "./buildAndroid"; import { getLaunchConfiguration } from "../utilities/launchConfiguration"; import { runfingerprintCommand } from "./customBuild"; -import { CancelToken } from "./cancelToken"; import { calculateMD5 } from "../utilities/common"; import { BuildResult } from "./BuildManager"; diff --git a/packages/vscode-extension/src/debugging/DebugAdapter.ts b/packages/vscode-extension/src/debugging/DebugAdapter.ts index d32f48307..22d8dcd4f 100644 --- a/packages/vscode-extension/src/debugging/DebugAdapter.ts +++ b/packages/vscode-extension/src/debugging/DebugAdapter.ts @@ -14,8 +14,6 @@ import { Source, StackFrame, } from "@vscode/debugadapter"; -import { getReactNativeVersion } from "../utilities/reactNative"; -import semver from "semver"; import { DebugProtocol } from "@vscode/debugprotocol"; import WebSocket from "ws"; import { NullablePosition, SourceMapConsumer } from "source-map"; @@ -324,13 +322,13 @@ export class DebugAdapter extends DebugSession { line: lineNumber1Based - lineOffset, column: columnNumber0Based, }); - if (pos.source != null) { + if (pos.source !== null) { sourceURL = pos.source; } - if (pos.line != null) { + if (pos.line !== null) { sourceLine1Based = pos.line; } - if (pos.column != null) { + if (pos.column !== null) { sourceColumn0Based = pos.column; } } @@ -485,7 +483,7 @@ export class DebugAdapter extends DebugSession { column: columnNumber0Based, bias: SourceMapConsumer.LEAST_UPPER_BOUND, }); - if (pos.line != null) { + if (pos.line !== null) { originalSourceURL = sourceURL; position = { ...pos, line: pos.line + lineOffset }; } diff --git a/packages/vscode-extension/src/debugging/DebugSession.ts b/packages/vscode-extension/src/debugging/DebugSession.ts index 8a4d7309a..ff3b849b4 100644 --- a/packages/vscode-extension/src/debugging/DebugSession.ts +++ b/packages/vscode-extension/src/debugging/DebugSession.ts @@ -4,7 +4,6 @@ import { Disposable, DebugSession as VscDebugSession, } from "vscode"; -import { getAppRootFolder } from "../utilities/extensionContext"; import { Metro } from "../project/metro"; export type DebugSessionDelegate = { diff --git a/packages/vscode-extension/src/debugging/cdp.ts b/packages/vscode-extension/src/debugging/cdp.ts index f7be01c71..19a7ed81b 100644 --- a/packages/vscode-extension/src/debugging/cdp.ts +++ b/packages/vscode-extension/src/debugging/cdp.ts @@ -1,5 +1,3 @@ -import { Source } from "@vscode/debugadapter"; - export type CDPRemoteObject = | { type: "undefined"; diff --git a/packages/vscode-extension/src/devices/DeviceBase.ts b/packages/vscode-extension/src/devices/DeviceBase.ts index ba4a93f9d..9550699a3 100644 --- a/packages/vscode-extension/src/devices/DeviceBase.ts +++ b/packages/vscode-extension/src/devices/DeviceBase.ts @@ -2,7 +2,7 @@ import fs from "fs"; import { Disposable } from "vscode"; import { Preview } from "./preview"; import { BuildResult } from "../builders/BuildManager"; -import { AppPermissionType, DeviceSettings, TouchPoint, Locale } from "../common/Project"; +import { AppPermissionType, DeviceSettings, TouchPoint } from "../common/Project"; import { DeviceInfo, DevicePlatform } from "../common/DeviceManager"; import { tryAcquiringLock } from "../utilities/common"; diff --git a/packages/vscode-extension/src/devices/preview.ts b/packages/vscode-extension/src/devices/preview.ts index c21bfe88c..7f7945d88 100644 --- a/packages/vscode-extension/src/devices/preview.ts +++ b/packages/vscode-extension/src/devices/preview.ts @@ -1,5 +1,5 @@ -import { Disposable, workspace } from "vscode"; import path from "path"; +import { Disposable, workspace } from "vscode"; import { exec, ChildProcess, lineReader } from "../utilities/subprocess"; import { extensionContext } from "../utilities/extensionContext"; import { Logger } from "../Logger"; diff --git a/packages/vscode-extension/src/panels/LaunchConfigController.ts b/packages/vscode-extension/src/panels/LaunchConfigController.ts index a70d8b153..d12abdaf4 100644 --- a/packages/vscode-extension/src/panels/LaunchConfigController.ts +++ b/packages/vscode-extension/src/panels/LaunchConfigController.ts @@ -33,7 +33,7 @@ export class LaunchConfigController implements Disposable, LaunchConfig { return {}; } - const { android, appRoot, ios, isExpo, metroConfigPath, env, ...rest } = RNIDEConfiguration; + const { android, appRoot, ios, isExpo, metroConfigPath, env } = RNIDEConfiguration; return { android, appRoot, ios, isExpo, metroConfigPath, env }; }; diff --git a/packages/vscode-extension/src/panels/WebviewController.ts b/packages/vscode-extension/src/panels/WebviewController.ts index f4230198a..e6da03630 100644 --- a/packages/vscode-extension/src/panels/WebviewController.ts +++ b/packages/vscode-extension/src/panels/WebviewController.ts @@ -1,4 +1,4 @@ -import vscode, { Webview, Disposable, window, commands, Uri } from "vscode"; +import { Webview, Disposable, commands, Uri } from "vscode"; import { DependencyManager } from "../dependency/DependencyManager"; import { DeviceManager } from "../devices/DeviceManager"; import { Project } from "../project/project"; diff --git a/packages/vscode-extension/src/panels/webviewContentGenerator.ts b/packages/vscode-extension/src/panels/webviewContentGenerator.ts index 6b277c8fa..14e02b15e 100644 --- a/packages/vscode-extension/src/panels/webviewContentGenerator.ts +++ b/packages/vscode-extension/src/panels/webviewContentGenerator.ts @@ -1,7 +1,6 @@ -import { ExtensionContext, ExtensionMode, Webview, Uri, extensions } from "vscode"; +import { ExtensionContext, ExtensionMode, Webview, Uri } from "vscode"; import { getUri } from "../utilities/getUri"; import { getNonce } from "../utilities/getNonce"; -import { getDevServerScriptUrl } from "../utilities/common"; import { Platform } from "../utilities/platform"; const VITE_DEV_HOST = "localhost:2137"; diff --git a/packages/vscode-extension/src/project/metro.ts b/packages/vscode-extension/src/project/metro.ts index 299f66a9f..1e58dde5d 100644 --- a/packages/vscode-extension/src/project/metro.ts +++ b/packages/vscode-extension/src/project/metro.ts @@ -1,5 +1,6 @@ import path from "path"; import fs from "fs"; +import WebSocket from "ws"; import { Disposable, Uri, workspace } from "vscode"; import stripAnsi from "strip-ansi"; import { exec, ChildProcess, lineReader } from "../utilities/subprocess"; @@ -8,7 +9,6 @@ import { extensionContext, getAppRootFolder } from "../utilities/extensionContex import { shouldUseExpoCLI } from "../utilities/expoCli"; import { Devtools } from "./devtools"; import { getLaunchConfiguration } from "../utilities/launchConfiguration"; -import WebSocket from "ws"; export interface MetroDelegate { onBundleError(): void; diff --git a/packages/vscode-extension/src/utilities/packageManager.ts b/packages/vscode-extension/src/utilities/packageManager.ts index 9a990b043..4d6d40935 100644 --- a/packages/vscode-extension/src/utilities/packageManager.ts +++ b/packages/vscode-extension/src/utilities/packageManager.ts @@ -10,15 +10,6 @@ export type PackageManagerInfo = { workspacePath?: string; }; -async function pathExists(p: string) { - try { - await fs.access(p); - return true; - } catch { - return false; - } -} - export async function resolvePackageManager(): Promise { function findWorkspace(appRoot: string) { let currentDir = appRoot; @@ -81,7 +72,7 @@ export async function resolvePackageManager(): Promise { try { - const { stdout, stderr } = await command("npm ls --json", { + const { stdout } = await command("npm ls --json", { cwd: workspacePath, quietErrorsOnExit: true, }); diff --git a/packages/vscode-extension/src/utilities/utils.ts b/packages/vscode-extension/src/utilities/utils.ts index 416f6e9b5..5cbc72dce 100644 --- a/packages/vscode-extension/src/utilities/utils.ts +++ b/packages/vscode-extension/src/utilities/utils.ts @@ -1,7 +1,7 @@ -import { commands, env, Uri, window, workspace } from "vscode"; import { homedir } from "node:os"; import fs from "fs"; import path from "path"; +import { commands, env, Uri, window, workspace } from "vscode"; import JSON5 from "json5"; import vscode from "vscode"; import { Logger } from "../Logger"; diff --git a/packages/vscode-extension/src/webview/components/DeviceRemovalConfirmation.tsx b/packages/vscode-extension/src/webview/components/DeviceRemovalConfirmation.tsx index e3cdb78e7..8732c4a13 100644 --- a/packages/vscode-extension/src/webview/components/DeviceRemovalConfirmation.tsx +++ b/packages/vscode-extension/src/webview/components/DeviceRemovalConfirmation.tsx @@ -1,6 +1,6 @@ import "./DeviceRemovalConfirmation.css"; -import { DeviceInfo } from "../../common/DeviceManager"; import { useEffect, useState } from "react"; +import { DeviceInfo } from "../../common/DeviceManager"; import { useDevices } from "../providers/DevicesProvider"; import Button from "./shared/Button"; import { useModal } from "../providers/ModalProvider"; diff --git a/packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.tsx b/packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.tsx index 81a6fa44a..4565397fd 100644 --- a/packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.tsx +++ b/packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from "react"; +import React from "react"; import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; import * as RadioGroup from "@radix-ui/react-radio-group"; import * as Slider from "@radix-ui/react-slider"; diff --git a/packages/vscode-extension/src/webview/components/IconButtonWithOptions.tsx b/packages/vscode-extension/src/webview/components/IconButtonWithOptions.tsx index 0bba378a2..65cbd6979 100644 --- a/packages/vscode-extension/src/webview/components/IconButtonWithOptions.tsx +++ b/packages/vscode-extension/src/webview/components/IconButtonWithOptions.tsx @@ -1,8 +1,8 @@ -import { forwardRef, useRef, useState } from "react"; +import { forwardRef, useState } from "react"; import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; +import classNames from "classnames"; import IconButton, { IconButtonProps } from "./shared/IconButton"; import "./IconButtonWithOptions.css"; -import classNames from "classnames"; interface IconButtonWithOptions extends IconButtonProps { options: Record void>; @@ -12,7 +12,6 @@ export const IconButtonWithOptions = forwardRef { const { options, children, ...iconButtonProps } = props; - const timer = useRef(undefined); const [dropdownTriggerVisible, setDropdownTriggerVisible] = useState(false); return ( diff --git a/packages/vscode-extension/src/webview/components/InspectDataMenu.css b/packages/vscode-extension/src/webview/components/InspectDataMenu.css index bc8cf6b63..8248ba2f4 100644 --- a/packages/vscode-extension/src/webview/components/InspectDataMenu.css +++ b/packages/vscode-extension/src/webview/components/InspectDataMenu.css @@ -18,11 +18,11 @@ } .inspect-data-menu-label { - font-size: 12px; - line-height: 25px; - padding-left: 5px; - color: var(--swm-secondary-text); - } + font-size: 12px; + line-height: 25px; + padding-left: 5px; + color: var(--swm-secondary-text); +} .inspect-data-menu-item { font-size: clamp(4px, 4vw, 12px); diff --git a/packages/vscode-extension/src/webview/components/Preview.tsx b/packages/vscode-extension/src/webview/components/Preview.tsx index 51ce8115f..9ef47c6d2 100644 --- a/packages/vscode-extension/src/webview/components/Preview.tsx +++ b/packages/vscode-extension/src/webview/components/Preview.tsx @@ -99,9 +99,9 @@ const MjpegImg = forwardRef { const video = videoRef.current; - if (!video) return; + if (!video) { + return; + } const updateProgress = () => { - const progress = ((video.currentTime - startTime) / (video.duration - startTime)) * 100; - setProgress(progress); + const newProgress = ((video.currentTime - startTime) / (video.duration - startTime)) * 100; + setProgress(newProgress); }; updateProgress(); @@ -79,7 +81,9 @@ function Seekbar({ videoRef, startTime }: SeekbarProps) { const handleSeek = (e: React.MouseEvent) => { const seekbar = seekbarRef.current; - if (!seekbar) return; + if (!seekbar) { + return; + } const rect = seekbar.getBoundingClientRect(); const seekPosition = (e.clientX - rect.left) / rect.width; @@ -136,11 +140,11 @@ function LengthSelector({ startTime, videoRef, setStartTime }: LengthSelectorPro return `${length}s`; } - function onValueChange(value: string) { - if (value === "Full") { + function onValueChange(newValue: string) { + if (newValue === "Full") { setStartTime(0); } else { - const newStartTime = videoDuration - parseInt(value); + const newStartTime = videoDuration - parseInt(newValue); setStartTime(newStartTime); } } diff --git a/packages/vscode-extension/src/webview/components/UrlSelect.tsx b/packages/vscode-extension/src/webview/components/UrlSelect.tsx index 77e279502..342903d9d 100644 --- a/packages/vscode-extension/src/webview/components/UrlSelect.tsx +++ b/packages/vscode-extension/src/webview/components/UrlSelect.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren, useState, useEffect } from "react"; +import React, { PropsWithChildren } from "react"; import * as Select from "@radix-ui/react-select"; import "./UrlSelect.css"; diff --git a/packages/vscode-extension/src/webview/components/shared/Alert.tsx b/packages/vscode-extension/src/webview/components/shared/Alert.tsx index eb2de4042..db3f8c3a1 100644 --- a/packages/vscode-extension/src/webview/components/shared/Alert.tsx +++ b/packages/vscode-extension/src/webview/components/shared/Alert.tsx @@ -1,7 +1,6 @@ import React from "react"; import * as AlertDialog from "@radix-ui/react-alert-dialog"; import "./Alert.css"; -import classNames from "classnames"; import ErrorIcon from "../icons/ErrorIcon"; interface AlertProps { diff --git a/packages/vscode-extension/src/webview/components/shared/Modal.tsx b/packages/vscode-extension/src/webview/components/shared/Modal.tsx index 26b897e58..63e756548 100644 --- a/packages/vscode-extension/src/webview/components/shared/Modal.tsx +++ b/packages/vscode-extension/src/webview/components/shared/Modal.tsx @@ -12,10 +12,6 @@ interface ModalProps { headerShown?: boolean; } -function preventDefault(e: Event) { - e.preventDefault(); -} - export default function Modal({ title, component, open, setOpen, headerShown }: ModalProps) { const close = () => setOpen(false); return ( diff --git a/packages/vscode-extension/src/webview/hooks/useResizableProps.tsx b/packages/vscode-extension/src/webview/hooks/useResizableProps.tsx index 435655a4e..c47fad9eb 100644 --- a/packages/vscode-extension/src/webview/hooks/useResizableProps.tsx +++ b/packages/vscode-extension/src/webview/hooks/useResizableProps.tsx @@ -1,5 +1,5 @@ import { ResizeCallback } from "re-resizable"; -import { CSSProperties, useCallback, useEffect, useRef, useState } from "react"; +import { CSSProperties, useCallback, useEffect, useState } from "react"; import { DeviceProperties } from "../utilities/consts"; import { ZoomLevelType } from "../../common/Project"; import { DEVICE_DEFAULT_SCALE } from "../components/ZoomControls"; diff --git a/packages/vscode-extension/src/webview/providers/AlertProvider.tsx b/packages/vscode-extension/src/webview/providers/AlertProvider.tsx index 16b3d60a0..c32f06615 100644 --- a/packages/vscode-extension/src/webview/providers/AlertProvider.tsx +++ b/packages/vscode-extension/src/webview/providers/AlertProvider.tsx @@ -32,16 +32,16 @@ export default function AlertProvider({ children }: { children: React.ReactNode ); const openAlert = useCallback(({ id, title, description, actions, priority }: AlertType) => { - setAlerts((alerts) => { - if (alerts.some((alert) => alert.id === id)) { - return alerts; + setAlerts((oldAlerts) => { + if (oldAlerts.some((alert) => alert.id === id)) { + return oldAlerts; } - return [...alerts, { id, title, description, actions, priority }]; + return [...oldAlerts, { id, title, description, actions, priority }]; }); }, []); const closeAlert = useCallback((id: string) => { - setAlerts((alerts) => alerts.filter((alert) => alert.id !== id)); + setAlerts((oldAlerts) => oldAlerts.filter((alert) => alert.id !== id)); }, []); const topAlert = getTopAlert(alerts); diff --git a/packages/vscode-extension/src/webview/providers/DependenciesProvider.tsx b/packages/vscode-extension/src/webview/providers/DependenciesProvider.tsx index e5edfd0fb..3bdbd905f 100644 --- a/packages/vscode-extension/src/webview/providers/DependenciesProvider.tsx +++ b/packages/vscode-extension/src/webview/providers/DependenciesProvider.tsx @@ -15,7 +15,7 @@ import { const dependencyManager = makeProxy("DependencyManager"); -const dependencies = [ +const dependenciesDomain = [ "nodejs", "androidEmulator", "xcode", @@ -30,7 +30,7 @@ const dependencies = [ "storybook", ] as const; -type Dependency = typeof dependencies[number]; +type Dependency = typeof dependenciesDomain[number]; type ErrorType = "ios" | "simulator" | "emulator" | "android" | "common"; type Errors = Partial>; diff --git a/packages/vscode-extension/src/webview/providers/ModalProvider.tsx b/packages/vscode-extension/src/webview/providers/ModalProvider.tsx index 1d8011981..a127d0368 100644 --- a/packages/vscode-extension/src/webview/providers/ModalProvider.tsx +++ b/packages/vscode-extension/src/webview/providers/ModalProvider.tsx @@ -19,10 +19,10 @@ export default function ModalProvider({ children }: { children: React.ReactNode const [open, setOpen] = useState(false); const [headerShown, showHeader] = useState(true); - const openModal = (title: string, component: React.ReactNode) => { - setTitle(title); + const openModal = (modalTitle: string, modalComponent: React.ReactNode) => { + setTitle(modalTitle); // @ts-ignore TODO see this further but i think it's fine - setComponent(component); + setComponent(modalComponent); setOpen(true); }; diff --git a/packages/vscode-extension/src/webview/providers/ProjectProvider.tsx b/packages/vscode-extension/src/webview/providers/ProjectProvider.tsx index 4cfbcd857..0d6d009c7 100644 --- a/packages/vscode-extension/src/webview/providers/ProjectProvider.tsx +++ b/packages/vscode-extension/src/webview/providers/ProjectProvider.tsx @@ -10,45 +10,35 @@ interface ProjectContextProps { project: ProjectInterface; } -const ProjectContext = createContext({ - projectState: { - status: "starting", - previewURL: undefined, - selectedDevice: undefined, - previewZoom: undefined, - }, - deviceSettings: { - appearance: "dark", - contentSize: "normal", - hasEnrolledBiometrics: false, - location: { - latitude: 50.048653, - longitude: 19.965474, - isDisabled: false, - }, - locale: "en_US", +const defaultProjectState: ProjectState = { + status: "starting", + previewURL: undefined, + selectedDevice: undefined, + previewZoom: undefined, +}; + +const defaultDeviceSettings: DeviceSettings = { + appearance: "dark", + contentSize: "normal", + hasEnrolledBiometrics: false, + location: { + latitude: 50.048653, + longitude: 19.965474, + isDisabled: false, }, + locale: "en_US", + replaysEnabled: false, +}; + +const ProjectContext = createContext({ + projectState: defaultProjectState, + deviceSettings: defaultDeviceSettings, project, }); export default function ProjectProvider({ children }: PropsWithChildren) { - const [projectState, setProjectState] = useState({ - status: "starting", - previewURL: undefined, - selectedDevice: undefined, - previewZoom: undefined, - }); - const [deviceSettings, setDeviceSettings] = useState({ - appearance: "dark", - contentSize: "normal", - hasEnrolledBiometrics: false, - location: { - latitude: 50.048653, - longitude: 19.965474, - isDisabled: false, - }, - locale: "en_US", - }); + const [projectState, setProjectState] = useState(defaultProjectState); + const [deviceSettings, setDeviceSettings] = useState(defaultDeviceSettings); useEffect(() => { project.getProjectState().then(setProjectState); diff --git a/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx b/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx index 16e98bac4..fe2239db9 100644 --- a/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx +++ b/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx @@ -1,6 +1,6 @@ +import { useEffect, useState } from "react"; import Select from "../components/shared/Select"; import "./CreateDeviceView.css"; -import { useEffect, useState } from "react"; import { useDevices } from "../providers/DevicesProvider"; import Button from "../components/shared/Button"; import Label from "../components/shared/Label"; diff --git a/packages/vscode-extension/src/webview/views/DeviceLocalizationView.tsx b/packages/vscode-extension/src/webview/views/DeviceLocalizationView.tsx index c3929cb50..7fce709bd 100644 --- a/packages/vscode-extension/src/webview/views/DeviceLocalizationView.tsx +++ b/packages/vscode-extension/src/webview/views/DeviceLocalizationView.tsx @@ -1,9 +1,9 @@ +import { useEffect, useRef, useState } from "react"; +import * as ScrollArea from "@radix-ui/react-scroll-area"; import { useProject } from "../providers/ProjectProvider"; import "./DeviceLocalizationView.css"; import "../components/shared/SwitchGroup.css"; -import * as ScrollArea from "@radix-ui/react-scroll-area"; import localesList from "../utilities/localeList.json"; -import { useEffect, useRef, useState } from "react"; import { Locale } from "../../common/Project"; import { useModal } from "../providers/ModalProvider"; import Button from "../components/shared/Button"; diff --git a/packages/vscode-extension/src/webview/views/DeviceLocationView.tsx b/packages/vscode-extension/src/webview/views/DeviceLocationView.tsx index 641a6262b..5ece935b7 100644 --- a/packages/vscode-extension/src/webview/views/DeviceLocationView.tsx +++ b/packages/vscode-extension/src/webview/views/DeviceLocationView.tsx @@ -1,10 +1,10 @@ -import { useProject } from "../providers/ProjectProvider"; import React, { FocusEventHandler, useRef, useState } from "react"; import "./DeviceLocationView.css"; import "../components/shared/SwitchGroup.css"; -import Label from "../components/shared/Label"; import * as Switch from "@radix-ui/react-switch"; import CoordinateParser from "coordinate-parser"; +import { useProject } from "../providers/ProjectProvider"; +import Label from "../components/shared/Label"; import Tooltip from "../components/shared/Tooltip"; import { throttle } from "../../utilities/throttle"; diff --git a/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx b/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx index a000bf175..1929f180d 100644 --- a/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx +++ b/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx @@ -9,7 +9,6 @@ import { useDevices } from "../providers/DevicesProvider"; import { AndroidSupportedDevices, iOSSupportedDevices } from "../utilities/consts"; import { IOSDeviceTypeInfo, IOSRuntimeInfo } from "../../common/DeviceManager"; import { useDependencies } from "../providers/DependenciesProvider"; -import { vscode } from "../utilities/vscode"; import { Platform, useUtils } from "../providers/UtilsProvider"; const firstIosDevice = iOSSupportedDevices[0]; diff --git a/packages/vscode-extension/src/webview/views/LaunchConfigurationView.tsx b/packages/vscode-extension/src/webview/views/LaunchConfigurationView.tsx index cb897b450..80e72052e 100644 --- a/packages/vscode-extension/src/webview/views/LaunchConfigurationView.tsx +++ b/packages/vscode-extension/src/webview/views/LaunchConfigurationView.tsx @@ -1,13 +1,13 @@ import "./View.css"; import "./LaunchConfigurationView.css"; +import { useRef } from "react"; import Label from "../components/shared/Label"; import { useLaunchConfig } from "../providers/LaunchConfigProvider"; -import { LaunchConfigUpdater, LaunchConfigurationOptions } from "../../common/LaunchConfig"; +import { LaunchConfigUpdater } from "../../common/LaunchConfig"; import Select from "../components/shared/Select"; -import { useRef } from "react"; function LaunchConfigurationView() { - const { android, appRoot, ios, isExpo, metroConfigPath, env, update, xcodeSchemes } = + const { android, appRoot, ios, isExpo, metroConfigPath, update, xcodeSchemes } = useLaunchConfig(); return ( diff --git a/packages/vscode-extension/src/webview/views/PreviewView.tsx b/packages/vscode-extension/src/webview/views/PreviewView.tsx index 6cea258f9..26f5fb7b9 100644 --- a/packages/vscode-extension/src/webview/views/PreviewView.tsx +++ b/packages/vscode-extension/src/webview/views/PreviewView.tsx @@ -1,6 +1,5 @@ import { useState, useEffect, useCallback, MouseEvent } from "react"; import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"; -import { vscode } from "../utilities/vscode"; import Preview from "../components/Preview"; import IconButton from "../components/shared/IconButton"; import UrlBar from "../components/UrlBar"; @@ -18,11 +17,11 @@ import DeviceSelect from "../components/DeviceSelect"; import { InspectDataMenu } from "../components/InspectDataMenu"; import Button from "../components/shared/Button"; import { - RecordingData, - ZoomLevelType, - InspectDataStackItem, Frame, + InspectDataStackItem, InspectStackData, + RecordingData, + ZoomLevelType, } from "../../common/Project"; import { useUtils } from "../providers/UtilsProvider"; import { AndroidSupportedDevices, iOSSupportedDevices } from "../utilities/consts";