23 — Design Patterns

<template>
  <!-- ── Parent: full control over rendering ── -->
  <RenderlessToggle v-slot="{ isOpen, toggle, close }">
    <div>
      <button @click="toggle">{{ isOpen ? 'Close' : 'Open' }}</button>

      <div v-if="isOpen" class="panel">
        <p>Panel content</p>
        <button @click="close">Close X</button>
      </div>
    </div>
  </RenderlessToggle>

  <!-- ── Same logic, different template: ── -->
  <RenderlessToggle v-slot="{ isOpen, toggle }">
    <details :open="isOpen" @toggle="toggle">
      <summary>Click to {{ isOpen ? 'collapse' : 'expand' }}</summary>
      <p>Content</p>
    </details>
  </RenderlessToggle>
</template>

import { ref, computed, type Ref, type MaybeRefOrGetter } from 'vue'

// ── Base composable: useFetch ───────────────────────────
function useFetch<T>(url: MaybeRefOrGetter<string>) {
  const data: Ref<T | null> = ref(null) as Ref<T | null>
  const loading = ref(false)
  const error = ref<Error | null>(null)
  // ... fetch logic ...
  return { data, loading, error }
}

// ── Higher-order composable: wraps useFetch with caching ──
function useCachedFetch<T>(url: MaybeRefOrGetter<string>, ttl = 60_000) {
  const { data, loading, error } = useFetch<T>(url)
  const lastFetch = ref(0)
  const isStale = computed(() => Date.now() - lastFetch.value > ttl)

  async function refresh() {
    if (!isStale.value && data.value) return data.value
    // ... refetch ...
    lastFetch.value = Date.now()
  }

  return { data, loading, error, isStale, refresh }
}

// ── Composing multiple composables: useUserWithPosts ──
function useUserWithPosts(userId: MaybeRefOrGetter<number>) {
  // ── Compose two fetches into one composable ──
  const user = useCachedFetch(() => `/api/users/${toValue(userId)}`)
  const posts = useCachedFetch(() => `/api/users/${toValue(userId)}/posts`)

  const isLoading = computed(() => user.loading.value || posts.loading.value)
  const hasError = computed(() => !!user.error.value || !!posts.error.value)

  return {
    user: user.data,
    posts: posts.data,
    isLoading,
    hasError,
    refreshUser: user.refresh,
    refreshPosts: posts.refresh,
  }
}

import { provide, inject, ref, readonly, type Ref, type InjectionKey } from 'vue'

// ── InjectionKey: typed symbol for type-safe DI ──────────
const NotificationContextKey: InjectionKey<{
  notifications: Readonly<Ref<Notification[]>>
  notify: (message: string, type?: 'info' | 'error') => void
  dismiss: (id: string) => void
}> = Symbol('notifications')

// ── Provider: set up at app or component root ──────────
export function provideNotifications() {
  const notifications = ref<Notification[]>([])

  function notify(message: string, type: 'info' | 'error' = 'info') {
    const id = crypto.randomUUID()
    notifications.value.push({ id, message, type, timestamp: Date.now() })
    setTimeout(() => dismiss(id), 5000)  // auto-dismiss after 5s
  }

  function dismiss(id: string) {
    notifications.value = notifications.value.filter(n => n.id !== id)
  }

  const context = {
    notifications: readonly(notifications),  // read-only for consumers
    notify,
    dismiss,
  }

  provide(NotificationContextKey, context)
  return context  // provider also gets the mutable API
}

// ── Consumer: use in any descendant ─────────────────────
export function useNotifications() {
  const ctx = inject(NotificationContextKey)
  if (!ctx) {
    throw new Error('useNotifications() must be used within a component that calls provideNotifications()')
  }
  return ctx
}

// ── Usage in root component: ────────────────────────────
// provideNotifications()
// ── Usage in any descendant: ────────────────────────────
// const { notify, dismiss, notifications } = useNotifications()
// notify('Saved!', 'info')  → adds a notification, auto-dismisses in 5s

import { ref, type Ref } from 'vue'

// ── Event bus: for cross-component communication without Pinia ──
// Use sparingly — prefer Pinia for state, provide/inject for DI.
// Event bus is for ephemeral events (notifications, toasts), not state.

type EventHandler<T = any> = (payload: T) => void

class EventBus {
  private handlers = new Map<string, Set<EventHandler>>()

  on<T>(event: string, handler: EventHandler<T>): () => void {
    if (!this.handlers.has(event)) {
      this.handlers.set(event, new Set())
    }
    this.handlers.get(event)!.add(handler as EventHandler)

    // ── Return unsubscribe function (composable cleanup pattern) ──
    return () => this.handlers.get(event)?.delete(handler as EventHandler)
  }

  emit<T>(event: string, payload: T): void {
    this.handlers.get(event)?.forEach(handler => handler(payload))
  }

  off(event: string): void {
    this.handlers.delete(event)
  }
}

export const bus = new EventBus()

// ── Usage in composable with cleanup: ───────────────────
import { onScopeDispose } from 'vue'

export function useEventBus(event: string, handler: EventHandler) {
  const unsubscribe = bus.on(event, handler)
  onScopeDispose(() => unsubscribe())  // auto-cleanup on component unmount
}

// ── Emitting: ──────────────────────────────────────────
// bus.emit('user:login', { id: 42, name: 'Ada' })
// ── Listening: ──────────────────────────────────────────
// useEventBus('user:login', (payload) => { console.log(payload) })

# ── Feature-based: group by business domain, not by file type ──
# Each feature is self-contained: components, composables, stores, types.

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   │   ├── LoginForm.vue
│   │   │   └── AuthGuard.vue
│   │   ├── composables/
│   │   │   └── useAuth.ts
│   │   ├── stores/
│   │   │   └── authStore.ts
│   │   ├── types/
│   │   │   └── auth.ts
│   │   └── index.ts          # public API: export only what other features need
│   ├── products/
│   │   ├── components/
│   │   │   ├── ProductList.vue
│   │   │   └── ProductDetail.vue
│   │   ├── composables/
│   │   │   └── useProducts.ts
│   │   ├── stores/
│   │   │   └── productStore.ts
│   │   ├── types/
│   │   │   └── product.ts
│   │   └── index.ts
│   └── checkout/
│       └── ...
├── shared/                   # cross-feature utilities, types, components
│   ├── components/
│   │   └── BaseButton.vue
│   ├── composables/
│   │   └── useFetch.ts
│   └── utils/
└── app/                      # app-level config, routing, providers
    ├── App.vue
    └── router.ts

// ── Feature barrel: export only the public API ──────────
// Other features import from the index, not internal files.
export { useAuth } from './composables/useAuth'
export { useAuthStore } from './stores/authStore'
export type { User, Credentials } from './types/auth'
export { default as LoginForm } from './components/LoginForm.vue'

// ── Internal files are NOT exported — they're implementation details ──
// This creates a clear boundary: features communicate through their public API.
// Other features: import { useAuth } from '@/features/auth' (not from auth/composables/useAuth)