From 8426f13713c6a1ac498562479d864633cf355c6d Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 3 Sep 2020 07:27:08 -0500 Subject: [PATCH 1/4] Update to show build indicator while re-fetching GS(S)P data in dev (#16789) This is a follow-up to https://github.com/vercel/next.js/pull/16744 which shows the build/activity indicator while the data is being re-fetched to let the user know the re-fetching is occurring Closes: https://github.com/vercel/next.js/issues/16790 --- packages/next/client/dev/dev-build-watcher.js | 7 +++- packages/next/client/next-dev.js | 36 +++++++++++------ .../pages/gsp-blog/[post].js | 6 ++- .../test/index.test.js | 40 +++++++++++++++++++ 4 files changed, 74 insertions(+), 15 deletions(-) diff --git a/packages/next/client/dev/dev-build-watcher.js b/packages/next/client/dev/dev-build-watcher.js index 682ddc1c91e92..6b37a4f71a4f0 100644 --- a/packages/next/client/dev/dev-build-watcher.js +++ b/packages/next/client/dev/dev-build-watcher.js @@ -1,6 +1,6 @@ import { getEventSourceWrapper } from './error-overlay/eventsource' -export default function initializeBuildWatcher() { +export default function initializeBuildWatcher(toggleCallback) { const shadowHost = document.createElement('div') shadowHost.id = '__next-build-watcher' // Make sure container is fixed and on a high zIndex so it shows @@ -52,7 +52,8 @@ export default function initializeBuildWatcher() { }) function handleMessage(event) { - const obj = JSON.parse(event.data) + const obj = + typeof event === 'string' ? { action: event } : JSON.parse(event.data) // eslint-disable-next-line default-case switch (obj.action) { @@ -75,6 +76,8 @@ export default function initializeBuildWatcher() { } } + toggleCallback(handleMessage) + function updateContainer() { if (isBuilding) { container.classList.add(`${prefix}building`) diff --git a/packages/next/client/next-dev.js b/packages/next/client/next-dev.js index 3d7b64d7ba468..1b6a1a3e307a2 100644 --- a/packages/next/client/next-dev.js +++ b/packages/next/client/next-dev.js @@ -33,6 +33,8 @@ initNext({ webpackHMR }) .then(({ renderCtx, render }) => { initOnDemandEntries({ assetPrefix: prefix }) + let buildIndicatorHandler = () => {} + function devPagesManifestListener(event) { if (event.data.indexOf('devPagesManifest') !== -1) { fetch(`${prefix}/_next/static/development/_devPagesManifest.json`) @@ -50,24 +52,34 @@ initNext({ webpackHMR }) if (pages.includes(router.pathname)) { console.log('Refreshing page data due to server-side change') - router.replace( - router.pathname + - '?' + - String( - querystring.assign( - querystring.urlQueryToSearchParams(router.query), - new URLSearchParams(location.search) - ) - ), - router.asPath - ) + buildIndicatorHandler('building') + + const clearIndicator = () => buildIndicatorHandler('built') + + router + .replace( + router.pathname + + '?' + + String( + querystring.assign( + querystring.urlQueryToSearchParams(router.query), + new URLSearchParams(location.search) + ) + ), + router.asPath + ) + .finally(clearIndicator) } } } devPagesManifestListener.unfiltered = true getEventSourceWrapper({}).addMessageListener(devPagesManifestListener) - if (process.env.__NEXT_BUILD_INDICATOR) initializeBuildWatcher() + if (process.env.__NEXT_BUILD_INDICATOR) { + initializeBuildWatcher((handler) => { + buildIndicatorHandler = handler + }) + } if ( process.env.__NEXT_PRERENDER_INDICATOR && // disable by default in electron diff --git a/test/integration/gssp-ssr-change-reloading/pages/gsp-blog/[post].js b/test/integration/gssp-ssr-change-reloading/pages/gsp-blog/[post].js index 187308da75654..2077feda1dcef 100644 --- a/test/integration/gssp-ssr-change-reloading/pages/gsp-blog/[post].js +++ b/test/integration/gssp-ssr-change-reloading/pages/gsp-blog/[post].js @@ -13,9 +13,13 @@ export default function Gsp(props) { ) } -export const getStaticProps = ({ params }) => { +export const getStaticProps = async ({ params }) => { const count = 1 + if (params.post === 'second') { + await new Promise((resolve) => setTimeout(resolve, 2000)) + } + return { props: { count, diff --git a/test/integration/gssp-ssr-change-reloading/test/index.test.js b/test/integration/gssp-ssr-change-reloading/test/index.test.js index c6bfb6e58b4b9..1701a47de9e15 100644 --- a/test/integration/gssp-ssr-change-reloading/test/index.test.js +++ b/test/integration/gssp-ssr-change-reloading/test/index.test.js @@ -10,6 +10,19 @@ const appDir = join(__dirname, '..') let appPort let app +const installCheckVisible = (browser) => { + return browser.eval(`(function() { + window.checkInterval = setInterval(function() { + let watcherDiv = document.querySelector('#__next-build-watcher') + watcherDiv = watcherDiv.shadowRoot || watcherDiv + window.showedBuilder = window.showedBuilder || ( + watcherDiv.querySelector('div').className.indexOf('visible') > -1 + ) + if (window.showedBuilder) clearInterval(window.checkInterval) + }, 50) + })()`) +} + describe('GS(S)P Server-Side Change Reloading', () => { beforeAll(async () => { appPort = await findPort() @@ -62,6 +75,33 @@ describe('GS(S)P Server-Side Change Reloading', () => { ) }) + it('should show indicator when re-fetching data', async () => { + const browser = await webdriver(appPort, '/gsp-blog/second') + await installCheckVisible(browser) + await browser.eval(() => (window.beforeChange = 'hi')) + + const props = JSON.parse(await browser.elementByCss('#props').text()) + expect(props.count).toBe(1) + + const page = new File(join(appDir, 'pages/gsp-blog/[post].js')) + page.replace('count = 1', 'count = 2') + + await check( + async () => + JSON.parse(await browser.elementByCss('#props').text()).count + '', + '2' + ) + expect(await browser.eval(() => window.beforeChange)).toBe('hi') + expect(await browser.eval(() => window.showedBuilder)).toBe(true) + page.restore() + + await check( + async () => + JSON.parse(await browser.elementByCss('#props').text()).count + '', + '1' + ) + }) + it('should update page when getStaticPaths is changed only', async () => { const browser = await webdriver(appPort, '/gsp-blog/first') await browser.eval(() => (window.beforeChange = 'hi')) From 4048d29896b99552a79eca101fccbddab6ea9d61 Mon Sep 17 00:00:00 2001 From: Gianmarco Date: Thu, 3 Sep 2020 18:08:54 +0200 Subject: [PATCH 2/4] Minor spelling fix in zones example's readme (#16822) --- examples/with-zones/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-zones/README.md b/examples/with-zones/README.md index 2b7f6c57bba44..a5f1ce7f4a8f4 100644 --- a/examples/with-zones/README.md +++ b/examples/with-zones/README.md @@ -1,6 +1,6 @@ # Using multiple zones -With Next.js you can use multiple apps as a single app using it's [multi-zones feature](https://nextjs.org/docs/advanced-features/multi-zones). This is an example showing how to use it. +With Next.js you can use multiple apps as a single app using its [multi-zones feature](https://nextjs.org/docs/advanced-features/multi-zones). This is an example showing how to use it. - All pages should be unique across zones. For example, the `home` app should not have a `pages/blog/index.js` page. - The `blog` app sets [`assetPrefix`](https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix) so that generated JS bundles are within the `/blog` subfolder. From 0e843e6001a0be20876872e5466f7ec7799bbf7d Mon Sep 17 00:00:00 2001 From: Pedro Duarte Date: Thu, 3 Sep 2020 19:38:13 +0200 Subject: [PATCH 3/4] Update `with-stitches` example (#16827) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hi 👋 [Stitches](https://stitches.dev) `v0.0.1` beta was recently released. This PR updates the existing examples to the latest packages and API. Notes: - Remove `with-stitches-styled` example, that's no longer needed - Update `with-stitches` example - Update dependency - Example done with Typescript - Updated README Thanks ✌️ ![CleanShot 2020-09-03 at 18 23 09@2x](https://user-images.githubusercontent.com/372831/92141867-52d98d80-ee13-11ea-91ed-001cd46989f1.jpg) --- examples/with-stitches-styled/.gitignore | 34 ------- examples/with-stitches-styled/README.md | 21 ----- examples/with-stitches-styled/css/index.js | 12 --- examples/with-stitches-styled/package.json | 22 ----- examples/with-stitches-styled/pages/index.js | 9 -- .../with-stitches-styled/public/favicon.ico | Bin 15086 -> 0 bytes examples/with-stitches-styled/public/zeit.svg | 10 --- examples/with-stitches/README.md | 2 +- .../with-stitches/components/StitchesLogo.tsx | 50 +++++++++++ examples/with-stitches/css/index.js | 9 -- examples/with-stitches/next-env.d.ts | 2 + examples/with-stitches/package.json | 15 ++-- examples/with-stitches/pages/_document.js | 32 ------- .../pages/_document.tsx} | 17 ++-- examples/with-stitches/pages/index.js | 13 --- examples/with-stitches/pages/index.tsx | 53 +++++++++++ examples/with-stitches/public/zeit.svg | 10 --- examples/with-stitches/stitches.config.ts | 83 ++++++++++++++++++ examples/with-stitches/tsconfig.json | 19 ++++ 19 files changed, 226 insertions(+), 187 deletions(-) delete mode 100644 examples/with-stitches-styled/.gitignore delete mode 100644 examples/with-stitches-styled/README.md delete mode 100644 examples/with-stitches-styled/css/index.js delete mode 100644 examples/with-stitches-styled/package.json delete mode 100644 examples/with-stitches-styled/pages/index.js delete mode 100644 examples/with-stitches-styled/public/favicon.ico delete mode 100644 examples/with-stitches-styled/public/zeit.svg create mode 100644 examples/with-stitches/components/StitchesLogo.tsx delete mode 100644 examples/with-stitches/css/index.js create mode 100644 examples/with-stitches/next-env.d.ts delete mode 100644 examples/with-stitches/pages/_document.js rename examples/{with-stitches-styled/pages/_document.js => with-stitches/pages/_document.tsx} (52%) delete mode 100644 examples/with-stitches/pages/index.js create mode 100644 examples/with-stitches/pages/index.tsx delete mode 100644 examples/with-stitches/public/zeit.svg create mode 100644 examples/with-stitches/stitches.config.ts create mode 100644 examples/with-stitches/tsconfig.json diff --git a/examples/with-stitches-styled/.gitignore b/examples/with-stitches-styled/.gitignore deleted file mode 100644 index 1437c53f70bc2..0000000000000 --- a/examples/with-stitches-styled/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/examples/with-stitches-styled/README.md b/examples/with-stitches-styled/README.md deleted file mode 100644 index 038bf0e3c25e2..0000000000000 --- a/examples/with-stitches-styled/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# Stitches (Styled) Example - -This example shows how to use the [Stitches CSS-in-JS Library](https://github.com/christianalfoni/stitches). - -## Deploy your own - -Deploy the example using [Vercel](https://vercel.com): - -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-stitches-styled) - -## How to use - -Execute [Create Next App](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npx create-next-app --example with-stitches-styled -# or -yarn create next-app --example with-stitches-styled -``` - -Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-stitches-styled/css/index.js b/examples/with-stitches-styled/css/index.js deleted file mode 100644 index 82ca04e9d4b7b..0000000000000 --- a/examples/with-stitches-styled/css/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import { createCss } from '@stitches/css' -import { createStyled } from '@stitches/styled' - -export const css = createCss({ - tokens: { - colors: { - RED: 'tomato', - }, - }, -}) - -export const styled = createStyled(css) diff --git a/examples/with-stitches-styled/package.json b/examples/with-stitches-styled/package.json deleted file mode 100644 index a8b9179cb9ecb..0000000000000 --- a/examples/with-stitches-styled/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "with-stitches-styled", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "@stitches/css": "3.0.3", - "@stitches/styled": "3.0.3", - "next": "9.3.5", - "react": "16.13.1", - "react-dom": "16.13.1" - }, - "devDependencies": { - "@types/react": "^16.9.34", - "typescript": "^3.8.3" - }, - "license": "MIT" -} diff --git a/examples/with-stitches-styled/pages/index.js b/examples/with-stitches-styled/pages/index.js deleted file mode 100644 index 46a2e51a0daf8..0000000000000 --- a/examples/with-stitches-styled/pages/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import { styled } from '../css' - -const Header = styled.h1({ - color: 'RED', -}) - -export default function Home() { - return
Hello world
-} diff --git a/examples/with-stitches-styled/public/favicon.ico b/examples/with-stitches-styled/public/favicon.ico deleted file mode 100644 index 4965832f2c9b0605eaa189b7c7fb11124d24e48a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*- - - - - - - - - - diff --git a/examples/with-stitches/README.md b/examples/with-stitches/README.md index 11cccb5205f05..ff062046b175a 100644 --- a/examples/with-stitches/README.md +++ b/examples/with-stitches/README.md @@ -1,6 +1,6 @@ # Stitches Example -This example shows how to use the [Stitches CSS-in-JS Library](https://github.com/christianalfoni/stitches). +This example shows how to use the [Stitches CSS-in-JS Library](https://github.com/modulz/stitches). ## Deploy your own diff --git a/examples/with-stitches/components/StitchesLogo.tsx b/examples/with-stitches/components/StitchesLogo.tsx new file mode 100644 index 0000000000000..a08496120e827 --- /dev/null +++ b/examples/with-stitches/components/StitchesLogo.tsx @@ -0,0 +1,50 @@ +const StitchesLogo = () => ( + + + + + + + + + + +) + +export default StitchesLogo diff --git a/examples/with-stitches/css/index.js b/examples/with-stitches/css/index.js deleted file mode 100644 index bf4ac7ac1acae..0000000000000 --- a/examples/with-stitches/css/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import { createCss } from '@stitches/css' - -export const css = createCss({ - tokens: { - colors: { - RED: 'tomato', - }, - }, -}) diff --git a/examples/with-stitches/next-env.d.ts b/examples/with-stitches/next-env.d.ts new file mode 100644 index 0000000000000..7b7aa2c7727d8 --- /dev/null +++ b/examples/with-stitches/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/examples/with-stitches/package.json b/examples/with-stitches/package.json index 289bd02d642a5..819de9b6d10f7 100644 --- a/examples/with-stitches/package.json +++ b/examples/with-stitches/package.json @@ -1,21 +1,20 @@ { - "name": "stitches", + "name": "with-stitches", "version": "0.1.0", - "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { - "@stitches/css": "3.0.2", - "next": "9.3.5", - "react": "16.13.1", - "react-dom": "16.13.1" + "@stitches/react": "0.0.1", + "next": "latest", + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "devDependencies": { - "@types/react": "^16.9.34", - "typescript": "^3.8.3" + "@types/react": "^16.9.43", + "typescript": "^3.9.7" }, "license": "MIT" } diff --git a/examples/with-stitches/pages/_document.js b/examples/with-stitches/pages/_document.js deleted file mode 100644 index 1cb439e124edb..0000000000000 --- a/examples/with-stitches/pages/_document.js +++ /dev/null @@ -1,32 +0,0 @@ -import Document from 'next/document' -import { css } from '../css' - -export default class MyDocument extends Document { - static async getInitialProps(ctx) { - const originalRenderPage = ctx.renderPage - - try { - let extractedStyles - ctx.renderPage = () => { - const { styles, result } = css.getStyles(originalRenderPage) - extractedStyles = styles - return result - } - - const initialProps = await Document.getInitialProps(ctx) - - return { - ...initialProps, - styles: ( - <> - {initialProps.styles} - {extractedStyles.map((content, index) => ( - - ))} - - ), - } - } finally { - } - } -} diff --git a/examples/with-stitches-styled/pages/_document.js b/examples/with-stitches/pages/_document.tsx similarity index 52% rename from examples/with-stitches-styled/pages/_document.js rename to examples/with-stitches/pages/_document.tsx index 1cb439e124edb..499e3ec607e63 100644 --- a/examples/with-stitches-styled/pages/_document.js +++ b/examples/with-stitches/pages/_document.tsx @@ -1,8 +1,9 @@ -import Document from 'next/document' -import { css } from '../css' +import React from 'react' +import NextDocument, { DocumentContext } from 'next/document' +import { css } from '../stitches.config' -export default class MyDocument extends Document { - static async getInitialProps(ctx) { +export default class Document extends NextDocument { + static async getInitialProps(ctx: DocumentContext) { const originalRenderPage = ctx.renderPage try { @@ -13,15 +14,19 @@ export default class MyDocument extends Document { return result } - const initialProps = await Document.getInitialProps(ctx) + const initialProps = await NextDocument.getInitialProps(ctx) return { ...initialProps, styles: ( <> {initialProps.styles} + {extractedStyles.map((content, index) => ( - +