fix(vite): improved integration API

Author: harlan-zw

packages/vite/package.json

@@ -67,6 +67,7 @@
     "magic-string": "^0.26.2",
     "mlly": "^0.5.12",
     "pathe": "^0.3.4",
+    "schema-dts": "^1.1.0",
     "unplugin": "^0.9.0"
   },
   "devDependencies": {

packages/vite/src/index.ts

@@ -1,6 +1,35 @@
 import { RootSchemas, schemaOrgComponents } from '@vueuse/schema-org'
 import type { SchemaOrgResolverFn } from './types'
 
+export interface MetaInput {
+  host: string
+  url?: string
+  path?: string
+  currency?: string
+  image?: string
+  inLanguage?: string
+  title?: string
+  description?: string
+  datePublished?: string
+  dateModified?: string
+  /**
+   * @deprecated use `language`
+   */
+  defaultLanguage?: string
+  /**
+   * @deprecated use `currency`
+   */
+  defaultCurrency?: string
+  /**
+   * @deprecated use `host`
+   */
+  canonicalHost?: string
+  /**
+   * @deprecated use `url` or `path`
+   */
+  canonicalUrl?: string
+}
+
 export interface SchemaOrgResolverOptions {
   /**
    * prefix for headless ui components used in templates

packages/vite/src/plugins.ts

@@ -1,36 +1,49 @@
 import { createUnplugin } from 'unplugin'
 import { resolvePath } from 'mlly'
-import { dirname, join } from 'pathe'
+import { dirname } from 'pathe'
 
 export interface PluginOptions {
-  mock: boolean
+  /**
+   * Should the runtime be swapped out with a mock one, used for SSR-only mode.
+   */
+  mock?: boolean
+  /**
+   * Whether to use schema-dts types on define functions
+   */
+  full?: boolean
 }
 
 export const schemaOrgSwapAliases = () => createUnplugin<PluginOptions>((args) => {
   return {
-    name: '@vueuse/schema-org:ssr-mock-plugin',
+    name: '@vueuse/schema-org:aliases',
     enforce: 'pre',
     vite: {
-      async config(config) {
+      async config(config, ctx) {
         config.resolve = config.resolve || {}
         config.resolve.alias = config.resolve.alias || {}
+        args = args || {}
+
+        if (typeof args.mock === 'undefined')
+          args.mock = !ctx.ssrBuild
 
         const SchemaOrgPkg = '@vueuse/schema-org'
         // avoid unwanted behavior with different package managers
+
         // @ts-expect-error untyped
         config.resolve.alias[SchemaOrgPkg] = dirname(await resolvePath(SchemaOrgPkg))
 
         if (args?.mock) {
+          const mockPath = await resolvePath(`${SchemaOrgPkg}/runtime/mock`)
           // @ts-expect-error untyped
-          config.resolve.alias['#vueuse/schema-org/provider'] = '@vueuse/schema-org/runtime/mock'
+          config.resolve.alias['#vueuse/schema-org/provider'] = mockPath
           // @ts-expect-error untyped
-          config.resolve.alias['#vueuse/schema-org/runtime'] = '@vueuse/schema-org/runtime/mock'
+          config.resolve.alias['#vueuse/schema-org/runtime'] = mockPath
         }
         else {
           // @ts-expect-error untyped
-          config.resolve.alias['#vueuse/schema-org/provider'] = await resolvePath(join(SchemaOrgPkg, 'lite'))
+          config.resolve.alias['#vueuse/schema-org/provider'] = await resolvePath(`${SchemaOrgPkg}/${args?.full ? 'full' : 'simple'}`)
           // @ts-expect-error untyped
-          config.resolve.alias['#vueuse/schema-org/runtime'] = await resolvePath(join(SchemaOrgPkg, 'runtime'))
+          config.resolve.alias['#vueuse/schema-org/runtime'] = await resolvePath(`${SchemaOrgPkg}/runtime`)
         }
       },
     },

packages/vite/src/vitepress.ts

@@ -1,23 +1,22 @@
-// @ts-expect-error untyped
-import type { ProviderOptions } from '@vueuse/schema-org'
 import { createSchemaOrg } from '@vueuse/schema-org'
 import type { EnhanceAppContext } from 'vitepress'
 import { createHead } from '@vueuse/head'
 import { watch } from 'vue-demi'
+import type { MetaInput } from './'
 
-export function installSchemaOrg(ctx: EnhanceAppContext, options: ProviderOptions) {
+export function installSchemaOrg(ctx: EnhanceAppContext, meta: MetaInput) {
   // check if `createHead` has already been done
   let head = ctx.app._context.provides.usehead
   if (!head) {
     head = createHead()
     ctx.app.use(head)
   }
 
-  const schemaOrg = createSchemaOrg({
-    ...options,
+  const client = createSchemaOrg({
     meta() {
       return {
         ...ctx.siteData.value,
+        ...meta,
       }
     },
     updateHead(fn) {
@@ -27,10 +26,10 @@ export function installSchemaOrg(ctx: EnhanceAppContext, options: ProviderOption
   })
 
   watch(() => ctx.router.route.data.relativePath, () => {
-    // @todo
+    client.generateSchema()
   })
 
-  ctx.app.use(schemaOrg)
-  schemaOrg.setupDOM()
-  return schemaOrg
+  ctx.app.use(client)
+  client.setupDOM()
+  return client
 }

packages/vite/src/vitesse.ts

@@ -1,10 +1,9 @@
-// @ts-expect-error untyped
-import type { ProviderOptions } from '@vueuse/schema-org'
 import { createSchemaOrg } from '@vueuse/schema-org'
 import type { ViteSSGContext } from 'vite-ssg'
 import { watch } from 'vue-demi'
+import type { MetaInput } from './'
 
-export function installSchemaOrg(ctx: ViteSSGContext, options: ProviderOptions) {
+export function installSchemaOrg(ctx: ViteSSGContext, meta: MetaInput) {
   const ssr = !ctx.isClient
 
   const client = createSchemaOrg({
@@ -25,7 +24,7 @@ export function installSchemaOrg(ctx: ViteSSGContext, options: ProviderOptions)
 
       return {
         path: ctx.router.currentRoute.value.path,
-        ...options.meta ?? {},
+        ...meta ?? {},
         ...ctx.router.currentRoute.value.meta,
       }
     },