From 7a930933326f6ec247b55bb6815a7168f0f66750 Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Tue, 16 Aug 2022 12:29:48 +0200 Subject: [PATCH] [Docs] Update with-loading example (#39646) Changelog Updated dependencies Migrated to Typescript Use CSS from npm module Documentation / Examples Make sure the linting passes by running pnpm lint The examples guidelines are followed from our contributing doc --- examples/with-loading/package.json | 10 ++- .../with-loading/pages/{_app.js => _app.tsx} | 8 +- .../pages/{about.js => about.tsx} | 6 +- .../pages/{forever.js => forever.tsx} | 6 +- examples/with-loading/pages/index.js | 3 - examples/with-loading/pages/index.tsx | 3 + examples/with-loading/public/nprogress.css | 81 ------------------- examples/with-loading/tsconfig.json | 20 +++++ 8 files changed, 42 insertions(+), 95 deletions(-) rename examples/with-loading/pages/{_app.js => _app.tsx} (86%) rename examples/with-loading/pages/{about.js => about.tsx} (63%) rename examples/with-loading/pages/{forever.js => forever.tsx} (59%) delete mode 100644 examples/with-loading/pages/index.js create mode 100644 examples/with-loading/pages/index.tsx delete mode 100644 examples/with-loading/public/nprogress.css create mode 100644 examples/with-loading/tsconfig.json diff --git a/examples/with-loading/package.json b/examples/with-loading/package.json index 45a639356442..f747dbd68289 100644 --- a/examples/with-loading/package.json +++ b/examples/with-loading/package.json @@ -8,7 +8,13 @@ "dependencies": { "next": "latest", "nprogress": "^0.2.0", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "18.7.5", + "@types/nprogress": "0.2.0", + "@types/react": "18.0.17", + "typescript": "4.7.4" } } diff --git a/examples/with-loading/pages/_app.js b/examples/with-loading/pages/_app.tsx similarity index 86% rename from examples/with-loading/pages/_app.js rename to examples/with-loading/pages/_app.tsx index 93ccb4a38dc1..daeca837327d 100644 --- a/examples/with-loading/pages/_app.js +++ b/examples/with-loading/pages/_app.tsx @@ -1,17 +1,19 @@ +import type { AppProps } from 'next/app' import { useEffect } from 'react' import Link from 'next/link' import { useRouter } from 'next/router' import NProgress from 'nprogress' -import '../public/nprogress.css' +import 'nprogress/nprogress.css' -export default function App({ Component, pageProps }) { +export default function App({ Component, pageProps }: AppProps) { const router = useRouter() useEffect(() => { - const handleStart = (url) => { + const handleStart = (url: string) => { console.log(`Loading: ${url}`) NProgress.start() } + const handleStop = () => { NProgress.done() } diff --git a/examples/with-loading/pages/about.js b/examples/with-loading/pages/about.tsx similarity index 63% rename from examples/with-loading/pages/about.js rename to examples/with-loading/pages/about.tsx index cc2cf5297fe2..7d710f3fba4e 100644 --- a/examples/with-loading/pages/about.js +++ b/examples/with-loading/pages/about.tsx @@ -1,5 +1,3 @@ -const AboutPage = () =>

This is about Next.js!

- export async function getServerSideProps() { await new Promise((resolve) => { setTimeout(resolve, 500) @@ -7,4 +5,6 @@ export async function getServerSideProps() { return { props: {} } } -export default AboutPage +export default function AboutPage() { + return

This is about Next.js!

+} diff --git a/examples/with-loading/pages/forever.js b/examples/with-loading/pages/forever.tsx similarity index 59% rename from examples/with-loading/pages/forever.js rename to examples/with-loading/pages/forever.tsx index cd4ee9365c51..aa959d39b751 100644 --- a/examples/with-loading/pages/forever.js +++ b/examples/with-loading/pages/forever.tsx @@ -1,5 +1,3 @@ -const ForeverPage = () =>

This page was rendered for a while!

- export async function getServerSideProps() { await new Promise((resolve) => { setTimeout(resolve, 3000) @@ -7,4 +5,6 @@ export async function getServerSideProps() { return { props: {} } } -export default ForeverPage +export default function ForeverPage() { + return

This page was rendered for a while!

+} diff --git a/examples/with-loading/pages/index.js b/examples/with-loading/pages/index.js deleted file mode 100644 index 5070538cdf80..000000000000 --- a/examples/with-loading/pages/index.js +++ /dev/null @@ -1,3 +0,0 @@ -const IndexPage = () =>

Hello Next.js!

- -export default IndexPage diff --git a/examples/with-loading/pages/index.tsx b/examples/with-loading/pages/index.tsx new file mode 100644 index 000000000000..967b70f6e16b --- /dev/null +++ b/examples/with-loading/pages/index.tsx @@ -0,0 +1,3 @@ +export default function IndexPage() { + return

Hello Next.js!

+} diff --git a/examples/with-loading/public/nprogress.css b/examples/with-loading/public/nprogress.css deleted file mode 100644 index 3619227707fc..000000000000 --- a/examples/with-loading/public/nprogress.css +++ /dev/null @@ -1,81 +0,0 @@ -/* Make clicks pass-through */ -#nprogress { - pointer-events: none; -} - -#nprogress .bar { - background: #29d; - - position: fixed; - z-index: 1031; - top: 0; - left: 0; - - width: 100%; - height: 2px; -} - -/* Fancy blur effect */ -#nprogress .peg { - display: block; - position: absolute; - right: 0px; - width: 100px; - height: 100%; - box-shadow: 0 0 10px #29d, 0 0 5px #29d; - opacity: 1; - - -webkit-transform: rotate(3deg) translate(0px, -4px); - -ms-transform: rotate(3deg) translate(0px, -4px); - transform: rotate(3deg) translate(0px, -4px); -} - -/* Remove these to get rid of the spinner */ -#nprogress .spinner { - display: block; - position: fixed; - z-index: 1031; - top: 15px; - right: 15px; -} - -#nprogress .spinner-icon { - width: 18px; - height: 18px; - box-sizing: border-box; - - border: solid 2px transparent; - border-top-color: #29d; - border-left-color: #29d; - border-radius: 50%; - - -webkit-animation: nprogress-spinner 400ms linear infinite; - animation: nprogress-spinner 400ms linear infinite; -} - -.nprogress-custom-parent { - overflow: hidden; - position: relative; -} - -.nprogress-custom-parent #nprogress .spinner, -.nprogress-custom-parent #nprogress .bar { - position: absolute; -} - -@-webkit-keyframes nprogress-spinner { - 0% { - -webkit-transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - } -} -@keyframes nprogress-spinner { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/examples/with-loading/tsconfig.json b/examples/with-loading/tsconfig.json new file mode 100644 index 000000000000..50bcb22f653d --- /dev/null +++ b/examples/with-loading/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, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}