change!: split entry points into client / node

docs/.vitepress/config.mts

@@ -237,9 +237,14 @@ export default defineConfigWithTheme({
   ],
   vite: {
     resolve: {
-      alias: {
-        'vitepress-openapi': process.env.NODE_ENV === 'production' ? resolve(__dirname, '../../') : resolve(__dirname, '../../src/'),
-      },
+      ...(process.env.NODE_ENV === 'production'
+        ? {}
+        : {
+            alias: {
+              'vitepress-openapi': resolve(__dirname, '../../src/index'),
+              'vitepress-openapi/client': resolve(__dirname, '../../src/client'),
+            },
+          }),
     },
   },
 })

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provide, watch } from 'vue'
 import { compressToURL, decompressFromURL } from '@amoutonbrady/lz-string'
-import { useTheme } from 'vitepress-openapi'
+import { useTheme } from 'vitepress-openapi/client'
 import { useUrlSearchParams } from '@vueuse/core'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable'
 import { deepUnref } from '../../../../../src/lib/deepUnref'

docs/.vitepress/theme/components/theme/ThemeConfig.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useTheme } from 'vitepress-openapi'
+import { DEFAULT_OPERATION_SLOTS, useTheme } from 'vitepress-openapi/client'
 import { inject } from 'vue'
-import { DEFAULT_OPERATION_SLOTS } from '../../../../../src'
 import type { SandboxData } from '../../sandboxData'
 
 const sandboxData = inject('sandboxData') as SandboxData

docs/.vitepress/theme/components/theme/ThemeConfigPopover.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import { Icon } from '@iconify/vue'
 import { useToggle } from '@vueuse/core'
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
-import type { SandboxData } from '../../sandboxData'
 import ThemeConfig from './ThemeConfig.vue'
 
-const sandboxData = inject('sandboxData') as SandboxData
-
 const [isOpen, toggleOpen] = useToggle(false)
 </script>
 

docs/.vitepress/theme/index.ts

@@ -1,4 +1,4 @@
-import { theme, useOpenapi } from 'vitepress-openapi'
+import { theme, useOpenapi } from 'vitepress-openapi/client'
 import DefaultTheme from 'vitepress/theme'
 import spec from '../../public/openapi.json' assert {type: 'json'}
 import ExampleBlock from './components/ExampleBlock.vue'

docs/composables/usePlayground.md

@@ -5,7 +5,7 @@ The `usePlayground` composable provides functions to manage the Playground.
 You can use the `usePlayground` composable to configure the Playground in your `.vitepress/theme/index.js` file, or in any `.md` page/file.
 
 ```ts
-import { usePlayground } from 'vitepress-openapi'
+import { usePlayground } from 'vitepress-openapi/client'
 
 export default {
     async enhanceApp({ app, router, siteData }) {

docs/composables/useTheme.md

@@ -5,7 +5,7 @@ The `useTheme` composable provides functions to configure the theme.
 You can use the `useTheme` composable to configure the theme in your `.vitepress/theme/index.js` file, or in any `.md` page/file.
 
 ```ts
