From ac05279eaed952deb897567a4e547156bd94bfc8 Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Wed, 15 Jan 2025 22:55:35 +0000 Subject: [PATCH 1/2] :wrench: (typescript) change moduleResolution to bundler --- packages/desktop-client/src/components/Notes.tsx | 4 ++-- packages/desktop-client/src/components/Titlebar.tsx | 4 ++-- packages/desktop-client/src/components/common/Block.tsx | 4 +++- packages/desktop-client/src/components/common/Button.tsx | 9 ++------- .../desktop-client/src/components/common/InlineField.tsx | 4 +++- packages/desktop-client/src/components/common/Input.tsx | 3 +-- .../src/components/common/InputWithContent.tsx | 9 ++------- packages/desktop-client/src/components/common/Link.tsx | 3 +-- .../desktop-client/src/components/common/Paragraph.tsx | 4 +++- packages/desktop-client/src/components/common/Text.tsx | 3 ++- packages/desktop-client/src/components/common/View.tsx | 9 +++------ packages/desktop-client/src/components/forms.tsx | 8 ++------ .../components/modals/EnvelopeBudgetMonthMenuModal.tsx | 4 ++-- .../components/modals/TrackingBudgetMonthMenuModal.tsx | 4 ++-- .../src/components/reports/graphs/NetWorthGraph.tsx | 4 ++-- .../components/reports/graphs/tableGraph/ReportTable.tsx | 2 +- .../desktop-client/src/components/select/DateSelect.tsx | 3 +-- packages/desktop-client/src/components/settings/UI.tsx | 4 ++-- .../src/components/sidebar/ItemContent.tsx | 5 +++-- packages/desktop-client/src/components/table.tsx | 3 +-- packages/desktop-client/src/style/styles.ts | 8 +++++--- tsconfig.json | 4 ++-- upcoming-release-notes/4163.md | 6 ++++++ 23 files changed, 53 insertions(+), 58 deletions(-) create mode 100644 upcoming-release-notes/4163.md diff --git a/packages/desktop-client/src/components/Notes.tsx b/packages/desktop-client/src/components/Notes.tsx index 1c1cf3c4076..2f131a7f6a9 100644 --- a/packages/desktop-client/src/components/Notes.tsx +++ b/packages/desktop-client/src/components/Notes.tsx @@ -1,12 +1,12 @@ // @ts-strict-ignore -import React, { useEffect, useRef, type CSSProperties } from 'react'; +import React, { useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import ReactMarkdown from 'react-markdown'; import { css } from '@emotion/css'; import remarkGfm from 'remark-gfm'; -import { theme } from '../style'; +import { type CSSProperties, theme } from '../style'; import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown'; import { Text } from './common/Text'; diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx index 475a95ddc20..03b231f4f30 100644 --- a/packages/desktop-client/src/components/Titlebar.tsx +++ b/packages/desktop-client/src/components/Titlebar.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, type CSSProperties } from 'react'; +import React, { useState, useEffect } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { Routes, Route, useLocation } from 'react-router-dom'; @@ -26,7 +26,7 @@ import { SvgViewShow, } from '../icons/v2'; import { useDispatch } from '../redux'; -import { theme, styles } from '../style'; +import { theme, styles, type CSSProperties } from '../style'; import { AccountSyncCheck } from './accounts/AccountSyncCheck'; import { AnimatedRefresh } from './AnimatedRefresh'; diff --git a/packages/desktop-client/src/components/common/Block.tsx b/packages/desktop-client/src/components/common/Block.tsx index 021f4cad201..26ca9a1feaf 100644 --- a/packages/desktop-client/src/components/common/Block.tsx +++ b/packages/desktop-client/src/components/common/Block.tsx @@ -1,7 +1,9 @@ -import { type HTMLProps, type Ref, type CSSProperties } from 'react'; +import { type HTMLProps, type Ref } from 'react'; import { css, cx } from '@emotion/css'; +import { type CSSProperties } from '../../style'; + type BlockProps = HTMLProps & { innerRef?: Ref; style?: CSSProperties; diff --git a/packages/desktop-client/src/components/common/Button.tsx b/packages/desktop-client/src/components/common/Button.tsx index 8a5c170dcc8..0b169a56802 100644 --- a/packages/desktop-client/src/components/common/Button.tsx +++ b/packages/desktop-client/src/components/common/Button.tsx @@ -1,14 +1,9 @@ -import React, { - forwardRef, - type ElementType, - type HTMLProps, - type CSSProperties, -} from 'react'; +import React, { forwardRef, type ElementType, type HTMLProps } from 'react'; import { css } from '@emotion/css'; import { AnimatedLoading } from '../../icons/AnimatedLoading'; -import { styles, theme } from '../../style'; +import { styles, theme, type CSSProperties } from '../../style'; import { View } from './View'; diff --git a/packages/desktop-client/src/components/common/InlineField.tsx b/packages/desktop-client/src/components/common/InlineField.tsx index b5a8b165fa2..7127d87ee7a 100644 --- a/packages/desktop-client/src/components/common/InlineField.tsx +++ b/packages/desktop-client/src/components/common/InlineField.tsx @@ -1,7 +1,9 @@ -import { type ReactNode, type CSSProperties } from 'react'; +import { type ReactNode } from 'react'; import { css } from '@emotion/css'; +import { type CSSProperties } from '../../style'; + type InlineFieldProps = { label: ReactNode; labelWidth?: number; diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx index 12a611513c5..fa915aa0884 100644 --- a/packages/desktop-client/src/components/common/Input.tsx +++ b/packages/desktop-client/src/components/common/Input.tsx @@ -2,7 +2,6 @@ import React, { type InputHTMLAttributes, type KeyboardEvent, type Ref, - type CSSProperties, useRef, } from 'react'; @@ -10,7 +9,7 @@ import { css, cx } from '@emotion/css'; import { useMergedRefs } from '../../hooks/useMergedRefs'; import { useProperFocus } from '../../hooks/useProperFocus'; -import { styles, theme } from '../../style'; +import { styles, theme, type CSSProperties } from '../../style'; export const defaultInputStyle = { outline: 0, diff --git a/packages/desktop-client/src/components/common/InputWithContent.tsx b/packages/desktop-client/src/components/common/InputWithContent.tsx index 94b9bc87f3d..15f17394faa 100644 --- a/packages/desktop-client/src/components/common/InputWithContent.tsx +++ b/packages/desktop-client/src/components/common/InputWithContent.tsx @@ -1,11 +1,6 @@ -import { - useState, - type ComponentProps, - type ReactNode, - type CSSProperties, -} from 'react'; +import { useState, type ComponentProps, type ReactNode } from 'react'; -import { theme } from '../../style'; +import { theme, type CSSProperties } from '../../style'; import { Input, defaultInputStyle } from './Input'; import { View } from './View'; diff --git a/packages/desktop-client/src/components/common/Link.tsx b/packages/desktop-client/src/components/common/Link.tsx index d5194fb4a82..00225844537 100644 --- a/packages/desktop-client/src/components/common/Link.tsx +++ b/packages/desktop-client/src/components/common/Link.tsx @@ -2,14 +2,13 @@ import React, { type MouseEventHandler, type ComponentProps, type ReactNode, - type CSSProperties, } from 'react'; import { NavLink, useMatch } from 'react-router-dom'; import { css } from '@emotion/css'; import { useNavigate } from '../../hooks/useNavigate'; -import { styles } from '../../style'; +import { type CSSProperties, styles } from '../../style'; import { theme } from '../../style/theme'; import { Button } from './Button2'; diff --git a/packages/desktop-client/src/components/common/Paragraph.tsx b/packages/desktop-client/src/components/common/Paragraph.tsx index ad736f8bd62..490363b27ab 100644 --- a/packages/desktop-client/src/components/common/Paragraph.tsx +++ b/packages/desktop-client/src/components/common/Paragraph.tsx @@ -1,7 +1,9 @@ -import { type HTMLProps, type CSSProperties } from 'react'; +import { type HTMLProps } from 'react'; import { css } from '@emotion/css'; +import { type CSSProperties } from '../../style'; + type ParagraphProps = HTMLProps & { style?: CSSProperties; isLast?: boolean; diff --git a/packages/desktop-client/src/components/common/Text.tsx b/packages/desktop-client/src/components/common/Text.tsx index 82f487a88b6..54aae39aac5 100644 --- a/packages/desktop-client/src/components/common/Text.tsx +++ b/packages/desktop-client/src/components/common/Text.tsx @@ -3,11 +3,12 @@ import React, { type Ref, type ReactNode, forwardRef, - type CSSProperties, } from 'react'; import { css, cx } from '@emotion/css'; +import { type CSSProperties } from '../../style'; + type TextProps = HTMLProps & { innerRef?: Ref; className?: string; diff --git a/packages/desktop-client/src/components/common/View.tsx b/packages/desktop-client/src/components/common/View.tsx index b940ea26803..a74c3271219 100644 --- a/packages/desktop-client/src/components/common/View.tsx +++ b/packages/desktop-client/src/components/common/View.tsx @@ -1,12 +1,9 @@ -import React, { - forwardRef, - type HTMLProps, - type Ref, - type CSSProperties, -} from 'react'; +import React, { forwardRef, type HTMLProps, type Ref } from 'react'; import { css, cx } from '@emotion/css'; +import { type CSSProperties } from '../../style'; + type ViewProps = HTMLProps & { className?: string; style?: CSSProperties; diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx index cebbd89a4a9..439acfae812 100644 --- a/packages/desktop-client/src/components/forms.tsx +++ b/packages/desktop-client/src/components/forms.tsx @@ -1,12 +1,8 @@ -import React, { - type ReactNode, - type ComponentProps, - type CSSProperties, -} from 'react'; +import React, { type ReactNode, type ComponentProps } from 'react'; import { css } from '@emotion/css'; -import { theme } from '../style'; +import { theme, type CSSProperties } from '../style'; import { Text } from './common/Text'; import { View } from './common/View'; diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx index 6e4cd4f62a0..e0d662c07a1 100644 --- a/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx +++ b/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx @@ -1,5 +1,5 @@ // @ts-strict-ignore -import React, { useState, type CSSProperties } from 'react'; +import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { css } from '@emotion/css'; @@ -10,7 +10,7 @@ import { useNotes } from '../../hooks/useNotes'; import { useUndo } from '../../hooks/useUndo'; import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1'; import { SvgNotesPaper } from '../../icons/v2'; -import { styles, theme } from '../../style'; +import { styles, theme, type CSSProperties } from '../../style'; import { BudgetMonthMenu } from '../budget/envelope/budgetsummary/BudgetMonthMenu'; import { Button } from '../common/Button2'; import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal'; diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx index a95c91389c6..08ae3607981 100644 --- a/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx +++ b/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx @@ -1,5 +1,5 @@ // @ts-strict-ignore -import React, { useState, type CSSProperties } from 'react'; +import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { css } from '@emotion/css'; @@ -10,7 +10,7 @@ import { useNotes } from '../../hooks/useNotes'; import { useUndo } from '../../hooks/useUndo'; import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1'; import { SvgNotesPaper } from '../../icons/v2'; -import { styles, theme } from '../../style'; +import { type CSSProperties, styles, theme } from '../../style'; import { BudgetMonthMenu } from '../budget/tracking/budgetsummary/BudgetMonthMenu'; import { Button } from '../common/Button2'; import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal'; diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx index d5a2507eb15..7eba9550d57 100644 --- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx @@ -1,5 +1,5 @@ // @ts-strict-ignore -import React, { type CSSProperties } from 'react'; +import React from 'react'; import { useTranslation } from 'react-i18next'; import { css } from '@emotion/css'; @@ -16,7 +16,7 @@ import { import { amountToCurrencyNoDecimal } from 'loot-core/shared/util'; import { usePrivacyMode } from '../../../hooks/usePrivacyMode'; -import { theme } from '../../../style'; +import { type CSSProperties, theme } from '../../../style'; import { AlignedText } from '../../common/AlignedText'; import { Container } from '../Container'; import { numberFormatterTooltip } from '../numberFormatter'; diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx index 18be7311f1e..6db7986aa30 100644 --- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx +++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx @@ -4,7 +4,6 @@ import React, { useLayoutEffect, useRef, type UIEventHandler, - type CSSProperties, } from 'react'; import { @@ -14,6 +13,7 @@ import { } from 'loot-core/src/types/models/reports'; import { type RuleConditionEntity } from 'loot-core/types/models/rule'; +import { type CSSProperties } from '../../../../style'; import { Block } from '../../../common/Block'; import { View } from '../../../common/View'; diff --git a/packages/desktop-client/src/components/select/DateSelect.tsx b/packages/desktop-client/src/components/select/DateSelect.tsx index 5b3bebc727e..62d69ba10a7 100644 --- a/packages/desktop-client/src/components/select/DateSelect.tsx +++ b/packages/desktop-client/src/components/select/DateSelect.tsx @@ -1,6 +1,5 @@ // @ts-strict-ignore import React, { - type CSSProperties, forwardRef, useEffect, useImperativeHandle, @@ -28,7 +27,7 @@ import { } from 'loot-core/src/shared/months'; import { useSyncedPref } from '../../hooks/useSyncedPref'; -import { styles, theme } from '../../style'; +import { styles, theme, type CSSProperties } from '../../style'; import { Input } from '../common/Input'; import { Popover } from '../common/Popover'; import { View } from '../common/View'; diff --git a/packages/desktop-client/src/components/settings/UI.tsx b/packages/desktop-client/src/components/settings/UI.tsx index 8bbfbf8a9e2..c36b79a6491 100644 --- a/packages/desktop-client/src/components/settings/UI.tsx +++ b/packages/desktop-client/src/components/settings/UI.tsx @@ -1,10 +1,10 @@ -import React, { useState, type ReactNode, type CSSProperties } from 'react'; +import React, { useState, type ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation } from 'react-router-dom'; import { css } from '@emotion/css'; -import { theme } from '../../style'; +import { type CSSProperties, theme } from '../../style'; import { tokens } from '../../tokens'; import { Link } from '../common/Link'; import { View } from '../common/View'; diff --git a/packages/desktop-client/src/components/sidebar/ItemContent.tsx b/packages/desktop-client/src/components/sidebar/ItemContent.tsx index c9cbd1fcc66..e44602c0c96 100644 --- a/packages/desktop-client/src/components/sidebar/ItemContent.tsx +++ b/packages/desktop-client/src/components/sidebar/ItemContent.tsx @@ -1,14 +1,15 @@ import React, { type MouseEventHandler, type ReactNode, - type CSSProperties, + type ComponentProps, } from 'react'; +import { type CSSProperties } from '../../style'; import { Link } from '../common/Link'; import { View } from '../common/View'; type ItemContentProps = { - style: CSSProperties; + style: ComponentProps['style']; to: string; onClick: MouseEventHandler; activeStyle: CSSProperties; diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx index d62de7ed99f..af677264e88 100644 --- a/packages/desktop-client/src/components/table.tsx +++ b/packages/desktop-client/src/components/table.tsx @@ -14,7 +14,6 @@ import React, { type ReactElement, type Ref, type MutableRefObject, - type CSSProperties, } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -27,7 +26,7 @@ import { useSelectedItems } from '../hooks/useSelected'; import { AnimatedLoading } from '../icons/AnimatedLoading'; import { SvgDelete, SvgExpandArrow } from '../icons/v0'; import { SvgCheckmark } from '../icons/v1'; -import { styles, theme } from '../style'; +import { type CSSProperties, styles, theme } from '../style'; import { Button } from './common/Button2'; import { Input } from './common/Input'; diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts index ea137a344c5..ae64ab7a715 100644 --- a/packages/desktop-client/src/style/styles.ts +++ b/packages/desktop-client/src/style/styles.ts @@ -1,6 +1,4 @@ // @ts-strict-ignore -import { type CSSProperties } from 'react'; - import { keyframes } from '@emotion/css'; import * as Platform from 'loot-core/src/client/platform'; @@ -9,13 +7,17 @@ import { tokens } from '../tokens'; import { theme } from './theme'; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type CSSProperties = Record; + const MOBILE_MIN_HEIGHT = 40; const shadowLarge = { boxShadow: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', }; -export const styles = { +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const styles: Record = { incomeHeaderHeight: 70, cardShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)', monthRightPadding: 5, diff --git a/tsconfig.json b/tsconfig.json index d46dd74c7e6..0727f4e5867 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,8 +25,8 @@ "checkJs": false, // Used for temp builds "outDir": "build", - "moduleResolution": "Node10", - "module": "ES2022", + "moduleResolution": "bundler", + "module": "es2022", // Until/if we build using tsc "noEmit": true, "paths": { diff --git a/upcoming-release-notes/4163.md b/upcoming-release-notes/4163.md new file mode 100644 index 00000000000..b13b7958872 --- /dev/null +++ b/upcoming-release-notes/4163.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MatissJanis] +--- + +Change TS `moduleResolution` to `bundler` and patch `CSSProperties` imports. From 9b209403b1eb85202619d8d001333da3f9de9f36 Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Wed, 15 Jan 2025 23:09:54 +0000 Subject: [PATCH 2/2] Some reverts unfortunatelly --- packages/api/tsconfig.dist.json | 3 ++- packages/crdt/tsconfig.dist.json | 1 + packages/desktop-electron/tsconfig.dist.json | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/api/tsconfig.dist.json b/packages/api/tsconfig.dist.json index d85cb67ca5f..40254aed57c 100644 --- a/packages/api/tsconfig.dist.json +++ b/packages/api/tsconfig.dist.json @@ -5,13 +5,14 @@ // the latest Node 16.x release supports all of the features "target": "ES2021", "module": "CommonJS", + "moduleResolution": "node10", "noEmit": false, "declaration": true, "outDir": "dist", "declarationDir": "@types", "paths": { "loot-core/src/*": ["./loot-core/*"], - "loot-core/*": ["./@types/loot-core/*"], + "loot-core/*": ["./@types/loot-core/*"] } }, "include": ["."], diff --git a/packages/crdt/tsconfig.dist.json b/packages/crdt/tsconfig.dist.json index a3ca917de5f..698882a51a4 100644 --- a/packages/crdt/tsconfig.dist.json +++ b/packages/crdt/tsconfig.dist.json @@ -5,6 +5,7 @@ // the latest Node 16.x release supports all of the features "target": "ES2021", "module": "CommonJS", + "moduleResolution": "node10", "noEmit": false, "declaration": true, "strict": true, diff --git a/packages/desktop-electron/tsconfig.dist.json b/packages/desktop-electron/tsconfig.dist.json index 5a0ba042c52..961dcc3eae1 100644 --- a/packages/desktop-electron/tsconfig.dist.json +++ b/packages/desktop-electron/tsconfig.dist.json @@ -5,9 +5,10 @@ // the latest Node 16.x release supports all of the features "target": "ES2021", "module": "CommonJS", + "moduleResolution": "node10", "noEmit": false, "declaration": true, - "outDir": "build", + "outDir": "build" }, "include": ["."], "exclude": ["**/node_modules/*", "build/**/*"]