@scalar/api-reference 0.1.1

package/src/components/Icon/solid/shopping-gift-present.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M4.488,3.12a.25.25,0,0,0-.25-.25H1.5a1,1,0,0,0-1,.989V4.882a.994.994,0,0,0,1,.988H4.242a.249.249,0,0,0,.25-.25Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path
+        d="M9.5,3.859a1,1,0,0,0-1-.989H5.738a.252.252,0,0,0-.177.074.249.249,0,0,0-.073.177l0,2.5a.249.249,0,0,0,.25.249H8.5a.994.994,0,0,0,1-.988Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path
+        d="M4.5,7.12a.251.251,0,0,0-.25-.25H1.5a.5.5,0,0,0-.5.5V8.882A.994.994,0,0,0,2,9.87H4.249A.251.251,0,0,0,4.426,9.8.255.255,0,0,0,4.5,9.62Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path
+        d="M5.745,6.87a.25.25,0,0,0-.177.074.245.245,0,0,0-.073.177l0,2.5a.249.249,0,0,0,.25.249H8a.994.994,0,0,0,1-.988V7.37a.5.5,0,0,0-.5-.5Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path d="M6.8.23a.5.5,0,0,0-.7.1L5,1.8,3.9.33a.5.5,0,0,0-.8.6l1.5,2a.5.5,0,0,0,.8,0l1.5-2A.5.5,0,0,0,6.8.23Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+</svg>

package/src/components/Icon/solid/shopping-shipping-box-parcel-package.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M9.429,2.75A.251.251,0,0,0,9.657,2.4L8.836.552A1,1,0,0,0,7.941,0H5.75A.25.25,0,0,0,5.5.25V2.5a.25.25,0,0,0,.25.25Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path
+        d="M4.25,2.75A.25.25,0,0,0,4.5,2.5V.25A.25.25,0,0,0,4.25,0H2.059a1,1,0,0,0-.905.573L.344,2.4a.247.247,0,0,0,.018.237.251.251,0,0,0,.21.114Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path
+        d="M9.75,3.75H.25A.25.25,0,0,0,0,4V8.5A1.5,1.5,0,0,0,1.5,10h7A1.5,1.5,0,0,0,10,8.5V4A.25.25,0,0,0,9.75,3.75Zm-2,4.375H6.5a.625.625,0,0,1,0-1.25H7.75a.625.625,0,0,1,0,1.25Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+</svg>

package/src/components/Icon/solid/tag-new-circle.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+    <g>
+        <path fill="currentColor" fill-rule="evenodd"
+            d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM5.46623 5.1152C5.55999 5.02143 5.68717 4.96875 5.81978 4.96875H7.65939C7.93553 4.96875 8.15939 5.19261 8.15939 5.46875C8.15939 5.74489 7.93553 5.96875 7.65939 5.96875H6.31978V6.37244H7.42944C7.70558 6.37244 7.92944 6.59629 7.92944 6.87244C7.92944 7.14858 7.70558 7.37244 7.42944 7.37244H6.31978V8.03125H7.65939C7.93553 8.03125 8.15939 8.25511 8.15939 8.53125C8.15939 8.80739 7.93553 9.03125 7.65939 9.03125H5.81978C5.54364 9.03125 5.31978 8.80739 5.31978 8.53125V6.87244V5.46875C5.31978 5.33614 5.37246 5.20896 5.46623 5.1152ZM1.88323 4.9902C2.09411 4.92635 2.32193 5.00807 2.44415 5.1914L3.56979 6.87986V5.46875C3.56979 5.19261 3.79365 4.96875 4.06979 4.96875C4.34593 4.96875 4.56979 5.19261 4.56979 5.46875V8.53125C4.56979 8.75158 4.42556 8.94595 4.21468 9.0098C4.0038 9.07365 3.77598 8.99193 3.65376 8.8086L2.52812 7.12014V8.53125C2.52812 8.80739 2.30426 9.03125 2.02812 9.03125C1.75198 9.03125 1.52812 8.80739 1.52812 8.53125V5.46875C1.52812 5.24842 1.67235 5.05405 1.88323 4.9902ZM11.3229 9.03125C11.6473 9.03125 11.9241 8.79676 11.9774 8.47682L12.4651 5.55095C12.5105 5.27856 12.3265 5.02095 12.0541 4.97555C11.7817 4.93016 11.5241 5.11417 11.4787 5.38655L11.2094 7.00229L10.998 6.38738C10.9162 6.14938 10.6923 5.98958 10.4406 5.98958C10.189 5.98958 9.96505 6.14938 9.88324 6.38738L9.67186 7.00229L9.40257 5.38655C9.35718 5.11417 9.09956 4.93016 8.82718 4.97556C8.55479 5.02095 8.37078 5.27857 8.41618 5.55095L8.90383 8.47682C8.95715 8.79676 9.23396 9.03125 9.55831 9.03125C9.84162 9.03125 10.0937 8.85136 10.1858 8.58343L10.4406 7.84206L10.6955 8.58343C10.7876 8.85136 11.0396 9.03125 11.3229 9.03125Z"
+            clip-rule="evenodd"></path>
+    </g>
+</svg>

