react-router-dom - npm Package Compare versions

Comparing version 0.0.0-experimental-12346 to 0.0.0-experimental-48058118

LICENSE.md

 MIT License
 
 Copyright (c) React Training 2015-2019
-Copyright (c) Remix Software 2020-2021
+Copyright (c) Remix Software 2020-2022
 
@@ -6,0 +6,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

 {
   "name": "react-router-dom",
-  "version": "0.0.0-experimental-12346",
-  "author": "Remix Software <[e-mail]>",
+  "version": "0.0.0-experimental-48058118",
   "description": "Declarative routing for React web applications",
+  "keywords": [
+    "react",
+    "router",
+    "route",
+    "routing",
+    "history",
+    "link"
+  ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/remix-run/react-router.git",
+    "url": "https://github.com/remix-run/react-router",
     "directory": "packages/react-router-dom"
   },
   "license": "MIT",
-  "main": "./main.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "unpkg": "./umd/react-router-dom.production.min.js",
+  "author": "Remix Software <[e-mail]>",
+  "sideEffects": false,
+  "main": "./dist/main.js",
+  "unpkg": "./dist/umd/react-router-dom.production.min.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "dependencies": {
-    "react-router": "0.0.0-experimental-12346",
-    "history": "^5.2.0"
+    "@remix-run/router": "0.0.0-experimental-48058118",
+    "react-router": "0.0.0-experimental-48058118"
   },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "peerDependencies": {
@@ -24,11 +37,14 @@ "react": ">=16.8",
   },
-  "sideEffects": false,
-  "keywords": [
-    "react",
-    "router",
-    "route",
-    "routing",
-    "history",
-    "link"
-  ]
+  "files": [
+    "dist/",
+    "CHANGELOG.md",
+    "LICENSE.md",
+    "README.md",
+    "server.d.ts",
+    "server.js",
+    "server.mjs"
+  ],
+  "engines": {
+    "node": ">=14"
+  }
 }

README.md

@@ -5,2 +5,2 @@ # React Router DOM
 Router](https://github.com/remix-run/react-router) in web applications.
-Please see [the Getting Started guide](https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md) for more information on how to get started with React Router.
+Please see [the Getting Started guide](https://reactrouter.com/en/main/start/tutorial) for more information on how to get started with React Router.

server.d.ts

 import * as React from "react";
-import { Location } from "history";
+import type { Router as RemixRouter, StaticHandlerContext } from "@remix-run/router";
+import type { Location, RouteObject } from "react-router-dom";
 export interface StaticRouterProps {
@@ -9,5 +10,17 @@ basename?: string;
 /**
- * A <Router> that may not transition to any other location. This is useful
+ * A <Router> that may not navigate to any other location. This is useful
  * on the server where there is no stateful UI.
  */
 export declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): JSX.Element;
+export interface StaticRouterProviderProps {
+    context: StaticHandlerContext;
+    router: RemixRouter;
+    hydrate?: boolean;
+    nonce?: string;
+}
+/**
+ * A Data Router that may not navigate to any other location. This is useful
+ * on the server where there is no stateful UI.
+ */
+export declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): JSX.Element;
+export declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext): RemixRouter;

server.js

@@ -6,9 +6,30 @@ 'use strict';
 var React = require('react');
-var history = require('history');
+var router = require('@remix-run/router');
 var reactRouterDom = require('react-router-dom');
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 /**
- * A <Router> that may not transition to any other location. This is useful
+ * A <Router> that may not navigate to any other location. This is useful
  * on the server where there is no stateful UI.
  */
