next 15.2.0-canary.75 → 15.2.0-canary.76

package/dist/bin/next

@@ -79,7 +79,7 @@ const program = new NextRootCommand();
 program.name('next').description('The Next.js CLI allows you to develop, build, start your application, and more.').configureHelp({
     formatHelp: (cmd, helper)=>(0, _formatclihelpoutput.formatCliHelpOutput)(cmd, helper),
     subcommandTerm: (cmd)=>`${cmd.name()} ${cmd.usage()}`
-}).helpCommand(false).helpOption('-h, --help', 'Displays this message.').version(`Next.js v${"15.2.0-canary.75"}`, '-v, --version', 'Outputs the Next.js version.');
+}).helpCommand(false).helpOption('-h, --help', 'Displays this message.').version(`Next.js v${"15.2.0-canary.76"}`, '-v, --version', 'Outputs the Next.js version.');
 program.command('build').description('Creates an optimized production build of your application. The output displays information about each route.').argument('[directory]', `A directory on which to build the application. ${(0, _picocolors.italic)('If no directory is provided, the current directory will be used.')}`).option('-d, --debug', 'Enables a more verbose build output.').option('--no-lint', 'Disables linting.').option('--no-mangling', 'Disables mangling.').option('--profile', 'Enables production profiling for React.').option('--experimental-app-only', 'Builds only App Router routes.').addOption(new _commander.Option('--experimental-turbo').hideHelp()).addOption(new _commander.Option('--experimental-build-mode [mode]', 'Uses an experimental build mode.').choices([
     'compile',
     'generate'

package/dist/build/index.js

@@ -364,7 +364,7 @@ async function build(dir, reactProductionProfiling = false, debugOutput = false,
         const nextBuildSpan = (0, _trace.trace)('next-build', undefined, {
             buildMode: experimentalBuildMode,
             isTurboBuild: String(turboNextBuild),
-            version: "15.2.0-canary.75"
+            version: "15.2.0-canary.76"
         });
         _buildcontext.NextBuildContext.nextBuildSpan = nextBuildSpan;
         _buildcontext.NextBuildContext.dir = dir;
@@ -723,7 +723,7 @@ async function build(dir, reactProductionProfiling = false, debugOutput = false,
             // Files outside of the distDir can be "type": "module"
             await writeFileUtf8(_path.default.join(distDir, 'package.json'), '{"type": "commonjs"}');
             // These are written to distDir, so they need to come after creating and cleaning distDr.
-            await (0, _builddiagnostics.recordFrameworkVersion)("15.2.0-canary.75");
+            await (0, _builddiagnostics.recordFrameworkVersion)("15.2.0-canary.76");
             await (0, _builddiagnostics.updateBuildDiagnostics)({
                 buildStage: 'start'
             });

package/dist/build/swc/index.js

@@ -119,7 +119,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const nextVersion = "15.2.0-canary.75";
+const nextVersion = "15.2.0-canary.76";
 const ArchName = (0, _os.arch)();
 const PlatformName = (0, _os.platform)();
 function infoLog(...args) {

package/dist/build/webpack-config.js

@@ -1624,7 +1624,7 @@ async function getBaseWebpackConfig(dir, { buildId, encryptionKey, config, compi
             isClient && new _copyfileplugin.CopyFilePlugin({
                 // file path to build output of `@next/polyfill-nomodule`
                 filePath: require.resolve('./polyfills/polyfill-nomodule'),
-                cacheKey: "15.2.0-canary.75",
+                cacheKey: "15.2.0-canary.76",
                 name: `static/chunks/polyfills${dev ? '' : '-[hash]'}.js`,
                 minimize: false,
                 info: {
@@ -1801,7 +1801,7 @@ async function getBaseWebpackConfig(dir, { buildId, encryptionKey, config, compi
         //  - Next.js location on disk (some loaders use absolute paths and some resolve options depend on absolute paths)
         //  - Next.js version
         //  - next.config.js keys that affect compilation
-        version: `${__dirname}|${"15.2.0-canary.75"}|${configVars}`,
+        version: `${__dirname}|${"15.2.0-canary.76"}|${configVars}`,
         cacheDirectory: _path.default.join(distDir, 'cache', 'webpack'),
         // For production builds, it's more efficient to compress all cache files together instead of compression each one individually.
         // So we disable compression here and allow the build runner to take care of compressing the cache as a whole.

package/dist/client/app-bootstrap.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "appBootstrap", {
         return appBootstrap;
     }
 });
-const version = "15.2.0-canary.75";
+const version = "15.2.0-canary.76";
 window.next = {
     version,
     appDir: true

package/dist/client/app-dir/form.d.ts

@@ -1,44 +1,3 @@
-import { type HTMLProps } from 'react';
-declare const DISALLOWED_FORM_PROPS: readonly ["method", "encType", "target"];
-type HTMLFormProps = HTMLProps<HTMLFormElement>;
-type DisallowedFormProps = (typeof DISALLOWED_FORM_PROPS)[number];
-type InternalFormProps = {
-    /**
-     * `action` can be either a `string` or a function.
-     * - If `action` is a string, it will be interpreted as a path or URL to navigate to when the form is submitted.
-     *   The path will be prefetched when the form becomes visible.
-     * - If `action` is a function, it will be called when the form is submitted. See the [React docs](https://react.dev/reference/react-dom/components/form#props) for more.
-     */
-    action: NonNullable<HTMLFormProps['action']>;
-    /**
-     * Controls how the route specified by `action` is prefetched.
-     * Any `<Form />` that is in the viewport (initially or through scroll) will be prefetched.
-     * Prefetch can be disabled by passing `prefetch={false}`. Prefetching is only enabled in production.
-     *
-     * Options:
-     * - `null` (default): For statically generated pages, this will prefetch the full React Server Component data. For dynamic pages, this will prefetch up to the nearest route segment with a [`loading.js`](https://nextjs.org/docs/app/api-reference/file-conventions/loading) file. If there is no loading file, it will not fetch the full tree to avoid fetching too much data.
-     * - `false`: This will not prefetch any data.
-     *
-     * In pages dir, prefetching is not supported, and passing this prop will emit a warning.
-     *
-     * @defaultValue `null`
-     */
-    prefetch?: false | null;
-    /**
-     * Whether submitting the form should replace the current `history` state instead of adding a new url into the stack.
-     * Only valid if `action` is a string.
-     *
-     * @defaultValue `false`
-     */
-    replace?: boolean;
-    /**
-     * Override the default scroll behavior when navigating.
-     * Only valid if `action` is a string.
-     *
-     * @defaultValue `true`
-     */
-    scroll?: boolean;
-} & Omit<HTMLFormProps, 'action' | DisallowedFormProps>;
-export type FormProps<RouteInferType = any> = InternalFormProps;
+import { type FormProps } from '../form-shared';
+export type { FormProps };
 export default function Form({ replace, scroll, prefetch: prefetchProp, ref: externalRef, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/client/app-dir/form.js

@@ -16,21 +16,16 @@ const _useintersection = require("../use-intersection");
 const _usemergedref = require("../use-merged-ref");
 const _approutercontextsharedruntime = require("../../shared/lib/app-router-context.shared-runtime");
 const _routerreducertypes = require("../components/router-reducer/router-reducer-types");
-const _routercontextsharedruntime = require("../../shared/lib/router-context.shared-runtime");
-const DISALLOWED_FORM_PROPS = [
-    'method',
-    'encType',
-    'target'
-];
+const _formshared = require("../form-shared");
 function Form(param) {
     let { replace, scroll, prefetch: prefetchProp, ref: externalRef, ...props } = param;
-    const router = useAppOrPagesRouter();
+    const router = (0, _react.useContext)(_approutercontextsharedruntime.AppRouterContext);
     const actionProp = props.action;
     const isNavigatingForm = typeof actionProp === 'string';
     // Validate `action`
     if (process.env.NODE_ENV === 'development') {
         if (isNavigatingForm) {
-            checkActionUrl(actionProp, 'action');
+            (0, _formshared.checkFormActionUrl)(actionProp, 'action');
         }
     }
     // Validate `prefetch`
@@ -38,12 +33,8 @@ function Form(param) {
         if (!(prefetchProp === undefined || prefetchProp === false || prefetchProp === null)) {
             console.error('The `prefetch` prop of <Form> must be `false` or `null`');
         }
-        if (prefetchProp !== undefined) {
-            if (!isAppRouter(router)) {
-                console.error('Passing `prefetch` to a <Form> has no effect in the pages directory.');
-            } else if (!isNavigatingForm) {
-                console.error('Passing `prefetch` to a <Form> whose `action` is a function has no effect.');
-            }
+        if (prefetchProp !== undefined && !isNavigatingForm) {
+            console.error('Passing `prefetch` to a <Form> whose `action` is a function has no effect.');
         }
     }
     const prefetch = prefetchProp === false || prefetchProp === null ? prefetchProp : null;
@@ -54,7 +45,7 @@ function Form(param) {
         }
     }
     // Clean up any unsupported form props (and warn if present)
-    for (const key of DISALLOWED_FORM_PROPS){
+    for (const key of _formshared.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" : ''));
@@ -62,9 +53,8 @@ function Form(param) {
             delete props[key];
         }
     }
-    const isPrefetchEnabled = // there is no notion of instant loading states in pages dir, so prefetching is pointless
-    isAppRouter(router) && // if we don't have an action path, we can't preload anything anyway.
-    isNavigatingForm && prefetch === null;
+    const isPrefetchEnabled = // if we don't have an action path, we can't prefetch anything.
+    !!router && isNavigatingForm && prefetch === null;
     const [setIntersectionRef, isVisible] = (0, _useintersection.useIntersection)({
         rootMargin: '200px',
         disabled: !isPrefetchEnabled
@@ -119,6 +109,11 @@ function onFormSubmit(event, param) {
             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;
@@ -131,11 +126,11 @@ function onFormSubmit(event, param) {
                 return;
             }
         }
-        if (hasUnsupportedSubmitterAttributes(submitter)) {
+        if ((0, _formshared.hasUnsupportedSubmitterAttributes)(submitter)) {
             return;
         }
         // client actions have `formAction="javascript:..."`. We obviously can't prefetch/navigate to that.
-        if (hasReactClientActionAttributes(submitter)) {
+        if ((0, _formshared.hasReactClientActionAttributes)(submitter)) {
             return;
         }
         // If the submitter specified an alternate formAction,
@@ -145,144 +140,25 @@ function onFormSubmit(event, param) {
         const submitterFormAction = submitter.getAttribute('formAction');
         if (submitterFormAction !== null) {
             if (process.env.NODE_ENV === 'development') {
-                checkActionUrl(submitterFormAction, 'formAction');
+                (0, _formshared.checkFormActionUrl)(submitterFormAction, 'formAction');
             }
             action = submitterFormAction;
         }
     }
-    let targetUrl;
-    try {
-        // NOTE: It might be more correct to resolve URLs relative to `document.baseURI`,
-        // but we already do it relative to `location.href` elsewhere:
-        //  (see e.g. https://github.com/vercel/next.js/blob/bb0e6722f87ceb2d43015f5b8a413d0072f2badf/packages/next/src/client/components/app-router.tsx#L146)
-        // so it's better to stay consistent.
-        const base = window.location.href;
-        targetUrl = new URL(action, base);
-    } catch (err) {
-        throw Object.defineProperty(new Error('Cannot parse form action "' + action + '" as a URL', {
-            cause: err
-        }), "__NEXT_ERROR_CODE", {
-            value: "E152",
-            enumerable: false,
-            configurable: true
-        });
-    }
-    if (targetUrl.searchParams.size) {
-        // url-encoded HTML forms *overwrite* any search params in the `action` url:
-        //
-        //  "Let `query` be the result of running the application/x-www-form-urlencoded serializer [...]"
-        //  "Set parsed action's query component to `query`."
-        //   https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#submit-mutate-action
-        //
-        // We need to match that.
-        // (note that all other parts of the URL, like `hash`, are preserved)
-        targetUrl.search = '';
-    }
-    const formData = new FormData(formElement);
-    for (let [name, value] of formData){
-        if (typeof value !== 'string') {
-            // For file inputs, the native browser behavior is to use the filename as the value instead:
-            //
-            //   "If entry's value is a File object, then let value be entry's value's name. Otherwise, let value be entry's value."
-            //   https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs
-            //
-            if (process.env.NODE_ENV === 'development') {
-                console.warn("<Form> only supports file inputs if `action` is a function. File inputs cannot be used if `action` is a string, " + "because files cannot be encoded as search params.");
-            }
-            value = value.name;
-        }
-        targetUrl.searchParams.append(name, value);
-    }
+    const targetUrl = (0, _formshared.createFormSubmitDestinationUrl)(action, formElement);
     // Finally, no more reasons for bailing out.
     event.preventDefault();
     const method = replace ? 'replace' : 'push';
     const targetHref = targetUrl.href;
-    if (isAppRouter(router)) {
-        router[method](targetHref, {
-            scroll
-        });
-    } else {
-        // TODO(form): Make this use a transition so that pending states work
-        //
-        // Unlike the app router, pages router doesn't use startTransition,
-        // and can't easily be wrapped in one because of implementation details
-        // (e.g. it doesn't use any react state)
-        // But it's important to have this wrapped in a transition because
-        // pending states from e.g. `useFormStatus` rely on that.
-        // So this needs some follow up work.
-        router[method](targetHref, undefined, {
-            scroll
-        });
-    }
-}
-function isAppRouter(router) {
-    return !('asPath' in router);
-}
-function useAppOrPagesRouter() {
-    const pagesRouter = (0, _react.useContext)(_routercontextsharedruntime.RouterContext);
-    const appRouter = (0, _react.useContext)(_approutercontextsharedruntime.AppRouterContext);
-    if (pagesRouter) {
-        return pagesRouter;
-    } else {
-        // We're in the app directory if there is no pages router.
-        return appRouter;
-    }
-}
-function checkActionUrl(action, source) {
-    const aPropName = source === 'action' ? "an `action`" : "a `formAction`";
-    let testUrl;
-    try {
-        testUrl = new URL(action, 'http://n');
-    } catch (err) {
-        console.error("<Form> received " + aPropName + ' that cannot be parsed as a URL: "' + action + '".');
-        return;
-    }
-    // url-encoded HTML forms ignore any queryparams in the `action` url. We need to match that.
-    if (testUrl.searchParams.size) {
-        console.warn("<Form> received " + aPropName + ' that contains search params: "' + action + '". This is not supported, and they will be ignored. ' + 'If you need to pass in additional search params, use an `<input type="hidden" />` instead.');
-    }
-}
-const isSupportedEncType = (value)=>value === 'application/x-www-form-urlencoded';
-const isSupportedMethod = (value)=>value === 'get';
-const isSupportedTarget = (value)=>value === '_self';
-function hasUnsupportedSubmitterAttributes(submitter) {
-    // A submitter can override `encType` for the form.
-    const formEncType = submitter.getAttribute('formEncType');
-    if (formEncType !== null && !isSupportedEncType(formEncType)) {
-        if (process.env.NODE_ENV === 'development') {
-            console.error("<Form>'s `encType` was set to an unsupported value via `formEncType=\"" + formEncType + '"`. ' + "This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.");
-        }
-        return true;
-    }
-    // A submitter can override `method` for the form.
-    const formMethod = submitter.getAttribute('formMethod');
-    if (formMethod !== null && !isSupportedMethod(formMethod)) {
-        if (process.env.NODE_ENV === 'development') {
-            console.error("<Form>'s `method` was set to an unsupported value via `formMethod=\"" + formMethod + '"`. ' + "This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.");
-        }
-        return true;
-    }
-    // A submitter can override `target` for the form.
-    const formTarget = submitter.getAttribute('formTarget');
-    if (formTarget !== null && !isSupportedTarget(formTarget)) {
-        if (process.env.NODE_ENV === 'development') {
-            console.error("<Form>'s `target` was set to an unsupported value via `formTarget=\"" + formTarget + '"`. ' + "This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.");
-        }
-        return true;
-    }
-    return false;
+    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_'));
 }
-function hasReactClientActionAttributes(submitter) {
-    // CSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L482-L487
-    // SSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L2401
-    const action = submitter.getAttribute('formAction');
-    return action && /\s*javascript:/i.test(action);
-}
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/app-dir/form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/client/app-dir/form.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, type HTMLProps, type FormEvent, useContext } from 'react'\nimport { addBasePath } from '../add-base-path'\nimport { useIntersection } from '../use-intersection'\nimport { useMergedRef } from '../use-merged-ref'\nimport {\n  AppRouterContext,\n  type AppRouterInstance,\n} from '../../shared/lib/app-router-context.shared-runtime'\nimport { PrefetchKind } from '../components/router-reducer/router-reducer-types'\nimport { RouterContext } from '../../shared/lib/router-context.shared-runtime'\nimport type { NextRouter } from '../router'\n\nconst DISALLOWED_FORM_PROPS = ['method', 'encType', 'target'] as const\n\ntype HTMLFormProps = HTMLProps<HTMLFormElement>\ntype DisallowedFormProps = (typeof DISALLOWED_FORM_PROPS)[number]\n\ntype InternalFormProps = {\n  /**\n   * `action` can be either a `string` or a function.\n   * - If `action` is a string, it will be interpreted as a path or URL to navigate to when the form is submitted.\n   *   The path will be prefetched when the form becomes visible.\n   * - If `action` is a function, it will be called when the form is submitted. See the [React docs](https://react.dev/reference/react-dom/components/form#props) for more.\n   */\n  action: NonNullable<HTMLFormProps['action']>\n  /**\n   * Controls how the route specified by `action` is prefetched.\n   * Any `<Form />` that is in the viewport (initially or through scroll) will be prefetched.\n   * Prefetch can be disabled by passing `prefetch={false}`. Prefetching is only enabled in production.\n   *\n   * Options:\n   * - `null` (default): For statically generated pages, this will prefetch the full React Server Component data. For dynamic pages, this will prefetch up to the nearest route segment with a [`loading.js`](https://nextjs.org/docs/app/api-reference/file-conventions/loading) file. If there is no loading file, it will not fetch the full tree to avoid fetching too much data.\n   * - `false`: This will not prefetch any data.\n   *\n   * In pages dir, prefetching is not supported, and passing this prop will emit a warning.\n   *\n   * @defaultValue `null`\n   */\n  prefetch?: false | null\n  /**\n   * Whether submitting the form should replace the current `history` state instead of adding a new url into the stack.\n   * Only valid if `action` is a string.\n   *\n   * @defaultValue `false`\n   */\n  replace?: boolean\n  /**\n   * Override the default scroll behavior when navigating.\n   * Only valid if `action` is a string.\n   *\n   * @defaultValue `true`\n   */\n  scroll?: boolean\n} & Omit<HTMLFormProps, 'action' | DisallowedFormProps>\n\n// `RouteInferType` is a stub here to avoid breaking `typedRoutes` when the type\n// isn't generated yet. It will be replaced when the webpack plugin runs.\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type FormProps<RouteInferType = any> = InternalFormProps\n\nexport default function Form({\n  replace,\n  scroll,\n  prefetch: prefetchProp,\n  ref: externalRef,\n  ...props\n}: FormProps) {\n  const router = useAppOrPagesRouter()\n\n  const actionProp = props.action\n  const isNavigatingForm = typeof actionProp === 'string'\n\n  // Validate `action`\n  if (process.env.NODE_ENV === 'development') {\n    if (isNavigatingForm) {\n      checkActionUrl(actionProp, 'action')\n    }\n  }\n\n  // Validate `prefetch`\n  if (process.env.NODE_ENV === 'development') {\n    if (\n      !(\n        prefetchProp === undefined ||\n        prefetchProp === false ||\n        prefetchProp === null\n      )\n    ) {\n      console.error('The `prefetch` prop of <Form> must be `false` or `null`')\n    }\n\n    if (prefetchProp !== undefined) {\n      if (!isAppRouter(router)) {\n        console.error(\n          'Passing `prefetch` to a <Form> has no effect in the pages directory.'\n        )\n      } else if (!isNavigatingForm) {\n        console.error(\n          'Passing `prefetch` to a <Form> whose `action` is a function has no effect.'\n        )\n      }\n    }\n  }\n\n  const prefetch =\n    prefetchProp === false || prefetchProp === null ? prefetchProp : null\n\n  // Validate `scroll` and `replace`\n  if (process.env.NODE_ENV === 'development') {\n    if (!isNavigatingForm && (replace !== undefined || scroll !== undefined)) {\n      console.error(\n        'Passing `replace` or `scroll` to a <Form> whose `action` is a function has no effect.\\n' +\n          'See the relevant docs to learn how to control this behavior for navigations triggered from actions:\\n' +\n          '  `redirect()`       - https://nextjs.org/docs/app/api-reference/functions/redirect#parameters\\n' +\n          '  `router.replace()` - https://nextjs.org/docs/app/api-reference/functions/use-router#userouter\\n'\n      )\n    }\n  }\n\n  // Clean up any unsupported form props (and warn if present)\n  for (const key of DISALLOWED_FORM_PROPS) {\n    if (key in props) {\n      if (process.env.NODE_ENV === 'development') {\n        console.error(\n          `<Form> does not support changing \\`${key}\\`. ` +\n            (isNavigatingForm\n              ? `If you'd like to use it to perform a mutation, consider making \\`action\\` a function instead.\\n` +\n                `Learn more: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations`\n              : '')\n        )\n      }\n      delete (props as Record<string, unknown>)[key]\n    }\n  }\n\n  const isPrefetchEnabled =\n    // there is no notion of instant loading states in pages dir, so prefetching is pointless\n    isAppRouter(router) &&\n    // if we don't have an action path, we can't preload anything anyway.\n    isNavigatingForm &&\n    prefetch === null\n\n  const [setIntersectionRef, isVisible] = useIntersection({\n    rootMargin: '200px',\n    disabled: !isPrefetchEnabled,\n  })\n\n  const ownRef = useMergedRef<HTMLFormElement>(\n    setIntersectionRef,\n    externalRef ?? null\n  )\n\n  useEffect(() => {\n    if (!isVisible || !isPrefetchEnabled) {\n      return\n    }\n\n    try {\n      const prefetchKind = PrefetchKind.AUTO\n      router.prefetch(actionProp, { kind: prefetchKind })\n    } catch (err) {\n      console.error(err)\n    }\n  }, [isPrefetchEnabled, isVisible, actionProp, prefetch, router])\n\n  if (!isNavigatingForm) {\n    return <form {...props} ref={ownRef} />\n  }\n\n  const actionHref = addBasePath(actionProp)\n\n  return (\n    <form\n      {...props}\n      ref={ownRef}\n      action={actionHref}\n      onSubmit={(event) =>\n        onFormSubmit(event, {\n          router,\n          actionHref,\n          replace,\n          scroll,\n          onSubmit: props.onSubmit,\n        })\n      }\n    />\n  )\n}\n\nfunction onFormSubmit(\n  event: FormEvent<HTMLFormElement>,\n  {\n    actionHref,\n    onSubmit,\n    replace,\n    scroll,\n    router,\n  }: {\n    actionHref: string\n    onSubmit: FormProps['onSubmit']\n    replace: FormProps['replace']\n    scroll: FormProps['scroll']\n    router: SomeRouter\n  }\n) {\n  if (typeof onSubmit === 'function') {\n    onSubmit(event)\n\n    // if the user called event.preventDefault(), do nothing.\n    // (this matches what Link does for `onClick`)\n    if (event.defaultPrevented) {\n      return\n    }\n  }\n\n  const formElement = event.currentTarget\n  const submitter = (event.nativeEvent as SubmitEvent).submitter\n\n  let action = actionHref\n\n  if (submitter) {\n    if (process.env.NODE_ENV === 'development') {\n      // the way server actions are encoded (e.g. `formMethod=\"post\")\n      // causes some unnecessary dev-mode warnings from `hasUnsupportedSubmitterAttributes`.\n      // we'd bail out anyway, but we just do it silently.\n      if (hasReactServerActionAttributes(submitter)) {\n        return\n      }\n    }\n\n    if (hasUnsupportedSubmitterAttributes(submitter)) {\n      return\n    }\n\n    // client actions have `formAction=\"javascript:...\"`. We obviously can't prefetch/navigate to that.\n    if (hasReactClientActionAttributes(submitter)) {\n      return\n    }\n\n    // If the submitter specified an alternate formAction,\n    // use that URL instead -- this is what a native form would do.\n    // NOTE: `submitter.formAction` is unreliable, because it will give us `location.href` if it *wasn't* set\n    // NOTE: this should not have `basePath` added, because we can't add it before hydration\n    const submitterFormAction = submitter.getAttribute('formAction')\n    if (submitterFormAction !== null) {\n      if (process.env.NODE_ENV === 'development') {\n        checkActionUrl(submitterFormAction, 'formAction')\n      }\n      action = submitterFormAction\n    }\n  }\n\n  let targetUrl: URL\n  try {\n    // NOTE: It might be more correct to resolve URLs relative to `document.baseURI`,\n    // but we already do it relative to `location.href` elsewhere:\n    //  (see e.g. https://github.com/vercel/next.js/blob/bb0e6722f87ceb2d43015f5b8a413d0072f2badf/packages/next/src/client/components/app-router.tsx#L146)\n    // so it's better to stay consistent.\n    const base = window.location.href\n    targetUrl = new URL(action, base)\n  } catch (err) {\n    throw new Error(`Cannot parse form action \"${action}\" as a URL`, {\n      cause: err,\n    })\n  }\n  if (targetUrl.searchParams.size) {\n    // url-encoded HTML forms *overwrite* any search params in the `action` url:\n    //\n    //  \"Let `query` be the result of running the application/x-www-form-urlencoded serializer [...]\"\n    //  \"Set parsed action's query component to `query`.\"\n    //   https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#submit-mutate-action\n    //\n    // We need to match that.\n    // (note that all other parts of the URL, like `hash`, are preserved)\n    targetUrl.search = ''\n  }\n\n  const formData = new FormData(formElement)\n\n  for (let [name, value] of formData) {\n    if (typeof value !== 'string') {\n      // For file inputs, the native browser behavior is to use the filename as the value instead:\n      //\n      //   \"If entry's value is a File object, then let value be entry's value's name. Otherwise, let value be entry's value.\"\n      //   https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs\n      //\n      if (process.env.NODE_ENV === 'development') {\n        console.warn(\n          `<Form> only supports file inputs if \\`action\\` is a function. File inputs cannot be used if \\`action\\` is a string, ` +\n            `because files cannot be encoded as search params.`\n        )\n      }\n      value = value.name\n    }\n\n    targetUrl.searchParams.append(name, value)\n  }\n\n  // Finally, no more reasons for bailing out.\n  event.preventDefault()\n\n  const method = replace ? 'replace' : 'push'\n  const targetHref = targetUrl.href\n  if (isAppRouter(router)) {\n    router[method](targetHref, { scroll })\n  } else {\n    // TODO(form): Make this use a transition so that pending states work\n    //\n    // Unlike the app router, pages router doesn't use startTransition,\n    // and can't easily be wrapped in one because of implementation details\n    // (e.g. it doesn't use any react state)\n    // But it's important to have this wrapped in a transition because\n    // pending states from e.g. `useFormStatus` rely on that.\n    // So this needs some follow up work.\n    router[method](targetHref, undefined, { scroll })\n  }\n}\n\ntype SomeRouter = AppRouterInstance | NextRouter\n\nfunction isAppRouter(router: SomeRouter): router is AppRouterInstance {\n  return !('asPath' in router)\n}\n\nfunction useAppOrPagesRouter(): SomeRouter {\n  const pagesRouter = useContext(RouterContext)\n  const appRouter = useContext(AppRouterContext)\n  if (pagesRouter) {\n    return pagesRouter\n  } else {\n    // We're in the app directory if there is no pages router.\n    return appRouter!\n  }\n}\n\nfunction checkActionUrl(action: string, source: 'action' | 'formAction') {\n  const aPropName = source === 'action' ? `an \\`action\\`` : `a \\`formAction\\``\n\n  let testUrl: URL\n  try {\n    testUrl = new URL(action, 'http://n')\n  } catch (err) {\n    console.error(\n      `<Form> received ${aPropName} that cannot be parsed as a URL: \"${action}\".`\n    )\n    return\n  }\n\n  // url-encoded HTML forms ignore any queryparams in the `action` url. We need to match that.\n  if (testUrl.searchParams.size) {\n    console.warn(\n      `<Form> received ${aPropName} that contains search params: \"${action}\". This is not supported, and they will be ignored. ` +\n        `If you need to pass in additional search params, use an \\`<input type=\"hidden\" />\\` instead.`\n    )\n  }\n}\n\nconst isSupportedEncType = (value: string) =>\n  value === 'application/x-www-form-urlencoded'\nconst isSupportedMethod = (value: string) => value === 'get'\nconst isSupportedTarget = (value: string) => value === '_self'\n\nfunction hasUnsupportedSubmitterAttributes(submitter: HTMLElement): boolean {\n  // A submitter can override `encType` for the form.\n  const formEncType = submitter.getAttribute('formEncType')\n  if (formEncType !== null && !isSupportedEncType(formEncType)) {\n    if (process.env.NODE_ENV === 'development') {\n      console.error(\n        `<Form>'s \\`encType\\` was set to an unsupported value via \\`formEncType=\"${formEncType}\"\\`. ` +\n          `This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.`\n      )\n    }\n    return true\n  }\n\n  // A submitter can override `method` for the form.\n  const formMethod = submitter.getAttribute('formMethod')\n  if (formMethod !== null && !isSupportedMethod(formMethod)) {\n    if (process.env.NODE_ENV === 'development') {\n      console.error(\n        `<Form>'s \\`method\\` was set to an unsupported value via \\`formMethod=\"${formMethod}\"\\`. ` +\n          `This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.`\n      )\n    }\n    return true\n  }\n\n  // A submitter can override `target` for the form.\n  const formTarget = submitter.getAttribute('formTarget')\n  if (formTarget !== null && !isSupportedTarget(formTarget)) {\n    if (process.env.NODE_ENV === 'development') {\n      console.error(\n        `<Form>'s \\`target\\` was set to an unsupported value via \\`formTarget=\"${formTarget}\"\\`. ` +\n          `This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.`\n      )\n    }\n    return true\n  }\n\n  return false\n}\n\nfunction hasReactServerActionAttributes(submitter: HTMLElement) {\n  // https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-client/src/ReactFlightReplyClient.js#L931-L934\n  const name = submitter.getAttribute('name')\n  return (\n    name && (name.startsWith('$ACTION_ID_') || name.startsWith('$ACTION_REF_'))\n  )\n}\n\nfunction hasReactClientActionAttributes(submitter: HTMLElement) {\n  // CSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L482-L487\n  // SSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L2401\n  const action = submitter.getAttribute('formAction')\n  return action && /\\s*javascript:/i.test(action)\n}\n"],"names":["Form","DISALLOWED_FORM_PROPS","replace","scroll","prefetch","prefetchProp","ref","externalRef","props","router","useAppOrPagesRouter","actionProp","action","isNavigatingForm","process","env","NODE_ENV","checkActionUrl","undefined","console","error","isAppRouter","key","isPrefetchEnabled","setIntersectionRef","isVisible","useIntersection","rootMargin","disabled","ownRef","useMergedRef","useEffect","prefetchKind","PrefetchKind","AUTO","kind","err","form","actionHref","addBasePath","onSubmit","event","onFormSubmit","defaultPrevented","formElement","currentTarget","submitter","nativeEvent","hasReactServerActionAttributes","hasUnsupportedSubmitterAttributes","hasReactClientActionAttributes","submitterFormAction","getAttribute","targetUrl","base","window","location","href","URL","Error","cause","searchParams","size","search","formData","FormData","name","value","warn","append","preventDefault","method","targetHref","pagesRouter","useContext","RouterContext","appRouter","AppRouterContext","source","aPropName","testUrl","isSupportedEncType","isSupportedMethod","isSupportedTarget","formEncType","formMethod","formTarget","startsWith","test"],"mappings":"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"}
+{"version":3,"sources":["../../../src/client/app-dir/form.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, type FormEvent, useContext } from 'react'\nimport { addBasePath } from '../add-base-path'\nimport { useIntersection } from '../use-intersection'\nimport { useMergedRef } from '../use-merged-ref'\nimport {\n  AppRouterContext,\n  type AppRouterInstance,\n} from '../../shared/lib/app-router-context.shared-runtime'\nimport { PrefetchKind } from '../components/router-reducer/router-reducer-types'\nimport {\n  checkFormActionUrl,\n  createFormSubmitDestinationUrl,\n  DISALLOWED_FORM_PROPS,\n  hasReactClientActionAttributes,\n  hasUnsupportedSubmitterAttributes,\n  type FormProps,\n} from '../form-shared'\n\nexport type { FormProps }\n\nexport default function Form({\n  replace,\n  scroll,\n  prefetch: prefetchProp,\n  ref: externalRef,\n  ...props\n}: FormProps) {\n  const router = useContext(AppRouterContext)\n\n  const actionProp = props.action\n  const isNavigatingForm = typeof actionProp === 'string'\n\n  // Validate `action`\n  if (process.env.NODE_ENV === 'development') {\n    if (isNavigatingForm) {\n      checkFormActionUrl(actionProp, 'action')\n    }\n  }\n\n  // Validate `prefetch`\n  if (process.env.NODE_ENV === 'development') {\n    if (\n      !(\n        prefetchProp === undefined ||\n        prefetchProp === false ||\n        prefetchProp === null\n      )\n    ) {\n      console.error('The `prefetch` prop of <Form> must be `false` or `null`')\n    }\n\n    if (prefetchProp !== undefined && !isNavigatingForm) {\n      console.error(\n        'Passing `prefetch` to a <Form> whose `action` is a function has no effect.'\n      )\n    }\n  }\n\n  const prefetch =\n    prefetchProp === false || prefetchProp === null ? prefetchProp : null\n\n  // Validate `scroll` and `replace`\n  if (process.env.NODE_ENV === 'development') {\n    if (!isNavigatingForm && (replace !== undefined || scroll !== undefined)) {\n      console.error(\n        'Passing `replace` or `scroll` to a <Form> whose `action` is a function has no effect.\\n' +\n          'See the relevant docs to learn how to control this behavior for navigations triggered from actions:\\n' +\n          '  `redirect()`       - https://nextjs.org/docs/app/api-reference/functions/redirect#parameters\\n' +\n          '  `router.replace()` - https://nextjs.org/docs/app/api-reference/functions/use-router#userouter\\n'\n      )\n    }\n  }\n\n  // Clean up any unsupported form props (and warn if present)\n  for (const key of DISALLOWED_FORM_PROPS) {\n    if (key in props) {\n      if (process.env.NODE_ENV === 'development') {\n        console.error(\n          `<Form> does not support changing \\`${key}\\`. ` +\n            (isNavigatingForm\n              ? `If you'd like to use it to perform a mutation, consider making \\`action\\` a function instead.\\n` +\n                `Learn more: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations`\n              : '')\n        )\n      }\n      delete (props as Record<string, unknown>)[key]\n    }\n  }\n\n  const isPrefetchEnabled =\n    // if we don't have an action path, we can't prefetch anything.\n    !!router && isNavigatingForm && prefetch === null\n\n  const [setIntersectionRef, isVisible] = useIntersection({\n    rootMargin: '200px',\n    disabled: !isPrefetchEnabled,\n  })\n\n  const ownRef = useMergedRef<HTMLFormElement>(\n    setIntersectionRef,\n    externalRef ?? null\n  )\n\n  useEffect(() => {\n    if (!isVisible || !isPrefetchEnabled) {\n      return\n    }\n\n    try {\n      const prefetchKind = PrefetchKind.AUTO\n      router.prefetch(actionProp, { kind: prefetchKind })\n    } catch (err) {\n      console.error(err)\n    }\n  }, [isPrefetchEnabled, isVisible, actionProp, prefetch, router])\n\n  if (!isNavigatingForm) {\n    return <form {...props} ref={ownRef} />\n  }\n\n  const actionHref = addBasePath(actionProp)\n\n  return (\n    <form\n      {...props}\n      ref={ownRef}\n      action={actionHref}\n      onSubmit={(event) =>\n        onFormSubmit(event, {\n          router,\n          actionHref,\n          replace,\n          scroll,\n          onSubmit: props.onSubmit,\n        })\n      }\n    />\n  )\n}\n\nfunction onFormSubmit(\n  event: FormEvent<HTMLFormElement>,\n  {\n    actionHref,\n    onSubmit,\n    replace,\n    scroll,\n    router,\n  }: {\n    actionHref: string\n    onSubmit: FormProps['onSubmit']\n    replace: FormProps['replace']\n    scroll: FormProps['scroll']\n    router: AppRouterInstance | null\n  }\n) {\n  if (typeof onSubmit === 'function') {\n    onSubmit(event)\n\n    // if the user called event.preventDefault(), do nothing.\n    // (this matches what Link does for `onClick`)\n    if (event.defaultPrevented) {\n      return\n    }\n  }\n\n  if (!router) {\n    // Form was somehow used outside of the router (but not in pages, the implementation is forked!).\n    // We can't perform a soft navigation, so let the native submit handling do its thing.\n    return\n  }\n\n  const formElement = event.currentTarget\n  const submitter = (event.nativeEvent as SubmitEvent).submitter\n\n  let action = actionHref\n\n  if (submitter) {\n    if (process.env.NODE_ENV === 'development') {\n      // the way server actions are encoded (e.g. `formMethod=\"post\")\n      // causes some unnecessary dev-mode warnings from `hasUnsupportedSubmitterAttributes`.\n      // we'd bail out anyway, but we just do it silently.\n      if (hasReactServerActionAttributes(submitter)) {\n        return\n      }\n    }\n\n    if (hasUnsupportedSubmitterAttributes(submitter)) {\n      return\n    }\n\n    // client actions have `formAction=\"javascript:...\"`. We obviously can't prefetch/navigate to that.\n    if (hasReactClientActionAttributes(submitter)) {\n      return\n    }\n\n    // If the submitter specified an alternate formAction,\n    // use that URL instead -- this is what a native form would do.\n    // NOTE: `submitter.formAction` is unreliable, because it will give us `location.href` if it *wasn't* set\n    // NOTE: this should not have `basePath` added, because we can't add it before hydration\n    const submitterFormAction = submitter.getAttribute('formAction')\n    if (submitterFormAction !== null) {\n      if (process.env.NODE_ENV === 'development') {\n        checkFormActionUrl(submitterFormAction, 'formAction')\n      }\n      action = submitterFormAction\n    }\n  }\n\n  const targetUrl = createFormSubmitDestinationUrl(action, formElement)\n\n  // Finally, no more reasons for bailing out.\n  event.preventDefault()\n\n  const method = replace ? 'replace' : 'push'\n  const targetHref = targetUrl.href\n  router[method](targetHref, { scroll })\n}\n\nfunction hasReactServerActionAttributes(submitter: HTMLElement) {\n  // https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-client/src/ReactFlightReplyClient.js#L931-L934\n  const name = submitter.getAttribute('name')\n  return (\n    name && (name.startsWith('$ACTION_ID_') || name.startsWith('$ACTION_REF_'))\n  )\n}\n"],"names":["Form","replace","scroll","prefetch","prefetchProp","ref","externalRef","props","router","useContext","AppRouterContext","actionProp","action","isNavigatingForm","process","env","NODE_ENV","checkFormActionUrl","undefined","console","error","key","DISALLOWED_FORM_PROPS","isPrefetchEnabled","setIntersectionRef","isVisible","useIntersection","rootMargin","disabled","ownRef","useMergedRef","useEffect","prefetchKind","PrefetchKind","AUTO","kind","err","form","actionHref","addBasePath","onSubmit","event","onFormSubmit","defaultPrevented","formElement","currentTarget","submitter","nativeEvent","hasReactServerActionAttributes","hasUnsupportedSubmitterAttributes","hasReactClientActionAttributes","submitterFormAction","getAttribute","targetUrl","createFormSubmitDestinationUrl","preventDefault","method","targetHref","href","name","startsWith"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/shared.d.ts

@@ -37,6 +37,8 @@ export declare const ACTION_UNHANDLED_ERROR = "unhandled-error";
 export declare const ACTION_UNHANDLED_REJECTION = "unhandled-rejection";
 export declare const ACTION_DEBUG_INFO = "debug-info";
 export declare const ACTION_DEV_INDICATOR = "dev-indicator";
+export declare const STORAGE_KEY_THEME = "__nextjs-dev-tools-theme";
+export declare const STORAGE_KEY_POSITION = "__nextjs-dev-tools-position";
 interface StaticIndicatorAction {
     type: typeof ACTION_STATIC_INDICATOR;
     staticIndicator: boolean;

package/dist/client/components/react-dev-overlay/shared.js

@@ -15,6 +15,8 @@ Object.defineProperty(exports, "__esModule", {
     ACTION_VERSION_INFO: null,
     INITIAL_OVERLAY_STATE: null,
     REACT_REFRESH_FULL_RELOAD_FROM_ERROR: null,
+    STORAGE_KEY_POSITION: null,
+    STORAGE_KEY_THEME: null,
     useErrorOverlayReducer: null
 });
 function _export(target, all) {
@@ -60,6 +62,12 @@ _export(exports, {
     REACT_REFRESH_FULL_RELOAD_FROM_ERROR: function() {
         return REACT_REFRESH_FULL_RELOAD_FROM_ERROR;
     },
+    STORAGE_KEY_POSITION: function() {
+        return STORAGE_KEY_POSITION;
+    },
+    STORAGE_KEY_THEME: function() {
+        return STORAGE_KEY_THEME;
+    },
     useErrorOverlayReducer: function() {
         return useErrorOverlayReducer;
     }
@@ -76,6 +84,8 @@ const ACTION_UNHANDLED_ERROR = 'unhandled-error';
 const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection';
 const ACTION_DEBUG_INFO = 'debug-info';
 const ACTION_DEV_INDICATOR = 'dev-indicator';
+const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme';
+const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position';
 function pushErrorFilterDuplicates(errors, err) {
     return [
         ...errors.filter((e)=>{

package/dist/client/components/react-dev-overlay/shared.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/client/components/react-dev-overlay/shared.ts"],"sourcesContent":["import { useReducer } from 'react'\n\nimport type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport type { VersionInfo } from '../../../server/dev/parse-version-info'\nimport type { SupportedErrorEvent } from './ui/container/runtime-error/render-error'\nimport type { ComponentStackFrame } from './utils/parse-component-stack'\nimport type { DebugInfo } from './types'\nimport type { DevIndicatorServerState } from '../../../server/dev/dev-indicator-server-state'\n\ntype FastRefreshState =\n  /** No refresh in progress. */\n  | { type: 'idle' }\n  /** The refresh process has been triggered, but the new code has not been executed yet. */\n  | { type: 'pending'; errors: SupportedErrorEvent[] }\n\nexport interface OverlayState {\n  nextId: number\n  buildError: string | null\n  errors: SupportedErrorEvent[]\n  refreshState: FastRefreshState\n  rootLayoutMissingTags: typeof window.__next_root_layout_missing_tags\n  versionInfo: VersionInfo\n  notFound: boolean\n  staticIndicator: boolean\n  disableDevIndicator: boolean\n  debugInfo: DebugInfo\n  routerType: 'pages' | 'app'\n}\n\nexport const ACTION_STATIC_INDICATOR = 'static-indicator'\nexport const ACTION_BUILD_OK = 'build-ok'\nexport const ACTION_BUILD_ERROR = 'build-error'\nexport const ACTION_BEFORE_REFRESH = 'before-fast-refresh'\nexport const ACTION_REFRESH = 'fast-refresh'\nexport const ACTION_VERSION_INFO = 'version-info'\nexport const ACTION_UNHANDLED_ERROR = 'unhandled-error'\nexport const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'\nexport const ACTION_DEBUG_INFO = 'debug-info'\nexport const ACTION_DEV_INDICATOR = 'dev-indicator'\n\ninterface StaticIndicatorAction {\n  type: typeof ACTION_STATIC_INDICATOR\n  staticIndicator: boolean\n}\n\ninterface BuildOkAction {\n  type: typeof ACTION_BUILD_OK\n}\ninterface BuildErrorAction {\n  type: typeof ACTION_BUILD_ERROR\n  message: string\n}\ninterface BeforeFastRefreshAction {\n  type: typeof ACTION_BEFORE_REFRESH\n}\ninterface FastRefreshAction {\n  type: typeof ACTION_REFRESH\n}\n\nexport interface UnhandledErrorAction {\n  type: typeof ACTION_UNHANDLED_ERROR\n  reason: Error\n  frames: StackFrame[]\n  componentStackFrames?: ComponentStackFrame[]\n  warning?: [string, string, string]\n}\nexport interface UnhandledRejectionAction {\n  type: typeof ACTION_UNHANDLED_REJECTION\n  reason: Error\n  frames: StackFrame[]\n}\n\nexport interface DebugInfoAction {\n  type: typeof ACTION_DEBUG_INFO\n  debugInfo: any\n}\n\ninterface VersionInfoAction {\n  type: typeof ACTION_VERSION_INFO\n  versionInfo: VersionInfo\n}\n\ninterface DevIndicatorAction {\n  type: typeof ACTION_DEV_INDICATOR\n  devIndicator: DevIndicatorServerState\n}\n\nexport type BusEvent =\n  | BuildOkAction\n  | BuildErrorAction\n  | BeforeFastRefreshAction\n  | FastRefreshAction\n  | UnhandledErrorAction\n  | UnhandledRejectionAction\n  | VersionInfoAction\n  | StaticIndicatorAction\n  | DebugInfoAction\n  | DevIndicatorAction\n\nfunction pushErrorFilterDuplicates(\n  errors: SupportedErrorEvent[],\n  err: SupportedErrorEvent\n): SupportedErrorEvent[] {\n  return [\n    ...errors.filter((e) => {\n      // Filter out duplicate errors\n      return e.event.reason.stack !== err.event.reason.stack\n    }),\n    err,\n  ]\n}\n\nconst shouldDisableDevIndicator =\n  process.env.__NEXT_DEV_INDICATOR?.toString() === 'false'\n\nexport const INITIAL_OVERLAY_STATE: Omit<OverlayState, 'routerType'> = {\n  nextId: 1,\n  buildError: null,\n  errors: [],\n  notFound: false,\n  staticIndicator: false,\n  // To prevent flickering, set the initial state to disabled.\n  disableDevIndicator: true,\n  refreshState: { type: 'idle' },\n  rootLayoutMissingTags: [],\n  versionInfo: { installed: '0.0.0', staleness: 'unknown' },\n  debugInfo: { devtoolsFrontendUrl: undefined },\n}\n\nfunction getInitialState(\n  routerType: 'pages' | 'app'\n): OverlayState & { routerType: 'pages' | 'app' } {\n  return {\n    ...INITIAL_OVERLAY_STATE,\n    routerType,\n  }\n}\n\nexport function useErrorOverlayReducer(routerType: 'pages' | 'app') {\n  return useReducer((_state: OverlayState, action: BusEvent): OverlayState => {\n    switch (action.type) {\n      case ACTION_DEBUG_INFO: {\n        return { ..._state, debugInfo: action.debugInfo }\n      }\n      case ACTION_STATIC_INDICATOR: {\n        return { ..._state, staticIndicator: action.staticIndicator }\n      }\n      case ACTION_BUILD_OK: {\n        return { ..._state, buildError: null }\n      }\n      case ACTION_BUILD_ERROR: {\n        return { ..._state, buildError: action.message }\n      }\n      case ACTION_BEFORE_REFRESH: {\n        return { ..._state, refreshState: { type: 'pending', errors: [] } }\n      }\n      case ACTION_REFRESH: {\n        return {\n          ..._state,\n          buildError: null,\n          errors:\n            // Errors can come in during updates. In this case, UNHANDLED_ERROR\n            // and UNHANDLED_REJECTION events might be dispatched between the\n            // BEFORE_REFRESH and the REFRESH event. We want to keep those errors\n            // around until the next refresh. Otherwise we run into a race\n            // condition where those errors would be cleared on refresh completion\n            // before they can be displayed.\n            _state.refreshState.type === 'pending'\n              ? _state.refreshState.errors\n              : [],\n          refreshState: { type: 'idle' },\n        }\n      }\n      case ACTION_UNHANDLED_ERROR:\n      case ACTION_UNHANDLED_REJECTION: {\n        switch (_state.refreshState.type) {\n          case 'idle': {\n            return {\n              ..._state,\n              nextId: _state.nextId + 1,\n              errors: pushErrorFilterDuplicates(_state.errors, {\n                id: _state.nextId,\n                event: action,\n              }),\n            }\n          }\n          case 'pending': {\n            return {\n              ..._state,\n              nextId: _state.nextId + 1,\n              refreshState: {\n                ..._state.refreshState,\n                errors: pushErrorFilterDuplicates(_state.refreshState.errors, {\n                  id: _state.nextId,\n                  event: action,\n                }),\n              },\n            }\n          }\n          default:\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            const _: never = _state.refreshState\n            return _state\n        }\n      }\n      case ACTION_VERSION_INFO: {\n        return { ..._state, versionInfo: action.versionInfo }\n      }\n      case ACTION_DEV_INDICATOR: {\n        return {\n          ..._state,\n          disableDevIndicator:\n            shouldDisableDevIndicator || !!action.devIndicator.disabledUntil,\n        }\n      }\n      default: {\n        return _state\n      }\n    }\n  }, getInitialState(routerType))\n}\n\nexport const REACT_REFRESH_FULL_RELOAD_FROM_ERROR =\n  '[Fast Refresh] performing full reload because your application had an unrecoverable error'\n"],"names":["ACTION_BEFORE_REFRESH","ACTION_BUILD_ERROR","ACTION_BUILD_OK","ACTION_DEBUG_INFO","ACTION_DEV_INDICATOR","ACTION_REFRESH","ACTION_STATIC_INDICATOR","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","ACTION_VERSION_INFO","INITIAL_OVERLAY_STATE","REACT_REFRESH_FULL_RELOAD_FROM_ERROR","useErrorOverlayReducer","process","pushErrorFilterDuplicates","errors","err","filter","e","event","reason","stack","shouldDisableDevIndicator","env","__NEXT_DEV_INDICATOR","toString","nextId","buildError","notFound","staticIndicator","disableDevIndicator","refreshState","type","rootLayoutMissingTags","versionInfo","installed","staleness","debugInfo","devtoolsFrontendUrl","undefined","getInitialState","routerType","useReducer","_state","action","message","id","_","devIndicator","disabledUntil"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/client/components/react-dev-overlay/shared.ts"],"sourcesContent":["import { useReducer } from 'react'\n\nimport type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport type { VersionInfo } from '../../../server/dev/parse-version-info'\nimport type { SupportedErrorEvent } from './ui/container/runtime-error/render-error'\nimport type { ComponentStackFrame } from './utils/parse-component-stack'\nimport type { DebugInfo } from './types'\nimport type { DevIndicatorServerState } from '../../../server/dev/dev-indicator-server-state'\n\ntype FastRefreshState =\n  /** No refresh in progress. */\n  | { type: 'idle' }\n  /** The refresh process has been triggered, but the new code has not been executed yet. */\n  | { type: 'pending'; errors: SupportedErrorEvent[] }\n\nexport interface OverlayState {\n  nextId: number\n  buildError: string | null\n  errors: SupportedErrorEvent[]\n  refreshState: FastRefreshState\n  rootLayoutMissingTags: typeof window.__next_root_layout_missing_tags\n  versionInfo: VersionInfo\n  notFound: boolean\n  staticIndicator: boolean\n  disableDevIndicator: boolean\n  debugInfo: DebugInfo\n  routerType: 'pages' | 'app'\n}\n\nexport const ACTION_STATIC_INDICATOR = 'static-indicator'\nexport const ACTION_BUILD_OK = 'build-ok'\nexport const ACTION_BUILD_ERROR = 'build-error'\nexport const ACTION_BEFORE_REFRESH = 'before-fast-refresh'\nexport const ACTION_REFRESH = 'fast-refresh'\nexport const ACTION_VERSION_INFO = 'version-info'\nexport const ACTION_UNHANDLED_ERROR = 'unhandled-error'\nexport const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'\nexport const ACTION_DEBUG_INFO = 'debug-info'\nexport const ACTION_DEV_INDICATOR = 'dev-indicator'\n\nexport const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'\nexport const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'\n\ninterface StaticIndicatorAction {\n  type: typeof ACTION_STATIC_INDICATOR\n  staticIndicator: boolean\n}\n\ninterface BuildOkAction {\n  type: typeof ACTION_BUILD_OK\n}\ninterface BuildErrorAction {\n  type: typeof ACTION_BUILD_ERROR\n  message: string\n}\ninterface BeforeFastRefreshAction {\n  type: typeof ACTION_BEFORE_REFRESH\n}\ninterface FastRefreshAction {\n  type: typeof ACTION_REFRESH\n}\n\nexport interface UnhandledErrorAction {\n  type: typeof ACTION_UNHANDLED_ERROR\n  reason: Error\n  frames: StackFrame[]\n  componentStackFrames?: ComponentStackFrame[]\n  warning?: [string, string, string]\n}\nexport interface UnhandledRejectionAction {\n  type: typeof ACTION_UNHANDLED_REJECTION\n  reason: Error\n  frames: StackFrame[]\n}\n\nexport interface DebugInfoAction {\n  type: typeof ACTION_DEBUG_INFO\n  debugInfo: any\n}\n\ninterface VersionInfoAction {\n  type: typeof ACTION_VERSION_INFO\n  versionInfo: VersionInfo\n}\n\ninterface DevIndicatorAction {\n  type: typeof ACTION_DEV_INDICATOR\n  devIndicator: DevIndicatorServerState\n}\n\nexport type BusEvent =\n  | BuildOkAction\n  | BuildErrorAction\n  | BeforeFastRefreshAction\n  | FastRefreshAction\n  | UnhandledErrorAction\n  | UnhandledRejectionAction\n  | VersionInfoAction\n  | StaticIndicatorAction\n  | DebugInfoAction\n  | DevIndicatorAction\n\nfunction pushErrorFilterDuplicates(\n  errors: SupportedErrorEvent[],\n  err: SupportedErrorEvent\n): SupportedErrorEvent[] {\n  return [\n    ...errors.filter((e) => {\n      // Filter out duplicate errors\n      return e.event.reason.stack !== err.event.reason.stack\n    }),\n    err,\n  ]\n}\n\nconst shouldDisableDevIndicator =\n  process.env.__NEXT_DEV_INDICATOR?.toString() === 'false'\n\nexport const INITIAL_OVERLAY_STATE: Omit<OverlayState, 'routerType'> = {\n  nextId: 1,\n  buildError: null,\n  errors: [],\n  notFound: false,\n  staticIndicator: false,\n  // To prevent flickering, set the initial state to disabled.\n  disableDevIndicator: true,\n  refreshState: { type: 'idle' },\n  rootLayoutMissingTags: [],\n  versionInfo: { installed: '0.0.0', staleness: 'unknown' },\n  debugInfo: { devtoolsFrontendUrl: undefined },\n}\n\nfunction getInitialState(\n  routerType: 'pages' | 'app'\n): OverlayState & { routerType: 'pages' | 'app' } {\n  return {\n    ...INITIAL_OVERLAY_STATE,\n    routerType,\n  }\n}\n\nexport function useErrorOverlayReducer(routerType: 'pages' | 'app') {\n  return useReducer((_state: OverlayState, action: BusEvent): OverlayState => {\n    switch (action.type) {\n      case ACTION_DEBUG_INFO: {\n        return { ..._state, debugInfo: action.debugInfo }\n      }\n      case ACTION_STATIC_INDICATOR: {\n        return { ..._state, staticIndicator: action.staticIndicator }\n      }\n      case ACTION_BUILD_OK: {\n        return { ..._state, buildError: null }\n      }\n      case ACTION_BUILD_ERROR: {\n        return { ..._state, buildError: action.message }\n      }\n      case ACTION_BEFORE_REFRESH: {\n        return { ..._state, refreshState: { type: 'pending', errors: [] } }\n      }\n      case ACTION_REFRESH: {\n        return {\n          ..._state,\n          buildError: null,\n          errors:\n            // Errors can come in during updates. In this case, UNHANDLED_ERROR\n            // and UNHANDLED_REJECTION events might be dispatched between the\n            // BEFORE_REFRESH and the REFRESH event. We want to keep those errors\n            // around until the next refresh. Otherwise we run into a race\n            // condition where those errors would be cleared on refresh completion\n            // before they can be displayed.\n            _state.refreshState.type === 'pending'\n              ? _state.refreshState.errors\n              : [],\n          refreshState: { type: 'idle' },\n        }\n      }\n      case ACTION_UNHANDLED_ERROR:\n      case ACTION_UNHANDLED_REJECTION: {\n        switch (_state.refreshState.type) {\n          case 'idle': {\n            return {\n              ..._state,\n              nextId: _state.nextId + 1,\n              errors: pushErrorFilterDuplicates(_state.errors, {\n                id: _state.nextId,\n                event: action,\n              }),\n            }\n          }\n          case 'pending': {\n            return {\n              ..._state,\n              nextId: _state.nextId + 1,\n              refreshState: {\n                ..._state.refreshState,\n                errors: pushErrorFilterDuplicates(_state.refreshState.errors, {\n                  id: _state.nextId,\n                  event: action,\n                }),\n              },\n            }\n          }\n          default:\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            const _: never = _state.refreshState\n            return _state\n        }\n      }\n      case ACTION_VERSION_INFO: {\n        return { ..._state, versionInfo: action.versionInfo }\n      }\n      case ACTION_DEV_INDICATOR: {\n        return {\n          ..._state,\n          disableDevIndicator:\n            shouldDisableDevIndicator || !!action.devIndicator.disabledUntil,\n        }\n      }\n      default: {\n        return _state\n      }\n    }\n  }, getInitialState(routerType))\n}\n\nexport const REACT_REFRESH_FULL_RELOAD_FROM_ERROR =\n  '[Fast Refresh] performing full reload because your application had an unrecoverable error'\n"],"names":["ACTION_BEFORE_REFRESH","ACTION_BUILD_ERROR","ACTION_BUILD_OK","ACTION_DEBUG_INFO","ACTION_DEV_INDICATOR","ACTION_REFRESH","ACTION_STATIC_INDICATOR","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","ACTION_VERSION_INFO","INITIAL_OVERLAY_STATE","REACT_REFRESH_FULL_RELOAD_FROM_ERROR","STORAGE_KEY_POSITION","STORAGE_KEY_THEME","useErrorOverlayReducer","process","pushErrorFilterDuplicates","errors","err","filter","e","event","reason","stack","shouldDisableDevIndicator","env","__NEXT_DEV_INDICATOR","toString","nextId","buildError","notFound","staticIndicator","disableDevIndicator","refreshState","type","rootLayoutMissingTags","versionInfo","installed","staleness","debugInfo","devtoolsFrontendUrl","undefined","getInitialState","routerType","useReducer","_state","action","message","id","_","devIndicator","disabledUntil"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.d.ts

@@ -3,4 +3,4 @@ export declare const CallStackFrame: React.FC<{
     frame: OriginalStackFrame;
     index: number;
 }>;
-export declare const CALL_STACK_FRAME_STYLES = "\n  [data-nextjs-call-stack-frame-ignored] {\n    padding: 6px 8px;\n    margin-bottom: 4px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  [data-nextjs-call-stack-frame-ignored]:last-child {\n    margin-bottom: 0;\n  }\n\n  [data-nextjs-call-stack-frame] {\n    user-select: text;\n    display: block;\n    box-sizing: border-box;\n\n    user-select: text;\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n\n    padding: 6px 8px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  .call-stack-frame-method-name {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n\n    margin-bottom: 4px;\n    font-family: var(--font-stack-monospace);\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n\n    svg {\n      width: var(--size-16px);\n      height: var(--size-16px);\n    }\n  }\n\n  .open-in-editor-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--rounded-full);\n    padding: 4px;\n    color: var(--color-font);\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .call-stack-frame-file-source {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n  }\n";
+export declare const CALL_STACK_FRAME_STYLES = "\n  [data-nextjs-call-stack-frame-ignored] {\n    padding: 6px 8px;\n    margin-bottom: 4px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  [data-nextjs-call-stack-frame-ignored]:last-child {\n    margin-bottom: 0;\n  }\n\n  [data-nextjs-call-stack-frame] {\n    user-select: text;\n    display: block;\n    box-sizing: border-box;\n\n    user-select: text;\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n\n    padding: 6px 8px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  .call-stack-frame-method-name {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n\n    margin-bottom: 4px;\n    font-family: var(--font-stack-monospace);\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n\n    svg {\n      width: var(--size-16px);\n      height: var(--size-16px);\n    }\n  }\n\n  .open-in-editor-button, .source-mapping-error-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--rounded-full);\n    padding: 4px;\n    color: var(--color-font);\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .call-stack-frame-file-source {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.js

@@ -29,7 +29,6 @@ const CallStackFrame = function CallStackFrame(param) {
     let { frame, index } = param;
     var _frame_originalStackFrame;
     // TODO: ability to expand resolved frames
-    // TODO: render error or external indicator
     const f = (_frame_originalStackFrame = frame.originalStackFrame) != null ? _frame_originalStackFrame : frame.sourceStackFrame;
     const hasSource = Boolean(frame.originalCodeFrame);
     const open = (0, _useopenineditor.useOpenInEditor)(hasSource ? {
@@ -67,7 +66,16 @@ const CallStackFrame = function CallStackFrame(param) {
                             width: 16,
                             height: 16
                         })
-                    })
+                    }),
+                    frame.error ? /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                        className: "source-mapping-error-button",
+                        onClick: ()=>console.error(frame.reason),
+                        title: "Sourcemapping failed. Click to log cause of error.",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_external.SourceMappingErrorIcon, {
+                            width: 16,
+                            height: 16
+                        })
+                    }) : null
                 ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
@@ -78,7 +86,7 @@ const CallStackFrame = function CallStackFrame(param) {
         ]
     });
 };
-const CALL_STACK_FRAME_STYLES = "\n  [data-nextjs-call-stack-frame-ignored] {\n    padding: 6px 8px;\n    margin-bottom: 4px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  [data-nextjs-call-stack-frame-ignored]:last-child {\n    margin-bottom: 0;\n  }\n\n  [data-nextjs-call-stack-frame] {\n    user-select: text;\n    display: block;\n    box-sizing: border-box;\n\n    user-select: text;\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n\n    padding: 6px 8px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  .call-stack-frame-method-name {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n\n    margin-bottom: 4px;\n    font-family: var(--font-stack-monospace);\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n\n    svg {\n      width: var(--size-16px);\n      height: var(--size-16px);\n    }\n  }\n\n  .open-in-editor-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--rounded-full);\n    padding: 4px;\n    color: var(--color-font);\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .call-stack-frame-file-source {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n  }\n";
+const CALL_STACK_FRAME_STYLES = "\n  [data-nextjs-call-stack-frame-ignored] {\n    padding: 6px 8px;\n    margin-bottom: 4px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  [data-nextjs-call-stack-frame-ignored]:last-child {\n    margin-bottom: 0;\n  }\n\n  [data-nextjs-call-stack-frame] {\n    user-select: text;\n    display: block;\n    box-sizing: border-box;\n\n    user-select: text;\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n\n    padding: 6px 8px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  .call-stack-frame-method-name {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n\n    margin-bottom: 4px;\n    font-family: var(--font-stack-monospace);\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n\n    svg {\n      width: var(--size-16px);\n      height: var(--size-16px);\n    }\n  }\n\n  .open-in-editor-button, .source-mapping-error-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--rounded-full);\n    padding: 4px;\n    color: var(--color-font);\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .call-stack-frame-file-source {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });