refactor(0): extract createPluginContext factory to eliminate trinity boilerplate

Introduces `createPluginContext` — a factory that generates the standard
context/plugin/consumer triple for plugin composables from a namespace,
factory function, and optional setup/fallback config.

Migrates 6 plugin composables to the factory:
- usePermissions, useStorage: simple (no setup/fallback)
- useLogger: setup (dev window export) + fallback (safe outside instances)
- useHydration: setup (root mixin) + fallback (SSR-safe)
- useBreakpoints: setup (resize listener via mixin)
- useLocale: fallback (safe outside instances)

Removes ~350 lines of identical trinity boilerplate across the codebase.

Author: johnleider

packages/0/src/composables/createPluginContext/index.ts

@@ -0,0 +1,125 @@
+/**
+ * @module createPluginContext
+ *
+ * @see https://0.vuetifyjs.com/composables/foundation/create-plugin-context
+ *
+ * @remarks
+ * Factory for generating the standard context/plugin/consumer triple for plugin composables.
+ *
+ * Eliminates boilerplate across plugin composables by generating three standard functions:
+ * - `createXContext()` — wraps a composable in a named DI context
+ * - `createXPlugin()` — installs the context as a Vue plugin
+ * - `useX()` — retrieves the current context instance
+ *
+ * Supports an optional `setup` callback for plugin-level initialization (adapters, mixins, etc.)
+ * and an optional `fallback` factory for composables that must work outside component instances.
+ */
+
+// Foundational
+import { createContext, useContext } from '#v0/composables/createContext'
+import { createPlugin } from '#v0/composables/createPlugin'
+import { createTrinity } from '#v0/composables/createTrinity'
+
+// Utilities
+import { instanceExists } from '#v0/utilities/instance'
+
+// Types
+import type { Plugin } from '#v0/composables/createPlugin'
+import type { ContextTrinity } from '#v0/composables/createTrinity'
+import type { App } from 'vue'
+
+export interface PluginContextConfig<E> {
+  /**
+   * Optional plugin setup callback, called once per Vue app after context provision.
+   * Use for adapter initialization, Vue app mixins, global side effects, etc.
+   */
+  setup?: (context: E, app: App) => void
+  /**
+   * Optional fallback factory. When provided, the generated `useX` consumer uses the
+   * defensive pattern: returns the fallback when called outside a component instance or
+   * when the context is not found. Required for composables that may be consumed outside
+   * component setup (e.g. useLogger, useLocale, useHydration).
+   *
+   * Receives the requested namespace so error messages can include it.
+   */
+  fallback?: (namespace: string) => E
+}
+
+/**
+ * Creates the three standard functions for a plugin composable.
+ *
+ * @param defaultNamespace The default DI namespace string (e.g. `'v0:logger'`).
+ * @param factory Function that creates the composable context instance from options.
+ * @param config Optional setup callback and fallback factory.
+ * @returns A readonly tuple: `[createXContext, createXPlugin, useX]`.
+ *
+ * @example
+ * ```ts
+ * // Simple — no setup or fallback
+ * export const [createStorageContext, createStoragePlugin, useStorage] =
+ *   createPluginContext('v0:storage', options => createStorage(options))
+ *
+ * // With fallback — safe outside component instances
+ * export const [createLoggerContext, createLoggerPlugin, useLogger] =
+ *   createPluginContext('v0:logger', options => createLogger(options), {
+ *     fallback: ns => createFallbackLogger(ns),
+ *     setup: (context) => {
+ *       if (__DEV__ && IN_BROWSER) (window as any).__v0Logger__ = context
+ *     },
+ *   })
+ * ```
+ */
+export function createPluginContext<
+  O extends { namespace?: string } = Record<never, never>,
+  E = unknown,
+> (
+  defaultNamespace: string,
+  factory: (options: Omit<O, 'namespace'>) => E,
+  config?: PluginContextConfig<E>,
+): readonly [
+  <_E extends E = E>(_options?: O) => ContextTrinity<_E>,
+  (_options?: O) => Plugin,
+  <_E extends E = E>(namespace?: string) => _E,
+] {
+  function createXContext<_E extends E = E> (_options: O = {} as O): ContextTrinity<_E> {
+    const { namespace = defaultNamespace, ...options } = _options as O & { namespace?: string }
+    const [_use, _provide] = createContext<_E>(namespace)
+    const context = factory(options as Omit<O, 'namespace'>) as _E
+
+    function provide (_context: _E = context, app?: App): _E {
+      return _provide(_context, app)
+    }
+
+    return createTrinity<_E>(_use, provide, context)
+  }
+
+  function createXPlugin (_options: O = {} as O): Plugin {
+    const { namespace = defaultNamespace, ...options } = _options as O & { namespace?: string }
+    const [, provide, context] = createXContext({ ...options, namespace } as O)
+
+    return createPlugin({
+      namespace,
+      provide: app => {
+        provide(context, app)
+      },
+      setup: config?.setup
+        ? app => config.setup!(context, app)
+        : undefined,
+    })
+  }
+
+  function useX<_E extends E = E> (namespace = defaultNamespace): _E {
+    if (config?.fallback) {
+      const instance = config.fallback(namespace) as _E
+      if (!instanceExists()) return instance
+      try {
+        return useContext<_E>(namespace, instance)
+      } catch {
+        return instance
+      }
+    }
+    return useContext<_E>(namespace)
+  }
+
+  return [createXContext, createXPlugin, useX] as const
+}