+
 function StaticRouter({
@@ -20,6 +41,6 @@ basename,
   if (typeof locationProp === "string") {
-    locationProp = history.parsePath(locationProp);
+    locationProp = reactRouterDom.parsePath(locationProp);
   }
 
-  let action = history.Action.Pop;
+  let action = router.Action.Pop;
   let location = {
@@ -32,7 +53,96 @@ pathname: locationProp.pathname || "/",
   };
-  let staticNavigator = {
-    createHref(to) {
-      return typeof to === "string" ? to : history.createPath(to);
-    },
+  let staticNavigator = getStatelessNavigator();
+  return /*#__PURE__*/React__namespace.createElement(reactRouterDom.Router, {
+    basename: basename,
+    children: children,
+    location: location,
+    navigationType: action,
+    navigator: staticNavigator,
+    static: true
+  });
+}
+/**
+ * A Data Router that may not navigate to any other location. This is useful
+ * on the server where there is no stateful UI.
+ */
 
+function StaticRouterProvider({
+  context,
+  router: router$1,
+  hydrate = true,
+  nonce
+}) {
+  !(router$1 && context) ? process.env.NODE_ENV !== "production" ? router.invariant(false, "You must provide `router` and `context` to <StaticRouterProvider>") : router.invariant(false) : void 0;
+  let dataRouterContext = {
+    router: router$1,
+    navigator: getStatelessNavigator(),
+    static: true,
+    staticContext: context,
+    basename: context.basename || "/"
+  };
+  let hydrateScript = "";
+
+  if (hydrate !== false) {
+    let data = {
+      loaderData: context.loaderData,
+      actionData: context.actionData,
+      errors: serializeErrors(context.errors)
+    }; // Use JSON.parse here instead of embedding a raw JS object here to speed
+    // up parsing on the client.  Dual-stringify is needed to ensure all quotes
+    // are properly escaped in the resulting string.  See:
+    //   https://v8.dev/blog/cost-of-javascript-2019#json
+
+    let json = JSON.stringify(JSON.stringify(data));
+    hydrateScript = `window.__staticRouterHydrationData = JSON.parse(${json});`;
+  }
+
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(reactRouterDom.UNSAFE_DataRouterContext.Provider, {
+    value: dataRouterContext
+  }, /*#__PURE__*/React__namespace.createElement(reactRouterDom.UNSAFE_DataRouterStateContext.Provider, {
+    value: dataRouterContext.router.state
+  }, /*#__PURE__*/React__namespace.createElement(reactRouterDom.Router, {
+    basename: dataRouterContext.basename,
+    location: dataRouterContext.router.state.location,
+    navigationType: dataRouterContext.router.state.historyAction,
+    navigator: dataRouterContext.navigator
+  }, /*#__PURE__*/React__namespace.createElement(reactRouterDom.Routes, null)))), hydrateScript ? /*#__PURE__*/React__namespace.createElement("script", {
+    suppressHydrationWarning: true,
+    nonce: nonce,
+    dangerouslySetInnerHTML: {
+      __html: hydrateScript
+    }
+  }) : null);
+}
+
+function serializeErrors(errors) {
+  if (!errors) return null;
+  let entries = Object.entries(errors);
+  let serialized = {};
+
+  for (let [key, val] of entries) {
+    // Hey you!  If you change this, please change the corresponding logic in
+    // deserializeErrors in react-router-dom/index.tsx :)
+    if (router.isRouteErrorResponse(val)) {
+      serialized[key] = { ...val,
+        __type: "RouteErrorResponse"
+      };
+    } else if (val instanceof Error) {
+      // Do not serialize stack traces from SSR for security reasons
+      serialized[key] = {
+        message: val.message,
+        __type: "Error"
+      };
+    } else {
+      serialized[key] = val;
+    }
+  }
+
+  return serialized;
+}
+
+function getStatelessNavigator() {
+  return {
+    createHref,
+    encodeLocation,
+
     push(to) {
@@ -59,12 +169,129 @@ 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(to)})\` somewhere in your app.`);
   };
