rapidoc 9.3.2 → 9.3.4

package/src/components/api-request.js

@@ -3,6 +3,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-li
 import { guard } from 'lit/directives/guard.js'; // eslint-disable-line import/extensions
 import { live } from 'lit/directives/live.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
+import formatXml from 'xml-but-prettier';
 import Prism from 'prismjs';
 import TableStyles from '~/styles/table-styles';
 import FlexStyles from '~/styles/flex-styles';
@@ -12,8 +13,15 @@ import BorderStyles from '~/styles/border-styles';
 import TabStyles from '~/styles/tab-styles';
 import PrismStyles from '~/styles/prism-styles';
 import CustomStyles from '~/styles/custom-styles';
-import { copyToClipboard, prettyXml, downloadResource, viewResource } from '~/utils/common-utils';
-import { schemaInObjectNotation, getTypeInfo, generateExample, normalizeExamples, getSchemaFromParam, json2xml, nestExampleIfPresent } from '~/utils/schema-utils';
+import { copyToClipboard, downloadResource, viewResource } from '~/utils/common-utils';
+import { schemaInObjectNotation,
+  getTypeInfo,
+  generateExample,
+  normalizeExamples,
+  getSchemaFromParam,
+  json2xml,
+  nestExampleIfPresent,
+  anyExampleWithSummaryOrDescription } from '~/utils/schema-utils';
 import '~/components/json-tree';
 import '~/components/schema-tree';
 import '~/components/tag-input';
