archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix hydration issue in the switchable runtime tests (#35616)

Browse source 
In this test we are mainly focusing on the SSR'd result so hydration is't critical, but it will definitely help to get rid of these hydration errors.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
This commit is contained in:
Shu Ding 2022-03-27 03:02:17 +02:00 committed by GitHub
parent 27d23f5b7b
commit bb6ea6399d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 60 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js
View file

@ -1,14 +1,14 @@
import getRuntime from '../utils/runtime'
import getTime from '../utils/time'
import Runtime from '../utils/runtime'
import Time from '../utils/time'
export default function Page() {
return (
<div>
This is a SSR RSC page.
<br />
{'Runtime: ' + getRuntime()}
<Runtime />
<br />
{'Time: ' + getTime()}
<Time />
</div>
)
}

8
test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js vendored
View file

@ -1,14 +1,14 @@
import getRuntime from '../utils/runtime'
import getTime from '../utils/time'
import Runtime from '../utils/runtime'
import Time from '../utils/time'
export default function Page() {
return (
<div>
This is a SSR page.
<br />
{'Runtime: ' + getRuntime()}
<Runtime />
<br />
{'Time: ' + getTime()}
<Time />
</div>
)
}

8
test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js
View file

@ -1,14 +1,14 @@
import getRuntime from '../utils/runtime'
import getTime from '../utils/time'
import Runtime from '../utils/runtime'
import Time from '../utils/time'
export default function Page({ type }) {
return (
<div>
This is a {type} RSC page.
<br />
{'Runtime: ' + getRuntime()}
<Runtime />
<br />
{'Time: ' + getTime()}
<Time />
</div>
)
}

8
test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js
View file

@ -1,14 +1,14 @@
import getRuntime from '../utils/runtime'
import getTime from '../utils/time'
import Runtime from '../utils/runtime'
import Time from '../utils/time'
export default function Page({ type }) {
return (
<div>
This is a {type} RSC page.
<br />
{'Runtime: ' + getRuntime()}
<Runtime />
<br />
{'Time: ' + getTime()}
<Time />
</div>
)
}

8
test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js
View file

@ -1,14 +1,14 @@
import getRuntime from '../utils/runtime'
import getTime from '../utils/time'
import Runtime from '../utils/runtime'
import Time from '../utils/time'
export default function Page() {
return (
<div>
This is a static RSC page.
<br />
{'Runtime: ' + getRuntime()}
<Runtime />
<br />
{'Time: ' + getTime()}
<Time />
</div>
)
}

8
test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js vendored
View file

@ -1,14 +1,14 @@
import getRuntime from '../utils/runtime'
import getTime from '../utils/time'
import Runtime from '../utils/runtime'
import Time from '../utils/time'
export default function Page({ type }) {
return (
<div>
This is a {type} page.
<br />
{'Runtime: ' + getRuntime()}
<Runtime />
<br />
{'Time: ' + getTime()}
<Time />
</div>
)
}

8
test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js vendored
View file

@ -1,14 +1,14 @@
import getRuntime from '../utils/runtime'
import getTime from '../utils/time'
import Runtime from '../utils/runtime'
import Time from '../utils/time'
export default function Page({ type }) {
return (
<div>
This is a {type} page.
<br />
{'Runtime: ' + getRuntime()}
<Runtime />
<br />
{'Time: ' + getTime()}
<Time />
</div>
)
}

8
test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js vendored
View file

@ -1,14 +1,14 @@
import getRuntime from '../utils/runtime'
import getTime from '../utils/time'
import Runtime from '../utils/runtime'
import Time from '../utils/time'
export default function Page() {
return (
<div>
This is a static page.
<br />
{'Runtime: ' + getRuntime()}
<Runtime />
<br />
{'Time: ' + getTime()}
<Time />
</div>
)
}

8
test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js vendored
View file

@ -1,14 +1,14 @@
import getRuntime from '../utils/runtime'
import getTime from '../utils/time'
import Runtime from '../utils/runtime'
import Time from '../utils/time'
export default function Page() {
return (
<div>
This is a static page.
<br />
{'Runtime: ' + getRuntime()}
<Runtime />
<br />
{'Time: ' + getTime()}
<Time />
</div>
)
}

15
test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js vendored
View file

@ -1,3 +1,14 @@
export default function getRuntime() {
return process.version ? `Node.js ${process.version}` : 'Edge/Browser'
export default function Runtime() {
let runtime
if (typeof window !== 'undefined') {
// We have to make sure it matches the existing markup when hydrating.
runtime = document.getElementById('__runtime').textContent
} else {
runtime =
'Runtime: ' +
(process.version ? `Node.js ${process.version}` : 'Edge/Browser')
}
return <span id="__runtime">{runtime}</span>
}

13
test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js vendored
View file

@ -1,3 +1,12 @@
export default function getTime() {
return Date.now()
export default function Time() {
let time
if (typeof window !== 'undefined') {
// We have to make sure it matches the existing markup when hydrating.
time = document.getElementById('__time').textContent
} else {
time = 'Time: ' + Date.now()
}
return <span id="__time">{time}</span>
}