packages/0/src/composables/index.ts

@@ -3,6 +3,7 @@ export * from './createBreadcrumbs'
 export * from './createContext'
 export * from './createDataTable'
 export * from './createPlugin'
+export * from './createPluginContext'
 export * from './createTrinity'
 export * from './toArray'
 export * from './toReactive'

packages/0/src/composables/useBreakpoints/index.ts

@@ -21,9 +21,7 @@
 import { IN_BROWSER } from '#v0/constants/globals'
 
 // Foundational
-import { createContext, useContext } from '#v0/composables/createContext'
-import { createPlugin } from '#v0/composables/createPlugin'
-import { createTrinity } from '#v0/composables/createTrinity'
+import { createPluginContext } from '#v0/composables/createPluginContext'
 
 // Composables
 import { useWindowEventListener } from '#v0/composables/useEventListener'
@@ -34,8 +32,7 @@ import { isNull, isNumber, mergeDeep } from '#v0/utilities'
 import { onScopeDispose, readonly, shallowRef, watch } from 'vue'
 
 // Types
-import type { ContextTrinity } from '#v0/composables/createTrinity'
-import type { App, ShallowRef } from 'vue'
+import type { ShallowRef } from 'vue'
 
 export type BreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
 
@@ -213,144 +210,33 @@ export function createBreakpoints<
   } as E
 }
 
