refactor: Context / Utils

components.json

@@ -11,9 +11,9 @@
   "aliases": {
     "components": "src/components",
     "composables": "src/composables",
-    "utils": "lib/utils",
+    "utils": "lib/utils/utils",
     "ui": "src/components/ui",
     "lib": "src/lib"
   },
   "iconLibrary": "lucide"
-}
+}

docs/.vitepress/config.mts

@@ -1,4 +1,5 @@
 import { fileURLToPath } from 'node:url'
+import { resolve, dirname } from 'node:path'
 import { defineConfigWithTheme } from 'vitepress'
 import { useSidebar } from 'vitepress-openapi'
 import { examplesPages, testsPages } from '../pages'
@@ -11,6 +12,10 @@ const sidebar = useSidebar({
 
 const gaId = process.env.GA_ID || 'G-TEST'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const rootDir = resolve(__dirname, '../..')
+
 export default defineConfigWithTheme({
   title: 'VitePress OpenAPI',
   description: 'Generate VitePress API Documentation from OpenAPI specs.',
@@ -281,18 +286,16 @@ export default defineConfigWithTheme({
   vite: {
     resolve: {
       alias: {
-        ...(process.env.NODE_ENV === 'production'
+        '@': resolve(rootDir, 'src'),
+        '@docs': resolve(rootDir, 'docs'),
+        '@public': resolve(rootDir, 'docs/public'),
+        ...(process.env.NODE_ENV !== 'production'
           ? {
-              '@docs': fileURLToPath(new URL('../', import.meta.url)),
-              '@public': fileURLToPath(new URL('../public', import.meta.url)),
-            }
-          : {
-              '@docs': fileURLToPath(new URL('../', import.meta.url)),
-              '@public': fileURLToPath(new URL('../public', import.meta.url)),
               'vitepress-openapi/client': fileURLToPath(new URL('../../src/client', import.meta.url)),
               'vitepress-openapi/dist/style.css': fileURLToPath(new URL('../../src/theme', import.meta.url)),
               'vitepress-openapi': fileURLToPath(new URL('../../src/index', import.meta.url)),
-            }),
+            }
+          : {}),
       },
     },
   },

docs/.vitepress/theme/components/BrowserWindow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cn } from '../../../../src/lib/utils'
+import { cn } from '../../../../src/lib/utils/utils'
 
 const props = defineProps({
   showBrowserDots: {

docs/.vitepress/theme/components/ExampleBlock.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Slots } from 'vue'
 import { useSlots } from 'vue'
-import { cn } from '../../../../src/lib/utils'
+import { cn } from '../../../../src/lib/utils/utils'
 import BrowserWindow from './BrowserWindow.vue'
 
 const props = defineProps({

docs/.vitepress/theme/components/sandbox/Sandbox.vue

@@ -4,7 +4,7 @@ import { useUrlSearchParams } from '@vueuse/core'
 import { useData } from 'vitepress'
 import { useTheme } from 'vitepress-openapi/client'
 import { provide, watch } from 'vue'
-import { deepUnref } from '../../../../../src/lib/deepUnref'
+import { deepUnref } from '../../../../../src/lib/utils/deepUnref'
 import { initSandboxData } from '../../sandboxData'
 import ThemeConfigPopover from '../theme/ThemeConfigPopover.vue'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable'

docs/.vitepress/theme/components/sandbox/SandboxIframe.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { compressToURL } from '@amoutonbrady/lz-string'
 import { ExternalLink } from 'lucide-vue-next'
-import { deepUnref } from '../../../../../src/lib/deepUnref'
-import { cn } from '../../../../../src/lib/utils'
+import { deepUnref } from '../../../../../src/lib/utils/deepUnref'
+import { cn } from '../../../../../src/lib/utils/utils'
 import { initSandboxData } from '../../sandboxData'
 import BrowserWindow from '../BrowserWindow.vue'
 

docs/.vitepress/theme/components/sandbox/SandboxPreview.vue

@@ -4,7 +4,7 @@ import { useData } from 'vitepress'
 import { getHeaders } from 'vitepress/dist/client/theme-default/composables/outline.js'
 import { VPHomeContent } from 'vitepress/theme'
 import { inject, onMounted, watch } from 'vue'
-import { scrollToHash } from '../../../../../src/lib/utils'
+import { scrollToHash } from '../../../../../src/lib/utils/utils'
 import VPDocAsideOutline from '../vitepress/VPDocAsideOutline.vue'
 import SandboxPreviewSidebar from './SandboxPreviewSidebar.vue'
 

docs/.vitepress/theme/components/ui/popover/PopoverContent.vue

@@ -8,7 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'reka-ui'
 import { computed } from 'vue'
-import { cn } from '../../../../../../src/lib/utils'
+import { cn } from '../../../../../../src/lib/utils/utils'
 
 defineOptions({
   inheritAttrs: false,

docs/.vitepress/theme/components/ui/resizable/ResizableHandle.vue

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'vue'
 import { GripVertical } from 'lucide-vue-next'
 import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
-import { cn } from '../../../../../../src/lib/utils'
+import { cn } from '../../../../../../src/lib/utils/utils'
 
 const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
 const emits = defineEmits<SplitterResizeHandleEmits>()

docs/.vitepress/theme/components/ui/resizable/ResizablePanelGroup.vue

@@ -3,7 +3,7 @@ import type { SplitterGroupEmits, SplitterGroupProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { SplitterGroup, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
-import { cn } from '../../../../../../src/lib/utils'
+import { cn } from '../../../../../../src/lib/utils/utils'
 
 const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SplitterGroupEmits>()

docs/.vitepress/theme/components/ui/toast/Toast.vue

@@ -3,7 +3,7 @@ import type { ToastRootEmits } from 'reka-ui'
 import type { ToastProps } from './index'
 import { ToastRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
-import { cn } from '../../../../../../src/lib/utils'
+import { cn } from '../../../../../../src/lib/utils/utils'
 import { toastVariants } from './index'
 
 const props = defineProps<ToastProps>()

docs/.vitepress/theme/components/ui/toast/ToastAction.vue

@@ -3,7 +3,7 @@ import type { ToastActionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { ToastAction } from 'reka-ui'
 import { computed } from 'vue'
-import { cn } from '../../../../../../src/lib/utils'
+import { cn } from '../../../../../../src/lib/utils/utils'
 
 const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
 

docs/.vitepress/theme/components/ui/toast/ToastClose.vue

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'vue'
 import { X } from 'lucide-vue-next'
 import { ToastClose } from 'reka-ui'
 import { computed } from 'vue'
-import { cn } from '../../../../../../src/lib/utils'
+import { cn } from '../../../../../../src/lib/utils/utils'
 
 const props = defineProps<ToastCloseProps & {
   class?: HTMLAttributes['class']

docs/.vitepress/theme/components/ui/toast/ToastDescription.vue

@@ -3,7 +3,7 @@ import type { ToastDescriptionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { ToastDescription } from 'reka-ui'
 import { computed } from 'vue'
-import { cn } from '../../../../../../src/lib/utils'
+import { cn } from '../../../../../../src/lib/utils/utils'
 
 const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
 

docs/.vitepress/theme/components/ui/toast/ToastTitle.vue

@@ -3,7 +3,7 @@ import type { ToastTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { ToastTitle } from 'reka-ui'
 import { computed } from 'vue'
-import { cn } from '../../../../../../src/lib/utils'
+import { cn } from '../../../../../../src/lib/utils/utils'
 
 const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
 

docs/.vitepress/theme/components/ui/toast/ToastViewport.vue

@@ -3,7 +3,7 @@ import type { ToastViewportProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { ToastViewport } from 'reka-ui'
 import { computed } from 'vue'
-import { cn } from '../../../../../../src/lib/utils'
+import { cn } from '../../../../../../src/lib/utils/utils'
 
 const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
 

e2e/local/dev/docs/.vitepress/config.ts

@@ -1,9 +1,14 @@
 import { fileURLToPath } from 'node:url'
+import { resolve, dirname } from 'node:path'
 import { defineConfig } from 'vitepress'
 import { useSidebar } from 'vitepress-openapi'
 import { testsPages } from '../../../../../docs/pages'
 import spec from '../../../../../docs/public/openapi.json'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const rootDir = resolve(__dirname, '../../../../../')
+
 const sidebar = useSidebar({
   spec,
   // Optionally, you can specify a link prefix for all generated sidebar items.
@@ -71,13 +76,14 @@ export default defineConfig({
   vite: {
     resolve: {
       alias: {
+        '@': resolve(rootDir, 'src'),
+        '@public': resolve(rootDir, 'docs/public'),
         ...(process.env.NODE_ENV === 'production'
           ? {}
           : {
               'vitepress-openapi/client': fileURLToPath(new URL('../../../../../src/client', import.meta.url)),
               'vitepress-openapi/dist/style.css': fileURLToPath(new URL('../../../../../dist/vitepress-openapi.css', import.meta.url)),
               'vitepress-openapi': fileURLToPath(new URL('../../../../../src/index', import.meta.url)),
-              '@public': fileURLToPath(new URL('../../../../../docs/public', import.meta.url)),
             }),
       },
     },

src/client.ts

@@ -1,14 +1,14 @@
 import type { Awaitable } from 'vitepress'
 import type { EnhanceAppContext, Theme } from 'vitepress/client'
 import type { Component } from 'vue'
-import type { OpenApi } from './lib/OpenApi'
+import type { OpenApiSpecInstance } from './lib/spec/createOpenApiSpec'
 import { createI18n } from '@byjohann/vue-i18n'
 import { watch } from 'vue'
 import * as components from './components'
 import { DEFAULT_OPERATION_SLOTS, useTheme } from './composables/useTheme'
 
 interface OAEnhanceAppContext extends EnhanceAppContext {
-  openapi?: ReturnType<typeof OpenApi> | null
+  openapi?: OpenApiSpecInstance | null
 }
 
 interface VPTheme {
@@ -53,5 +53,5 @@ export { useShiki } from './composables/useShiki'
 export { useTheme } from './composables/useTheme'
 export { generateCodeSample } from './lib/codeSamples/generateCodeSample'
 export { OARequest } from './lib/codeSamples/request'
-export { OpenApi } from './lib/OpenApi'
+export { createOpenApiSpec } from './lib/spec/createOpenApiSpec'
 export { locales } from './locales'

src/components/Common/OACodeValue.vue

@@ -1,8 +1,8 @@
 <script setup>
+import { formatValueForDisplay } from '@/lib/format/formatValueForDisplay'
 import { useI18n } from '@byjohann/vue-i18n'
 import { computed } from 'vue'
 import { usePlayground } from '../../composables/usePlayground'
-import { formatValueForDisplay } from '../../lib/format/formatValueForDisplay'
 
 const props = defineProps({
   value: {

src/components/Common/OAHeading.vue

@@ -1,8 +1,8 @@
 <script setup>
+import { cn } from '@/lib/utils/utils'
 import slugify from '@sindresorhus/slugify'
 import { computed, useSlots } from 'vue'
 import { useTheme } from '../../composables/useTheme'
-import { cn } from '../../lib/utils'
 
 const props = defineProps({
   id: {

src/components/Common/OAMarkdown.vue

@@ -1,6 +1,6 @@
 <script setup>
+import { cn } from '@/lib/utils/utils'
 import { useMarkdown } from '../../composables/useMarkdown'
-import { cn } from '../../lib/utils'
 
 const props = defineProps({
   content: {

src/components/Context/OAProvider.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { OpenApiSpecInstance } from '@/lib/spec/createOpenApiSpec'
+import { provide } from 'vue'
+import {
+  getGlobalOpenapi,
+  injectOpenapi,
+  OPENAPI_LOCAL_KEY,
+} from '../../composables/useOpenapi'
+import OASpecSkeleton from '../Feature/OASpecSkeleton.vue'
+import OAProviderAsync from './OAProviderAsync.vue'
+
+const props = defineProps({
+  spec: {
+    type: [Object, String],
+    required: false,
+    default: null,
+  },
+  specUrl: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  openapi: {
+    type: Object as () => OpenApiSpecInstance | null,
+    required: false,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:spec'])
+
+const needsAsync = props.spec || props.specUrl
+const existingOpenapi = props.openapi ?? injectOpenapi() ?? getGlobalOpenapi()
+
+if (existingOpenapi && !needsAsync) {
+  provide(OPENAPI_LOCAL_KEY, existingOpenapi)
+}
+</script>
+
+<template>
+  <Suspense v-if="needsAsync">
+    <OAProviderAsync
+      :spec="props.spec"
+      :spec-url="props.specUrl"
+      @update:spec="emit('update:spec', $event)"
+    >
+      <template #default="{ openapi: asyncOpenapi }">
+        <slot :openapi="asyncOpenapi" />
+      </template>
+    </OAProviderAsync>
+    <template #fallback>
+      <OASpecSkeleton />
+    </template>
+  </Suspense>
+  <template v-else-if="existingOpenapi">
+    <slot :openapi="existingOpenapi" />
+  </template>
+  <div v-else>
+    <p>OpenAPI instance not found</p>
+  </div>
+</template>