Add Back Comments #10019
Merged
Add Back Comments #10019
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ijjk
approved these changes
Jan 9, 2020
Stats from current PRDefault Server Mode (Decrease detected ✓)General Overall increase
|
| zeit/next.js canary | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| buildDuration | 13.6s | 13s | -534ms |
| nodeModulesSize | 48.9 MB | 49 MB |
Client Bundles (main, webpack, commons)
| zeit/next.js canary | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| main-HASH.js gzip | 5.11 kB | 5.11 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..5e9b.js gzip | 13.7 kB | 13.7 kB | ✓ |
| framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 67.4 kB | 67.4 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | 12.5 kB | 12.5 kB | ✓ |
| framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 62.1 kB | 62.1 kB | ✓ |
Legacy Client Bundles (polyfills)
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _app.js gzip | 1.33 kB | 1.33 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _app.module.js gzip | 757 B | 757 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.41 kB | 7.41 kB | ✓ |
Client Build Manifests
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| index.html gzip | 1.02 kB | 1.02 kB | ✓ |
| link.html gzip | 1.03 kB | 1.03 kB | -1 B |
| withRouter.html gzip | 1.02 kB | 1.02 kB | ✓ |
| Overall change | 3.06 kB | 3.06 kB | -1 B |
Diffs
Diff for _app.js
@@ -144,6 +144,10 @@
exports.AppInitialProps = _utils.AppInitialProps
__webpack_require__('nOHt')
+ /**
+ * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
+ * This allows for keeping state between navigation, custom error handling, injecting additional data.
+ */
function appGetInitialProps(_x) {
return _appGetInitialProps.apply(this, arguments)
@@ -196,6 +200,9 @@
_createClass(App, [
{
key: 'componentDidCatch',
+ // Kept here for backwards compatibility.
+ // When someone ended App they could call `super.componentDidCatch`.
+ // @deprecated This method is no longer needed. Errors are caught at the top level
value: function componentDidCatch(error, _errorInfo) {
throw error
},
@@ -228,7 +235,7 @@
var warnUrl
if (false) {
- }
+ } // @deprecated noop for now until removal
function Container(p) {
if (false) {
@@ -237,6 +244,7 @@
}
function createUrl(router) {
+ // This is to make sure we don't references the router object at call time
var pathname = router.pathname,
asPath = router.asPath,
query = router.queryDiff for _app.module.js
@@ -92,6 +92,10 @@
exports.AppInitialProps = _utils.AppInitialProps
__webpack_require__('nOHt')
+ /**
+ * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
+ * This allows for keeping state between navigation, custom error handling, injecting additional data.
+ */
function appGetInitialProps(_x) {
return _appGetInitialProps.apply(this, arguments)
@@ -109,6 +113,9 @@
}
class App extends _react.default.Component {
+ // Kept here for backwards compatibility.
+ // When someone ended App they could call `super.componentDidCatch`.
+ // @deprecated This method is no longer needed. Errors are caught at the top level
componentDidCatch(error, _errorInfo) {
throw error
}
@@ -132,7 +139,7 @@
var warnUrl
if (false) {
- }
+ } // @deprecated noop for now until removal
function Container(p) {
if (false) {
@@ -141,6 +148,7 @@
}
function createUrl(router) {
+ // This is to make sure we don't references the router object at call time
var { pathname, asPath, query } = router
return {
get query() {Diff for _error.js
@@ -120,6 +120,9 @@
405: 'Method Not Allowed',
500: 'Internal Server Error',
}
+ /**
+ * `Error` component used for handling errors.
+ */
var Error =
/*#__PURE__*/Diff for _error.module.js
@@ -75,6 +75,9 @@
405: 'Method Not Allowed',
500: 'Internal Server Error',
}
+ /**
+ * `Error` component used for handling errors.
+ */
class Error extends _react.default.Component {
static getInitialProps(_ref) {Diff for link.js
@@ -491,9 +491,10 @@
var prefetched = {}
function getObserver() {
+ // Return shared instance of IntersectionObserver if already created
if (observer) {
return observer
- }
+ } // Only create shared IntersectionObserver if supported in browser
if (!IntersectionObserver) {
return undefined
@@ -567,6 +568,7 @@
})
_this.linkClicked = function(e) {
+ // @ts-ignore target exists on currentTarget
var _e$currentTarget = e.currentTarget,
nodeName = _e$currentTarget.nodeName,
target = _e$currentTarget.target
@@ -579,6 +581,7 @@
e.shiftKey ||
(e.nativeEvent && e.nativeEvent.which === 2))
) {
+ // ignore click for new tab / new window behavior
return
}
@@ -590,18 +593,20 @@
as = _this$formatUrls.as
if (!isLocal(href)) {
+ // ignore click if it's outside our scope (e.g. https://google.com)
return
}
var pathname = window.location.pathname
href = (0, _url.resolve)(pathname, href)
as = as ? (0, _url.resolve)(pathname, as) : href
- e.preventDefault()
+ e.preventDefault() // avoid scroll for urls with anchor refs
+
var scroll = _this.props.scroll
if (scroll == null) {
scroll = as.indexOf('#') < 0
- }
+ } // replace state instead of push if prop is present
_router['default']
[_this.props.replace ? 'replace' : 'push'](href, as, {
@@ -664,12 +669,14 @@
)
}
}
- },
+ }, // The function is memoized so that no extra lifecycles are needed
+ // as per https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
},
{
key: 'prefetch',
value: function prefetch() {
- if (!this.p || false) return
+ if (!this.p || false) return // Prefetch the JSON page if asked (only in the client)
+
var href = this.getHref()
_router['default'].prefetch(href)
@@ -689,7 +696,7 @@
this.props.as
),
href = _this$formatUrls3.href,
- as = _this$formatUrls3.as
+ as = _this$formatUrls3.as // Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
if (typeof children === 'string') {
children = _react['default'].createElement(
@@ -697,7 +704,7 @@
null,
children
)
- }
+ } // This will return the first child, if multiple are provided it will throw an error
var child = _react.Children.only(children)
@@ -734,14 +741,16 @@
_this3.linkClicked(e)
}
},
- }
+ } // If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is
+ // defined, we specify the current 'href', so that repetition is not needed by the user
if (
this.props.passHref ||
(child.type === 'a' && !('href' in child.props))
) {
props.href = as || href
- }
+ } // Add the ending slash to the paths. So, we can serve the
+ // "<page>/index.html" directly.
if (false) {
var rewriteUrlForNextExportDiff for link.module.js
@@ -366,9 +366,10 @@
var prefetched = {}
function getObserver() {
+ // Return shared instance of IntersectionObserver if already created
if (observer) {
return observer
- }
+ } // Only create shared IntersectionObserver if supported in browser
if (!IntersectionObserver) {
return undefined
@@ -431,6 +432,7 @@
})
this.linkClicked = e => {
+ // @ts-ignore target exists on currentTarget
var { nodeName, target } = e.currentTarget
if (
@@ -441,24 +443,27 @@
e.shiftKey ||
(e.nativeEvent && e.nativeEvent.which === 2))
) {
+ // ignore click for new tab / new window behavior
return
}
var { href, as } = this.formatUrls(this.props.href, this.props.as)
if (!isLocal(href)) {
+ // ignore click if it's outside our scope (e.g. https://google.com)
return
}
var { pathname } = window.location
href = (0, _url.resolve)(pathname, href)
as = as ? (0, _url.resolve)(pathname, as) : href
- e.preventDefault()
+ e.preventDefault() // avoid scroll for urls with anchor refs
+
var { scroll } = this.props
if (scroll == null) {
scroll = as.indexOf('#') < 0
- }
+ } // replace state instead of push if prop is present
_router.default[this.props.replace ? 'replace' : 'push'](href, as, {
shallow: this.props.shallow,
@@ -503,10 +508,12 @@
})
}
}
- }
+ } // The function is memoized so that no extra lifecycles are needed
+ // as per https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
prefetch() {
- if (!this.p || false) return
+ if (!this.p || false) return // Prefetch the JSON page if asked (only in the client)
+
var href = this.getHref()
_router.default.prefetch(href)
@@ -516,11 +523,11 @@
render() {
var { children } = this.props
- var { href, as } = this.formatUrls(this.props.href, this.props.as)
+ var { href, as } = this.formatUrls(this.props.href, this.props.as) // Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
if (typeof children === 'string') {
children = _react.default.createElement('a', null, children)
- }
+ } // This will return the first child, if multiple are provided it will throw an error
var child = _react.Children.only(children)
@@ -554,14 +561,16 @@
this.linkClicked(e)
}
},
- }
+ } // If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is
+ // defined, we specify the current 'href', so that repetition is not needed by the user
if (
this.props.passHref ||
(child.type === 'a' && !('href' in child.props))
) {
props.href = as || href
- }
+ } // Add the ending slash to the paths. So, we can serve the
+ // "<page>/index.html" directly.
if (false) {
var rewriteUrlForNextExportDiff for de003c3a9d30..89.module.js
@@ -75,7 +75,7 @@
)
}
- WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps
+ WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps // This is needed to allow checking for custom getInitialProps in _app
WithRouterWrapper.origGetInitialProps =
ComposedComponent.origGetInitialProps
@@ -3025,8 +3025,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
var _withRouter = _interopRequireDefault(__webpack_require__('0Bsm'))
exports.withRouter = _withRouter.default
+ /* global window */
+
var singletonRouter = {
router: null,
+ // holds the actual router instance
readyCallbacks: [],
ready(cb) {
@@ -3036,7 +3039,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
this.readyCallbacks.push(cb)
}
},
- }
+ } // Create public properties and methods of the router in the singletonRouter
+
var urlPropertyFields = [
'pathname',
'route',
@@ -3059,13 +3063,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
'back',
'prefetch',
'beforePopState',
- ]
+ ] // Events is a static property on the router, the router doesn't have to be initialized to use it
+
;(0, _defineProperty.default)(singletonRouter, 'events', {
get() {
return _router2.default.events
},
})
urlPropertyFields.forEach(field => {
+ // Here we need to use Object.defineProperty because, we need to return
+ // the property assigned to the actual router
+ // The value might get changed as we change routes and this is the
+ // proper way to access it
;(0, _defineProperty.default)(singletonRouter, field, {
get() {
var router = getRouter()
@@ -3074,6 +3083,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
})
})
coreMethodFields.forEach(field => {
+ // We don't really know the types here, so we add them later instead
singletonRouter[field] = function() {
var router = getRouter()
return router[field](...arguments)
@@ -3090,9 +3100,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
try {
_singletonRouter[eventField](...arguments)
} catch (err) {
+ // tslint:disable-next-line:no-console
console.error(
'Error when running the Router event: ' + eventField
- )
+ ) // tslint:disable-next-line:no-console
+
console.error(err.message + '\n' + err.stack)
}
}
@@ -3109,14 +3121,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
}
return singletonRouter.router
- }
+ } // Export the singletonRouter and this is the public API.
+
+ var _default = singletonRouter // Reexport the withRoute HOC
- var _default = singletonRouter
exports.default = _default
function useRouter() {
return _react.default.useContext(_routerContext.RouterContext)
- }
+ } // INTERNAL APIS
+ // -------------
+ // (do not use following exports inside the app)
+ // Create a router and assign it as the singleton instance.
+ // This is used in client side when we are initilizing the app.
+ // This should **not** use inside the server.
var createRouter = function createRouter() {
for (
@@ -3131,7 +3149,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
singletonRouter.readyCallbacks.forEach(cb => cb())
singletonRouter.readyCallbacks = []
return singletonRouter.router
- }
+ } // This function is used to create the `withRouter` router instance
exports.createRouter = createRouter
@@ -3141,12 +3159,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
for (var property of urlPropertyFields) {
if (typeof _router[property] === 'object') {
- instance[property] = (0, _extends2.default)({}, _router[property])
+ instance[property] = (0, _extends2.default)({}, _router[property]) // makes sure query is not stateful
+
continue
}
instance[property] = _router[property]
- }
+ } // Events is a static property on the router, the router doesn't have to be initialized to use it
instance.events = _router2.default.events
coreMethodFields.forEach(field => {Diff for de003c3a9d30..9bfc85db8.js
@@ -65,7 +65,7 @@
)
}
- WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps
+ WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps // This is needed to allow checking for custom getInitialProps in _app
WithRouterWrapper.origGetInitialProps =
ComposedComponent.origGetInitialProps
@@ -3634,8 +3634,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
var _withRouter = _interopRequireDefault(__webpack_require__('0Bsm'))
exports.withRouter = _withRouter['default']
+ /* global window */
+
var singletonRouter = {
router: null,
+ // holds the actual router instance
readyCallbacks: [],
ready: function ready(cb) {
if (this.router) return cb()
@@ -3644,7 +3647,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
this.readyCallbacks.push(cb)
}
},
- }
+ } // Create public properties and methods of the router in the singletonRouter
+
var urlPropertyFields = [
'pathname',
'route',
@@ -3667,13 +3671,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
'back',
'prefetch',
'beforePopState',
- ]
+ ] // Events is a static property on the router, the router doesn't have to be initialized to use it
+
;(0, _defineProperty['default'])(singletonRouter, 'events', {
get: function get() {
return _router2['default'].events
},
})
urlPropertyFields.forEach(function(field) {
+ // Here we need to use Object.defineProperty because, we need to return
+ // the property assigned to the actual router
+ // The value might get changed as we change routes and this is the
+ // proper way to access it
;(0, _defineProperty['default'])(singletonRouter, field, {
get: function get() {
var router = getRouter()
@@ -3682,6 +3691,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
})
})
coreMethodFields.forEach(function(field) {
+ // We don't really know the types here, so we add them later instead
singletonRouter[field] = function() {
var router = getRouter()
return router[field].apply(router, arguments)
@@ -3698,9 +3708,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
try {
_singletonRouter[eventField].apply(_singletonRouter, arguments)
} catch (err) {
+ // tslint:disable-next-line:no-console
console.error(
'Error when running the Router event: ' + eventField
- )
+ ) // tslint:disable-next-line:no-console
+
console.error(err.message + '\n' + err.stack)
}
}
@@ -3717,14 +3729,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
}
return singletonRouter.router
- }
+ } // Export the singletonRouter and this is the public API.
+
+ var _default = singletonRouter // Reexport the withRoute HOC
- var _default = singletonRouter
exports['default'] = _default
function useRouter() {
return _react['default'].useContext(_routerContext.RouterContext)
- }
+ } // INTERNAL APIS
+ // -------------
+ // (do not use following exports inside the app)
+ // Create a router and assign it as the singleton instance.
+ // This is used in client side when we are initilizing the app.
+ // This should **not** use inside the server.
var createRouter = function createRouter() {
for (
@@ -3741,7 +3759,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
})
singletonRouter.readyCallbacks = []
return singletonRouter.router
- }
+ } // This function is used to create the `withRouter` router instance
exports.createRouter = createRouter
@@ -3764,12 +3782,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
instance[property] = (0, _extends2['default'])(
{},
_router[property]
- )
+ ) // makes sure query is not stateful
+
continue
}
instance[property] = _router[property]
- }
+ } // Events is a static property on the router, the router doesn't have to be initialized to use it
} catch (err) {
_didIteratorError = true
_iteratorError = errDiff for main-HASH.js
@@ -384,6 +384,7 @@
var _querystring = __webpack_require__('s4NR')
var _isDynamic = __webpack_require__('/jkW')
+ /* global location */
if (!window.Promise) {
window.Promise = _promise['default']
@@ -403,8 +404,12 @@
assetPrefix = data.assetPrefix,
runtimeConfig = data.runtimeConfig,
dynamicIds = data.dynamicIds
- var prefix = assetPrefix || ''
- __webpack_require__.p = prefix + '/_next/'
+ var prefix = assetPrefix || '' // With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
+ // So, this is how we do it in the client side at runtime
+
+ __webpack_require__.p = prefix + '/_next/' //eslint-disable-line
+ // Initialize next/config with the environment configuration
+
envConfig.setConfig({
serverRuntimeConfig: {},
publicRuntimeConfig: runtimeConfig || {},
@@ -463,7 +468,8 @@
this.scrollToHash()
if (false) {
- }
+ } // If page was exported and has a querystring
+ // If it's a dynamic route or has a querystring
if (
(data.nextExport &&
@@ -471,6 +477,7 @@
location.search)) ||
(Component.__NEXT_SPR && location.search)
) {
+ // update query on mount for exported pages
router.replace(
router.pathname +
'?' +
@@ -484,6 +491,9 @@
),
asPath,
{
+ // 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.
_h: 1,
shallow: true,
}
@@ -505,7 +515,9 @@
hash = hash && hash.substring(1)
if (!hash) return
var el = document.getElementById(hash)
- if (!el) return
+ if (!el) return // If we call scrollIntoView() in here without a setTimeout
+ // it won't scroll properly.
+
setTimeout(function() {
return el.scrollIntoView()
}, 0)
@@ -525,167 +537,172 @@
var emitter = (0, _mitt['default'])()
exports.emitter = emitter
- var _default = (function() {
- var _ref2 = (0, _asyncToGenerator2['default'])(
- /*#__PURE__*/
- _regeneratorRuntime.mark(function _callee(_temp) {
- var _ref,
- passedWebpackHMR,
- _ref3,
- app,
- mod,
- initialErr,
- _require,
- isValidElementType,
- renderCtx
+ var _default =
+ /*#__PURE__*/
+ (function() {
+ var _ref2 = (0, _asyncToGenerator2['default'])(
+ /*#__PURE__*/
+ _regeneratorRuntime.mark(function _callee(_temp) {
+ var _ref,
+ passedWebpackHMR,
+ _ref3,
+ app,
+ mod,
+ initialErr,
+ _require,
+ isValidElementType,
+ renderCtx
+
+ return _regeneratorRuntime.wrap(
+ function _callee$(_context) {
+ while (1) {
+ switch ((_context.prev = _context.next)) {
+ case 0:
+ ;(_ref = _temp === void 0 ? {} : _temp),
+ (passedWebpackHMR = _ref.webpackHMR) // This makes sure this specific lines are removed in production
+
+ if (false) {
+ }
- return _regeneratorRuntime.wrap(
- function _callee$(_context) {
- while (1) {
- switch ((_context.prev = _context.next)) {
- case 0:
- ;(_ref = _temp === void 0 ? {} : _temp),
- (passedWebpackHMR = _ref.webpackHMR)
+ _context.next = 4
+ return pageLoader.loadPageScript('/_app')
+
+ case 4:
+ _ref3 = _context.sent
+ app = _ref3.page
+ mod = _ref3.mod
+ App = app
+
+ if (mod && mod.unstable_onPerformanceData) {
+ onPerfEntry = function onPerfEntry(_ref3) {
+ var name = _ref3.name,
+ startTime = _ref3.startTime,
+ value = _ref3.value,
+ duration = _ref3.duration
+ mod.unstable_onPerformanceData({
+ name: name,
+ startTime: startTime,
+ value: value,
+ duration: duration,
+ })
+ }
+ }
- if (false) {
- }
+ initialErr = err
+ _context.prev = 10
+ _context.next = 13
+ return pageLoader.loadPage(page)
- _context.next = 4
- return pageLoader.loadPageScript('/_app')
+ case 13:
+ Component = _context.sent
- case 4:
- _ref3 = _context.sent
- app = _ref3.page
- mod = _ref3.mod
- App = app
-
- if (mod && mod.unstable_onPerformanceData) {
- onPerfEntry = function onPerfEntry(_ref3) {
- var name = _ref3.name,
- startTime = _ref3.startTime,
- value = _ref3.value,
- duration = _ref3.duration
- mod.unstable_onPerformanceData({
- name: name,
- startTime: startTime,
- value: value,
- duration: duration,
- })
+ if (true) {
+ _context.next = 18
+ break
}
- }
-
- initialErr = err
- _context.prev = 10
- _context.next = 13
- return pageLoader.loadPage(page)
- case 13:
- Component = _context.sent
+ ;(_require = __webpack_require__(
+ !(function webpackMissingModule() {
+ var e = new Error("Cannot find module 'react-is'")
+ e.code = 'MODULE_NOT_FOUND'
+ throw e
+ })()
+ )),
+ (isValidElementType = _require.isValidElementType)
+
+ if (isValidElementType(Component)) {
+ _context.next = 18
+ break
+ }
- if (true) {
- _context.next = 18
- break
- }
+ throw new Error(
+ 'The default export is not a React Component in page: "' +
+ page +
+ '"'
+ )
- ;(_require = __webpack_require__(
- !(function webpackMissingModule() {
- var e = new Error("Cannot find module 'react-is'")
- e.code = 'MODULE_NOT_FOUND'
- throw e
- })()
- )),
- (isValidElementType = _require.isValidElementType)
-
- if (isValidElementType(Component)) {
- _context.next = 18
+ case 18:
+ _context.next = 23
break
- }
-
- throw new Error(
- 'The default export is not a React Component in page: "' +
- page +
- '"'
- )
- case 18:
- _context.next = 23
- break
+ case 20:
+ _context.prev = 20
+ _context.t0 = _context['catch'](10)
+ // This catches errors like throwing in the top level of a module
+ initialErr = _context.t0
- case 20:
- _context.prev = 20
- _context.t0 = _context['catch'](10)
- initialErr = _context.t0
+ case 23:
+ if (!window.__NEXT_PRELOADREADY) {
+ _context.next = 26
+ break
+ }
- case 23:
- if (!window.__NEXT_PRELOADREADY) {
_context.next = 26
- break
- }
+ return window.__NEXT_PRELOADREADY(dynamicIds)
+
+ case 26:
+ exports.router = router = (0, _router.createRouter)(
+ page,
+ query,
+ asPath,
+ {
+ initialProps: props,
+ pageLoader: pageLoader,
+ App: App,
+ Component: Component,
+ wrapApp: wrapApp,
+ err: initialErr,
+ subscription: function subscription(_ref4, App) {
+ var Component = _ref4.Component,
+ props = _ref4.props,
+ err = _ref4.err
+ render({
+ App: App,
+ Component: Component,
+ props: props,
+ err: err,
+ })
+ },
+ }
+ ) // call init-client middleware
- _context.next = 26
- return window.__NEXT_PRELOADREADY(dynamicIds)
-
- case 26:
- exports.router = router = (0, _router.createRouter)(
- page,
- query,
- asPath,
- {
- initialProps: props,
- pageLoader: pageLoader,
+ if (false) {
+ }
+
+ renderCtx = {
App: App,
Component: Component,
- wrapApp: wrapApp,
+ props: props,
err: initialErr,
- subscription: function subscription(_ref4, App) {
- var Component = _ref4.Component,
- props = _ref4.props,
- err = _ref4.err
- render({
- App: App,
- Component: Component,
- props: props,
- err: err,
- })
- },
}
- )
+ render(renderCtx)
+ return _context.abrupt('return', emitter)
- if (false) {
- }
-
- renderCtx = {
- App: App,
- Component: Component,
- props: props,
- err: initialErr,
- }
- render(renderCtx)
- return _context.abrupt('return', emitter)
-
- case 31:
- case 'end':
- return _context.stop()
+ case 31:
+ case 'end':
+ return _context.stop()
+ }
}
- }
- },
- _callee,
- null,
- [[10, 20]]
- )
- })
- )
+ },
+ _callee,
+ null,
+ [[10, 20]]
+ )
+ })
+ )
- return function(_x) {
- return _ref2.apply(this, arguments)
- }
- })()
+ return function(_x) {
+ return _ref2.apply(this, arguments)
+ }
+ })()
exports['default'] = _default
function render(_x2) {
return _render.apply(this, arguments)
- }
+ } // This method handles all runtime and debug errors.
+ // 404 and 500 errors are special kind of errors
+ // and they are still handle via the main render method.
function _render() {
_render = (0, _asyncToGenerator2['default'])(
@@ -743,7 +760,7 @@
function renderError(_x3) {
return _renderError.apply(this, arguments)
- }
+ } // If hydrate does not exist, eg in preact.
function _renderError() {
_renderError = (0, _asyncToGenerator2['default'])(
@@ -754,7 +771,8 @@
while (1) {
switch ((_context3.prev = _context3.next)) {
case 0:
- ;(App = props.App), (err = props.err)
+ ;(App = props.App), (err = props.err) // In development runtime errors are caught by react-error-overlay
+ // In production we catch runtime errors using componentDidCatch which will trigger renderError
if (true) {
_context3.next = 3
@@ -770,7 +788,7 @@
case 3:
if (false) {
- }
+ } // Make sure we log the error to the console, otherwise users can't track down issues.
console.error(err)
_context3.next = 7
@@ -778,6 +796,9 @@
case 7:
ErrorComponent = _context3.sent
+ // 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.
AppTree = wrapApp(App)
appCtx = {
Component: ErrorComponent,
@@ -834,6 +855,7 @@
var reactRoot = null
function renderReactElement(reactEl, domEl) {
+ // mark start of hydrate/render
if (_utils.ST) {
performance.mark('beforeRender')
}
@@ -841,6 +863,7 @@
if (false) {
var opts, callback
} else {
+ // The check for `.hydrate` is there to support React alternatives like preact
if (isInitialRender) {
_reactDom['default'].hydrate(reactEl, domEl, markHydrateComplete)
@@ -868,7 +891,8 @@
function markHydrateComplete() {
if (!_utils.ST) return
- performance.mark('afterHydrate')
+ performance.mark('afterHydrate') // mark end of hydration
+
performance.measure(
'Next.js-before-hydration',
'navigationStart',
@@ -886,7 +910,8 @@
function markRenderComplete() {
if (!_utils.ST) return
- performance.mark('afterRender')
+ performance.mark('afterRender') // mark end of render
+
var navStartEntries = performance.getEntriesByName(
'routeChange',
'mark'
@@ -1002,7 +1027,8 @@
;(App = _ref6.App),
(Component = _ref6.Component),
(props = _ref6.props),
- (err = _ref6.err)
+ (err = _ref6.err) // Usual getInitialProps fetching is handled in next/router
+ // this is for when ErrorComponent gets replaced by Component by HMR
if (
!(
@@ -1046,7 +1072,8 @@
Component: Component,
err: err,
router: router,
- })
+ }) // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+
lastAppProps = appProps
emitter.emit('before-reactdom-render', {
Component: Component,
@@ -1057,7 +1084,8 @@
AppContainer,
null,
_react['default'].createElement(App, appProps)
- )
+ ) // We catch runtime errors using componentDidCatch which will trigger renderError
+
renderReactElement(false ? undefined : elem, appElement)
emitter.emit('after-reactdom-render', {
Component: Component,
@@ -1194,7 +1222,11 @@
}
var relPrefetch =
- hasRel('preload') && !hasRel('prefetch') ? 'preload' : 'prefetch'
+ hasRel('preload') && !hasRel('prefetch') // https://caniuse.com/#feat=link-rel-preload
+ ? // macOS and iOS (Safari does not support prefetch)
+ 'preload' // https://caniuse.com/#feat=link-rel-prefetch
+ : // IE 11, Edge 12+, nearly all evergreen
+ 'prefetch'
var hasNoModule = 'noModule' in document.createElement('script')
function normalizeRoute(route) {
@@ -1247,7 +1279,7 @@
}
})
}
- }
+ } // Returns a promise for the dependencies for a particular route
_createClass(PageLoader, [
{
@@ -1298,7 +1330,7 @@
mod: mod,
})
}
- }
+ } // If there's a cached version of the page, let's use it.
var cachedPage = _this2.pageCache[route]
@@ -1313,9 +1345,10 @@
mod: mod,
})
return
- }
+ } // Register a listener to get the page
- _this2.pageRegisterEvents.on(route, fire)
+ _this2.pageRegisterEvents.on(route, fire) // If the page is loading via SSR, we need to wait for it
+ // rather downloading it again.
if (
document.querySelector(
@@ -1344,7 +1377,10 @@
'link[rel=stylesheet][href^="' + d + '"]'
)
) {
- appendLink(d, 'stylesheet')['catch'](function() {})
+ appendLink(d, 'stylesheet')['catch'](function() {
+ // FIXME: handle failure
+ // Right now, this is needed to prevent an unhandled rejection.
+ })
}
})
@@ -1378,7 +1414,9 @@
var script = document.createElement('script')
if (true && hasNoModule) {
- script.type = 'module'
+ script.type = 'module' // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
+
if (isPage) url = url.replace(/\.js$/, '.module.js')
}
@@ -1395,7 +1433,7 @@
}
document.body.appendChild(script)
- },
+ }, // This method if called by the route code.
},
{
key: 'registerPage',
@@ -1435,9 +1473,12 @@
value: function prefetch(route, isDependency) {
var _this5 = this
+ // https://github.com/GoogleChromeLabs/quicklink/blob/453a661fa1fa940e2d2e044452398e38c67a98fb/src/index.mjs#L115-L118
+ // License: Apache 2.0
var cn
if ((cn = navigator.connection)) {
+ // Don't prefetch if using 2G or if Save-Data is enabled.
if (cn.saveData || /2g/.test(cn.effectiveType))
return _promise['default'].resolve()
}
@@ -1491,7 +1532,11 @@
}),
]
)
- .then(function() {}, function() {})
+ .then(
+ // do not return any data
+ function() {}, // swallow prefetch errors
+ function() {}
+ )
},
},
])Diff for main-HASH.module.js
@@ -287,6 +287,7 @@
var _querystring = __webpack_require__('s4NR')
var _isDynamic = __webpack_require__('/jkW')
+ /* global location */
if (!window.Promise) {
window.Promise = _promise.default
@@ -308,8 +309,12 @@
runtimeConfig,
dynamicIds,
} = data
- var prefix = assetPrefix || ''
- __webpack_require__.p = prefix + '/_next/'
+ var prefix = assetPrefix || '' // With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
+ // So, this is how we do it in the client side at runtime
+
+ __webpack_require__.p = prefix + '/_next/' //eslint-disable-line
+ // Initialize next/config with the environment configuration
+
envConfig.setConfig({
serverRuntimeConfig: {},
publicRuntimeConfig: runtimeConfig || {},
@@ -347,7 +352,8 @@
this.scrollToHash()
if (false) {
- }
+ } // If page was exported and has a querystring
+ // If it's a dynamic route or has a querystring
if (
(data.nextExport &&
@@ -355,6 +361,7 @@
location.search)) ||
(Component.__NEXT_SPR && location.search)
) {
+ // update query on mount for exported pages
router.replace(
router.pathname +
'?' +
@@ -368,6 +375,9 @@
),
asPath,
{
+ // 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.
_h: 1,
shallow: true,
}
@@ -384,7 +394,9 @@
hash = hash && hash.substring(1)
if (!hash) return
var el = document.getElementById(hash)
- if (!el) return
+ if (!el) return // If we call scrollIntoView() in here without a setTimeout
+ // it won't scroll properly.
+
setTimeout(() => el.scrollIntoView(), 0)
}
@@ -396,90 +408,95 @@
var emitter = (0, _mitt.default)()
exports.emitter = emitter
- var _default = (function() {
- var _ref2 = (0, _asyncToGenerator2.default)(function*(_temp) {
- var { webpackHMR: passedWebpackHMR } = _temp === void 0 ? {} : _temp
+ var _default =
+ /*#__PURE__*/
+ (function() {
+ var _ref2 = (0, _asyncToGenerator2.default)(function*(_temp) {
+ var { webpackHMR: passedWebpackHMR } = _temp === void 0 ? {} : _temp // This makes sure this specific lines are removed in production
- if (false) {
- }
+ if (false) {
+ }
- var { page: app, mod } = yield pageLoader.loadPageScript('/_app')
- App = app
-
- if (mod && mod.unstable_onPerformanceData) {
- onPerfEntry = function onPerfEntry(_ref3) {
- var { name, startTime, value, duration } = _ref3
- mod.unstable_onPerformanceData({
- name,
- startTime,
- value,
- duration,
- })
+ var { page: app, mod } = yield pageLoader.loadPageScript('/_app')
+ App = app
+
+ if (mod && mod.unstable_onPerformanceData) {
+ onPerfEntry = function onPerfEntry(_ref3) {
+ var { name, startTime, value, duration } = _ref3
+ mod.unstable_onPerformanceData({
+ name,
+ startTime,
+ value,
+ duration,
+ })
+ }
}
- }
- var initialErr = err
+ var initialErr = err
- try {
- Component = yield pageLoader.loadPage(page)
+ try {
+ Component = yield pageLoader.loadPage(page)
- if (false) {
- var isValidElementType
+ if (false) {
+ var isValidElementType
+ }
+ } catch (error) {
+ // This catches errors like throwing in the top level of a module
+ initialErr = error
}
- } catch (error) {
- initialErr = error
- }
- if (window.__NEXT_PRELOADREADY) {
- yield window.__NEXT_PRELOADREADY(dynamicIds)
- }
+ if (window.__NEXT_PRELOADREADY) {
+ yield window.__NEXT_PRELOADREADY(dynamicIds)
+ }
- exports.router = router = (0, _router.createRouter)(
- page,
- query,
- asPath,
- {
- initialProps: props,
- pageLoader,
+ exports.router = router = (0, _router.createRouter)(
+ page,
+ query,
+ asPath,
+ {
+ initialProps: props,
+ pageLoader,
+ App,
+ Component,
+ wrapApp,
+ err: initialErr,
+ subscription: (_ref4, App) => {
+ var { Component, props, err } = _ref4
+ render({
+ App,
+ Component,
+ props,
+ err,
+ })
+ },
+ }
+ ) // call init-client middleware
+
+ if (false) {
+ }
+
+ var renderCtx = {
App,
Component,
- wrapApp,
+ props,
err: initialErr,
- subscription: (_ref4, App) => {
- var { Component, props, err } = _ref4
- render({
- App,
- Component,
- props,
- err,
- })
- },
}
- )
-
- if (false) {
- }
+ render(renderCtx)
+ return emitter
+ })
- var renderCtx = {
- App,
- Component,
- props,
- err: initialErr,
+ return function(_x) {
+ return _ref2.apply(this, arguments)
}
- render(renderCtx)
- return emitter
- })
-
- return function(_x) {
- return _ref2.apply(this, arguments)
- }
- })()
+ })()
exports.default = _default
function render(_x2) {
return _render.apply(this, arguments)
- }
+ } // This method handles all runtime and debug errors.
+ // 404 and 500 errors are special kind of errors
+ // and they are still handle via the main render method.
function _render() {
_render = (0, _asyncToGenerator2.default)(function*(props) {
@@ -503,20 +520,24 @@
function renderError(_x3) {
return _renderError.apply(this, arguments)
- }
+ } // If hydrate does not exist, eg in preact.
function _renderError() {
_renderError = (0, _asyncToGenerator2.default)(function*(props) {
- var { App, err } = props
+ var { App, err } = props // In development runtime errors are caught by react-error-overlay
+ // In production we catch runtime errors using componentDidCatch which will trigger renderError
if (false) {
}
if (false) {
- }
+ } // Make sure we log the error to the console, otherwise users can't track down issues.
console.error(err)
- ErrorComponent = yield pageLoader.loadPage('/_error')
+ ErrorComponent = yield pageLoader.loadPage('/_error') // 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.
+
var AppTree = wrapApp(App)
var appCtx = {
Component: ErrorComponent,
@@ -548,6 +569,7 @@
var reactRoot = null
function renderReactElement(reactEl, domEl) {
+ // mark start of hydrate/render
if (_utils.ST) {
performance.mark('beforeRender')
}
@@ -555,6 +577,7 @@
if (false) {
var opts, callback
} else {
+ // The check for `.hydrate` is there to support React alternatives like preact
if (isInitialRender) {
_reactDom.default.hydrate(reactEl, domEl, markHydrateComplete)
@@ -582,7 +605,8 @@
function markHydrateComplete() {
if (!_utils.ST) return
- performance.mark('afterHydrate')
+ performance.mark('afterHydrate') // mark end of hydration
+
performance.measure(
'Next.js-before-hydration',
'navigationStart',
@@ -600,7 +624,8 @@
function markRenderComplete() {
if (!_utils.ST) return
- performance.mark('afterRender')
+ performance.mark('afterRender') // mark end of render
+
var navStartEntries = performance.getEntriesByName(
'routeChange',
'mark'
@@ -685,7 +710,8 @@
function _doRender() {
_doRender = (0, _asyncToGenerator2.default)(function*(_ref6) {
- var { App, Component, props, err } = _ref6
+ var { App, Component, props, err } = _ref6 // Usual getInitialProps fetching is handled in next/router
+ // this is for when ErrorComponent gets replaced by Component by HMR
if (
!props &&
@@ -716,7 +742,8 @@
Component,
err,
router,
- })
+ }) // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+
lastAppProps = appProps
emitter.emit('before-reactdom-render', {
Component,
@@ -728,7 +755,7 @@
AppContainer,
null,
_react.default.createElement(App, appProps)
- )
+ ) // We catch runtime errors using componentDidCatch which will trigger renderError
renderReactElement(false ? undefined : elem, appElement)
emitter.emit('after-reactdom-render', {
@@ -787,7 +814,11 @@
}
var relPrefetch =
- hasRel('preload') && !hasRel('prefetch') ? 'preload' : 'prefetch'
+ hasRel('preload') && !hasRel('prefetch') // https://caniuse.com/#feat=link-rel-preload
+ ? // macOS and iOS (Safari does not support prefetch)
+ 'preload' // https://caniuse.com/#feat=link-rel-prefetch
+ : // IE 11, Edge 12+, nearly all evergreen
+ 'prefetch'
var hasNoModule = 'noModule' in document.createElement('script')
function normalizeRoute(route) {
@@ -834,7 +865,7 @@
}
})
}
- }
+ } // Returns a promise for the dependencies for a particular route
getDependencies(route) {
return this.promisedBuildManifest.then(
@@ -867,7 +898,7 @@
mod,
})
}
- }
+ } // If there's a cached version of the page, let's use it.
var cachedPage = this.pageCache[route]
@@ -880,9 +911,10 @@
mod,
})
return
- }
+ } // Register a listener to get the page
- this.pageRegisterEvents.on(route, fire)
+ this.pageRegisterEvents.on(route, fire) // If the page is loading via SSR, we need to wait for it
+ // rather downloading it again.
if (
document.querySelector('script[data-next-page="' + route + '"]')
@@ -909,7 +941,10 @@
'link[rel=stylesheet][href^="' + d + '"]'
)
) {
- appendLink(d, 'stylesheet').catch(() => {})
+ appendLink(d, 'stylesheet').catch(() => {
+ // FIXME: handle failure
+ // Right now, this is needed to prevent an unhandled rejection.
+ })
}
})
this.loadRoute(route)
@@ -936,7 +971,9 @@
var script = document.createElement('script')
if (true && hasNoModule) {
- script.type = 'module'
+ script.type = 'module' // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
+
if (isPage) url = url.replace(/\.js$/, '.module.js')
}
@@ -952,7 +989,7 @@
}
document.body.appendChild(script)
- }
+ } // This method if called by the route code.
registerPage(route, regFn) {
var register = () => {
@@ -982,9 +1019,12 @@
}
prefetch(route, isDependency) {
+ // https://github.com/GoogleChromeLabs/quicklink/blob/453a661fa1fa940e2d2e044452398e38c67a98fb/src/index.mjs#L115-L118
+ // License: Apache 2.0
var cn
if ((cn = navigator.connection)) {
+ // Don't prefetch if using 2G or if Save-Data is enabled.
if (cn.saveData || /2g/.test(cn.effectiveType))
return _promise.default.resolve()
}
@@ -1036,7 +1076,11 @@
),
]
)
- .then(() => {}, () => {})
+ .then(
+ // do not return any data
+ () => {}, // swallow prefetch errors
+ () => {}
+ )
}
}Diff for index.html
@@ -39,13 +39,13 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
as="script"
crossorigin="anonymous"
/>
<link
rel="preload"
- href="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ href="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
as="script"
crossorigin="anonymous"
/>
@@ -151,25 +151,25 @@
type="module"
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9c09c7d5ed09bfc85db8.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.fb89e23b574ba6a65095.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
defer=""
crossorigin="anonymous"
type="module"
></script
><script
- src="/_next/static/runtime/main-c0ebe5bda6657e192308.js"
+ src="/_next/static/runtime/main-fe84dab9e48c3d7c3265.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ src="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
defer=""
crossorigin="anonymous"
type="module"Diff for link.html
@@ -39,13 +39,13 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
as="script"
crossorigin="anonymous"
/>
<link
rel="preload"
- href="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ href="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
as="script"
crossorigin="anonymous"
/>
@@ -156,25 +156,25 @@
type="module"
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9c09c7d5ed09bfc85db8.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.fb89e23b574ba6a65095.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
defer=""
crossorigin="anonymous"
type="module"
></script
><script
- src="/_next/static/runtime/main-c0ebe5bda6657e192308.js"
+ src="/_next/static/runtime/main-fe84dab9e48c3d7c3265.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ src="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
defer=""
crossorigin="anonymous"
type="module"Diff for withRouter.html
@@ -39,13 +39,13 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
as="script"
crossorigin="anonymous"
/>
<link
rel="preload"
- href="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ href="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
as="script"
crossorigin="anonymous"
/>
@@ -151,25 +151,25 @@
type="module"
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9c09c7d5ed09bfc85db8.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.fb89e23b574ba6a65095.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
defer=""
crossorigin="anonymous"
type="module"
></script
><script
- src="/_next/static/runtime/main-c0ebe5bda6657e192308.js"
+ src="/_next/static/runtime/main-fe84dab9e48c3d7c3265.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ src="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
defer=""
crossorigin="anonymous"
type="module"Serverless Mode (Increase detected ⚠️ )
General Overall increase ⚠️
| zeit/next.js canary | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| buildDuration | 13.9s | 14.1s | |
| nodeModulesSize | 48.9 MB | 49 MB |
Client Bundles (main, webpack, commons)
| zeit/next.js canary | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| main-HASH.js gzip | 5.11 kB | 5.11 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..5e9b.js gzip | 13.7 kB | N/A | N/A |
| framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
| de003c3a9d30..9881.js gzip | N/A | 13.7 kB | N/A |
| Overall change | 67.4 kB | 67.4 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | 12.5 kB | N/A | N/A |
| framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
| de003c3a9d30..dule.js gzip | N/A | 12.5 kB | N/A |
| Overall change | 62.1 kB | 62.1 kB | ✓ |
Legacy Client Bundles (polyfills)
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _app.js gzip | 1.33 kB | 1.33 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _app.module.js gzip | 757 B | 757 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.41 kB | 7.41 kB | ✓ |
Client Build Manifests
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _error.js gzip | 76.1 kB | 77.8 kB | |
| hooks.html gzip | 1.05 kB | 1.05 kB | ✓ |
| index.js gzip | 76.3 kB | 78 kB | |
| link.js gzip | 78.3 kB | 80.4 kB | |
| routerDirect.js gzip | 76.4 kB | 78.1 kB | |
| withRouter.js gzip | 76.5 kB | 78.1 kB | |
| Overall change | 385 kB | 393 kB |
Commit: 47ef69d
Stats from current PRDefault Server Mode (Decrease detected ✓)General Overall increase
|
| zeit/next.js canary | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| buildDuration | 13.3s | 13.3s | |
| nodeModulesSize | 48.9 MB | 49 MB |
Client Bundles (main, webpack, commons)
| zeit/next.js canary | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| main-HASH.js gzip | 5.11 kB | 5.11 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..5e9b.js gzip | 13.7 kB | 13.7 kB | ✓ |
| framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 67.4 kB | 67.4 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | 12.5 kB | 12.5 kB | ✓ |
| framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 62.1 kB | 62.1 kB | ✓ |
Legacy Client Bundles (polyfills)
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _app.js gzip | 1.33 kB | 1.33 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _app.module.js gzip | 757 B | 757 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.41 kB | 7.41 kB | ✓ |
Client Build Manifests
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| index.html gzip | 1.02 kB | 1.02 kB | ✓ |
| link.html gzip | 1.03 kB | 1.03 kB | -1 B |
| withRouter.html gzip | 1.02 kB | 1.02 kB | ✓ |
| Overall change | 3.06 kB | 3.06 kB | -1 B |
Diffs
Diff for _app.js
@@ -144,6 +144,10 @@
exports.AppInitialProps = _utils.AppInitialProps
__webpack_require__('nOHt')
+ /**
+ * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
+ * This allows for keeping state between navigation, custom error handling, injecting additional data.
+ */
function appGetInitialProps(_x) {
return _appGetInitialProps.apply(this, arguments)
@@ -196,6 +200,9 @@
_createClass(App, [
{
key: 'componentDidCatch',
+ // Kept here for backwards compatibility.
+ // When someone ended App they could call `super.componentDidCatch`.
+ // @deprecated This method is no longer needed. Errors are caught at the top level
value: function componentDidCatch(error, _errorInfo) {
throw error
},
@@ -228,7 +235,7 @@
var warnUrl
if (false) {
- }
+ } // @deprecated noop for now until removal
function Container(p) {
if (false) {
@@ -237,6 +244,7 @@
}
function createUrl(router) {
+ // This is to make sure we don't references the router object at call time
var pathname = router.pathname,
asPath = router.asPath,
query = router.queryDiff for _app.module.js
@@ -92,6 +92,10 @@
exports.AppInitialProps = _utils.AppInitialProps
__webpack_require__('nOHt')
+ /**
+ * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
+ * This allows for keeping state between navigation, custom error handling, injecting additional data.
+ */
function appGetInitialProps(_x) {
return _appGetInitialProps.apply(this, arguments)
@@ -109,6 +113,9 @@
}
class App extends _react.default.Component {
+ // Kept here for backwards compatibility.
+ // When someone ended App they could call `super.componentDidCatch`.
+ // @deprecated This method is no longer needed. Errors are caught at the top level
componentDidCatch(error, _errorInfo) {
throw error
}
@@ -132,7 +139,7 @@
var warnUrl
if (false) {
- }
+ } // @deprecated noop for now until removal
function Container(p) {
if (false) {
@@ -141,6 +148,7 @@
}
function createUrl(router) {
+ // This is to make sure we don't references the router object at call time
var { pathname, asPath, query } = router
return {
get query() {Diff for _error.js
@@ -120,6 +120,9 @@
405: 'Method Not Allowed',
500: 'Internal Server Error',
}
+ /**
+ * `Error` component used for handling errors.
+ */
var Error =
/*#__PURE__*/Diff for _error.module.js
@@ -75,6 +75,9 @@
405: 'Method Not Allowed',
500: 'Internal Server Error',
}
+ /**
+ * `Error` component used for handling errors.
+ */
class Error extends _react.default.Component {
static getInitialProps(_ref) {Diff for link.js
@@ -491,9 +491,10 @@
var prefetched = {}
function getObserver() {
+ // Return shared instance of IntersectionObserver if already created
if (observer) {
return observer
- }
+ } // Only create shared IntersectionObserver if supported in browser
if (!IntersectionObserver) {
return undefined
@@ -567,6 +568,7 @@
})
_this.linkClicked = function(e) {
+ // @ts-ignore target exists on currentTarget
var _e$currentTarget = e.currentTarget,
nodeName = _e$currentTarget.nodeName,
target = _e$currentTarget.target
@@ -579,6 +581,7 @@
e.shiftKey ||
(e.nativeEvent && e.nativeEvent.which === 2))
) {
+ // ignore click for new tab / new window behavior
return
}
@@ -590,18 +593,20 @@
as = _this$formatUrls.as
if (!isLocal(href)) {
+ // ignore click if it's outside our scope (e.g. https://google.com)
return
}
var pathname = window.location.pathname
href = (0, _url.resolve)(pathname, href)
as = as ? (0, _url.resolve)(pathname, as) : href
- e.preventDefault()
+ e.preventDefault() // avoid scroll for urls with anchor refs
+
var scroll = _this.props.scroll
if (scroll == null) {
scroll = as.indexOf('#') < 0
- }
+ } // replace state instead of push if prop is present
_router['default']
[_this.props.replace ? 'replace' : 'push'](href, as, {
@@ -664,12 +669,14 @@
)
}
}
- },
+ }, // The function is memoized so that no extra lifecycles are needed
+ // as per https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
},
{
key: 'prefetch',
value: function prefetch() {
- if (!this.p || false) return
+ if (!this.p || false) return // Prefetch the JSON page if asked (only in the client)
+
var href = this.getHref()
_router['default'].prefetch(href)
@@ -689,7 +696,7 @@
this.props.as
),
href = _this$formatUrls3.href,
- as = _this$formatUrls3.as
+ as = _this$formatUrls3.as // Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
if (typeof children === 'string') {
children = _react['default'].createElement(
@@ -697,7 +704,7 @@
null,
children
)
- }
+ } // This will return the first child, if multiple are provided it will throw an error
var child = _react.Children.only(children)
@@ -734,14 +741,16 @@
_this3.linkClicked(e)
}
},
- }
+ } // If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is
+ // defined, we specify the current 'href', so that repetition is not needed by the user
if (
this.props.passHref ||
(child.type === 'a' && !('href' in child.props))
) {
props.href = as || href
- }
+ } // Add the ending slash to the paths. So, we can serve the
+ // "<page>/index.html" directly.
if (false) {
var rewriteUrlForNextExportDiff for link.module.js
@@ -366,9 +366,10 @@
var prefetched = {}
function getObserver() {
+ // Return shared instance of IntersectionObserver if already created
if (observer) {
return observer
- }
+ } // Only create shared IntersectionObserver if supported in browser
if (!IntersectionObserver) {
return undefined
@@ -431,6 +432,7 @@
})
this.linkClicked = e => {
+ // @ts-ignore target exists on currentTarget
var { nodeName, target } = e.currentTarget
if (
@@ -441,24 +443,27 @@
e.shiftKey ||
(e.nativeEvent && e.nativeEvent.which === 2))
) {
+ // ignore click for new tab / new window behavior
return
}
var { href, as } = this.formatUrls(this.props.href, this.props.as)
if (!isLocal(href)) {
+ // ignore click if it's outside our scope (e.g. https://google.com)
return
}
var { pathname } = window.location
href = (0, _url.resolve)(pathname, href)
as = as ? (0, _url.resolve)(pathname, as) : href
- e.preventDefault()
+ e.preventDefault() // avoid scroll for urls with anchor refs
+
var { scroll } = this.props
if (scroll == null) {
scroll = as.indexOf('#') < 0
- }
+ } // replace state instead of push if prop is present
_router.default[this.props.replace ? 'replace' : 'push'](href, as, {
shallow: this.props.shallow,
@@ -503,10 +508,12 @@
})
}
}
- }
+ } // The function is memoized so that no extra lifecycles are needed
+ // as per https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
prefetch() {
- if (!this.p || false) return
+ if (!this.p || false) return // Prefetch the JSON page if asked (only in the client)
+
var href = this.getHref()
_router.default.prefetch(href)
@@ -516,11 +523,11 @@
render() {
var { children } = this.props
- var { href, as } = this.formatUrls(this.props.href, this.props.as)
+ var { href, as } = this.formatUrls(this.props.href, this.props.as) // Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
if (typeof children === 'string') {
children = _react.default.createElement('a', null, children)
- }
+ } // This will return the first child, if multiple are provided it will throw an error
var child = _react.Children.only(children)
@@ -554,14 +561,16 @@
this.linkClicked(e)
}
},
- }
+ } // If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is
+ // defined, we specify the current 'href', so that repetition is not needed by the user
if (
this.props.passHref ||
(child.type === 'a' && !('href' in child.props))
) {
props.href = as || href
- }
+ } // Add the ending slash to the paths. So, we can serve the
+ // "<page>/index.html" directly.
if (false) {
var rewriteUrlForNextExportDiff for de003c3a9d30..89.module.js
@@ -75,7 +75,7 @@
)
}
- WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps
+ WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps // This is needed to allow checking for custom getInitialProps in _app
WithRouterWrapper.origGetInitialProps =
ComposedComponent.origGetInitialProps
@@ -3025,8 +3025,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
var _withRouter = _interopRequireDefault(__webpack_require__('0Bsm'))
exports.withRouter = _withRouter.default
+ /* global window */
+
var singletonRouter = {
router: null,
+ // holds the actual router instance
readyCallbacks: [],
ready(cb) {
@@ -3036,7 +3039,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
this.readyCallbacks.push(cb)
}
},
- }
+ } // Create public properties and methods of the router in the singletonRouter
+
var urlPropertyFields = [
'pathname',
'route',
@@ -3059,13 +3063,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
'back',
'prefetch',
'beforePopState',
- ]
+ ] // Events is a static property on the router, the router doesn't have to be initialized to use it
+
;(0, _defineProperty.default)(singletonRouter, 'events', {
get() {
return _router2.default.events
},
})
urlPropertyFields.forEach(field => {
+ // Here we need to use Object.defineProperty because, we need to return
+ // the property assigned to the actual router
+ // The value might get changed as we change routes and this is the
+ // proper way to access it
;(0, _defineProperty.default)(singletonRouter, field, {
get() {
var router = getRouter()
@@ -3074,6 +3083,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
})
})
coreMethodFields.forEach(field => {
+ // We don't really know the types here, so we add them later instead
singletonRouter[field] = function() {
var router = getRouter()
return router[field](...arguments)
@@ -3090,9 +3100,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
try {
_singletonRouter[eventField](...arguments)
} catch (err) {
+ // tslint:disable-next-line:no-console
console.error(
'Error when running the Router event: ' + eventField
- )
+ ) // tslint:disable-next-line:no-console
+
console.error(err.message + '\n' + err.stack)
}
}
@@ -3109,14 +3121,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
}
return singletonRouter.router
- }
+ } // Export the singletonRouter and this is the public API.
+
+ var _default = singletonRouter // Reexport the withRoute HOC
- var _default = singletonRouter
exports.default = _default
function useRouter() {
return _react.default.useContext(_routerContext.RouterContext)
- }
+ } // INTERNAL APIS
+ // -------------
+ // (do not use following exports inside the app)
+ // Create a router and assign it as the singleton instance.
+ // This is used in client side when we are initilizing the app.
+ // This should **not** use inside the server.
var createRouter = function createRouter() {
for (
@@ -3131,7 +3149,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
singletonRouter.readyCallbacks.forEach(cb => cb())
singletonRouter.readyCallbacks = []
return singletonRouter.router
- }
+ } // This function is used to create the `withRouter` router instance
exports.createRouter = createRouter
@@ -3141,12 +3159,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
for (var property of urlPropertyFields) {
if (typeof _router[property] === 'object') {
- instance[property] = (0, _extends2.default)({}, _router[property])
+ instance[property] = (0, _extends2.default)({}, _router[property]) // makes sure query is not stateful
+
continue
}
instance[property] = _router[property]
- }
+ } // Events is a static property on the router, the router doesn't have to be initialized to use it
instance.events = _router2.default.events
coreMethodFields.forEach(field => {Diff for de003c3a9d30..9bfc85db8.js
@@ -65,7 +65,7 @@
)
}
- WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps
+ WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps // This is needed to allow checking for custom getInitialProps in _app
WithRouterWrapper.origGetInitialProps =
ComposedComponent.origGetInitialProps
@@ -3634,8 +3634,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
var _withRouter = _interopRequireDefault(__webpack_require__('0Bsm'))
exports.withRouter = _withRouter['default']
+ /* global window */
+
var singletonRouter = {
router: null,
+ // holds the actual router instance
readyCallbacks: [],
ready: function ready(cb) {
if (this.router) return cb()
@@ -3644,7 +3647,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
this.readyCallbacks.push(cb)
}
},
- }
+ } // Create public properties and methods of the router in the singletonRouter
+
var urlPropertyFields = [
'pathname',
'route',
@@ -3667,13 +3671,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
'back',
'prefetch',
'beforePopState',
- ]
+ ] // Events is a static property on the router, the router doesn't have to be initialized to use it
+
;(0, _defineProperty['default'])(singletonRouter, 'events', {
get: function get() {
return _router2['default'].events
},
})
urlPropertyFields.forEach(function(field) {
+ // Here we need to use Object.defineProperty because, we need to return
+ // the property assigned to the actual router
+ // The value might get changed as we change routes and this is the
+ // proper way to access it
;(0, _defineProperty['default'])(singletonRouter, field, {
get: function get() {
var router = getRouter()
@@ -3682,6 +3691,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
})
})
coreMethodFields.forEach(function(field) {
+ // We don't really know the types here, so we add them later instead
singletonRouter[field] = function() {
var router = getRouter()
return router[field].apply(router, arguments)
@@ -3698,9 +3708,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
try {
_singletonRouter[eventField].apply(_singletonRouter, arguments)
} catch (err) {
+ // tslint:disable-next-line:no-console
console.error(
'Error when running the Router event: ' + eventField
- )
+ ) // tslint:disable-next-line:no-console
+
console.error(err.message + '\n' + err.stack)
}
}
@@ -3717,14 +3729,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
}
return singletonRouter.router
- }
+ } // Export the singletonRouter and this is the public API.
+
+ var _default = singletonRouter // Reexport the withRoute HOC
- var _default = singletonRouter
exports['default'] = _default
function useRouter() {
return _react['default'].useContext(_routerContext.RouterContext)
- }
+ } // INTERNAL APIS
+ // -------------
+ // (do not use following exports inside the app)
+ // Create a router and assign it as the singleton instance.
+ // This is used in client side when we are initilizing the app.
+ // This should **not** use inside the server.
var createRouter = function createRouter() {
for (
@@ -3741,7 +3759,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
})
singletonRouter.readyCallbacks = []
return singletonRouter.router
- }
+ } // This function is used to create the `withRouter` router instance
exports.createRouter = createRouter
@@ -3764,12 +3782,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
instance[property] = (0, _extends2['default'])(
{},
_router[property]
- )
+ ) // makes sure query is not stateful
+
continue
}
instance[property] = _router[property]
- }
+ } // Events is a static property on the router, the router doesn't have to be initialized to use it
} catch (err) {
_didIteratorError = true
_iteratorError = errDiff for main-HASH.js
@@ -384,6 +384,7 @@
var _querystring = __webpack_require__('s4NR')
var _isDynamic = __webpack_require__('/jkW')
+ /* global location */
if (!window.Promise) {
window.Promise = _promise['default']
@@ -403,8 +404,12 @@
assetPrefix = data.assetPrefix,
runtimeConfig = data.runtimeConfig,
dynamicIds = data.dynamicIds
- var prefix = assetPrefix || ''
- __webpack_require__.p = prefix + '/_next/'
+ var prefix = assetPrefix || '' // With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
+ // So, this is how we do it in the client side at runtime
+
+ __webpack_require__.p = prefix + '/_next/' //eslint-disable-line
+ // Initialize next/config with the environment configuration
+
envConfig.setConfig({
serverRuntimeConfig: {},
publicRuntimeConfig: runtimeConfig || {},
@@ -463,7 +468,8 @@
this.scrollToHash()
if (false) {
- }
+ } // If page was exported and has a querystring
+ // If it's a dynamic route or has a querystring
if (
(data.nextExport &&
@@ -471,6 +477,7 @@
location.search)) ||
(Component.__NEXT_SPR && location.search)
) {
+ // update query on mount for exported pages
router.replace(
router.pathname +
'?' +
@@ -484,6 +491,9 @@
),
asPath,
{
+ // 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.
_h: 1,
shallow: true,
}
@@ -505,7 +515,9 @@
hash = hash && hash.substring(1)
if (!hash) return
var el = document.getElementById(hash)
- if (!el) return
+ if (!el) return // If we call scrollIntoView() in here without a setTimeout
+ // it won't scroll properly.
+
setTimeout(function() {
return el.scrollIntoView()
}, 0)
@@ -525,167 +537,172 @@
var emitter = (0, _mitt['default'])()
exports.emitter = emitter
- var _default = (function() {
- var _ref2 = (0, _asyncToGenerator2['default'])(
- /*#__PURE__*/
- _regeneratorRuntime.mark(function _callee(_temp) {
- var _ref,
- passedWebpackHMR,
- _ref3,
- app,
- mod,
- initialErr,
- _require,
- isValidElementType,
- renderCtx
+ var _default =
+ /*#__PURE__*/
+ (function() {
+ var _ref2 = (0, _asyncToGenerator2['default'])(
+ /*#__PURE__*/
+ _regeneratorRuntime.mark(function _callee(_temp) {
+ var _ref,
+ passedWebpackHMR,
+ _ref3,
+ app,
+ mod,
+ initialErr,
+ _require,
+ isValidElementType,
+ renderCtx
+
+ return _regeneratorRuntime.wrap(
+ function _callee$(_context) {
+ while (1) {
+ switch ((_context.prev = _context.next)) {
+ case 0:
+ ;(_ref = _temp === void 0 ? {} : _temp),
+ (passedWebpackHMR = _ref.webpackHMR) // This makes sure this specific lines are removed in production
+
+ if (false) {
+ }
- return _regeneratorRuntime.wrap(
- function _callee$(_context) {
- while (1) {
- switch ((_context.prev = _context.next)) {
- case 0:
- ;(_ref = _temp === void 0 ? {} : _temp),
- (passedWebpackHMR = _ref.webpackHMR)
+ _context.next = 4
+ return pageLoader.loadPageScript('/_app')
+
+ case 4:
+ _ref3 = _context.sent
+ app = _ref3.page
+ mod = _ref3.mod
+ App = app
+
+ if (mod && mod.unstable_onPerformanceData) {
+ onPerfEntry = function onPerfEntry(_ref3) {
+ var name = _ref3.name,
+ startTime = _ref3.startTime,
+ value = _ref3.value,
+ duration = _ref3.duration
+ mod.unstable_onPerformanceData({
+ name: name,
+ startTime: startTime,
+ value: value,
+ duration: duration,
+ })
+ }
+ }
- if (false) {
- }
+ initialErr = err
+ _context.prev = 10
+ _context.next = 13
+ return pageLoader.loadPage(page)
- _context.next = 4
- return pageLoader.loadPageScript('/_app')
+ case 13:
+ Component = _context.sent
- case 4:
- _ref3 = _context.sent
- app = _ref3.page
- mod = _ref3.mod
- App = app
-
- if (mod && mod.unstable_onPerformanceData) {
- onPerfEntry = function onPerfEntry(_ref3) {
- var name = _ref3.name,
- startTime = _ref3.startTime,
- value = _ref3.value,
- duration = _ref3.duration
- mod.unstable_onPerformanceData({
- name: name,
- startTime: startTime,
- value: value,
- duration: duration,
- })
+ if (true) {
+ _context.next = 18
+ break
}
- }
-
- initialErr = err
- _context.prev = 10
- _context.next = 13
- return pageLoader.loadPage(page)
- case 13:
- Component = _context.sent
+ ;(_require = __webpack_require__(
+ !(function webpackMissingModule() {
+ var e = new Error("Cannot find module 'react-is'")
+ e.code = 'MODULE_NOT_FOUND'
+ throw e
+ })()
+ )),
+ (isValidElementType = _require.isValidElementType)
+
+ if (isValidElementType(Component)) {
+ _context.next = 18
+ break
+ }
- if (true) {
- _context.next = 18
- break
- }
+ throw new Error(
+ 'The default export is not a React Component in page: "' +
+ page +
+ '"'
+ )
- ;(_require = __webpack_require__(
- !(function webpackMissingModule() {
- var e = new Error("Cannot find module 'react-is'")
- e.code = 'MODULE_NOT_FOUND'
- throw e
- })()
- )),
- (isValidElementType = _require.isValidElementType)
-
- if (isValidElementType(Component)) {
- _context.next = 18
+ case 18:
+ _context.next = 23
break
- }
-
- throw new Error(
- 'The default export is not a React Component in page: "' +
- page +
- '"'
- )
- case 18:
- _context.next = 23
- break
+ case 20:
+ _context.prev = 20
+ _context.t0 = _context['catch'](10)
+ // This catches errors like throwing in the top level of a module
+ initialErr = _context.t0
- case 20:
- _context.prev = 20
- _context.t0 = _context['catch'](10)
- initialErr = _context.t0
+ case 23:
+ if (!window.__NEXT_PRELOADREADY) {
+ _context.next = 26
+ break
+ }
- case 23:
- if (!window.__NEXT_PRELOADREADY) {
_context.next = 26
- break
- }
+ return window.__NEXT_PRELOADREADY(dynamicIds)
+
+ case 26:
+ exports.router = router = (0, _router.createRouter)(
+ page,
+ query,
+ asPath,
+ {
+ initialProps: props,
+ pageLoader: pageLoader,
+ App: App,
+ Component: Component,
+ wrapApp: wrapApp,
+ err: initialErr,
+ subscription: function subscription(_ref4, App) {
+ var Component = _ref4.Component,
+ props = _ref4.props,
+ err = _ref4.err
+ render({
+ App: App,
+ Component: Component,
+ props: props,
+ err: err,
+ })
+ },
+ }
+ ) // call init-client middleware
- _context.next = 26
- return window.__NEXT_PRELOADREADY(dynamicIds)
-
- case 26:
- exports.router = router = (0, _router.createRouter)(
- page,
- query,
- asPath,
- {
- initialProps: props,
- pageLoader: pageLoader,
+ if (false) {
+ }
+
+ renderCtx = {
App: App,
Component: Component,
- wrapApp: wrapApp,
+ props: props,
err: initialErr,
- subscription: function subscription(_ref4, App) {
- var Component = _ref4.Component,
- props = _ref4.props,
- err = _ref4.err
- render({
- App: App,
- Component: Component,
- props: props,
- err: err,
- })
- },
}
- )
+ render(renderCtx)
+ return _context.abrupt('return', emitter)
- if (false) {
- }
-
- renderCtx = {
- App: App,
- Component: Component,
- props: props,
- err: initialErr,
- }
- render(renderCtx)
- return _context.abrupt('return', emitter)
-
- case 31:
- case 'end':
- return _context.stop()
+ case 31:
+ case 'end':
+ return _context.stop()
+ }
}
- }
- },
- _callee,
- null,
- [[10, 20]]
- )
- })
- )
+ },
+ _callee,
+ null,
+ [[10, 20]]
+ )
+ })
+ )
- return function(_x) {
- return _ref2.apply(this, arguments)
- }
- })()
+ return function(_x) {
+ return _ref2.apply(this, arguments)
+ }
+ })()
exports['default'] = _default
function render(_x2) {
return _render.apply(this, arguments)
- }
+ } // This method handles all runtime and debug errors.
+ // 404 and 500 errors are special kind of errors
+ // and they are still handle via the main render method.
function _render() {
_render = (0, _asyncToGenerator2['default'])(
@@ -743,7 +760,7 @@
function renderError(_x3) {
return _renderError.apply(this, arguments)
- }
+ } // If hydrate does not exist, eg in preact.
function _renderError() {
_renderError = (0, _asyncToGenerator2['default'])(
@@ -754,7 +771,8 @@
while (1) {
switch ((_context3.prev = _context3.next)) {
case 0:
- ;(App = props.App), (err = props.err)
+ ;(App = props.App), (err = props.err) // In development runtime errors are caught by react-error-overlay
+ // In production we catch runtime errors using componentDidCatch which will trigger renderError
if (true) {
_context3.next = 3
@@ -770,7 +788,7 @@
case 3:
if (false) {
- }
+ } // Make sure we log the error to the console, otherwise users can't track down issues.
console.error(err)
_context3.next = 7
@@ -778,6 +796,9 @@
case 7:
ErrorComponent = _context3.sent
+ // 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.
AppTree = wrapApp(App)
appCtx = {
Component: ErrorComponent,
@@ -834,6 +855,7 @@
var reactRoot = null
function renderReactElement(reactEl, domEl) {
+ // mark start of hydrate/render
if (_utils.ST) {
performance.mark('beforeRender')
}
@@ -841,6 +863,7 @@
if (false) {
var opts, callback
} else {
+ // The check for `.hydrate` is there to support React alternatives like preact
if (isInitialRender) {
_reactDom['default'].hydrate(reactEl, domEl, markHydrateComplete)
@@ -868,7 +891,8 @@
function markHydrateComplete() {
if (!_utils.ST) return
- performance.mark('afterHydrate')
+ performance.mark('afterHydrate') // mark end of hydration
+
performance.measure(
'Next.js-before-hydration',
'navigationStart',
@@ -886,7 +910,8 @@
function markRenderComplete() {
if (!_utils.ST) return
- performance.mark('afterRender')
+ performance.mark('afterRender') // mark end of render
+
var navStartEntries = performance.getEntriesByName(
'routeChange',
'mark'
@@ -1002,7 +1027,8 @@
;(App = _ref6.App),
(Component = _ref6.Component),
(props = _ref6.props),
- (err = _ref6.err)
+ (err = _ref6.err) // Usual getInitialProps fetching is handled in next/router
+ // this is for when ErrorComponent gets replaced by Component by HMR
if (
!(
@@ -1046,7 +1072,8 @@
Component: Component,
err: err,
router: router,
- })
+ }) // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+
lastAppProps = appProps
emitter.emit('before-reactdom-render', {
Component: Component,
@@ -1057,7 +1084,8 @@
AppContainer,
null,
_react['default'].createElement(App, appProps)
- )
+ ) // We catch runtime errors using componentDidCatch which will trigger renderError
+
renderReactElement(false ? undefined : elem, appElement)
emitter.emit('after-reactdom-render', {
Component: Component,
@@ -1194,7 +1222,11 @@
}
var relPrefetch =
- hasRel('preload') && !hasRel('prefetch') ? 'preload' : 'prefetch'
+ hasRel('preload') && !hasRel('prefetch') // https://caniuse.com/#feat=link-rel-preload
+ ? // macOS and iOS (Safari does not support prefetch)
+ 'preload' // https://caniuse.com/#feat=link-rel-prefetch
+ : // IE 11, Edge 12+, nearly all evergreen
+ 'prefetch'
var hasNoModule = 'noModule' in document.createElement('script')
function normalizeRoute(route) {
@@ -1247,7 +1279,7 @@
}
})
}
- }
+ } // Returns a promise for the dependencies for a particular route
_createClass(PageLoader, [
{
@@ -1298,7 +1330,7 @@
mod: mod,
})
}
- }
+ } // If there's a cached version of the page, let's use it.
var cachedPage = _this2.pageCache[route]
@@ -1313,9 +1345,10 @@
mod: mod,
})
return
- }
+ } // Register a listener to get the page
- _this2.pageRegisterEvents.on(route, fire)
+ _this2.pageRegisterEvents.on(route, fire) // If the page is loading via SSR, we need to wait for it
+ // rather downloading it again.
if (
document.querySelector(
@@ -1344,7 +1377,10 @@
'link[rel=stylesheet][href^="' + d + '"]'
)
) {
- appendLink(d, 'stylesheet')['catch'](function() {})
+ appendLink(d, 'stylesheet')['catch'](function() {
+ // FIXME: handle failure
+ // Right now, this is needed to prevent an unhandled rejection.
+ })
}
})
@@ -1378,7 +1414,9 @@
var script = document.createElement('script')
if (true && hasNoModule) {
- script.type = 'module'
+ script.type = 'module' // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
+
if (isPage) url = url.replace(/\.js$/, '.module.js')
}
@@ -1395,7 +1433,7 @@
}
document.body.appendChild(script)
- },
+ }, // This method if called by the route code.
},
{
key: 'registerPage',
@@ -1435,9 +1473,12 @@
value: function prefetch(route, isDependency) {
var _this5 = this
+ // https://github.com/GoogleChromeLabs/quicklink/blob/453a661fa1fa940e2d2e044452398e38c67a98fb/src/index.mjs#L115-L118
+ // License: Apache 2.0
var cn
if ((cn = navigator.connection)) {
+ // Don't prefetch if using 2G or if Save-Data is enabled.
if (cn.saveData || /2g/.test(cn.effectiveType))
return _promise['default'].resolve()
}
@@ -1491,7 +1532,11 @@
}),
]
)
- .then(function() {}, function() {})
+ .then(
+ // do not return any data
+ function() {}, // swallow prefetch errors
+ function() {}
+ )
},
},
])Diff for main-HASH.module.js
@@ -287,6 +287,7 @@
var _querystring = __webpack_require__('s4NR')
var _isDynamic = __webpack_require__('/jkW')
+ /* global location */
if (!window.Promise) {
window.Promise = _promise.default
@@ -308,8 +309,12 @@
runtimeConfig,
dynamicIds,
} = data
- var prefix = assetPrefix || ''
- __webpack_require__.p = prefix + '/_next/'
+ var prefix = assetPrefix || '' // With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
+ // So, this is how we do it in the client side at runtime
+
+ __webpack_require__.p = prefix + '/_next/' //eslint-disable-line
+ // Initialize next/config with the environment configuration
+
envConfig.setConfig({
serverRuntimeConfig: {},
publicRuntimeConfig: runtimeConfig || {},
@@ -347,7 +352,8 @@
this.scrollToHash()
if (false) {
- }
+ } // If page was exported and has a querystring
+ // If it's a dynamic route or has a querystring
if (
(data.nextExport &&
@@ -355,6 +361,7 @@
location.search)) ||
(Component.__NEXT_SPR && location.search)
) {
+ // update query on mount for exported pages
router.replace(
router.pathname +
'?' +
@@ -368,6 +375,9 @@
),
asPath,
{
+ // 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.
_h: 1,
shallow: true,
}
@@ -384,7 +394,9 @@
hash = hash && hash.substring(1)
if (!hash) return
var el = document.getElementById(hash)
- if (!el) return
+ if (!el) return // If we call scrollIntoView() in here without a setTimeout
+ // it won't scroll properly.
+
setTimeout(() => el.scrollIntoView(), 0)
}
@@ -396,90 +408,95 @@
var emitter = (0, _mitt.default)()
exports.emitter = emitter
- var _default = (function() {
- var _ref2 = (0, _asyncToGenerator2.default)(function*(_temp) {
- var { webpackHMR: passedWebpackHMR } = _temp === void 0 ? {} : _temp
+ var _default =
+ /*#__PURE__*/
+ (function() {
+ var _ref2 = (0, _asyncToGenerator2.default)(function*(_temp) {
+ var { webpackHMR: passedWebpackHMR } = _temp === void 0 ? {} : _temp // This makes sure this specific lines are removed in production
- if (false) {
- }
+ if (false) {
+ }
- var { page: app, mod } = yield pageLoader.loadPageScript('/_app')
- App = app
-
- if (mod && mod.unstable_onPerformanceData) {
- onPerfEntry = function onPerfEntry(_ref3) {
- var { name, startTime, value, duration } = _ref3
- mod.unstable_onPerformanceData({
- name,
- startTime,
- value,
- duration,
- })
+ var { page: app, mod } = yield pageLoader.loadPageScript('/_app')
+ App = app
+
+ if (mod && mod.unstable_onPerformanceData) {
+ onPerfEntry = function onPerfEntry(_ref3) {
+ var { name, startTime, value, duration } = _ref3
+ mod.unstable_onPerformanceData({
+ name,
+ startTime,
+ value,
+ duration,
+ })
+ }
}
- }
- var initialErr = err
+ var initialErr = err
- try {
- Component = yield pageLoader.loadPage(page)
+ try {
+ Component = yield pageLoader.loadPage(page)
- if (false) {
- var isValidElementType
+ if (false) {
+ var isValidElementType
+ }
+ } catch (error) {
+ // This catches errors like throwing in the top level of a module
+ initialErr = error
}
- } catch (error) {
- initialErr = error
- }
- if (window.__NEXT_PRELOADREADY) {
- yield window.__NEXT_PRELOADREADY(dynamicIds)
- }
+ if (window.__NEXT_PRELOADREADY) {
+ yield window.__NEXT_PRELOADREADY(dynamicIds)
+ }
- exports.router = router = (0, _router.createRouter)(
- page,
- query,
- asPath,
- {
- initialProps: props,
- pageLoader,
+ exports.router = router = (0, _router.createRouter)(
+ page,
+ query,
+ asPath,
+ {
+ initialProps: props,
+ pageLoader,
+ App,
+ Component,
+ wrapApp,
+ err: initialErr,
+ subscription: (_ref4, App) => {
+ var { Component, props, err } = _ref4
+ render({
+ App,
+ Component,
+ props,
+ err,
+ })
+ },
+ }
+ ) // call init-client middleware
+
+ if (false) {
+ }
+
+ var renderCtx = {
App,
Component,
- wrapApp,
+ props,
err: initialErr,
- subscription: (_ref4, App) => {
- var { Component, props, err } = _ref4
- render({
- App,
- Component,
- props,
- err,
- })
- },
}
- )
-
- if (false) {
- }
+ render(renderCtx)
+ return emitter
+ })
- var renderCtx = {
- App,
- Component,
- props,
- err: initialErr,
+ return function(_x) {
+ return _ref2.apply(this, arguments)
}
- render(renderCtx)
- return emitter
- })
-
- return function(_x) {
- return _ref2.apply(this, arguments)
- }
- })()
+ })()
exports.default = _default
function render(_x2) {
return _render.apply(this, arguments)
- }
+ } // This method handles all runtime and debug errors.
+ // 404 and 500 errors are special kind of errors
+ // and they are still handle via the main render method.
function _render() {
_render = (0, _asyncToGenerator2.default)(function*(props) {
@@ -503,20 +520,24 @@
function renderError(_x3) {
return _renderError.apply(this, arguments)
- }
+ } // If hydrate does not exist, eg in preact.
function _renderError() {
_renderError = (0, _asyncToGenerator2.default)(function*(props) {
- var { App, err } = props
+ var { App, err } = props // In development runtime errors are caught by react-error-overlay
+ // In production we catch runtime errors using componentDidCatch which will trigger renderError
if (false) {
}
if (false) {
- }
+ } // Make sure we log the error to the console, otherwise users can't track down issues.
console.error(err)
- ErrorComponent = yield pageLoader.loadPage('/_error')
+ ErrorComponent = yield pageLoader.loadPage('/_error') // 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.
+
var AppTree = wrapApp(App)
var appCtx = {
Component: ErrorComponent,
@@ -548,6 +569,7 @@
var reactRoot = null
function renderReactElement(reactEl, domEl) {
+ // mark start of hydrate/render
if (_utils.ST) {
performance.mark('beforeRender')
}
@@ -555,6 +577,7 @@
if (false) {
var opts, callback
} else {
+ // The check for `.hydrate` is there to support React alternatives like preact
if (isInitialRender) {
_reactDom.default.hydrate(reactEl, domEl, markHydrateComplete)
@@ -582,7 +605,8 @@
function markHydrateComplete() {
if (!_utils.ST) return
- performance.mark('afterHydrate')
+ performance.mark('afterHydrate') // mark end of hydration
+
performance.measure(
'Next.js-before-hydration',
'navigationStart',
@@ -600,7 +624,8 @@
function markRenderComplete() {
if (!_utils.ST) return
- performance.mark('afterRender')
+ performance.mark('afterRender') // mark end of render
+
var navStartEntries = performance.getEntriesByName(
'routeChange',
'mark'
@@ -685,7 +710,8 @@
function _doRender() {
_doRender = (0, _asyncToGenerator2.default)(function*(_ref6) {
- var { App, Component, props, err } = _ref6
+ var { App, Component, props, err } = _ref6 // Usual getInitialProps fetching is handled in next/router
+ // this is for when ErrorComponent gets replaced by Component by HMR
if (
!props &&
@@ -716,7 +742,8 @@
Component,
err,
router,
- })
+ }) // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+
lastAppProps = appProps
emitter.emit('before-reactdom-render', {
Component,
@@ -728,7 +755,7 @@
AppContainer,
null,
_react.default.createElement(App, appProps)
- )
+ ) // We catch runtime errors using componentDidCatch which will trigger renderError
renderReactElement(false ? undefined : elem, appElement)
emitter.emit('after-reactdom-render', {
@@ -787,7 +814,11 @@
}
var relPrefetch =
- hasRel('preload') && !hasRel('prefetch') ? 'preload' : 'prefetch'
+ hasRel('preload') && !hasRel('prefetch') // https://caniuse.com/#feat=link-rel-preload
+ ? // macOS and iOS (Safari does not support prefetch)
+ 'preload' // https://caniuse.com/#feat=link-rel-prefetch
+ : // IE 11, Edge 12+, nearly all evergreen
+ 'prefetch'
var hasNoModule = 'noModule' in document.createElement('script')
function normalizeRoute(route) {
@@ -834,7 +865,7 @@
}
})
}
- }
+ } // Returns a promise for the dependencies for a particular route
getDependencies(route) {
return this.promisedBuildManifest.then(
@@ -867,7 +898,7 @@
mod,
})
}
- }
+ } // If there's a cached version of the page, let's use it.
var cachedPage = this.pageCache[route]
@@ -880,9 +911,10 @@
mod,
})
return
- }
+ } // Register a listener to get the page
- this.pageRegisterEvents.on(route, fire)
+ this.pageRegisterEvents.on(route, fire) // If the page is loading via SSR, we need to wait for it
+ // rather downloading it again.
if (
document.querySelector('script[data-next-page="' + route + '"]')
@@ -909,7 +941,10 @@
'link[rel=stylesheet][href^="' + d + '"]'
)
) {
- appendLink(d, 'stylesheet').catch(() => {})
+ appendLink(d, 'stylesheet').catch(() => {
+ // FIXME: handle failure
+ // Right now, this is needed to prevent an unhandled rejection.
+ })
}
})
this.loadRoute(route)
@@ -936,7 +971,9 @@
var script = document.createElement('script')
if (true && hasNoModule) {
- script.type = 'module'
+ script.type = 'module' // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
+
if (isPage) url = url.replace(/\.js$/, '.module.js')
}
@@ -952,7 +989,7 @@
}
document.body.appendChild(script)
- }
+ } // This method if called by the route code.
registerPage(route, regFn) {
var register = () => {
@@ -982,9 +1019,12 @@
}
prefetch(route, isDependency) {
+ // https://github.com/GoogleChromeLabs/quicklink/blob/453a661fa1fa940e2d2e044452398e38c67a98fb/src/index.mjs#L115-L118
+ // License: Apache 2.0
var cn
if ((cn = navigator.connection)) {
+ // Don't prefetch if using 2G or if Save-Data is enabled.
if (cn.saveData || /2g/.test(cn.effectiveType))
return _promise.default.resolve()
}
@@ -1036,7 +1076,11 @@
),
]
)
- .then(() => {}, () => {})
+ .then(
+ // do not return any data
+ () => {}, // swallow prefetch errors
+ () => {}
+ )
}
}Diff for index.html
@@ -39,13 +39,13 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
as="script"
crossorigin="anonymous"
/>
<link
rel="preload"
- href="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ href="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
as="script"
crossorigin="anonymous"
/>
@@ -151,25 +151,25 @@
type="module"
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9c09c7d5ed09bfc85db8.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.fb89e23b574ba6a65095.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
defer=""
crossorigin="anonymous"
type="module"
></script
><script
- src="/_next/static/runtime/main-c0ebe5bda6657e192308.js"
+ src="/_next/static/runtime/main-fe84dab9e48c3d7c3265.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ src="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
defer=""
crossorigin="anonymous"
type="module"Diff for link.html
@@ -39,13 +39,13 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
as="script"
crossorigin="anonymous"
/>
<link
rel="preload"
- href="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ href="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
as="script"
crossorigin="anonymous"
/>
@@ -156,25 +156,25 @@
type="module"
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9c09c7d5ed09bfc85db8.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.fb89e23b574ba6a65095.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
defer=""
crossorigin="anonymous"
type="module"
></script
><script
- src="/_next/static/runtime/main-c0ebe5bda6657e192308.js"
+ src="/_next/static/runtime/main-fe84dab9e48c3d7c3265.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ src="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
defer=""
crossorigin="anonymous"
type="module"Diff for withRouter.html
@@ -39,13 +39,13 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
as="script"
crossorigin="anonymous"
/>
<link
rel="preload"
- href="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ href="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
as="script"
crossorigin="anonymous"
/>
@@ -151,25 +151,25 @@
type="module"
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9c09c7d5ed09bfc85db8.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.fb89e23b574ba6a65095.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.9ab3fbe53b1e24e1cc89.module.js"
+ src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.d9b3b214074605052c26.module.js"
defer=""
crossorigin="anonymous"
type="module"
></script
><script
- src="/_next/static/runtime/main-c0ebe5bda6657e192308.js"
+ src="/_next/static/runtime/main-fe84dab9e48c3d7c3265.js"
defer=""
crossorigin="anonymous"
nomodule=""
></script
><script
- src="/_next/static/runtime/main-c911daef274612251a81.module.js"
+ src="/_next/static/runtime/main-31eec21cac2e127e1241.module.js"
defer=""
crossorigin="anonymous"
type="module"Serverless Mode (Increase detected ⚠️ )
General Overall increase ⚠️
| zeit/next.js canary | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| buildDuration | 14s | 13.9s | -88ms |
| nodeModulesSize | 48.9 MB | 49 MB |
Client Bundles (main, webpack, commons)
| zeit/next.js canary | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| main-HASH.js gzip | 5.11 kB | 5.11 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..5e9b.js gzip | 13.7 kB | N/A | N/A |
| framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
| de003c3a9d30..9881.js gzip | N/A | 13.7 kB | N/A |
| Overall change | 67.4 kB | 67.4 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | 12.5 kB | N/A | N/A |
| framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
| de003c3a9d30..dule.js gzip | N/A | 12.5 kB | N/A |
| Overall change | 62.1 kB | 62.1 kB | ✓ |
Legacy Client Bundles (polyfills)
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _app.js gzip | 1.33 kB | 1.33 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _app.module.js gzip | 757 B | 757 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.41 kB | 7.41 kB | ✓ |
Client Build Manifests
| zeit/next.js canary | Timer/next.js fix/add-back-comments | 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 | Timer/next.js fix/add-back-comments | Change | |
|---|---|---|---|
| _error.js gzip | 76.1 kB | 77.8 kB | |
| hooks.html gzip | 1.05 kB | 1.05 kB | ✓ |
| index.js gzip | 76.3 kB | 78 kB | |
| link.js gzip | 78.3 kB | 80.4 kB | |
| routerDirect.js gzip | 76.4 kB | 78.1 kB | |
| withRouter.js gzip | 76.5 kB | 78.1 kB | |
| Overall change | 385 kB | 393 kB |
Commit: ef6d1d4
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Accidental change made in #9927 landing — this was when I was testing a variant without comments.
This was not related to #9927 removing the use of a comment, that's a separate Babel bug where it loses them unintentionally (even with
comments: true).I just didn't revert this before the merge bot landed the PR. 😄