@stoplight/elements-core 7.7.11 → 7.7.13

package/components/Docs/HttpOperation/Body.d.ts

@@ -3,7 +3,7 @@ export interface BodyProps {
     body: IHttpOperationRequestBody;
     onChange: (requestBodyIndex: number) => void;
 }
-export declare const isBodyEmpty: (body?: IHttpOperationRequestBody<false> | undefined) => boolean;
+export declare const isBodyEmpty: (body?: BodyProps['body']) => boolean;
 export declare const Body: {
     ({ body, onChange }: BodyProps): JSX.Element | null;
     displayName: string;

package/components/Docs/story-helper.d.ts

@@ -9,5 +9,5 @@ interface HelperReturn<P extends Partial<DocsProps>> {
     createStory(name: string, input: Partial<P>): Story<P>;
     createHoistedStory(input: Partial<P>): Story<P>;
 }
-export declare const createStoriesForDocsComponent: <P extends Partial<DocsProps> = DocsProps>(Component: React.ComponentType<P>, title?: string | undefined) => HelperReturn<P>;
+export declare const createStoriesForDocsComponent: <P extends Partial<DocsProps> = DocsProps>(Component: React.ComponentType<P>, title?: string) => HelperReturn<P>;
 export {};

package/components/RequestSamples/convertRequestToSample.d.ts

@@ -1,2 +1,2 @@
 import { Request as HarFormatRequest } from 'har-format';
-export declare const convertRequestToSample: (language: string, library: string | undefined, request: HarFormatRequest) => string | null;
+export declare const convertRequestToSample: (language: string, library: string | undefined, request: HarFormatRequest) => Promise<string | null>;

package/components/TryIt/Body/request-body-utils.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 export declare type BodyParameterValues = Record<string, string | File>;
 export declare type ParameterOptional = Record<string, boolean>;
 export declare const isFormDataContent: (content: IMediaTypeContent) => boolean;
-export declare function createRequestBody(mediaTypeContent: IMediaTypeContent | undefined, bodyParameterValues: BodyParameterValues | undefined): Promise<string | Blob | ArrayBuffer | ArrayBufferView | FormData | ReadableStream<Uint8Array> | undefined>;
+export declare function createRequestBody(mediaTypeContent: IMediaTypeContent | undefined, bodyParameterValues: BodyParameterValues | undefined): Promise<string | Blob | ArrayBuffer | ReadableStream<any> | ArrayBufferView | FormData | undefined>;
 export declare const useBodyParameterState: (mediaTypeContent: IMediaTypeContent | undefined) => readonly [BodyParameterValues, React.Dispatch<React.SetStateAction<BodyParameterValues>>, ParameterOptional, React.Dispatch<React.SetStateAction<ParameterOptional>>, {
     readonly isFormDataBody: true;
     readonly bodySpecification: IMediaTypeContent<false>;

package/hooks/useRouter.d.ts

@@ -4,7 +4,7 @@ interface RouterProps {
     basename?: string;
     location?: string;
 }
-export declare const useRouter: (router: RouterType, basePath: string, staticRouterPath?: string | undefined) => {
+export declare const useRouter: (router: RouterType, basePath: string, staticRouterPath?: string) => {
     Router: React.ComponentType<{}>;
     routerProps: RouterProps;
 };

package/index.esm.js

@@ -1,4 +1,4 @@
-import { __rest, __awaiter } from 'tslib';
+import { __awaiter, __rest } from 'tslib';
 import * as React from 'react';
 import React__default, { useContext, useMemo } from 'react';
 import { convertToJsonSchema } from '@stoplight/http-spec/oas';
@@ -10,6 +10,7 @@ import { parse } from '@stoplight/yaml';
 import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useBreakpoints, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
+import { useLocation, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
@@ -17,7 +18,7 @@ import { atomWithStorage, useAtomValue } from 'jotai/utils';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
-import HTTPSnippet from 'httpsnippet';
+import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
 import flatten from 'lodash/flatten.js';
 import capitalize from 'lodash/capitalize.js';
 import filter from 'lodash/filter.js';
@@ -38,7 +39,6 @@ import uniqBy from 'lodash/uniqBy.js';
 import formatXml from 'xml-formatter';
 import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
-import { useLocation, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
 import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import sortBy from 'lodash/sortBy.js';
 import { HashLink } from 'react-router-hash-link';
@@ -85,7 +85,7 @@ const recursivelyCreateResolvedObject = (currentObject, rootCurrentObject, prope
                     resolvedValue = mergedOptions.resolver({ pointer: value.$ref, source: null }, newPropertyPath, rootCurrentObject);
                 }
                 catch (e) {
-                    resolvedValue = Object.assign(Object.assign({}, value), { $error: e.message });
+                    resolvedValue = Object.assign(Object.assign({}, value), { $error: e instanceof Error ? e.message : String(e) });
                 }
             }
             else {
@@ -246,14 +246,22 @@ function parseUnknown() {
     return undefined;
 }
 
+const RouterTypeContext = React.createContext(null);
+const useRouterType = () => {
+    return React.useContext(RouterTypeContext);
+};
+
 const MarkdownViewer = (props) => {
     return React.createElement(MarkdownViewer$1, Object.assign({}, props));
 };
 MarkdownViewer.displayName = 'MarkdownViewer';
 
 const ArticleComponent = React.memo(({ data }) => {
+    const { pathname } = useLocation();
+    const routerKind = React.useContext(RouterTypeContext);
+    const basePath = routerKind === 'hash' ? `#${pathname.split('#')[0]}` : '';
     return (React.createElement(Box, { className: "sl-elements-article" },
-        React.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true })));
+        React.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true, tocBasePath: basePath })));
 });
 const Article = withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
