From 2094cb39a674d38a19394b79bf59c11a65ff9e15 Mon Sep 17 00:00:00 2001 From: Ben Scott <227292+BPScott@users.noreply.github.com> Date: Tue, 6 Sep 2022 14:18:56 -0700 Subject: [PATCH] Update typescript to v4.7 (#2408) * Update typescript to v4.7 * Updates required thanks to typescript bump * Remove polyfill's dependency on useful-types --- .changeset/bright-garlics-greet.md | 5 +++ .changeset/olive-actors-sit.md | 8 +++++ .changeset/olive-ducks-divide.md | 5 +++ config/typescript/tsconfig.base.json | 3 +- package.json | 2 +- packages/jest-dom-mocks/src/connection.ts | 6 +++- .../src/tests/connection.test.ts | 6 ++-- packages/performance/src/utilities.ts | 2 +- packages/polyfills/package.json | 1 - .../polyfills/src/idle-callback.browser.ts | 27 +++------------- packages/polyfills/src/idle-callback.jest.ts | 31 +++++-------------- packages/polyfills/tsconfig.json | 3 +- packages/react-async/src/Prefetcher.tsx | 2 +- .../react-form-state/src/components/List.tsx | 2 +- packages/react-form-state/src/utilities.ts | 4 +-- packages/react-graphql/src/hooks/query.ts | 2 +- yarn.lock | 8 ++--- 17 files changed, 51 insertions(+), 66 deletions(-) create mode 100644 .changeset/bright-garlics-greet.md create mode 100644 .changeset/olive-actors-sit.md create mode 100644 .changeset/olive-ducks-divide.md diff --git a/.changeset/bright-garlics-greet.md b/.changeset/bright-garlics-greet.md new file mode 100644 index 0000000000..a6e0371111 --- /dev/null +++ b/.changeset/bright-garlics-greet.md @@ -0,0 +1,5 @@ +--- +'@shopify/jest-dom-mocks': patch +--- + +Update typing of Connection mock so it includes `addEventListener`, `removeEventListener`, `dispatchEvent` and `type` diff --git a/.changeset/olive-actors-sit.md b/.changeset/olive-actors-sit.md new file mode 100644 index 0000000000..b86315020d --- /dev/null +++ b/.changeset/olive-actors-sit.md @@ -0,0 +1,8 @@ +--- +'@shopify/performance': patch +'@shopify/react-async': patch +'@shopify/react-form-state': patch +'@shopify/react-graphql': patch +--- + +Internal typing adjustments as a result of updating Typescript diff --git a/.changeset/olive-ducks-divide.md b/.changeset/olive-ducks-divide.md new file mode 100644 index 0000000000..6e44ae7993 --- /dev/null +++ b/.changeset/olive-ducks-divide.md @@ -0,0 +1,5 @@ +--- +'@shopify/polyfills': patch +--- + +Simplify typing in idle-callback polyfill thanks improvements in window's typing in TypeScript 4.4 diff --git a/config/typescript/tsconfig.base.json b/config/typescript/tsconfig.base.json index 02c0d4525e..a194fa78d7 100644 --- a/config/typescript/tsconfig.base.json +++ b/config/typescript/tsconfig.base.json @@ -3,12 +3,13 @@ "compilerOptions": { "composite": true, "emitDeclarationOnly": true, - // Strict mode enables these strict* and noImplicit* options. + // Strict mode enables these strict*, use* and noImplicit* options. // Disable them temporarily while we fix up problematic behaviour from // the time before we wanted strict mode "strictBindCallApply": false, "strictFunctionTypes": false, "noImplicitAny": false, + "useUnknownInCatchVariables": false, "typeRoots": ["../../node_modules/@types"] } } diff --git a/package.json b/package.json index e354a047c3..3a8dd3e68a 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "react18": "npm:react@^18.1.0", "rimraf": "^2.6.2", "tsd": "^0.19.1", - "typescript": "^4.3.5", + "typescript": "~4.7.4", "yalc": "^1.0.0-pre.50" } } diff --git a/packages/jest-dom-mocks/src/connection.ts b/packages/jest-dom-mocks/src/connection.ts index 2f5f7184a7..0a7583db00 100644 --- a/packages/jest-dom-mocks/src/connection.ts +++ b/packages/jest-dom-mocks/src/connection.ts @@ -1,7 +1,7 @@ import {set} from './utilities'; export interface NavigatorWithConnection extends Navigator { - connection: { + connection: Navigator['connection'] & { downlink: number; effectiveType: string; onchange: null | Function; @@ -25,6 +25,10 @@ export class Connection { this.originalConnection = globalNavigator.connection; const mockConnection: NavigatorWithConnection['connection'] = { + addEventListener: () => {}, + removeEventListener: () => {}, + dispatchEvent: () => false, + type: 'unknown', downlink: 0, effectiveType: '3g', onchange: null, diff --git a/packages/jest-dom-mocks/src/tests/connection.test.ts b/packages/jest-dom-mocks/src/tests/connection.test.ts index e2cb1a3902..bd6f64fb4c 100644 --- a/packages/jest-dom-mocks/src/tests/connection.test.ts +++ b/packages/jest-dom-mocks/src/tests/connection.test.ts @@ -1,4 +1,4 @@ -import {Connection, NavigatorWithConnection} from '../connection'; +import {Connection} from '../connection'; describe('Connection', () => { describe('mock', () => { @@ -29,9 +29,7 @@ describe('Connection', () => { connection.mock(mockValues); - expect((navigator as NavigatorWithConnection).connection).toMatchObject( - mockValues, - ); + expect(navigator.connection).toMatchObject(mockValues); }); }); diff --git a/packages/performance/src/utilities.ts b/packages/performance/src/utilities.ts index beae705510..f39812d68a 100644 --- a/packages/performance/src/utilities.ts +++ b/packages/performance/src/utilities.ts @@ -63,7 +63,7 @@ export function withNavigation( const {pushState, replaceState} = window.history; let currentPathname: string | undefined = window.location.pathname; - const handlePushOrReplace = (url: string | null | undefined) => { + const handlePushOrReplace = (url: string | URL | null | undefined) => { const pathname = url ? new URL(url, window.location.href).pathname : undefined; diff --git a/packages/polyfills/package.json b/packages/polyfills/package.json index aec2446cd1..800dac96a4 100644 --- a/packages/polyfills/package.json +++ b/packages/polyfills/package.json @@ -88,7 +88,6 @@ "node": "^14.17.0 || >=16.0.0" }, "dependencies": { - "@shopify/useful-types": "^5.1.1", "caniuse-api": "^3.0.0", "core-js": "^3.13.0", "formdata-polyfill": "^3.0.20", diff --git a/packages/polyfills/src/idle-callback.browser.ts b/packages/polyfills/src/idle-callback.browser.ts index 36e86ccb3b..9bae01bd66 100644 --- a/packages/polyfills/src/idle-callback.browser.ts +++ b/packages/polyfills/src/idle-callback.browser.ts @@ -1,23 +1,7 @@ -// reference: https://developers.google.com/web/updates/2015/08/using-requestidlecallback -import {ExtendedWindow} from '@shopify/useful-types'; - -interface IdleCallback { - (params: CallbackParams): void; -} - -interface CallbackParams { - didTimeout: boolean; - timeRemaining(): number; -} -interface PolyfilledWindow extends Window { - requestIdleCallback(cb: IdleCallback): any; - cancelIdleCallback(): any; -} - // According to the spec the max value timeRemaining can return is 50 const MAX_TIME_REMAINING = 50; -function fallbackQueueingFunction(cb: IdleCallback) { +function fallbackQueueingFunction(cb: IdleRequestCallback) { const start = Date.now(); return setImmediate(() => { cb({ @@ -29,10 +13,9 @@ function fallbackQueueingFunction(cb: IdleCallback) { }); } -const extendedWindow = window as ExtendedWindow; +window.requestIdleCallback = + window.requestIdleCallback || fallbackQueueingFunction; -extendedWindow.requestIdleCallback = - extendedWindow.requestIdleCallback || fallbackQueueingFunction; +window.cancelIdleCallback = window.cancelIdleCallback || window.clearImmediate; -extendedWindow.cancelIdleCallback = - extendedWindow.cancelIdleCallback || (window as any).clearImmediate; +export {}; diff --git a/packages/polyfills/src/idle-callback.jest.ts b/packages/polyfills/src/idle-callback.jest.ts index c968ede0d7..00d6b13d9c 100644 --- a/packages/polyfills/src/idle-callback.jest.ts +++ b/packages/polyfills/src/idle-callback.jest.ts @@ -1,24 +1,7 @@ -// reference: https://developers.google.com/web/updates/2015/08/using-requestidlecallback -import {ExtendedWindow} from '@shopify/useful-types'; - -interface IdleCallback { - (params: CallbackParams): void; -} - -interface CallbackParams { - didTimeout: boolean; - timeRemaining(): number; -} - -interface PolyfilledWindow extends Window { - requestIdleCallback(cb: IdleCallback): any; - cancelIdleCallback(): any; -} - // According to the spec the max value timeRemaining can return is 50 const MAX_TIME_REMAINING = 50; -function fallbackQueueingFunction(cb: IdleCallback) { +function fallbackQueueingFunction(cb: IdleRequestCallback) { const start = Date.now(); return setImmediate(() => { cb({ @@ -31,11 +14,11 @@ function fallbackQueueingFunction(cb: IdleCallback) { } if (typeof window !== 'undefined') { - const extendedWindow = window as ExtendedWindow; + window.requestIdleCallback = + window.requestIdleCallback || fallbackQueueingFunction; - extendedWindow.requestIdleCallback = - extendedWindow.requestIdleCallback || fallbackQueueingFunction; - - extendedWindow.cancelIdleCallback = - extendedWindow.cancelIdleCallback || (window as any).clearImmediate; + window.cancelIdleCallback = + window.cancelIdleCallback || window.clearImmediate; } + +export {}; diff --git a/packages/polyfills/tsconfig.json b/packages/polyfills/tsconfig.json index c892a61d0f..79521456e9 100644 --- a/packages/polyfills/tsconfig.json +++ b/packages/polyfills/tsconfig.json @@ -10,6 +10,5 @@ "../../config/typescript/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx" - ], - "references": [{"path": "../useful-types"}] + ] } diff --git a/packages/react-async/src/Prefetcher.tsx b/packages/react-async/src/Prefetcher.tsx index 937a5042c3..a2aae40b15 100644 --- a/packages/react-async/src/Prefetcher.tsx +++ b/packages/react-async/src/Prefetcher.tsx @@ -12,7 +12,7 @@ interface State { } interface NavigatorWithConnection extends Navigator { - connection: {saveData: boolean}; + connection: Navigator['connection'] & {saveData: boolean}; } export const INTENTION_DELAY_MS = 150; diff --git a/packages/react-form-state/src/components/List.tsx b/packages/react-form-state/src/components/List.tsx index 1274d5683b..916af6eb67 100644 --- a/packages/react-form-state/src/components/List.tsx +++ b/packages/react-form-state/src/components/List.tsx @@ -52,7 +52,7 @@ export default class List extends React.PureComponent< }); } - private handleChange = ({ + private handleChange = ({ index, key, }: { diff --git a/packages/react-form-state/src/utilities.ts b/packages/react-form-state/src/utilities.ts index 5100ec7806..493fc86069 100644 --- a/packages/react-form-state/src/utilities.ts +++ b/packages/react-form-state/src/utilities.ts @@ -6,10 +6,10 @@ export {isEqual}; export function mapObject( input: Input, - mapper: (value: any, key: keyof Input) => any, + mapper: (value: any, key: string & keyof Input) => any, ) { return Object.entries(input).reduce((accumulator: any, [key, value]) => { - accumulator[key] = mapper(value, key as keyof Input); + accumulator[key] = mapper(value, key as string & keyof Input); return accumulator; }, {}) as Output; } diff --git a/packages/react-graphql/src/hooks/query.ts b/packages/react-graphql/src/hooks/query.ts index 35d3f4a960..22f5763838 100644 --- a/packages/react-graphql/src/hooks/query.ts +++ b/packages/react-graphql/src/hooks/query.ts @@ -147,7 +147,7 @@ export default function useQuery< queryObservable?.resetLastResults(); subscribe(); } finally { - Object.assign(queryObservable, {lastError, lastResult}); + Object.assign(queryObservable || {}, {lastError, lastResult}); } if (!hasOwnProperty.call(error, 'graphQLErrors')) { diff --git a/yarn.lock b/yarn.lock index e3c3f22750..accf9dad5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14352,10 +14352,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^4.3.5: - version "4.3.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4" - integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA== +typescript@^4.3.5, typescript@~4.7.4: + version "4.7.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" + integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== ua-parser-js@^0.7.30: version "0.7.30"