1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/lib/link.js

169 lines
4.7 KiB
JavaScript
Raw Normal View History

/* global __NEXT_DATA__ */
import { resolve, format, parse } from 'url'
import React, { Component, Children } from 'react'
import PropTypes from 'prop-types'
import exact from 'prop-types-exact'
import Router, { _rewriteUrlForNextExport } from './router'
import { warn, execOnce, getLocationOrigin } from './utils'
2016-10-06 07:07:41 +00:00
export default class Link extends Component {
constructor (props, ...rest) {
super(props, ...rest)
2016-10-06 07:07:41 +00:00
this.linkClicked = this.linkClicked.bind(this)
this.formatUrls(props)
2016-10-06 07:07:41 +00:00
}
static propTypes = exact({
2017-09-01 18:57:13 +00:00
href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
as: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
prefetch: PropTypes.bool,
replace: PropTypes.bool,
shallow: PropTypes.bool,
passHref: PropTypes.bool,
scroll: PropTypes.bool,
children: PropTypes.oneOfType([
PropTypes.element,
(props, propName) => {
const value = props[propName]
if (typeof value === 'string') {
warnLink(`Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>`)
}
return null
}
]).isRequired
})
componentWillReceiveProps (nextProps) {
this.formatUrls(nextProps)
}
2016-10-06 07:07:41 +00:00
linkClicked (e) {
if (e.currentTarget.nodeName === 'A' &&
(e.metaKey || e.ctrlKey || e.shiftKey || (e.nativeEvent && e.nativeEvent.which === 2))) {
2016-10-06 07:07:41 +00:00
// ignore click for new tab / new window behavior
return
}
2017-06-25 10:45:45 +00:00
const { shallow } = this.props
let { href, as } = this
2016-10-06 07:07:41 +00:00
if (!isLocal(href)) {
// ignore click if it's outside our scope
return
}
const { pathname } = window.location
href = resolve(pathname, href)
as = as ? resolve(pathname, as) : href
2016-10-06 07:07:41 +00:00
e.preventDefault()
// avoid scroll for urls with anchor refs
let { scroll } = this.props
if (scroll == null) {
2016-12-28 05:27:52 +00:00
scroll = as.indexOf('#') < 0
}
// replace state instead of push if prop is present
const { replace } = this.props
const changeMethod = replace ? 'replace' : 'push'
2016-10-06 07:07:41 +00:00
// straight up redirect
2017-05-21 02:54:58 +00:00
Router[changeMethod](href, as, { shallow })
.then((success) => {
if (!success) return
if (scroll) {
window.scrollTo(0, 0)
document.body.focus()
}
})
.catch((err) => {
if (this.props.onError) this.props.onError(err)
})
2016-10-06 07:07:41 +00:00
}
2017-02-15 14:01:03 +00:00
prefetch () {
if (!this.props.prefetch) return
if (typeof window === 'undefined') return
// Prefetch the JSON page if asked (only in the client)
const { pathname } = window.location
const href = resolve(pathname, this.href)
2017-02-15 14:01:03 +00:00
Router.prefetch(href)
}
componentDidMount () {
this.prefetch()
}
componentDidUpdate (prevProps) {
if (JSON.stringify(this.props.href) !== JSON.stringify(prevProps.href)) {
2017-02-15 14:01:03 +00:00
this.prefetch()
}
}
// We accept both 'href' and 'as' as objects which we can pass to `url.format`.
// We'll handle it here.
formatUrls (props) {
this.href = props.href && typeof props.href === 'object'
? format(props.href)
: props.href
this.as = props.as && typeof props.as === 'object'
? format(props.as)
: props.as
}
2016-10-06 07:07:41 +00:00
render () {
2017-02-15 14:01:03 +00:00
let { children } = this.props
let { href, as } = this
// Deprecated. Warning shown by propType check. If the childen provided is a string (<Link>example</Link>) we wrap it in an <a> tag
if (typeof children === 'string') {
children = <a>{children}</a>
}
2016-10-06 07:07:41 +00:00
// This will return the first child, if multiple are provided it will throw an error
const child = Children.only(children)
const props = {
onClick: (e) => {
if (child.props && typeof child.props.onClick === 'function') {
child.props.onClick(e)
}
if (!e.defaultPrevented) {
this.linkClicked(e)
}
}
}
2016-10-06 07:07:41 +00:00
// 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
}
2016-10-06 07:07:41 +00:00
// Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly.
if (
props.href &&
typeof __NEXT_DATA__ !== 'undefined' &&
__NEXT_DATA__.nextExport
) {
props.href = _rewriteUrlForNextExport(props.href)
}
return React.cloneElement(child, props)
2016-10-06 07:07:41 +00:00
}
}
function isLocal (href) {
const url = parse(href, false, true)
const origin = parse(getLocationOrigin(), false, true)
Universal Webpack (#3578) * Speed up next build * Document webpack config * Speed up next build * Remove comment * Add comment * Clean up rules * Add comments * Run in parallel * Push plugins seperately * Create a new chunk for react * Don’t uglify react since it’s already uglified. Move react to commons in development * Use the minified version directly * Re-add globpattern * Move loaders into a separate variable * Add comment linking to Dan’s explanation * Remove dot * Add universal webpack * Initial dev support * Fix linting * Add changes from Arunoda's work * Made next dev works. But super slow and no HMR support. * Fix client side hot reload * Server side hmr * Only in dev * Add on-demand-entries client + hot-middleware * Add .babelrc support * Speed up on demand entries by running in parallel * Serve static generated files * Add missing config in dev * Add sass support * Add support for .map * Add cssloader config and fix .jsx support * Rename * use same defaults as css-loader. Fix linting * Add NoEmitErrorsPlugin * Add clientBootstrap * Use webpackhotmiddleware on the multi compiler * alpha.3 * Use babel 16.2.x * Fix reloading after error * Remove comment * Release 5.0.0-univeral-alpha.1 * Remove check for React 16 * Release 5.0.0-universal-alpha.2 * React hot loader v4 * Use our static file rendering machanism to serve pages. This should work well since the file path for a page is predictable. * Release 5.0.0-universal-alpha.3 * Remove optional loaders * Release 5.0.0-universal-alpha.4 * Remove clientBootstrap * Remove renderScript * Make sure pages bundles are served correctly * Remove unused import * Revert to using the same code as canary * Fix hot loader * Release 5.0.0-universal-alpha.5 * Check if externals dir exist before applying config * Add typescript support * Add support for transpiling certain packages in node_modules Thanks to @giuseppeg’s work in https://github.com/zeit/next.js/pull/3319 * Add BABEL_DISABLE_CACHE support * Make sourcemaps in production opt-in * Revert "Add support for transpiling certain packages in node_modules" This reverts commit d4b1d9babfb4b9ed4f4b12d56d52dee233e862da. In favor of a better api around this. * Support typescript through next.config.js * Remove comments * Bring back commons.js calculation * Remove unused dependencies * Move base.config.js to webpack.js * Make sure to only invalidate webpackDevMiddleware one after other. * Allow babel-loder caching by default. * Add comment about preact support * Bring back buildir replace * Remove obsolete plugin * Remove build replace, speed up build * Resolve page entries like pages/day/index.js to pages/day.js * Add componentDidCatch back * Compile to bundles * Use config.distDir everywhere * Make sure the file is an array * Remove console.log * Apply optimization to uglifyjs * Add comment pointing to source * Create entries the same way in dev and production * Remove unused and broken pagesGlobPattern * day/index.js is automatically turned into day.js at build time * Remove poweredByHeader option * Load pages with the correct path. * Release 5.0.0-universal-alpha.6 * Make sure react-dom/server can be overwritten by module-alias * Only add react-hot-loader babel plugin in dev * Release 5.0.0-universal-alpha.7 * Revert tests * Release 5.0.0-universal-alpha.10 * Make sure next/head is working properly. * Add wepack alias for 'next' back. * Make sure overriding className in next/head works * Alias react too * Add missing r * Fragment fallback has to wrap the children * Use min.js * Remove css.js * Remove wallaby.js * Release 5.0.0-universal-alpha.11 * Resolve relative to workdir instead of next * Make sure we touch the right file * Resolve next modules * Remove dotjsx removal plugins since we use webpack on the server * Revert "Resolve relative to workdir instead of next" This reverts commit a13f3e4ab565df9e2c9a3dfc8eb4009c0c2e02ed. * Externalize any locally loaded module lives outside of app dir. * Remove server aliases * Check node_modules reliably * Add symlink to next for tests * Make sure dynamic imports work locally. This is why we need it: https://github.com/webpack/webpack/blob/b545b519b2024e3f8be3041385bd326bf5d24449/lib/MainTemplate.js#L68 We need to have the finally clause in the above in __webpack_require__. webpack output option strictModuleExceptionHandling does that. * dynmaic -> dynamic * Remove webpack-node-externals * Make sure dynamic imports support SSR. * Remove css support in favor of next-css * Make sure we load path from `/` since it’s included in the path matching * Catch when ensurepage couldn’t be fulfilled for `.js.map` * Register require cache flusher for both client and server * Add comment explaining this is to facilitate hot reloading * Only load module when needed * Remove unused modules * Release 5.0.0-universal-alpha.12 * Only log the `found babel` message once * Make sure ondemand entries working correctly. Now we are just using a single instance of OnDemandEntryHandler. * Better sourcemaps * Release 5.0.0-universal-alpha.13 * Lock uglify version to 1.1.6 * Release 5.0.0-universal-alpha.14 * Fix a typo. * Introduce multi-zones support for mircofrontends * Add section on css
2018-01-30 15:40:52 +00:00
return !url.host ||
(url.protocol === origin.protocol && url.host === origin.host)
2016-10-06 07:07:41 +00:00
}
const warnLink = execOnce(warn)