chore: upgrade to react router v6 (PROVCON-3003)

demo/.babelrc

@@ -5,7 +5,8 @@
       "module-resolver",
       {
         "alias": {
-          "@stoplight/elements": "../packages/elements/src"
+          "@stoplight/elements": "../packages/elements/src",
+          "@stoplight/elements-dev-portal": "../packages/elements-dev-portal/src"
         }
       }
     ],

demo/package.json

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@stoplight/mosaic": "^1.53.4",
-    "@stoplight/elements": "^8.4.2",
+    "@stoplight/elements": "^8.5.2",
+    "@stoplight/elements-dev-portal": "^2.5.2",
     "history": "^5.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-github-btn": "1.4.0",
-    "react-router-dom": "6.0.0-beta.0"
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@types/jest": "^26.0.22",

demo/src/components/ElementsAPI.tsx

@@ -16,7 +16,7 @@ export const ElementsAPI: React.FC = () => {
 
   return (
     <Box flex={1} overflowY={layout !== 'stacked' ? 'hidden' : undefined}>
-      <API apiDescriptionUrl={specUrlWithProxy} router="hash" layout={layout} />
+      <API apiDescriptionUrl={specUrlWithProxy} router="history" layout={layout} />
     </Box>
   );
 };

demo/webpack/common.js

@@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const absoluteElementsPath = resolve(__dirname, '../../packages/elements/src');
 const absoluteElementsCorePath = resolve(__dirname, '../../packages/elements-core/src');
+const absoluteElementsDevPortalPath = resolve(__dirname, '../../packages/elements-dev-portal/src');
 
 console.log(absoluteElementsPath);
 
