@stoplight/elements-core 7.7.12 → 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';
@@ -18,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';
@@ -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 {
@@ -537,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: {
@@ -572,7 +578,7 @@ const requestSampleConfigs = {
                 httpSnippetLibrary: 'fetch',
             },
             XMLHttpRequest: {
-                httpSnippetLibrary: 'xmlhttprequest',
+                httpSnippetLibrary: 'xhr',
             },
             jQuery: {
                 httpSnippetLibrary: 'jquery',
@@ -664,6 +670,11 @@ const requestSampleConfigs = {
     Http: {
         mosaicCodeViewerLanguage: 'http',
         httpSnippetLanguage: 'http',
+        libraries: {
+            'Http1.1': {
+                httpSnippetLibrary: 'http1.1',
+            },
+        },
     },
     Clojure: {
         mosaicCodeViewerLanguage: 'clojure',
@@ -724,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;
@@ -761,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) {

package/index.js

@@ -20,7 +20,7 @@ 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');
@@ -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 {
@@ -591,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: {
@@ -626,7 +631,7 @@ const requestSampleConfigs = {
                 httpSnippetLibrary: 'fetch',
             },
             XMLHttpRequest: {
-                httpSnippetLibrary: 'xmlhttprequest',
+                httpSnippetLibrary: 'xhr',
             },
             jQuery: {
                 httpSnippetLibrary: 'jquery',
@@ -718,6 +723,11 @@ const requestSampleConfigs = {
     Http: {
         mosaicCodeViewerLanguage: 'http',
         httpSnippetLanguage: 'http',
+        libraries: {
+            'Http1.1': {
+                httpSnippetLibrary: 'http1.1',
+            },
+        },
     },
     Clojure: {
         mosaicCodeViewerLanguage: 'clojure',
@@ -778,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;
@@ -815,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) {

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';
@@ -18,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';
@@ -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 {
@@ -537,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: {
@@ -572,7 +578,7 @@ const requestSampleConfigs = {
                 httpSnippetLibrary: 'fetch',
             },
             XMLHttpRequest: {
-                httpSnippetLibrary: 'xmlhttprequest',
+                httpSnippetLibrary: 'xhr',
             },
             jQuery: {
                 httpSnippetLibrary: 'jquery',
@@ -664,6 +670,11 @@ const requestSampleConfigs = {
     Http: {
         mosaicCodeViewerLanguage: 'http',
         httpSnippetLanguage: 'http',
+        libraries: {
+            'Http1.1': {
+                httpSnippetLibrary: 'http1.1',
+            },
+        },
     },
     Clojure: {
         mosaicCodeViewerLanguage: 'clojure',
@@ -724,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;
@@ -761,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.7.12",
+  "version": "7.7.13",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -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;