package/src/components/Icon/solid/travel-map-earth-globe.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+    <path fill="currentColor" fill-rule="evenodd"
+        d="M1.50226 6.99999C1.50226 3.96368 3.96368 1.50226 6.99999 1.50226C7.78361 1.50226 8.52894 1.66621 9.20354 1.96167V2.23813C9.20354 2.68368 9.02655 3.11098 8.7115 3.42603C8.39645 3.74108 7.96915 3.91808 7.5236 3.91808C7.29823 3.91795 7.07515 3.96318 6.86762 4.05105C6.6601 4.13893 6.47237 4.26767 6.31563 4.42959C6.15888 4.59152 6.03632 4.78333 5.95523 4.9936C5.87415 5.20388 5.83621 5.42832 5.84366 5.65356V7.04194C5.84366 7.26256 5.8002 7.48101 5.71578 7.68483C5.63135 7.88865 5.50761 8.07385 5.35161 8.22984C5.19561 8.38584 5.01042 8.50959 4.8066 8.59401C4.60278 8.67844 4.38432 8.72189 4.16371 8.72189H2.46988H1.7773C1.59883 8.18025 1.50226 7.6014 1.50226 6.99999ZM9.71406 11.7822C10.8973 11.1092 11.8063 10.0098 12.2321 8.69311L12.0961 8.5934C11.6577 8.36683 11.1726 8.24555 10.6791 8.23917H8.80677C8.42317 8.274 8.06645 8.45101 7.8067 8.73543C7.54694 9.01984 7.40292 9.39111 7.40292 9.77629C7.40292 10.1615 7.54694 10.5327 7.8067 10.8171C8.06645 11.1016 8.42317 11.2786 8.80677 11.3134C8.95071 11.3117 9.09355 11.3386 9.22702 11.3926C9.36049 11.4465 9.48192 11.5264 9.5843 11.6276C9.63237 11.6751 9.67579 11.7269 9.71406 11.7822ZM6.99999 0.0022583C3.13525 0.0022583 0.0022583 3.13525 0.0022583 6.99999C0.0022583 10.8647 3.13525 13.9977 6.99999 13.9977C10.8647 13.9977 13.9977 10.8647 13.9977 6.99999C13.9977 3.13525 10.8647 0.0022583 6.99999 0.0022583Z"
+        clip-rule="evenodd"></path>
+</svg>

