rapidoc 9.1.0 → 9.1.4

package/src/components/api-request.js

@@ -1,9 +1,10 @@
 import { LitElement, html, css } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import Prism from 'prismjs';
 
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-// import { live } from 'lit-html/directives/live';
+import { guard } from 'lit-html/directives/guard';
+import { live } from 'lit-html/directives/live';
 import TableStyles from '~/styles/table-styles';
 import FlexStyles from '~/styles/flex-styles';
 import InputStyles from '~/styles/input-styles';
@@ -102,6 +103,9 @@ export default class ApiRequest extends LitElement {
           color: var(--fg); 
           font-family: var(--font-mono);
         }
+        .param-name.deprecated { 
+          text-decoration: line-through;
+        }
         .param-type{
           color: var(--light-fg); 
           font-family: var(--font-regular);
@@ -189,11 +193,11 @@ export default class ApiRequest extends LitElement {
         ${this.callback === 'true' ? 'CALLBACK REQUEST' : 'REQUEST'}
       </div>
       <div>
-        ${this.inputParametersTemplate('path')}
-        ${this.inputParametersTemplate('query')}
+        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('path'))}
+        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('query'))}
         ${this.requestBodyTemplate()}
-        ${this.inputParametersTemplate('header')}
-        ${this.inputParametersTemplate('cookie')}
+        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('header'))}
+        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('cookie'))}
         ${this.allowTry === 'false' ? '' : html`${this.apiCallTemplate()}`}
       </div>  
     </div>
@@ -242,7 +246,7 @@ export default class ApiRequest extends LitElement {
               }
             }
           }"
-          >${v.description || v.summary || v.value}</a>
+          >${v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || '')}</a>
           ${paramType === 'array' ? '] ' : ''}
         `)}
       `