-/**
- * Creates a new breakpoints context.
- *
- * @param options The options for the breakpoints context.
- * @template E The type of the breakpoints context.
- * @returns A new breakpoints context.
- *
- * @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
- *
- * @example
- * ```ts
- * import { createBreakpointsContext } from '@vuetify/v0'
- *
- * export const [useBreakpoints, provideBreakpoints, context] = createBreakpointsContext({
- *   namespace: 'v0:breakpoints',
- *   mobileBreakpoint: 'sm',
- * })
- * ```
- */
-export function createBreakpointsContext<
-  E extends BreakpointsContext = BreakpointsContext,
-> (_options: BreakpointsContextOptions = {}): ContextTrinity<E> {
-  const { namespace = 'v0:breakpoints', ...options } = _options
-  const [useBreakpointsContext, _provideBreakpointsContext] = createContext<E>(namespace)
-  const context = createBreakpoints<E>(options)
-
-  function provideBreakpointsContext (_context: E = context, app?: App): E {
-    return _provideBreakpointsContext(_context, app)
-  }
-
-  return createTrinity<E>(useBreakpointsContext, provideBreakpointsContext, context)
-}
-
-/**
- * Creates a new breakpoints plugin.
- *
- * @param options The options for the breakpoints plugin.
- * @template E The type of the breakpoints context.
- * @returns A new breakpoints plugin.
- *
- * @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
- *
- * @example
- * ```ts
- * import { createApp } from 'vue'
- * import { createBreakpointsPlugin } from '@vuetify/v0'
- * import App from './App.vue'
- *
- * const app = createApp(App)
- *
- * app.use(
- *   createBreakpointsPlugin({
- *     namespace: 'v0:breakpoints',
- *     mobileBreakpoint: 'md',
- *     breakpoints: {
- *       xs: 0,
- *       sm: 600,
- *       md: 840,
- *       lg: 1145,
- *       xl: 1545,
- *       xxl: 2138,
- *     },
- *   })
- * )
- *
- * app.mount('#app')
- * ```
- */
-export function createBreakpointsPlugin<
-  E extends BreakpointsContext = BreakpointsContext,
-> (_options: BreakpointsPluginOptions = {}) {
-  const { namespace = 'v0:breakpoints', ...options } = _options
-  const [, provideBreakpointsContext, context] = createBreakpointsContext<E>({ ...options, namespace })
-
-  return createPlugin({
-    namespace,
-    provide: (app: App) => {
-      provideBreakpointsContext(context, app)
+export const [createBreakpointsContext, createBreakpointsPlugin, useBreakpoints] =
+  createPluginContext<BreakpointsContextOptions, BreakpointsContext>(
+    'v0:breakpoints',
+    options => createBreakpoints(options),
+    {
+      setup: (context, app) => {
+        app.mixin({
+          mounted () {
+            if (!isNull(this.$parent)) return
+
+            const hydration = useHydration()
+
+            function listener () {
+              context.update()
+            }
+
+            const unwatch = watch(hydration.isHydrated, hydrated => {
+              if (hydrated) listener()
+            }, { immediate: true })
+
+            const cleanup = useWindowEventListener('resize', listener, { passive: true })
+            onScopeDispose(() => {
+              cleanup()
+              unwatch()
+            }, true)
+          },
+        })
+      },
     },
-    setup: (app: App) => {
-      app.mixin({
-        mounted () {
-          if (!isNull(this.$parent)) return
-
-          const hydration = useHydration()
-
-          function listener () {
-            context.update()
-          }
-
-          const unwatch = watch(hydration.isHydrated, hydrated => {
-            if (hydrated) listener()
-          }, { immediate: true })
-
-          const cleanup = useWindowEventListener('resize', listener, { passive: true })
-          onScopeDispose(() => {
-            cleanup()
-            unwatch()
-          }, true)
-        },
-      })
-    },
-  })
-}
-
-/**
- * Returns the current breakpoints instance.
- *
- * @param namespace The namespace for the breakpoints context. Defaults to `v0:breakpoints`.
- * @returns The current breakpoints instance.
- *
- * @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
- *
- * @example
- * ```vue
- * <script setup lang="ts">
- *   import { useBreakpoints } from '@vuetify/v0'
- *
- *   // Destructure for template auto-unwrapping
- *   const { isMobile, mdAndUp } = useBreakpoints()
- *
- *   // In script, use .value
- *   if (isMobile.value) {
- *     console.log('Mobile detected')
- *   }
- * </script>
- *
- * <template>
- *   <div class="pa-4">
- *     <!-- Destructured refs auto-unwrap in templates -->
- *     <p v-if="isMobile">Mobile layout active</p>
- *     <p v-else-if="mdAndUp">Medium and up layout active</p>
- *   </div>
- * </template>
- * ```
- */
-export function useBreakpoints<
-  E extends BreakpointsContext = BreakpointsContext,
-> (namespace = 'v0:breakpoints'): E {
-  return useContext<E>(namespace)
-}
+  )

packages/0/src/composables/useHydration/index.test.ts

@@ -255,9 +255,8 @@ describe('useHydration SSR', () => {
   })
 
   it('useHydration should return fallback when no Vue instance exists', async () => {
-    vi.doMock('#v0/utilities', () => ({
+    vi.doMock('#v0/utilities/instance', () => ({
       instanceExists: () => false,
-      isNull: (v: unknown) => v === null,
     }))
 
     const { useHydration: useHydrationSSR } = await import('./index')