Skip to content
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.

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

WIP remove findDOMNode usage #64966

Draft
wants to merge 1 commit into
base: canary
Choose a base branch
from
Draft

WIP remove findDOMNode usage #64966

wants to merge 1 commit into from

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Apr 24, 2024

This is not equivalent but the pattern I used in component libraries. Misses a lot of nuance but I mainly want to see if we have automated tests for this behavior. Does this even work if children are Server Components?

Last resort is redacted

Closes NEXT-3215

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Apr 24, 2024
@ijjk
Copy link
Member

ijjk commented Apr 24, 2024

Failing test suites

Commit: c4f5a00

TURBOPACK=1 pnpm test-start test/e2e/app-dir/autoscroll-with-css-modules/index.test.ts (turbopack)

  • router autoscrolling on navigation with css modules > vertical scroll when page imports css modules > should scroll when clicking in JS
Expand output

● router autoscrolling on navigation with css modules › vertical scroll when page imports css modules › should scroll when clicking in JS

TIMED OUT: success

{"top":1000,"left":0}

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/autoscroll-with-css-modules/index.test.ts:56:9)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/app-dir/root-layout-redirect/root-layout-redirect.test.ts

  • root-layout-redirect > should work using browser
Expand output

● root-layout-redirect › should work using browser

expect(received).toBe(expected) // Object.is equality

Expected: false
Received: true

  28 |       })
  29 |
> 30 |       expect(foundErrors).toBe(false)
     |                           ^
  31 |     })
  32 |   }
  33 | )

  at Object.toBe (e2e/app-dir/root-layout-redirect/root-layout-redirect.test.ts:30:27)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-start test/e2e/app-dir/router-autoscroll/router-autoscroll.test.ts (PPR)

  • router autoscrolling on navigation > bugs > Should scroll to the top of the layout when the first child is display none
  • router autoscrolling on navigation > bugs > Should scroll to the top of the layout when the first child is position fixed
  • router autoscrolling on navigation > bugs > Should scroll to the top of the layout when the first child is position sticky
  • router autoscrolling on navigation > bugs > Should apply scroll when loading.js is used
  • router autoscrolling on navigation > horizontal scroll > should't scroll horizontally
  • router autoscrolling on navigation > router.refresh() > should not stop router.push() from scrolling
  • router autoscrolling on navigation > vertical scroll > should scroll to top of document when navigating between to pages without layout
  • router autoscrolling on navigation > vertical scroll > should scroll to top of page when scrolling to phe top of the document wouldn't have the page in the viewport
  • router autoscrolling on navigation > vertical scroll > should scroll down to the navigated page when it's below viewort
  • router autoscrolling on navigation > vertical scroll > should scroll to top of document if possible while giving focus to page
Expand output

● router autoscrolling on navigation › vertical scroll › should scroll to top of document when navigating between to pages without layout

TIMED OUT: success

{"top":1000,"left":0}

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:47:9)

● router autoscrolling on navigation › vertical scroll › should scroll to top of page when scrolling to phe top of the document wouldn't have the page in the viewport

TIMED OUT: success

{"top":1500,"left":0}

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:57:9)

● router autoscrolling on navigation › vertical scroll › should scroll down to the navigated page when it's below viewort

TIMED OUT: success

{"top":0,"left":0}

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:65:9)

● router autoscrolling on navigation › vertical scroll › should scroll to top of document if possible while giving focus to page

TIMED OUT: success

{"top":200,"left":0}

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:95:9)

● router autoscrolling on navigation › horizontal scroll › should't scroll horizontally

TIMED OUT: success

{"top":1000,"left":1000}

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:108:9)

● router autoscrolling on navigation › router.refresh() › should not stop router.push() from scrolling

TIMED OUT: success

{"top":12000,"left":0}

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:135:9)

● router autoscrolling on navigation › bugs › Should scroll to the top of the layout when the first child is display none

TIMED OUT: 0

8298

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:175:9)

● router autoscrolling on navigation › bugs › Should scroll to the top of the layout when the first child is position fixed

TIMED OUT: 0

8338

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:185:9)

● router autoscrolling on navigation › bugs › Should scroll to the top of the layout when the first child is position sticky

TIMED OUT: 0

8352

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:209:9)

● router autoscrolling on navigation › bugs › Should apply scroll when loading.js is used

TIMED OUT: 0

8298

undefined

  642 |
  643 |   if (hardError) {
> 644 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  645 |   }
  646 |   return false
  647 | }

  at check (lib/next-test-utils.ts:644:11)
  at Object.<anonymous> (e2e/app-dir/router-autoscroll/router-autoscroll.test.ts:233:9)

Read more about building and testing Next.js in contributing.md.

@ijjk
Copy link
Member

ijjk commented Apr 24, 2024

Stats from current PR

