KEMBAR78
Convert next/client to TypeScript by Timer · Pull Request #16167 · vercel/next.js · GitHub
Skip to content

Conversation

Timer
Copy link
Member

@Timer Timer commented Aug 13, 2020

Fixes #16166

@ijjk
Copy link
Member

ijjk commented Aug 13, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
buildDuration 13.3s 13.3s -29ms
nodeModulesSize 57.3 MB 57.3 MB ⚠️ +3.59 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
/ failed reqs 0 0
/ total time (seconds) 2.26 2.301 ⚠️ +0.04
/ avg req/sec 1106.23 1086.34 ⚠️ -19.89
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.325 1.329 0
/error-in-render avg req/sec 1886.99 1880.84 ⚠️ -6.15
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
677f882d2ed8..c139.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
main-50e55c1..9850.js gzip 6.73 kB 6.74 kB ⚠️ +16 B
webpack-ccf5..276a.js gzip 751 B 751 B
Overall change 56.9 kB 56.9 kB ⚠️ +16 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
677f882d2ed8..dule.js gzip 6.12 kB 6.12 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
main-7c4b50e..dule.js gzip 5.82 kB 5.82 kB ⚠️ +4 B
webpack-10c7..dule.js gzip 751 B 751 B
Overall change 51.8 kB 51.8 kB ⚠️ +4 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
polyfills-75..1629.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB
hooks-585f07..95a3.js gzip 887 B 887 B
index-c7b63f..fc02.js gzip 227 B 227 B
link-4c2bd9b..eadd.js gzip 1.29 kB 1.29 kB
routerDirect..ebc7.js gzip 284 B 284 B
withRouter-2..db68.js gzip 284 B 284 B
Overall change 7.71 kB 7.71 kB
Client Pages Modern
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
_app-97e743e..dule.js gzip 626 B 626 B
_error-b4004..dule.js gzip 2.3 kB 2.3 kB
hooks-696209..dule.js gzip 387 B 387 B
index-a4dd74..dule.js gzip 226 B 226 B
link-236a801..dule.js gzip 1.26 kB 1.26 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-1..dule.js gzip 282 B 282 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
_buildManifest.js gzip 321 B 321 B
_buildManife..dule.js gzip 329 B 329 B
Overall change 650 B 650 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
index.html gzip 946 B 945 B -1 B
link.html gzip 953 B 953 B
withRouter.html gzip 940 B 940 B
Overall change 2.84 kB 2.84 kB -1 B

Diffs

Diff for main-87e6a2f..1e21b3c3f.js
@@ -253,10 +253,6 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         __webpack_require__("284h")
       );
 
-      var _router = __webpack_require__("nOHt");
-
-      var querystring = _interopRequireWildcard3(__webpack_require__("3WeD"));
-
       var _react = _interopRequireDefault(__webpack_require__("q1tI"));
 
       var _reactDom = _interopRequireDefault(__webpack_require__("i8i4"));
@@ -267,14 +263,16 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
       var _routerContext = __webpack_require__("qOIg");
 
+      var _router = __webpack_require__("elyg");
+
       var _isDynamic = __webpack_require__("/jkW");
 
+      var querystring = _interopRequireWildcard3(__webpack_require__("3WeD"));
+
       var envConfig = _interopRequireWildcard3(__webpack_require__("yLiY"));
 
       var _utils = __webpack_require__("g/15");
 
-      var _router2 = __webpack_require__("elyg");
-
       var _headManager = _interopRequireDefault(__webpack_require__("DqTX"));
 
       var _pageLoader = _interopRequireDefault(__webpack_require__("zmvN"));
@@ -282,11 +280,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var _performanceRelayer = _interopRequireDefault(
         __webpack_require__("bGXG")
       );
+
+      var _router2 = __webpack_require__("nOHt");
       /* global location */
-      /// <reference types="react-dom/experimental" />
 
       if (!("finally" in Promise.prototype)) {
-        // eslint-disable-next-line no-extend-native
         Promise.prototype["finally"] = __webpack_require__("Z577");
       }
 
@@ -317,8 +315,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       });
       var asPath = (0, _utils.getURL)(); // make sure not to attempt stripping basePath for 404s
 
