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):
-
-[](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
-}
diff --git a/examples/with-stitches-styled/public/favicon.ico b/examples/with-stitches-styled/public/favicon.ico
deleted file mode 100644
index 4965832f2c9b0..0000000000000
Binary files a/examples/with-stitches-styled/public/favicon.ico and /dev/null differ
diff --git a/examples/with-stitches-styled/public/zeit.svg b/examples/with-stitches-styled/public/zeit.svg
deleted file mode 100644
index dd3916c5f0499..0000000000000
--- a/examples/with-stitches-styled/public/zeit.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
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) => (
-
+
))}
),
diff --git a/examples/with-stitches/pages/index.js b/examples/with-stitches/pages/index.js
deleted file mode 100644
index 039130840e4d4..0000000000000
--- a/examples/with-stitches/pages/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { css } from '../css'
-
-export default function Home() {
- return (
-
- Hello world
-
- )
-}
diff --git a/examples/with-stitches/pages/index.tsx b/examples/with-stitches/pages/index.tsx
new file mode 100644
index 0000000000000..b3e465fc8bb65
--- /dev/null
+++ b/examples/with-stitches/pages/index.tsx
@@ -0,0 +1,53 @@
+import Head from 'next/head'
+import { styled } from '../stitches.config'
+import StitchesLogo from '../components/StitchesLogo'
+
+const Box = styled('div', {})
+
+const Text = styled('p', {
+ fontFamily: '$system',
+ color: '$hiContrast',
+})
+
+const Link = styled('a', {
+ fontFamily: '$system',
+ textDecoration: 'none',
+ color: '$purple600',
+})
+
+const Container = styled('div', {
+ marginX: 'auto',
+ paddingX: '$3',
+
+ variants: {
+ size: {
+ '1': {
+ maxWidth: '300px',
+ },
+ '2': {
+ maxWidth: '585px',
+ },
+ '3': {
+ maxWidth: '865px',
+ },
+ },
+ },
+})
+
+export default function Home() {
+ return (
+
+
+ Use Stitches with Next.js
+
+
+
+ Hello, from Stitches.
+
+ For full documentation, visit{' '}
+ stitches.dev.
+
+
+
+ )
+}
diff --git a/examples/with-stitches/public/zeit.svg b/examples/with-stitches/public/zeit.svg
deleted file mode 100644
index dd3916c5f0499..0000000000000
--- a/examples/with-stitches/public/zeit.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/examples/with-stitches/stitches.config.ts b/examples/with-stitches/stitches.config.ts
new file mode 100644
index 0000000000000..b09b336090233
--- /dev/null
+++ b/examples/with-stitches/stitches.config.ts
@@ -0,0 +1,83 @@
+import { createStyled } from '@stitches/react'
+
+const theme = {
+ colors: {
+ $hiContrast: 'hsl(206,10%,5%)',
+ $loContrast: 'white',
+
+ $gray100: 'hsl(206,22%,99%)',
+ $gray200: 'hsl(206,12%,97%)',
+ $gray300: 'hsl(206,11%,92%)',
+ $gray400: 'hsl(206,10%,84%)',
+ $gray500: 'hsl(206,10%,76%)',
+ $gray600: 'hsl(206,10%,44%)',
+
+ $purple100: 'hsl(252,100%,99%)',
+ $purple200: 'hsl(252,100%,98%)',
+ $purple300: 'hsl(252,100%,94%)',
+ $purple400: 'hsl(252,75%,84%)',
+ $purple500: 'hsl(252,78%,60%)',
+ $purple600: 'hsl(252,80%,53%)',
+ },
+ space: {
+ $1: '5px',
+ $2: '10px',
+ $3: '15px',
+ $4: '20px',
+ $5: '25px',
+ $6: '35px',
+ },
+ sizes: {
+ $1: '5px',
+ $2: '10px',
+ $3: '15px',
+ $4: '20px',
+ $5: '25px',
+ $6: '35px',
+ },
+ fontSizes: {
+ $1: '12px',
+ $2: '13px',
+ $3: '15px',
+ $4: '17px',
+ $5: '19px',
+ $6: '21px',
+ },
+ fonts: {
+ $system: 'system-ui',
+ },
+}
+
+export const { styled, css } = createStyled({
+ tokens: theme,
+ utils: {
+ marginX: (config) => (
+ value: keyof typeof theme['space'] | (string & {})
+ ) => ({
+ marginLeft: value,
+ marginRight: value,
+ }),
+ marginY: (config) => (
+ value: keyof typeof theme['space'] | (string & {})
+ ) => ({
+ marginTop: value,
+ marginBottom: value,
+ }),
+ paddingX: (config) => (
+ value: keyof typeof theme['space'] | (string & {})
+ ) => ({
+ paddingLeft: value,
+ paddingRight: value,
+ }),
+ paddingY: (config) => (
+ value: keyof typeof theme['space'] | (string & {})
+ ) => ({
+ paddingTop: value,
+ paddingBottom: value,
+ }),
+ },
+ breakpoints: {
+ bp1: (rule) => `@media (min-width: 520px) { ${rule} }`,
+ bp2: (rule) => `@media (min-width: 900px) { ${rule} }`,
+ },
+})
diff --git a/examples/with-stitches/tsconfig.json b/examples/with-stitches/tsconfig.json
new file mode 100644
index 0000000000000..93a83a407c40c
--- /dev/null
+++ b/examples/with-stitches/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve"
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}
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.
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/packages/next/client/page-loader.ts b/packages/next/client/page-loader.ts
index 49d63a6f465aa..700d22d632d80 100644
--- a/packages/next/client/page-loader.ts
+++ b/packages/next/client/page-loader.ts
@@ -12,7 +12,6 @@ import {
import getAssetPathFromRoute from '../next-server/lib/router/utils/get-asset-path-from-route'
import { isDynamicRoute } from '../next-server/lib/router/utils/is-dynamic'
import { parseRelativeUrl } from '../next-server/lib/router/utils/parse-relative-url'
-import { searchParamsToUrlQuery } from '../next-server/lib/router/utils/querystring'
export const looseToArray = (input: any): T[] =>
[].slice.call(input)
@@ -204,10 +203,7 @@ export default class PageLoader {
* @param {string} asPath the URL as shown in browser (virtual path); used for dynamic routes
*/
getDataHref(href: string, asPath: string, ssg: boolean) {
- const { pathname: hrefPathname, searchParams, search } = parseRelativeUrl(
- href
- )
- const query = searchParamsToUrlQuery(searchParams)
+ const { pathname: hrefPathname, query, search } = parseRelativeUrl(href)
const { pathname: asPathname } = parseRelativeUrl(asPath)
const route = normalizeRoute(hrefPathname)
diff --git a/packages/next/next-server/lib/router/router.ts b/packages/next/next-server/lib/router/router.ts
index 8843df68d9c97..b0e758dd69a02 100644
--- a/packages/next/next-server/lib/router/router.ts
+++ b/packages/next/next-server/lib/router/router.ts
@@ -563,7 +563,7 @@ export default class Router implements BaseRouter {
let parsed = parseRelativeUrl(url)
- let { pathname, searchParams } = parsed
+ let { pathname, query } = parsed
parsed = this._resolveHref(parsed, pages) as typeof parsed
@@ -572,8 +572,6 @@ export default class Router implements BaseRouter {
url = formatWithValidation(parsed)
}
- const query = searchParamsToUrlQuery(searchParams)
-
// url and as should always be prefixed with basePath by this
// point by either next/link or router.push/replace so strip the
// basePath from the pathname to match the pages dir 1-to-1
diff --git a/packages/next/next-server/lib/router/utils/parse-relative-url.ts b/packages/next/next-server/lib/router/utils/parse-relative-url.ts
index 6475ea6630fa5..a254613f0164f 100644
--- a/packages/next/next-server/lib/router/utils/parse-relative-url.ts
+++ b/packages/next/next-server/lib/router/utils/parse-relative-url.ts
@@ -1,4 +1,5 @@
import { getLocationOrigin } from '../../utils'
+import { searchParamsToUrlQuery } from './querystring'
const DUMMY_BASE = new URL(
typeof window === 'undefined' ? 'http://n' : getLocationOrigin()
@@ -29,7 +30,7 @@ export function parseRelativeUrl(url: string, base?: string) {
}
return {
pathname,
- searchParams,
+ query: searchParamsToUrlQuery(searchParams),
search,
hash,
href: href.slice(DUMMY_BASE.origin.length),
diff --git a/packages/next/next-server/lib/router/utils/prepare-destination.ts b/packages/next/next-server/lib/router/utils/prepare-destination.ts
index 1e297a7fca89e..72c51f1b3adbb 100644
--- a/packages/next/next-server/lib/router/utils/prepare-destination.ts
+++ b/packages/next/next-server/lib/router/utils/prepare-destination.ts
@@ -35,7 +35,7 @@ export default function prepareDestination(
parsedDestination = {
pathname,
- searchParams,
+ query: searchParamsToUrlQuery(searchParams),
hash,
protocol,
hostname,
@@ -45,9 +45,6 @@ export default function prepareDestination(
}
}
- parsedDestination.query = searchParamsToUrlQuery(
- parsedDestination.searchParams
- )
const destQuery = parsedDestination.query
const destPath = `${parsedDestination.pathname!}${
parsedDestination.hash || ''
@@ -108,7 +105,6 @@ export default function prepareDestination(
parsedDestination.pathname = pathname
parsedDestination.hash = `${hash ? '#' : ''}${hash || ''}`
delete parsedDestination.search
- delete parsedDestination.searchParams
} catch (err) {
if (err.message.match(/Expected .*? to not repeat, but got an array/)) {
throw new Error(
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'))