From 53de0f721f25c11b33169b4550c4707e6a1fbf31 Mon Sep 17 00:00:00 2001 From: Felix Leupold Date: Thu, 26 May 2022 13:30:00 +0200 Subject: [PATCH] [Beta] Upgrade React Types & Fix resulting type issues (#4694) * upgrade react types * fix type errors after upgrade --- beta/package.json | 4 ++-- beta/src/components/Layout/useMediaQuery.tsx | 2 +- .../components/MDX/Sandpack/DownloadButton.tsx | 3 ++- .../components/MDX/Sandpack/SandpackRoot.tsx | 2 +- beta/src/pages/_app.tsx | 4 +++- beta/src/utils/toCommaSeparatedList.tsx | 8 ++++---- beta/yarn.lock | 18 +++++++++--------- 7 files changed, 22 insertions(+), 19 deletions(-) diff --git a/beta/package.json b/beta/package.json index 9a02d087..68e2f9b2 100644 --- a/beta/package.json +++ b/beta/package.json @@ -48,8 +48,8 @@ "@types/mdx-js__react": "^1.5.2", "@types/node": "^14.6.4", "@types/parse-numeric-range": "^0.0.1", - "@types/react": "^16.9.46", - "@types/react-dom": "^16.9.8", + "@types/react": "^18.0.9", + "@types/react-dom": "^18.0.5", "@typescript-eslint/eslint-plugin": "2.x", "@typescript-eslint/parser": "2.x", "asyncro": "^3.0.0", diff --git a/beta/src/components/Layout/useMediaQuery.tsx b/beta/src/components/Layout/useMediaQuery.tsx index db1e6188..e05a2aeb 100644 --- a/beta/src/components/Layout/useMediaQuery.tsx +++ b/beta/src/components/Layout/useMediaQuery.tsx @@ -7,7 +7,7 @@ import {useState, useCallback, useEffect} from 'react'; const useMediaQuery = (width: number) => { const [targetReached, setTargetReached] = useState(false); - const updateTarget = useCallback((e) => { + const updateTarget = useCallback((e: MediaQueryListEvent) => { if (e.matches) { setTargetReached(true); } else { diff --git a/beta/src/components/MDX/Sandpack/DownloadButton.tsx b/beta/src/components/MDX/Sandpack/DownloadButton.tsx index 6972845e..137bcee1 100644 --- a/beta/src/components/MDX/Sandpack/DownloadButton.tsx +++ b/beta/src/components/MDX/Sandpack/DownloadButton.tsx @@ -12,6 +12,7 @@ let supportsImportMap: boolean | void; function useSupportsImportMap() { function subscribe() { // It never updates. + return () => {}; } function getCurrentValue() { if (supportsImportMap === undefined) { @@ -24,7 +25,7 @@ function useSupportsImportMap() { function getServerSnapshot() { return false; } - // @ts-ignore + return React.useSyncExternalStore( subscribe, getCurrentValue, diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index a4df485b..831eb81a 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -11,7 +11,7 @@ import {createFileMap} from './createFileMap'; import type {SandpackSetup} from '@codesandbox/sandpack-react'; type SandpackProps = { - children: React.ReactChildren; + children: React.ReactNode; autorun?: boolean; setup?: SandpackSetup; showDevTools?: boolean; diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index 9f867b63..fa99018f 100644 --- a/beta/src/pages/_app.tsx +++ b/beta/src/pages/_app.tsx @@ -12,7 +12,9 @@ import '../styles/index.css'; import '../styles/sandpack.css'; import '@codesandbox/sandpack-react/dist/index.css'; -const EmptyAppShell: React.FC = ({children}) => <>{children}; +const EmptyAppShell = ({children}: {children: React.ReactNode}) => ( + <>{children} +); if (typeof window !== 'undefined') { if (process.env.NODE_ENV === 'production') { diff --git a/beta/src/utils/toCommaSeparatedList.tsx b/beta/src/utils/toCommaSeparatedList.tsx index f552d50f..341e8a5a 100644 --- a/beta/src/utils/toCommaSeparatedList.tsx +++ b/beta/src/utils/toCommaSeparatedList.tsx @@ -4,18 +4,18 @@ import React from 'react'; -const addString = (list: React.ReactNodeArray, string: string) => +const addString = (list: React.ReactNode[], string: string) => list.push({string}); function toCommaSeparatedList( array: Item[], - renderCallback: (item: Item, index: number) => void -): Array { + renderCallback: (item: Item, index: number) => React.ReactNode +): React.ReactNode[] { if (array.length <= 1) { return array.map(renderCallback); } - const list: any = []; + const list: React.ReactNode[] = []; array.forEach((item, index) => { if (index === array.length - 1) { diff --git a/beta/yarn.lock b/beta/yarn.lock index 31ea0a9e..a149894d 100644 --- a/beta/yarn.lock +++ b/beta/yarn.lock @@ -912,12 +912,12 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== -"@types/react-dom@^16.9.8": - version "16.9.14" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.14.tgz#674b8f116645fe5266b40b525777fc6bb8eb3bcd" - integrity sha512-FIX2AVmPTGP30OUJ+0vadeIFJJ07Mh1m+U0rxfgyW34p3rTlXI+nlenvAxNn4BP36YyI9IJ/+UJ7Wu22N1pI7A== +"@types/react-dom@^18.0.5": + version "18.0.5" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a" + integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA== dependencies: - "@types/react" "^16" + "@types/react" "*" "@types/react@*": version "17.0.38" @@ -928,10 +928,10 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@^16", "@types/react@^16.9.46": - version "16.14.21" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a" - integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg== +"@types/react@^18.0.9": + version "18.0.9" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878" + integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw== dependencies: "@types/prop-types" "*" "@types/scheduler" "*"