package/src/components/Sidebar.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { generateRequest, useApiClientRequestStore } from '@scalar/api-client'
+import { useApiClientStore, useOperation } from '@scalar/api-client'
+import { useMediaQuery } from '@vueuse/core'
+
+import { useTemplateStore } from '../stores/template'
+import type { Operation, Spec } from '../types'
+import FindAnythingButton from './FindAnythingButton.vue'
+import SidebarElement from './SidebarElement.vue'
+import SidebarGroup from './SidebarGroup.vue'
+
+const props = defineProps<{ spec: Spec }>()
+
+const { state, setActiveSidebar, toggleApiClient } = useApiClientStore()
+
+const { setActiveRequest } = useApiClientRequestStore()
+
+function showItemInClient(operation: Operation) {
+  const { parameterMap } = useOperation({ operation })
+  const item = generateRequest(
+    operation,
+    parameterMap.value,
+    props.spec.servers[0],
+  )
+  setActiveRequest(item)
+  toggleApiClient(item, true)
+}
+
+const scrollToEndpoint = (item: Operation) => {
+  setActiveSidebar(item.operationId)
+  if (state.showApiClient) {
+    showItemInClient(item)
+  }
+  document.getElementById(`endpoint/${item.operationId}`)?.scrollIntoView()
+}
+
+const isMobile = useMediaQuery('(max-width: 1000px)')
+
+const {
+  state: templateState,
+  setItem: setTemplateItem,
+  toggleCollapsedSidebarItem,
+  setCollapsedSidebarItem,
+} = useTemplateStore()
+</script>
+<template>
+  <div class="sidebar">
+    <FindAnythingButton
+      v-if="!isMobile"
+      @click="setTemplateItem('showSearch', true)" />
+    <div class="pages custom-scroll custom-scroll-self-contain-overflow">
+      <SidebarGroup :level="0">
+        <template v-for="tag in spec.tags">
+          <SidebarElement
+            v-if="tag.operations?.length > 0"
+            :key="tag.name"
+            :hasChildren="true"
+            :isActive="false"
+            :item="{
+              uid: '',
+              title: tag.name.toUpperCase(),
+              type: 'Folder',
+            }"
+            :open="templateState.collapsedSidebarItems[tag.name]"
+            @select="() => toggleCollapsedSidebarItem(tag.name)"
+            @toggleOpen="toggleCollapsedSidebarItem(tag.name)">
+            <SidebarGroup :level="0">
+              <SidebarElement
+                v-for="operation in tag.operations"
+                :key="operation.operationId"
+                :isActive="state.activeSidebar === operation.operationId"
+                :item="{
+                  uid: '',
+                  title: operation.name || operation.path,
+                  type: 'Page',
+                }"
+                @select="
+                  () => {
+                    setCollapsedSidebarItem(tag.name, true)
+                    scrollToEndpoint(operation)
+                  }
+                " />
+            </SidebarGroup>
+          </SidebarElement>
+        </template>
+      </SidebarGroup>
+    </div>
+  </div>
+</template>
+
+<style>
+.sidebar {
+  --theme-sidebar-indent-base: 6px;
+  /* prettier-ignore */
+  background: var(--scalar-api-reference-sidebar-background-1, var(--scalar-api-reference-theme-background-1));
+}
+
+/* ----------------------------------------------------- */
+/* Main sidebar styles */
+
+.sidebar {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  /* prettier-ignore */
+  background: var(--scalar-api-reference-sidebar-background-1, var(--scalar-api-reference-theme-background-1));
+  --sidebar-level: 0;
+}
+
+.pages {
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+
+.sidebar-group {
+  list-style: none;
+  width: 100%;
+}
+
+.sidebar-heading {
+  display: flex;
+  gap: 6px;
+
+  /* prettier-ignore */
+  color: var(--scalar-api-reference-sidebar-color-2, var(--scalar-api-reference-theme-color-2));
+  font-size: var(--scalar-api-reference-theme-mini);
+  font-weight: var(--scalar-api-reference-theme-semibold);
+  word-break: break-word;
+  line-height: 1.385;
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  position: relative;
+  cursor: pointer;
+  /* prettier-ignore */
+  border-radius: 0 var(--scalar-api-reference-theme-radius) var(--scalar-api-reference-theme-radius) 0;
+  flex: 1;
+  padding-right: 12px;
+  user-select: none;
+}
+
+/* Folder/page collapse icon */
+.toggle-nested-icon {
+  border: none;
+  position: absolute !important;
+  left: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: currentColor;
+}
+
+.toggle-nested-icon:hover,
+.toggle-nested-icon:focus-visible {
+  color: currentColor;
+  filter: drop-shadow(0 0.125px 0 currentColor)
+    drop-shadow(0 -0.125px 0 currentColor);
+}
+
+/* We indent each level of nesting further */
+.sidebar-indent-nested .sidebar-heading {
+  /* prettier-ignore */
+  padding-left: calc((var(--sidebar-level) * var(--theme-sidebar-indent-base)) + 24px) !important;
+}
+
+/* Collapse/expand icons must also be offset */
+.sidebar-indent-nested .sidebar-heading .toggle-nested-icon {
+  /* prettier-ignore */
+  left: calc((var(--sidebar-level) * var(--theme-sidebar-indent-base)) + 2px) !important;
+}
+
+.sidebar-heading-link {
+  padding-right: 12px;
+  padding: 6px 0;
+  display: flex;
+  align-items: center;
+}
+
+/* Sidebar link icon */
+.link-icon {
+  position: relative;
+  left: 4px;
+}
+
+.sidebar-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+
+  width: 13px;
+  height: 13px;
+}
+
+.sidebar-icon > svg {
+  width: 13px;
+  height: 13px;
+}
+
+.sidebar-heading:hover {
+  /* prettier-ignore */
+  color: var(--scalar-api-reference-sidebar-color-1, var(--scalar-api-reference-theme-color-1));
+  /* prettier-ignore */
+  background: var(--scalar-api-reference-sidebar-item-hover-background, var(--scalar-api-reference-theme-background-3));
+}
+
+.active_page.sidebar-heading:hover,
+.active_page.sidebar-heading,
+.marc_active .sidebar-heading {
+  /* prettier-ignore */
+  background: var(--sidebar-item-active-background, var(--scalar-api-reference-theme-background-3)) !important;
+  /* prettier-ignore */
+  color: var(--scalar-api-reference-sidebar-color-active, var(--scalar-api-reference-theme-color-accent)) !important;
+}
+.sidebar-group-item {
+  position: relative;
+}
+
+/* Change font colors and weights for nested items */
+.sidebar-indent-nested .sidebar-heading {
+  /* prettier-ignore */
+  color: var(--scalar-api-reference-sidebar-color-1, var(--scalar-api-reference-theme-color-1));
+}
+.sidebar-indent-nested .sidebar-indent-nested .sidebar-heading {
+  /* prettier-ignore */
+  color: var(--scalar-api-reference-sidebar-color-2, var(--scalar-api-reference-theme-color-2));
+}
+.sidebar-indent-nested > div:has(.active_page) .sidebar-heading {
+  font-weight: var(--scalar-api-reference-theme-bold);
+}
+
+.sidebar-mobile-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  width: 100%;
+  padding: 0 6px;
+}
+
+.sidebar-mobile-breadcrumbs {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--scalar-api-reference-theme-small);
+  font-weight: var(--scalar-api-reference-theme-semibold);
+}
+
+.sidebar-mobile-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  height: 24px;
+  align-items: center;
+  padding: 0 4px;
+}
+
+.sidebar-mobile-actions .sidebar-mobile-darkmode-toggle {
+  height: 16px;
+  width: 16px;
+}
+
+@media (max-width: 1000px) {
+  .sidebar {
+    min-height: 0;
+  }
+
+  .pages {
+    padding-top: 12px;
+  }
+}
+
+@media (max-width: 500px) {
+  .header-item-link.header-item-active,
+  .sidebar-section,
+  .sidebar-heading {
+    font-size: var(--scalar-api-reference-theme-mini);
+  }
+}
+</style>

