openapi-explorer 0.11.464 → 0.11.467

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

@@ -465,8 +465,8 @@ class ApiRequest extends _lit.LitElement {
               </pre> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
       (0, _commonUtils.copyToClipboard)(this.responseHeaders, e);
     }}" part="btn btn-fill">${(0, _languages.getI18nText)('operations.copy')}</button> <pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(this.responseHeaders, _prismjs.default.languages.css, 'css'))}</code></pre> </div> <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
-      (0, _commonUtils.copyToClipboard)(this.curlSyntax.replace(/\\$/, ''), e);
-    }}" part="btn btn-fill">${(0, _languages.getI18nText)('operations.copy')}</button> <pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(this.curlSyntax.trim().replace(/\\$/, ''), _prismjs.default.languages.shell, 'shell'))}</code></pre> </div> </div>`;
+      (0, _commonUtils.copyToClipboard)(this.curlSyntax, e);
+    }}" part="btn btn-fill">${(0, _languages.getI18nText)('operations.copy')}</button> <pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(this.curlSyntax.trim(), _prismjs.default.languages.shell, 'shell'))}</code></pre> </div> </div>`;
   }
 
   apiCallTemplate() {
@@ -494,38 +494,39 @@ class ApiRequest extends _lit.LitElement {
 
   async onTryClick() {
     const tryBtnEl = this.querySelectorAll('.btn-execute')[0];
-    let fetchUrl;
-    let curlUrl;
-    let curl = '';
-    let curlHeaders = '';
     let curlData = '';
     let curlForm = '';
     const closestRespContainer = this.closest('.expanded-req-resp-container, .req-resp-container');
     const respEl = closestRespContainer && closestRespContainer.getElementsByTagName('api-response')[0];
-    const acceptHeader = respEl && respEl.selectedMimeType;
+    const acceptHeader = respEl === null || respEl === void 0 ? void 0 : respEl.selectedMimeType;
     const requestPanelEl = this.closest('.request-panel');
     const pathParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='path']")];
     const queryParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='query']")];
     const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll("[data-ptype='query-object']")];
     const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header']")];
     const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
-    fetchUrl = this.path.replaceAll(' ', '');
-    const fetchOptions = {
-      method: this.method.toUpperCase(),
-      headers: new Headers()
-    }; // Generate URL using Path Params
+    let pathUrl = `${this.serverUrl.replace(/\/$/, '')}${this.path.replaceAll(' ', '')}`; // Generate URL using Path Params
 
     pathParamEls.map(el => {
-      fetchUrl = fetchUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value));
-    }); // Query Params
+      pathUrl = pathUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value) || '-');
+    }); // Handle relative serverUrls
 