@@ -15,6 +16,7 @@ module.exports = {
     alias: {
       '@stoplight/elements': absoluteElementsPath,
       '@stoplight/elements-core': absoluteElementsCorePath,
+      '@stoplight/elements-dev-portal': absoluteElementsDevPortalPath,
     },
     fallback: {
       stream: false,

examples/angular/src/app/stoplight-project/stoplight-project.component.html

@@ -2,4 +2,5 @@
   [platformUrl]="platformUrl"
   [projectId]="projectId"
   [basePath]="basePath"
+  [router]="router"
 ></elements-stoplight-project>

examples/angular/src/app/stoplight-project/stoplight-project.component.ts

@@ -10,4 +10,5 @@ export class StoplightProjectComponent {
   projectId = 'cHJqOjYwNjYx';
   platformUrl = 'https://stoplight.io';
   basePath = environment.basePath ? `${environment.basePath}/stoplight-project` : 'stoplight-project';
+  router = 'history';
 }

examples/react-cra/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@stoplight/elements": "^7.0.0",
     "@stoplight/elements-dev-portal": "^1.0.0",
-    "react": "^17.0.2"
+    "react": "^17.0.2",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@types/node": "^17.0.11",

examples/react-cra/src/App.tsx

@@ -1,6 +1,6 @@
 import { DevPortalProvider } from '@stoplight/elements-dev-portal';
 import React, { Component } from 'react';
-import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 import { StoplightAPI } from './components/API';
 import { Navigation } from './components/Navigation';
@@ -17,14 +17,12 @@ class App extends Component {
               <Navigation />
             </header>
             <main className="main-content">
-              <Switch>
-                <Route exact path="/">
-                  <Redirect to="/stoplight-project" />
-                </Route>
-                <Route path="/zoom-api" component={StoplightAPI} />
-                <Route path="/stoplight-project" component={StoplightProjectDocs} />
-                <Route component={NotFound} />
-              </Switch>
+              <Routes>
+                <Route path="/zoom-api/*" element={<StoplightAPI />} />
+                <Route path="/stoplight-project/*" element={<StoplightProjectDocs />} />
+                <Route path="/" element={<Navigate to="stoplight-project" replace />} />
+                <Route element={<NotFound />} />
+              </Routes>
             </main>
           </div>
         </BrowserRouter>

examples/react-cra/src/components/API.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 export const StoplightAPI: React.FC = () => {
   return (
     <API
+      router="history"
       basePath="zoom-api"
       apiDescriptionUrl="https://raw.githubusercontent.com/stoplightio/Public-APIs/master/reference/zoom/openapi.yaml"
     />

examples/react-cra/src/components/StoplightProject.tsx

@@ -4,5 +4,12 @@ import { StoplightProject } from '@stoplight/elements-dev-portal';
 import React from 'react';
 
 export const StoplightProjectDocs: React.FC = () => {
-  return <StoplightProject basePath="stoplight-project" platformUrl="https://stoplight.io" projectId="cHJqOjYwNjYx" />;
+  return (
+    <StoplightProject
+      router="history"
+      basePath="stoplight-project"
+      platformUrl="https://stoplight.io"
+      projectId="cHJqOjYwNjYx"
+    />
+  );
 };

package.json

@@ -24,6 +24,7 @@
     "@storybook/addon-styling-webpack": "0.0.5",
     "@storybook/addon-toolbars": "7.5.3",
     "@storybook/addon-viewport": "7.5.3",
+    "@storybook/addons": "7.5.3",
     "@storybook/react": "7.5.3",
     "@storybook/react-webpack5": "7.5.3",
     "@storybook/theming": "7.5.3",

packages/elements-core/package.json

@@ -79,8 +79,7 @@
     "nanoid": "^3.1.32",
     "prop-types": "^15.7.2",
     "react-query": "^3.34.19",
-    "react-router-dom": "^5.2.0",
-    "react-router-hash-link": "^2.1.0",
+    "react-router-dom": "^6.28.0",
     "tslib": "^2.1.0",
     "urijs": "^1.19.11",
     "util": "^0.12.4",

packages/elements-core/src/components/Docs/Article/Article.spec.tsx

@@ -29,10 +29,9 @@ describe('Article', () => {
   });
 
   it('given hash router, should have correct links', () => {
-    location.hash = '#/test';
     const { unmount } = render(<ArticleWithRouter router="hash" data="[abc](#abc)" />);
 
-    expect(screen.getByText(/abc/i)).toHaveAttribute('href', '#/test#abc');
+    expect(screen.getByText(/abc/i)).toHaveAttribute('href', '#abc');
 
     unmount();
   });

packages/elements-core/src/components/Layout/ResponsiveSidebarLayout.tsx

@@ -6,7 +6,7 @@ import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
 import { LogoProps } from '../../types';
 import { Logo } from '../Logo';
 import { PoweredByLink } from '../PoweredByLink';
-import type { TableOfContentsItem } from '../TableOfContents';
+import type { CustomLinkComponent, TableOfContentsItem } from '../TableOfContents';
 import { TableOfContents } from '../TableOfContents';
 import { MobileTopNav } from './MobileTopNav';
 
@@ -129,7 +129,7 @@ export const Sidebar = ({
         <TableOfContents
           tree={tree}
           activeId={pathname}
-          Link={Link}
+          Link={Link as CustomLinkComponent}
           onLinkClick={onTocClick}
           isInResponsiveMode={isInResponsiveMode}
         />

packages/elements-core/src/components/MarkdownViewer/CustomComponents/ReactRouterLink.tsx

@@ -1,6 +1,5 @@
 import type { LinkProps } from '@stoplight/mosaic';
 import React from 'react';
-import { HashLink } from 'react-router-hash-link';
 
 const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
 
@@ -21,8 +20,8 @@ export const ReactRouterMarkdownLink = ({
     );
   }
   return (
-    <HashLink to={href} title={title}>
+    <a href={href as string} title={title}>
       {children}
-    </HashLink>
+    </a>
   );
 };

packages/elements-core/src/components/MarkdownViewer/CustomComponents/ScrollToHashElement.tsx

@@ -0,0 +1,96 @@
+/*
+ * This is copied from https://github.com/ncoughlin/scroll-to-hash-element/blob/main/src/index.tsx
+ * Unfortunately this package does not contain typescript definitions, so we can not use it directly.
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+interface ScrollToHashElementProps {
+  /** On first run do we jump or scroll? */
+  initialBehavior?: ScrollBehavior;
+  behavior?: ScrollBehavior;
+  inline?: ScrollLogicalPosition;
+  block?: ScrollLogicalPosition;
+}
+
+export const ScrollToHashElement = ({
+  behavior = 'auto',
+  initialBehavior = 'auto',
+  inline = 'nearest',
+  block = 'start',
+}: ScrollToHashElementProps): null => {
+  const [hash, setHash] = useState(window.location.hash);
+  const [count, setCount] = useState(0);
+  const originalListeners = useRef<{ [key: string]: Function }>({});
+
+  // We need to know if this is the first run. If it is, we can do an instant jump, no scrolling.
+  const [firstRun, setFirstRun] = useState(true);
+  useEffect(() => setFirstRun(false), []);
+
+  useEffect(() => {
+    const handleLocationChange = () => {
+      setHash(window.location.hash);
+
+      // We increment count just so the layout effect will run if the hash is the same.
+      // Otherwise the user might click a hashlink a second time and it won't go anywhere.
+      setCount((count: number) => count + 1);
+    };
+
+    const onPopState = () => {
+      window.dispatchEvent(new Event('locationchange'));
+    };
+
+    const addWindowListeners = () => {
+      originalListeners.current.pushState = window.history.pushState;
+      originalListeners.current.replaceState = window.history.replaceState;
+
+      window.history.pushState = function (...args: any) {
+        const result = originalListeners.current.pushState.apply(this, args);
+        window.dispatchEvent(new Event('pushstate'));
+        window.dispatchEvent(new Event('locationchange'));
+        return result;
+      };
+
+      window.history.replaceState = function (...args: any) {
+        const result = originalListeners.current.replaceState.apply(this, args);
+        window.dispatchEvent(new Event('replacestate'));
+        window.dispatchEvent(new Event('locationchange'));
+        return result;
+      };
+
+      window.addEventListener('popstate', onPopState);
+      window.addEventListener('locationchange', handleLocationChange);
+    };
+
+    // Cleanup the event listeners on component unmount
+    const removeWindowListeners = () => {
+      window.history.pushState = originalListeners.current.pushState as typeof window.history.pushState;
+      window.history.replaceState = originalListeners.current.replaceState as typeof window.history.replaceState;
+      window.removeEventListener('popstate', onPopState);
+      window.removeEventListener('locationchange', handleLocationChange);
+    };
+
+    addWindowListeners();
+    return removeWindowListeners;
+  }, []);
+
+  useLayoutEffect(() => {
+    const removeHashCharacter = (str: string) => {
+      return str.slice(1);
+    };
+
+    if (hash) {
+      const element = document.getElementById(removeHashCharacter(hash));
+
+      if (element) {
+        element.scrollIntoView({
+          behavior: firstRun ? initialBehavior : behavior,
+          inline: inline,
+          block: block,
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hash, count, firstRun]);
+
+  return null;
+};