chore: context components

enzonotario · Feb 16, 2025 · 27f0ab5 · 27f0ab5
1 parent 97908fd
commit 27f0ab5
Show file tree

Hide file tree

Showing 40 changed files with 992 additions and 674 deletions.
diff --git a/docs/customizations/parts/code-samples-example.md b/docs/customizations/parts/code-samples-example.md
@@ -18,7 +18,7 @@ useTheme({
             ...useTheme().getCodeSamplesAvailableLanguages(),
         ],
         defaultLang: 'bruno',
-        generator: (lang, request) => {
+        generator: async (lang, request) => {
             if (lang === 'bruno') {
                 return generateBruRequest(request)
             }

diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "prepublishOnly": "pnpm run build",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
-    "dev": "cd docs && pnpm run dev",
+    "dev": "cd docs && VITE_DEBUG=1 pnpm run dev",
     "docs:build": "pnpm run build && cd docs && pnpm run build",
     "test": "vitest",
     "test:run": "vitest --run",

diff --git a/src/components/Feature/OAContext.vue b/src/components/Feature/OAContext.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { inject, provide } from 'vue'
+import { OPENAPI_GLOBAL_KEY, OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
+import { getAsyncOpenApiInstance } from '../../lib/getAsyncOpenApiInstance'
+
+const props = defineProps({
+  spec: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+})
+
+const globalOpenApi = inject(OPENAPI_GLOBAL_KEY, undefined)
+
+const openapi
+    = await getAsyncOpenApiInstance({
+      custom: { spec: props.spec },
+      injected: globalOpenApi,
+    })
+
+provide(OPENAPI_LOCAL_KEY, openapi)
+</script>
+
+<template>
+  <div>
+    <slot :openapi="openapi" />
+  </div>
+</template>
diff --git a/src/components/Feature/OAContextProvider.vue b/src/components/Feature/OAContextProvider.vue
@@ -0,0 +1,21 @@
+<script setup>
+import OAContext from './OAContext.vue'
+
+const props = defineProps({
+  spec: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+})
+</script>
+
+<template>
+  <Suspense>
+    <OAContext :spec="props.spec">
+      <template #default="{ openapi }">
+        <slot :openapi="openapi" />
+      </template>
+    </OAContext>
+  </Suspense>
+</template>
diff --git a/src/components/Feature/OAInfo.vue b/src/components/Feature/OAInfo.vue
@@ -1,108 +1,19 @@
 <script setup>
-import { inject } from 'vue'
-import { OPENAPI_GLOBAL_KEY, OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
-import { getOpenApiInstance } from '../../lib/getOpenApiInstance'
-import { Badge } from '../ui/badge/index'
+import OAContextProvider from './OAContextProvider.vue'
+import OAInfoContent from './OAInfoContent.vue'
 
 const props = defineProps({
   spec: {
     type: Object,
     required: false,
   },
-  openapi: {
-    type: Object,
-    required: false,
-  },
 })
-
-const openapi = props.openapi ?? getOpenApiInstance({
-  custom: { spec: props.spec },
-  injected: inject(OPENAPI_GLOBAL_KEY, undefined),
-  injectedLocal: inject(OPENAPI_LOCAL_KEY, undefined),
-})
-
-const info = openapi.getInfo()
-
-const externalDocs = openapi.getExternalDocs()
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <div class="flex flex-col items-start">
-      <div class="flex flex-row items-center gap-2">
-        <Badge
-          v-if="info.version"
-          variant="outline"
-        >
-          v{{ info.version }}
-        </Badge>
-      </div>
-
-      <OAHeading level="h1">
-        {{ info.title ?? $t('API Documentation') }}
-      </OAHeading>
-    </div>
-
-    <span v-if="info.summary" class="text-gray-600 dark:text-gray-300">
-      {{ info.summary }}
-    </span>
-
-    <OAMarkdown
-      v-if="info.description"
-      :content="info.description"
-      class="mt-4"
-    />
-
-    <template v-if="info.contact">
-      <OAHeading level="h2">
-        {{ $t('Contact') }}
-      </OAHeading>
-
-      <div class="flex flex-row items-center gap-2">
-        <template v-if="info.contact.url">
-          <a :href="info.contact.url" :aria-label="info.contact.name ?? $t('Contact')">
-            {{ info.contact.name ?? $t('Contact') }}
-          </a>
-
-          <span v-if="info.contact.email" class="text-gray-400 dark:text-gray-500">/</span>
-        </template>
-
-        <a v-if="info.contact.email" :href="`mailto:${info.contact.email}`" :aria-label="info.contact.email">
-          {{ info.contact.email }}
-        </a>
-      </div>
-    </template>
-
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-      <div v-if="info.termsOfService">
-        <OAHeading level="h2">
-          {{ $t('Terms of Service') }}
-        </OAHeading>
-
-        <a :href="info.termsOfService" :aria-label="info.termsOfService">
-          {{ info.termsOfService }}
-        </a>
-      </div>
-
-      <div v-if="info.license">
-        <OAHeading level="h2">
-          {{ $t('License') }}
-        </OAHeading>
-
-        <a :href="info.license.url" :aria-label="info.license.name">
-          {{ info.license.name ?? $t('License') }}
-        </a>
-      </div>
-    </div>
-
-    <template v-if="Object.keys(externalDocs).length">
-      <OAHeading level="h2">
-        {{ $t('External Documentation') }}
-      </OAHeading>
-
-      <a :href="externalDocs.url" :aria-label="externalDocs.description ?? $t('External Documentation')">
-        {{ externalDocs.description ?? $t('External Documentation') }}
-      </a>
+  <OAContextProvider :spec="props.spec">
+    <template #default="{ openapi }">
+      <OAInfoContent :openapi="openapi" />
     </template>
-  </div>
+  </OAContextProvider>
 </template>
diff --git a/src/components/Feature/OAInfoContent.vue b/src/components/Feature/OAInfoContent.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { Badge } from '../ui/badge/index'
+
+const props = defineProps({
+  openapi: {
+    type: Object,
+    required: true,
+  },
+})
+
+const info = props.openapi.parsedSpec.info
+
+const externalDocs = props.openapi.parsedSpec.externalDocs
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-col items-start">
+      <div class="flex flex-row items-center gap-2">
+        <Badge
+          v-if="info.version"
+          variant="outline"
+        >
+          v{{ info.version }}
+        </Badge>
+      </div>
+
+      <OAHeading level="h1">
+        {{ info.title ?? $t('API Documentation') }}
+      </OAHeading>
+    </div>
+
+    <span v-if="info.summary" class="text-gray-600 dark:text-gray-300">
+      {{ info.summary }}
+    </span>
+
+    <OAMarkdown
+      v-if="info.description"
+      :content="info.description"
+      class="mt-4"
+    />
+
+    <template v-if="info.contact">
+      <OAHeading level="h2">
+        {{ $t('Contact') }}
+      </OAHeading>
+
+      <div class="flex flex-row items-center gap-2">
+        <template v-if="info.contact.url">
+          <a :href="info.contact.url" :aria-label="info.contact.name ?? $t('Contact')">
+            {{ info.contact.name ?? $t('Contact') }}
+          </a>
+
+          <span v-if="info.contact.email" class="text-gray-400 dark:text-gray-500">/</span>
+        </template>
+
+        <a v-if="info.contact.email" :href="`mailto:${info.contact.email}`" :aria-label="info.contact.email">
+          {{ info.contact.email }}
+        </a>
+      </div>
+    </template>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+      <div v-if="info.termsOfService">
+        <OAHeading level="h2">
+          {{ $t('Terms of Service') }}
+        </OAHeading>
+
+        <a :href="info.termsOfService" :aria-label="info.termsOfService">
+          {{ info.termsOfService }}
+        </a>
+      </div>
+
+      <div v-if="info.license">
+        <OAHeading level="h2">
+          {{ $t('License') }}
+        </OAHeading>
+
+        <a :href="info.license.url" :aria-label="info.license.name">
+          {{ info.license.name ?? $t('License') }}
+        </a>
+      </div>
+    </div>
+
+    <template v-if="Object.keys(externalDocs).length">
+      <OAHeading level="h2">
+        {{ $t('External Documentation') }}
+      </OAHeading>
+
+      <a :href="externalDocs.url" :aria-label="externalDocs.description ?? $t('External Documentation')">
+        {{ externalDocs.description ?? $t('External Documentation') }}
+      </a>
+    </template>
+  </div>
+</template>
diff --git a/src/components/Feature/OAIntroduction.vue b/src/components/Feature/OAIntroduction.vue
@@ -1,27 +1,20 @@
 <script setup>
-import { inject } from 'vue'
-import { OPENAPI_GLOBAL_KEY, OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
-import { getOpenApiInstance } from '../../lib/getOpenApiInstance'
+import OAInfoContent from './OAInfoContent.vue'
+import OAServersContent from './OAServersContent.vue'
 
 const props = defineProps({
   spec: {
     type: Object,
     required: false,
   },
-  openapi: {
-    type: Object,
-    required: false,
-  },
-})
-
-const openapi = props.openapi ?? getOpenApiInstance({
-  custom: { spec: props.spec },
-  injected: inject(OPENAPI_GLOBAL_KEY, undefined),
-  injectedLocal: inject(OPENAPI_LOCAL_KEY, undefined),
 })
 </script>
 
 <template>
-  <OAInfo :spec="spec" :openapi="openapi" />
-  <OAServers :spec="spec" :openapi="openapi" />
+  <OAContextProvider :spec="props.spec">
+    <template #default="{ openapi }">
+      <OAInfoContent :openapi="openapi" />
+      <OAServersContent :openapi="openapi" />
+    </template>
+  </OAContextProvider>
 </template>