next
Version:
The React Framework
389 lines (387 loc) • 17.2 kB
JavaScript
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return _default;
}
});
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_default._(require("react"));
const _resolvehref = require("./resolve-href");
const _islocalurl = require("../shared/lib/router/utils/is-local-url");
const _formaturl = require("../shared/lib/router/utils/format-url");
const _utils = require("../shared/lib/utils");
const _addlocale = require("./add-locale");
const _routercontextsharedruntime = require("../shared/lib/router-context.shared-runtime");
const _useintersection = require("./use-intersection");
const _getdomainlocale = require("./get-domain-locale");
const _addbasepath = require("./add-base-path");
const _usemergedref = require("./use-merged-ref");
const prefetched = new Set();
function prefetch(router, href, as, options) {
if (typeof window === 'undefined') {
return;
}
if (!(0, _islocalurl.isLocalURL)(href)) {
return;
}
// We should only dedupe requests when experimental.optimisticClientCache is
// disabled.
if (!options.bypassPrefetchedCheck) {
const locale = // Let the link's locale prop override the default router locale.
typeof options.locale !== 'undefined' ? options.locale : 'locale' in router ? router.locale : undefined;
const prefetchedKey = href + '%' + as + '%' + locale;
// If we've already fetched the key, then don't prefetch it again!
if (prefetched.has(prefetchedKey)) {
return;
}
// Mark this URL as prefetched.
prefetched.add(prefetchedKey);
}
// Prefetch the JSON page if asked (only in the client)
// We need to handle a prefetch error here since we may be
// loading with priority which can reject but we don't
// want to force navigation since this is only a prefetch
router.prefetch(href, as, options).catch((err)=>{
if (process.env.NODE_ENV !== 'production') {
// rethrow to show invalid URL errors
throw err;
}
});
}
function isModifiedEvent(event) {
const eventTarget = event.currentTarget;
const target = eventTarget.getAttribute('target');
return target && target !== '_self' || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || // triggers resource download
event.nativeEvent && event.nativeEvent.which === 2;
}
function linkClicked(e, router, href, as, replace, shallow, scroll, locale) {
const { nodeName } = e.currentTarget;
// anchors inside an svg have a lowercase nodeName
const isAnchorNodeName = nodeName.toUpperCase() === 'A';
if (isAnchorNodeName && (isModifiedEvent(e) || !(0, _islocalurl.isLocalURL)(href))) {
// ignore click for browser’s default behavior
return;
}
e.preventDefault();
const navigate = ()=>{
// If the router is an NextRouter instance it will have `beforePopState`
const routerScroll = scroll != null ? scroll : true;
if ('beforePopState' in router) {
router[replace ? 'replace' : 'push'](href, as, {
shallow,
locale,
scroll: routerScroll
});
} else {
router[replace ? 'replace' : 'push'](as || href, {
scroll: routerScroll
});
}
};
navigate();
}
function formatStringOrUrl(urlObjOrString) {
if (typeof urlObjOrString === 'string') {
return urlObjOrString;
}
return (0, _formaturl.formatUrl)(urlObjOrString);
}
/**
* A React component that extends the HTML `<a>` element to provide [prefetching](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)
* and client-side navigation between routes.
*
* It is the primary way to navigate between routes in Next.js.
*
* Read more: [Next.js docs: `<Link>`](https://nextjs.org/docs/app/api-reference/components/link)
*/ const Link = /*#__PURE__*/ _react.default.forwardRef(function LinkComponent(props, forwardedRef) {
let children;
const { href: hrefProp, as: asProp, children: childrenProp, prefetch: prefetchProp = null, passHref, replace, shallow, scroll, locale, onClick, onMouseEnter: onMouseEnterProp, onTouchStart: onTouchStartProp, legacyBehavior = false, ...restProps } = props;
children = childrenProp;
if (legacyBehavior && (typeof children === 'string' || typeof children === 'number')) {
children = /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
children: children
});
}
const router = _react.default.useContext(_routercontextsharedruntime.RouterContext);
const prefetchEnabled = prefetchProp !== false;
if (process.env.NODE_ENV !== 'production') {
function createPropError(args) {
return Object.defineProperty(new Error("Failed prop type: The prop `" + args.key + "` expects a " + args.expected + " in `<Link>`, but got `" + args.actual + "` instead." + (typeof window !== 'undefined' ? "\nOpen your browser's console to view the Component stack trace." : '')), "__NEXT_ERROR_CODE", {
value: "E319",
enumerable: false,
configurable: true
});
}
// TypeScript trick for type-guarding:
const requiredPropsGuard = {
href: true
};
const requiredProps = Object.keys(requiredPropsGuard);
requiredProps.forEach((key)=>{
if (key === 'href') {
if (props[key] == null || typeof props[key] !== 'string' && typeof props[key] !== 'object') {
throw createPropError({
key,
expected: '`string` or `object`',
actual: props[key] === null ? 'null' : typeof props[key]
});
}
} else {
// TypeScript trick for type-guarding:
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _ = key;
}
});
// TypeScript trick for type-guarding:
const optionalPropsGuard = {
as: true,
replace: true,
scroll: true,
shallow: true,
passHref: true,
prefetch: true,
locale: true,
onClick: true,
onMouseEnter: true,
onTouchStart: true,
legacyBehavior: true
};
const optionalProps = Object.keys(optionalPropsGuard);
optionalProps.forEach((key)=>{
const valType = typeof props[key];
if (key === 'as') {
if (props[key] && valType !== 'string' && valType !== 'object') {
throw createPropError({
key,
expected: '`string` or `object`',
actual: valType
});
}
} else if (key === 'locale') {
if (props[key] && valType !== 'string') {
throw createPropError({
key,
expected: '`string`',
actual: valType
});
}
} else if (key === 'onClick' || key === 'onMouseEnter' || key === 'onTouchStart') {
if (props[key] && valType !== 'function') {
throw createPropError({
key,
expected: '`function`',
actual: valType
});
}
} else if (key === 'replace' || key === 'scroll' || key === 'shallow' || key === 'passHref' || key === 'prefetch' || key === 'legacyBehavior') {
if (props[key] != null && valType !== 'boolean') {
throw createPropError({
key,
expected: '`boolean`',
actual: valType
});
}
} else {
// TypeScript trick for type-guarding:
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _ = key;
}
});
}
const { href, as } = _react.default.useMemo(()=>{
if (!router) {
const resolvedHref = formatStringOrUrl(hrefProp);
return {
href: resolvedHref,
as: asProp ? formatStringOrUrl(asProp) : resolvedHref
};
}
const [resolvedHref, resolvedAs] = (0, _resolvehref.resolveHref)(router, hrefProp, true);
return {
href: resolvedHref,
as: asProp ? (0, _resolvehref.resolveHref)(router, asProp) : resolvedAs || resolvedHref
};
}, [
router,
hrefProp,
asProp
]);
const previousHref = _react.default.useRef(href);
const previousAs = _react.default.useRef(as);
// This will return the first child, if multiple are provided it will throw an error
let child;
if (legacyBehavior) {
if (process.env.NODE_ENV === 'development') {
if (onClick) {
console.warn('"onClick" was passed to <Link> with `href` of `' + hrefProp + '` but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link');
}
if (onMouseEnterProp) {
console.warn('"onMouseEnter" was passed to <Link> with `href` of `' + hrefProp + '` but "legacyBehavior" was set. The legacy behavior requires onMouseEnter be set on the child of next/link');
}
try {
child = _react.default.Children.only(children);
} catch (err) {
if (!children) {
throw Object.defineProperty(new Error("No children were passed to <Link> with `href` of `" + hrefProp + "` but one child is required https://nextjs.org/docs/messages/link-no-children"), "__NEXT_ERROR_CODE", {
value: "E320",
enumerable: false,
configurable: true
});
}
throw Object.defineProperty(new Error("Multiple children were passed to <Link> with `href` of `" + hrefProp + "` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children" + (typeof window !== 'undefined' ? " \nOpen your browser's console to view the Component stack trace." : '')), "__NEXT_ERROR_CODE", {
value: "E266",
enumerable: false,
configurable: true
});
}
} else {
child = _react.default.Children.only(children);
}
} else {
if (process.env.NODE_ENV === 'development') {
if ((children == null ? void 0 : children.type) === 'a') {
throw Object.defineProperty(new Error('Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.\nLearn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor'), "__NEXT_ERROR_CODE", {
value: "E209",
enumerable: false,
configurable: true
});
}
}
}
const childRef = legacyBehavior ? child && typeof child === 'object' && child.ref : forwardedRef;
const [setIntersectionRef, isVisible, resetVisible] = (0, _useintersection.useIntersection)({
rootMargin: '200px'
});
const setIntersectionWithResetRef = _react.default.useCallback((el)=>{
// Before the link getting observed, check if visible state need to be reset
if (previousAs.current !== as || previousHref.current !== href) {
resetVisible();
previousAs.current = as;
previousHref.current = href;
}
setIntersectionRef(el);
}, [
as,
href,
resetVisible,
setIntersectionRef
]);
const setRef = (0, _usemergedref.useMergedRef)(setIntersectionWithResetRef, childRef);
// Prefetch the URL if we haven't already and it's visible.
_react.default.useEffect(()=>{
// in dev, we only prefetch on hover to avoid wasting resources as the prefetch will trigger compiling the page.
if (process.env.NODE_ENV !== 'production') {
return;
}
if (!router) {
return;
}
// If we don't need to prefetch the URL, don't do prefetch.
if (!isVisible || !prefetchEnabled) {
return;
}
// Prefetch the URL.
prefetch(router, href, as, {
locale
});
}, [
as,
href,
isVisible,
locale,
prefetchEnabled,
router == null ? void 0 : router.locale,
router
]);
const childProps = {
ref: setRef,
onClick (e) {
if (process.env.NODE_ENV !== 'production') {
if (!e) {
throw Object.defineProperty(new Error('Component rendered inside next/link has to pass click event to "onClick" prop.'), "__NEXT_ERROR_CODE", {
value: "E312",
enumerable: false,
configurable: true
});
}
}
if (!legacyBehavior && typeof onClick === 'function') {
onClick(e);
}
if (legacyBehavior && child.props && typeof child.props.onClick === 'function') {
child.props.onClick(e);
}
if (!router) {
return;
}
if (e.defaultPrevented) {
return;
}
linkClicked(e, router, href, as, replace, shallow, scroll, locale);
},
onMouseEnter (e) {
if (!legacyBehavior && typeof onMouseEnterProp === 'function') {
onMouseEnterProp(e);
}
if (legacyBehavior && child.props && typeof child.props.onMouseEnter === 'function') {
child.props.onMouseEnter(e);
}
if (!router) {
return;
}
prefetch(router, href, as, {
locale,
priority: true,
// @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
bypassPrefetchedCheck: true
});
},
onTouchStart: process.env.__NEXT_LINK_NO_TOUCH_START ? undefined : function onTouchStart(e) {
if (!legacyBehavior && typeof onTouchStartProp === 'function') {
onTouchStartProp(e);
}
if (legacyBehavior && child.props && typeof child.props.onTouchStart === 'function') {
child.props.onTouchStart(e);
}
if (!router) {
return;
}
prefetch(router, href, as, {
locale,
priority: true,
// @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
bypassPrefetchedCheck: true
});
}
};
// 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 the url is absolute, we can bypass the logic to prepend the domain and locale.
if ((0, _utils.isAbsoluteUrl)(as)) {
childProps.href = as;
} else if (!legacyBehavior || passHref || child.type === 'a' && !('href' in child.props)) {
const curLocale = typeof locale !== 'undefined' ? locale : router == null ? void 0 : router.locale;
// we only render domain locales if we are currently on a domain locale
// so that locale links are still visitable in development/preview envs
const localeDomain = (router == null ? void 0 : router.isLocaleDomain) && (0, _getdomainlocale.getDomainLocale)(as, curLocale, router == null ? void 0 : router.locales, router == null ? void 0 : router.domainLocales);
childProps.href = localeDomain || (0, _addbasepath.addBasePath)((0, _addlocale.addLocale)(as, curLocale, router == null ? void 0 : router.defaultLocale));
}
return legacyBehavior ? /*#__PURE__*/ _react.default.cloneElement(child, childProps) : /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
...restProps,
...childProps,
children: children
});
});
const _default = Link;
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=link.js.map