package/src/components/SidebarElement.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import FlowIconButton from '../components/FlowIconButton.vue'
+import { FlowIcon, Icon } from './Icon'
+
+const props = defineProps<{
+  item: {
+    uid: string
+    title: string
+    type: 'Page' | 'Folder' | 'Link'
+    link?: string
+    icon?: {
+      src: string
+    }
+  }
+  isActive?: boolean
+  hasChildren?: boolean
+  open?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'select'): void
+  (e: 'toggleOpen'): void
+}>()
+
+enum ElementType {
+  Page = 'Page',
+  Folder = 'Folder',
+  Link = 'Link',
+}
+
+const linkProps = computed(() => {
+  const item = props.item
+  if (item.type === ElementType.Link) {
+    return {
+      href: item.link,
+      rel: 'noopener noreferrer',
+      target: '_blank',
+    }
+  }
+
+  return {}
+})
+
+function handleClick() {
+  if (props.item.type === ElementType.Link) return
+
+  if (props.item.type === ElementType.Folder) {
+    emit('toggleOpen')
+    return
+  }
+
+  emit('select')
+}
+
+function handleToggleOpen() {
+  // Allow bubbled event to trigger folder open
+  if (props.item.type === ElementType.Folder) return
+
+  emit('toggleOpen')
+}
+</script>
+<template>
+  <li class="sidebar-group-item">
+    <div
+      class="sidebar-heading"
+      :class="{ active_page: isActive }"
+      @click="handleClick">
+      <!-- If children are detected then show the nesting icon -->
+      <FlowIconButton
+        v-if="hasChildren || item.type === ElementType.Folder"
+        class="toggle-nested-icon"
+        :icon="open ? 'ChevronDown' : 'ChevronRight'"
+        label="Toggle group"
+        variant="text"
+        width="20px"
+        @click="handleToggleOpen" />
+      <a
+        class="flex-1 sidebar-heading-link"
+        v-bind="linkProps">
+        <Icon
+          v-if="item?.icon?.src"
+          class="sidebar-icon"
+          :src="item.icon.src" />
+        <p>{{ item.title }}</p>
+      </a>
+      <FlowIcon
+        v-if="item?.type === ElementType.Link"
+        class="link-icon"
+        icon="ExternalLink"
+        width="16px" />
+    </div>
+    <slot v-if="open" />
+    <div
+      v-if="$slots['action-menu']"
+      class="action-menu">
+      <slot name="action-menu"></slot>
+    </div>
+  </li>
+</template>
+<style scoped>
+.action-menu {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  display: flex;
+  gap: 6px;
+}
+/**
+* Some awkwardness to make the dropdown buttons hidden when not hovered
+* but still show when the panel is open and focused
+*/
+.action-menu :deep(.button-wrapper button) {
+  /* Hide the icons by default */
+  opacity: 0;
+  width: 20px;
+  height: 20px;
+  padding: 4px;
+}
+.action-menu:hover :deep(.button-wrapper button),
+.action-menu :deep(.button-wrapper button:hover),
+.sidebar-heading:hover ~ .action-menu :deep(.button-wrapper button),
+.action-menu :deep(.button-wrapper button[aria-expanded='true']) {
+  opacity: 1;
+}
+.sidebar-heading:has(~ .action-menu:hover) {
+  /* prettier-ignore */
+  color: var(--scalar-api-reference-sidebar-color-1, var(--scalar-api-reference-theme-color-1));
+  /* prettier-ignore */
+  background: var(--scalar-api-reference-sidebar-item-hover-background, var(--scalar-api-reference-theme-background-3));
+}
+</style>

package/src/components/SidebarGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  level: number
+}>()
+</script>
+<template>
+  <ul
+    class="sidebar-group sidebar-indent-nested"
+    :style="{ '--sidebar-level': level }">
+    <slot />
+  </ul>
+</template>

package/src/declarations/typographic-base.d.ts

@@ -0,0 +1 @@
+declare module 'typographic-base'

package/src/helpers/generateAxiosCodeFromRequest.ts

@@ -0,0 +1,42 @@
+type HarRequestHeader = {
+  name: string
+  value: string
+}
+
+type HarRequest = {
+  url: string
+  method: string
+  headers?: HarRequestHeader[]
+}
+
+export const generateAxiosCodeFromRequest = (request: HarRequest) => {
+  const lines: string[] = []
+
+  lines.push(`import axios from 'axios'`)
+  lines.push(``)
+  lines.push(`axios({`)
+
+  const url = request.url
+  lines.push(`  url: '${url}',`)
+
+  const method = request.method.toLowerCase()
+  lines.push(`  method: '${method}',`)
+
+  if (request.headers) {
+    const headers = request.headers
+      .map((header) => {
+        return `    '${header.name}': '${header.value}',`
+      })
+      .join('\n')
+
+    lines.push(`  headers: [`)
+    lines.push(`${headers}`)
+    lines.push(`  ],`)
+  }
+
+  lines.push(`}).then(response => {`)
+  lines.push(`  console.log(response)`)
+  lines.push(`})`)
+
+  return lines.join('\n')
+}

package/src/helpers/generateLaravelCodeFromRequest.ts

@@ -0,0 +1,20 @@
+type HarRequest = {
+  url: string
+  method: string
+}
+
+export const generateLaravelCodeFromRequest = (request: HarRequest) => {
+  const lines: string[] = []
+
+  lines.push(`<?php`)
+  lines.push(``)
+  lines.push(`use Illuminate\\Support\\Facades\\Http;`)
+  lines.push(``)
+
+  const method = request.method.toLowerCase()
+  const url = request.url
+
+  lines.push(`$response = Http::${method}('${url}');`)
+
+  return lines.join('\n')
+}