-      if ((0, _router2.hasBasePath)(asPath)) {
-        asPath = (0, _router2.delBasePath)(asPath);
+      if ((0, _router.hasBasePath)(asPath)) {
+        asPath = (0, _router.delBasePath)(asPath);
       }
 
       var pageLoader = new _pageLoader["default"](buildId, prefix, page);
@@ -401,6 +399,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                     ),
                   asPath,
                   {
+                    // @ts-ignore
                     // WARNING: `_h` is an internal option for handing Next.js
                     // client-side hydration. Your app should _never_ use this property.
                     // It may change at any time without notice.
@@ -450,9 +449,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             value: function render() {
               if (true) {
                 return this.props.children;
-              }
-
-              if (false) {
+              } else {
                 var _require, ReactDevOverlay;
               }
             }
@@ -468,8 +465,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var _default = /*#__PURE__*/ (function() {
         var _ref3 = _asyncToGenerator(
           /*#__PURE__*/ _regeneratorRuntime.mark(function _callee() {
-            var _ref4,
-              passedWebpackHMR,
+            var opts,
               _yield$pageLoader$loa,
               app,
               mod,
@@ -487,11 +483,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                 while (1) {
                   switch ((_context.prev = _context.next)) {
                     case 0:
-                      (_ref4 =
+                      opts =
                         _args.length > 0 && _args[0] !== undefined
                           ? _args[0]
-                          : {}),
-                        (passedWebpackHMR = _ref4.webpackHMR);
+                          : {};
 
                       // This makes sure this specific lines are removed in production
                       if (false) {
@@ -507,14 +502,14 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                       CachedApp = app;
 
                       if (mod && mod.reportWebVitals) {
-                        onPerfEntry = function onPerfEntry(_ref5) {
-                          var id = _ref5.id,
-                            name = _ref5.name,
-                            startTime = _ref5.startTime,
-                            value = _ref5.value,
-                            duration = _ref5.duration,
-                            entryType = _ref5.entryType,
-                            entries = _ref5.entries;
+                        onPerfEntry = function onPerfEntry(_ref4) {
+                          var id = _ref4.id,
+                            name = _ref4.name,
+                            startTime = _ref4.startTime,
+                            value = _ref4.value,
+                            duration = _ref4.duration,
+                            entryType = _ref4.entryType,
+                            entries = _ref4.entries;
                           // Combines timestamp with random number for unique ID
                           var uniqueID = ""
                             .concat(Date.now(), "-")
@@ -598,7 +593,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                       return window.__NEXT_PRELOADREADY(dynamicIds);
 
                     case 29:
-                      exports.router = router = (0, _router.createRouter)(
+                      exports.router = router = (0, _router2.createRouter)(
                         page,
                         query,
                         asPath,
@@ -609,11 +604,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                           Component: CachedComponent,
                           wrapApp: wrapApp,
                           err: initialErr,
-                          isFallback: isFallback,
-                          subscription: function subscription(_ref6, App) {
-                            var Component = _ref6.Component,
-                              props = _ref6.props,
-                              err = _ref6.err;
+                          isFallback: Boolean(isFallback),
+                          subscription: function subscription(_ref5, App) {
+                            var Component = _ref5.Component,
+                              props = _ref5.props,
+                              err = _ref5.err;
                             return render({
                               App: App,
                               Component: Component,
@@ -640,19 +635,14 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                       render(renderCtx);
                       return _context.abrupt("return", emitter);
 
-                    case 35:
-                      if (true) {
-                        _context.next = 37;
-                        break;
-                      }
-
+                    case 37:
                       return _context.abrupt("return", {
                         emitter: emitter,
                         render: render,
                         renderCtx: renderCtx
                       });
 
-                    case 37:
+                    case 38:
                     case "end":
                       return _context.stop();
                   }
@@ -753,8 +743,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         } // Make sure we log the error to the console, otherwise users can't track down issues.
 
         console.error(err);
-        return pageLoader.loadPage("/_error").then(function(_ref7) {
-          var ErrorComponent = _ref7.page;
+        return pageLoader.loadPage("/_error").then(function(_ref6) {
+          var ErrorComponent = _ref6.page;
           // In production we do a normal render with the `ErrorComponent` as component.
           // If we've gotten here upon initial render, we can use the props from the server.
           // Otherwise, we need to call `getInitialProps` on `App` before mounting.
@@ -884,8 +874,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         );
       }
 
-      function AppContainer(_ref8) {
-        var children = _ref8.children;
+      function AppContainer(_ref7) {
+        var children = _ref7.children;
         return /*#__PURE__*/ _react["default"].createElement(
           Container,
           {
@@ -901,7 +891,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           /*#__PURE__*/ _react["default"].createElement(
             _routerContext.RouterContext.Provider,
             {
-              value: (0, _router.makePublicRouterInstance)(router)
+              value: (0, _router2.makePublicRouterInstance)(router)
             },
             /*#__PURE__*/ _react["default"].createElement(
               _headManagerContext.HeadManagerContext.Provider,
@@ -939,7 +929,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
       function _doRender() {
         _doRender = _asyncToGenerator(
-          /*#__PURE__*/ _regeneratorRuntime.mark(function _callee3(_ref9) {
+          /*#__PURE__*/ _regeneratorRuntime.mark(function _callee3(_ref8) {
             var App,
               Component,
               props,
@@ -952,10 +942,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               while (1) {
                 switch ((_context3.prev = _context3.next)) {
                   case 0:
-                    (App = _ref9.App),
-                      (Component = _ref9.Component),
-                      (props = _ref9.props),
-                      (err = _ref9.err);
+                    (App = _ref8.App),
+                      (Component = _ref8.Component),
+                      (props = _ref8.props),
+                      (err = _ref8.err);
                     Component = Component || lastAppProps.Component;
                     props = props || lastAppProps.props;
                     appProps = (0, _extends2["default"])(
@@ -1017,9 +1007,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         return _doRender.apply(this, arguments);
       }
 
-      function Root(_ref10) {
-        var callback = _ref10.callback,
-          children = _ref10.children;
+      function Root(_ref9) {
+        var callback = _ref9.callback,
+          children = _ref9.children;
 
         // We use `useLayoutEffect` to guarantee the callback is executed
         // as soon as React flushes the update.
Diff for main-fbd7f48..0f.module.js
@@ -171,10 +171,6 @@
         __webpack_require__("284h")
       );
 
-      var _router = __webpack_require__("nOHt");
-
-      var querystring = _interopRequireWildcard3(__webpack_require__("3WeD"));
-
       var _react = _interopRequireDefault(__webpack_require__("q1tI"));
 
       var _reactDom = _interopRequireDefault(__webpack_require__("i8i4"));
@@ -185,14 +181,16 @@
 
       var _routerContext = __webpack_require__("qOIg");
 
+      var _router = __webpack_require__("elyg");
+
       var _isDynamic = __webpack_require__("/jkW");
 
+      var querystring = _interopRequireWildcard3(__webpack_require__("3WeD"));
+
       var envConfig = _interopRequireWildcard3(__webpack_require__("yLiY"));
 
       var _utils = __webpack_require__("g/15");
 
-      var _router2 = __webpack_require__("elyg");
-
       var _headManager = _interopRequireDefault(__webpack_require__("DqTX"));
 
       var _pageLoader = _interopRequireDefault(__webpack_require__("zmvN"));
@@ -200,11 +198,11 @@
       var _performanceRelayer = _interopRequireDefault(
         __webpack_require__("bGXG")
       );
+
+      var _router2 = __webpack_require__("nOHt");
       /* global location */
-      /// <reference types="react-dom/experimental" />
 
       if (!("finally" in Promise.prototype)) {
-        // eslint-disable-next-line no-extend-native
         Promise.prototype.finally = __webpack_require__("Z577");
       }
 
@@ -237,8 +235,8 @@
       });
       var asPath = (0, _utils.getURL)(); // make sure not to attempt stripping basePath for 404s
 
-      if ((0, _router2.hasBasePath)(asPath)) {
-        asPath = (0, _router2.delBasePath)(asPath);
+      if ((0, _router.hasBasePath)(asPath)) {
+        asPath = (0, _router.delBasePath)(asPath);
       }
 
       var pageLoader = new _pageLoader.default(buildId, prefix, page);
@@ -297,6 +295,7 @@
                 ),
               asPath,
               {
+                // @ts-ignore
                 // WARNING: `_h` is an internal option for handing Next.js
                 // client-side hydration. Your app should _never_ use this property.
                 // It may change at any time without notice.
@@ -337,9 +336,7 @@
         render() {
           if (true) {
             return this.props.children;
-          }
-
-          if (false) {
+          } else {
             var ReactDevOverlay;
           }
         }
@@ -349,7 +346,7 @@
       exports.emitter = emitter;
 
       var _default = async function _default() {
-        var { webpackHMR: passedWebpackHMR } =
+        var opts =
           arguments.length > 0 && arguments[0] !== undefined
             ? arguments[0]
             : {};
@@ -416,7 +413,7 @@
           await window.__NEXT_PRELOADREADY(dynamicIds);
         }
 
-        exports.router = router = (0, _router.createRouter)(
+        exports.router = router = (0, _router2.createRouter)(
           page,
           query,
           asPath,
@@ -427,7 +424,7 @@
             Component: CachedComponent,
             wrapApp,
             err: initialErr,
-            isFallback,
+            isFallback: Boolean(isFallback),
             subscription: (_ref3, App) => {
               var { Component, props, err } = _ref3;
               return render({
@@ -453,9 +450,7 @@
         if (true) {
           render(renderCtx);
           return emitter;
-        }
-
-        if (false) {
+        } else {
         }
       };
 
@@ -642,7 +637,7 @@
           /*#__PURE__*/ _react.default.createElement(
             _routerContext.RouterContext.Provider,
             {
-              value: (0, _router.makePublicRouterInstance)(router)
+              value: (0, _router2.makePublicRouterInstance)(router)
             },
             /*#__PURE__*/ _react.default.createElement(
               _headManagerContext.HeadManagerContext.Provider,
Diff for index.html
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-fbd7f48f670e5eb7930f.module.js"
+      href="/_next/static/chunks/main-b6082a9b6bee37e3f96e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-87e6a2fc0721e21b3c3f.js"
+      src="/_next/static/chunks/main-cb67dd3c9bbfce11a34c.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-fbd7f48f670e5eb7930f.module.js"
+      src="/_next/static/chunks/main-b6082a9b6bee37e3f96e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-fbd7f48f670e5eb7930f.module.js"
+      href="/_next/static/chunks/main-b6082a9b6bee37e3f96e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-87e6a2fc0721e21b3c3f.js"
+      src="/_next/static/chunks/main-cb67dd3c9bbfce11a34c.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-fbd7f48f670e5eb7930f.module.js"
+      src="/_next/static/chunks/main-b6082a9b6bee37e3f96e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-fbd7f48f670e5eb7930f.module.js"
+      href="/_next/static/chunks/main-b6082a9b6bee37e3f96e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-87e6a2fc0721e21b3c3f.js"
+      src="/_next/static/chunks/main-cb67dd3c9bbfce11a34c.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-fbd7f48f670e5eb7930f.module.js"
+      src="/_next/static/chunks/main-b6082a9b6bee37e3f96e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
buildDuration 15.3s 15s -310ms
nodeModulesSize 57.3 MB 57.3 MB ⚠️ +3.59 kB
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
677f882d2ed8..c139.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
main-50e55c1..9850.js gzip 6.73 kB N/A N/A
webpack-ccf5..276a.js gzip 751 B 751 B
main-e664fd6..72f3.js gzip N/A 6.74 kB N/A
Overall change 56.9 kB 56.9 kB ⚠️ +16 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
677f882d2ed8..dule.js gzip 6.12 kB 6.12 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
main-7c4b50e..dule.js gzip 5.82 kB N/A N/A
webpack-10c7..dule.js gzip 751 B 751 B
main-9e8666e..dule.js gzip N/A 5.82 kB N/A
Overall change 51.8 kB 51.8 kB ⚠️ +4 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
polyfills-75..1629.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB
hooks-585f07..95a3.js gzip 887 B 887 B
index-c7b63f..fc02.js gzip 227 B 227 B
link-4c2bd9b..eadd.js gzip 1.29 kB 1.29 kB
routerDirect..ebc7.js gzip 284 B 284 B
withRouter-2..db68.js gzip 284 B 284 B
Overall change 7.71 kB 7.71 kB
Client Pages Modern
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
_app-97e743e..dule.js gzip 626 B 626 B
_error-b4004..dule.js gzip 2.3 kB 2.3 kB
hooks-696209..dule.js gzip 387 B 387 B
index-a4dd74..dule.js gzip 226 B 226 B
link-236a801..dule.js gzip 1.26 kB 1.26 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-1..dule.js gzip 282 B 282 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
_buildManifest.js gzip 321 B 321 B
_buildManife..dule.js gzip 329 B 329 B
Overall change 650 B 650 B
Serverless bundles
vercel/next.js canary Timer/next.js ts/packages/next/client/index Change
_error.js 1.03 MB 1.03 MB
404.html 4.18 kB 4.18 kB
hooks.html 3.82 kB 3.82 kB
index.js 1.03 MB 1.03 MB
link.js 1.07 MB 1.07 MB
routerDirect.js 1.06 MB 1.06 MB
withRouter.js 1.06 MB 1.06 MB
Overall change 5.26 MB 5.26 MB
Commit: 7d5c3a5

@Timer Timer merged commit 0e48ea3 into vercel:canary Aug 13, 2020
@Timer Timer deleted the ts/packages/next/client/index branch August 13, 2020 17:39
m-lautenbach pushed a commit to m-lautenbach/next.js that referenced this pull request Aug 20, 2020
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[internal] Convert next/client to TypeScript

2 participants