-    const urlQueryParam = new URLSearchParams();
+    if (!pathUrl.startsWith('http')) {
+      const newUrl = new URL(pathUrl, window.location.href);
+      pathUrl = newUrl.toString();
+    }
+
+    const fetchUrl = new URL(pathUrl);
+    const fetchOptions = {
+      method: this.method.toUpperCase(),
+      headers: new Headers()
+    }; // Query Params
 
     if (queryParamEls.length > 0) {
       queryParamEls.forEach(el => {
         if (el.dataset.array === 'false') {
           if (el.value !== '') {
-            urlQueryParam.append(el.dataset.pname, el.value);
+            fetchUrl.searchParams.append(el.dataset.pname, el.value);
           }
         } else {
           const paramSerializeStyle = el.dataset.paramSerializeStyle;
@@ -535,17 +536,17 @@ class ApiRequest extends _lit.LitElement {
 
           if (vals.length > 0) {
             if (paramSerializeStyle === 'spaceDelimited') {
-              urlQueryParam.append(el.dataset.pname, vals.join(' ').replace(/^\s|\s$/g, ''));
+              fetchUrl.searchParams.append(el.dataset.pname, vals.join(' ').replace(/^\s|\s$/g, ''));
             } else if (paramSerializeStyle === 'pipeDelimited') {
-              urlQueryParam.append(el.dataset.pname, vals.join('|').replace(/^\||\|$/g, ''));
+              fetchUrl.searchParams.append(el.dataset.pname, vals.join('|').replace(/^\||\|$/g, ''));
             } else {
               if (paramSerializeExplode === 'true') {
                 // eslint-disable-line no-lonely-if
                 vals.forEach(v => {
-                  urlQueryParam.append(el.dataset.pname, v);
+                  fetchUrl.searchParams.append(el.dataset.pname, v);
                 });
               } else {
-                urlQueryParam.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));
+                fetchUrl.searchParams.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));
               }
             }
           }
@@ -566,22 +567,22 @@ class ApiRequest extends _lit.LitElement {
             if (typeof queryParamObj[key] === 'object') {
               if (Array.isArray(queryParamObj[key])) {
                 if (paramSerializeStyle === 'spaceDelimited') {
-                  urlQueryParam.append(key, queryParamObj[key].join(' '));
+                  fetchUrl.searchParams.append(key, queryParamObj[key].join(' '));
                 } else if (paramSerializeStyle === 'pipeDelimited') {
-                  urlQueryParam.append(key, queryParamObj[key].join('|'));
+                  fetchUrl.searchParams.append(key, queryParamObj[key].join('|'));
                 } else {
                   if (paramSerializeExplode === 'true') {
                     // eslint-disable-line no-lonely-if
                     queryParamObj[key].forEach(v => {
-                      urlQueryParam.append(key, v);
+                      fetchUrl.searchParams.append(key, v);
                     });
                   } else {
-                    urlQueryParam.append(key, queryParamObj[key]);
+                    fetchUrl.searchParams.append(key, queryParamObj[key]);
                   }
                 }
               }
             } else {
-              urlQueryParam.append(key, queryParamObj[key]);
+              fetchUrl.searchParams.append(key, queryParamObj[key]);
             }
           }
         } catch (err) {
@@ -593,41 +594,25 @@ class ApiRequest extends _lit.LitElement {
 
     this.api_keys.filter(v => v.finalKeyValue).forEach(v => {
       if (v.in === 'query') {
-        urlQueryParam.append(v.name, v.finalKeyValue);
+        fetchUrl.searchParams.append(v.name, v.finalKeyValue);
         return;
       } // Otherwise put it in the header
 
 
       fetchOptions.headers.append(v.name, v.finalKeyValue);
-      curlHeaders += ` -H "${v.name}: ${v.finalKeyValue}" \\\n`;
     });
-    fetchUrl = `${fetchUrl}${urlQueryParam.toString() ? '?' : ''}${urlQueryParam.toString()}`; // Final URL for API call
-
-    fetchUrl = `${this.serverUrl.replace(/\/$/, '')}${fetchUrl}`;
-
-    if (fetchUrl.startsWith('http') === false) {
-      const url = new URL(fetchUrl, window.location.href);
-      curlUrl = url.href;
-    } else {
-      curlUrl = fetchUrl;
-    }
-
-    curl = `curl -X ${this.method.toUpperCase()} "${curlUrl}" \\\n`;
 
     if (acceptHeader) {
       // Uses the acceptHeader from Response panel
       fetchOptions.headers.append('Accept', acceptHeader);
-      curlHeaders += ` -H "Accept: ${acceptHeader}" \\\n`;
     } else if (this.accept) {
       fetchOptions.headers.append('Accept', this.accept);
-      curlHeaders += ` -H "Accept: ${this.accept}" \\\n`;
     } // Add Header Params
 
 
     headerParamEls.map(el => {
       if (el.value) {
         fetchOptions.headers.append(el.dataset.pname, el.value);
-        curlHeaders += ` -H "${el.dataset.pname}: ${el.value}" \\\n`;
       }
     }); // Request Body Params
 
@@ -661,7 +646,7 @@ class ApiRequest extends _lit.LitElement {
             }
 
             fetchOptions.body = formUrlDynParams;
-            curlData = ` -d ${formUrlDynParams.toString()} \\\n`;
+            curlData = ` \\\n  -d ${formUrlDynParams.toString()}`;
           }
         } else {
           // url-encoded Form Params (regular)
@@ -678,7 +663,7 @@ class ApiRequest extends _lit.LitElement {
             }
           });
           fetchOptions.body = formUrlParams;
