From d78ffea8c6e36b84f8f45c70e9a11c41d1526aa0 Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Wed, 7 Sep 2022 10:04:27 +0200 Subject: [PATCH 1/2] Update react --- examples/with-context-api/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/with-context-api/package.json b/examples/with-context-api/package.json index 349de02f4d8..bf29745bfe2 100644 --- a/examples/with-context-api/package.json +++ b/examples/with-context-api/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" } } From 80040d127e589430cbc3737246b7e583f9b9e723 Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Wed, 7 Sep 2022 10:20:31 +0200 Subject: [PATCH 2/2] Migrate to typescript --- .../with-context-api/components/Counter.js | 31 ---------- .../with-context-api/components/Counter.tsx | 57 +++++++++++++++++++ examples/with-context-api/package.json | 5 ++ .../pages/{_app.js => _app.tsx} | 5 +- .../pages/{about.js => about.tsx} | 5 +- .../pages/{index.js => index.tsx} | 5 +- examples/with-context-api/tsconfig.json | 20 +++++++ 7 files changed, 90 insertions(+), 38 deletions(-) delete mode 100644 examples/with-context-api/components/Counter.js create mode 100644 examples/with-context-api/components/Counter.tsx rename examples/with-context-api/pages/{_app.js => _app.tsx} (58%) rename examples/with-context-api/pages/{about.js => about.tsx} (77%) rename examples/with-context-api/pages/{index.js => index.tsx} (77%) create mode 100644 examples/with-context-api/tsconfig.json diff --git a/examples/with-context-api/components/Counter.js b/examples/with-context-api/components/Counter.js deleted file mode 100644 index 19911d6eabc..00000000000 --- a/examples/with-context-api/components/Counter.js +++ /dev/null @@ -1,31 +0,0 @@ -import { useReducer, useContext, createContext } from 'react' - -const CounterStateContext = createContext() -const CounterDispatchContext = createContext() - -const reducer = (state, action) => { - switch (action.type) { - case 'INCREASE': - return state + 1 - case 'DECREASE': - return state - 1 - case 'INCREASE_BY': - return state + action.payload - default: - throw new Error(`Unknown action: ${action.type}`) - } -} - -export const CounterProvider = ({ children }) => { - const [state, dispatch] = useReducer(reducer, 0) - return ( - - - {children} - - - ) -} - -export const useCount = () => useContext(CounterStateContext) -export const useDispatchCount = () => useContext(CounterDispatchContext) diff --git a/examples/with-context-api/components/Counter.tsx b/examples/with-context-api/components/Counter.tsx new file mode 100644 index 00000000000..0f8eae33512 --- /dev/null +++ b/examples/with-context-api/components/Counter.tsx @@ -0,0 +1,57 @@ +import { + useReducer, + useContext, + createContext, + ReactNode, + Dispatch, +} from 'react' + +type CounterState = number +type CounterAction = + | { + type: 'INCREASE' | 'DECREASE' + } + | { + type: 'INCREASE_BY' + payload: number + } + +const CounterStateContext = createContext(0) +const CounterDispatchContext = createContext>( + () => null +) + +const reducer = (state: CounterState, action: CounterAction) => { + switch (action.type) { + case 'INCREASE': + return state + 1 + case 'DECREASE': + return state - 1 + case 'INCREASE_BY': + return state + action.payload + default: + throw new Error(`Unknown action: ${JSON.stringify(action)}`) + } +} + +type CounterProviderProps = { + children: ReactNode + initialValue?: number +} + +export const CounterProvider = ({ + children, + initialValue = 0, +}: CounterProviderProps) => { + const [state, dispatch] = useReducer(reducer, initialValue) + return ( + + + {children} + + + ) +} + +export const useCount = () => useContext(CounterStateContext) +export const useDispatchCount = () => useContext(CounterDispatchContext) diff --git a/examples/with-context-api/package.json b/examples/with-context-api/package.json index bf29745bfe2..46775cdf804 100644 --- a/examples/with-context-api/package.json +++ b/examples/with-context-api/package.json @@ -9,5 +9,10 @@ "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "18.7.15", + "@types/react": "16.9.17", + "typescript": "4.8.2" } } diff --git a/examples/with-context-api/pages/_app.js b/examples/with-context-api/pages/_app.tsx similarity index 58% rename from examples/with-context-api/pages/_app.js rename to examples/with-context-api/pages/_app.tsx index 4fe390a79d9..6f852027a9e 100644 --- a/examples/with-context-api/pages/_app.js +++ b/examples/with-context-api/pages/_app.tsx @@ -1,11 +1,10 @@ +import type { AppProps } from 'next/app' import { CounterProvider } from '../components/Counter' -function MyApp({ Component, pageProps }) { +export default function MyApp({ Component, pageProps }: AppProps) { return ( ) } - -export default MyApp diff --git a/examples/with-context-api/pages/about.js b/examples/with-context-api/pages/about.tsx similarity index 77% rename from examples/with-context-api/pages/about.js rename to examples/with-context-api/pages/about.tsx index 481c9c04815..f45d699aabf 100644 --- a/examples/with-context-api/pages/about.js +++ b/examples/with-context-api/pages/about.tsx @@ -1,3 +1,4 @@ +import type { MouseEvent } from 'react' import Link from 'next/link' import { useCount, useDispatchCount } from '../components/Counter' @@ -5,11 +6,11 @@ const AboutPage = () => { const count = useCount() const dispatch = useDispatchCount() - const handleIncrease = (event) => + const handleIncrease = (event: MouseEvent) => dispatch({ type: 'INCREASE', }) - const handleIncrease15 = (event) => + const handleIncrease15 = (event: MouseEvent) => dispatch({ type: 'INCREASE_BY', payload: 15, diff --git a/examples/with-context-api/pages/index.js b/examples/with-context-api/pages/index.tsx similarity index 77% rename from examples/with-context-api/pages/index.js rename to examples/with-context-api/pages/index.tsx index 7e26a78c30a..585aacff1c4 100644 --- a/examples/with-context-api/pages/index.js +++ b/examples/with-context-api/pages/index.tsx @@ -1,3 +1,4 @@ +import type { MouseEvent } from 'react' import Link from 'next/link' import { useCount, useDispatchCount } from '../components/Counter' @@ -5,11 +6,11 @@ const IndexPage = () => { const count = useCount() const dispatch = useDispatchCount() - const handleIncrease = (event) => + const handleIncrease = (event: MouseEvent) => dispatch({ type: 'INCREASE', }) - const handleDecrease = (event) => + const handleDecrease = (event: MouseEvent) => dispatch({ type: 'DECREASE', }) diff --git a/examples/with-context-api/tsconfig.json b/examples/with-context-api/tsconfig.json new file mode 100644 index 00000000000..ccaea0672d6 --- /dev/null +++ b/examples/with-context-api/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "moduleResolution": "node", + "module": "esnext", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}