openapi-explorer 2.2.678 → 2.2.681

package/dist/es/components/api-request.js

@@ -150,7 +150,11 @@ export default class ApiRequest extends LitElement {
       selectedRequestBodyExample: {
         type: String,
         attribute: 'selected-request-body-example'
-      } // internal tracking of selected request-body example
+      },
+      // internal tracking of selected request-body example
+      curlSyntax: {
+        type: String
+      }
     };
   }
   render() {
@@ -314,6 +318,7 @@ export default class ApiRequest extends LitElement {
     }, 0, mimeDropdownEl);
   }
   requestBodyTemplate() {
+    var _this$cachedBodyData;
     if (!this.request_body) {
       return '';
     }
@@ -381,6 +386,18 @@ export default class ApiRequest extends LitElement {
         reqBodySchemaHtml = html` ${reqBodySchemaHtml} <schema-tree class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false" exportparts="schema-key, schema-type, schema-description"> </schema-tree> `;
       }
     }
+
+    // When the content type and the element stay the same, then don't change the updated body.
+    if (((_this$cachedBodyData = this.cachedBodyData) === null || _this$cachedBodyData === void 0 ? void 0 : _this$cachedBodyData.contentType) === this.selectedRequestBodyType && this.elementId === this.cachedBodyData.elementId) {
+      reqBodyDefaultHtml = this.cachedBodyData.body;
+    } else {
+      // Otherwise use the recalculated body and cache that
+      this.cachedBodyData = {
+        body: reqBodyDefaultHtml,
+        contentType: this.selectedRequestBodyType,
+        elementId: this.elementId
+      };
+    }
     return html` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${getI18nText('operations.request-body')} ${this.request_body.required ? html`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? html`<div class="m-markdown" style="margin-bottom:12px">${unsafeHTML(marked(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? html` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
       if (e.target.tagName.toLowerCase() === 'button') {
         this.activeSchemaTab = e.target.dataset.tab;
@@ -410,7 +427,7 @@ export default class ApiRequest extends LitElement {
         return;
       }
       this.activeResponseTab = e.target.dataset.tab;
-    }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : html` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${getI18nText('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${getI18nText('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? html` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? html`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? html`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : html` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> <syntax-highlighter style="min-height:60px" mime-type="${this.responseContentType}" .content="${this.responseText}"> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <syntax-highlighter language="http" .content="${this.responseHeaders}"> </div> <div class="tab-content m-markdown col" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <syntax-highlighter class="fs-exclude" data-hj-suppress data-sl="mask" language="shell" .content="${curlSyntax.trim()}"> </div> </div>`;
+    }}"> <br> <div style="width:100%"> <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> ${!hasResponse ? '' : html` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${getI18nText('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${getI18nText('operations.response-headers')}</button>`} </div> </div> ${this.responseIsBlob ? html` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? html`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? html`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : html` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> <syntax-highlighter style="min-height:60px" mime-type="${this.responseContentType}" .content="${this.responseText}"> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <syntax-highlighter language="http" .content="${this.responseHeaders}"> </div> <div class="tab-content m-markdown col" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <syntax-highlighter class="fs-exclude" data-hj-suppress data-sl="mask" language="shell" .content="${curlSyntax.trim()}"> </div> </div>`;
   }
   apiCallTemplate() {
     return html` <div style="display:flex;align-items:flex-end;margin:16px 0;font-size:var(--font-size-small)"> ${this.parameters.length > 0 || this.request_body ? html` <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px" @click="${this.onClearRequestData}"> ${getI18nText('operations.clear')} </button>` : ''} <button class="m-btn primary btn-execute thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">${getI18nText('operations.execute')}</button> </div> ${this.apiResponseTabTemplate()} `;
@@ -637,10 +654,12 @@ export default class ApiRequest extends LitElement {
         if (exampleTextAreaEl && exampleTextAreaEl.value) {
           fetchOptions.body = exampleTextAreaEl.value;
           if (requestBodyType.includes('json')) {
-            fetchOptions.body = JSON.stringify(json5.parse(exampleTextAreaEl.value));
             try {
+              fetchOptions.body = JSON.stringify(json5.parse(exampleTextAreaEl.value), null, 4);
               curlData = ` \\\n  -d '${fetchOptions.body}'`;
-            } catch (err) {/* Ignore unparseable JSON */}
+            } catch (err) {
+              /* Ignore unparseable JSON, falls back automatically to the original value, which is better than nothing */
+            }
           }
           if (!curlData) {
             // Save single quotes wrapped => 'text' => `"'"text"'"`
@@ -678,7 +697,8 @@ export default class ApiRequest extends LitElement {
     const headers = headerOverride !== null && headerOverride !== void 0 ? headerOverride : fetchOptions.headers;
     const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value}"`, '');
     this.curlSyntax = `${curl}${curlHeaders}${curlParts.data}${curlParts.form}`;
-    this.requestUpdate();
+    // We don't need to request and update because we are watch the curlSyntax property in this lit element
+    // this.requestUpdate();
   }
 
   // onExecuteButtonClicked

package/dist/lib/components/api-request.js

@@ -155,7 +155,11 @@ class ApiRequest extends _lit.LitElement {
       selectedRequestBodyExample: {
         type: String,
         attribute: 'selected-request-body-example'
-      } // internal tracking of selected request-body example
+      },
+      // internal tracking of selected request-body example
+      curlSyntax: {
+        type: String
+      }
     };
   }
   render() {
@@ -319,6 +323,7 @@ class ApiRequest extends _lit.LitElement {
     }, 0, mimeDropdownEl);
   }
   requestBodyTemplate() {
+    var _this$cachedBodyData;
     if (!this.request_body) {
       return '';
     }
@@ -386,6 +391,18 @@ class ApiRequest extends _lit.LitElement {
         reqBodySchemaHtml = (0, _lit.html)` ${reqBodySchemaHtml} <schema-tree class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false" exportparts="schema-key, schema-type, schema-description"> </schema-tree> `;
       }
     }