@@ -529,16 +537,22 @@ const persistAtom = (key, atomInstance) => {
     });
 };
 
-const convertRequestToSample = (language, library, request) => {
+const convertRequestToSample = (language, library, request) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!isValidTargetId(language))
+        return null;
     try {
         const snippet = new HTTPSnippet(request);
-        return snippet.convert(language, library) || null;
+        const converted = yield snippet.convert(language, library);
+        if (Array.isArray(converted)) {
+            return converted[0];
+        }
+        return converted || null;
     }
     catch (err) {
         console.error(err);
         return null;
     }
-};
+});
 
 const requestSampleConfigs = {
     Shell: {
@@ -564,7 +578,7 @@ const requestSampleConfigs = {
                 httpSnippetLibrary: 'fetch',
             },
             XMLHttpRequest: {
-                httpSnippetLibrary: 'xmlhttprequest',
+                httpSnippetLibrary: 'xhr',
             },
             jQuery: {
                 httpSnippetLibrary: 'jquery',
@@ -656,6 +670,11 @@ const requestSampleConfigs = {
     Http: {
         mosaicCodeViewerLanguage: 'http',
         httpSnippetLanguage: 'http',
+        libraries: {
+            'Http1.1': {
+                httpSnippetLibrary: 'http1.1',
+            },
+        },
     },
     Clojure: {
         mosaicCodeViewerLanguage: 'clojure',
@@ -716,7 +735,24 @@ const RequestSamples = React__default.memo(({ request, embeddedInMd = false }) =
     const [selectedLanguage, setSelectedLanguage] = useAtom(selectedLanguageAtom);
     const [selectedLibrary, setSelectedLibrary] = useAtom(selectedLibraryAtom);
     const { httpSnippetLanguage, httpSnippetLibrary, mosaicCodeViewerLanguage } = getConfigFor(selectedLanguage, selectedLibrary);
-    const requestSample = convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request);
+    const [requestSample, setRequestSample] = React__default.useState(null);
+    React__default.useEffect(() => {
+        let isStale = false;
+        convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request)
+            .then(example => {
+            if (!isStale) {
+                setRequestSample(example);
+            }
+        })
+            .catch(() => {
+            if (!isStale) {
+                setRequestSample(fallbackText);
+            }
+        });
+        return () => {
+            isStale = true;
+        };
+    }, [request, httpSnippetLanguage, httpSnippetLibrary]);
     const menuItems = useMemo(() => {
         const items = Object.entries(requestSampleConfigs).map(([language, config]) => {
             const hasLibraries = config.libraries && Object.keys(config.libraries).length > 0;
@@ -753,13 +789,12 @@ const RequestSamples = React__default.memo(({ request, embeddedInMd = false }) =
                         selectedLanguage,
                         " ",
                         selectedLibrary ? ` / ${selectedLibrary}` : '')) }))),
-        React__default.createElement(Panel.Content, { p: 0 },
-            React__default.createElement(CodeViewer, { "aria-label": requestSample !== null && requestSample !== void 0 ? requestSample : fallbackText, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample || fallbackText, style: embeddedInMd
-                    ? undefined
-                    :
-                        {
-                            '--fs-code': 12,
-                        } }))));
+        React__default.createElement(Panel.Content, { p: 0 }, requestSample !== null && (React__default.createElement(CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
+                ? undefined
+                :
+                    {
+                        '--fs-code': 12,
+                    } })))));
 });
 
 function getReadableSecurityName(securityScheme, includeKey = false) {
@@ -2122,11 +2157,6 @@ ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     return description;
 }
 