Default Build
General
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
buildDuration 18.3s 18.8s ⚠️ +488ms
buildDurationCached 8.1s 6.7s N/A
nodeModulesSize 238 MB 238 MB N/A
nextStartRea..uration (ms) 383ms 386ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
2453-HASH.js gzip 31.5 kB 31.5 kB N/A
3304.HASH.js gzip 169 B 169 B
3f784ff6-HASH.js gzip 53.7 kB 53.7 kB N/A
8299-HASH.js gzip 5.09 kB 5.1 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 229 B 227 B N/A
main-HASH.js gzip 31.5 kB 29.6 kB N/A
webpack-HASH.js gzip 1.64 kB 1.65 kB N/A
Overall change 45.4 kB 45.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
_app-HASH.js gzip 193 B 194 B N/A
_error-HASH.js gzip 193 B 191 B N/A
amp-HASH.js gzip 510 B 510 B
css-HASH.js gzip 342 B 343 B N/A
dynamic-HASH.js gzip 2.51 kB 2.52 kB N/A
edge-ssr-HASH.js gzip 265 B 265 B
head-HASH.js gzip 365 B 364 B N/A
hooks-HASH.js gzip 389 B 391 B N/A
image-HASH.js gzip 4.28 kB 4.28 kB N/A
index-HASH.js gzip 269 B 268 B N/A
link-HASH.js gzip 2.68 kB 2.69 kB N/A
routerDirect..HASH.js gzip 328 B 326 B N/A
script-HASH.js gzip 395 B 397 B N/A
withRouter-HASH.js gzip 323 B 323 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 1.2 kB 1.2 kB
Client Build Manifests
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
_buildManifest.js gzip 482 B 484 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
index.html gzip 529 B 530 B N/A
link.html gzip 541 B 541 B
withRouter.html gzip 524 B 523 B N/A
Overall change 541 B 541 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
edge-ssr.js gzip 108 kB 108 kB N/A
page.js gzip 3.04 kB 3.04 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
middleware-b..fest.js gzip 622 B 626 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 27.8 kB 25.6 kB N/A
edge-runtime..pack.js gzip 839 B 839 B
Overall change 839 B 839 B
Next Runtimes
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
app-page-exp...dev.js gzip 171 kB 171 kB
app-page-exp..prod.js gzip 97.6 kB 97.6 kB
app-page-tur..prod.js gzip 99.4 kB 99.4 kB
app-page-tur..prod.js gzip 93.6 kB 93.6 kB
app-page.run...dev.js gzip 145 kB 145 kB
app-page.run..prod.js gzip 92.1 kB 92.1 kB
app-route-ex...dev.js gzip 21.5 kB 21.5 kB
app-route-ex..prod.js gzip 15.1 kB 15.1 kB
app-route-tu..prod.js gzip 15.1 kB 15.1 kB
app-route-tu..prod.js gzip 14.9 kB 14.9 kB
app-route.ru...dev.js gzip 21.2 kB 21.2 kB
app-route.ru..prod.js gzip 14.9 kB 14.9 kB
pages-api-tu..prod.js gzip 9.55 kB 9.55 kB
pages-api.ru...dev.js gzip 9.82 kB 9.82 kB
pages-api.ru..prod.js gzip 9.55 kB 9.55 kB
pages-turbo...prod.js gzip 21.4 kB 21.4 kB
pages.runtim...dev.js gzip 22.1 kB 22.1 kB
pages.runtim..prod.js gzip 21.4 kB 21.4 kB
server.runti..prod.js gzip 65.3 kB 65.3 kB N/A
Overall change 895 kB 895 kB
build cache
vercel/next.js canary vercel/next.js sebbie/find-dom-node Change
0.pack gzip 1.61 MB 1.59 MB N/A
index.pack gzip 107 kB 107 kB N/A
Overall change 0 B 0 B
Diff details
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 1552: /***/ (
+    /***/ 4070: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(5237);
+          return __webpack_require__(396);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2016: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8490: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6074)
+        __webpack_require__(2457)
       );
-      const _getimgprops = __webpack_require__(9571);
-      const _imageconfig = __webpack_require__(6567);
-      const _imageconfigcontextsharedruntime = __webpack_require__(419);
-      const _warnonce = __webpack_require__(4486);
-      const _routercontextsharedruntime = __webpack_require__(162);
+      const _getimgprops = __webpack_require__(7932);
+      const _imageconfig = __webpack_require__(5706);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9483);
+      const _warnonce = __webpack_require__(9035);
+      const _routercontextsharedruntime = __webpack_require__(4829);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -379,7 +379,7 @@
       /***/
     },
 
-    /***/ 9571: /***/ (
+    /***/ 7932: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -395,9 +395,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4486);
-      const _imageblursvg = __webpack_require__(133);
-      const _imageconfig = __webpack_require__(6567);
+      const _warnonce = __webpack_require__(9035);
+      const _imageblursvg = __webpack_require__(2642);
+      const _imageconfig = __webpack_require__(5706);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -772,7 +772,7 @@
       /***/
     },
 
-    /***/ 133: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2642: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -827,7 +827,7 @@
       /***/
     },
 
-    /***/ 4085: /***/ (
+    /***/ 503: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -854,10 +854,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(7456);
-      const _getimgprops = __webpack_require__(9571);
-      const _imagecomponent = __webpack_require__(2016);
+      const _getimgprops = __webpack_require__(7932);
+      const _imagecomponent = __webpack_require__(8490);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -889,7 +889,7 @@
       /***/
     },
 
-    /***/ 6996: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7240: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -924,7 +924,7 @@
       /***/
     },
 
-    /***/ 5237: /***/ (
+    /***/ 396: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -941,8 +941,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
+      var next_image = __webpack_require__(73);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -972,12 +972,8 @@
       /***/
     },
 
-    /***/ 1577: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(4085);
+    /***/ 73: /***/ (module, __unused_webpack_exports, __webpack_require__) => {
+      module.exports = __webpack_require__(503);
 
       /***/
     },
@@ -987,7 +983,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(1552)
+      __webpack_exec__(4070)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 2453-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: c4f5a00

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants