openapi-explorer 0.6.218 → 0.6.223

package/package.json

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

package/src/components/api-request.js

@@ -144,9 +144,9 @@ export default class ApiRequest extends LitElement {
 
       tableRows.push(html`
       <tr> 
-        <td rowspan="${this.allowTry === 'true' ? '1' : '2'}" style="width:160px; min-width:50px;">
-          <div class="param-name">
-            ${param.required ? html`<span style='color:var(--red)'>*</span>` : ''}${param.name}
+        <td style="width:160px; min-width:50px;">
+          <div class="param-name ${paramSchema.deprecated ? 'deprecated' : ''}">
+            ${param.name}${!paramSchema.deprecated && param.required ? html`<span style='color:var(--red);'>*</span>` : ''}
           </div>
           <div class="param-type">
             ${paramSchema.type === 'array'
@@ -203,7 +203,7 @@ export default class ApiRequest extends LitElement {
         }
         ${this.renderStyle === 'focused'
           ? html`
-            <td colspan="${(this.allowTry === 'true') ? '1' : '2'}">
+            <td>
               ${paramSchema.default || paramSchema.constrain || paramSchema.allowedValues || paramSchema.pattern
                 ? html`
                   <div class="param-constraint">
@@ -497,11 +497,8 @@ export default class ApiRequest extends LitElement {
         formDataTableRows.push(html`
         <tr> 
           <td style="width:160px; min-width:100px;">
-            <div class="param-name">
-              ${fieldSchema.required
-                ? html`<span style='color:var(--red);'>*</span>${fieldName}`
-                : html`${fieldName}`
-              }
+            <div class="param-name ${fieldSchema.deprecated ? 'deprecated' : ''}">
+              ${fieldName}${!fieldSchema.deprecated && (schema.required?.includes(fieldName) || fieldSchema.required) ? html`<span style='color:var(--red);'>*</span>` : ''}
             </div>
             <div class="param-type">${paramSchema.type}</div>
           </td>  
@@ -1004,11 +1001,15 @@ export default class ApiRequest extends LitElement {
         const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');
         if (exampleTextAreaEl && exampleTextAreaEl.value) {
           fetchOptions.body = exampleTextAreaEl.value;
-          // curlData = ` -d ${JSON.stringify(exampleTextAreaEl.value.replace(/(\r\n|\n|\r)/gm, '')).replace(/\\"/g, "'")} \\ \n`;
-          try {
-            curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
-          } catch (err) {
-            curlData = ` -d '${exampleTextAreaEl.value.replace(/(\r\n|\n|\r)/gm, '')}' \\\n`;
+          if (requestBodyType.includes('json')) {
+            try {
+              curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
+            } catch (err) { /* Ignore unparseable JSON */ }
+          }
+
+          if (!curlData) {
+            // Save single quotes wrapped => 'text' => `"'"text"'"`
+            curlData = ` -d '${exampleTextAreaEl.value.replace(/'/g, '\'"\'"\'')}' \\\n`;
           }
         }
       }

package/src/openapi-explorer.js

@@ -199,23 +199,6 @@ export default class OpenApiExplorer extends LitElement {
         background-image: linear-gradient(to right, rgba(0,0,0,0), var(--border-color), rgba(0,0,0,0));
       }
 
-      .section-tag-header:hover::after {
-        position:absolute;
-        margin-left:-24px;
-        font-size:20px;
-        top: calc(50% - 14px);
-        color:var(--primary-color);
-        content: '⬆'; 
-      }
-
-      .collapsed .section-tag-header::after {
-        position:absolute;
-        margin-left:-24px;
-        font-size:20px;
-        top: calc(50% - 14px);
-        color: var(--border-color);
-        content: '⬇'; 
-      }
       .collapsed .section-tag-header:hover::after {
         color:var(--primary-color);
       }
@@ -312,6 +295,17 @@ export default class OpenApiExplorer extends LitElement {
         100% { transform: rotate(360deg); }
       }
 
+      @media only screen and (max-width: 767.98px) {
+        .section-padding {
+          // margin-right: 1rem;
+          margin: 1rem;
+        }
+
+        .sub-title.tag {
+          margin-left: 1rem;
+        }
+      }
+
       @media only screen and (min-width: 768px) {
         .nav-bar {
           width: 260px;

package/src/styles/api-request-styles.js

@@ -19,6 +19,9 @@ export default css`
   color: var(--fg); 
   font-family: var(--font-mono);
 }
+.api-request .param-name.deprecated {
+  text-decoration: line-through;
+}
 .api-request .param-type {
   color: var(--light-fg); 
   font-family: var(--font-regular);

package/src/styles/font-styles.js

@@ -63,6 +63,9 @@ export default css`
   h1,h2,h3,h4,h5,h5{
     margin-block-end: 0.2em;
   }
+  h3 {
+    margin-top: 0;
+  }
   p { margin-block-start: 0.5em; }
   a { color: var(--blue); cursor: pointer; }
   a.inactive-link { 

package/src/templates/endpoint-template.js

@@ -21,21 +21,33 @@ function toggleExpand(path) {
   this.requestUpdate();
 }
 
-export function expandCollapseAll(operationsRootEl, action = 'expand-all') {
-  const elList = [...operationsRootEl.querySelectorAll('.section-tag')];
-  if (action === 'expand-all') {
-    elList.map((el) => {
-      el.classList.replace('collapsed', 'expanded');
-    });
+function toggleTag(tagElement, tagId) {
+  const sectionTag = tagElement.target.closest('.section-tag');
+  const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
+  tag.expanded = !tag.expanded;
+  if (tag.expanded) {
+    sectionTag.classList.remove('collapsed');
+    sectionTag.classList.add('expanded');
   } else {
-    elList.map((el) => {
-      el.classList.replace('expanded', 'collapsed');
-    });
+    sectionTag.classList.remove('expanded');
+    sectionTag.classList.add('collapsed');
   }
+  this.requestUpdate();
 }
-
-function onExpandCollapseAll(e, action = 'expand-all') {
-  expandCollapseAll.call(this, e.target.closest('.operations-root'), action);
+export function expandCollapseAll(currentElement, action = 'expand-all') {
+  const operationsRootEl = currentElement.target.closest('.operations-root');
+  const elList = [...operationsRootEl.querySelectorAll('.section-tag')];
+  const expand = action === 'expand-all';
+  this.resolvedSpec.tags.forEach(t => t.expanded = expand);
+  elList.map((el) => {
+    if (expand) {
+      el.classList.remove('collapsed');
+      el.classList.add('expanded');
+    } else {
+      el.classList.remove('expanded');
+      el.classList.add('collapsed');
+    }
+  });
 }
 
 /* eslint-disable indent */
@@ -127,21 +139,25 @@ function endpointBodyTemplate(path) {
 export default function endpointTemplate() {
   return html`
     <div style="display:flex; justify-content:flex-end; padding-right: 1rem; font-size: 14px;"> 
-      <span @click="${(e) => onExpandCollapseAll(e, 'expand-all')}" style="color:var(--primary-color); cursor: pointer;">Expand</span> 
+      <span @click="${(e) => expandCollapseAll.call(this, e, 'expand-all')}" style="color:var(--primary-color); cursor: pointer;">Expand</span> 
       &nbsp;|&nbsp; 
-      <span @click="${(e) => onExpandCollapseAll(e, 'collapse-all')}" style="color:var(--primary-color); cursor: pointer;">Collapse</span>
+      <span @click="${(e) => expandCollapseAll.call(this, e, 'collapse-all')}" style="color:var(--primary-color); cursor: pointer;">Collapse</span>
     </div>
     ${(this.resolvedSpec && this.resolvedSpec.tags || []).map((tag) => html`
     <div class='regular-font section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}' > 
     
-      <div class='section-tag-header' @click="${() => { tag.expanded = !tag.expanded; this.requestUpdate(); }}">
+      <div class='section-tag-header' @click="${(e) => toggleTag.call(this, e, tag.elementId)}">
         <div id='${tag.elementId}' class="sub-title tag" style="color:var(--primary-color)">${tag.name}</div>
       </div>
       <div class='section-tag-body'>
         <slot name="${tag.elementId}"></slot>
-        <div class="regular-font regular-font-size m-markdown" style="padding-bottom:12px">
-          ${unsafeHTML(marked(tag.description || ''))}
-        </div>
+        ${tag.description
+          ? `html
+          <div class="regular-font regular-font-size m-markdown" style="padding-bottom:12px">
+            ${unsafeHTML(marked(tag.description || ''))}
+          </div>`
+        : ''
+        }
         ${tag.paths.filter((v) => {
           if (this.matchPaths) {
             return pathIsInSearch(this.matchPaths, v);

package/src/templates/navbar-template.js

@@ -5,11 +5,13 @@ import { pathIsInSearch } from '../utils/common-utils';
 export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
   const tagAndPathEl = navLinkEl && navLinkEl.closest('.nav-bar-tag-and-paths');
   if (tagAndPathEl) {
-    const isExpanded = tagAndPathEl.classList.contains('expanded');
-    if (isExpanded && (action === 'toggle' || action === 'collapse')) {
-      tagAndPathEl.classList.replace('expanded', 'collapsed');
-    } else if (!isExpanded && (action === 'toggle' || action === 'expand')) {
-      tagAndPathEl.classList.replace('collapsed', 'expanded');
+    const expand = tagAndPathEl.classList.contains('collapsed') && action === 'toggle' || action === 'expand';
+    if (expand) {
+      tagAndPathEl.classList.remove('collapsed');
+      tagAndPathEl.classList.add('expanded');
+    } else {
+      tagAndPathEl.classList.remove('expanded');
+      tagAndPathEl.classList.add('collapsed');
     }
   }
 }
@@ -18,11 +20,11 @@ export function expandCollapseAll(navEl, action = 'expand-all') {
   const elList = [...navEl.querySelectorAll('.nav-bar-tag-and-paths')];
   if (action === 'expand-all') {
     elList.map((el) => {
-      el.classList.replace('collapsed', 'expanded');
+      expandCollapseNavBarTag(el, 'expand');
     });
   } else {
     elList.map((el) => {
-      el.classList.replace('expanded', 'collapsed');
+      expandCollapseNavBarTag(el, 'collapse');
     });
   }
 }

package/src/templates/overview-template.js

@@ -16,7 +16,7 @@ export default function overviewTemplate() {
       ${this.resolvedSpec && this.resolvedSpec.info
         ? html`
           <slot name="overview">
-            <div id="api-title" part="label-overview-title" style="font-size:32px">
+            <div id="api-title" part="label-overview-title" style="font-size:32px;" class="section-padding">
               ${this.resolvedSpec.info.title}
               ${!this.resolvedSpec.info.version ? '' : html`
                 <span style = 'font-size:var(--font-size-small);font-weight:bold'>
@@ -24,7 +24,7 @@ export default function overviewTemplate() {
                 </span>`
               }
             </div>
-            <div id="api-info" style="font-size:calc(var(--font-size-regular) - 1px); margin-top:8px;">
+            <div id="api-info" style="font-size:calc(var(--font-size-regular) - 1px); margin-top:8px;" class="section-padding">
               ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.email
                 ? html`<span>${this.resolvedSpec.info.contact.name || 'Email'}: 
                   <a href="mailto:${this.resolvedSpec.info.contact.email}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.email}</a>
@@ -53,7 +53,7 @@ export default function overviewTemplate() {
           ${this.resolvedSpec.info.description
             ? html`${
               unsafeHTML(`
-                <div class="m-markdown regular-font">
+                <div class="m-markdown regular-font section-padding">
                 ${marked(this.resolvedSpec.info.description, this.infoDescriptionHeadingsInNavBar === 'true' ? { renderer: headingRenderer() } : undefined)}
               </div>`)}`
             : ''

package/src/templates/security-scheme-template.js

@@ -284,101 +284,103 @@ export default function securitySchemeTemplate() {
   return html`
   <section id='auth' part="section-auth" class = 'observe-me ${this.renderStyle === 'read' ? 'section-gap--read-mode' : (this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap')}'>
     <slot name="authentication">
-      <div class='sub-title regular-font'> AUTHENTICATION </div>
-      <div class="small-font-size" style="display:flex; align-items: center; min-height:30px">
-        ${providedApiKeys.length > 0
-          ? html`
-            <div class="blue-text"> ${providedApiKeys.length} API key applied </div>
-            <div style="flex:1"></div>
-            <button class="m-btn thin-border" part="btn btn-outline" @click=${() => { onClearAllApiKeys.call(this); }}>CLEAR ALL API KEYS</button>`
-          : html`<div class="red-text">No API key applied</div>`
-        }
-      </div>
-      ${schemes.length > 0
-        ? html`  
-          <table class='m-table' style = "width:100%">
-            ${schemes.map((v) => html`
-              <tr>  
-                <td style="max-width:500px; overflow-wrap: break-word;">
-                  <div style="min-height:24px"> 
-                    <span style="font-weight:bold">${v.typeDisplay}</span> 
-                    ${v.finalKeyValue
+      <div class="section-padding">
+        <div class='sub-title regular-font'>AUTHENTICATION</div>
+        <div class="small-font-size" style="display:flex; align-items: center; min-height:30px">
+          ${providedApiKeys.length > 0
+            ? html`
+              <div class="blue-text"> ${providedApiKeys.length} API key applied </div>
+              <div style="flex:1"></div>
+              <button class="m-btn thin-border" part="btn btn-outline" @click=${() => { onClearAllApiKeys.call(this); }}>CLEAR ALL API KEYS</button>`
+            : html`<div class="red-text">No API key applied</div>`
+          }
+        </div>
+        ${schemes.length > 0
+          ? html`  
+            <table class='m-table' style = "width:100%">
+              ${schemes.map((v) => html`
+                <tr>  
+                  <td style="max-width:500px; overflow-wrap: break-word;">
+                    <div style="min-height:24px"> 
+                      <span style="font-weight:bold">${v.typeDisplay}</span> 
+                      ${v.finalKeyValue
+                        ? html`
+                          <span class='blue-text'>  ${v.finalKeyValue ? 'Key Applied' : ''} </span> 
+                          <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { v.finalKeyValue = ''; this.requestUpdate(); }}>REMOVE</button>
+                          `
+                        : ''
+                      }
+                    </div>
+                    ${v.description
                       ? html`
-                        <span class='blue-text'>  ${v.finalKeyValue ? 'Key Applied' : ''} </span> 
-                        <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { v.finalKeyValue = ''; this.requestUpdate(); }}>REMOVE</button>
-                        `
+                        <div class="m-markdown"> 
+                          ${unsafeHTML(marked(v.description || ''))}
+                        </div>`
                       : ''
                     }
-                  </div>
-                  ${v.description
-                    ? html`
-                      <div class="m-markdown"> 
-                        ${unsafeHTML(marked(v.description || ''))}
-                      </div>`
-                    : ''
-                  }
-                </td>
-                <td>
-                  ${v.type && (v.type.toLowerCase() === 'apikey' || v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'bearer')
-                    ? html`
-                      ${v.type.toLowerCase() === 'apikey'
-                        ? html`Send <code>${v.name}</code> in <code>${v.in}</code> with the given value:`
-                        : html`Send <code>Authorization</code> in <code>header</code> containing the word <code>Bearer</code> followed by a space and a Token String.`
-                      }
-                      <div style="display:flex;">
-                        ${v.in === 'cookie'
-                          ? html`
-                          <div style="display: block">
-                            <input type="text" value="${getCookieValue(v.apiKeyId)}" disabled class="api-key-input" placeholder="IygRVGf54B59e0GAkKmigGfuiVlp/uhFfk2ifA+jMMJzau2F1jPldc09gPTfnMw13BFBxqUZIFDm55DPfwkb0A==" spellcheck = "false" style="resize: horizontal; width: 100%">
-                            <br>
-                            <small>
-                              <strong>Cookies</strong>&nbsp;are set and configured by the remote service, therefore it is not possible to configure them from the browser.
-                            </small>
-                          </div>`
-                          : html`
-                            <input type = "text" value = "${v.value}" class="api-key-input" placeholder = "api-token" spellcheck = "false">
-                            <button class="m-btn thin-border" style = "margin-left:5px;"
-                              part = "btn btn-outline"
-                              @click="${(e) => { onApiKeyChange.call(this, v.apiKeyId, e); }}"> 
-                              ${v.finalKeyValue ? 'UPDATE' : 'SET'}
-                            </button>`
+                  </td>
+                  <td>
+                    ${v.type && (v.type.toLowerCase() === 'apikey' || v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'bearer')
+                      ? html`
+                        ${v.type.toLowerCase() === 'apikey'
+                          ? html`Send <code>${v.name}</code> in <code>${v.in}</code> with the given value:`
+                          : html`Send <code>Authorization</code> in <code>header</code> containing the word <code>Bearer</code> followed by a space and a Token String.`
                         }
-                      </div>`
-                    : ''
-                  }
-                  ${v.type && v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'basic'
-                    ? html`
-                      Send the <code>Authorization</code> header containing the type <code>Basic</code> followed by a space and a base64 encoded string of <code>username:password</code>.
-                      <div style="display:flex;">
-                        <input type="text" value = "${v.user}" placeholder="username" spellcheck="false" class="api-key-user" style="width:100px">
-                        <input type="password" value = "${v.password}" placeholder="password" spellcheck="false" class="api-key-password" style = "width:100px; margin:0 5px;">
-                        <button class="m-btn thin-border"
-                          @click="${(e) => { onApiKeyChange.call(this, v.apiKeyId, e); }}"
-                          part = "btn btn-outline"
-                        > 
-                          ${v.finalKeyValue ? 'UPDATE' : 'SET'}
-                        </button>
-                      </div>`
-                    : ''
-                  }
-                </td>
-              </tr>
-              ${v.type.toLowerCase() === 'oauth2'
-                ? html`
-                  <tr>
-                    <td colspan="2" style="border:none; padding-left:48px">
-                      ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(
-                        this, f, v['x-client-id'], v['x-client-secret'], v.apiKeyId, v.flows[f],
-                      ))} 
-                    </td>
-                  </tr>    
-                  `
-                : ''
-              }    
-            `)}
-          </table>`
-        : ''
-      }
+                        <div style="display:flex;">
+                          ${v.in === 'cookie'
+                            ? html`
+                            <div style="display: block">
+                              <input type="text" value="${getCookieValue(v.apiKeyId)}" disabled class="api-key-input" placeholder="IygRVGf54B59e0GAkKmigGfuiVlp/uhFfk2ifA+jMMJzau2F1jPldc09gPTfnMw13BFBxqUZIFDm55DPfwkb0A==" spellcheck = "false" style="resize: horizontal; width: 100%">
+                              <br>
+                              <small>
+                                <strong>Cookies</strong>&nbsp;are set and configured by the remote service, therefore it is not possible to configure them from the browser.
+                              </small>
+                            </div>`
+                            : html`
+                              <input type = "text" value = "${v.value}" class="api-key-input" placeholder = "api-token" spellcheck = "false">
+                              <button class="m-btn thin-border" style = "margin-left:5px;"
+                                part = "btn btn-outline"
+                                @click="${(e) => { onApiKeyChange.call(this, v.apiKeyId, e); }}"> 
+                                ${v.finalKeyValue ? 'UPDATE' : 'SET'}
+                              </button>`
+                          }
+                        </div>`
+                      : ''
+                    }
+                    ${v.type && v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'basic'
+                      ? html`
+                        Send the <code>Authorization</code> header containing the type <code>Basic</code> followed by a space and a base64 encoded string of <code>username:password</code>.
+                        <div style="display:flex;">
+                          <input type="text" value = "${v.user}" placeholder="username" spellcheck="false" class="api-key-user" style="width:100px">
+                          <input type="password" value = "${v.password}" placeholder="password" spellcheck="false" class="api-key-password" style = "width:100px; margin:0 5px;">
+                          <button class="m-btn thin-border"
+                            @click="${(e) => { onApiKeyChange.call(this, v.apiKeyId, e); }}"
+                            part = "btn btn-outline"
+                          > 
+                            ${v.finalKeyValue ? 'UPDATE' : 'SET'}
+                          </button>
+                        </div>`
+                      : ''
+                    }
+                  </td>
+                </tr>
+                ${v.type.toLowerCase() === 'oauth2'
+                  ? html`
+                    <tr>
+                      <td colspan="2" style="border:none; padding-left:48px">
+                        ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(
+                          this, f, v['x-client-id'], v['x-client-secret'], v.apiKeyId, v.flows[f],
+                        ))} 
+                      </td>
+                    </tr>    
+                    `
+                  : ''
+                }    
+              `)}
+            </table>`
+          : ''
+        }
+      </div>
     </slot>
   </section>
 `;

package/src/templates/server-template.js

@@ -77,7 +77,7 @@ export default function serverTemplate() {
     return undefined;
   }
   return html`
-  <section id = 'servers' part="section-servers" style="margin-top:24px; margin-bottom:24px;" class='regular-font observe-me ${this.renderStyle === 'read' ? 'section-gap--read-mode' : (this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap')}'>
+  <section id = 'servers' part="section-servers" style="margin-top:24px; margin-bottom:24px;" class='regular-font observe-me section-padding ${this.renderStyle === 'read' ? 'section-gap--read-mode' : (this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap')}'>
     <div class = 'sub-title'>API SERVER</div>
     <div class = 'mono-font' style='margin: 12px 0; font-size:calc(var(--font-size-small) + 1px);'>
       ${!this.resolvedSpec.servers || !this.resolvedSpec.servers.length

package/src/utils/common-utils.js

@@ -136,7 +136,7 @@ export function getCurrentElement() {
 }
 
 export function replaceState(rawElementId) {
-  const elementId = rawElementId.replace(/^#/, '');
+  const elementId = rawElementId && rawElementId.replace(/^#/, '') || '';
 
   const currentNavigationHashPart = (window.location.hash || '').split('?')[0].replace(/^#/, '');
   const currentQuery = (window.location.hash || '').split('?')[1];

package/src/utils/schema-utils.js

@@ -631,7 +631,8 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
 }
 
 /* Create Example object */
-export function generateExample(examples, example, schema, mimeType, includeReadOnly = true, includeWriteOnly = true, outputType) {
+export function generateExample(examples, example, schema, rawMimeType, includeReadOnly = true, includeWriteOnly = true, outputType) {
+  const mimeType = rawMimeType || 'application/json';
   const finalExamples = [];
   // First check if examples is provided
   if (examples) {

package/src/utils/spec-parser.js

@@ -281,6 +281,18 @@ function groupByTags(openApiSpec, generateMissingTags = false) {
             finalParameters = pathOrHookObj.parameters ? pathOrHookObj.parameters.slice(0) : [];
           }
 
+          // Remove bad callbacks
+          if (pathOrHookObj.callbacks) {
+            for (const [callbackName, callbackConfig] of Object.entries(pathOrHookObj.callbacks)) {
+              const originalCallbackEntries = Object.entries(callbackConfig);
+              const filteredCallbacks = originalCallbackEntries.filter((entry) => typeof entry[1] === 'object') || [];
+              pathOrHookObj.callbacks[callbackName] = Object.fromEntries(filteredCallbacks);
+              if (filteredCallbacks.length !== originalCallbackEntries.length) {
+                console.warn(`OpenAPI Explorer: Invalid Callback found in ${callbackName}`); // eslint-disable-line no-console
+              }
+            }
+          }
+
           // Update Responses
           tagObj.paths.push({
             show: true,