@remix-run/react - npm Package Compare versions

Comparing version 0.21.0 to 1.0.0-rc.1

_virtual/_rollupPluginBabelHelpers.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser/_virtual/_rollupPluginBabelHelpers.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser/browser.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -12,3 +12,3 @@ * Copyright (c) Remix Software Inc.
 import { createBrowserHistory } from 'history';
-import React from 'react';
+import React__default from 'react';
 import { RemixEntry } from './components.js';
@@ -22,3 +22,3 @@
 function RemixBrowser(_props) {
-  let historyRef = React.useRef();
+  let historyRef = React__default.useRef();
 
@@ -32,7 +32,7 @@ if (historyRef.current == null) {
   let history = historyRef.current;
-  let [state, dispatch] = React.useReducer((_, update) => update, {
+  let [state, dispatch] = React__default.useReducer((_, update) => update, {
     action: history.action,
     location: history.location
   });
-  React.useLayoutEffect(() => history.listen(dispatch), [history]);
+  React__default.useLayoutEffect(() => history.listen(dispatch), [history]);
   let entryContext = window.__remixContext;
@@ -46,3 +46,3 @@ entryContext.manifest = window.__remixManifest;
   entryContext.componentDidCatchEmulator.trackCatchBoundaries = false;
-  return /*#__PURE__*/React.createElement(RemixEntry, {
+  return /*#__PURE__*/React__default.createElement(RemixEntry, {
     context: entryContext,
@@ -49,0 +49,0 @@ action: state.action,

browser/components.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -12,3 +12,3 @@ * Copyright (c) Remix Software Inc.
 import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
-import React from 'react';
+import React__default from 'react';
 import { useHref, NavLink as NavLink$1, Link as Link$1, useLocation, useResolvedPath, useNavigate, Router, useRoutes } from 'react-router-dom';
@@ -23,6 +23,8 @@ import { RemixErrorBoundary, RemixRootDefaultErrorBoundary, RemixCatchBoundary, RemixRootDefaultCatchBoundary } from './errorBoundaries.js';
 
-const RemixEntryContext = /*#__PURE__*/React.createContext(undefined);
+// RemixEntry
 
+const RemixEntryContext = /*#__PURE__*/React__default.createContext(undefined);
+
 function useRemixEntryContext() {
-  let context = React.useContext(RemixEntryContext);
+  let context = React__default.useContext(RemixEntryContext);
   invariant(context, "You must render this element inside a <Remix> element");
@@ -47,5 +49,5 @@ return context;
   } = entryContext;
-  let clientRoutes = React.useMemo(() => createClientRoutes(manifest.routes, routeModules, RemixRoute), [manifest, routeModules]);
-  let [clientState, setClientState] = React.useState(entryComponentDidCatchEmulator);
-  let [transitionManager] = React.useState(() => {
+  let clientRoutes = React__default.useMemo(() => createClientRoutes(manifest.routes, routeModules, RemixRoute), [manifest, routeModules]);
+  let [clientState, setClientState] = React__default.useState(entryComponentDidCatchEmulator);
+  let [transitionManager] = React__default.useState(() => {
     return createTransitionManager({
@@ -74,3 +76,3 @@ routes: clientRoutes,
 
-  let navigator = React.useMemo(() => {
+  let navigator = React__default.useMemo(() => {
     let push = (to, state) => {
@@ -91,3 +93,3 @@ return transitionManager.getState().transition.state !== "idle" ? _navigator.replace(to, state) : _navigator.push(to, state);
 
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     let {
@@ -109,3 +111,3 @@ location
   let ssrCatchBeforeRoutesRendered = clientState.catch && clientState.catchBoundaryRouteId === null ? clientState.catch : undefined;
-  return /*#__PURE__*/React.createElement(RemixEntryContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(RemixEntryContext.Provider, {
     value: {
@@ -122,11 +124,11 @@ matches,
     }
-  }, /*#__PURE__*/React.createElement(RemixErrorBoundary, {
+  }, /*#__PURE__*/React__default.createElement(RemixErrorBoundary, {
     location: location,
     component: RemixRootDefaultErrorBoundary,
     error: ssrErrorBeforeRoutesRendered
-  }, /*#__PURE__*/React.createElement(RemixCatchBoundary, {
+  }, /*#__PURE__*/React__default.createElement(RemixCatchBoundary, {
     location: location,
     component: RemixRootDefaultCatchBoundary,
     catch: ssrCatchBeforeRoutesRendered
-  }, /*#__PURE__*/React.createElement(Router, {
+  }, /*#__PURE__*/React__default.createElement(Router, {
     navigationType: action,
@@ -136,3 +138,3 @@ location: location,
     static: staticProp
-  }, /*#__PURE__*/React.createElement(Routes, null)))));
+  }, /*#__PURE__*/React__default.createElement(Routes, null)))));
 }
@@ -159,6 +161,6 @@
 
-const RemixRouteContext = /*#__PURE__*/React.createContext(undefined);
+const RemixRouteContext = /*#__PURE__*/React__default.createContext(undefined);
 
 function useRemixRouteContext() {
-  let context = React.useContext(RemixRouteContext);
+  let context = React__default.useContext(RemixRouteContext);
   invariant(context, "You must render this element in a remix route element");
@@ -189,3 +191,3 @@ return context;
   } = routeModules[id];
-  let element = Component ? /*#__PURE__*/React.createElement(Component, null) : /*#__PURE__*/React.createElement(DefaultRouteComponent, {
+  let element = Component ? /*#__PURE__*/React__default.createElement(Component, null) : /*#__PURE__*/React__default.createElement(DefaultRouteComponent, {
     id: id
@@ -221,3 +223,3 @@ });
     };
-    element = /*#__PURE__*/React.createElement(RemixCatchBoundary, {
+    element = /*#__PURE__*/React__default.createElement(RemixCatchBoundary, {
       location: location,
@@ -265,3 +267,3 @@ component: CatchBoundary,
     };
-    element = /*#__PURE__*/React.createElement(RemixErrorBoundary, {
+    element = /*#__PURE__*/React__default.createElement(RemixErrorBoundary, {
       location: location,
@@ -272,6 +274,6 @@ component: ErrorBoundary,
   } // It's important for the route context to be above the error boundary so that
-  // a call to `useRouteData` doesn't accidentally get the parents route's data.
+  // a call to `useLoaderData` doesn't accidentally get the parents route's data.
 
 
-  return /*#__PURE__*/React.createElement(RemixRouteContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(RemixRouteContext.Provider, {
     value: context
@@ -291,4 +293,4 @@ }, element);
 function usePrefetchBehavior(prefetch, theirElementProps) {
-  let [maybePrefetch, setMaybePrefetch] = React.useState(false);
-  let [shouldPrefetch, setShouldPrefetch] = React.useState(false);
+  let [maybePrefetch, setMaybePrefetch] = React__default.useState(false);
+  let [shouldPrefetch, setShouldPrefetch] = React__default.useState(false);
   let {
@@ -301,3 +303,3 @@ onFocus,
   } = theirElementProps;
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (prefetch === "render") {
@@ -320,3 +322,3 @@ setShouldPrefetch(true);
 
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (maybePrefetch) {
@@ -340,3 +342,3 @@ let id = setTimeout(() => {
 
-let NavLink = /*#__PURE__*/React.forwardRef(({
+let NavLink = /*#__PURE__*/React__default.forwardRef(({
   to,
@@ -348,10 +350,10 @@ prefetch = "none",
   let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(prefetch, props);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavLink$1, _extends({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(NavLink$1, _extends({
     ref: forwardedRef,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch && /*#__PURE__*/React.createElement(PrefetchPageLinks, {
+  }, prefetchHandlers, props)), shouldPrefetch && /*#__PURE__*/React__default.createElement(PrefetchPageLinks, {
     page: href
   }));
 });
-let Link = /*#__PURE__*/React.forwardRef(({
+let Link = /*#__PURE__*/React__default.forwardRef(({
   to,
@@ -363,6 +365,6 @@ prefetch = "none",
   let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(prefetch, props);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Link$1, _extends({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Link$1, _extends({
     ref: forwardedRef,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch && /*#__PURE__*/React.createElement(PrefetchPageLinks, {
+  }, prefetchHandlers, props)), shouldPrefetch && /*#__PURE__*/React__default.createElement(PrefetchPageLinks, {
     page: href
@@ -390,6 +392,6 @@ }));
   } = useRemixEntryContext();
-  let links = React.useMemo(() => getLinksForMatches(matches, routeModules, manifest), [matches, routeModules, manifest]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, links.map(link => isPageLinkDescriptor(link) ? /*#__PURE__*/React.createElement(PrefetchPageLinks, _extends({
+  let links = React__default.useMemo(() => getLinksForMatches(matches, routeModules, manifest), [matches, routeModules, manifest]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, links.map(link => isPageLinkDescriptor(link) ? /*#__PURE__*/React__default.createElement(PrefetchPageLinks, _extends({
     key: link.page
-  }, link)) : /*#__PURE__*/React.createElement("link", _extends({
+  }, link)) : /*#__PURE__*/React__default.createElement("link", _extends({
     key: link.rel + link.href
@@ -405,3 +407,3 @@ }, link))));
   } = useRemixEntryContext();
-  let matches = React.useMemo(() => matchClientRoutes(clientRoutes, page), [clientRoutes, page]);
+  let matches = React__default.useMemo(() => matchClientRoutes(clientRoutes, page), [clientRoutes, page]);
 
@@ -413,3 +415,3 @@ if (!matches) {
 
-  return /*#__PURE__*/React.createElement(PrefetchPageLinksImpl, _extends({
+  return /*#__PURE__*/React__default.createElement(PrefetchPageLinksImpl, _extends({
     page: page,
@@ -424,4 +426,4 @@ matches: matches
   } = useRemixEntryContext();
-  let [styleLinks, setStyleLinks] = React.useState([]);
-  React.useEffect(() => {
+  let [styleLinks, setStyleLinks] = React__default.useState([]);
+  React__default.useEffect(() => {
     let interrupted = false;
@@ -448,10 +450,10 @@ getStylesheetPrefetchLinks(matches, routeModules).then(links => {
   } = useRemixEntryContext();
-  let newMatchesForData = React.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, location, "data"), [page, nextMatches, matches, location]);
-  let newMatchesForAssets = React.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, location, "assets"), [page, nextMatches, matches, location]);
-  let dataHrefs = React.useMemo(() => getDataLinkHrefs(page, newMatchesForData, manifest), [newMatchesForData, page, manifest]);
-  let moduleHrefs = React.useMemo(() => getModuleLinkHrefs(newMatchesForAssets, manifest), [newMatchesForAssets, manifest]); // needs to be a hook with async behavior because we need the modules, not
+  let newMatchesForData = React__default.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, location, "data"), [page, nextMatches, matches, location]);
+  let newMatchesForAssets = React__default.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, location, "assets"), [page, nextMatches, matches, location]);
+  let dataHrefs = React__default.useMemo(() => getDataLinkHrefs(page, newMatchesForData, manifest), [newMatchesForData, page, manifest]);
+  let moduleHrefs = React__default.useMemo(() => getModuleLinkHrefs(newMatchesForAssets, manifest), [newMatchesForAssets, manifest]); // needs to be a hook with async behavior because we need the modules, not
   // just the manifest like the other links in here.
 
   let styleLinks = usePrefetchedStylesheets(newMatchesForAssets);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, dataHrefs.map(href => /*#__PURE__*/React.createElement("link", _extends({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dataHrefs.map(href => /*#__PURE__*/React__default.createElement("link", _extends({
     key: href,
@@ -461,3 +463,3 @@ rel: "prefetch",
     href: href
-  }, linkProps))), moduleHrefs.map(href => /*#__PURE__*/React.createElement("link", _extends({
+  }, linkProps))), moduleHrefs.map(href => /*#__PURE__*/React__default.createElement("link", _extends({
     key: href,
@@ -470,3 +472,3 @@ rel: "modulepreload",
   // already with their own props
-  React.createElement("link", _extends({
+  React__default.createElement("link", _extends({
     key: link.href
@@ -509,3 +511,3 @@ }, link))));
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, Object.keys(meta).map(name => {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Object.keys(meta).map(name => {
     let value = meta[name]; // Open Graph tags use the `property` attribute, while other meta tags
@@ -515,17 +517,17 @@ // use `name`. See https://ogp.me/
     let isOpenGraphTag = name.startsWith("og:");
-    return name === "title" ? /*#__PURE__*/React.createElement("title", {
+    return name === "title" ? /*#__PURE__*/React__default.createElement("title", {
       key: "title"
-    }, meta[name]) : Array.isArray(value) ? value.map(content => isOpenGraphTag ? /*#__PURE__*/React.createElement("meta", {
+    }, meta[name]) : Array.isArray(value) ? value.map(content => isOpenGraphTag ? /*#__PURE__*/React__default.createElement("meta", {
       key: name + content,
       property: name,
       content: content
-    }) : /*#__PURE__*/React.createElement("meta", {
+    }) : /*#__PURE__*/React__default.createElement("meta", {
       key: name + content,
       name: name,
       content: content
-    })) : isOpenGraphTag ? /*#__PURE__*/React.createElement("meta", {
+    })) : isOpenGraphTag ? /*#__PURE__*/React__default.createElement("meta", {
       key: name,
       property: name,
       content: value
-    }) : /*#__PURE__*/React.createElement("meta", {
+    }) : /*#__PURE__*/React__default.createElement("meta", {
       key: name,
@@ -554,15 +556,15 @@ name: name,
   } = useRemixEntryContext();
-  let initialScripts = React.useMemo(() => {
+  let initialScripts = React__default.useMemo(() => {
     let contextScript = serverHandoffString ? `window.__remixContext = ${serverHandoffString};` : "";
     let routeModulesScript = `${matches.map((match, index) => `import * as route${index} from ${JSON.stringify(manifest.routes[match.route.id].module)};`).join("\n")}
 window.__remixRouteModules = {${matches.map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`).join(",")}};`;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("script", _extends({}, props, {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("script", _extends({}, props, {
       suppressHydrationWarning: true,
       dangerouslySetInnerHTML: createHtml(contextScript)
-    })), /*#__PURE__*/React.createElement("script", _extends({}, props, {
+    })), /*#__PURE__*/React__default.createElement("script", _extends({}, props, {
       src: manifest.url
-    })), /*#__PURE__*/React.createElement("script", _extends({}, props, {
+    })), /*#__PURE__*/React__default.createElement("script", _extends({}, props, {
       dangerouslySetInnerHTML: createHtml(routeModulesScript),
       type: "module"
-    })), /*#__PURE__*/React.createElement("script", _extends({}, props, {
+    })), /*#__PURE__*/React__default.createElement("script", _extends({}, props, {
       src: manifest.entry.module,
@@ -576,3 +578,3 @@ type: "module"
 
-  let nextMatches = React.useMemo(() => {
+  let nextMatches = React__default.useMemo(() => {
     if (pendingLocation) {
@@ -592,3 +594,3 @@ // FIXME: can probably use transitionManager `nextMatches`
   let preloads = manifest.entry.imports.concat(routePreloads);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, dedupe(preloads).map(path => /*#__PURE__*/React.createElement("link", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dedupe(preloads).map(path => /*#__PURE__*/React__default.createElement("link", {
     key: path,
@@ -611,8 +613,8 @@ rel: "modulepreload",
  */
-let Form = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
+let Form = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  return /*#__PURE__*/React__default.createElement(FormImpl, _extends({}, props, {
     ref: ref
   }));
 });
-let FormImpl = /*#__PURE__*/React.forwardRef(({
+let FormImpl = /*#__PURE__*/React__default.forwardRef(({
   reloadDocument = false,
@@ -630,4 +632,40 @@ replace = false,
   let formAction = useFormAction(action, formMethod);
-  return /*#__PURE__*/React.createElement("form", _extends({
-    ref: forwardedRef,
+  let formRef = React__default.useRef();
+  let ref = useComposedRefs(forwardedRef, formRef); // When calling `submit` on the form element itself, we don't get data from
+  // the button that submitted the event. For example:
+  //
+  //   <Form>
+  //     <button name="something" value="whatever">Submit</button>
+  //   </Form>
+  //
+  // formData.get("something") should be "whatever", but we don't get that
+  // unless we call submit on the clicked button itself.
+  //
+  // To figure out which button triggered the submit, we'll attach a click
+  // event listener to the form. The click event is always triggered before
+  // the submit event (even when submitting via keyboard when focused on
+  // another form field, yeeeeet) so we should have access to that button's
+  // data for use in the submit handler.
+
+  let clickedButtonRef = React__default.useRef();
+  React__default.useEffect(() => {
+    let form = formRef.current;
+    if (!form) return;
+
+    function handleClick(event) {
+      if (!(event.target instanceof HTMLElement)) return;
+      let submitButton = event.target.closest("button,input[type=submit]");
+
+      if (submitButton && submitButton.type === "submit") {
+        clickedButtonRef.current = submitButton;
+      }
+    }
+
+    form.addEventListener("click", handleClick);
+    return () => {
+      form && form.removeEventListener("click", handleClick);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement("form", _extends({
+    ref: ref,
     method: formMethod,
@@ -640,6 +678,7 @@ action: formAction,
       event.preventDefault();
-      submit(event.currentTarget, {
+      submit(clickedButtonRef.current || event.currentTarget, {
         method,
         replace
       });
+      clickedButtonRef.current = null;
     }
@@ -686,3 +725,3 @@ }, props));
   } = useRemixEntryContext();
-  return React.useCallback((target, options = {}) => {
+  return React__default.useCallback((target, options = {}) => {
     let method;
@@ -818,3 +857,3 @@ let action;
 function useBeforeUnload(callback) {
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     window.addEventListener("beforeunload", callback);
@@ -852,7 +891,2 @@ return () => {
 }
-/**
- * @deprecated Use `useLoaderData`
- */
-
-let useRouteData = useLoaderData;
 function useActionData() {
@@ -878,5 +912,5 @@ let {
 function createFetcherForm(fetchKey) {
-  return /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React__default.forwardRef((props, ref) => {
     // TODO: make ANOTHER form w/o a fetchKey prop
-    return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
+    return /*#__PURE__*/React__default.createElement(FormImpl, _extends({}, props, {
       ref: ref,
@@ -898,5 +932,5 @@ fetchKey: fetchKey
   } = useRemixEntryContext();
-  let [key] = React.useState(() => String(++fetcherId));
-  let [Form] = React.useState(() => createFetcherForm(key));
-  let [load] = React.useState(() => href => {
+  let [key] = React__default.useState(() => String(++fetcherId));
+  let [Form] = React__default.useState(() => createFetcherForm(key));
+  let [load] = React__default.useState(() => href => {
     transitionManager.send({
@@ -910,3 +944,3 @@ type: "fetcher",
   let fetcher = transitionManager.getFetcher(key);
-  let fetcherWithComponents = React.useMemo(() => ({
+  let fetcherWithComponents = React__default.useMemo(() => ({
     Form,
@@ -917,3 +951,3 @@ submit,
   }), [fetcher, Form, submit, load]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     // Is this busted when the React team gets real weird and calls effects
@@ -940,34 +974,2 @@ // twice on mount?  We really just need to garbage collect here when this
 }
-/**
- * @deprecated replaced by `useTransition().submission`
- */
-
-function usePendingFormSubmit() {
-  let {
-    transitionManager
-  } = useRemixEntryContext();
-  let {
-    submission
-  } = transitionManager.getState().transition;
-
-  if (submission) {
-    return { ...submission,
-      data: submission.formData
-    };
-  }
-}
-/**
- * Returns the next location if a location change is pending. This is useful
- * for showing loading indicators during route transitions from `<Link>`
- * clicks.
- *
- * @deprecated use `useTransition().location`
- */
-
-function usePendingLocation() {
-  let {
-    transitionManager
-  } = useRemixEntryContext();
-  return transitionManager.getState().transition.location;
-}
 function LiveReload({
@@ -977,3 +979,3 @@ port = 8002
   if (process.env.NODE_ENV !== "development") return null;
-  return /*#__PURE__*/React.createElement("script", {
+  return /*#__PURE__*/React__default.createElement("script", {
     dangerouslySetInnerHTML: {
@@ -1001,2 +1003,19 @@ __html: `
 
-export { Form, FormImpl, Link, Links, LiveReload, Meta, NavLink, PrefetchPageLinks, RemixEntry, RemixRoute, Scripts, composeEventHandlers, useActionData, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, usePendingFormSubmit, usePendingLocation, useRouteData, useSubmit, useSubmitImpl, useTransition };
+function useComposedRefs(...refs) {
+  return React__default.useCallback(node => {
+    for (let ref of refs) {
+      if (ref == null) continue;
+
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        try {
+          ref.current = node;
+        } catch (_) {}
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, refs);
+}
+
+export { Form, FormImpl, Link, Links, LiveReload, Meta, NavLink, PrefetchPageLinks, RemixEntry, RemixRoute, Scripts, composeEventHandlers, useActionData, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, useSubmit, useSubmitImpl, useTransition };

browser/data.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser/errorBoundaries.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -11,5 +11,5 @@ * Copyright (c) Remix Software Inc.
  */
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 
-class RemixErrorBoundary extends React.Component {
+class RemixErrorBoundary extends React__default.Component {
   constructor(props) {
@@ -51,3 +51,3 @@ super(props);
     if (this.state.error) {
-      return /*#__PURE__*/React.createElement(this.props.component, {
+      return /*#__PURE__*/React__default.createElement(this.props.component, {
         error: this.state.error
@@ -69,7 +69,7 @@ });
   console.error(error);
-  return /*#__PURE__*/React.createElement("html", {
+  return /*#__PURE__*/React__default.createElement("html", {
     lang: "en"
-  }, /*#__PURE__*/React.createElement("head", null, /*#__PURE__*/React.createElement("meta", {
+  }, /*#__PURE__*/React__default.createElement("head", null, /*#__PURE__*/React__default.createElement("meta", {
     charSet: "utf-8"
-  }), /*#__PURE__*/React.createElement("title", null, "Uncaught Exception!")), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement("main", {
+  }), /*#__PURE__*/React__default.createElement("title", null, "Uncaught Exception!")), /*#__PURE__*/React__default.createElement("body", null, /*#__PURE__*/React__default.createElement("main", {
     style: {
@@ -79,3 +79,3 @@ border: "solid 2px hsl(10, 50%, 50%)",
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Uncaught Exception!"), /*#__PURE__*/React.createElement("p", null, "If you are not the developer, please click back in your browser and try again."), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h1", null, "Uncaught Exception!"), /*#__PURE__*/React__default.createElement("p", null, "If you are not the developer, please click back in your browser and try again."), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -87,3 +87,3 @@ fontFamily: `"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace`,
     }
-  }, error.message), /*#__PURE__*/React.createElement("p", null, "There was an uncaught exception in your application. Check the browser console and/or server console to inspect the error."), /*#__PURE__*/React.createElement("p", null, "If you are the developer, consider adding your own error boundary so users don't see this page when unexpected errors happen in production!"), /*#__PURE__*/React.createElement("p", null, "Read more about", " ", /*#__PURE__*/React.createElement("a", {
+  }, error.message), /*#__PURE__*/React__default.createElement("p", null, "There was an uncaught exception in your application. Check the browser console and/or server console to inspect the error."), /*#__PURE__*/React__default.createElement("p", null, "If you are the developer, consider adding your own error boundary so users don't see this page when unexpected errors happen in production!"), /*#__PURE__*/React__default.createElement("p", null, "Read more about", " ", /*#__PURE__*/React__default.createElement("a", {
     target: "_blank",
@@ -94,3 +94,3 @@ rel: "noreferrer",
 }
-let RemixCatchContext = /*#__PURE__*/React.createContext(undefined);
+let RemixCatchContext = /*#__PURE__*/React__default.createContext(undefined);
 function useCatch() {
@@ -105,8 +105,8 @@ return useContext(RemixCatchContext);
   if (catchVal) {
-    return /*#__PURE__*/React.createElement(RemixCatchContext.Provider, {
+    return /*#__PURE__*/React__default.createElement(RemixCatchContext.Provider, {
       value: catchVal
-    }, /*#__PURE__*/React.createElement(Component, null));
+    }, /*#__PURE__*/React__default.createElement(Component, null));
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
 }
@@ -118,7 +118,7 @@ /**
 function RemixRootDefaultCatchBoundary() {
-  return /*#__PURE__*/React.createElement("html", {
+  return /*#__PURE__*/React__default.createElement("html", {
     lang: "en"
-  }, /*#__PURE__*/React.createElement("head", null, /*#__PURE__*/React.createElement("meta", {
+  }, /*#__PURE__*/React__default.createElement("head", null, /*#__PURE__*/React__default.createElement("meta", {
     charSet: "utf-8"
-  }), /*#__PURE__*/React.createElement("title", null, "Unhandled Thrown Response!")), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement("main", {
+  }), /*#__PURE__*/React__default.createElement("title", null, "Unhandled Thrown Response!")), /*#__PURE__*/React__default.createElement("body", null, /*#__PURE__*/React__default.createElement("main", {
     style: {
@@ -128,3 +128,3 @@ border: "solid 2px hsl(10, 50%, 50%)",
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Unhandled Thrown Response!"), /*#__PURE__*/React.createElement("p", null, "If you are not the developer, please click back in your browser and try again."), /*#__PURE__*/React.createElement("p", null, "There was an unhandled thrown response in your application."), /*#__PURE__*/React.createElement("p", null, "If you are the developer, consider adding your own catch boundary so users don't see this page when unhandled thrown response happen in production!"), /*#__PURE__*/React.createElement("p", null, "Read more about", " ", /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h1", null, "Unhandled Thrown Response!"), /*#__PURE__*/React__default.createElement("p", null, "If you are not the developer, please click back in your browser and try again."), /*#__PURE__*/React__default.createElement("p", null, "There was an unhandled thrown response in your application."), /*#__PURE__*/React__default.createElement("p", null, "If you are the developer, consider adding your own catch boundary so users don't see this page when unhandled thrown response happen in production!"), /*#__PURE__*/React__default.createElement("p", null, "Read more about", " ", /*#__PURE__*/React__default.createElement("a", {
     target: "_blank",
@@ -131,0 +131,0 @@ rel: "noreferrer" // TODO: Update link to docs

browser/index.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -13,4 +13,5 @@ * Copyright (c) Remix Software Inc.
 export { Outlet } from 'react-router-dom';
-export { Form, Link, Links, LiveReload, Meta, NavLink, PrefetchPageLinks, Scripts, useActionData, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, usePendingFormSubmit, usePendingLocation, useRouteData, useSubmit, useTransition } from './components.js';
+export { Form, Link, Links, LiveReload, Meta, NavLink, PrefetchPageLinks, Scripts, useActionData, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, useSubmit, useTransition } from './components.js';
 export { useCatch } from './errorBoundaries.js';
 export { RemixServer } from './server.js';
+export { ScrollRestoration } from './scroll-restoration.js';

browser/invariant.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser/links.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser/markup.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser/routeMatching.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser/routeModules.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser/routes.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -11,3 +11,3 @@ * Copyright (c) Remix Software Inc.
  */
-import React from 'react';
+import React__default from 'react';
 import { loadRouteModule } from './routeModules.js';
@@ -22,3 +22,3 @@ import { fetchData, isCatchResponse, extractData, isRedirectResponse } from './data.js';
     caseSensitive: !!entryRoute.caseSensitive,
-    element: /*#__PURE__*/React.createElement(Component, {
+    element: /*#__PURE__*/React__default.createElement(Component, {
       id: entryRoute.id
@@ -25,0 +25,0 @@ }),

browser/server.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -12,3 +12,3 @@ * Copyright (c) Remix Software Inc.
 import { Action, createPath } from 'history';
-import React from 'react';
+import React__default from 'react';
 import { RemixEntry } from './components.js';
@@ -66,3 +66,3 @@
   };
-  return /*#__PURE__*/React.createElement(RemixEntry, {
+  return /*#__PURE__*/React__default.createElement(RemixEntry, {
     context: context,
@@ -69,0 +69,0 @@ action: Action.Pop,

browser/transition.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

components.d.ts

@@ -12,2 +12,3 @@ import type { Action, Location } from "history";
 import type { Transition, Fetcher } from "./transition";
+export { ScrollRestoration } from "./scroll-restoration";
 export declare function RemixEntry({ context: entryContext, action, location: historyLocation, navigator: _navigator, static: staticProp }: {
@@ -184,6 +185,2 @@ context: EntryContext;
 export declare function useLoaderData<T = AppData>(): T;
-/**
- * @deprecated Use `useLoaderData`
- */
-export declare let useRouteData: typeof useLoaderData;
 export declare function useActionData<T = AppData>(): T | undefined;
@@ -207,31 +204,4 @@ export declare function useTransition(): Transition;
 export declare function useFetchers(): Fetcher[];
-/**
- * @deprecated replaced by `useTransition().submission`
- */
-export declare function usePendingFormSubmit(): {
-    data: FormData;
-    method: "POST" | "PUT" | "PATCH" | "DELETE";
-    action: string;
-    formData: FormData;
-    encType: string;
-    key: string;
-} | {
-    data: FormData;
-    method: "GET";
-    action: string;
-    formData: FormData;
-    encType: string;
-    key: string;
-} | undefined;
-/**
- * Returns the next location if a location change is pending. This is useful
- * for showing loading indicators during route transitions from `<Link>`
- * clicks.
- *
- * @deprecated use `useTransition().location`
- */
-export declare function usePendingLocation(): Location | undefined;
 export declare function LiveReload({ port }: {
     port?: number;
 }): JSX.Element | null;
-export {};

components.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -30,2 +30,4 @@ * Copyright (c) Remix Software Inc.
 
+// RemixEntry
+
 const RemixEntryContext = /*#__PURE__*/React__default["default"].createContext(undefined);
@@ -269,3 +271,3 @@
   } // It's important for the route context to be above the error boundary so that
-  // a call to `useRouteData` doesn't accidentally get the parents route's data.
+  // a call to `useLoaderData` doesn't accidentally get the parents route's data.
 
@@ -608,4 +610,40 @@
   let formAction = useFormAction(action, formMethod);
+  let formRef = React__default["default"].useRef();
+  let ref = useComposedRefs(forwardedRef, formRef); // When calling `submit` on the form element itself, we don't get data from
+  // the button that submitted the event. For example:
+  //
+  //   <Form>
+  //     <button name="something" value="whatever">Submit</button>
+  //   </Form>
+  //
+  // formData.get("something") should be "whatever", but we don't get that
+  // unless we call submit on the clicked button itself.
+  //
+  // To figure out which button triggered the submit, we'll attach a click
+  // event listener to the form. The click event is always triggered before
+  // the submit event (even when submitting via keyboard when focused on
+  // another form field, yeeeeet) so we should have access to that button's
+  // data for use in the submit handler.
+
+  let clickedButtonRef = React__default["default"].useRef();
+  React__default["default"].useEffect(() => {
+    let form = formRef.current;
+    if (!form) return;
+
+    function handleClick(event) {
+      if (!(event.target instanceof HTMLElement)) return;
+      let submitButton = event.target.closest("button,input[type=submit]");
+
+      if (submitButton && submitButton.type === "submit") {
+        clickedButtonRef.current = submitButton;
+      }
+    }
+
+    form.addEventListener("click", handleClick);
+    return () => {
+      form && form.removeEventListener("click", handleClick);
+    };
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef,
+    ref: ref,
     method: formMethod,
@@ -618,6 +656,7 @@ action: formAction,
       event.preventDefault();
-      submit(event.currentTarget, {
+      submit(clickedButtonRef.current || event.currentTarget, {
         method,
         replace
       });
+      clickedButtonRef.current = null;
     }
@@ -828,7 +867,2 @@ }, props));
 }
-/**
- * @deprecated Use `useLoaderData`
- */
-
-let useRouteData = useLoaderData;
 function useActionData() {
@@ -912,34 +946,2 @@ let {
 }
-/**
- * @deprecated replaced by `useTransition().submission`
- */
-
-function usePendingFormSubmit() {
-  let {
-    transitionManager
-  } = useRemixEntryContext();
-  let {
-    submission
-  } = transitionManager.getState().transition;
-
-  if (submission) {
-    return { ...submission,
-      data: submission.formData
-    };
-  }
-}
-/**
- * Returns the next location if a location change is pending. This is useful
- * for showing loading indicators during route transitions from `<Link>`
- * clicks.
- *
- * @deprecated use `useTransition().location`
- */
-
-function usePendingLocation() {
-  let {
-    transitionManager
-  } = useRemixEntryContext();
-  return transitionManager.getState().transition.location;
-}
 function LiveReload({
@@ -972,2 +974,19 @@ port = 8002
 
+function useComposedRefs(...refs) {
+  return React__default["default"].useCallback(node => {
+    for (let ref of refs) {
+      if (ref == null) continue;
+
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        try {
+          ref.current = node;
+        } catch (_) {}
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, refs);
+}
+
 exports.Form = Form;
@@ -992,7 +1011,4 @@ exports.FormImpl = FormImpl;
 exports.useMatches = useMatches;
-exports.usePendingFormSubmit = usePendingFormSubmit;
-exports.usePendingLocation = usePendingLocation;
-exports.useRouteData = useRouteData;
 exports.useSubmit = useSubmit;
 exports.useSubmitImpl = useSubmitImpl;
 exports.useTransition = useTransition;

data.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

errorBoundaries.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

index.d.ts

@@ -5,8 +5,9 @@ export type { RemixBrowserProps } from "./browser";
 export type { FormProps, SubmitOptions, SubmitFunction, RemixNavLinkProps as NavLinkProps, RemixLinkProps as LinkProps } from "./components";
-export { Meta, Links, Scripts, Link, NavLink, Form, PrefetchPageLinks, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useLoaderData, useActionData, useBeforeUnload, useMatches, usePendingLocation, usePendingFormSubmit, useRouteData } from "./components";
+export { Meta, Links, Scripts, Link, NavLink, Form, PrefetchPageLinks, ScrollRestoration, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useLoaderData, useActionData, useBeforeUnload, useMatches } from "./components";
 export type { FormMethod, FormEncType } from "./data";
 export type { ThrownResponse } from "./errors";
 export { useCatch } from "./errorBoundaries";
-export type { ShouldReloadFunction } from "./routeModules";
+export type { HtmlLinkDescriptor } from "./links";
+export type { ShouldReloadFunction, HtmlMetaDescriptor } from "./routeModules";
 export type { RemixServerProps } from "./server";
 export { RemixServer } from "./server";

index.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -20,2 +20,3 @@ * Copyright (c) Remix Software Inc.
 var server = require('./server.js');
+var scrollRestoration = require('./scroll-restoration.js');
 
@@ -44,5 +45,2 @@
 exports.useMatches = components.useMatches;
-exports.usePendingFormSubmit = components.usePendingFormSubmit;
-exports.usePendingLocation = components.usePendingLocation;
-exports.useRouteData = components.useRouteData;
 exports.useSubmit = components.useSubmit;
@@ -52,1 +50,2 @@ exports.useTransition = components.useTransition;
 exports.RemixServer = server.RemixServer;
+exports.ScrollRestoration = scrollRestoration.ScrollRestoration;

invariant.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

links.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

magicExports/browser/client.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -11,2 +11,2 @@ * Copyright (c) Remix Software Inc.
  */
-export { Form, Link, Links, LiveReload, Meta, NavLink, Outlet, PrefetchPageLinks, RemixBrowser, RemixServer, Scripts, useActionData, useBeforeUnload, useCatch, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, usePendingFormSubmit, usePendingLocation, useRouteData, useSubmit, useTransition } from '@remix-run/react';
+export { Form, Link, Links, LiveReload, Meta, NavLink, Outlet, PrefetchPageLinks, RemixBrowser, RemixServer, Scripts, ScrollRestoration, useActionData, useBeforeUnload, useCatch, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, useSubmit, useTransition } from '@remix-run/react';

magicExports/client.d.ts

 export type { RemixBrowserProps, FormProps, SubmitOptions, SubmitFunction, FormMethod, FormEncType, RemixServerProps, ShouldReloadFunction, ThrownResponse, LinkProps, NavLinkProps } from "@remix-run/react";
-export { RemixBrowser, Meta, Links, Scripts, Link, NavLink, Outlet, Form, PrefetchPageLinks, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useCatch, useLoaderData, useActionData, useBeforeUnload, useMatches, RemixServer, usePendingLocation, usePendingFormSubmit, useRouteData } from "@remix-run/react";
+export { RemixBrowser, Meta, Links, Scripts, Link, NavLink, Outlet, Form, PrefetchPageLinks, ScrollRestoration, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useCatch, useLoaderData, useActionData, useBeforeUnload, useMatches, RemixServer } from "@remix-run/react";

magicExports/client.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -63,2 +63,6 @@ * Copyright (c) Remix Software Inc.
 });
+Object.defineProperty(exports, 'ScrollRestoration', {
+  enumerable: true,
+  get: function () { return react.ScrollRestoration; }
+});
 Object.defineProperty(exports, 'useActionData', {
@@ -96,14 +100,2 @@ enumerable: true,
 });
-Object.defineProperty(exports, 'usePendingFormSubmit', {
-  enumerable: true,
-  get: function () { return react.usePendingFormSubmit; }
-});
-Object.defineProperty(exports, 'usePendingLocation', {
-  enumerable: true,
-  get: function () { return react.usePendingLocation; }
-});
-Object.defineProperty(exports, 'useRouteData', {
-  enumerable: true,
-  get: function () { return react.useRouteData; }
-});
 Object.defineProperty(exports, 'useSubmit', {
@@ -110,0 +102,0 @@ enumerable: true,

markup.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

package.json

 {
   "name": "@remix-run/react",
   "description": "React DOM bindings for Remix",
-  "version": "0.21.0",
+  "version": "1.0.0-rc.1",
   "repository": "https://github.com/remix-run/packages",
@@ -6,0 +6,0 @@ "main": "index.js",

routeMatching.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

routeModules.d.ts

@@ -18,3 +18,3 @@ import type { Location } from "history";
     links?: LinksFunction;
-    meta?: MetaFunction | MetaDescriptor;
+    meta?: MetaFunction | HtmlMetaDescriptor;
     unstable_shouldReload?: ShouldReloadFunction;
@@ -50,3 +50,3 @@ }
         location: Location;
-    }): MetaDescriptor;
+    }): HtmlMetaDescriptor;
 }
@@ -59,3 +59,3 @@ /**
  */
-export interface MetaDescriptor {
+export interface HtmlMetaDescriptor {
     [name: string]: string | string[];
@@ -62,0 +62,0 @@ }

routeModules.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

routes.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

server.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

transition.js

 /**
- * @remix-run/react v0.21.0
+ * @remix-run/react v1.0.0-rc.1
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

230749

increased by4.33%

Number of package files

51

increased by6.25%

Lines of code

6530

increased by3.4%

Worsened metrics

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes