refactor: Context / Utils (#315)

* refactor: components for OpenAPI spec handling

* refactor: replace OpenApi usage with createOpenApiSpec across components

* refactor: rename to createOpenApiSpec

* refactor: reorganize utility functions and types

* chore: restore comments

* chore(e2e): update ss

(cherry picked from commit 1d89878)

* refactor: rename openapi variable to asyncOpenapi in OAProvider.vue

* refactor: extract buildInstance function for OpenAPI spec creation

* refactor: deprecate OpenApi export in favor of createOpenApiSpec

* refactor: update async tests to use beforeAll for setup

* refactor: update import paths to use alias '@' for better readability

* refactor: simplify alias configuration

* refactor: improve path resolution for alias configuration

* refactor: enhance path resolution and add alias for improved readability

Author: enzonotario

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>()