@@ -281,6 +285,7 @@ export default class ApiRequest extends LitElement {
       // let exampleList = [];
       let paramStyle = 'form';
       let paramExplode = true;
+      let paramAllowReserved = false;
       if (paramType === 'query') {
         if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {
           paramStyle = param.style;
@@ -290,6 +295,9 @@ export default class ApiRequest extends LitElement {
         if (typeof param.explode === 'boolean') {
           paramExplode = param.explode;
         }
+        if (typeof param.allowReserved === 'boolean') {
+          paramAllowReserved = param.allowReserved;
+        }
       }
 
       // openapi 3.1.0 spec based examples (which must be Object(string : { value:any, summary?: string, description?: string})
@@ -305,13 +313,14 @@ export default class ApiRequest extends LitElement {
       );
       if (!example.exampleVal && paramSchema.type === 'object') {
         example.exampleVal = generateExample(
+          declaredParamSchema,
+          serializeStyle || 'json',
           '',
           '',
-          declaredParamSchema,
-          serializeStyle,
           true,
           true,
           'text',
+          false,
         )[0].exampleValue;
       }
       const labelColWidth = 'read focused'.includes(this.renderStyle) ? '200px' : '160px';
@@ -340,6 +349,7 @@ export default class ApiRequest extends LitElement {
                     data-example = "${Array.isArray(example.exampleVal) ? example.exampleVal.join('~|~') : example.exampleVal}"
                     data-param-serialize-style = "${paramStyle}"
                     data-param-serialize-explode = "${paramExplode}"
+                    data-param-allow-reserved = "${paramAllowReserved}"
                     data-array = "true"
                     placeholder = "add-multiple &#x21a9;"
                     .value = "${Array.isArray(example.exampleVal) ? example.exampleVal : example.exampleVal}"
@@ -368,6 +378,7 @@ export default class ApiRequest extends LitElement {
                             data-example = "${example.exampleVal}"
                             data-param-serialize-style = "${paramStyle}"
                             data-param-serialize-explode = "${paramExplode}"
+                            data-param-allow-reserved = "${paramAllowReserved}"
                             spellcheck = "false"
                             .textContent = "${this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : ''}"
                             style = "resize:vertical; width:100%; height: ${'read focused'.includes(this.renderStyle) ? '180px' : '120px'};"
@@ -383,7 +394,7 @@ export default class ApiRequest extends LitElement {
                               schema-description-expanded = "${this.schemaDescriptionExpanded}"
                               allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
                               schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
-                              schema-hide-write-only = false
+                              schema-hide-write-only = "false"
                             > </schema-tree>
                           </div>`
                         }
@@ -395,8 +406,9 @@ export default class ApiRequest extends LitElement {
                       data-ptype="${paramType}"
                       data-pname="${param.name}" 
                       data-example="${Array.isArray(example.exampleVal) ? example.exampleVal.join('~|~') : example.exampleVal}"
+                      data-param-allow-reserved = "${paramAllowReserved}"
                       data-array="false"
-                      .value="${this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : ''}"
+                      .value="${live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
                     />`
                 }
             </td>`
@@ -531,13 +543,14 @@ export default class ApiRequest extends LitElement {
         // Generate Example
         if (reqBody.mimeType === this.selectedRequestBodyType) {
           reqBodyExamples = generateExample(
-            reqBody.examples,
-            reqBody.example,
             reqBody.schema,
             reqBody.mimeType,
+            reqBody.examples,
+            reqBody.example,
             false,
             true,
             'text',
+            false,
           );
           if (!this.selectedRequestBodyExample) {
             this.selectedRequestBodyExample = (reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '');
@@ -579,9 +592,7 @@ 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)) : ''}"
-                  >
-                  </textarea>
-
+                  ></textarea>
                 </div>  
               `)}
 
@@ -591,19 +602,20 @@ export default class ApiRequest extends LitElement {
       } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
         if (reqBody.mimeType === this.selectedRequestBodyType) {
           const ex = generateExample(
-            reqBody.examples,
-            reqBody.example,
             reqBody.schema,
             reqBody.mimeType,
+            reqBody.examples,
+            reqBody.example,
             false,
             true,
             'text',
+            false,
           );
           if (reqBody.schema) {
             reqBodyFormHtml = this.formDataTemplate(reqBody.schema, reqBody.mimeType, (ex[0] ? ex[0].exampleValue : ''));
           }
         }
-      } else if ((RegExp('^audio/|^image/|^video/|^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$').test(this.selectedRequestBodyType))) {
+      } else if ((/^audio\/|^image\/|^video\/|^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$/.test(this.selectedRequestBodyType))) {
         if (reqBody.mimeType === this.selectedRequestBodyType) {
           reqBodyFileInputHtml = html`
             <div class = "small-font-size bold-text row">
@@ -627,21 +639,21 @@ export default class ApiRequest extends LitElement {
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
               allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
               schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
-              schema-hide-write-only = false
+              schema-hide-write-only = "false"
             > </schema-table>
           `;
         } else if (this.schemaStyle === 'tree') {
           reqBodySchemaHtml = html`
             ${reqBodySchemaHtml}
             <schema-tree
-              class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}'
-              style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'
-              .data = '${schemaAsObj}'
+              class = "${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}"
+              style = "display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};"
+              .data = "${schemaAsObj}"
               schema-expand-level = "${this.schemaExpandLevel}"
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
               allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-              schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
-              schema-hide-write-only = false
+              schema-hide-read-only = "true"
+              schema-hide-write-only = "false"
             > </schema-tree>
           `;
         }
@@ -682,13 +694,14 @@ export default class ApiRequest extends LitElement {
     // This template is used when form-data param should be send as a object (application/json, application/xml)
     const formdataPartSchema = schemaInObjectNotation(fieldSchema, {});
     const formdataPartExample = generateExample(
-      fieldSchema.examples,
-      fieldSchema.example,
       fieldSchema,
       'json',
+      fieldSchema.examples,
+      fieldSchema.example,
       false,
       true,
       'text',
+      false,
     );
 
     return html`
@@ -762,11 +775,8 @@ export default class ApiRequest extends LitElement {
         formDataTableRows.push(html`
         <tr> 
           <td style="width:${labelColWidth}; 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}${(schema.required?.includes(fieldName) || fieldSchema.required) ? html`<span style='color:var(--red);'>*</span>` : ''}
             </div>
             <div class="param-type">${paramSchema.type}</div>
           </td>  
@@ -931,8 +941,7 @@ export default class ApiRequest extends LitElement {
               <pre style="white-space:pre; max-height:400px; overflow:auto">${responseFormat
                 ? html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`
                 : `${this.responseText}`
-              }
-              </pre>
+              }</pre>
             </div>`
         }
         <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
@@ -1053,7 +1062,6 @@ export default class ApiRequest extends LitElement {
     fetchUrl = this.path;
     const fetchOptions = {
       method: this.method.toUpperCase(),
-      headers: {},
     };
     // Generate URL using Path Params
     pathParamEls.map((el) => {
@@ -1061,12 +1069,17 @@ export default class ApiRequest extends LitElement {
     });
 
     // Query Params
-    const urlQueryParam = new URLSearchParams();
+    const urlQueryParamsMap = new Map();
+    const queryParamsWithReservedCharsAllowed = [];
     if (queryParamEls.length > 0) {
       queryParamEls.forEach((el) => {
+        const queryParam = new URLSearchParams();
+        if (el.dataset.paramAllowReserved === 'true') {
+          queryParamsWithReservedCharsAllowed.push(el.dataset.pname);
+        }
         if (el.dataset.array === 'false') {
           if (el.value !== '') {
-            urlQueryParam.append(el.dataset.pname, el.value);
+            queryParam.append(el.dataset.pname, el.value);
           }
         } else {
           const paramSerializeStyle = el.dataset.paramSerializeStyle;
@@ -1075,64 +1088,88 @@ export default class ApiRequest extends LitElement {
           vals = Array.isArray(vals) ? vals.filter((v) => v !== '') : [];
           if (vals.length > 0) {
             if (paramSerializeStyle === 'spaceDelimited') {
-              urlQueryParam.append(el.dataset.pname, vals.join(' ').replace(/^\s|\s$/g, ''));
+              queryParam.append(el.dataset.pname, vals.join(' ').replace(/^\s|\s$/g, ''));
             } else if (paramSerializeStyle === 'pipeDelimited') {
-              urlQueryParam.append(el.dataset.pname, vals.join('|').replace(/^\||\|$/g, ''));
+              queryParam.append(el.dataset.pname, vals.join('|').replace(/^\||\|$/g, ''));
             } else {
               if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if
-                vals.forEach((v) => { urlQueryParam.append(el.dataset.pname, v); });
+                vals.forEach((v) => { queryParam.append(el.dataset.pname, v); });
               } else {
-                urlQueryParam.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));
+                queryParam.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));
               }
             }
           }
         }
+        if (queryParam.toString()) {
+          urlQueryParamsMap.set(el.dataset.pname, queryParam);
+        }
       });
     }
 
     // Query Params (Dynamic - create from JSON)
     if (queryParamObjTypeEls.length > 0) {
       queryParamObjTypeEls.map((el) => {
+        const queryParam = new URLSearchParams();
         try {
           let queryParamObj = {};
           const paramSerializeStyle = el.dataset.paramSerializeStyle;
           const paramSerializeExplode = el.dataset.paramSerializeExplode;
           queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
+          if (el.dataset.paramAllowReserved === 'true') {
+            queryParamsWithReservedCharsAllowed.push(el.dataset.pname);
+          }
           if ('json xml'.includes(paramSerializeStyle)) {
             if (paramSerializeStyle === 'json') {
-              urlQueryParam.append(el.dataset.pname, JSON.stringify(queryParamObj));
+              queryParam.append(el.dataset.pname, JSON.stringify(queryParamObj));
             } else if (paramSerializeStyle === 'xml') {
-              urlQueryParam.append(el.dataset.pname, json2xml(queryParamObj));
+              queryParam.append(el.dataset.pname, json2xml(queryParamObj));
             }
           } else {
             for (const key in queryParamObj) {
               if (typeof queryParamObj[key] === 'object') {
                 if (Array.isArray(queryParamObj[key])) {
                   if (paramSerializeStyle === 'spaceDelimited') {
-                    urlQueryParam.append(key, queryParamObj[key].join(' '));
+                    queryParam.append(key, queryParamObj[key].join(' '));
                   } else if (paramSerializeStyle === 'pipeDelimited') {
-                    urlQueryParam.append(key, queryParamObj[key].join('|'));
+                    queryParam.append(key, queryParamObj[key].join('|'));
                   } else {
                     if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if
                       queryParamObj[key].forEach((v) => {
-                        urlQueryParam.append(key, v);
+                        queryParam.append(key, v);
                       });
                     } else {
-                      urlQueryParam.append(key, queryParamObj[key]);
+                      queryParam.append(key, queryParamObj[key]);
                     }
                   }
                 }
               } else {
-                urlQueryParam.append(key, queryParamObj[key]);
+                queryParam.append(key, queryParamObj[key]);
               }
             }
           }
         } catch (err) {
           console.log('RapiDoc: unable to parse %s into object', el.value); // eslint-disable-line no-console
         }
+        if (queryParam.toString()) {
+          urlQueryParamsMap.set(el.dataset.pname, queryParam);
+        }
+      });
+    }
+    let urlQueryParamString = '';
+    if (urlQueryParamsMap.size) {
+      urlQueryParamString = '?';
+      urlQueryParamsMap.forEach((val, pname) => {
+        if (queryParamsWithReservedCharsAllowed.includes(pname)) {
+          urlQueryParamString += `${pname}=`;
+          urlQueryParamString += val.getAll(pname).join(`&${pname}=`);
+          urlQueryParamString += '&';
+        } else {
+          urlQueryParamString += `${val.toString()}&`;
+        }
       });
+      urlQueryParamString = urlQueryParamString.slice(0, -1);
     }
-    fetchUrl = `${fetchUrl}${urlQueryParam.toString() ? '?' : ''}${urlQueryParam.toString()}`;
+    fetchUrl = `${fetchUrl}${urlQueryParamString}`;
 
     // Add authentication Query-Param if provided
     this.api_keys
@@ -1150,13 +1187,13 @@ export default class ApiRequest extends LitElement {
       curlUrl = fetchUrl;
     }
     curl = `curl -X ${this.method.toUpperCase()} "${curlUrl}" \\\n`;
-
+    const reqHeaders = new Headers();
     if (acceptHeader) {
       // Uses the acceptHeader from Response panel
-      fetchOptions.headers.Accept = acceptHeader;
+      reqHeaders.append('Accept', acceptHeader);
       curlHeaders += ` -H "Accept: ${acceptHeader}" \\\n`;
     } else if (this.accept) {
-      fetchOptions.headers.Accept = this.accept;
+      reqHeaders.append('Accept', this.accept);
       curlHeaders += ` -H "Accept: ${this.accept}" \\\n`;
     }
 
@@ -1164,14 +1201,14 @@ export default class ApiRequest extends LitElement {
     this.api_keys
       .filter((v) => (v.in === 'header'))
       .forEach((v) => {
-        fetchOptions.headers[v.name] = v.finalKeyValue;
+        reqHeaders.append(v.name, v.finalKeyValue);
         curlHeaders += ` -H "${v.name}: ${v.finalKeyValue}" \\\n`;
       });
 
     // Add Header Params
     headerParamEls.map((el) => {
       if (el.value) {
-        fetchOptions.headers[el.dataset.pname] = el.value;
+        reqHeaders.append(el.dataset.pname, el.value);
         curlHeaders += ` -H "${el.dataset.pname}: ${el.value}" \\\n`;
       }
     });
@@ -1243,7 +1280,7 @@ export default class ApiRequest extends LitElement {
           }
         });
         fetchOptions.body = formDataParams;
-      } else if ((RegExp('^audio/|^image/|^video/|^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$').test(requestBodyType))) {
+      } else if (/^audio\/|^image\/|^video\/|^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$/.test(requestBodyType)) {
         const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');
         if (bodyParamFileEl?.files[0]) {
           fetchOptions.body = bodyParamFileEl.files[0];
@@ -1253,18 +1290,22 @@ export default class ApiRequest extends LitElement {
         const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');
         if (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.
+            }
+          }
+          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
-        fetchOptions.headers['Content-Type'] = requestBodyType;
+        reqHeaders.append('Content-Type', requestBodyType);
       }
       curlHeaders += ` -H "Content-Type: ${requestBodyType}" \\\n`;
     }