-const RouterTypeContext = React.createContext(null);
-const useRouterType = () => {
-    return React.useContext(RouterTypeContext);
-};
-
 const LinkHeading = React.memo(function LinkHeading(props) {
     const isUsingRouter = !!useRouterType();
     const Comp = isUsingRouter ? CustomLinkHeading : LinkHeading$1;

package/index.js

@@ -13,13 +13,14 @@ var yaml = require('@stoplight/yaml');
 var mosaic = require('@stoplight/mosaic');
 var isObject = require('lodash/isObject.js');
 var reactErrorBoundary = require('@stoplight/react-error-boundary');
+var reactRouterDom = require('react-router-dom');
 var markdownViewer = require('@stoplight/markdown-viewer');
 var cn = require('classnames');
 var utils = require('jotai/utils');
 var jotai = require('jotai');
 var URI = require('urijs');
 var mosaicCodeViewer = require('@stoplight/mosaic-code-viewer');
-var HTTPSnippet = require('httpsnippet');
+var httpsnippetLite = require('httpsnippet-lite');
 var flatten = require('lodash/flatten.js');
 var capitalize = require('lodash/capitalize.js');
 var filter = require('lodash/filter.js');
@@ -40,7 +41,6 @@ var uniqBy = require('lodash/uniqBy.js');
 var formatXml = require('xml-formatter');
 var entries = require('lodash/entries.js');
 var keys = require('lodash/keys.js');
-var reactRouterDom = require('react-router-dom');
 var jsonSchemaViewer = require('@stoplight/json-schema-viewer');
 var sortBy = require('lodash/sortBy.js');
 var reactRouterHashLink = require('react-router-hash-link');
@@ -77,7 +77,6 @@ var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var URI__default = /*#__PURE__*/_interopDefaultLegacy(URI);
-var HTTPSnippet__default = /*#__PURE__*/_interopDefaultLegacy(HTTPSnippet);
 var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
 var capitalize__default = /*#__PURE__*/_interopDefaultLegacy(capitalize);
 var filter__default = /*#__PURE__*/_interopDefaultLegacy(filter);
@@ -139,7 +138,7 @@ const recursivelyCreateResolvedObject = (currentObject, rootCurrentObject, prope
                     resolvedValue = mergedOptions.resolver({ pointer: value.$ref, source: null }, newPropertyPath, rootCurrentObject);
                 }
                 catch (e) {
-                    resolvedValue = Object.assign(Object.assign({}, value), { $error: e.message });
+                    resolvedValue = Object.assign(Object.assign({}, value), { $error: e instanceof Error ? e.message : String(e) });
                 }
             }
             else {
@@ -300,14 +299,22 @@ function parseUnknown() {
     return undefined;
 }
 
+const RouterTypeContext = React__namespace.createContext(null);
+const useRouterType = () => {
+    return React__namespace.useContext(RouterTypeContext);
+};
+
 const MarkdownViewer = (props) => {
     return React__namespace.createElement(markdownViewer.MarkdownViewer, Object.assign({}, props));
 };
 MarkdownViewer.displayName = 'MarkdownViewer';
 
 const ArticleComponent = React__namespace.memo(({ data }) => {
+    const { pathname } = reactRouterDom.useLocation();
+    const routerKind = React__namespace.useContext(RouterTypeContext);
+    const basePath = routerKind === 'hash' ? `#${pathname.split('#')[0]}` : '';
     return (React__namespace.createElement(mosaic.Box, { className: "sl-elements-article" },
-        React__namespace.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true })));
+        React__namespace.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true, tocBasePath: basePath })));
 });
 const Article = reactErrorBoundary.withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
@@ -583,16 +590,22 @@ const persistAtom = (key, atomInstance) => {
     });
 };
 
