react-router-dom-v5-compat - npm Package Compare versions

Comparing version 0.0.0-experimental-compat.2 to 0.0.0-experimental-compat.3

index.d.ts

@@ -52,2 +52,2 @@ /**
 export type { StaticRouterProps } from "./lib/components";
-export { CompatRouter, StaticRouter } from "./lib/components";
+export { CompatRouter, CompatRoute, StaticRouter } from "./lib/components";

index.js

 /**
- * React Router DOM v5 Compat v0.0.0-experimental-compat.2
+ * React Router DOM v5 Compat v0.0.0-experimental-compat.3
  *
@@ -13,5 +13,5 @@ * Copyright (c) Remix Software Inc.
 import { createBrowserHistory, createHashHistory, parsePath, Action, createPath as createPath$1 } from 'history';
-import { Router, useHref, createPath, useLocation, useResolvedPath, useNavigate, Routes, Route } from 'react-router';
+import { Router, useHref, createPath, useLocation, useResolvedPath, useNavigate, Route, Routes } from 'react-router';
 export { MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes } from 'react-router';
-import { useHistory } from 'react-router-dom';
+import { Route as Route$1, useHistory } from 'react-router-dom';
 
@@ -371,2 +371,13 @@ function _extends() {
 
+// but not worried about that for now.
+
+function CompatRoute(props) {
+  let {
+    path
+  } = props;
+  return /*#__PURE__*/createElement(Route, {
+    path: path,
+    element: /*#__PURE__*/createElement(Route$1, props)
+  });
+}
 function CompatRouter(_ref) {
@@ -456,3 +467,3 @@ let {
 
-export { BrowserRouter, CompatRouter, HashRouter, Link, NavLink, StaticRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, useLinkClickHandler, useSearchParams };
+export { BrowserRouter, CompatRoute, CompatRouter, HashRouter, Link, NavLink, StaticRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, useLinkClickHandler, useSearchParams };
 //# sourceMappingURL=index.js.map

main.js

 /**
- * React Router DOM v5 Compat v0.0.0-experimental-compat.2
+ * React Router DOM v5 Compat v0.0.0-experimental-compat.3
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

package.json

 {
   "name": "react-router-dom-v5-compat",
-  "version": "0.0.0-experimental-compat.2",
+  "version": "0.0.0-experimental-compat.3",
   "author": "Remix Software <[e-mail]>",
@@ -18,3 +18,3 @@ "description": "Migration path to React Router v6 from v4/5",
     "history": "^5.3.0",
-    "react-router": "0.0.0-experimental-compat.2"
+    "react-router": "0.0.0-experimental-compat.3"
   },
@@ -21,0 +21,0 @@ "peerDependencies": {

umd/react-router-dom-v5-compat.development.js

 /**
- * React Router DOM v5 Compat v0.0.0-experimental-compat.2
+ * React Router DOM v5 Compat v0.0.0-experimental-compat.3
  *
@@ -370,2 +370,13 @@ * Copyright (c) Remix Software Inc.
 
+  // but not worried about that for now.
+
+  function CompatRoute(props) {
+    let {
+      path
+    } = props;
+    return /*#__PURE__*/React.createElement(reactRouter.Route, {
+      path: path,
+      element: /*#__PURE__*/React.createElement(reactRouterDom.Route, props)
+    });
+  }
   function CompatRouter(_ref) {
@@ -630,2 +641,3 @@ let {
   exports.BrowserRouter = BrowserRouter;
+  exports.CompatRoute = CompatRoute;
   exports.CompatRouter = CompatRouter;
@@ -632,0 +644,0 @@ exports.HashRouter = HashRouter;

umd/react-router-dom-v5-compat.production.min.js

 /**
- * React Router DOM v5 Compat v0.0.0-experimental-compat.2
+ * React Router DOM v5 Compat v0.0.0-experimental-compat.3
  *
@@ -11,3 +11,3 @@ * Copyright (c) Remix Software Inc.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("history"),require("react-router"),require("react-router-dom")):"function"==typeof define&&define.amd?define(["exports","react","history","react-router","react-router-dom"],t):t((e=e||self).ReactRouterDOMv5Compat={},e.React,e.HistoryLibrary,e.ReactRouter,e.ReactRouterDOM)}(this,(function(e,t,r,n,a){"use strict";function o(){return o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}function u(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}const i=["onClick","reloadDocument","replace","state","target","to"],c=["aria-current","caseSensitive","className","end","style","to","children"];const s=t.forwardRef((function(e,r){let{onClick:a,reloadDocument:c,replace:s=!1,state:l,target:h,to:y}=e,p=u(e,i),b=n.useHref(y),d=f(y,{replace:s,state:l,target:h});return t.createElement("a",o({},p,{href:b,onClick:function(e){a&&a(e),e.defaultPrevented||c||d(e)},ref:r,target:h}))})),l=t.forwardRef((function(e,r){let{"aria-current":a="page",caseSensitive:i=!1,className:l="",end:f=!1,style:h,to:y,children:p}=e,b=u(e,c),d=n.useLocation(),m=n.useResolvedPath(y),g=d.pathname,v=m.pathname;i||(g=g.toLowerCase(),v=v.toLowerCase());let P,R=g===v||!f&&g.startsWith(v)&&"/"===g.charAt(v.length),O=R?a:void 0;P="function"==typeof l?l({isActive:R}):[l,R?"active":null].filter(Boolean).join(" ");let w="function"==typeof h?h({isActive:R}):h;return t.createElement(s,o({},b,{"aria-current":O,className:P,ref:r,style:w,to:y}),"function"==typeof p?p({isActive:R}):p)}));function f(e,r){let{target:a,replace:o,state:u}=void 0===r?{}:r,i=n.useNavigate(),c=n.useLocation(),s=n.useResolvedPath(e);return t.useCallback((t=>{if(!(0!==t.button||a&&"_self"!==a||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(t))){t.preventDefault();let r=!!o||n.createPath(c)===n.createPath(s);i(e,{replace:r,state:u})}}),[c,i,s,o,u,a,e])}function h(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,r)=>{let n=e[r];return t.concat(Array.isArray(n)?n.map((e=>[r,e])):[[r,n]])}),[]))}Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return n.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return n.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return n.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return n.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return n.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return n.Router}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return n.Routes}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return n.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return n.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return n.UNSAFE_RouteContext}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return n.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return n.createRoutesFromChildren}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return n.generatePath}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return n.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return n.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return n.parsePath}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return n.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return n.resolvePath}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return n.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return n.useInRouterContext}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return n.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return n.useMatch}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return n.useNavigate}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return n.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return n.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return n.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return n.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return n.useResolvedPath}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return n.useRoutes}}),e.BrowserRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createBrowserHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(n.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.CompatRouter=function(e){let{children:r}=e,o=a.useHistory(),[u,i]=t.useState((()=>({location:o.location,action:o.action})));return t.useLayoutEffect((()=>{o.listen(((e,t)=>i({location:e,action:t})))}),[o]),t.createElement(n.Router,{navigationType:u.action,location:u.location,navigator:o},t.createElement(n.Routes,null,t.createElement(n.Route,{path:"*",element:r})))},e.HashRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createHashHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(n.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.Link=s,e.NavLink=l,e.StaticRouter=function(e){let{basename:a,children:o,location:u="/"}=e;"string"==typeof u&&(u=r.parsePath(u));let i=r.Action.Pop,c={pathname:u.pathname||"/",search:u.search||"",hash:u.hash||"",state:u.state||null,key:u.key||"default"},s={createHref:e=>"string"==typeof e?e:r.createPath(e),push(e){throw new Error("You cannot use navigator.push() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+")` somewhere in your app.")},replace(e){throw new Error("You cannot use navigator.replace() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+", { replace: true })` somewhere in your app.")},go(e){throw new Error("You cannot use navigator.go() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+e+")` somewhere in your app.")},back(){throw new Error("You cannot use navigator.back() on the server because it is a stateless environment.")},forward(){throw new Error("You cannot use navigator.forward() on the server because it is a stateless environment.")}};return t.createElement(n.Router,{basename:a,children:o,location:c,navigationType:i,navigator:s,static:!0})},e.createSearchParams=h,e.unstable_HistoryRouter=function(e){let{basename:r,children:a,history:o}=e;const[u,i]=t.useState({action:o.action,location:o.location});return t.useLayoutEffect((()=>o.listen(i)),[o]),t.createElement(n.Router,{basename:r,children:a,location:u.location,navigationType:u.action,navigator:o})},e.useLinkClickHandler=f,e.useSearchParams=function(e){let r=t.useRef(h(e)),a=n.useLocation(),o=t.useMemo((()=>{let e=h(a.search);for(let t of r.current.keys())e.has(t)||r.current.getAll(t).forEach((r=>{e.append(t,r)}));return e}),[a.search]),u=n.useNavigate();return[o,t.useCallback(((e,t)=>{u("?"+h(e),t)}),[u])]},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("history"),require("react-router"),require("react-router-dom")):"function"==typeof define&&define.amd?define(["exports","react","history","react-router","react-router-dom"],t):t((e=e||self).ReactRouterDOMv5Compat={},e.React,e.HistoryLibrary,e.ReactRouter,e.ReactRouterDOM)}(this,(function(e,t,r,n,a){"use strict";function o(){return o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}function u(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}const i=["onClick","reloadDocument","replace","state","target","to"],c=["aria-current","caseSensitive","className","end","style","to","children"];const s=t.forwardRef((function(e,r){let{onClick:a,reloadDocument:c,replace:s=!1,state:l,target:h,to:p}=e,y=u(e,i),m=n.useHref(p),b=f(p,{replace:s,state:l,target:h});return t.createElement("a",o({},y,{href:m,onClick:function(e){a&&a(e),e.defaultPrevented||c||b(e)},ref:r,target:h}))})),l=t.forwardRef((function(e,r){let{"aria-current":a="page",caseSensitive:i=!1,className:l="",end:f=!1,style:h,to:p,children:y}=e,m=u(e,c),b=n.useLocation(),d=n.useResolvedPath(p),g=b.pathname,v=d.pathname;i||(g=g.toLowerCase(),v=v.toLowerCase());let P,R=g===v||!f&&g.startsWith(v)&&"/"===g.charAt(v.length),O=R?a:void 0;P="function"==typeof l?l({isActive:R}):[l,R?"active":null].filter(Boolean).join(" ");let w="function"==typeof h?h({isActive:R}):h;return t.createElement(s,o({},m,{"aria-current":O,className:P,ref:r,style:w,to:p}),"function"==typeof y?y({isActive:R}):y)}));function f(e,r){let{target:a,replace:o,state:u}=void 0===r?{}:r,i=n.useNavigate(),c=n.useLocation(),s=n.useResolvedPath(e);return t.useCallback((t=>{if(!(0!==t.button||a&&"_self"!==a||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(t))){t.preventDefault();let r=!!o||n.createPath(c)===n.createPath(s);i(e,{replace:r,state:u})}}),[c,i,s,o,u,a,e])}function h(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,r)=>{let n=e[r];return t.concat(Array.isArray(n)?n.map((e=>[r,e])):[[r,n]])}),[]))}Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return n.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return n.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return n.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return n.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return n.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return n.Router}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return n.Routes}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return n.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return n.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return n.UNSAFE_RouteContext}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return n.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return n.createRoutesFromChildren}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return n.generatePath}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return n.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return n.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return n.parsePath}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return n.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return n.resolvePath}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return n.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return n.useInRouterContext}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return n.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return n.useMatch}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return n.useNavigate}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return n.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return n.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return n.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return n.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return n.useResolvedPath}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return n.useRoutes}}),e.BrowserRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createBrowserHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(n.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.CompatRoute=function(e){let{path:r}=e;return t.createElement(n.Route,{path:r,element:t.createElement(a.Route,e)})},e.CompatRouter=function(e){let{children:r}=e,o=a.useHistory(),[u,i]=t.useState((()=>({location:o.location,action:o.action})));return t.useLayoutEffect((()=>{o.listen(((e,t)=>i({location:e,action:t})))}),[o]),t.createElement(n.Router,{navigationType:u.action,location:u.location,navigator:o},t.createElement(n.Routes,null,t.createElement(n.Route,{path:"*",element:r})))},e.HashRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createHashHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(n.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.Link=s,e.NavLink=l,e.StaticRouter=function(e){let{basename:a,children:o,location:u="/"}=e;"string"==typeof u&&(u=r.parsePath(u));let i=r.Action.Pop,c={pathname:u.pathname||"/",search:u.search||"",hash:u.hash||"",state:u.state||null,key:u.key||"default"},s={createHref:e=>"string"==typeof e?e:r.createPath(e),push(e){throw new Error("You cannot use navigator.push() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+")` somewhere in your app.")},replace(e){throw new Error("You cannot use navigator.replace() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+", { replace: true })` somewhere in your app.")},go(e){throw new Error("You cannot use navigator.go() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+e+")` somewhere in your app.")},back(){throw new Error("You cannot use navigator.back() on the server because it is a stateless environment.")},forward(){throw new Error("You cannot use navigator.forward() on the server because it is a stateless environment.")}};return t.createElement(n.Router,{basename:a,children:o,location:c,navigationType:i,navigator:s,static:!0})},e.createSearchParams=h,e.unstable_HistoryRouter=function(e){let{basename:r,children:a,history:o}=e;const[u,i]=t.useState({action:o.action,location:o.location});return t.useLayoutEffect((()=>o.listen(i)),[o]),t.createElement(n.Router,{basename:r,children:a,location:u.location,navigationType:u.action,navigator:o})},e.useLinkClickHandler=f,e.useSearchParams=function(e){let r=t.useRef(h(e)),a=n.useLocation(),o=t.useMemo((()=>{let e=h(a.search);for(let t of r.current.keys())e.has(t)||r.current.getAll(t).forEach((r=>{e.append(t,r)}));return e}),[a.search]),u=n.useNavigate();return[o,t.useCallback(((e,t)=>{u("?"+h(e),t)}),[u])]},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-router-dom-v5-compat.production.min.js.map

No alert changes

Improved metrics

Total package byte prevSize

151158

increased by0.86%

Lines of code

1266

increased by1.69%

Dependency changes

• + Addedreact-router@0.0.0-experimental-compat.3(transitive)

• - Removedreact-router@0.0.0-experimental-compat.2(transitive)

• Updatedreact-router@0.0.0-experimental-compat.3