@@ -1283,6 +1324,7 @@ export default class ApiRequest extends LitElement {
     if (this.fetchCredentials) {
       fetchOptions.credentials = this.fetchCredentials;
     }
+    fetchOptions.headers = reqHeaders;
     const fetchRequest = new Request(fetchUrl, fetchOptions);
     this.dispatchEvent(new CustomEvent('before-try', {
       bubbles: true,
@@ -1336,10 +1378,10 @@ export default class ApiRequest extends LitElement {
             this.responseText = JSON.stringify(respJson, null, 2);
           }
         // eslint-disable-next-line no-useless-escape
-        } else if (RegExp('^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$|^application\/vnd\.').test(contentType)) {
+        } else if (/^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$|^application\/vnd\./.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'download';
-        } else if (RegExp('^audio|^image|^video').test(contentType)) {
+        } else if (/^audio|^image|^video/.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'view';
         } else {

package/src/components/api-response.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { schemaInObjectNotation, generateExample } from '~/utils/schema-utils';
 import FontStyles from '~/styles/font-styles';
@@ -114,10 +114,10 @@ export default class ApiResponse extends LitElement {
         const schemaTree = schemaInObjectNotation(mimeRespObj.schema, {});
         // Generate Example
         const respExamples = generateExample(
-          mimeRespObj.examples,
-          mimeRespObj.example,
           mimeRespObj.schema,
           mimeResp,
+          mimeRespObj.examples,
+          mimeRespObj.example,
           true,
           false,
           mimeResp.includes('json') ? 'json' : 'text',
@@ -302,23 +302,23 @@ export default class ApiResponse extends LitElement {
       ${this.schemaStyle === 'table'
         ? html`
           <schema-table
-            render-style = '${this.renderStyle}'
-            .data = '${mimeRespDetails.schemaTree}'
+            render-style = "${this.renderStyle}"
+            .data = "${mimeRespDetails.schemaTree}"
             schema-expand-level = "${this.schemaExpandLevel}"
             schema-description-expanded = "${this.schemaDescriptionExpanded}"
             allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-            schema-hide-read-only = false
-            schema-hide-write-only = ${this.schemaHideWriteOnly}
+            schema-hide-read-only = "false"
+            schema-hide-write-only = "${this.schemaHideWriteOnly}"
           > </schema-tree> `
         : html`
           <schema-tree
-            render-style = '${this.renderStyle}'
+            render-style = "${this.renderStyle}"
             .data = '${mimeRespDetails.schemaTree}'
             schema-expand-level = "${this.schemaExpandLevel}"
             schema-description-expanded = "${this.schemaDescriptionExpanded}"
             allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-            schema-hide-read-only = false
-            schema-hide-write-only = ${this.schemaHideWriteOnly}
+            schema-hide-read-only = "false"
+            schema-hide-write-only = "${this.schemaHideWriteOnly}"
           > </schema-tree>`
       }`;
   }

package/src/components/json-tree.js

@@ -23,6 +23,7 @@ export default class JsonTree extends LitElement {
         display:flex;
       }
       .json-tree {
+        position: relative;
         font-family: var(--font-mono);
         font-size: var(--font-size-small);
         display:inline-block;
@@ -98,7 +99,7 @@ export default class JsonTree extends LitElement {
       <div class="inside-bracket">
         ${Object.keys(data).map((key, i, a) => html`
           <div class="item"> 
-            ${detailType === 'pure_object' ? html`${key}:` : ''}
+            ${detailType === 'pure_object' ? html`"${key}":` : ''}
             ${this.generateTree(data[key], i === (a.length - 1))}
           </div>`)
         }