-const convertRequestToSample = (language, library, request) => {
+const convertRequestToSample = (language, library, request) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (!httpsnippetLite.isValidTargetId(language))
+        return null;
     try {
-        const snippet = new HTTPSnippet__default["default"](request);
-        return snippet.convert(language, library) || null;
+        const snippet = new httpsnippetLite.HTTPSnippet(request);
+        const converted = yield snippet.convert(language, library);
+        if (Array.isArray(converted)) {
+            return converted[0];
+        }
+        return converted || null;
     }
     catch (err) {
         console.error(err);
         return null;
     }
-};
+});
 
 const requestSampleConfigs = {
     Shell: {
@@ -618,7 +631,7 @@ const requestSampleConfigs = {
                 httpSnippetLibrary: 'fetch',
             },
             XMLHttpRequest: {
-                httpSnippetLibrary: 'xmlhttprequest',
+                httpSnippetLibrary: 'xhr',
             },
             jQuery: {
                 httpSnippetLibrary: 'jquery',
@@ -710,6 +723,11 @@ const requestSampleConfigs = {
     Http: {
         mosaicCodeViewerLanguage: 'http',
         httpSnippetLanguage: 'http',
+        libraries: {
+            'Http1.1': {
+                httpSnippetLibrary: 'http1.1',
+            },
+        },
     },
     Clojure: {
         mosaicCodeViewerLanguage: 'clojure',
@@ -770,7 +788,24 @@ const RequestSamples = React__default["default"].memo(({ request, embeddedInMd =
     const [selectedLanguage, setSelectedLanguage] = jotai.useAtom(selectedLanguageAtom);
     const [selectedLibrary, setSelectedLibrary] = jotai.useAtom(selectedLibraryAtom);
     const { httpSnippetLanguage, httpSnippetLibrary, mosaicCodeViewerLanguage } = getConfigFor(selectedLanguage, selectedLibrary);
-    const requestSample = convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request);
+    const [requestSample, setRequestSample] = React__default["default"].useState(null);
+    React__default["default"].useEffect(() => {
+        let isStale = false;
+        convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request)
+            .then(example => {
+            if (!isStale) {
+                setRequestSample(example);
+            }
+        })
+            .catch(() => {
+            if (!isStale) {
+                setRequestSample(fallbackText);
+            }
+        });
+        return () => {
+            isStale = true;
+        };
+    }, [request, httpSnippetLanguage, httpSnippetLibrary]);
     const menuItems = React.useMemo(() => {
         const items = Object.entries(requestSampleConfigs).map(([language, config]) => {
             const hasLibraries = config.libraries && Object.keys(config.libraries).length > 0;
@@ -807,13 +842,12 @@ const RequestSamples = React__default["default"].memo(({ request, embeddedInMd =
                         selectedLanguage,
                         " ",
                         selectedLibrary ? ` / ${selectedLibrary}` : '')) }))),
-        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 },
-            React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": requestSample !== null && requestSample !== void 0 ? requestSample : fallbackText, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample || fallbackText, style: embeddedInMd
-                    ? undefined
-                    :
-                        {
-                            '--fs-code': 12,
-                        } }))));
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, requestSample !== null && (React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
+                ? undefined
+                :
+                    {
+                        '--fs-code': 12,
+                    } })))));
 });
 
 function getReadableSecurityName(securityScheme, includeKey = false) {
@@ -2176,11 +2210,6 @@ ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     return description;
 }
 