-          curlData = ` -d ${formUrlParams.toString()} \\\n`;
+          curlData = ` \\\n  -d ${formUrlParams.toString()}`;
         }
       } else if (requestBodyType.includes('form-data')) {
         const formDataParams = new FormData();
@@ -687,14 +672,14 @@ class ApiRequest extends _lit.LitElement {
           if (el.dataset.array === 'false') {
             if (el.type === 'file' && el.files[0]) {
               formDataParams.append(el.dataset.pname, el.files[0], el.files[0].name);
-              curlForm += ` -F "${el.dataset.pname}=@${el.files[0].name}" \\\n`;
+              curlForm += ` \\\n  -F "${el.dataset.pname}=@${el.files[0].name}"`;
             } else if (el.value) {
               formDataParams.append(el.dataset.pname, el.value);
-              curlForm += ` -F "${el.dataset.pname}=${el.value}" \\\n`;
+              curlForm += ` \\\n  -F "${el.dataset.pname}=${el.value}"`;
             }
           } else if (el.value && Array.isArray(el.value)) {
             el.value.forEach(v => {
-              curlForm = `${curlForm} -F "${el.dataset.pname}[]=${v}" \\\n`;
+              curlForm += ` \\\n  -F "${el.dataset.pname}[]=${v}"`;
             });
             formDataParams.append(el.dataset.pname, el.value.join(','));
           }
@@ -705,7 +690,7 @@ class ApiRequest extends _lit.LitElement {
 
         if (bodyParamFileEl && bodyParamFileEl.files[0]) {
           fetchOptions.body = bodyParamFileEl.files[0];
-          curlData = ` --data-binary @${bodyParamFileEl.files[0].name} \\\n`;
+          curlData = ` \\\n  --data-binary @${bodyParamFileEl.files[0].name}`;
         }
       } else if (requestBodyType.includes('json') || requestBodyType.includes('xml') || requestBodyType.includes('text')) {
         const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');
@@ -715,7 +700,7 @@ class ApiRequest extends _lit.LitElement {
 
           if (requestBodyType.includes('json')) {
             try {
-              curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
+              curlData = ` \\\n  -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}'`;
             } catch (err) {
               /* Ignore unparseable JSON */
             }
@@ -723,7 +708,7 @@ class ApiRequest extends _lit.LitElement {
 
           if (!curlData) {
             // Save single quotes wrapped => 'text' => `"'"text"'"`
-            curlData = ` -d '${exampleTextAreaEl.value.replace(/'/g, '\'"\'"\'')}' \\\n`;
+            curlData = ` \\\n  -d '${exampleTextAreaEl.value.replace(/'/g, '\'"\'"\'')}'`;
           }
         }
       } // Common for all request-body
@@ -733,11 +718,8 @@ class ApiRequest extends _lit.LitElement {
         // For multipart/form-data don't set the content-type to allow creation of browser generated part boundaries
         fetchOptions.headers.append('Content-Type', requestBodyType);
       }
-
-      curlHeaders += ` -H "Content-Type: ${requestBodyType}" \\\n`;
     }
 
-    this.curlSyntax = '';
     this.responseIsBlob = false;
     this.respContentDisposition = '';
 
@@ -746,8 +728,6 @@ class ApiRequest extends _lit.LitElement {
       this.responseBlobUrl = '';
     }
 
-    this.curlSyntax = `${curl}${curlHeaders}${curlData}${curlForm}`;
-
     if (this.fetchCredentials) {
       fetchOptions.credentials = this.fetchCredentials;
     } // Options is legacy usage, documentation has been updated to reference properties of the fetch option directly, but older usages may still be using options
@@ -755,7 +735,7 @@ class ApiRequest extends _lit.LitElement {
 
     const fetchRequest = {
       explorerLocation: this.elementId,
-      url: fetchUrl,
+      url: fetchUrl.toString(),
       options: fetchOptions,
       ...fetchOptions
     };
@@ -775,6 +755,9 @@ class ApiRequest extends _lit.LitElement {
       body: fetchRequest.body || fetchOptions.body
     };
     const fetchRequestObject = new Request(fetchRequest.url, newFetchOptions);
+    const curl = `curl -X ${this.method.toUpperCase()} "${fetchUrl.toString()}"`;
+    const curlHeaders = [...newFetchOptions.headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value}"`, '');
+    this.curlSyntax = `${curl}${curlHeaders}${curlData}${curlForm}`;
     let fetchResponse;
 
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "0.11.464",
+  "version": "0.11.467",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Rhosys Developers <developers@rhosys.ch>",
   "type": "module",