feat(api): make API component resolve inline and remote refs

packages/elements/src/__stories__/components/Api.tsx

@@ -1,5 +1,4 @@
-import { text, withKnobs } from '@storybook/addon-knobs';
-import { boolean } from '@storybook/addon-knobs/react';
+import { boolean, text, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import cn from 'classnames';
 import * as React from 'react';

packages/elements/src/containers/API.tsx

@@ -5,19 +5,20 @@ import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 import useSwr from 'swr';
 
-import { Docs } from '../components/Docs';
-import { DocsSkeleton } from '../components/Docs/Skeleton';
+import { Docs, DocsSkeleton } from '../components/Docs';
 import { Row } from '../components/TableOfContents/Row';
 import { TryIt } from '../components/TryIt';
 import { TryItHeader } from '../components/TryIt/header';
 import { withRouter } from '../hoc/withRouter';
+import { useBundledData } from '../hooks/useBundledData';
 import { useParsedValue } from '../hooks/useParsedValue';
 import { useTocContents } from '../hooks/useTocContents';
 import { withStyles } from '../styled';
 import { IAPI } from '../types';
 import { computeTocTree, isOas2, isOas3, isOperation, IUriMap, MODEL_REGEXP, OPERATION_REGEXP } from '../utils/oas';
 import { computeOas2UriMap } from '../utils/oas/oas2';
 import { computeOas3UriMap } from '../utils/oas/oas3';
+import { InlineRefResolverProvider } from './Provider';
 
 const fetcher = (url: string) => axios.get(url).then(res => res.data);
 
@@ -62,6 +63,7 @@ const APIImpl = withRouter<IAPI>(({ apiDescriptionUrl, linkComponent: LinkCompon
     ? NodeType.HttpOperation
     : NodeType.HttpService;
   const nodeData = uriMap[pathname] || uriMap['/'];
+  const bundledNodeData = useBundledData(nodeType, nodeData, { baseUrl: apiDescriptionUrl });
 
   if (error) {
     return (
@@ -88,15 +90,17 @@ const APIImpl = withRouter<IAPI>(({ apiDescriptionUrl, linkComponent: LinkCompon
       />
       <div className="flex-grow p-5">
         <div className="flex">
-          <Docs className="px-10" nodeData={nodeData} nodeType={nodeType} />
-          {showTryIt && (
-            <div className="w-2/5 border-l relative">
-              <div className="absolute inset-0 overflow-auto px-10">
-                <TryItHeader />
-                <TryIt nodeType={nodeType} nodeData={nodeData} />
+          <InlineRefResolverProvider document={document}>
+            <Docs className="px-10" nodeData={bundledNodeData} nodeType={nodeType} />
+            {showTryIt && (
+              <div className="w-2/5 border-l relative">
+                <div className="absolute inset-0 overflow-auto px-10">
+                  <TryItHeader />
+                  <TryIt nodeType={nodeType} nodeData={bundledNodeData} />
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </InlineRefResolverProvider>
         </div>
       </div>
     </div>

packages/elements/src/containers/Docs.tsx

@@ -1,15 +1,12 @@
-import { pointerToPath } from '@stoplight/json';
-import { SchemaTreeRefDereferenceFn } from '@stoplight/json-schema-viewer';
 import { NodeType } from '@stoplight/types';
 import { FAIcon, NonIdealState } from '@stoplight/ui-kit';
-import { get, isObject } from 'lodash';
 import * as React from 'react';
 import { useQuery } from 'urql';
 
 import { DocsSkeleton, ParsedDocs } from '../components/Docs';
 import { bundledBranchNode } from '../graphql/BranchNodeBySlug';
 import { useParsedData } from '../hooks/useParsedData';
-import { ActiveInfoContext, InlineRefResolverContext, IProvider, Provider } from './Provider';
+import { ActiveInfoContext, InlineRefResolverProvider, IProvider, Provider } from './Provider';
 
 export interface IDocsProps {
   className?: string;
@@ -23,15 +20,10 @@ interface IDocsProvider extends IProvider {
 const DocsPopup = React.memo<{ nodeType: NodeType; nodeData: unknown; className?: string }>(
   ({ nodeType, nodeData, className }) => {
     const document = useParsedData(nodeType, nodeData);
-    const inlineRefResolver = React.useCallback<SchemaTreeRefDereferenceFn>(
-      ({ pointer }, _, schema) =>
-        pointer === null ? null : get(isObject(document) ? document : schema, pointerToPath(pointer)),
-      [document],
-    );
     return (
-      <InlineRefResolverContext.Provider value={inlineRefResolver}>
+      <InlineRefResolverProvider document={document}>
         <ParsedDocs className={className} nodeType={nodeType} nodeData={document} />
-      </InlineRefResolverContext.Provider>
+      </InlineRefResolverProvider>
     );
   },
 );

packages/elements/src/containers/Provider.tsx

@@ -1,5 +1,7 @@
+import { pointerToPath } from '@stoplight/json';
 import { SchemaTreeRefDereferenceFn } from '@stoplight/json-schema-viewer';
 import { IComponentMapping } from '@stoplight/markdown-viewer';
+import { get, isObject } from 'lodash';
 import * as React from 'react';
 import { Client, Provider as UrqlProvider } from 'urql';
 
@@ -27,6 +29,22 @@ export const ComponentsContext = createNamedContext<IComponentMapping | undefine
 
 export const InlineRefResolverContext = React.createContext<SchemaTreeRefDereferenceFn | undefined>(void 0);
 
+interface InlineRefResolverProviderTypes {
+  document: unknown;
+}
+
+/**
+ * Populates `InlineRefResolverContext` with a standard inline ref resolver based on `document`.
+ */
+export const InlineRefResolverProvider: React.FC<InlineRefResolverProviderTypes> = ({ document, children }) => {
+  const inlineRefResolver = React.useCallback<SchemaTreeRefDereferenceFn>(
+    ({ pointer }, _, schema) =>
+      pointer === null ? null : get(isObject(document) ? document : schema, pointerToPath(pointer)),
+    [document],
+  );
+  return <InlineRefResolverContext.Provider value={inlineRefResolver}>{children}</InlineRefResolverContext.Provider>;
+};
+
 const defaultIcons: NodeIconMapping = {};
 export const IconsContext = createNamedContext<NodeIconMapping>('IconsContext', defaultIcons);
 

packages/elements/src/hooks/useBundledData.ts

@@ -0,0 +1,47 @@
+import $RefParser from '@stoplight/json-schema-ref-parser';
+import { NodeType } from '@stoplight/types';
+import { isObject } from 'lodash';
+import * as React from 'react';
+
+import { useParsedData } from './useParsedData';
+
+/**
+ * @param type branch node snapshot type
+ * @param data branch node snapshot data
+ */
+
+interface Options {
+  baseUrl?: string;
+}
+
+export function useBundledData(type: NodeType, data: unknown, options?: Options) {
+  const parsedData = useParsedData(type, data);
+
+  const [bundledData, setBundledData] = React.useState(parsedData);
+
+  React.useEffect(() => {
+    if (!isObject(parsedData) || type !== NodeType.HttpOperation) {
+      setBundledData(parsedData);
+      return;
+    }
+
+    doBundle(parsedData, options?.baseUrl)
+      .then(res => setBundledData(res))
+      .catch(reason => {
+        console.error(`Could not bundle: ${reason.message}`);
+        console.error(reason);
+        setBundledData(parsedData);
+      });
+  }, [parsedData, type, options?.baseUrl]);
+
+  return bundledData;
+}
+
+const commonBundleOptions = { continueOnError: true };
+const doBundle = (data: object, baseUrl?: string) => {
+  if (!baseUrl) {
+    return $RefParser.bundle(data, commonBundleOptions);
+  } else {
+    return $RefParser.bundle(baseUrl, data, commonBundleOptions);
+  }
+};