@@ -46,14 +54,16 @@ export default class ApiRequest extends LitElement {
       parser: { type: Object },
       accept: { type: String },
       callback: { type: String },
+      webhook: { type: String },
       responseMessage: { type: String, attribute: false },
       responseText: { type: String, attribute: false },
       responseHeaders: { type: String, attribute: false },
       responseStatus: { type: String, attribute: false },
       responseUrl: { type: String, attribute: false },
+      curlSyntax: { type: String, attribute: false },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
-      useSummaryToListExamples: { type: String, attribute: 'use-summary-to-list-example' },
       allowTry: { type: String, attribute: 'allow-try' },
+      showCurlBeforeTry: { type: String, attribute: 'show-curl-before-try' },
       renderStyle: { type: String, attribute: 'render-style' },
       schemaStyle: { type: String, attribute: 'schema-style' },
       activeSchemaTab: { type: String, attribute: 'active-schema-tab' },
@@ -90,7 +100,9 @@ export default class ApiRequest extends LitElement {
       PrismStyles,
       css`
         *, *:before, *:after { box-sizing: border-box; }
-    
+        :where(button, input[type="checkbox"], [tabindex="0"]):focus-visible { box-shadow: var(--focus-shadow); }
+        :where(input[type="text"], input[type="password"], select, textarea):focus-visible { border-color: var(--primary-color); }
+        tag-input:focus-within { outline: 1px solid;}
         .read-mode {
           margin-top: 24px;
         }
@@ -194,70 +206,118 @@ export default class ApiRequest extends LitElement {
         ${this.callback === 'true' ? 'CALLBACK REQUEST' : 'REQUEST'}
       </div>
       <div>
-        ${guard([this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('path'))}
-        ${guard([this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('query'))}
+        ${guard([this.method, this.path, this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('path'))}
+        ${guard([this.method, this.path, this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('query'))}
         ${this.requestBodyTemplate()}
-        ${guard([this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('header'))}
-        ${guard([this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('cookie'))}
+        ${guard([this.method, this.path, this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('header'))}
+        ${guard([this.method, this.path, this.allowTry, this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('cookie'))}
         ${this.allowTry === 'false' ? '' : html`${this.apiCallTemplate()}`}
       </div>  
     </div>
     `;
   }
 
-  updated(changedProperties) {
+  async updated() {
+    if (this.showCurlBeforeTry === 'true') {
+      this.applyCURLSyntax(this.shadowRoot);
+    }
+
     // In focused mode after rendering the request component, update the text-areas(which contains examples) using
     // the original values from hidden textareas
     // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually
+
+    // if (this.renderStyle === 'focused') {
+    //   if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {
+    //     // dont update example as only tabs is switched
+    //   } else {
+    //     this.requestUpdate();
+    //   }
+    // }
+
+    if (this.webhook === 'true') {
+      this.allowTry = 'false';
+    }
+  }
+
+  async saveExampleState() {
     if (this.renderStyle === 'focused') {
-      if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {
-        // dont update example as only tabs is switched
-      } else {
-        const exampleTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea[data-ptype="form-data"]')];
-        exampleTextAreaEls.forEach((el) => {
-          const origExampleEl = this.shadowRoot.querySelector(`textarea[data-pname='hidden-${el.dataset.pname}']`);
-          if (origExampleEl) {
-            el.value = origExampleEl.value;
-          }
-        });
-      }
+      const reqBodyTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea.request-body-param-user-input')];
+      reqBodyTextAreaEls.forEach((el) => {
+        el.dataset.user_example = el.value;
+      });
+      const exampleTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea[data-ptype="form-data"]')];
+      exampleTextAreaEls.forEach((el) => {
+        el.dataset.user_example = el.value;
+      });
+      this.requestUpdate();
     }
   }
 
-  /* eslint-disable indent */
+  async updateExamplesFromDataAttr() {
+    // In focused mode after rendering the request component, update the text-areas(which contains examples) using
+    // the original values from hidden textareas
+    // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually
+    if (this.renderStyle === 'focused') {
+      const reqBodyTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea.request-body-param-user-input')];
+      reqBodyTextAreaEls.forEach((el) => {
+        el.value = el.dataset.user_example || el.dataset.example;
+      });
+      const exampleTextAreaEls = [...this.shadowRoot.querySelectorAll('textarea[data-ptype="form-data"]')];
+      exampleTextAreaEls.forEach((el) => {
+        el.value = el.dataset.user_example || el.dataset.example;
+      });
+      this.requestUpdate();
+    }
+  }
 
-  exampleListTemplate(paramName, paramType, exampleList = []) {
+  /* eslint-disable indent */
+  renderExample(example, paramType, paramName) {
     return html`
-    ${(exampleList.length > 0
-      ? html`<span style="font-weight:bold">Example: </span>
-        ${exampleList.map((v, i) => html`
-          ${i === 0 ? '' : '┃'}
-          ${paramType === 'array' ? '[' : ''}
-          <a part="anchor anchor-param-example" class = "${this.allowTry === 'true' ? '' : 'inactive-link'}"
-            data-example-type="${paramType === 'array' ? paramType : 'string'}"
-            data-example = "${v.value && Array.isArray(v.value) ? (v.value?.join('~|~')) : (v.value || '')}"
-            @click="${(e) => {
-              const inputEl = e.target.closest('table').querySelector(`[data-pname="${paramName}"]`);
-              if (inputEl) {
-                if (e.target.dataset.exampleType === 'array') {
-                  inputEl.value = e.target.dataset.example.split('~|~');
-                } else {
-                  inputEl.value = e.target.dataset.example;
-                }
-              }
-            }
-          }"
-          >
-          ${this.useSummaryToListExamples === 'true'
-            ? v.description || v.summary || (v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || ''))
-            : v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || '')
+      ${paramType === 'array' ? '[' : ''}
+      <a
+        part="anchor anchor-param-example"
+        style="display:inline-block; min-width:24px; text-align:center"
+        class="${this.allowTry === 'true' ? '' : 'inactive-link'}"
+        data-example-type="${paramType === 'array' ? paramType : 'string'}"
+        data-example="${example.value && Array.isArray(example.value) ? example.value?.join('~|~') : example.value || ''}"
+        @click="${(e) => {
+          const inputEl = e.target.closest('table').querySelector(`[data-pname="${paramName}"]`);
+          if (inputEl) {
+            inputEl.value = e.target.dataset.exampleType === 'array' ? e.target.dataset.example.split('~|~') : e.target.dataset.example;
           }
-          </a>
-          ${paramType === 'array' ? '] ' : ''}
+        }}"
+      > ${example.printableValue || example.value} </a>
+      ${paramType === 'array' ? '] ' : ''}
+    `;
+  }
+
+  renderShortFormatExamples(examples, paramType, paramName) {
+    return html`${examples.map((x, i) => html`
+      ${i === 0 ? '' : '┃'}
+      ${this.renderExample(x, paramType, paramName)}`)}`;
+  }
+
+  renderLongFormatExamples(exampleList, paramType, paramName) {
+    return html` <ul style="list-style-type: disclosure-closed;">
+      ${exampleList.map((v) => html`
+          <li>
+            ${this.renderExample(v, paramType, paramName)}
+            ${v.summary?.length > 0 ? html`<span>&lpar;${v.summary}&rpar;</span>` : ''}
+            ${v.description?.length > 0 ? html`<p>${unsafeHTML(marked(v.description))}</p>` : ''}
+          </li>
         `)}
-      `
-      : ''
-    )}`;
+    </ul>`;
+  }
+
+  exampleListTemplate(paramName, paramType, exampleList = []) {
+    return html` ${
+      exampleList.length > 0
+        ? html`<span style="font-weight:bold">Examples: </span>
+          ${anyExampleWithSummaryOrDescription(exampleList)
+            ? this.renderLongFormatExamples(exampleList, paramType, paramName)
+            : this.renderShortFormatExamples(exampleList, paramType, paramName)}`
+        : ''
+      }`;
   }
 
   inputParametersTemplate(paramType) {
@@ -280,7 +340,7 @@ export default class ApiRequest extends LitElement {
     for (const param of filteredParams) {
       const [declaredParamSchema, serializeStyle, mimeTypeElem] = getSchemaFromParam(param);
       if (!declaredParamSchema) {
-        continue; // eslint-disable-line no-continue
+        continue;
       }
       const paramSchema = getTypeInfo(declaredParamSchema);
       if (!paramSchema) {
@@ -305,14 +365,13 @@ export default class ApiRequest extends LitElement {
           paramAllowReserved = param.allowReserved;
         }
       }
-
       // openapi 3.1.0 spec based examples (which must be Object(string : { value:any, summary?: string, description?: string})
       const example = normalizeExamples(
         (param.examples
           || nestExampleIfPresent(param.example)
           || nestExampleIfPresent(mimeTypeElem?.example)
           || mimeTypeElem?.examples
-          || paramSchema.examples
+          || nestExampleIfPresent(paramSchema.examples)
           || nestExampleIfPresent(paramSchema.example)
         ),
         paramSchema.type,
@@ -323,8 +382,9 @@ export default class ApiRequest extends LitElement {
           serializeStyle || 'json',
           '',
           '',
-          !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
-          !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
+          this.callback === 'true' || this.webhook === 'true' ? true : false, // eslint-disable-line no-unneeded-ternary
+          this.callback === 'true' || this.webhook === 'true' ? false : true, // eslint-disable-line no-unneeded-ternary
+          true,
           'text',
           false,
         )[0].exampleValue;
@@ -358,9 +418,13 @@ export default class ApiRequest extends LitElement {
                     data-param-serialize-style = "${paramStyle}"
                     data-param-serialize-explode = "${paramExplode}"
                     data-param-allow-reserved = "${paramAllowReserved}"
+                    data-x-fill-example = "${param['x-fill-example'] || 'yes'}"
                     data-array = "true"
                     placeholder = "add-multiple &#x21a9;"
-                    .value = "${Array.isArray(example.exampleVal) ? example.exampleVal : example.exampleVal}"
+                    .value="${param['x-fill-example'] === 'no'
+                      ? []
+                      : live(this.fillRequestFieldsWithExample === 'true' ? Array.isArray(example.exampleVal) ? example.exampleVal : [example.exampleVal] : [])
+                    }"
                   >
                   </tag-input>`
                 : paramSchema.type === 'object'
@@ -387,25 +451,30 @@ export default class ApiRequest extends LitElement {
                             data-param-serialize-style = "${paramStyle}"
                             data-param-serialize-explode = "${paramExplode}"
                             data-param-allow-reserved = "${paramAllowReserved}"
+                            data-x-fill-example = "${param['x-fill-example'] || 'yes'}"
                             spellcheck = "false"
-                            .textContent = "${this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : ''}"
+                            .textContent="${param['x-fill-example'] === 'no' ? '' : live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
                             style = "resize:vertical; width:100%; height: ${'read focused'.includes(this.renderStyle) ? '180px' : '120px'};"
+                            @input=${(e) => {
+                              const requestPanelEl = this.getRequestPanel(e);
+                              this.liveCURLSyntaxUpdate(requestPanelEl);
+                            }}
                           ></textarea>
                         </div>`
                         : html`
-                          <div class="tab-content col">            
+                          <div class="tab-content col">
                             <schema-tree
                               class = 'json'
                               style = 'display: block'
                               .data = '${schemaAsObj}'
                               schema-expand-level = "${this.schemaExpandLevel}"
                               schema-description-expanded = "${this.schemaDescriptionExpanded}"
-                              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+                              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
                               schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
                               schema-hide-write-only = "${this.schemaHideWriteOnly.includes(this.method)}"
-                              exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
-            file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
-            anchor:anchor, anchor-param-example:anchor-param-example"
+                              exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+                                file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+                                anchor:anchor, anchor-param-example:anchor-param-example"
                             > </schema-tree>
                           </div>`
                         }
@@ -421,6 +490,10 @@ export default class ApiRequest extends LitElement {
                       data-x-fill-example = "${param['x-fill-example'] || 'yes'}"
                       data-array="false"
                       .value="${param['x-fill-example'] === 'no' ? '' : live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
+                      @input=${(e) => {
+                        const requestPanelEl = this.getRequestPanel(e);
+                        this.liveCURLSyntaxUpdate(requestPanelEl);
+                      }}
                     />`
                 }
             </td>`
@@ -469,15 +542,22 @@ export default class ApiRequest extends LitElement {
     return html`
     <div class="table-title top-gap">${title}</div>
     <div style="display:block; overflow-x:auto; max-width:100%;">
-      <table class="m-table" style="width:100%; word-break:break-word;">
+      <table role="presentation" class="m-table" style="width:100%; word-break:break-word;">
         ${tableRows}
       </table>
     </div>`;
   }
 
-  resetRequestBodySelection() {
+  // This method is called before navigation change in focused mode
+  async beforeNavigationFocusedMode() {
+    // this.saveExampleState();
+  }
+
+  // This method is called after navigation change in focused mode
+  async afterNavigationFocusedMode() {
     this.selectedRequestBodyType = '';
     this.selectedRequestBodyExample = '';
+    this.updateExamplesFromDataAttr();
     this.clearResponseData();
   }
 
@@ -489,6 +569,9 @@ export default class ApiRequest extends LitElement {
       const readOnlyExampleEl = selectEl.closest('.example-panel').querySelector('.request-body-param');
       const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');
       userInputExampleTextareaEl.value = readOnlyExampleEl.innerText;
+
+      const requestPanelEl = this.getRequestPanel({ target: selectEl });
+      this.liveCURLSyntaxUpdate(requestPanelEl);
     }, 0, exampleDropdownEl);
   }
 
@@ -559,8 +642,8 @@ export default class ApiRequest extends LitElement {
             reqBody.mimeType,
             reqBody.examples,
             reqBody.example,
-            !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
-            !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
+            this.callback === 'true' || this.webhook === 'true' ? true : false, // eslint-disable-line no-unneeded-ternary
+            this.callback === 'true' || this.webhook === 'true' ? false : true, // eslint-disable-line no-unneeded-ternary
             'text',
             false,
           );
@@ -604,6 +687,10 @@ export default class ApiRequest extends LitElement {
                     data-example-format = "${v.exampleFormat}"
                     style="width:100%; resize:vertical;"
                     .textContent = "${this.fillRequestFieldsWithExample === 'true' ? (v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 2)) : ''}"
+                    @input=${(e) => {
+                      const requestPanelEl = this.getRequestPanel(e);
+                      this.liveCURLSyntaxUpdate(requestPanelEl);
+                    }}
                   ></textarea>
                 </div>  
               `)}
@@ -618,8 +705,8 @@ export default class ApiRequest extends LitElement {
             reqBody.mimeType,
             reqBody.examples,
             reqBody.example,
-            !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
-            !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
+            this.callback === 'true' || this.webhook === 'true' ? true : false, // eslint-disable-line no-unneeded-ternary
+            this.callback === 'true' || this.webhook === 'true' ? false : true, // eslint-disable-line no-unneeded-ternary
             'text',
             false,
           );
@@ -649,7 +736,7 @@ export default class ApiRequest extends LitElement {
               .data = '${schemaAsObj}'
               schema-expand-level = "${this.schemaExpandLevel}"
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
-              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
               schema-hide-read-only = "${this.schemaHideReadOnly}"
               schema-hide-write-only = "${this.schemaHideWriteOnly}"
               exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
@@ -664,7 +751,7 @@ export default class ApiRequest extends LitElement {
               .data = "${schemaAsObj}"
               schema-expand-level = "${this.schemaExpandLevel}"
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
-              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
               schema-hide-read-only = "${this.schemaHideReadOnly}"
               schema-hide-write-only = "${this.schemaHideWriteOnly}"
               exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
@@ -691,10 +778,8 @@ export default class ApiRequest extends LitElement {
                 <button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE</button>
                 <button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
               </div>
-              ${this.activeSchemaTab === 'example'
-                ? html`<div class="tab-content col"> ${reqBodyExampleHtml}</div>`
-                : html`<div class="tab-content col"> ${reqBodySchemaHtml}</div>`
-              }
+              ${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'block' : 'none'};"> ${reqBodyExampleHtml}</div>`}
+              ${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'none' : 'block'};"> ${reqBodySchemaHtml}</div>`}
             </div>`
           : html`  
             ${reqBodyFileInputHtml}
@@ -712,8 +797,8 @@ export default class ApiRequest extends LitElement {
       'json',
       fieldSchema.examples,
       fieldSchema.example,
-      !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
-      !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
+      this.callback === 'true' || this.webhook === 'true' ? true : false, // eslint-disable-line no-unneeded-ternary
+      this.callback === 'true' || this.webhook === 'true' ? false : true, // eslint-disable-line no-unneeded-ternary
       'text',
       false,
     );
@@ -755,8 +840,6 @@ export default class ApiRequest extends LitElement {
             .textContent = "${this.fillRequestFieldsWithExample === 'true' ? formdataPartExample[0].exampleValue : ''}"
             spellcheck = "false"
           ></textarea>
-          <!-- This textarea(hidden) is to store the original example value, in focused mode on navbar change it is used to update the example text -->
-          <textarea data-pname = "hidden-${fieldName}" data-ptype = "${mimeType.includes('form-urlencode') ? 'hidden-form-urlencode' : 'hidden-form-data'}" class="is-hidden" style="display:none">${formdataPartExample[0].exampleValue}</textarea>
         </div>`
       }
       ${html`
@@ -901,7 +984,7 @@ export default class ApiRequest extends LitElement {
         }`);
       }
       return html`
-        <table style="width:100%;" class="m-table">
+        <table role="presentation" style="width:100%;" class="m-table">
           ${formDataTableRows}
         </table>
       `;
@@ -921,8 +1004,34 @@ export default class ApiRequest extends LitElement {
     `;
   }
 
+  curlSyntaxTemplate(display = 'flex') {
+    return html`
+      <div class="col m-markdown" style="flex:1; display:${display}; position:relative; max-width: 100%;">
+        <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.curlSyntax.replace(/\\$/, ''), e); }}' part="btn btn-fill"> Copy </button>
+        <pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim().replace(/\\$/, ''), Prism.languages.shell, 'shell'))}</code></pre>
+      </div>
+      `;
+  }
+
   apiResponseTabTemplate() {
-    const responseFormat = this.responseHeaders.includes('json') ? 'json' : (this.responseHeaders.includes('html') || this.responseHeaders.includes('xml')) ? 'html' : '';
+    let responseFormat = '';
+    let responseContent = '';
+    if (!this.responseIsBlob) {
+      if (this.responseHeaders.includes('application/x-ndjson')) {
+        responseFormat = 'json';
+        const prismLines = this.responseText.split('\n').map((q) => Prism.highlight(q, Prism.languages[responseFormat], responseFormat)).join('\n');
+        responseContent = html`<code>${unsafeHTML(prismLines)}</code>`;
+      } else if (this.responseHeaders.includes('json')) {
+        responseFormat = 'json';
+        responseContent = html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`;
+      } else if (this.responseHeaders.includes('html') || this.responseHeaders.includes('xml')) {
+        responseFormat = 'html';
+        responseContent = html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`;
+      } else {
+        responseFormat = 'text';
+        responseContent = html`<code>${this.responseText}</code>`;
+      }
+    }
     return html`
       <div class="row" style="font-size:var(--font-size-small); margin:5px 0">
         <div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage}</div>
@@ -936,7 +1045,9 @@ export default class ApiRequest extends LitElement {
         }}">
           <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab = 'response' > RESPONSE</button>
           <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}"  data-tab = 'headers' > RESPONSE HEADERS</button>
-          <button class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>
+          ${this.showCurlBeforeTry === 'true'
+            ? ''
+            : html`<button class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>`}
         </div>
         ${this.responseIsBlob
           ? html`
@@ -952,20 +1063,14 @@ export default class ApiRequest extends LitElement {
           : html`
             <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
               <button class="toolbar-btn" style="position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part="btn btn-fill"> Copy </button>
-              <pre style="white-space:pre; min-height:50px; height:400px; resize:vertical; overflow:auto">${responseFormat
-                ? html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`
-                : `${this.responseText}`
-              }</pre>
+              <pre style="white-space:pre; min-height:50px; height:var(--resp-area-height, 400px); resize:vertical; overflow:auto">${responseContent}</pre>
             </div>`
         }
         <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
           <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part="btn btn-fill"> Copy </button>
           <pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>
         </div>
-        <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};">
-          <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.curlSyntax.replace(/\\$/, ''), e); }}' part="btn btn-fill"> Copy </button>
-          <pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim().replace(/\\$/, ''), Prism.languages.shell, 'shell'))}</code></pre>
-        </div>
+        ${this.showCurlBeforeTry === 'true' ? '' : this.curlSyntaxTemplate(this.activeResponseTab === 'curl' ? 'flex' : 'none')}
       </div>`;
   }
 
@@ -995,7 +1100,7 @@ export default class ApiRequest extends LitElement {
     `;
 
     return html`
-    <div style="display:flex; align-items:flex-end; margin:16px 0; font-size:var(--font-size-small);">
+    <div style="display:flex; align-items:flex-end; margin:16px 0; font-size:var(--font-size-small);" part="wrap-request-btn">
       <div class="hide-in-small-screen" style="flex-direction:column; margin:0; width:calc(100% - 60px);">
         <div style="display:flex; flex-direction:row; align-items:center; overflow:hidden;"> 
           ${selectedServerHtml}
@@ -1030,6 +1135,9 @@ export default class ApiRequest extends LitElement {
       }
       <button class="m-btn primary thin-border" part="btn btn-try" @click="${this.onTryClick}">TRY</button>
     </div>
+    <div class="row" style="font-size:var(--font-size-small); margin:5px 0">
+      ${this.showCurlBeforeTry === 'true' ? this.curlSyntaxTemplate() : ''}
+    </div>
     ${this.responseMessage === '' ? '' : this.apiResponseTabTemplate()}
     `;
   }
@@ -1055,27 +1163,12 @@ export default class ApiRequest extends LitElement {
     requestPanelInputEls.forEach((el) => { el.value = ''; });
   }
 
-  async onTryClick(e) {
-    // const me = this;
-    const tryBtnEl = e.target;
+  buildFetchURL(requestPanelEl) {
     let fetchUrl;
-    let curlUrl;
-    let curl = '';
-    let curlHeaders = '';
-    let curlData = '';
-    let curlForm = '';
-    const respEl = this.closest('.expanded-req-resp-container, .req-resp-container')?.getElementsByTagName('api-response')[0];
-    const acceptHeader = respEl?.selectedMimeType;
-    const requestPanelEl = e.target.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;
-    const fetchOptions = {
-      method: this.method.toUpperCase(),
-    };
     // Generate URL using Path Params
     pathParamEls.map((el) => {
       fetchUrl = fetchUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value));
@@ -1159,7 +1252,7 @@ export default class ApiRequest extends LitElement {
             }
           }
         } catch (err) {
-          console.log('RapiDoc: unable to parse %s into object', el.value); // eslint-disable-line no-console
+          console.error('RapiDoc: unable to parse %s into object', el.value); // eslint-disable-line no-console
         }
         if (queryParam.toString()) {
           urlQueryParamsMap.set(el.dataset.pname, queryParam);
@@ -1168,7 +1261,6 @@ export default class ApiRequest extends LitElement {
     }
     let urlQueryParamString = '';
     if (urlQueryParamsMap.size) {
-      urlQueryParamString = '?';
       urlQueryParamsMap.forEach((val, pname) => {
         if (queryParamsWithReservedCharsAllowed.includes(pname)) {
           urlQueryParamString += `${pname}=`;
@@ -1180,7 +1272,9 @@ export default class ApiRequest extends LitElement {
       });
       urlQueryParamString = urlQueryParamString.slice(0, -1);
     }
-    fetchUrl = `${fetchUrl}${urlQueryParamString}`;
+    if (urlQueryParamString.length !== 0) {
+      fetchUrl = `${fetchUrl}${fetchUrl.includes('?') ? '&' : '?'}${urlQueryParamString}`;
+    }
 
     // Add authentication Query-Param if provided
     this.api_keys
@@ -1189,23 +1283,21 @@ export default class ApiRequest extends LitElement {
         fetchUrl = `${fetchUrl}${fetchUrl.includes('?') ? '&' : '?'}${v.name}=${encodeURIComponent(v.finalKeyValue)}`;
       });
 
-    // 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`;
+    return fetchUrl;
+  }
+
+  buildFetchHeaders(requestPanelEl) {
+    const respEl = this.closest('.expanded-req-resp-container, .req-resp-container')?.getElementsByTagName('api-response')[0];
+    const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header']")];
+    const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
+    const acceptHeader = respEl?.selectedMimeType;
     const reqHeaders = new Headers();
     if (acceptHeader) {
       // Uses the acceptHeader from Response panel
       reqHeaders.append('Accept', acceptHeader);
-      curlHeaders += ` -H "Accept: ${acceptHeader}" \\\n`;
     } else if (this.accept) {
       reqHeaders.append('Accept', this.accept);
-      curlHeaders += ` -H "Accept: ${this.accept}" \\\n`;
     }
 
     // Add Authentication Header if provided
@@ -1213,18 +1305,32 @@ export default class ApiRequest extends LitElement {
       .filter((v) => (v.in === 'header'))
       .forEach((v) => {
         reqHeaders.append(v.name, v.finalKeyValue);
-        curlHeaders += ` -H "${v.name}: ${v.finalKeyValue}" \\\n`;
       });
 
     // Add Header Params
     headerParamEls.map((el) => {
       if (el.value) {
         reqHeaders.append(el.dataset.pname, el.value);
-        curlHeaders += ` -H "${el.dataset.pname}: ${el.value}" \\\n`;
       }
     });
 
-    // Request Body Params
+    if (requestBodyContainerEl) {
+      const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;
+      // Common for all request-body
+      if (!requestBodyType.includes('form-data')) {
+        // For multipart/form-data dont set the content-type to allow creation of browser generated part boundaries
+        reqHeaders.append('Content-Type', requestBodyType);
+      }
+    }
+
+    return reqHeaders;
+  }
+
+  buildFetchBodyOptions(requestPanelEl) {
+    const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
+    const fetchOptions = {
+      method: this.method.toUpperCase(),
+    };
     if (requestBodyContainerEl) {
       const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;
       if (requestBodyType.includes('form-urlencoded')) {
@@ -1250,7 +1356,6 @@ export default class ApiRequest extends LitElement {
               formUrlDynParams.append(prop, JSON.stringify(tmpObj[prop]));
             }
             fetchOptions.body = formUrlDynParams;
-            curlData = ` -d ${formUrlDynParams.toString()} \\\n`;
           }
         } else {
           // url-encoded Form Params (regular)
@@ -1269,7 +1374,6 @@ export default class ApiRequest extends LitElement {
               }
             });
           fetchOptions.body = formUrlParams;
-          curlData = ` -d ${formUrlParams.toString()} \\\n`;
         }
       } else if (requestBodyType.includes('form-data')) {
         const formDataParams = new FormData();
@@ -1278,15 +1382,10 @@ export default class ApiRequest extends 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`;
             } else if (el.value) {
               formDataParams.append(el.dataset.pname, el.value);
-              curlForm += ` -F "${el.dataset.pname}=${el.value}" \\\n`;
             }
           } else if (el.value && Array.isArray(el.value)) {
-            el.value.forEach((v) => {
-              curlForm = `${curlForm} -F "${el.dataset.pname}[]=${v}" \\\n`;
-            });
             formDataParams.append(el.dataset.pname, el.value.join(','));
           }
         });
@@ -1295,34 +1394,27 @@ export default class ApiRequest extends LitElement {
         const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');
         if (bodyParamFileEl?.files[0]) {
           fetchOptions.body = bodyParamFileEl.files[0]; // eslint-disable-line prefer-destructuring
-          curlData = ` --data-binary @${bodyParamFileEl.files[0].name} \\\n`;
         }
       } else if (requestBodyType.includes('json') || requestBodyType.includes('xml') || requestBodyType.includes('text')) {
         const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');
         if (exampleTextAreaEl?.value) {
           fetchOptions.body = exampleTextAreaEl.value;
-          if (requestBodyType.includes('json')) {
-            try {
-              curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
-            } catch (err) {
-              // Ignore.
-            }
-          }
-          if (!curlData) {
-            curlData = ` -d '${exampleTextAreaEl.value.replace(/'/g, '\'"\'"\'')}' \\\n`;
-          }
         }
       }
-      // Common for all request-body
-      if (!requestBodyType.includes('form-data')) {
-        // For multipart/form-data dont set the content-type to allow creation of browser generated part boundaries
-        reqHeaders.append('Content-Type', requestBodyType);
-      }
-      curlHeaders += ` -H "Content-Type: ${requestBodyType}" \\\n`;
     }
