rapidoc 9.3.6 → 9.3.7

package/src/templates/endpoint-template.js

@@ -6,7 +6,7 @@ import '~/components/api-response';
 import codeSamplesTemplate from '~/templates/code-samples-template';
 import callbackTemplate from '~/templates/callback-template';
 import { pathSecurityTemplate } from '~/templates/security-scheme-template';
-import { pathIsInSearch, rapidocApiKey } from '~/utils/common-utils';
+import { getMatchedPaths, rapidocApiKey } from '~/utils/common-utils';
 
 function toggleExpand(path) {
   if (path.expanded) {
@@ -91,7 +91,7 @@ function endpointBodyTemplate(path) {
   <div part="section-endpoint-body-${path.expanded ? 'expanded' : 'collapsed'}" class='endpoint-body ${path.method} ${path.deprecated ? 'deprecated' : ''}'>
     <div class="summary">
       ${path.summary
-        ? html`<div class="title" part="section-endpoint-body-title">${path.summary}<div>`
+        ? html`<div class="title" part="section-endpoint-body-title">${path.summary}</div>`
         : path.shortSummary !== path.description
           ? html`<div class="title" part="section-endpoint-body-title">${path.shortSummary}</div>`
           : ''
@@ -100,7 +100,9 @@ function endpointBodyTemplate(path) {
         ? html`
           <div style="display:flex; flex-wrap:wrap;font-size: var(--font-size-small);">
             ${path.xBadges.map((v) => (
-                html`<span part="endpoint-badge" style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
+                v.color === 'none'
+                  ? ''
+                  : html`<span part="endpoint-badge" style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
               ))
             }
           </div>
@@ -138,7 +140,7 @@ function endpointBodyTemplate(path) {
           .request_body = "${path.requestBody}"
           .api_keys = "${nonEmptyApiKeys}"
           .servers = "${path.servers}" 
-          server-url = "${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" 
+          server-url = "${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer?.computedUrl}" 
           active-schema-tab = "${this.defaultSchemaTab}"
           fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
           allow-try = "${this.allowTry}"
@@ -182,11 +184,12 @@ function endpointBodyTemplate(path) {
   </div>`;
 }
 
-export default function endpointTemplate(showExpandCollapse = true, showTags = true, pathsExpanded = false) {
+export default function endpointTemplate(isMini = false, pathsExpanded = false) {
   if (!this.resolvedSpec) { return ''; }
   return html`
-    ${showExpandCollapse
-      ? html`
+    ${isMini
+      ? ''
+      : html`
         <div style="display:flex; justify-content:flex-end;"> 
           <span @click="${(e) => onExpandCollapseAll(e, 'expand-all')}" style="color:var(--primary-color); cursor:pointer;">
             Expand all
@@ -197,11 +200,25 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
           </span> 
           &nbsp; sections
         </div>`
-      : ''
     }
     ${this.resolvedSpec.tags.map((tag) => html`
-      ${showTags
-        ? html` 
+      ${isMini
+        ? html`
+          <div class='section-tag-body'>
+          ${tag.paths.filter((path) => {
+            if (this.searchVal) {
+              return getMatchedPaths(this.searchVal, path, tag.name);
+            }
+            return true;
+            }).map((path) => html`
+            <section id='${path.elementId}' class='m-endpoint regular-font ${path.method} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
+              ${endpointHeadTemplate.call(this, path, pathsExpanded)}      
+              ${pathsExpanded || path.expanded ? endpointBodyTemplate.call(this, path) : ''}
+            </section>`)
+          }
+          </div>
+        `
+        : 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 id='${tag.elementId}' class="sub-title tag" style="color:var(--primary-color)">${tag.displayName || tag.name}</div>
@@ -212,8 +229,8 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
                 ${unsafeHTML(marked(tag.description || ''))}
               </div>
               ${tag.paths.filter((v) => {
-                if (this.matchPaths) {
-                  return pathIsInSearch(this.matchPaths, v, this.matchType);
+                if (this.searchVal) {
+                  return getMatchedPaths(this.searchVal, v, tag.name);
                 }
                 return true;
                 }).map((path) => html`
@@ -223,20 +240,6 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
                 </section>`)
               }
             </div>
-          </div>`
-        : html`
-          <div class='section-tag-body'>
-          ${tag.paths.filter((v) => {
-            if (this.matchPaths) {
-              return pathIsInSearch(this.matchPaths, v, this.matchType);
-            }
-            return true;
-            }).map((path) => html`
-            <section id='${path.elementId}' class='m-endpoint regular-font ${path.method} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
-              ${endpointHeadTemplate.call(this, path, pathsExpanded)}      
-              ${pathsExpanded || path.expanded ? endpointBodyTemplate.call(this, path) : ''}
-            </section>`)
-          }
           </div>
         `
       }

package/src/templates/expanded-endpoint-template.js

@@ -80,7 +80,9 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
           ? html`
             <div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
               ${path.xBadges.map((v) => (
-                  html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
+                v.color === 'none'
+                  ? ''
+                  : html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
                 ))
               }
             </div>
@@ -126,7 +128,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
           .request_body = "${path.requestBody}"
           .api_keys = "${nonEmptyApiKeys}"
           .servers = "${path.servers}"
-          server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
+          server-url = "${path.servers?.[0]?.url || this.selectedServer?.computedUrl}"
           fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
           allow-try = "${this.allowTry}"
           show-curl-before-try = "${this.showCurlBeforeTry}"

package/src/templates/json-schema-viewer-template.js

@@ -5,7 +5,7 @@ import { marked } from 'marked';
 // Templates
 import overviewTemplate from '~/templates/overview-template';
 import headerTemplate from '~/templates/header-template';
-import { schemaInObjectNotation, generateExample } from '~/utils/schema-utils';
+import { schemaInObjectNotation, generateExample, standardizeExample } from '~/utils/schema-utils';
 import '~/components/json-tree';
 import '~/components/schema-tree';
 import SetTheme from '~/utils/theme';
@@ -49,7 +49,7 @@ function jsonSchemaBodyTemplate() {
     ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
     <div style="font-size:var(--font-size-regular);">
     ${this.resolvedSpec.schemaAndExamples.map((jSchemaBody) => {
-      const examplesObj = generateExample(jSchemaBody.schema, 'json', jSchemaBody.examples, jSchemaBody.example, true, false, 'json', true);
+      const examplesObj = generateExample(jSchemaBody.schema, 'json', standardizeExample(jSchemaBody.examples), standardizeExample(jSchemaBody.example), true, false, 'json', true);
       jSchemaBody.selectedExample = examplesObj[0]?.exampleId;
       return html`
         <section id='${jSchemaBody.elementId}' class='json-schema-and-example regular-font' style="display:flex; flex-direction: column; border:1px solid var(--border-color); margin-bottom:32px; border-top: 5px solid var(--border-color)">
@@ -99,7 +99,7 @@ function jsonSchemaBodyTemplate() {
 
 // Json Schema Root Template
 export default function jsonSchemaViewerTemplate(isMini = false) {
-// export default function jsonSchemaViewerTemplate(isMini = false, showExpandCollapse = true, showTags = true, pathsExpanded = false) {
+// export default function jsonSchemaViewerTemplate(isMini = false, pathsExpanded = false) {
   if (!this.resolvedSpec) {
     return '';
   }

package/src/templates/main-body-template.js

@@ -13,7 +13,7 @@ import advancedSearchTemplate from '~/templates/advance-search-template';
 import SetTheme from '~/utils/theme';
 import { isValidHexColor } from '~/utils/color-utils';
 
-export default function mainBodyTemplate(isMini = false, showExpandCollapse = true, showTags = true, pathsExpanded = false) {
+export default function mainBodyTemplate(isMini = false, pathsExpanded = false) {
   if (!this.resolvedSpec) {
     return '';
   }
@@ -104,7 +104,7 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
                       </div>  
                       ${this.renderStyle === 'read'
                         ? expandedEndpointTemplate.call(this)
-                        : endpointTemplate.call(this, showExpandCollapse, showTags, pathsExpanded)
+                        : endpointTemplate.call(this, isMini, pathsExpanded)
                       }
                     `
                   }

package/src/templates/navbar-template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { marked } from 'marked';
-import { pathIsInSearch } from '~/utils/common-utils';
+import { getMatchedPaths } from '~/utils/common-utils';
 
 export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
   const tagAndPathEl = navLinkEl?.closest('.nav-bar-tag-and-paths');
@@ -82,7 +82,7 @@ export default function navbarTemplate() {
                 >
                 <div style='margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;'>&#x21a9;</div>
               </div>  
-              ${this.matchPaths
+              ${this.searchVal
                 ? html`
                   <button @click = '${this.onClearSearch}' class='m-btn thin-border' style='margin-left:5px; color:var(--nav-text-color); width:75px; padding:6px 8px;' part='btn btn-outline btn-clear-filter'>
                     CLEAR
@@ -91,7 +91,7 @@ export default function navbarTemplate() {
               }
             `
           }
-          ${this.allowAdvancedSearch === 'false' || this.matchPaths
+          ${this.allowAdvancedSearch === 'false' || this.searchVal
             ? ''
             : html`
               <button class='m-btn primary' part='btn btn-fill btn-search' style='margin-left:5px; padding:6px 8px; width:75px' @click='${this.onShowSearchModalClicked}'>
@@ -166,7 +166,7 @@ export default function navbarTemplate() {
 
       <!-- TAGS AND PATHS-->
       ${this.resolvedSpec.tags
-        .filter((tag) => tag.paths.filter((path) => pathIsInSearch(this.matchPaths, path, this.matchType)).length)
+        .filter((tag) => tag.paths.filter((path) => getMatchedPaths(this.searchVal, path, tag.name)).length)
         .map((tag) => html`
           <div class='nav-bar-tag-and-paths ${(this.renderStyle === 'read' ? 'expanded' : (tag.expanded ? 'expanded' : 'collapsed'))}' >
             ${tag.name === 'General ⦂'
@@ -208,8 +208,8 @@ export default function navbarTemplate() {
             <div class='nav-bar-paths-under-tag' style='max-height:${(tag.expanded || this.renderStyle === 'read') ? ((tag.paths?.length || 1) * 50) : 0}px;'>
               <!-- Paths in each tag (endpoints) -->
               ${tag.paths.filter((v) => {
-                if (this.matchPaths) {
-                  return pathIsInSearch(this.matchPaths, v, this.matchType);
+                if (this.searchVal) {
+                  return getMatchedPaths(this.searchVal, v, tag.name);
                 }
                 return true;
               }).map((p) => html`

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

@@ -134,7 +134,7 @@ async function fetchAccessToken(tokenUrl, clientId, clientSecret, redirectUrl, g
       }
       return false;
     }
-  } catch (err) {
+  } catch {
     if (respDisplayEl) {
       respDisplayEl.innerHTML = '<span style="color:var(--red)">Failed to get access token</span>';
     }
@@ -261,7 +261,7 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
   const pkceOnly = authFlow['x-pkce-only'] || false;
   const isUrlAbsolute = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0);
   // Calculcate base URL
-  const url = new URL(this.selectedServer.computedUrl);
+  const url = new URL(this.selectedServer?.computedUrl);
   const baseUrl = url.origin;
 
   if (refreshUrl && !isUrlAbsolute(refreshUrl)) {
@@ -322,8 +322,8 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
           ${flowName === 'password'
             ? html`
               <div style="margin:5px 0">
-                <input type="text" value = "" placeholder="username" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-user" part="textbox textbox-username">
-                <input type="password" value = "" placeholder="password" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-password" style = "margin:0 5px;" part="textbox textbox-password">
+                <input type="text" value = "" placeholder="username" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-user" part="textbox textbox-username" id="input-${securitySchemeId}-${flowName}-api-key-user">
+                <input type="password" value = "" placeholder="password" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-password" style = "margin:0 5px;" part="textbox textbox-password" id="input-${securitySchemeId}-${flowName}-api-key-password">
               </div>`
             : ''
           }
@@ -343,6 +343,7 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
             ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'password'
               ? html`
                 <input
+                  id="${securitySchemeId}-${flowName}-oauth-client-secret"
                   type="password" part="textbox textbox-auth-client-secret"
                   value = "${clientSecret || ''}" placeholder="client-secret" spellcheck="false"
                   class="oauth2 ${flowName} ${securitySchemeId}
@@ -439,7 +440,7 @@ export default function securitySchemeTemplate() {
                     <div style="max-height:28px;">
                       ${v.in !== 'cookie'
                         ? html`
-                          <input type = "text" value = "${v.value}" class="${v.type} ${v.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false">
+                          <input type = "text" value = "${v.value}" class="${v.type} ${v.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false" id = "${v.type}-${v.securitySchemeId}-api-key-input">
                           <button class="m-btn thin-border" style = "margin-left:5px;"
                             part = "btn btn-outline"
                             @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}">
@@ -456,8 +457,8 @@ export default function securitySchemeTemplate() {
                       Send <code>Authorization</code> in <code>header</code> containing the word <code>Basic</code> followed by a space and a base64 encoded string of <code>username:password</code>.
                     </div>
                     <div>
-                      <input type="text" value = "${v.user}" placeholder="username" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-user" style="width:100px">
-                      <input type="password" value = "${v.password}" placeholder="password" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-password" style = "width:100px; margin:0 5px;">
+                      <input type="text" value = "${v.user}" placeholder="username" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-user" style="width:100px" id = "input-${v.type}-${v.securitySchemeId}-api-key-user">
+                      <input type="password" value = "${v.password}" placeholder="password" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-password" style = "width:100px; margin:0 5px;" id = "input-${v.type}-${v.securitySchemeId}-api-key-password">
                       <button class="m-btn thin-border"
                         @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}"
                         part = "btn btn-outline"
@@ -600,6 +601,7 @@ export function pathSecurityTemplate(pathSecurity) {
         `)
         }
       </div>
+      </div>
     `;
   }
   return '';

package/src/utils/common-utils.js

@@ -49,17 +49,13 @@ export async function wait(ms) {
   });
 }
 
-export function componentIsInSearch(searchVal, component) {
+export function getMatchedComponents(searchVal, component) {
   return component.name.toLowerCase().includes(searchVal.toLowerCase());
 }
 
-export function pathIsInSearch(searchVal, path, matchType = 'includes') {
-  if (matchType === 'includes') {
-    const stringToSearch = `${path.method} ${path.path} ${path.summary || ''} ${path.description || ''} ${path.operationId || ''}`.toLowerCase();
-    return stringToSearch.includes(searchVal.toLowerCase());
-  }
-  const regex = new RegExp(searchVal, 'i');
-  return regex.test(`${path.method} ${path.path}`);
+export function getMatchedPaths(searchVal, path, tagName = '') {
+  const stringToSearch = `${path.method} ${path.path} ${path.summary || ''} ${path.description || ''} ${path.operationId || ''} ${tagName}`.toLowerCase();
+  return stringToSearch.includes(searchVal.toLowerCase());
 }
 
 export function schemaKeys(schemaProps, result = new Set()) {
@@ -90,7 +86,7 @@ export function advancedSearch(searchVal, allSpecTags, searchOptions = []) {
         stringToSearch = path.path;
       }
       if (searchOptions.includes('search-api-descr')) {
-        stringToSearch = `${stringToSearch} ${path.summary || path.description || ''}`;
+        stringToSearch = `${stringToSearch} ${(path.summary || '') + (path.description || '')}`;
       }
       if (searchOptions.includes('search-api-params')) {
         stringToSearch = `${stringToSearch} ${path.parameters?.map((v) => v.name).join(' ') || ''}`;

package/src/utils/schema-utils.js

@@ -120,18 +120,67 @@ export function getTypeInfo(schema) {
   return info;
 }
 
-export function nestExampleIfPresent(example) {
-  if (typeof example === 'boolean' || typeof example === 'number') {
-    return {
-      Example: { value: `${example}` },
-    };
-  }
-  if (example === '') {
-    return {
-      Example: { value: '' },
-    };
+/**
+ *
+ * @param {*} ex  if the value
+ *  - Is an Object with 'value' property  like
+ *      { 'value': 'example_val1', 'description': 'some description' }
+ *    Returns >>>
+ *      {
+ *        'Example': { 'value' : 'example_val1', 'description': 'some description' },
+ *      }
+ *  - Is an object where each key represents a valid example object (i,e has a value property)
+ *      {
+ *        'example1': { 'value' : 'example_val1', 'description': 'some description' },
+ *        'example2': { 'value' : 'example_val2', 'description': 'some other description' },
+ *        'invalid':  { 'description': 'invalid example object without any value property' }
+ *      }
+ *    Returns >>>
+ *      {
+ *        'example1': { 'value' : 'example_val1', 'description': 'some description' },
+ *        'example2': { 'value' : 'example_val2', 'description': 'some other description' }
+ *      }
+ *      if none of the keys represents an object with 'value' property then return undefined
+ *  - Is an array of premitive values
+ *      ['example_val1', 'example_val2']
+ *    Returns >>>
+ *      {
+ *         'Example1': {value:'value1'}
+ *         'Example2': {value:'value2'}
+ *      }
+ *  - Is a premitive value
+ *      'example_val1'
+ *    Returns >>>
+ *      {
+ *        'Example': { 'value': 'example_val1' }
+ *      }
+ *  - Is undefined
+ *    returns undefined
+ * @returns
+ */
+
+export function standardizeExample(ex) {
+  if (typeof ex === 'object' && !Array.isArray(ex)) {
+    if (ex.value !== undefined) {
+      // Case 1: Single object with 'value' property
+      return { Example: { ...ex } };
+    }
+    // Case 2: Object where each key is an object with a 'value' property
+    const filteredEntries = Object.entries(ex).filter(([_, obj]) => obj.value !== undefined); // eslint-disable-line
+    // If no valid entries found, return JSON.stringify of the input
+    if (filteredEntries.length === 0) {
+      return undefined;
+    }
+    return Object.fromEntries(filteredEntries);
+  } if (Array.isArray(ex)) {
+    // Case 3: Array of primitive values
+    return ex.reduce((acc, value, index) => {
+      acc[`Example${index + 1}`] = { value };
+      return acc;
+    }, {});
   }
-  return example ? { Example: { value: example } } : example;
+  // Case 4: Single primitive value
+  return ex ? { Example: { value: ex } } : undefined;
 }
 
 /**
@@ -268,7 +317,7 @@ export function getSampleValueByType(schemaObj) {
     if (schemaObj.pattern) {
       try {
         return new RandExp(schemaObj.pattern).gen();
-      } catch (error) {
+      } catch {
         return schemaObj.pattern;
       }
     }
@@ -297,7 +346,7 @@ export function getSampleValueByType(schemaObj) {
         case 'ipv6':
           return '2001:0db8:5b96:0000:0000:426f:8e17:642a';
         case 'uuid':
-          return [u.substr(0, 8), u.substr(8, 4), `4000-8${u.substr(13, 3)}`, u.substr(16, 12)].join('-');
+          return [u.substring(0, 8), u.substring(8, 12), `4000-8${u.substring(13, 16)}`, u.substring(16, 28)].join('-');
         case 'byte':
           return 'ZXhhbXBsZQ=='; // 'example' base64 encoded. See https://spec.openapis.org/oas/v3.0.0#data-types
         default:
@@ -857,7 +906,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
 }
 
 /* Create Example object */
-export function generateExample(schema, mimeType, examples = '', example = '', includeReadOnly = true, includeWriteOnly = true, outputType = 'json', includeGeneratedExample = false) {
+export function generateExample(schema, mimeType, examples = {}, example = {}, includeReadOnly = true, includeWriteOnly = true, outputType = 'json', includeGeneratedExample = false) {
   const finalExamples = [];
   // First check if examples is provided
   if (examples) {
@@ -876,7 +925,7 @@ export function generateExample(schema, mimeType, examples = '', example = '', i
               const fixedJsonString = examples[eg].value;
               egContent = JSON.parse(fixedJsonString);
               egFormat = 'json';
-            } catch (err) {
+            } catch {
               egFormat = 'text';
               egContent = examples[eg].value;
             }
@@ -910,7 +959,7 @@ export function generateExample(schema, mimeType, examples = '', example = '', i
         try {
           egContent = JSON.parse(example);
           egFormat = 'json';
-        } catch (err) {
+        } catch {
           egFormat = 'text';
           egContent = example;
         }

package/src/utils/spec-parser.js

@@ -3,8 +3,22 @@ import OpenApiParser from '@apitools/openapi-parser';
 import { marked } from 'marked';
 import { invalidCharsRegEx, rapidocApiKey, sleep } from '~/utils/common-utils';
 
-export default async function ProcessSpec(specUrl, generateMissingTags = false, sortTags = false, sortSchemas = false, sortEndpointsBy = '', attrApiKey = '', attrApiKeyLocation = '', attrApiKeyValue = '', serverUrl = '') {
+export default async function ProcessSpec(
+  specUrl,
+  generateMissingTags = false,
+  sortTags = false,
+  sortSchemas = false,
+  sortEndpointsBy = '',
+  attrApiKey = '',
+  attrApiKeyLocation = '',
+  attrApiKeyValue = '',
+  serverUrl = '',
+  matchPaths = '',
+  matchType = '',
+  removeEndpointsWithBadgeLabelAs = '',
+) {
   let jsonParsedSpec;
+
   try {
     this.requestUpdate(); // important to show the initial loader
     let specMeta;
@@ -15,7 +29,7 @@ export default async function ProcessSpec(specUrl, generateMissingTags = false,
     }
     await sleep(0); // important to show the initial loader (allows for rendering updates)
 
-    // If  JSON Schema Viewer
+    // If JSON Schema Viewer
     if (specMeta.resolvedSpec?.jsonSchemaViewer && specMeta.resolvedSpec?.schemaAndExamples) {
       this.dispatchEvent(new CustomEvent('before-render', { detail: { spec: specMeta.resolvedSpec } }));
       const schemaAndExamples = Object.entries(specMeta.resolvedSpec.schemaAndExamples).map((v) => ({ show: true, expanded: true, selectedExample: null, name: v[0], elementId: v[0].replace(invalidCharsRegEx, '-'), ...v[1] }));
@@ -27,8 +41,10 @@ export default async function ProcessSpec(specUrl, generateMissingTags = false,
       };
       return parsedSpec;
     }
+
+    // If RapiDoc or RapiDocMini
     if (specMeta.spec && (specMeta.spec.components || specMeta.spec.info || specMeta.spec.servers || specMeta.spec.tags || specMeta.spec.paths)) {
-      jsonParsedSpec = specMeta.spec;
+      jsonParsedSpec = filterPaths(specMeta.spec, matchPaths, matchType, removeEndpointsWithBadgeLabelAs);
       this.dispatchEvent(new CustomEvent('before-render', { detail: { spec: jsonParsedSpec } }));
     } else {
       console.info('RapiDoc: %c There was an issue while parsing the spec %o ', 'color:orangered', specMeta); // eslint-disable-line no-console
@@ -112,7 +128,7 @@ export default async function ProcessSpec(specUrl, generateMissingTags = false,
 
   // Servers
   let servers = [];
-  if (jsonParsedSpec.servers && Array.isArray(jsonParsedSpec.servers)) {
+  if (jsonParsedSpec.servers && Array.isArray(jsonParsedSpec.servers) && jsonParsedSpec.servers.length > 0) {
     jsonParsedSpec.servers.forEach((v) => {
       let computedUrl = v.url.trim();
       if (!(computedUrl.startsWith('http') || computedUrl.startsWith('//') || computedUrl.startsWith('{'))) {
@@ -141,7 +157,7 @@ export default async function ProcessSpec(specUrl, generateMissingTags = false,
   } else {
     jsonParsedSpec.servers = [{ url: 'http://localhost', computedUrl: 'http://localhost' }];
   }
-  servers = jsonParsedSpec.servers;
+  servers = jsonParsedSpec.servers; // eslint-disable-line prefer-destructuring
   const parsedSpec = {
     specLoadError: false,
     isSpecLoading: false,
@@ -156,6 +172,60 @@ export default async function ProcessSpec(specUrl, generateMissingTags = false,
   return parsedSpec;
 }
 
+function filterPaths(openApiObject, matchPaths = '', matchType = '', removeEndpointsWithBadgeLabelAs = '') {
+  const filteredPaths = {};
+
+  // Convert the removePathsWithBadgeLabeledAs to an array if provided
+  const labelsToRemove = removeEndpointsWithBadgeLabelAs.split(',').map((label) => label.trim().toLowerCase()).filter(Boolean);
+
+  // Helper function to check if a path should be included based on matchPaths
+  function pathMatches(pathsKey, httpMethod) {
+    if (!matchPaths) {
+      return true; // If no matchPaths provided, include everything
+    }
+    const fullPath = `${httpMethod} ${pathsKey}`.toLowerCase(); // Construct "method path" string
+    if (matchType === 'regex') {
+      const regex = new RegExp(matchPaths, 'i');
+      return regex.test(matchPaths.toLowerCase());
+    }
+    return fullPath.includes(matchPaths.toLowerCase());
+  }
+
+  // Helper function to check if the badges contain any label that needs to be removed
+  function containsLabelToRemove(badges) {
+    return badges.some((badge) => labelsToRemove.includes(badge?.label.toLowerCase()));
+  }
+
+  // Loop through the paths in the openApiObject
+  Object.entries(openApiObject.paths).forEach(([pathsKey, methods]) => {
+    const filteredMethods = {};
+
+    Object.entries(methods).forEach(([httpMethod, methodDetails]) => {
+      const badges = methodDetails['x-badges'];
+
+      // Filter by matchPaths
+      if (pathMatches(pathsKey, httpMethod)) {
+        if (badges && Array.isArray(badges)) {
+          // Filter out based on removePathsWithBadgeLabeledAs
+          if (!containsLabelToRemove(badges)) {
+            filteredMethods[httpMethod] = methodDetails;
+          }
+        } else {
+          // No badges present, include the method
+          filteredMethods[httpMethod] = methodDetails;
+        }
+      }
+    });
+
+    if (Object.keys(filteredMethods).length > 0) {
+      filteredPaths[pathsKey] = filteredMethods;
+    }
+  });
+
+  openApiObject.paths = filteredPaths;
+  return openApiObject;
+}
+
 function getHeadersFromMarkdown(markdownContent) {
   const tokens = marked.lexer(markdownContent);
   const headers = tokens.filter((v) => v.type === 'heading' && v.depth <= 2);
@@ -245,7 +315,7 @@ function getComponents(openApiSpec, sortSchemas = false) {
 
 function groupByTags(openApiSpec, sortEndpointsBy, generateMissingTags = false, sortTags = false) {
   const supportedMethods = ['get', 'put', 'post', 'delete', 'patch', 'head', 'options']; // this is also used for ordering endpoints by methods
-  const tags = openApiSpec.tags && Array.isArray(openApiSpec.tags)
+  const tags = openApiSpec.tags && Array.isArray(openApiSpec.tags) && openApiSpec.tags.length > 0
     ? openApiSpec.tags.map((v) => ({
       show: true,
       elementId: `tag--${v.name.replace(invalidCharsRegEx, '-')}`,
@@ -286,7 +356,7 @@ function groupByTags(openApiSpec, sortEndpointsBy, generateMissingTags = false,
               pathTags.push(pathOrHookNameKey);
             } else {
               // firstWordEndIndex -= 1;
-              pathTags.push(pathOrHookNameKey.substr(0, firstWordEndIndex));
+              pathTags.push(pathOrHookNameKey.substring(0, firstWordEndIndex));
             }
           } else {
             pathTags.push('General ⦂');

package/src/utils/theme.js

@@ -21,8 +21,8 @@ export default function setTheme(baseTheme, theme = {}) {
     const fg3 = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, -20); // or #aaa
     const lightFg = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, -65); // or #777
     const inlineCodeFg = theme.inlineCodeFg ? theme.inlineCodeFg : '#aaa';
-    const selectionBg = '#bbb';
-    const selectionFg = '#eee';
+    const selectionBg = fg2;
+    const selectionFg = bg2;
 
     const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, 10);
 
@@ -107,10 +107,8 @@ export default function setTheme(baseTheme, theme = {}) {
     const fg3 = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, 30); // or #666
     const lightFg = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, 70); // or #999
     const inlineCodeFg = theme.inlineCodeFg ? theme.inlineCodeFg : 'brown';
-
-    const selectionBg = '#444';
-    const selectionFg = '#eee';
-
+    const selectionBg = fg2;
+    const selectionFg = bg2;
     const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, -180);
 
     /*