fix(elements-core): article component should not require Router (stop…

…lightio#2350)
porotkin · Apr 3, 2023 · c254cc8 · c254cc8
1 parent e92ec42
commit c254cc8
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 9 deletions.
diff --git a/packages/elements-core/package.json b/packages/elements-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.7.14",
+  "version": "7.7.15",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

diff --git a/packages/elements-core/src/components/Docs/Article/Article.spec.tsx b/packages/elements-core/src/components/Docs/Article/Article.spec.tsx
@@ -0,0 +1,39 @@
+import { screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import { flow } from 'lodash';
+import * as React from 'react';
+
+import { withPersistenceBoundary } from '../../../context/Persistence';
+import { withMosaicProvider } from '../../../hoc/withMosaicProvider';
+import { withRouter } from '../../../hoc/withRouter';
+import type { RoutingProps } from '../../../types';
+import { Article as _Article } from './index';
+
+const Article = withMosaicProvider(withPersistenceBoundary(_Article));
+
+const ArticleWithRouter = flow(
+  withRouter,
+  withPersistenceBoundary,
+  withMosaicProvider,
+)((props: RoutingProps & { data: string }) => {
+  return <_Article data={props.data} />;
+});
+
+describe('Article', () => {
+  it('should not require any router', () => {
+    const { unmount } = render(<Article data="## Hey there" />);
+
+    expect(screen.getByText(/Hey there/i)).toBeInTheDocument();
+
+    unmount();
+  });
+
+  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');
+
+    unmount();
+  });
+});
diff --git a/packages/elements-core/src/components/Docs/Article/index.tsx b/packages/elements-core/src/components/Docs/Article/index.tsx
@@ -4,22 +4,35 @@ import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { RouterTypeContext } from '../../../context/RouterType';
+import { useRouterType } from '../../../context/RouterType';
 import { MarkdownViewer } from '../../MarkdownViewer';
 import { DocsComponentProps } from '..';
 
 type ArticleProps = DocsComponentProps<IMarkdownViewerProps['markdown']>;
 
-const ArticleComponent = React.memo<ArticleProps>(({ data }) => {
+const ArticleComponentForHashRouter = React.memo<ArticleProps>(({ data }) => {
   const { pathname } = useLocation();
-  const routerKind = React.useContext(RouterTypeContext);
-  const basePath = routerKind === 'hash' ? `#${pathname.split('#')[0]}` : '';
+  const basePath = `#${pathname.split('#')[0]}`;
+
+  return <BaseArticleComponent data={data} tocBasePath={basePath} />;
+});
 
+const BaseArticleComponent = React.memo<ArticleProps & { tocBasePath?: string }>(({ data, ...props }) => {
   return (
     <Box className="sl-elements-article">
-      <MarkdownViewer className="sl-elements-article-content" markdown={data} includeToc tocBasePath={basePath} />
+      <MarkdownViewer className="sl-elements-article-content" markdown={data} includeToc {...props} />
     </Box>
   );
 });
 
+const ArticleComponent = React.memo<ArticleProps>(({ data }) => {
+  const routerKind = useRouterType();
+
+  if (routerKind === 'hash') {
+    return <ArticleComponentForHashRouter data={data} />;
+  }
+
+  return <BaseArticleComponent data={data} />;
+});
+
 export const Article = withErrorBoundary<ArticleProps>(ArticleComponent, { recoverableProps: ['data'] });
diff --git a/packages/elements-dev-portal/package.json b/packages/elements-dev-portal/package.json
@@ -64,7 +64,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~7.7.14",
+    "@stoplight/elements-core": "~7.7.15",
     "@stoplight/markdown-viewer": "^5.5.0",
     "@stoplight/mosaic": "^1.33.0",
     "@stoplight/path": "^1.3.2",

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "7.7.14",
+  "version": "7.7.15",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -62,7 +62,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~7.7.14",
+    "@stoplight/elements-core": "~7.7.15",
     "@stoplight/http-spec": "^5.1.4",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.33.0",