.
This commit is contained in:
Kismet Hasanaj
+142
@@ -0,0 +1,142 @@
|
||||
'use client';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { useCallback, useContext } from 'react';
|
||||
import { addBasePath } from '../add-base-path';
|
||||
import { useMergedRef } from '../use-merged-ref';
|
||||
import { AppRouterContext } from '../../shared/lib/app-router-context.shared-runtime';
|
||||
import { checkFormActionUrl, createFormSubmitDestinationUrl, DISALLOWED_FORM_PROPS, hasReactClientActionAttributes, hasUnsupportedSubmitterAttributes } from '../form-shared';
|
||||
import { mountFormInstance, unmountPrefetchableInstance } from '../components/links';
|
||||
import { FetchStrategy } from '../components/segment-cache/types';
|
||||
export default function Form({ replace, scroll, prefetch: prefetchProp, ref: externalRef, ...props }) {
|
||||
const router = useContext(AppRouterContext);
|
||||
const actionProp = props.action;
|
||||
const isNavigatingForm = typeof actionProp === 'string';
|
||||
// Validate `action`
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (isNavigatingForm) {
|
||||
checkFormActionUrl(actionProp, 'action');
|
||||
}
|
||||
}
|
||||
// Validate `prefetch`
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (!(prefetchProp === undefined || prefetchProp === false || prefetchProp === null)) {
|
||||
console.error('The `prefetch` prop of <Form> must be `false` or `null`');
|
||||
}
|
||||
if (prefetchProp !== undefined && !isNavigatingForm) {
|
||||
console.error('Passing `prefetch` to a <Form> whose `action` is a function has no effect.');
|
||||
}
|
||||
}
|
||||
// TODO(runtime-ppr): allow runtime prefetches in Form
|
||||
const prefetch = prefetchProp === false || prefetchProp === null ? prefetchProp : null;
|
||||
// Validate `scroll` and `replace`
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (!isNavigatingForm && (replace !== undefined || scroll !== undefined)) {
|
||||
console.error('Passing `replace` or `scroll` to a <Form> whose `action` is a function has no effect.\n' + 'See the relevant docs to learn how to control this behavior for navigations triggered from actions:\n' + ' `redirect()` - https://nextjs.org/docs/app/api-reference/functions/redirect#parameters\n' + ' `router.replace()` - https://nextjs.org/docs/app/api-reference/functions/use-router#userouter\n');
|
||||
}
|
||||
}
|
||||
// Clean up any unsupported form props (and warn if present)
|
||||
for (const key of DISALLOWED_FORM_PROPS){
|
||||
if (key in props) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error(`<Form> does not support changing \`${key}\`. ` + (isNavigatingForm ? `If you'd like to use it to perform a mutation, consider making \`action\` a function instead.\n` + `Learn more: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations` : ''));
|
||||
}
|
||||
delete props[key];
|
||||
}
|
||||
}
|
||||
const isPrefetchEnabled = // if we don't have an action path, we can't prefetch anything.
|
||||
!!router && isNavigatingForm && prefetch === null;
|
||||
const observeFormVisibilityOnMount = useCallback((element)=>{
|
||||
if (isPrefetchEnabled && router !== null) {
|
||||
mountFormInstance(element, actionProp, router, // We default to PPR. We'll discover whether or not the route supports it with the initial prefetch.
|
||||
FetchStrategy.PPR);
|
||||
}
|
||||
return ()=>{
|
||||
unmountPrefetchableInstance(element);
|
||||
};
|
||||
}, [
|
||||
isPrefetchEnabled,
|
||||
actionProp,
|
||||
router
|
||||
]);
|
||||
const mergedRef = useMergedRef(observeFormVisibilityOnMount, externalRef ?? null);
|
||||
if (!isNavigatingForm) {
|
||||
return /*#__PURE__*/ _jsx("form", {
|
||||
...props,
|
||||
ref: mergedRef
|
||||
});
|
||||
}
|
||||
const actionHref = addBasePath(actionProp);
|
||||
return /*#__PURE__*/ _jsx("form", {
|
||||
...props,
|
||||
ref: mergedRef,
|
||||
action: actionHref,
|
||||
onSubmit: (event)=>onFormSubmit(event, {
|
||||
router,
|
||||
actionHref,
|
||||
replace,
|
||||
scroll,
|
||||
onSubmit: props.onSubmit
|
||||
})
|
||||
});
|
||||
}
|
||||
function onFormSubmit(event, { actionHref, onSubmit, replace, scroll, router }) {
|
||||
if (typeof onSubmit === 'function') {
|
||||
onSubmit(event);
|
||||
// if the user called event.preventDefault(), do nothing.
|
||||
// (this matches what Link does for `onClick`)
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!router) {
|
||||
// Form was somehow used outside of the router (but not in pages, the implementation is forked!).
|
||||
// We can't perform a soft navigation, so let the native submit handling do its thing.
|
||||
return;
|
||||
}
|
||||
const formElement = event.currentTarget;
|
||||
const submitter = event.nativeEvent.submitter;
|
||||
let action = actionHref;
|
||||
if (submitter) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// the way server actions are encoded (e.g. `formMethod="post")
|
||||
// causes some unnecessary dev-mode warnings from `hasUnsupportedSubmitterAttributes`.
|
||||
// we'd bail out anyway, but we just do it silently.
|
||||
if (hasReactServerActionAttributes(submitter)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (hasUnsupportedSubmitterAttributes(submitter)) {
|
||||
return;
|
||||
}
|
||||
// client actions have `formAction="javascript:..."`. We obviously can't prefetch/navigate to that.
|
||||
if (hasReactClientActionAttributes(submitter)) {
|
||||
return;
|
||||
}
|
||||
// If the submitter specified an alternate formAction,
|
||||
// use that URL instead -- this is what a native form would do.
|
||||
// NOTE: `submitter.formAction` is unreliable, because it will give us `location.href` if it *wasn't* set
|
||||
// NOTE: this should not have `basePath` added, because we can't add it before hydration
|
||||
const submitterFormAction = submitter.getAttribute('formAction');
|
||||
if (submitterFormAction !== null) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
checkFormActionUrl(submitterFormAction, 'formAction');
|
||||
}
|
||||
action = submitterFormAction;
|
||||
}
|
||||
}
|
||||
const targetUrl = createFormSubmitDestinationUrl(action, formElement);
|
||||
// Finally, no more reasons for bailing out.
|
||||
event.preventDefault();
|
||||
const method = replace ? 'replace' : 'push';
|
||||
const targetHref = targetUrl.href;
|
||||
router[method](targetHref, {
|
||||
scroll
|
||||
});
|
||||
}
|
||||
function hasReactServerActionAttributes(submitter) {
|
||||
// https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-client/src/ReactFlightReplyClient.js#L931-L934
|
||||
const name = submitter.getAttribute('name');
|
||||
return name && (name.startsWith('$ACTION_ID_') || name.startsWith('$ACTION_REF_'));
|
||||
}
|
||||
|
||||
//# sourceMappingURL=form.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+379
@@ -0,0 +1,379 @@
|
||||
'use client';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import React, { createContext, useContext, useOptimistic, useRef } from 'react';
|
||||
import { formatUrl } from '../../shared/lib/router/utils/format-url';
|
||||
import { AppRouterContext } from '../../shared/lib/app-router-context.shared-runtime';
|
||||
import { useMergedRef } from '../use-merged-ref';
|
||||
import { isAbsoluteUrl } from '../../shared/lib/utils';
|
||||
import { addBasePath } from '../add-base-path';
|
||||
import { warnOnce } from '../../shared/lib/utils/warn-once';
|
||||
import { ScrollBehavior } from '../components/router-reducer/router-reducer-types';
|
||||
import { IDLE_LINK_STATUS, mountLinkInstance, onNavigationIntent, unmountLinkForCurrentNavigation, unmountPrefetchableInstance } from '../components/links';
|
||||
import { isLocalURL } from '../../shared/lib/router/utils/is-local-url';
|
||||
import { FetchStrategy } from '../components/segment-cache/types';
|
||||
import { errorOnce } from '../../shared/lib/utils/error-once';
|
||||
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, href, linkInstanceRef, replace, scroll, onNavigate, transitionTypes) {
|
||||
if (typeof window !== 'undefined') {
|
||||
const { nodeName } = e.currentTarget;
|
||||
// anchors inside an svg have a lowercase nodeName
|
||||
const isAnchorNodeName = nodeName.toUpperCase() === 'A';
|
||||
if (isAnchorNodeName && isModifiedEvent(e) || e.currentTarget.hasAttribute('download')) {
|
||||
// ignore click for browser’s default behavior
|
||||
return;
|
||||
}
|
||||
if (!isLocalURL(href)) {
|
||||
if (replace) {
|
||||
// browser default behavior does not replace the history state
|
||||
// so we need to do it manually
|
||||
e.preventDefault();
|
||||
location.replace(href);
|
||||
}
|
||||
// ignore click for browser’s default behavior
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
if (onNavigate) {
|
||||
let isDefaultPrevented = false;
|
||||
onNavigate({
|
||||
preventDefault: ()=>{
|
||||
isDefaultPrevented = true;
|
||||
}
|
||||
});
|
||||
if (isDefaultPrevented) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
const { dispatchNavigateAction } = require('../components/app-router-instance');
|
||||
React.startTransition(()=>{
|
||||
dispatchNavigateAction(href, replace ? 'replace' : 'push', scroll === false ? ScrollBehavior.NoScroll : ScrollBehavior.Default, linkInstanceRef.current, transitionTypes);
|
||||
});
|
||||
}
|
||||
}
|
||||
function formatStringOrUrl(urlObjOrString) {
|
||||
if (typeof urlObjOrString === 'string') {
|
||||
return urlObjOrString;
|
||||
}
|
||||
return 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. This is the primary way to navigate between routes in Next.js.
|
||||
*
|
||||
* @remarks
|
||||
* - Prefetching is only enabled in production.
|
||||
*
|
||||
* @see https://nextjs.org/docs/app/api-reference/components/link
|
||||
*/ export default function LinkComponent(props) {
|
||||
const [linkStatus, setOptimisticLinkStatus] = useOptimistic(IDLE_LINK_STATUS);
|
||||
let children;
|
||||
const linkInstanceRef = useRef(null);
|
||||
const { href: hrefProp, as: asProp, children: childrenProp, prefetch: prefetchProp = null, passHref, replace, shallow, scroll, onClick, onMouseEnter: onMouseEnterProp, onTouchStart: onTouchStartProp, legacyBehavior = false, onNavigate, transitionTypes, ref: forwardedRef, unstable_dynamicOnHover, ...restProps } = props;
|
||||
children = childrenProp;
|
||||
if (legacyBehavior && (typeof children === 'string' || typeof children === 'number')) {
|
||||
children = /*#__PURE__*/ _jsx("a", {
|
||||
children: children
|
||||
});
|
||||
}
|
||||
const router = React.useContext(AppRouterContext);
|
||||
const prefetchEnabled = prefetchProp !== false;
|
||||
const fetchStrategy = prefetchProp !== false ? getFetchStrategyFromPrefetchProp(prefetchProp) : FetchStrategy.PPR;
|
||||
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:
|
||||
const _ = key;
|
||||
}
|
||||
});
|
||||
// TypeScript trick for type-guarding:
|
||||
const optionalPropsGuard = {
|
||||
as: true,
|
||||
replace: true,
|
||||
scroll: true,
|
||||
shallow: true,
|
||||
passHref: true,
|
||||
prefetch: true,
|
||||
unstable_dynamicOnHover: true,
|
||||
onClick: true,
|
||||
onMouseEnter: true,
|
||||
onTouchStart: true,
|
||||
legacyBehavior: true,
|
||||
onNavigate: true,
|
||||
transitionTypes: 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 === 'onClick' || key === 'onMouseEnter' || key === 'onTouchStart' || key === 'onNavigate') {
|
||||
if (props[key] && valType !== 'function') {
|
||||
throw createPropError({
|
||||
key,
|
||||
expected: '`function`',
|
||||
actual: valType
|
||||
});
|
||||
}
|
||||
} else if (key === 'replace' || key === 'scroll' || key === 'shallow' || key === 'passHref' || key === 'legacyBehavior' || key === 'unstable_dynamicOnHover') {
|
||||
if (props[key] != null && valType !== 'boolean') {
|
||||
throw createPropError({
|
||||
key,
|
||||
expected: '`boolean`',
|
||||
actual: valType
|
||||
});
|
||||
}
|
||||
} else if (key === 'prefetch') {
|
||||
if (props[key] != null && valType !== 'boolean' && props[key] !== 'auto') {
|
||||
throw createPropError({
|
||||
key,
|
||||
expected: '`boolean | "auto"`',
|
||||
actual: valType
|
||||
});
|
||||
}
|
||||
} else if (key === 'transitionTypes') {
|
||||
if (props[key] != null && !Array.isArray(props[key])) {
|
||||
throw createPropError({
|
||||
key,
|
||||
expected: '`string[]`',
|
||||
actual: valType
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// TypeScript trick for type-guarding:
|
||||
const _ = key;
|
||||
}
|
||||
});
|
||||
}
|
||||
const resolvedHref = asProp || hrefProp;
|
||||
const formattedHref = formatStringOrUrl(resolvedHref);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (props.locale) {
|
||||
warnOnce('The `locale` prop is not supported in `next/link` while using the `app` router. Read more about app router internalization: https://nextjs.org/docs/app/building-your-application/routing/internationalization');
|
||||
}
|
||||
if (!asProp) {
|
||||
let href;
|
||||
if (typeof resolvedHref === 'string') {
|
||||
href = resolvedHref;
|
||||
} else if (typeof resolvedHref === 'object' && typeof resolvedHref.pathname === 'string') {
|
||||
href = resolvedHref.pathname;
|
||||
}
|
||||
if (href) {
|
||||
const hasDynamicSegment = href.split('/').some((segment)=>segment.startsWith('[') && segment.endsWith(']'));
|
||||
if (hasDynamicSegment) {
|
||||
throw Object.defineProperty(new Error(`Dynamic href \`${href}\` found in <Link> while using the \`/app\` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href`), "__NEXT_ERROR_CODE", {
|
||||
value: "E267",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// This will return the first child, if multiple are provided it will throw an error
|
||||
let child;
|
||||
if (legacyBehavior) {
|
||||
if (children?.$$typeof === Symbol.for('react.lazy')) {
|
||||
throw Object.defineProperty(new Error(`\`<Link legacyBehavior>\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \`<a>\` tag.`), "__NEXT_ERROR_CODE", {
|
||||
value: "E863",
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (onClick) {
|
||||
console.warn(`"onClick" was passed to <Link> with \`href\` of \`${formattedHref}\` 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 \`${formattedHref}\` but "legacyBehavior" was set. The legacy behavior requires onMouseEnter be set on the child of next/link`);
|
||||
}
|
||||
try {
|
||||
child = React.Children.only(children);
|
||||
} catch (err) {
|
||||
if (!children) {
|
||||
throw Object.defineProperty(new Error(`No children were passed to <Link> with \`href\` of \`${formattedHref}\` 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 \`${formattedHref}\` 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.Children.only(children);
|
||||
}
|
||||
} else {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (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;
|
||||
// Use a callback ref to attach an IntersectionObserver to the anchor tag on
|
||||
// mount. In the future we will also use this to keep track of all the
|
||||
// currently mounted <Link> instances, e.g. so we can re-prefetch them after
|
||||
// a revalidation or refresh.
|
||||
const observeLinkVisibilityOnMount = React.useCallback((element)=>{
|
||||
if (router !== null) {
|
||||
linkInstanceRef.current = mountLinkInstance(element, formattedHref, router, fetchStrategy, prefetchEnabled, setOptimisticLinkStatus);
|
||||
}
|
||||
return ()=>{
|
||||
if (linkInstanceRef.current) {
|
||||
unmountLinkForCurrentNavigation(linkInstanceRef.current);
|
||||
linkInstanceRef.current = null;
|
||||
}
|
||||
unmountPrefetchableInstance(element);
|
||||
};
|
||||
}, [
|
||||
prefetchEnabled,
|
||||
formattedHref,
|
||||
router,
|
||||
fetchStrategy,
|
||||
setOptimisticLinkStatus
|
||||
]);
|
||||
const mergedRef = useMergedRef(observeLinkVisibilityOnMount, childRef);
|
||||
const childProps = {
|
||||
ref: mergedRef,
|
||||
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, formattedHref, linkInstanceRef, replace, scroll, onNavigate, transitionTypes);
|
||||
},
|
||||
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;
|
||||
}
|
||||
if (!prefetchEnabled || process.env.NODE_ENV === 'development') {
|
||||
return;
|
||||
}
|
||||
const upgradeToDynamicPrefetch = unstable_dynamicOnHover === true;
|
||||
onNavigationIntent(e.currentTarget, upgradeToDynamicPrefetch);
|
||||
},
|
||||
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;
|
||||
}
|
||||
if (!prefetchEnabled) {
|
||||
return;
|
||||
}
|
||||
const upgradeToDynamicPrefetch = unstable_dynamicOnHover === true;
|
||||
onNavigationIntent(e.currentTarget, upgradeToDynamicPrefetch);
|
||||
}
|
||||
};
|
||||
// If the url is absolute, we can bypass the logic to prepend the basePath.
|
||||
if (isAbsoluteUrl(formattedHref)) {
|
||||
childProps.href = formattedHref;
|
||||
} else if (!legacyBehavior || passHref || child.type === 'a' && !('href' in child.props)) {
|
||||
childProps.href = addBasePath(formattedHref);
|
||||
}
|
||||
let link;
|
||||
if (legacyBehavior) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
errorOnce('`legacyBehavior` is deprecated and will be removed in a future ' + 'release. A codemod is available to upgrade your components:\n\n' + 'npx @next/codemod@latest new-link .\n\n' + 'Learn more: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#remove-a-tags-from-link-components');
|
||||
}
|
||||
link = /*#__PURE__*/ React.cloneElement(child, childProps);
|
||||
} else {
|
||||
link = /*#__PURE__*/ _jsx("a", {
|
||||
...restProps,
|
||||
...childProps,
|
||||
children: children
|
||||
});
|
||||
}
|
||||
return /*#__PURE__*/ _jsx(LinkStatusContext.Provider, {
|
||||
value: linkStatus,
|
||||
children: link
|
||||
});
|
||||
}
|
||||
const LinkStatusContext = /*#__PURE__*/ createContext(IDLE_LINK_STATUS);
|
||||
export const useLinkStatus = ()=>{
|
||||
return useContext(LinkStatusContext);
|
||||
};
|
||||
function getFetchStrategyFromPrefetchProp(prefetchProp) {
|
||||
if (process.env.__NEXT_CACHE_COMPONENTS) {
|
||||
if (prefetchProp === true) {
|
||||
return FetchStrategy.Full;
|
||||
}
|
||||
// `null` or `"auto"`: this is the default "auto" mode, where we will prefetch partially if the link is in the viewport.
|
||||
// This will also include invalid prop values that don't match the types specified here.
|
||||
// (although those should've been filtered out by prop validation in dev)
|
||||
prefetchProp;
|
||||
return FetchStrategy.PPR;
|
||||
} else {
|
||||
return prefetchProp === null || prefetchProp === 'auto' ? FetchStrategy.PPR : // To preserve backwards-compatibility, anything other than `false`, `null`, or `"auto"` results in a full prefetch.
|
||||
// (although invalid values should've been filtered out by prop validation in dev)
|
||||
FetchStrategy.Full;
|
||||
}
|
||||
}
|
||||
|
||||
//# sourceMappingURL=link.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+20
@@ -0,0 +1,20 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import ClientLinkComponent, { useLinkStatus } from './link';
|
||||
export default function LinkComponent(props) {
|
||||
const isLegacyBehavior = props.legacyBehavior;
|
||||
const childIsHostComponent = typeof props.children === 'string' || typeof props.children === 'number' || typeof props.children?.type === 'string';
|
||||
const childIsClientComponent = props.children?.type?.$$typeof === Symbol.for('react.client.reference');
|
||||
if (isLegacyBehavior && !childIsHostComponent && !childIsClientComponent) {
|
||||
if (props.children?.type?.$$typeof === Symbol.for('react.lazy')) {
|
||||
console.error(`Using a Lazy Component as a direct child of \`<Link legacyBehavior>\` from a Server Component is not supported. If you need legacyBehavior, wrap your Lazy Component in a Client Component that renders the Link's \`<a>\` tag.`);
|
||||
} else {
|
||||
console.error(`Using a Server Component as a direct child of \`<Link legacyBehavior>\` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's \`<a>\` tag.`);
|
||||
}
|
||||
}
|
||||
return /*#__PURE__*/ _jsx(ClientLinkComponent, {
|
||||
...props
|
||||
});
|
||||
}
|
||||
export { useLinkStatus };
|
||||
|
||||
//# sourceMappingURL=link.react-server.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/client/app-dir/link.react-server.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\nimport ClientLinkComponent, { type LinkProps, useLinkStatus } from './link'\n\nexport default function LinkComponent(\n props: ComponentProps<typeof ClientLinkComponent>\n) {\n const isLegacyBehavior = props.legacyBehavior\n const childIsHostComponent =\n typeof props.children === 'string' ||\n typeof props.children === 'number' ||\n typeof (props.children as any)?.type === 'string'\n const childIsClientComponent =\n (props.children as any)?.type?.$$typeof ===\n Symbol.for('react.client.reference')\n\n if (isLegacyBehavior && !childIsHostComponent && !childIsClientComponent) {\n if ((props.children as any)?.type?.$$typeof === Symbol.for('react.lazy')) {\n console.error(\n `Using a Lazy Component as a direct child of \\`<Link legacyBehavior>\\` from a Server Component is not supported. If you need legacyBehavior, wrap your Lazy Component in a Client Component that renders the Link's \\`<a>\\` tag.`\n )\n } else {\n console.error(\n `Using a Server Component as a direct child of \\`<Link legacyBehavior>\\` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's \\`<a>\\` tag.`\n )\n }\n }\n\n return <ClientLinkComponent {...props} />\n}\n\nexport { type LinkProps, useLinkStatus }\n"],"names":["ClientLinkComponent","useLinkStatus","LinkComponent","props","isLegacyBehavior","legacyBehavior","childIsHostComponent","children","type","childIsClientComponent","$$typeof","Symbol","for","console","error"],"mappings":";AACA,OAAOA,uBAAuCC,aAAa,QAAQ,SAAQ;AAE3E,eAAe,SAASC,cACtBC,KAAiD;IAEjD,MAAMC,mBAAmBD,MAAME,cAAc;IAC7C,MAAMC,uBACJ,OAAOH,MAAMI,QAAQ,KAAK,YAC1B,OAAOJ,MAAMI,QAAQ,KAAK,YAC1B,OAAQJ,MAAMI,QAAQ,EAAUC,SAAS;IAC3C,MAAMC,yBACJ,AAACN,MAAMI,QAAQ,EAAUC,MAAME,aAC/BC,OAAOC,GAAG,CAAC;IAEb,IAAIR,oBAAoB,CAACE,wBAAwB,CAACG,wBAAwB;QACxE,IAAI,AAACN,MAAMI,QAAQ,EAAUC,MAAME,aAAaC,OAAOC,GAAG,CAAC,eAAe;YACxEC,QAAQC,KAAK,CACX,CAAC,+NAA+N,CAAC;QAErO,OAAO;YACLD,QAAQC,KAAK,CACX,CAAC,2MAA2M,CAAC;QAEjN;IACF;IAEA,qBAAO,KAACd;QAAqB,GAAGG,KAAK;;AACvC;AAEA,SAAyBF,aAAa,GAAE","ignoreList":[0]}
|
||||
Reference in New Issue
Block a user