-  return /*#__PURE__*/React.createElement(reactRouterDom.Router, {
-    basename: basename,
-    children: children,
-    location: location,
-    navigationType: action,
-    navigator: staticNavigator,
-    static: true
+} // Temporary manifest generation - we should optimize this by combining the
+// tree-walks between convertRoutesToDataRoutes, enhanceManualRouteObjects,
+// and generateManifest.
+// Also look into getting rid of `route as AgnosticDataRouteObject` down below?
+
+
+function generateManifest(routes, manifest = new Map()) {
+  routes.forEach(route => {
+    manifest.set(route.id, route);
+
+    if (route.children) {
+      generateManifest(route.children, manifest);
+    }
   });
+  return manifest;
 }
 
+function createStaticRouter(routes, context) {
+  let dataRoutes = router.UNSAFE_convertRoutesToDataRoutes(reactRouterDom.UNSAFE_enhanceManualRouteObjects(routes));
+  let manifest = generateManifest(dataRoutes); // Because our context matches may be from a framework-agnostic set of
+  // routes passed to createStaticHandler(), we update them here with our
+  // newly created/enhanced data routes
+
+  let matches = context.matches.map(match => {
+    let route = manifest.get(match.route.id) || match.route;
+    return { ...match,
+      route: route
+    };
+  });
+
+  let msg = method => `You cannot use router.${method}() on the server because it is a stateless environment`;
+
+  return {
+    get basename() {
+      return context.basename;
+    },
+
+    get state() {
+      return {
+        historyAction: router.Action.Pop,
+        location: context.location,
+        matches,
+        loaderData: context.loaderData,
+        actionData: context.actionData,
+        errors: context.errors,
+        initialized: true,
+        navigation: router.IDLE_NAVIGATION,
+        restoreScrollPosition: null,
+        preventScrollReset: false,
+        revalidation: "idle",
+        fetchers: new Map(),
+        blockers: new Map()
+      };
+    },
+
+    get routes() {
+      return dataRoutes;
+    },
+
+    initialize() {
+      throw msg("initialize");
+    },
+
+    subscribe() {
+      throw msg("subscribe");
+    },
+
+    enableScrollRestoration() {
+      throw msg("enableScrollRestoration");
+    },
+
+    navigate() {
+      throw msg("navigate");
+    },
+
+    fetch() {
+      throw msg("fetch");
+    },
+
+    revalidate() {
+      throw msg("revalidate");
+    },
+
+    createHref,
+    encodeLocation,
+
+    getFetcher() {
+      return router.IDLE_FETCHER;
+    },
+
+    deleteFetcher() {
+      throw msg("deleteFetcher");
+    },
+
+    dispose() {
+      throw msg("dispose");
+    },
+
+    getBlocker() {
+      throw msg("getBlocker");
+    },
+
+    deleteBlocker() {
+      throw msg("deleteBlocker");
+    },
+
+    _internalFetchControllers: new Map(),
+    _internalActiveDeferreds: new Map()
+  };
+}
+
+function createHref(to) {
+  return typeof to === "string" ? to : reactRouterDom.createPath(to);
+}
+
+function encodeLocation(to) {
+  // Locations should already be encoded on the server, so just return as-is
+  let path = typeof to === "string" ? reactRouterDom.parsePath(to) : to;
+  return {
+    pathname: path.pathname || "",
+    search: path.search || "",
+    hash: path.hash || ""
+  };
+}
+
 exports.StaticRouter = StaticRouter;
+exports.StaticRouterProvider = StaticRouterProvider;
+exports.createStaticRouter = createStaticRouter;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

565727

increased by235.15%

Number of package files

23

increased by27.78%

Lines of code

4422

increased by203.5%

Worsened metrics

Dev dependency count

2

increased byInfinity%

Number of low supply chain risk alerts

22

increased by340%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@remix-run/router@0.0.0-experimental-48058118

• + Added@remix-run/router@0.0.0-experimental-48058118(transitive)

• + Addedreact-router@0.0.0-experimental-48058118(transitive)

• - Removedhistory@^5.2.0

• - Removed@babel/runtime@7.26.0(transitive)

• - Removedhistory@5.3.0(transitive)

• - Removedreact-router@0.0.0-experimental-12346(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updatedreact-router@0.0.0-experimental-48058118