@scalar/api-reference 0.4.0 → 0.5.1

package/dist/types.d.ts

@@ -1,8 +1,4 @@
 export type ReferenceProps = {
-    documentName?: string;
-    token?: string;
-    username?: string;
-    hocusPocusUrl?: string;
     isEditable?: boolean;
     showSidebar?: boolean;
     footerBelowSidebar?: boolean;
@@ -46,15 +42,17 @@ export type Operation = {
     description: string;
     information: Information;
 };
+export type ExampleResponseHeaders = Record<string, {
+    description: string;
+    schema: {
+        type: string;
+        format?: string;
+        example?: string;
+    };
+}>;
 export type TransformedOperation = Operation & {
     responses: Record<string, Response & {
-        headers: Record<string, {
-            description: string;
-            schema: {
-                type: string;
-                format?: string;
-            };
-        }>;
+        headers: ExampleResponseHeaders;
     }>;
 };
 export type Tag = {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,27 @@
 {
   "name": "@scalar/api-reference",
-  "version": "0.4.0",
-  "author": "Scalar",
+  "description": "generate beautiful API references from OpenAPI specs",
+  "keywords": [
+    "vue",
+    "vue3",
+    "swagger",
+    "openapi",
+    "spec",
+    "reference",
+    "documentation",
+    "component"
+  ],
+  "version": "0.5.1",
+  "author": "Scalar (https://github.com/scalar)",
+  "homepage": "https://github.com/scalar/scalar",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scalar/scalar.git",
+    "directory": "packages/api-reference"
+  },
+  "bugs": {
+    "url": "https://github.com/scalar/scalar/issues/new"
+  },
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -21,7 +41,6 @@
   "dependencies": {
     "@headlessui/vue": "1.7.14",
     "@vueuse/core": "10.1.2",
-    "codemirror": "6.0.1",
     "fuse.js": "^6.6.2",
     "httpsnippet-lite": "3.0.5",
     "js-yaml": "4.1.0",
@@ -32,6 +51,7 @@
     "rehype-format": "4.0.1",
     "rehype-sanitize": "5.0.1",
     "rehype-stringify": "9.0.3",
+    "remark-breaks": "^3.0.3",
     "remark-gfm": "3.0.1",
     "remark-parse": "10.0.2",
     "remark-rehype": "10.1.0",
@@ -39,14 +59,15 @@
     "typographic-base": "1.0.4",
     "unified": "10.1.2",
     "xmldom": "0.6.0",
-    "@scalar/api-client": "0.4.0",
-    "@scalar/default-theme": "0.2.0",
-    "@scalar/swagger-editor": "0.4.0",
-    "@scalar/swagger-parser": "0.4.0",
-    "@scalar/use-clipboard": "0.4.0",
-    "@scalar/use-keyboard-event": "0.4.0",
-    "@scalar/use-toasts": "0.4.0",
-    "@scalar/use-tooltip": "0.4.0"
+    "@scalar/api-client": "0.5.1",
+    "@scalar/default-theme": "0.2.1",
+    "@scalar/swagger-editor": "0.5.1",
+    "@scalar/swagger-parser": "0.4.2",
+    "@scalar/use-clipboard": "0.4.1",
+    "@scalar/use-codemirror": "0.5.0",
+    "@scalar/use-keyboard-event": "0.4.1",
+    "@scalar/use-toasts": "0.4.1",
+    "@scalar/use-tooltip": "0.4.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "4.2.3",

package/src/components/ApiReference.vue

@@ -180,10 +180,6 @@ const breadCrumbs = computed(() => {
       v-show="showCodeEditor"
       class="layout-content">
       <LazyLoadedSwaggerEditor
-        :documentName="documentName"
-        :hocusPocusUrl="hocusPocusUrl"
-        :token="token"
-        :username="username"
         :value="specRef"
         @specUpdate="handleSpecUpdate" />
     </div>

package/src/components/Content/Introduction/BaseUrl.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { useClipboard } from '@scalar/use-clipboard'
+import { computed } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   server?: {
     url: string
     description?: string
@@ -9,23 +10,39 @@ defineProps<{
 }>()
 
 const { copyToClipboard } = useClipboard()
+
+const formattedServerUrl = computed(() => {
+  const url = props.server?.url ?? ''
+  const urlWithoutHtml = url.replace(/(<([^>]+)>)/gi, '')
+
+  /* Replace all variables (example: {{ baseurl }} with an HTML tag) */
+  return urlWithoutHtml.replace(
+    /{{\s*([\w.-]+)\s*}}/g,
+    '<span class="base-url-variable">{{ $1 }}</span>',
+  )
+})
 </script>
 <template>
   <template v-if="server">
     <a
       class="base-url"
       :title="server.description"
-      @click="copyToClipboard(server.url)">
-      {{ server.url }}
-    </a>
+      @click="copyToClipboard(server.url)"
+      v-html="formattedServerUrl" />
   </template>
 </template>
+
+<style>
+.base-url-variable {
+  color: var(--theme-color-disabled);
+}
+</style>
+
 <style scoped>
 .base-url {
   color: var(--theme-color-2);
   font-size: var(--theme-mini);
   cursor: pointer;
-  display: flex;
   font-family: var(--theme-font-code);
   flex-direction: column;
 }

package/src/components/Content/MarkdownRenderer.vue

@@ -3,6 +3,7 @@ import rehypeDocument from 'rehype-document'
 import rehypeFormat from 'rehype-format'
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
 import rehypeStringify from 'rehype-stringify'
+import remarkBreaks from 'remark-breaks'
 import remarkGfm from 'remark-gfm'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
@@ -20,6 +21,7 @@ watch(
   () => {
     unified()
       .use(remarkParse)
+      .use(remarkBreaks)
       .use(remarkGfm)
       .use(remarkRehype)
       .use(remarkTextr, { plugins: [typographicBase] })
@@ -59,6 +61,7 @@ watch(
 .markdown :deep(h6) {
   font-size: var(--font-size);
   margin: 12px 0 6px;
+  font-weight: var(--theme-bold);
 }
 
 .markdown :deep(p) {
@@ -123,7 +126,7 @@ watch(
   border-collapse: collapse;
   table-layout: fixed;
   width: 100%;
-  margin: 0;
+  margin: 1em 0;
   overflow: hidden;
   box-shadow: 0 0 0 1px var(--theme-border-color);
   border-radius: var(--theme-radius-lg);
@@ -149,7 +152,7 @@ watch(
   margin-top: 4px;
   font-size: var(--theme-small);
   color: var(--theme-color-2);
-  line-height: initial;
+  line-height: 1.4;
 }
 .markdown :deep(td:first-of-type),
 .markdown :deep(th:first-of-type) {

package/src/components/Content/ReferenceEndpoint/Copy.vue

@@ -9,6 +9,7 @@ import { computed, onMounted, ref } from 'vue'
 
 import { useTemplateStore } from '../../../stores/template'
 import type { Tag } from '../../../types'
+import MarkdownRenderer from '../MarkdownRenderer.vue'
 import Parameters from './Parameters.vue'
 import RequestBody from './RequestBody.vue'
 
@@ -72,7 +73,7 @@ onMounted(() => {
     </div>
     <div>
       <p class="tag-description">
-        {{ operation.description }}
+        <MarkdownRenderer :value="operation.description" />
       </p>
     </div>
     <Parameters

package/src/components/Content/ReferenceEndpoint/ExampleRequest.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {
-  CodeMirror,
   generateRequest,
   useApiClientRequestStore,
   useApiClientStore,
   useOperation,
 } from '@scalar/api-client'
 import { useClipboard } from '@scalar/use-clipboard'
+import { CodeMirror } from '@scalar/use-codemirror'
 import {
   HTTPSnippet,
   type HarRequest,
@@ -55,26 +55,39 @@ async function generateSnippet() {
   if (pathVariables) {
     pathVariables.forEach((variable) => {
       const variableName = variable.replace(/{|}/g, '')
-      path = path.replace(variable, variableName.toUpperCase())
+      path = path.replace(variable, `__${variableName.toUpperCase()}__`)
+    })
+  }
+
+  let url = props.server.url
+
+  // Replace all variables of the format {something} with the uppercase variable name without the brackets
+  const urlVariables = url.match(/{{(.*?)}}/g)
+
+  if (urlVariables) {
+    console.log(urlVariables)
+    urlVariables.forEach((variable) => {
+      const variableName = variable.replace(/{|}/g, '')
+      url = url.replace(variable, `__${variableName}__`)
     })
   }
 
   if (templateState.preferredLanguage === 'axios') {
     return generateAxiosCodeFromRequest({
       method: props.operation.httpVerb.toUpperCase(),
-      url: `${props.server.url}${path}`,
+      url: `${url}${path}`,
     })
   } else if (templateState.preferredLanguage === 'laravel') {
     return generateLaravelCodeFromRequest({
       method: props.operation.httpVerb.toUpperCase(),
-      url: `${props.server.url}${path}`,
+      url: `${url}${path}`,
     })
   }
 
   try {
     const snippet = new HTTPSnippet({
       method: props.operation.httpVerb.toUpperCase(),
-      url: `${props.server.url}${path}`,
+      url: `${url}${path}`,
     } as HarRequest)
     const output = (await snippet.convert(
       templateState.preferredLanguage as TargetId,
@@ -176,9 +189,10 @@ const availableLanguages = computed(() => {
       <!-- @vue-ignore -->
       <CodeMirror
         :content="CodeMirrorValue"
+        :forceDarkMode="true"
         :languages="CodeMirrorLanguages"
-        :lineNumbers="true"
-        :readOnly="true" />
+        lineNumbers
+        readOnly />
     </CardContent>
     <CardFooter muted>
       <button

package/src/components/Content/ReferenceEndpoint/{ExampleResponses.vue → ExampleResponses/ExampleResponses.vue}

@@ -1,23 +1,19 @@
 <script lang="ts" setup>
-import { CodeMirror, type HttpHeader, httpHeaders } from '@scalar/api-client'
 import { useClipboard } from '@scalar/use-clipboard'
+import { CodeMirror } from '@scalar/use-codemirror'
 import { computed, ref } from 'vue'
 
-import type { TransformedOperation } from '../../../types'
+import type { TransformedOperation } from '../../../../types'
 import {
   Card,
   CardContent,
   CardFooter,
   CardTab,
   CardTabHeader,
-} from '../../Card'
-import { Icon } from '../../Icon'
-import {
-  SimpleCell,
-  SimpleHeader,
-  SimpleRow,
-  SimpleTable,
-} from '../../SimpleTable'
+} from '../../../Card'
+import { Icon } from '../../../Icon'
+import Headers from './Headers.vue'
+import SelectExample from './SelectExample.vue'
 
 const props = defineProps<{ operation: TransformedOperation }>()
 
@@ -45,29 +41,24 @@ const currentResponse = computed(() => {
   return props.operation.responses?.[currentStatusCode]
 })
 
-const currentResponseJsonBody = computed(() => {
-  return currentResponse.value?.content?.['application/json']?.body
+const currentResponseExamples = computed(() => {
+  const examples =
+    currentResponse.value?.content?.['application/json']?.examples
+
+  if (examples) {
+    return JSON.parse(examples)
+  }
+
+  return false
+})
+
+const currentResponseExample = computed(() => {
+  return currentResponse.value?.content?.['application/json']?.example
 })
 
 const changeTab = (index: number) => {
   selectedResponseIndex.value = index
 }
-
-const getDocumentationUrlForHttpHeader = (headerName: string) => {
-  return httpHeaders.find((header: HttpHeader) => {
-    return header.name.toLowerCase() === headerName.toLowerCase()
-  })?.url
-}
-
-// Make the first letter and all letters after a - uppercase
-const formatHeaderName = (headerName: string) => {
-  return headerName
-    .split('-')
-    .map((word) => {
-      return word.charAt(0).toUpperCase() + word.slice(1)
-    })
-    .join('-')
-}
 </script>
 <template>
   <Card v-if="orderedStatusCodes.length">
@@ -82,10 +73,10 @@ const formatHeaderName = (headerName: string) => {
 
       <template #actions>
         <button
-          v-if="currentResponseJsonBody"
+          v-if="currentResponseExample"
           class="code-copy"
           type="button"
-          @click="() => copyToClipboard(currentResponseJsonBody)">
+          @click="() => copyToClipboard(currentResponseExample)">
           <Icon
             src="solid/interface-copy-clipboard"
             width="10px" />
@@ -95,35 +86,24 @@ const formatHeaderName = (headerName: string) => {
     <CardContent
       v-if="currentResponse.headers"
       muted>
-      <SimpleTable>
-        <SimpleRow>
-          <SimpleHeader>Header</SimpleHeader>
-          <SimpleHeader>Description</SimpleHeader>
-        </SimpleRow>
-        <SimpleRow
-          v-for="(data, header) in currentResponse.headers"
-          :key="header">
-          <SimpleCell
-            :href="getDocumentationUrlForHttpHeader(header)"
-            :strong="true"
-            :wrap="false">
-            {{ formatHeaderName(header) }}
-          </SimpleCell>
-          <SimpleCell>{{ data.description }}</SimpleCell>
-        </SimpleRow>
-      </SimpleTable>
+      <Headers :headers="currentResponse.headers" />
     </CardContent>
     <CardContent muted>
-      <CodeMirror
-        v-show="currentResponseJsonBody"
-        :content="currentResponseJsonBody"
-        :languages="['json']"
-        readOnly />
-      <div
-        v-if="!currentResponseJsonBody"
-        class="scalar-api-reference__empty-state">
-        No Body
-      </div>
+      <template v-if="currentResponseExamples">
+        <SelectExample :examples="currentResponseExamples" />
+      </template>
+      <template v-else>
+        <CodeMirror
+          v-show="currentResponseExample"
+          :content="currentResponseExample"
+          :languages="['json']"
+          readOnly />
+        <div
+          v-if="!currentResponseExample"
+          class="scalar-api-reference__empty-state">
+          No Body
+        </div>
+      </template>
     </CardContent>
     <CardFooter
       v-if="currentResponse?.description"
@@ -165,4 +145,24 @@ const formatHeaderName = (headerName: string) => {
   padding: 20px;
   color: var(--theme-color-2);
 }
+
+.schema-type {
+  font-size: var(--theme-micro);
+  color: var(--theme-color-2);
+  font-weight: var(--theme-semibold);
+  background: var(--theme-background-3);
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-right: 4px;
+}
+.schema-example {
+  font-size: var(--theme-micro);
+  color: var(--theme-color-2);
+  font-weight: var(--theme-semibold);
+}
+
+.example-response-tab {
+  display: block;
+  margin: 6px;
+}
 </style>

package/src/components/Content/ReferenceEndpoint/ExampleResponses/Headers.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { type HttpHeader, httpHeaders } from '@scalar/api-client'
+import { computed } from 'vue'
+
+import { mapFromObject } from '../../../../helpers'
+import type { ExampleResponseHeaders } from '../../../../types'
+import {
+  SimpleCell,
+  SimpleHeader,
+  SimpleRow,
+  SimpleTable,
+} from '../../../SimpleTable'
+
+const props = defineProps<{
+  headers: ExampleResponseHeaders
+}>()
+
+const getDocumentationUrlForHttpHeader = (headerName: string) => {
+  return httpHeaders.find((header: HttpHeader) => {
+    return header.name.toLowerCase() === headerName.toLowerCase()
+  })?.url
+}
+
+// Make the first letter and all letters after a - uppercase
+const formatHeaderName = (headerName: string) => {
+  return headerName
+    .split('-')
+    .map((word) => {
+      return word.charAt(0).toUpperCase() + word.slice(1)
+    })
+    .join('-')
+}
+
+const headersHaveDescription = computed(() => {
+  const headers = mapFromObject(props.headers)
+
+  return headers.some((header: any) => {
+    return header.value.description
+  })
+})
+
+const headersHaveSchema = computed(() => {
+  const headers = mapFromObject(props.headers)
+
+  return headers.some((header: any) => {
+    return header.value.schema
+  })
+})
+</script>
+
+<template>
+  <SimpleTable>
+    <SimpleRow>
+      <SimpleHeader>Header</SimpleHeader>
+      <SimpleHeader v-if="headersHaveDescription">Description</SimpleHeader>
+      <SimpleHeader v-if="headersHaveSchema">Value</SimpleHeader>
+    </SimpleRow>
+    <SimpleRow
+      v-for="(data, header) in headers"
+      :key="header">
+      <SimpleCell
+        :href="getDocumentationUrlForHttpHeader(header)"
+        :strong="true"
+        :wrap="false">
+        {{ formatHeaderName(header) }}
+      </SimpleCell>
+      <SimpleCell v-if="headersHaveDescription">{{ data }}</SimpleCell>
+      <SimpleCell v-if="headersHaveSchema">
+        <span v-if="data.schema.example">
+          <code class="schema-example">{{ data.schema.example }}</code>
+        </span>
+        <code
+          v-else-if="data.schema.type"
+          class="schema-type">
+          {{ data.schema.type }}
+        </code>
+        <code v-else>
+          {{ data.schema }}
+        </code>
+      </SimpleCell>
+    </SimpleRow>
+  </SimpleTable>
+</template>

package/src/components/Content/ReferenceEndpoint/ExampleResponses/SelectExample.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from '@headlessui/vue'
+import { CodeMirror } from '@scalar/use-codemirror'
+import { ref } from 'vue'
+
+import { mapFromObject } from '../../../../helpers'
+import { Icon } from '../../../Icon'
+
+const props = defineProps<{ examples: Record<string, any> }>()
+
+const examples = mapFromObject(props.examples)
+const selectedExample = ref(examples[0])
+</script>
+<template>
+  <div class="example-switcher">
+    <label
+      class="listbox-label"
+      for="listbox-button">
+      Select Example
+    </label>
+    <Listbox v-model="selectedExample">
+      <ListboxButton
+        id="listbox-button"
+        class="listbox-button">
+        <div class="listbox-button-content">
+          <div class="listbox-button-label">
+            {{ selectedExample.value.summary ?? selectedExample.key }}
+          </div>
+          <div>
+            <Icon
+              class="icon"
+              src="line/arrow-chevron-down" />
+          </div>
+        </div>
+      </ListboxButton>
+
+      <ListboxOptions class="listbox-options">
+        <ListboxOption
+          v-for="example in examples"
+          :key="example.key"
+          class="listbox-option"
+          :value="example">
+          {{ example.value.summary ?? example.key }}
+        </ListboxOption>
+      </ListboxOptions>
+    </Listbox>
+    <CodeMirror
+      :content="JSON.stringify(selectedExample.value.value, null, 2)"
+      :languages="['json']"
+      readOnly />
+  </div>
+</template>
+
+<style scoped>
+.example-switcher {
+  display: flex;
+  gap: 6px;
+  flex-direction: column;
+}
+
+.listbox-label {
+  font-size: var(--theme-mini);
+  font-weight: var(--theme-semibold);
+  margin: 0 4px;
+  color: var(--theme-color-2);
+}
+
+.listbox-button {
+  border: 1px solid var(--theme-border-color);
+  background: var(--theme-background-1);
+  padding: 6px 12px;
+  border-radius: var(--theme-radius);
+  text-align: left;
+  display: block;
+  font-size: var(--theme-mini);
+}
+
+.listbox-button-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.listbox-button-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.listbox-options {
+  background: var(--theme-background-1);
+  padding: 6px 6px;
+  border-radius: var(--theme-radius-lg);
+  margin-top: 4px;
+  box-shadow: var(--theme-shadow-2);
+  position: absolute;
+  margin: 0 1px;
+  transform: translateY(-50%);
+  z-index: 100;
+}
+
+.listbox-option {
+  padding: 6px 12px;
+  cursor: pointer;
+  color: var(--theme-color-1);
+  border-radius: var(--theme-radius);
+  margin: 2px 0;
+}
+
+.listbox-option[data-headlessui-state='selected'] {
+  background: var(--theme-background-2);
+}
+
+.listbox-option:hover {
+  background: var(--theme-background-2);
+  color: var(--theme-color-2);
+}
+
+.icon {
+  width: 13px;
+  height: 13px;
+  color: var(--theme-color-3);
+}
+</style>