react-router-dom 0.0.0-experimental-1e8b7a59 → 0.0.0-experimental-e0f088aa

package/dist/dom.d.ts

@@ -56,6 +56,14 @@ export interface SubmitOptions {
      * Defaults to "application/x-www-form-urlencoded".
      */
     encType?: FormEncType;
+    /**
+     * Indicate a specific fetcherKey to use when using navigate=false
+     */
+    fetcherKey?: string;
+    /**
+     * navigate=false will use a fetcher instead of a navigation
+     */
+    navigate?: boolean;
     /**
      * Set `true` to replace the current entry in the browser's history stack
      * instead of creating a new one (i.e. stay on "the same page"). Defaults

package/dist/index.d.ts

@@ -36,6 +36,13 @@ type ViewTransitionContextObject = {
 };
 declare const ViewTransitionContext: React.Context<ViewTransitionContextObject>;
 export { ViewTransitionContext as UNSAFE_ViewTransitionContext };
+type FetchersContextObject = {
+    data: Map<string, any>;
+    register: (key: string) => void;
+    unregister: (key: string) => void;
+};
+declare const FetchersContext: React.Context<FetchersContextObject | null>;
+export { FetchersContext as UNSAFE_FetchersContext };
 interface ViewTransition {
     finished: Promise<void>;
     ready: Promise<void>;
@@ -147,6 +154,14 @@ export interface FetcherFormProps extends React.FormHTMLAttributes<HTMLFormEleme
     onSubmit?: React.FormEventHandler<HTMLFormElement>;
 }
 export interface FormProps extends FetcherFormProps {
+    /**
+     * Indicate a specific fetcherKey to use when using navigate=false
+     */
+    fetcherKey?: string;
+    /**
+     * navigate=false will use a fetcher instead of a navigation
+     */
+    navigate?: boolean;
     /**
      * Forces a full document navigation instead of a fetch.
      */
@@ -238,9 +253,8 @@ export declare function useSubmit(): SubmitFunction;
 export declare function useFormAction(action?: string, { relative }?: {
     relative?: RelativeRoutingType;
 }): string;
-declare function createFetcherForm(fetcherKey: string, routeId: string, persist: boolean): React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
 export type FetcherWithComponents<TData> = Fetcher<TData> & {
-    Form: ReturnType<typeof createFetcherForm>;
+    Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
     submit: FetcherSubmitFunction;
     load: (href: string) => void;
 };
@@ -248,9 +262,8 @@ export type FetcherWithComponents<TData> = Fetcher<TData> & {
  * Interacts with route loaders and actions without causing a navigation. Great
  * for any interaction that stays on the same page.
  */
-export declare function useFetcher<TData = any>({ key, persist, }?: {
+export declare function useFetcher<TData = any>({ key, }?: {
     key?: string;
-    persist?: boolean;
 }): FetcherWithComponents<TData>;
 /**
  * Provides all fetchers currently on the page. Useful for layouts and parent

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v0.0.0-experimental-1e8b7a59
+ * React Router DOM v0.0.0-experimental-e0f088aa
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -11,7 +11,7 @@
 import * as React from 'react';
 import { UNSAFE_mapRouteProperties, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker } from 'react-router';
 export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
-import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, matchPath } from '@remix-run/router';
+import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, IDLE_FETCHER, matchPath } from '@remix-run/router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -208,7 +208,7 @@ function getFormSubmissionInfo(target, basename) {
 
 const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset", "unstable_viewTransition"],
   _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "unstable_viewTransition", "children"],
-  _excluded3 = ["reloadDocument", "replace", "state", "method", "action", "onSubmit", "submit", "relative", "preventScrollReset", "unstable_viewTransition"];
+  _excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "submit", "relative", "preventScrollReset", "unstable_viewTransition"];
 function createBrowserRouter(routes, opts) {
   return createRouter({
     basename: opts == null ? void 0 : opts.basename,
@@ -294,6 +294,10 @@ const ViewTransitionContext = /*#__PURE__*/React.createContext({
 if (process.env.NODE_ENV !== "production") {
   ViewTransitionContext.displayName = "ViewTransition";
 }
+const FetchersContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") {
+  FetchersContext.displayName = "Fetchers";
+}
 //#endregion
 ////////////////////////////////////////////////////////////////////////////////
 //#region Components
@@ -364,6 +368,32 @@ function RouterProvider(_ref) {
   let [renderDfd, setRenderDfd] = React.useState();
   let [transition, setTransition] = React.useState();
   let [interruption, setInterruption] = React.useState();
+  let fetcherRefs = React.useRef(new Map());
+  let fetcherData = React.useRef(new Map());
+  let registerFetcher = React.useCallback(key => {
+    let count = fetcherRefs.current.get(key);
+    if (count == null) {
+      fetcherRefs.current.set(key, 1);
+    } else {
+      fetcherRefs.current.set(key, count + 1);
+    }
+  }, []);
+  let unregisterFetcher = React.useCallback(key => {
+    let count = fetcherRefs.current.get(key);
+    if (count == null || count <= 1) {
+      fetcherRefs.current.delete(key);
+      fetcherData.current.delete(key);
+    } else {
+      fetcherRefs.current.set(key, count - 1);
+    }
+  }, [fetcherData]);
+  let fetcherContext = React.useMemo(() => ({
+    data: fetcherData.current,
+    register: registerFetcher,
+    unregister: unregisterFetcher
+  }), [registerFetcher, unregisterFetcher]);
+  // console.log("fetcherRefs", fetcherRefs.current);
+  // console.log("fetcherData", fetcherData.current);
   let {
     v7_startTransition
   } = future || {};
@@ -378,6 +408,11 @@ function RouterProvider(_ref) {
     let {
       unstable_viewTransitionOpts: viewTransitionOpts
     } = _ref2;
+    newState.fetchers.forEach((fetcher, key) => {
+      if (fetcher.data !== undefined) {
+        fetcherData.current.set(key, fetcher.data);
+      }
+    });
     if (!viewTransitionOpts || router.window == null || typeof router.window.document.startViewTransition !== "function") {
       // Mid-navigation state update, or startViewTransition isn't available
       optInStartTransition(() => setStateImpl(newState));
@@ -486,6 +521,8 @@ function RouterProvider(_ref) {
     value: dataRouterContext
   }, /*#__PURE__*/React.createElement(UNSAFE_DataRouterStateContext.Provider, {
     value: state
+  }, /*#__PURE__*/React.createElement(FetchersContext.Provider, {
+    value: fetcherContext
   }, /*#__PURE__*/React.createElement(ViewTransitionContext.Provider, {
     value: vtContext
   }, /*#__PURE__*/React.createElement(Router, {
@@ -496,7 +533,7 @@ function RouterProvider(_ref) {
   }, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
     routes: router.routes,
     state: state
-  }) : fallbackElement)))), null);
+  }) : fallbackElement))))), null);
 }
 function DataRoutes(_ref3) {
   let {
@@ -777,6 +814,8 @@ if (process.env.NODE_ENV !== "production") {
 }
 const FormImpl = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
   let {
+      fetcherKey,
+      navigate,
       reloadDocument,
       replace,
       state,
@@ -800,7 +839,9 @@ const FormImpl = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
     let submitter = event.nativeEvent.submitter;
     let submitMethod = (submitter == null ? void 0 : submitter.getAttribute("formmethod")) || method;
     submit(submitter || event.currentTarget, {
+      fetcherKey,
       method: submitMethod,
+      navigate,
       replace,
       state,
       relative,
@@ -850,6 +891,7 @@ var DataRouterHook;
 })(DataRouterHook || (DataRouterHook = {}));
 var DataRouterStateHook;
 (function (DataRouterStateHook) {
+  DataRouterStateHook["UseFetcher"] = "useFetcher";
   DataRouterStateHook["UseFetchers"] = "useFetchers";
   DataRouterStateHook["UseScrollRestoration"] = "useScrollRestoration";
 })(DataRouterStateHook || (DataRouterStateHook = {}));
@@ -928,6 +970,8 @@ function validateClientSideSubmission() {
     throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
   }
 }
+let fetcherId = 0;
+let getUniqueFetcherId = () => "__" + String(++fetcherId) + "__";
 /**
  * Returns a function that may be used to programmatically submit a form (or
  * some arbitrary data) to the server.
@@ -952,51 +996,29 @@ function useSubmit() {
       formData,
       body
     } = getFormSubmissionInfo(target, basename);
-    router.navigate(options.action || action, {
-      preventScrollReset: options.preventScrollReset,
-      formData,
-      body,
-      formMethod: options.method || method,
-      formEncType: options.encType || encType,
-      replace: options.replace,
-      state: options.state,
-      fromRouteId: currentRouteId,
-      unstable_viewTransition: options.unstable_viewTransition
-    });
-  }, [router, basename, currentRouteId]);
-}
-/**
- * Returns the implementation for fetcher.submit
- */
-function useSubmitFetcher(fetcherKey, fetcherRouteId, persist) {
-  let {
-    router
-  } = useDataRouterContext(DataRouterHook.UseSubmitFetcher);
-  let {
-    basename
-  } = React.useContext(UNSAFE_NavigationContext);
-  return React.useCallback(function (target, options) {
-    if (options === void 0) {
-      options = {};
+    if (options.navigate === false) {
+      let key = options.fetcherKey || getUniqueFetcherId();
+      router.fetch(key, currentRouteId, options.action || action, {
+        preventScrollReset: options.preventScrollReset,
+        formData,
+        body,
+        formMethod: options.method || method,
+        formEncType: options.encType || encType
+      });
+    } else {
+      router.navigate(options.action || action, {
+        preventScrollReset: options.preventScrollReset,
+        formData,
+        body,
+        formMethod: options.method || method,
+        formEncType: options.encType || encType,
+        replace: options.replace,
+        state: options.state,
+        fromRouteId: currentRouteId,
+        unstable_viewTransition: options.unstable_viewTransition
+      });
     }
-    validateClientSideSubmission();
-    let {
-      action,
-      method,
-      encType,
-      formData,
-      body
-    } = getFormSubmissionInfo(target, basename);
-    !(fetcherRouteId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : UNSAFE_invariant(false) : void 0;
-    router.fetch(fetcherKey, fetcherRouteId, options.action || action, {
-      preventScrollReset: options.preventScrollReset,
-      formData,
-      body,
-      formMethod: options.method || method,
-      formEncType: options.encType || encType,
-      persist
-    });
-  }, [router, basename, fetcherKey, fetcherRouteId, persist]);
+  }, [router, basename, currentRouteId]);
 }
 // v7: Eventually we should deprecate this entirely in favor of using the
 // router method directly?
@@ -1044,20 +1066,6 @@ function useFormAction(action, _temp2) {
   }
   return createPath(path);
 }
-function createFetcherForm(fetcherKey, routeId, persist) {
-  let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
-    let submit = useSubmitFetcher(fetcherKey, routeId, persist);
-    return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
-      ref: ref,
-      submit: submit
-    }));
-  });
-  if (process.env.NODE_ENV !== "production") {
-    FetcherForm.displayName = "fetcher.Form";
-  }
-  return FetcherForm;
-}
-let fetcherId = 0;
 // TODO: (v7) Change the useFetcher generic default from `any` to `unknown`
 /**
  * Interacts with route loaders and actions without causing a navigation. Great
@@ -1066,47 +1074,70 @@ let fetcherId = 0;
 function useFetcher(_temp3) {
   var _route$matches;
   let {
-    key,
-    persist
+    key
   } = _temp3 === void 0 ? {} : _temp3;
   let {
     router
   } = useDataRouterContext(DataRouterHook.UseFetcher);
+  let state = useDataRouterState(DataRouterStateHook.UseFetcher);
+  let fetchersCtx = React.useContext(FetchersContext);
   let route = React.useContext(UNSAFE_RouteContext);
-  !route ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a RouteContext") : UNSAFE_invariant(false) : void 0;
   let routeId = (_route$matches = route.matches[route.matches.length - 1]) == null ? void 0 : _route$matches.route.id;
+  let [fetcherKey, setFetcherKey] = React.useState(key || "");
+  if (!fetcherKey) {
+    setFetcherKey(getUniqueFetcherId());
+  }
+  !fetchersCtx ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a FetchersContext") : UNSAFE_invariant(false) : void 0;
+  !route ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a RouteContext") : UNSAFE_invariant(false) : void 0;
   !(routeId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher can only be used on routes that contain a unique \"id\"") : UNSAFE_invariant(false) : void 0;
-  let [_fetcherKey] = React.useState(() => "__" + String(++fetcherId));
-  let fetcherKey = key ? key : _fetcherKey;
-  let [Form] = React.useState(() => {
-    !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.Form()") : UNSAFE_invariant(false) : void 0;
-    return createFetcherForm(fetcherKey, routeId, persist === true);
-  });
-  let [load] = React.useState(() => href => {
-    !router ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No router available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
-    !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
-    router.fetch(fetcherKey, routeId, href);
-  });
-  let submit = useSubmitFetcher(fetcherKey, routeId, persist === true);
-  let fetcher = router.getFetcher(fetcherKey);
-  let fetcherWithComponents = React.useMemo(() => _extends({
-    Form,
-    submit,
-    load
-  }, fetcher), [fetcher, Form, submit, load]);
+  let {
+    data,
+    register,
+    unregister
+  } = fetchersCtx;
+  // Register/deregister with FetchersContext
   React.useEffect(() => {
-    // Is this busted when the React team gets real weird and calls effects
-    // twice on mount?  We really just need to garbage collect here when this
-    // fetcher is no longer around.
-    return () => {
-      if (!router) {
-        console.warn("No router available to clean up from useFetcher()");
-        return;
-      }
-      router.deleteFetcher(fetcherKey);
-    };
-  }, [router, fetcherKey]);
-  return fetcherWithComponents;
+    register(fetcherKey);
+    return () => unregister(fetcherKey);
+  }, [fetcherKey, register, unregister]);
+  // Fetcher additions
+  let load = React.useCallback(href => {
+    !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "fetcher.load routeId unavailable") : UNSAFE_invariant(false) : void 0;
+    router.fetch(fetcherKey, routeId, href);
+  }, [fetcherKey, routeId, router]);
+  let submitImpl = useSubmit();
+  let submit = React.useCallback((target, opts) => {
+    submitImpl(target, _extends({}, opts, {
+      navigate: false,
+      fetcherKey
+    }));
+  }, [fetcherKey, submitImpl]);
+  let Form = React.useMemo(() => {
+    let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
+      return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
+        navigate: false,
+        fetcherKey: fetcherKey,
+        ref: ref,
+        submit: submit
+      }));
+    });
+    if (process.env.NODE_ENV !== "production") {
+      FetcherForm.displayName = "fetcher.Form";
+    }
+    return FetcherForm;
+  }, [fetcherKey, submit]);
+  return React.useMemo(() => {
+    // Prefer the fetcher from `state` not `router.state` since DataRouterContext
+    // is memoized so this ensures we update on fetcher state updates
+    let fetcher = fetcherKey ? state.fetchers.get(fetcherKey) || IDLE_FETCHER : IDLE_FETCHER;
+    return _extends({
+      Form,
+      submit,
+      load
+    }, fetcher, {
+      data: data.get(fetcherKey)
+    });
+  }, [Form, data, fetcherKey, load, state.fetchers, submit]);
 }
 /**
  * Provides all fetchers currently on the page. Useful for layouts and parent
@@ -1330,5 +1361,5 @@ function useViewTransitionState(to, opts) {
 }
 //#endregion
 
-export { BrowserRouter, Form, HashRouter, Link, NavLink, RouterProvider, ScrollRestoration, ViewTransitionContext as UNSAFE_ViewTransitionContext, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useViewTransitionState as unstable_useViewTransitionState, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
+export { BrowserRouter, Form, HashRouter, Link, NavLink, RouterProvider, ScrollRestoration, FetchersContext as UNSAFE_FetchersContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useViewTransitionState as unstable_useViewTransitionState, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
 //# sourceMappingURL=index.js.map