-const RouterTypeContext = React__namespace.createContext(null);
-const useRouterType = () => {
-    return React__namespace.useContext(RouterTypeContext);
-};
-
 const LinkHeading = React__namespace.memo(function LinkHeading(props) {
     const isUsingRouter = !!useRouterType();
     const Comp = isUsingRouter ? CustomLinkHeading : mosaic.LinkHeading;

package/index.mjs

@@ -1,4 +1,4 @@
-import { __rest, __awaiter } from 'tslib';
+import { __awaiter, __rest } from 'tslib';
 import * as React from 'react';
 import React__default, { useContext, useMemo } from 'react';
 import { convertToJsonSchema } from '@stoplight/http-spec/oas';
@@ -10,6 +10,7 @@ import { parse } from '@stoplight/yaml';
 import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useBreakpoints, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
+import { useLocation, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
@@ -17,7 +18,7 @@ import { atomWithStorage, useAtomValue } from 'jotai/utils';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
-import HTTPSnippet from 'httpsnippet';
+import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
 import flatten from 'lodash/flatten.js';
 import capitalize from 'lodash/capitalize.js';
 import filter from 'lodash/filter.js';
@@ -38,7 +39,6 @@ import uniqBy from 'lodash/uniqBy.js';
 import formatXml from 'xml-formatter';
 import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
-import { useLocation, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
 import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import sortBy from 'lodash/sortBy.js';
 import { HashLink } from 'react-router-hash-link';
@@ -85,7 +85,7 @@ const recursivelyCreateResolvedObject = (currentObject, rootCurrentObject, prope
                     resolvedValue = mergedOptions.resolver({ pointer: value.$ref, source: null }, newPropertyPath, rootCurrentObject);
                 }
                 catch (e) {
-                    resolvedValue = Object.assign(Object.assign({}, value), { $error: e.message });
+                    resolvedValue = Object.assign(Object.assign({}, value), { $error: e instanceof Error ? e.message : String(e) });
                 }
             }
             else {
@@ -246,14 +246,22 @@ function parseUnknown() {
     return undefined;
 }
 
+const RouterTypeContext = React.createContext(null);
+const useRouterType = () => {
+    return React.useContext(RouterTypeContext);
+};
+
 const MarkdownViewer = (props) => {
     return React.createElement(MarkdownViewer$1, Object.assign({}, props));
 };
 MarkdownViewer.displayName = 'MarkdownViewer';
 
 const ArticleComponent = React.memo(({ data }) => {
+    const { pathname } = useLocation();
+    const routerKind = React.useContext(RouterTypeContext);
+    const basePath = routerKind === 'hash' ? `#${pathname.split('#')[0]}` : '';
     return (React.createElement(Box, { className: "sl-elements-article" },
-        React.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true })));
+        React.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true, tocBasePath: basePath })));
 });
 const Article = withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
@@ -529,16 +537,22 @@ const persistAtom = (key, atomInstance) => {
     });
 };
 
-const convertRequestToSample = (language, library, request) => {
+const convertRequestToSample = (language, library, request) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!isValidTargetId(language))
+        return null;
     try {
         const snippet = new HTTPSnippet(request);
-        return snippet.convert(language, library) || null;
+        const converted = yield snippet.convert(language, library);
+        if (Array.isArray(converted)) {
+            return converted[0];
+        }
+        return converted || null;
     }
     catch (err) {
         console.error(err);
         return null;
     }
-};
+});
 
 const requestSampleConfigs = {
     Shell: {
@@ -564,7 +578,7 @@ const requestSampleConfigs = {
                 httpSnippetLibrary: 'fetch',
             },
             XMLHttpRequest: {
-                httpSnippetLibrary: 'xmlhttprequest',
+                httpSnippetLibrary: 'xhr',
             },
             jQuery: {
                 httpSnippetLibrary: 'jquery',
@@ -656,6 +670,11 @@ const requestSampleConfigs = {
     Http: {
         mosaicCodeViewerLanguage: 'http',
         httpSnippetLanguage: 'http',
+        libraries: {
+            'Http1.1': {
+                httpSnippetLibrary: 'http1.1',
+            },
+        },
     },
     Clojure: {
         mosaicCodeViewerLanguage: 'clojure',
@@ -716,7 +735,24 @@ const RequestSamples = React__default.memo(({ request, embeddedInMd = false }) =
     const [selectedLanguage, setSelectedLanguage] = useAtom(selectedLanguageAtom);
     const [selectedLibrary, setSelectedLibrary] = useAtom(selectedLibraryAtom);
     const { httpSnippetLanguage, httpSnippetLibrary, mosaicCodeViewerLanguage } = getConfigFor(selectedLanguage, selectedLibrary);
-    const requestSample = convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request);
+    const [requestSample, setRequestSample] = React__default.useState(null);
+    React__default.useEffect(() => {
+        let isStale = false;
+        convertRequestToSample(httpSnippetLanguage, httpSnippetLibrary, request)
+            .then(example => {
+            if (!isStale) {
+                setRequestSample(example);
+            }
+        })
+            .catch(() => {
+            if (!isStale) {
+                setRequestSample(fallbackText);
+            }
+        });
+        return () => {
+            isStale = true;
+        };
+    }, [request, httpSnippetLanguage, httpSnippetLibrary]);
     const menuItems = useMemo(() => {
         const items = Object.entries(requestSampleConfigs).map(([language, config]) => {
             const hasLibraries = config.libraries && Object.keys(config.libraries).length > 0;
@@ -753,13 +789,12 @@ const RequestSamples = React__default.memo(({ request, embeddedInMd = false }) =
                         selectedLanguage,
                         " ",
                         selectedLibrary ? ` / ${selectedLibrary}` : '')) }))),
-        React__default.createElement(Panel.Content, { p: 0 },
-            React__default.createElement(CodeViewer, { "aria-label": requestSample !== null && requestSample !== void 0 ? requestSample : fallbackText, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample || fallbackText, style: embeddedInMd
-                    ? undefined
-                    :
-                        {
-                            '--fs-code': 12,
-                        } }))));
+        React__default.createElement(Panel.Content, { p: 0 }, requestSample !== null && (React__default.createElement(CodeViewer, { "aria-label": requestSample, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample, style: embeddedInMd
+                ? undefined
+                :
+                    {
+                        '--fs-code': 12,
+                    } })))));
 });
 
 function getReadableSecurityName(securityScheme, includeKey = false) {
@@ -2122,11 +2157,6 @@ ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     return description;
 }
 
