Skip to content

Add hydration callback for testing #10195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Jan 21, 2020
Merged

Add hydration callback for testing #10195

merged 2 commits into from
Jan 21, 2020
+217 −208

Conversation

ijjk
Copy link
Member

@ijjk ijjk commented Jan 21, 2020

This adds a callback for hydration to hook into for testing so that we don't try to wait for the page to be hydrated using an arbitrary timeout. This also adds resolving of our test libs in VS Code and types for the chaining interface we use for interacting with the browser.

x-ref: #10188

@ijjk ijjk added this to the 9.2.x milestone Jan 21, 2020
@ijjk
Copy link
Member Author

ijjk commented Jan 21, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js test/hydration-callback Change
buildDuration 13.4s 13.1s -249ms
nodeModulesSize 48.8 MB 48.8 MB ⚠️ +288 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js test/hydration-callback Change
main-HASH.js gzip 5.12 kB 5.12 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..4d1d.js gzip 16.3 kB 16.3 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 70 kB 70 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js test/hydration-callback Change
main-HASH.module.js gzip 4.17 kB 4.17 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 15.1 kB 15.1 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 64.7 kB 64.7 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js test/hydration-callback Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_app.js gzip 1.34 kB 1.34 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_app.module.js gzip 769 B 769 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.42 kB 7.42 kB ✓
Client Build Manifests
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes Overall decrease ✓
zeit/next.js canary ijjk/next.js test/hydration-callback Change
index.html gzip 1.02 kB 1.02 kB -1 B
link.html gzip 1.03 kB 1.03 kB -1 B
withRouter.html gzip 1.02 kB 1.02 kB ✓
Overall change 3.07 kB 3.07 kB -2 B

Diffs

Diff for main-HASH.js 
@@ -499,6 +499,14 @@
                     }
                   )
                 }
+
+                if (undefined) {
+                  window.__NEXT_HYDRATED = true
+
+                  if (window.__NEXT_HYDRATED_CB) {
+                    window.__NEXT_HYDRATED_CB()
+                  }
+                }
               },
             },
             {
Diff for main-HASH.module.js 
@@ -383,6 +383,14 @@
               }
             )
           }
+
+          if (undefined) {
+            window.__NEXT_HYDRATED = true
+
+            if (window.__NEXT_HYDRATED_CB) {
+              window.__NEXT_HYDRATED_CB()
+            }
+          }
         }
 
         componentDidUpdate() {
Diff for index.html 
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      href="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -163,13 +163,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-4ca7aefcf29265f0500e.js"
+      src="/_next/static/runtime/main-f9b94217fd126eba4320.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      src="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      href="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -168,13 +168,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-4ca7aefcf29265f0500e.js"
+      src="/_next/static/runtime/main-f9b94217fd126eba4320.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      src="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      href="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -163,13 +163,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-4ca7aefcf29265f0500e.js"
+      src="/_next/static/runtime/main-f9b94217fd126eba4320.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      src="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js test/hydration-callback Change
buildDuration 13.6s 13.7s ⚠️ +100ms
nodeModulesSize 48.8 MB 48.8 MB ⚠️ +288 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js test/hydration-callback Change
main-HASH.js gzip 5.12 kB 5.12 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..4d1d.js gzip 16.3 kB 16.3 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 70 kB 70 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js test/hydration-callback Change
main-HASH.module.js gzip 4.17 kB 4.17 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 15.1 kB 15.1 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 64.7 kB 64.7 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js test/hydration-callback Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_app.js gzip 1.34 kB 1.34 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_app.module.js gzip 769 B 769 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.42 kB 7.42 kB ✓
Client Build Manifests
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall increase ⚠️
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_error.js gzip 60.5 kB 60.5 kB ⚠️ +1 B
hooks.html gzip 1.06 kB 1.05 kB -1 B
index.js gzip 60.9 kB 60.9 kB ⚠️ +1 B
link.js gzip 79.8 kB 79.8 kB ⚠️ +1 B
routerDirect.js gzip 75.9 kB 75.9 kB ⚠️ +1 B
withRouter.js gzip 75.9 kB 75.9 kB ⚠️ +2 B
Overall change 354 kB 354 kB ⚠️ +5 B

Commit: 62a35b7

@ijjk
Copy link
Member Author

ijjk commented Jan 21, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js test/hydration-callback Change
buildDuration 13.5s 13.6s ⚠️ +104ms
nodeModulesSize 48.8 MB 48.8 MB ⚠️ +288 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js test/hydration-callback Change
main-HASH.js gzip 5.12 kB 5.12 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..4d1d.js gzip 16.3 kB 16.3 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 70 kB 70 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js test/hydration-callback Change
main-HASH.module.js gzip 4.17 kB 4.17 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 15.1 kB 15.1 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 64.7 kB 64.7 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js test/hydration-callback Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_app.js gzip 1.34 kB 1.34 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_app.module.js gzip 769 B 769 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.42 kB 7.42 kB ✓
Client Build Manifests
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes Overall decrease ✓
zeit/next.js canary ijjk/next.js test/hydration-callback Change
index.html gzip 1.02 kB 1.02 kB -1 B
link.html gzip 1.03 kB 1.03 kB -1 B
withRouter.html gzip 1.02 kB 1.02 kB ✓
Overall change 3.07 kB 3.07 kB -2 B

Diffs

Diff for main-HASH.js 
@@ -499,6 +499,14 @@
                     }
                   )
                 }