+
+    return fetchOptions;
+  }
+
+  async onTryClick(e) {
+    const tryBtnEl = e.target;
+    const requestPanelEl = tryBtnEl.closest('.request-panel');
+    const fetchUrl = this.buildFetchURL(requestPanelEl);
+    const fetchOptions = this.buildFetchBodyOptions(requestPanelEl);
+    const reqHeaders = this.buildFetchHeaders(requestPanelEl);
     this.responseUrl = '';
     this.responseHeaders = [];
-    this.curlSyntax = '';
+    this.curlSyntax = this.generateCURLSyntax(fetchUrl, reqHeaders, fetchOptions, requestPanelEl);
     this.responseStatus = 'success';
     this.responseIsBlob = false;
 
@@ -1331,22 +1423,28 @@ export default class ApiRequest extends LitElement {
       URL.revokeObjectURL(this.responseBlobUrl);
       this.responseBlobUrl = '';
     }
-    this.curlSyntax = `${curl}${curlHeaders}${curlData}${curlForm}`;
     if (this.fetchCredentials) {
       fetchOptions.credentials = this.fetchCredentials;
     }
     const controller = new AbortController();
     const { signal } = controller;
     fetchOptions.headers = reqHeaders;
-    const fetchRequest = new Request(fetchUrl, fetchOptions);
+    const tempRequest = { url: fetchUrl, ...fetchOptions };
     this.dispatchEvent(new CustomEvent('before-try', {
       bubbles: true,
       composed: true,
       detail: {
-        request: fetchRequest,
+        request: tempRequest,
         controller,
       },
     }));
+    const updatedFetchOptions = {
+      method: tempRequest.method,
+      headers: tempRequest.headers,
+      credentials: tempRequest.credentials,
+      body: tempRequest.body,
+    };
+    const fetchRequest = new Request(tempRequest.url, updatedFetchOptions);
 
     let fetchResponse;
     let responseClone;
@@ -1355,6 +1453,9 @@ export default class ApiRequest extends LitElement {
       let respJson;
       let respText;
       tryBtnEl.disabled = true;
+      this.responseText = '⌛';
+      this.responseMessage = '';
+      this.requestUpdate();
       const startTime = performance.now();
       fetchResponse = await fetch(fetchRequest, { signal });
       const endTime = performance.now();
@@ -1372,7 +1473,9 @@ export default class ApiRequest extends LitElement {
       if (respEmpty) {
         this.responseText = '';
       } else if (contentType) {
-        if (contentType.includes('json')) {
+        if (contentType === 'application/x-ndjson') {
+          this.responseText = await fetchResponse.text();
+        } else if (contentType.includes('json')) {
           if ((/charset=[^"']+/).test(contentType)) {
             const encoding = contentType.split('charset=')[1];
             const buffer = await fetchResponse.arrayBuffer();
@@ -1401,9 +1504,10 @@ export default class ApiRequest extends LitElement {
         } else {
           respText = await fetchResponse.text();
           if (contentType.includes('xml')) {
-            this.responseText = prettyXml(respText);
+            this.responseText = formatXml(respText, { textNodesOnSameLine: true, indentor: '  ' });
+          } else {
+            this.responseText = respText;
           }
-          this.responseText = respText;
         }
         if (this.responseIsBlob) {
           const contentDisposition = fetchResponse.headers.get('content-disposition');
@@ -1438,6 +1542,7 @@ export default class ApiRequest extends LitElement {
           },
         }));
         this.responseMessage = 'Request Aborted';
+        this.responseText = 'Request Aborted';
       } else {
         this.dispatchEvent(new CustomEvent('after-try', {
           bubbles: true,
@@ -1453,6 +1558,90 @@ export default class ApiRequest extends LitElement {
     this.requestUpdate();
   }
 
+  liveCURLSyntaxUpdate(requestPanelEl) {
+    this.applyCURLSyntax(requestPanelEl);
+    this.requestUpdate();
+  }
+
+  onGenerateCURLClick(e) {
+    const requestPanelEl = this.getRequestPanel(e);
+    this.applyCURLSyntax(requestPanelEl);
+  }
+
+  getRequestPanel(e) {
+    return e.target.closest('.request-panel');
+  }
+
+  applyCURLSyntax(requestPanelEl) {
+    const fetchUrl = this.buildFetchURL(requestPanelEl);
+    const fetchOptions = this.buildFetchBodyOptions(requestPanelEl);
+    const fetchHeaders = this.buildFetchHeaders(requestPanelEl);
+
+    this.curlSyntax = this.generateCURLSyntax(fetchUrl, fetchHeaders, fetchOptions, requestPanelEl);
+  }
+
+  generateCURLSyntax(fetchUrl, fetchHeaders, fetchOptions, requestPanelEl) {
+    let curlUrl;
+    let curl = '';
+    let curlHeaders = '';
+    let curlData = '';
+    let curlForm = '';
+    const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
+
+    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`;
+
+    curlHeaders = Array.from(fetchHeaders).map(([key, value]) => ` -H "${key}: ${value}"`).join('\\\n');
+    if (curlHeaders) {
+      curlHeaders = `${curlHeaders} \\\n`;
+    }
+    if (fetchOptions.body instanceof URLSearchParams) {
+      curlData = ` -d ${fetchOptions.body.toString()} \\\n`;
+    } else if (fetchOptions.body instanceof File) {
+      curlData = ` --data-binary @${fetchOptions.body.name} \\\n`;
+    } else if (fetchOptions.body instanceof FormData) {
+      curlForm = Array.from(fetchOptions.body).reduce((aggregator, [key, value]) => {
+        if (value instanceof File) {
+          return [...aggregator, ` -F "${key}=@${value.name}"`];
+        }
+
+        const multiple = value.match(/([^,],)/gm);
+
+        if (multiple) {
+          const multipleResults = multiple.map((one) => `-F "${key}[]=${one}"`);
+
+          return [...aggregator, ...multipleResults];
+        }
+
+        return [...aggregator, ` -F "${key}=${value}"`];
+      }, []).join('\\\n');
+    } else if (requestBodyContainerEl && requestBodyContainerEl.dataset.selectedRequestBodyType) {
+      const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;
+      const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');
+      if (exampleTextAreaEl?.value) {
+        fetchOptions.body = exampleTextAreaEl.value;
+        if (requestBodyType.includes('json')) {
+          try {
+            curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
+          } catch (err) {
+            // Ignore.
+          }
+        }
+        if (!curlData) {
+          curlData = ` -d '${exampleTextAreaEl.value.replace(/'/g, '\'"\'"\'')}' \\\n`;
+        }
+      }
+    }
+
+    return `${curl}${curlHeaders}${curlData}${curlForm}`;
+  }
+
   onAddRemoveFileInput(e, pname, ptype) {
     if (e.target.tagName.toLowerCase() !== 'button') {
       return;
@@ -1508,7 +1697,8 @@ export default class ApiRequest extends LitElement {
   }
 
   disconnectedCallback() {
-    // Cleanup ObjectURL forthe blob data if this component created one
+    this.curlSyntax = '';
+    // Cleanup ObjectURL for the blob data if this component created one
     if (this.responseBlobUrl) {
       URL.revokeObjectURL(this.responseBlobUrl);
       this.responseBlobUrl = '';