+
+    // When the content type and the element stay the same, then don't change the updated body.
+    if (((_this$cachedBodyData = this.cachedBodyData) === null || _this$cachedBodyData === void 0 ? void 0 : _this$cachedBodyData.contentType) === this.selectedRequestBodyType && this.elementId === this.cachedBodyData.elementId) {
+      reqBodyDefaultHtml = this.cachedBodyData.body;
+    } else {
+      // Otherwise use the recalculated body and cache that
+      this.cachedBodyData = {
+        body: reqBodyDefaultHtml,
+        contentType: this.selectedRequestBodyType,
+        elementId: this.elementId
+      };
+    }
     return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${(0, _index.getI18nText)('operations.request-body')} ${this.request_body.required ? (0, _lit.html)`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? (0, _lit.html)`<div class="m-markdown" style="margin-bottom:12px">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? (0, _lit.html)` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
       if (e.target.tagName.toLowerCase() === 'button') {
         this.activeSchemaTab = e.target.dataset.tab;
@@ -415,7 +432,7 @@ class ApiRequest extends _lit.LitElement {
         return;
       }
       this.activeResponseTab = e.target.dataset.tab;
-    }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _index.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _index.getI18nText)('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? (0, _lit.html)` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? (0, _lit.html)`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? (0, _lit.html)`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : (0, _lit.html)` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> <syntax-highlighter style="min-height:60px" mime-type="${this.responseContentType}" .content="${this.responseText}"> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <syntax-highlighter language="http" .content="${this.responseHeaders}"> </div> <div class="tab-content m-markdown col" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <syntax-highlighter class="fs-exclude" data-hj-suppress data-sl="mask" language="shell" .content="${curlSyntax.trim()}"> </div> </div>`;
+    }}"> <br> <div style="width:100%"> <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _index.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _index.getI18nText)('operations.response-headers')}</button>`} </div> </div> ${this.responseIsBlob ? (0, _lit.html)` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? (0, _lit.html)`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? (0, _lit.html)`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : (0, _lit.html)` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> <syntax-highlighter style="min-height:60px" mime-type="${this.responseContentType}" .content="${this.responseText}"> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <syntax-highlighter language="http" .content="${this.responseHeaders}"> </div> <div class="tab-content m-markdown col" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <syntax-highlighter class="fs-exclude" data-hj-suppress data-sl="mask" language="shell" .content="${curlSyntax.trim()}"> </div> </div>`;
   }
   apiCallTemplate() {
     return (0, _lit.html)` <div style="display:flex;align-items:flex-end;margin:16px 0;font-size:var(--font-size-small)"> ${this.parameters.length > 0 || this.request_body ? (0, _lit.html)` <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px" @click="${this.onClearRequestData}"> ${(0, _index.getI18nText)('operations.clear')} </button>` : ''} <button class="m-btn primary btn-execute thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">${(0, _index.getI18nText)('operations.execute')}</button> </div> ${this.apiResponseTabTemplate()} `;
@@ -642,10 +659,12 @@ class ApiRequest extends _lit.LitElement {
         if (exampleTextAreaEl && exampleTextAreaEl.value) {
           fetchOptions.body = exampleTextAreaEl.value;
           if (requestBodyType.includes('json')) {
-            fetchOptions.body = JSON.stringify(_json.default.parse(exampleTextAreaEl.value));
             try {
+              fetchOptions.body = JSON.stringify(_json.default.parse(exampleTextAreaEl.value), null, 4);
               curlData = ` \\\n  -d '${fetchOptions.body}'`;
-            } catch (err) {/* Ignore unparseable JSON */}
+            } catch (err) {
+              /* Ignore unparseable JSON, falls back automatically to the original value, which is better than nothing */
+            }
           }
           if (!curlData) {
             // Save single quotes wrapped => 'text' => `"'"text"'"`
@@ -683,7 +702,8 @@ class ApiRequest extends _lit.LitElement {
     const headers = headerOverride !== null && headerOverride !== void 0 ? headerOverride : fetchOptions.headers;
     const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value}"`, '');
     this.curlSyntax = `${curl}${curlHeaders}${curlParts.data}${curlParts.form}`;
-    this.requestUpdate();
+    // We don't need to request and update because we are watch the curlSyntax property in this lit element
+    // this.requestUpdate();
   }
 
   // onExecuteButtonClicked

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "2.2.678",
+  "version": "2.2.681",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Authress Developers <developers@authress.io>",
   "type": "module",