-import { useTheme, locales } from 'vitepress-openapi'
+import { useTheme, locales } from 'vitepress-openapi/client'
 
 export default {
     async enhanceApp({app, router, siteData}) {

docs/customizations/i18n.md

@@ -9,7 +9,7 @@ You can use the `useTheme` composable to configure internationalization in your
 
 ```vue
 <script setup lang="ts">
-import { useTheme, locales } from 'vitepress-openapi'
+import { useTheme, locales } from 'vitepress-openapi/client'
 
 useTheme({
   i18n: {
@@ -44,7 +44,7 @@ If you're using the built-in VitePress i18n features, you can configure the loca
 
 ```vue
 <script setup lang="ts">
-import { useTheme } from 'vitepress-openapi'
+import { useTheme } from 'vitepress-openapi/client'
 import { useData } from 'vitepress'
 
 const { lang } = useData()

docs/customizations/operation-badges.md

@@ -41,7 +41,7 @@ title: vitepress-openapi
 You can also customize the prefix of the badges by setting the `operation.badgePrefix.{badgeName}` key in the i18n messages. For example, in your `.vitepress/theme/index.ts`, before calling `theme.enhanceApp({ app })`, you can set the following:
 
 ```typescript
-import { locales, theme, useTheme } from 'vitepress-openapi'
+import { locales, theme, useTheme } from 'vitepress-openapi/client'
 import DefaultTheme from 'vitepress/theme'
 import 'vitepress-openapi/dist/style.css'
 

docs/customizations/parts/code-samples-example.md

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
-import { useTheme, generateCodeSample } from 'vitepress-openapi'
+import { useTheme, generateCodeSample } from 'vitepress-openapi/client'
 
 const { isDark } = useData()
 

docs/customizations/parts/operation-badges-example.md

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
-import { useTheme } from 'vitepress-openapi'
+import { useTheme } from 'vitepress-openapi/client'
 
 const { isDark } = useData()
 

docs/customizations/parts/operation-tags-slot-example.md

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
-import { DEFAULT_OPERATION_SLOTS, useTheme } from 'vitepress-openapi'
+import { DEFAULT_OPERATION_SLOTS, useTheme } from 'vitepress-openapi/client'
 
 const { isDark } = useData()
 

docs/examples/[exampleSlug].md

@@ -7,7 +7,7 @@ title: vitepress-openapi
 <script setup lang="ts">
 import { onBeforeMount, onBeforeUnmount } from 'vue'
 import { useRoute, useData } from 'vitepress'
-import { useTheme } from 'vitepress-openapi'
+import { useTheme } from 'vitepress-openapi/client'
 
 const route = useRoute()
 

docs/guide/getting-started.md

@@ -58,7 +58,7 @@ In your `.vitepress/theme/index.[js,ts]`, import the theme and the CSS file.
 ```js [JavaScript]
 // .vitepress/theme/index.js
 import DefaultTheme from 'vitepress/theme'
-import { theme } from 'vitepress-openapi' // [!code ++]
+import { theme } from 'vitepress-openapi/client' // [!code ++]
 import 'vitepress-openapi/dist/style.css' // [!code ++]
 
 export default {
@@ -73,7 +73,7 @@ export default {
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 import type { Theme } from 'vitepress'
-import { theme } from 'vitepress-openapi' // [!code ++]
+import { theme } from 'vitepress-openapi/client' // [!code ++]
 import 'vitepress-openapi/dist/style.css' // [!code ++]
 
 export default {
@@ -101,8 +101,8 @@ In your `.vitepress/theme/index.[js,ts]` file, import the OpenAPI specification
 ```js [JavaScript]
 // .vitepress/theme/index.js
 import DefaultTheme from 'vitepress/theme'
-import { theme } from 'vitepress-openapi' // [!code --]
-import { theme, useOpenapi } from 'vitepress-openapi' // [!code ++]
+import { theme } from 'vitepress-openapi/client' // [!code --]
+import { theme, useOpenapi } from 'vitepress-openapi/client' // [!code ++]
 import 'vitepress-openapi/dist/style.css'
 
 import spec from '../../public/openapi.json' // [!code ++]
@@ -126,8 +126,8 @@ export default {
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 import type { Theme } from 'vitepress'
-import { theme } from 'vitepress-openapi' // [!code --]
-import { theme, useOpenapi } from 'vitepress-openapi'// [!code ++]
+import { theme } from 'vitepress-openapi/client' // [!code --]
+import { theme, useOpenapi } from 'vitepress-openapi/client'// [!code ++]
 import 'vitepress-openapi/dist/style.css'
 
 import spec from '../../public/openapi.json' assert { type: 'json' } // [!code ++]
@@ -216,7 +216,7 @@ If you are using `useOpenapi` in your `.vitepress/theme/index.[js,ts]` file, you
 ```js [JavaScript]
 // .vitepress/theme/index.js
 import DefaultTheme from 'vitepress/theme'
-import { theme, useOpenapi } from 'vitepress-openapi'
+import { theme, useOpenapi } from 'vitepress-openapi/client'
 import 'vitepress-openapi/dist/style.css'
 
 import spec from '../../public/openapi.json'
@@ -283,7 +283,7 @@ title: vitepress-openapi
 
 <script setup>
 import { useData } from 'vitepress'
-import { useTheme } from 'vitepress-openapi' // [!code ++]
+import { useTheme } from 'vitepress-openapi/client' // [!code ++]
 import spec from '../public/openapi.json'
 
 const { isDark } = useData()
@@ -305,7 +305,7 @@ title: vitepress-openapi
 
 <script setup>
 import { useRoute, useData } from 'vitepress'
-import { useTheme } from 'vitepress-openapi' // [!code ++]
+import { useTheme } from 'vitepress-openapi/client' // [!code ++]
 import spec from '../public/openapi.json'
 
 const route = useRoute()

docs/sidebar/sidebar-items.md

@@ -20,7 +20,7 @@ The `useSidebar` composable provides functions to generate sidebar items based o
 To generate sidebar items grouped by tags, you can use the `generateSidebarGroups` function. Configure your `.vitepress/config.js` as follows:
 
 ```ts
-import { useSidebar, useOpenapi } from 'vitepress-openapi'
+import { useSidebar, useOpenapi } from 'vitepress-openapi/client'
 import spec from '../public/openapi.json' assert { type: 'json' }
 
 const sidebar = useSidebar({
@@ -60,7 +60,7 @@ module.exports = {
 To generate sidebar items by tags, you can use the `itemsByTags` function. Configure your `.vitepress/config.js` as follows:
 
 ```ts
-import { useSidebar, useOpenapi } from 'vitepress-openapi'
+import { useSidebar, useOpenapi } from 'vitepress-openapi/client'
 import spec from '../public/openapi.json' assert { type: 'json' }
 
 const sidebar = useSidebar({
@@ -100,7 +100,7 @@ module.exports = {
 To generate sidebar items by paths, you can use the `itemsByPaths` function. Configure your `.vitepress/config.js` as follows:
 
 ```ts
-import { useSidebar, useOpenapi } from 'vitepress-openapi'
+import { useSidebar, useOpenapi } from 'vitepress-openapi/client'
 import spec from '../public/openapi.json' assert { type: 'json' }
 
 const sidebar = useSidebar({ spec })

docs/tests/[testSlug].md

@@ -7,7 +7,7 @@ title: vitepress-openapi
 <script setup lang="ts">
 import { onUnmounted } from 'vue'
 import { useRoute, useData } from 'vitepress'
-import { useTheme } from 'vitepress-openapi'
+import { useTheme } from 'vitepress-openapi/client'
 
 const route = useRoute()
 

package.json

@@ -17,13 +17,17 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/vitepress-openapi.es.js",
-      "require": "./dist/vitepress-openapi.umd.js"
+      "import": "./dist/vitepress-openapi.node.es.js",
+      "require": "./dist/vitepress-openapi.node.umd.js"
+    },
+    "./client": {
+      "import": "./dist/vitepress-openapi.client.es.js",
+      "require": "./dist/vitepress-openapi.client.umd.js"
     },
     "./dist/style.css": "./dist/style.css"
   },
-  "main": "./dist/vitepress-openapi.es.js",
-  "module": "./dist/vitepress-openapi.es.js",
+  "main": "./dist/vitepress-openapi.node.es.js",
+  "module": "./dist/vitepress-openapi.node.es.js",
   "types": "./dist/types/index.d.ts",
   "files": [
     "dist",

src/client.ts

@@ -0,0 +1,73 @@
+import type { Component } from 'vue'
+import { watch } from 'vue'
+import type { Awaitable } from 'vitepress'
+import type { EnhanceAppContext, Theme } from 'vitepress/client'
+import * as VueI18n from 'vue-i18n'
+import * as components from './components'
+import { DEFAULT_OPERATION_SLOTS, useTheme } from './composables/useTheme'
+import { useShiki } from './composables/useShiki'
+import type { createOpenApiInstance } from './lib/createOpenApiInstance'
+
+import 'tailwindcss/tailwind.css'
+import './style.css'
+import './json.css'
+
+interface OAEnhanceAppContext extends EnhanceAppContext {
+  openapi: ReturnType<typeof createOpenApiInstance>
+}
+
+interface VPTheme {
+  Layout: Component
+  enhanceApp: (ctx: OAEnhanceAppContext) => Awaitable<void>
+  extends?: Theme
+}
+
+export const theme = {
+  enhanceApp({ app, openapi = null }) {
+    if (openapi) {
+      app.provide('openapi', openapi)
+    }
+
+    const themeConfig = useTheme()
+
+    const i18n: any = VueI18n.createI18n({
+      legacy: false,
+      locale: themeConfig.getI18nConfig().locale.value,
+      fallbackLocale: themeConfig.getI18nConfig().fallbackLocale.value,
+      messages: themeConfig.getI18nConfig().messages,
+    })
+    app.use(i18n)
+
+    watch(
+      () => themeConfig.getLocale(),
+      () => {
+        if (i18n.global.locale.value !== themeConfig.getLocale()) {
+          i18n.global.locale.value = themeConfig.getLocale()
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    for (const key in components) {
+      // @ts-expect-error: no index signature
+      app.component(key, components[key])
+    }
+
+    useShiki().initShiki()
+  },
+} as VPTheme
+
+export { useOpenapi } from './composables/useOpenapi'
+export { useTheme } from './composables/useTheme'
+export { DEFAULT_OPERATION_SLOTS }
+export { useShiki } from './composables/useShiki'
+export { usePlayground } from './composables/usePlayground'
+export { OpenApi } from './lib/OpenApi'
+export { getOpenApiInstance } from './lib/getOpenApiInstance'
+export { createOpenApiInstance } from './lib/createOpenApiInstance'
+export { OARequest } from './lib/codeSamples/request'
+export type { IOARequest } from './lib/codeSamples/request'
+export { generateCodeSample } from './lib/codeSamples/generateCodeSample'
+export { locales } from './locales'

src/composables/useOpenapi.ts

@@ -47,7 +47,11 @@ export function useOpenapi({
   }
 
   function addSchema({ id, spec, config }: { id: string, spec: OpenAPI.Document, config?: PartialUseThemeConfig }) {
-    const openapi = createOpenApiInstance({ spec })
+    const openapi = createOpenApiInstance({
+      spec,
+      defaultTag: config?.spec?.defaultTag,
+      defaultTagDescription: config?.spec?.defaultTagDescription,
+    })
 
     // @ts-expect-error: This adds all the properties of the OpenAPI instance to the schema.
     schemas.set(id, {

src/composables/usePaths.ts

@@ -4,10 +4,21 @@ import { prepareOpenAPI } from '../lib/prepareOpenAPI/prepareOpenAPI'
 
 export function usePaths({
   spec,
+  defaultTag = undefined,
+  defaultTagDescription = undefined,
 }: {
   spec: OpenAPI.Document
+  defaultTag?: string
+  defaultTagDescription?: string
 }) {
-  const openapi = OpenApi({ spec, transformedSpec: prepareOpenAPI(spec) })
+  const openapi = OpenApi({
+    spec,
+    transformedSpec: prepareOpenAPI({
+      spec,
+      defaultTag,
+      defaultTagDescription,
+    }),
+  })
 
   function getTags() {
     return openapi.getFilteredTags()