+
+                if (undefined) {
+                  window.__NEXT_HYDRATED = true
+
+                  if (window.__NEXT_HYDRATED_CB) {
+                    window.__NEXT_HYDRATED_CB()
+                  }
+                }
               },
             },
             {
Diff for main-HASH.module.js 
@@ -383,6 +383,14 @@
               }
             )
           }
+
+          if (undefined) {
+            window.__NEXT_HYDRATED = true
+
+            if (window.__NEXT_HYDRATED_CB) {
+              window.__NEXT_HYDRATED_CB()
+            }
+          }
         }
 
         componentDidUpdate() {
Diff for index.html 
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      href="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -163,13 +163,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-4ca7aefcf29265f0500e.js"
+      src="/_next/static/runtime/main-f9b94217fd126eba4320.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      src="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      href="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -168,13 +168,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-4ca7aefcf29265f0500e.js"
+      src="/_next/static/runtime/main-f9b94217fd126eba4320.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      src="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -45,7 +45,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      href="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -163,13 +163,13 @@
       type="module"
     ></script
     ><script
-      src="/_next/static/runtime/main-4ca7aefcf29265f0500e.js"
+      src="/_next/static/runtime/main-f9b94217fd126eba4320.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script
     ><script
-      src="/_next/static/runtime/main-01139018e1c2ffada7d0.module.js"
+      src="/_next/static/runtime/main-da80d2200ccc469c9d7e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js test/hydration-callback Change
buildDuration 14.6s 14.4s -199ms
nodeModulesSize 48.8 MB 48.8 MB ⚠️ +288 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js test/hydration-callback Change
main-HASH.js gzip 5.12 kB 5.12 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..4d1d.js gzip 16.3 kB 16.3 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 70 kB 70 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js test/hydration-callback Change
main-HASH.module.js gzip 4.17 kB 4.17 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 15.1 kB 15.1 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 64.7 kB 64.7 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js test/hydration-callback Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_app.js gzip 1.34 kB 1.34 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_app.module.js gzip 769 B 769 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.42 kB 7.42 kB ✓
Client Build Manifests
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall increase ⚠️
zeit/next.js canary ijjk/next.js test/hydration-callback Change
_error.js gzip 60.5 kB 60.5 kB ⚠️ +1 B
hooks.html gzip 1.06 kB 1.05 kB -1 B
index.js gzip 60.9 kB 60.9 kB ⚠️ +1 B
link.js gzip 79.8 kB 79.8 kB ⚠️ +1 B
routerDirect.js gzip 75.9 kB 75.9 kB ⚠️ +1 B
withRouter.js gzip 75.9 kB 75.9 kB ⚠️ +2 B
Overall change 354 kB 354 kB ⚠️ +5 B

Commit: 7da7342

@Timer Timer modified the milestones: 9.2.x, 9.2.1 Jan 21, 2020
@Timer Timer merged commit 53e9983 into vercel:canary Jan 21, 2020
@Timer Timer deleted the test/hydration-callback branch January 21, 2020 20:34
This was referenced Feb 18, 2020
Closed
Open
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Timer Timer

@lfades lfades

@timneutkens timneutkens

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
9.2.1
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@ijjk @Timer