fix(core,vue): missing subpath exports

Author: harlan-zw

packages/unhead/package.json

@@ -44,6 +44,11 @@
       "types": "./dist/client.d.ts",
       "import": "./dist/client.mjs",
       "require": "./dist/client.cjs"
+    },
+    "./legacy": {
+      "types": "./dist/legacy.d.ts",
+      "import": "./dist/legacy.mjs",
+      "require": "./dist/legacy.cjs"
     }
   },
   "main": "dist/index.cjs",

packages/vue/build.config.ts

@@ -9,9 +9,10 @@ export default defineBuildConfig({
   externals: ['vue'],
   entries: [
     { input: 'src/index', name: 'index' },
-    { input: 'src/components/index', name: 'components' },
+    { input: 'src/components', name: 'components' },
     { input: 'src/server', name: 'server' },
     { input: 'src/client', name: 'client' },
     { input: 'src/legacy/index', name: 'legacy' },
+    { input: 'src/types', name: 'types' },
   ],
 })

packages/vue/legacy.d.ts

@@ -1 +1 @@
-export * from './dist/server'
+export * from './dist/legacy'

packages/vue/package.json

@@ -40,6 +40,16 @@
       "types": "./dist/client.d.ts",
       "import": "./dist/client.mjs",
       "require": "./dist/client.cjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.mjs",