package/src/helpers/index.ts

@@ -0,0 +1,4 @@
+export { generateAxiosCodeFromRequest } from './generateAxiosCodeFromRequest'
+export { generateLaravelCodeFromRequest } from './generateLaravelCodeFromRequest'
+export { objectMerge } from './objectMerge'
+export { transformToJson } from './transformToJson'

package/src/helpers/objectMerge.ts

@@ -0,0 +1,19 @@
+// TODO: This is a copy of packages/core-interface/src/database/utility.ts
+/**
+ * Overwrite a target object a new replacement object handling removed keys
+ **/
+export function objectMerge<A extends object, B extends object>(
+  target: A,
+  replacement: B,
+) {
+  // Clear any keys that have been removed in the replacement
+  Object.keys(target).forEach((key) => {
+    if (!Object.hasOwn(replacement, key)) {
+      delete target[key as keyof A]
+    }
+  })
+
+  Object.assign(target, replacement)
+
+  return target as unknown as B
+}

package/src/helpers/transformToJson.ts

@@ -0,0 +1,22 @@
+import yaml from 'js-yaml'
+
+/**
+ * This helper is used to transform the content of the swagger file to JSON, even it was YAML.
+ */
+export const transformToJson = (value: string) => {
+  try {
+    // JSON
+    JSON.parse(value)
+
+    return value
+  } catch {
+    try {
+      // Yaml to JSON
+      const doc = yaml.load(value)
+      return JSON.stringify(doc)
+    } catch {
+      // Invalid
+      return value
+    }
+  }
+}

package/src/hooks/useSwaggerParser.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest'
+
+describe('example', () => {
+  it('executes tests', () => {
+   expect(true).toBe(true)
+  })
+})

package/src/hooks/useSwaggerParser.ts

@@ -0,0 +1,79 @@
+import { useWebWorker } from '@vueuse/core'
+import { nextTick, ref, watch } from 'vue'
+
+import { transformToJson } from '../helpers/transformToJson'
+
+const { data, post } = useWebWorker('/web-worker.js')
+
+const parserResult = ref<Record<any, any>>()
+const parserError = ref<string>('')
+const parserReady = ref(true)
+
+type ErrorObject = { error: string }
+
+/**
+ * Takes the content of a swagger file and asynchronously calls the given callback with the result.
+ */
+export const useSwaggerParser = () => {
+  const parseSwaggerFile = async (
+    value: string,
+    callback: (result: Record<any, any>) => void,
+  ) => {
+    const jsonValue = transformToJson(value)
+
+    // Send data to WASM parser.
+    const triggeredAction = watch(data, (result: string | ErrorObject) => {
+      // Skip if the value is empty.
+      if (typeof result === 'string' && result === '') {
+        return
+      }
+
+      // Check if the parser had an error.
+      if (typeof result === 'object') {
+        console.warn('[parseSwaggerFile] ERROR:', result.error)
+        parserError.value = result.error
+        return
+      }
+
+      // Something with the Parser went really wrong.
+      if (typeof result === 'undefined') {
+        console.error('[parseSwaggerFile] ERROR: result is undefined')
+        parserError.value =
+          'Something went wrong. The parser failed to parse the content.'
+        return
+      }
+
+      // Execute the given callback.
+      const content = JSON.parse(result)
+
+      // Check if content is empty.
+      if (!content) {
+        return
+      }
+
+      parserError.value = ''
+      parserResult.value = content
+      callback(content)
+
+      // Don’t watch `data` anymore.
+      triggeredAction()
+    })
+
+    post(jsonValue)
+
+    if (parserReady.value) {
+      return
+    }
+
+    await nextTick()
+
+    parserReady.value = true
+  }
+
+  return {
+    parseSwaggerFile,
+    parserResult,
+    parserError,
+    parserReady,
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export { default as ApiClientModal } from './components/ApiClientModal.vue'
+export { default as ApiReference } from './components/ApiReference.vue'
+export { default as Sidebar } from './components/Sidebar.vue'
+export { default as RenderedReference } from './components/Content/Content.vue'
+
+export * from './types'