chore: fix rendering elements in context of external router (PROVCON-…

…3003)
stoplightio · Dec 18, 2024 · 02020c4 · 02020c4
1 parent e225ab8
commit 02020c4
Show file tree

Hide file tree

Showing 16 changed files with 204 additions and 116 deletions.
diff --git a/examples/angular/package.json b/examples/angular/package.json
@@ -10,9 +10,9 @@
     "url": "git+https://github.com/stoplightio/elements-starter-angular.git"
   },
   "scripts": {
-    "start": "ng serve --port 4200",
-    "build": "ng build --configuration production",
-    "serve": "angular-http-server --path ./dist/angular -p 4200"
+    "start": "NODE_OPTIONS=--openssl-legacy-provider ng serve --port 4200",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider ng build --configuration production",
+    "serve": "NODE_OPTIONS=--openssl-legacy-provider angular-http-server --path ./dist/angular -p 4200"
   },
   "bugs": {
     "url": "https://github.com/stoplightio/elements-starter-angular/issues"

diff --git a/examples/react-cra/package.json b/examples/react-cra/package.json
@@ -5,15 +5,15 @@
   "author": "Stoplight <support@stoplight.io>",
   "license": "Unlicense",
   "scripts": {
-    "start": "PORT=4200 react-scripts start",
-    "build": "react-scripts build",
-    "serve": "serve -s -l 4200 build"
+    "start": "NODE_OPTIONS=--openssl-legacy-provider PORT=4200 react-scripts start",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
+    "serve": "NODE_OPTIONS=--openssl-legacy-provider serve -s -l 4200 build"
   },
   "dependencies": {
     "@stoplight/elements": "^7.0.0",
     "@stoplight/elements-dev-portal": "^1.0.0",
     "react": "^17.0.2",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@types/node": "^17.0.11",

diff --git a/examples/react-cra/src/App.tsx b/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>

diff --git a/examples/react-cra/src/components/API.tsx b/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"
     />

diff --git a/examples/react-cra/src/components/StoplightProject.tsx b/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"
+    />
+  );
 };