+      "require": "./dist/types.cjs"
+    },
+    "./legacy": {
+      "types": "./dist/legacy.d.ts",
+      "import": "./dist/legacy.mjs",
+      "require": "./dist/legacy.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -55,13 +65,21 @@
       ],
       "client": [
         "dist/client"
+      ],
+      "types": [
+        "dist/types"
+      ],
+      "legacy": [
+        "dist/legacy"
       ]
     }
   },
   "files": [
     "client.d.ts",
     "dist",
-    "server.d.ts"
+    "server.d.ts",
+    "types.d.ts",
+    "legacy.d.ts"
   ],
   "scripts": {
     "build": "unbuild .",

packages/vue/src/VueHeadMixin.ts

@@ -1,5 +1,5 @@
 import { getCurrentInstance } from 'vue'
-import { useHead } from './composables/useHead'
+import { useHead } from './composables'
 
 export const VueHeadMixin = {
   created() {

packages/vue/src/autoImports.ts

@@ -1,9 +1,5 @@
 import { composableNames } from '@unhead/shared'
 
-const coreComposableNames = [
-  'injectHead',
-]
-
 export const unheadVueComposablesImports = {
-  '@unhead/vue': [...coreComposableNames, ...composableNames],
+  '@unhead/vue': ['injectHead', ...composableNames],
 }

packages/vue/src/components/Head.ts packages/vue/src/components.ts

@@ -1,7 +1,7 @@
 import type { DefineComponent, Ref, VNode } from 'vue'
-import type { ReactiveHead } from '../types'
+import type { ReactiveHead } from './types'
 import { defineComponent, onBeforeUnmount, ref, watchEffect } from 'vue'
-import { useHead } from '../composables/useHead'
+import { useHead } from './composables'
 
 function addVNodeToHeadObj(node: VNode, obj: ReactiveHead) {
   const nodeType = node.type

packages/vue/src/components/index.ts

@@ -0,0 +1,112 @@
+import type { ActiveHeadEntry, HeadEntryOptions, MergeHead } from '@unhead/schema'
+import type {
+  Ref,
+} from 'vue'
+import type {
+  ReactiveHead,
+  UseHeadInput,
+  UseHeadOptions,
+  UseHeadSafeInput,
+  UseSeoMetaInput,
+  VueHeadClient,
+} from './types'
+import { unpackMeta, whitelistSafeInput } from '@unhead/shared'
+import {
+  getCurrentInstance,
+  hasInjectionContext,
+  inject,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue'
+import { headSymbol } from './install'
+import { resolveUnrefHeadInput } from './utils'
+
+export function injectHead() {
+  if (hasInjectionContext()) {
+    // fallback to vue context
+    const instance = inject<VueHeadClient<MergeHead>>(headSymbol)
+    if (!instance) {
+      throw new Error('useHead() was called without provide context, ensure you call it through the setup() function.')
+    }
+    return instance
+  }
+  throw new Error('useHead() was called without provide context, ensure you call it through the setup() function.')
+}
+
+export function useHead<T extends MergeHead>(input: UseHeadInput<T>, options: UseHeadOptions = {}): ActiveHeadEntry<UseHeadInput<T>> {
+  const head = options.head || injectHead()
+  return head.ssr ? head.push(input, options as HeadEntryOptions) : clientUseHead(head, input, options as HeadEntryOptions)
+}
+
+function clientUseHead<T extends MergeHead>(head: VueHeadClient<T>, input: UseHeadInput<T>, options: HeadEntryOptions = {}): ActiveHeadEntry<UseHeadInput<T>> {
+  const deactivated = ref(false)
+
+  const resolvedInput: Ref<ReactiveHead> = ref({})
+  watchEffect(() => {
+    resolvedInput.value = deactivated.value
+      ? {}
+      : resolveUnrefHeadInput(input)
+  })
+  const entry: ActiveHeadEntry<UseHeadInput<T>> = head.push(resolvedInput.value, options)
+  watch(resolvedInput, (e) => {
+    entry.patch(e)
+  })
+
+  const vm = getCurrentInstance()
+  if (vm) {
+    onBeforeUnmount(() => {
+      entry.dispose()
+    })
+    onDeactivated(() => {
+      deactivated.value = true
+    })
+    onActivated(() => {
+      deactivated.value = false
+    })
+  }
+  return entry
+}
+
+export function useHeadSafe(input: UseHeadSafeInput, options: UseHeadOptions = {}): ActiveHeadEntry<any> {
+  // @ts-expect-error untyped
+  return useHead(input, { ...options, transform: whitelistSafeInput })
+}
+
+export function useSeoMeta(input: UseSeoMetaInput, options?: UseHeadOptions): ActiveHeadEntry<any> {
+  const { title, titleTemplate, ...meta } = input
+  return useHead({
+    title,
+    titleTemplate,
+    // @ts-expect-error runtime type
+    _flatMeta: meta,
+  }, {
+    ...options,
+    transform(t) {
+      // @ts-expect-error runtime type
+      const meta = unpackMeta({ ...t._flatMeta })
+      // @ts-expect-error runtime type
+      delete t._flatMeta
+      return {
+        // @ts-expect-error runtime type
+        ...t,
+        meta,
+      }
+    },
+  })
+}
+
+export function useServerHead<T extends MergeHead>(input: UseHeadInput<T>, options: UseHeadOptions = {}): ActiveHeadEntry<any> {
+  return useHead<T>(input, { ...options, mode: 'server' })
+}
+
+export function useServerHeadSafe(input: UseHeadSafeInput, options: UseHeadOptions = {}): ActiveHeadEntry<any> {
+  return useHeadSafe(input, { ...options, mode: 'server' })
+}
+
+export function useServerSeoMeta(input: UseSeoMetaInput, options?: UseHeadOptions): ActiveHeadEntry<UseSeoMetaInput> {
+  return useSeoMeta(input, { ...options, mode: 'server' })
+}

packages/vue/src/composables.ts

@@ -19,14 +19,7 @@ export {
 
 // composables
 export * from './autoImports'
-export * from './composables/injectHead'
-export * from './composables/useHead'
-
-export * from './composables/useHeadSafe'
-export * from './composables/useSeoMeta'
-export * from './composables/useServerHead'
-export * from './composables/useServerHeadSafe'
-export * from './composables/useServerSeoMeta'
+export * from './composables'
 // types
 export * from './types'
 export * from './VueHeadMixin'