-const RouterTypeContext = React.createContext(null);
-const useRouterType = () => {
-    return React.useContext(RouterTypeContext);
-};
-
 const LinkHeading = React.memo(function LinkHeading(props) {
     const isUsingRouter = !!useRouterType();
     const Comp = isUsingRouter ? CustomLinkHeading : LinkHeading$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.7.11",
+  "version": "7.7.13",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -29,7 +29,7 @@
     "@stoplight/json-schema-ref-parser": "^9.0.5",
     "@stoplight/json-schema-sampler": "0.2.3",
     "@stoplight/json-schema-viewer": "^4.9.0",
-    "@stoplight/markdown-viewer": "^5.5.0",
+    "@stoplight/markdown-viewer": "^5.6.0",
     "@stoplight/mosaic": "^1.33.0",
     "@stoplight/mosaic-code-editor": "^1.33.0",
     "@stoplight/mosaic-code-viewer": "^1.33.0",
@@ -38,7 +38,7 @@
     "@stoplight/types": "^13.7.0",
     "@stoplight/yaml": "^4.2.3",
     "classnames": "^2.2.6",
-    "httpsnippet": "^2.0.0",
+    "httpsnippet-lite": "^3.0.1",
     "jotai": "1.3.9",
     "json-schema": "^0.4.0",
     "lodash": "^4.17.19",

package/utils/exampleGeneration/exampleGeneration.d.ts

@@ -6,8 +6,8 @@ declare type Example = {
     data: string;
 };
 export declare type GenerateExampleFromMediaTypeContentOptions = Sampler.Options;
-export declare const useGenerateExampleFromMediaTypeContent: (mediaTypeContent: IMediaTypeContent | undefined, chosenExampleIndex?: number | undefined, { skipReadOnly, skipWriteOnly, skipNonRequired, ticks }?: GenerateExampleFromMediaTypeContentOptions) => string;
-export declare const generateExampleFromMediaTypeContent: (mediaTypeContent: IMediaTypeContent | undefined, document: any, chosenExampleIndex?: number, options?: Sampler.Options | undefined) => string;
+export declare const useGenerateExampleFromMediaTypeContent: (mediaTypeContent: IMediaTypeContent | undefined, chosenExampleIndex?: number, { skipReadOnly, skipWriteOnly, skipNonRequired, ticks }?: GenerateExampleFromMediaTypeContentOptions) => string;
+export declare const generateExampleFromMediaTypeContent: (mediaTypeContent: IMediaTypeContent | undefined, document: any, chosenExampleIndex?: number, options?: GenerateExampleFromMediaTypeContentOptions) => string;
 export declare const generateExamplesFromJsonSchema: (schema: JSONSchema7) => Example[];
 export declare const exceedsSize: (example: string, size?: number) => boolean;
 export {};

package/utils/http-spec/IServer.d.ts

@@ -1,3 +1,3 @@
 import type { IServer } from '@stoplight/types';
-export declare const getServersToDisplay: (originalServers: IServer[], mockUrl?: string | undefined) => IServer[];
+export declare const getServersToDisplay: (originalServers: IServer[], mockUrl?: string) => IServer[];
 export declare const getServerUrlWithDefaultValues: (server: IServer) => string | null;