diff --git a/...ages/elements-core/src/components/MarkdownViewer/CustomComponents/ScrollToHashElement.tsx b/...ages/elements-core/src/components/MarkdownViewer/CustomComponents/ScrollToHashElement.tsx
@@ -82,7 +82,6 @@ export const ScrollToHashElement = ({
       const element = document.getElementById(removeHashCharacter(hash));
 
       if (element) {
-        // console.log(`scrollIntoView ${hash} behavior: ${behavior}, inline: ${inline}, block: ${block}`);
         element.scrollIntoView({
           behavior: firstRun ? initialBehavior : behavior,
           inline: inline,

diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx
@@ -3,6 +3,7 @@ import { HttpMethod, NodeType } from '@stoplight/types';
 import * as React from 'react';
 
 import { useFirstRender } from '../../hooks/useFirstRender';
+import { resolveRelativeLink } from '../../utils/string';
 import { VersionBadge } from '../Docs/HttpOperation/Badges';
 import {
   NODE_GROUP_ICON,
@@ -372,7 +373,7 @@ const Node = React.memo<{
   return (
     <Box
       as={LinkComponent}
-      to={!item.slug.startsWith('/') ? `/${item.slug}` : item.slug}
+      to={resolveRelativeLink(item.slug)}
       display="block"
       textDecoration="no-underline"
       className="ElementsTableOfContentsItem"

diff --git a/packages/elements-core/src/hoc/withRouter.tsx b/packages/elements-core/src/hoc/withRouter.tsx
@@ -1,6 +1,6 @@
 import { DefaultComponentMapping } from '@stoplight/markdown-viewer';
 import * as React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useInRouterContext } from 'react-router-dom';
 
 import { LinkHeading } from '../components/LinkHeading';
 import { MarkdownComponentsProvider } from '../components/MarkdownViewer/CustomComponents/Provider';
@@ -18,28 +18,47 @@ const components: Partial<DefaultComponentMapping> = {
   h4: ({ color, ...props }) => <LinkHeading size={4} {...props} />,
 };
 
+const InternalRoutes = ({ children }: { children: React.ReactNode }): JSX.Element => {
+  return (
+    <Routes>
+      <Route
+        path="/*"
+        element={
+          <MarkdownComponentsProvider value={components}>
+            <ScrollToHashElement />
+            {children}
+          </MarkdownComponentsProvider>
+        }
+      />
+    </Routes>
+  );
+};
+
 export function withRouter<P extends RoutingProps>(WrappedComponent: React.ComponentType<P>): React.FC<P> {
   const WithRouter = (props: P) => {
+    const outerRouter = useInRouterContext();
     const basePath = props.basePath ?? '/';
     const staticRouterPath = props.staticRouterPath ?? '';
     const routerType = props.router ?? 'history';
     const { Router, routerProps } = useRouter(routerType, basePath, staticRouterPath);
 
+    if (!outerRouter) {
+      return (
+        <RouterTypeContext.Provider value={routerType}>
+          <Router {...routerProps} key={basePath}>
+            <InternalRoutes>
+              <WrappedComponent {...props} />
+            </InternalRoutes>
+          </Router>
+        </RouterTypeContext.Provider>
+      );
+    }
+
     return (
       <RouterTypeContext.Provider value={routerType}>
-        <Router {...routerProps} key={basePath}>
-          <Routes>
-            <Route
-              path="/*"
-              element={
-                <MarkdownComponentsProvider value={components}>
-                  <ScrollToHashElement />
-                  <WrappedComponent {...props} />
-                </MarkdownComponentsProvider>
-              }
-            />
-          </Routes>
-        </Router>
+        <InternalRoutes>
+          <WrappedComponent {...props} />
+        </InternalRoutes>
       </RouterTypeContext.Provider>
     );
   };

diff --git a/packages/elements-core/src/index.ts b/packages/elements-core/src/index.ts
@@ -43,5 +43,6 @@ export { Divider, Group, ITableOfContentsTree, Item, ParsedNode, RoutingProps, T
 export { isHttpOperation, isHttpService, isHttpWebhookOperation } from './utils/guards';
 export { ReferenceResolver } from './utils/ref-resolving/ReferenceResolver';
 export { createResolvedObject } from './utils/ref-resolving/resolvedObject';
-export { slugify } from './utils/string';
+export { slugify, resolveRelativeLink } from './utils/string';
 export { createElementClass } from './web-components/createElementClass';
+export { resolveUrl } from './utils/http-spec/IServer';
diff --git a/packages/elements-core/src/utils/string.ts b/packages/elements-core/src/utils/string.ts
@@ -9,3 +9,7 @@ export function slugify(name: string) {
     .replace(/^-/, '')
     .replace(/-$/, '');
 }
+
+export const resolveRelativeLink = (slug?: string) => {
+  return slug ? slug.replace(/^\//, '') : '.';
+};
diff --git a/packages/elements-dev-portal/src/components/NodeContent/NodeContent.tsx b/packages/elements-dev-portal/src/components/NodeContent/NodeContent.tsx
@@ -188,12 +188,13 @@ const LinkComponent: CustomComponentMapping['a'] = ({ children, href, title }) =
     }
 
     if (edge) {
-      const slug = routerKind === 'hash' ? `#/${edge.slug}` : edge.slug;
+      const slug = routerKind === 'hash' ? `#${route.replace(node.slug, edge.slug)}` : edge.slug;
       return <Link to={`${slug}${hash ? `#${hash}` : ''}`}>{children}</Link>;
     }
   }
 
-  return <a href={routerKind === 'hash' ? `#${route}${href}` : href}>{children}</a>;
+  const fullHref = routerKind === 'hash' ? `#${route}${href}` : href;
+  return <a href={fullHref}>{children}</a>;
 };
 
 function getBundledUrl(url: string | undefined) {