@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/performance/code-splitting.md

@@ -1,233 +0,0 @@
-# Code Splitting Patterns
-
-Patterns for optimizing bundle size with code splitting.
-
-## Route-Based Splitting
-
-```typescript
-// Next.js does this automatically with the App Router
-// Each route segment is a separate chunk
-
-// app/
-// ├── page.tsx           -> main chunk
-// ├── dashboard/
-// │   └── page.tsx       -> dashboard chunk
-// ├── settings/
-// │   └── page.tsx       -> settings chunk
-// └── admin/
-//     └── page.tsx       -> admin chunk
-
-// Route groups don't affect bundling
-// app/(marketing)/page.tsx  -> same chunk as app/page.tsx
-```
-
-## Component-Level Splitting
-
-```tsx
-// Split heavy components
-import dynamic from 'next/dynamic'
-
-// Editor only loads when needed
-const RichTextEditor = dynamic(
-  () => import('@/components/RichTextEditor'),
-  {
-    loading: () => <EditorSkeleton />,
-    ssr: false // Client-only
-  }
-)
-
-// Chart library only loads on dashboard
-const Charts = dynamic(() => import('@/components/Charts'))
-
-// Code highlighter only loads in docs
-const CodeBlock = dynamic(
-  () => import('@/components/CodeBlock').then(mod => mod.CodeBlock)
-)
-```
-
-## Library Splitting
-
-```tsx
-// Split heavy libraries
-// DON'T import the whole library at top level
-// import { format, parse, addDays, subDays, ... } from 'date-fns'
-
-// DO import specific functions
-import { format } from 'date-fns/format'
-import { parseISO } from 'date-fns/parseISO'
-
-// Or dynamic import for occasional use
-async function formatDate(date: Date) {
-  const { format } = await import('date-fns')
-  return format(date, 'PPP')
-}
-
-// Lodash - use per-function imports
-import debounce from 'lodash/debounce'
-// NOT: import { debounce } from 'lodash'
-```
-
-## Conditional Imports
-
-```tsx
-// Load features based on user role
-'use client'
-
-import dynamic from 'next/dynamic'
-import { useSession } from 'next-auth/react'
-
-const AdminPanel = dynamic(() => import('@/components/AdminPanel'))
-const ModeratorTools = dynamic(() => import('@/components/ModeratorTools'))
-
-export function Dashboard() {
-  const { data: session } = useSession()
-
-  return (
-    <div>
-      <MainContent />
-
-      {session?.user.role === 'ADMIN' && <AdminPanel />}
-      {session?.user.role === 'MODERATOR' && <ModeratorTools />}
-    </div>
-  )
-}
-```
-
-## Bundle Analysis
-
-```typescript
-// next.config.js
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true'
-})
-
-module.exports = withBundleAnalyzer({
-  // ... other config
-})
-
-// Run analysis
-// ANALYZE=true npm run build
-```
-
-## Shared Chunks
-
-```typescript
-// next.config.js
-module.exports = {
-  experimental: {
-    optimizePackageImports: [
-      'lucide-react',
-      '@radix-ui/react-icons',
-      'date-fns',
-      'lodash'
-    ]
-  }
-}
-
-// This automatically tree-shakes these packages
-// import { Search, Menu, X } from 'lucide-react'
-// Only the used icons are bundled
-```
-
-## Parallel Route Loading
-
-```tsx
-// app/dashboard/layout.tsx
-// Load multiple route segments in parallel
-
-export default function DashboardLayout({
-  children,
-  analytics,
-  activity
-}: {
-  children: React.ReactNode
-  analytics: React.ReactNode
-  activity: React.ReactNode
-}) {
-  return (
-    <div className="grid grid-cols-3 gap-4">
-      <div className="col-span-2">{children}</div>
-      <div className="space-y-4">
-        {analytics}
-        {activity}
-      </div>
-    </div>
-  )
-}
-
-// app/dashboard/@analytics/page.tsx
-// app/dashboard/@activity/page.tsx
-// These load in parallel, each as separate chunks
-```
-
-## Module Federation (Micro-frontends)
-
-```typescript
-// next.config.js
-const { NextFederationPlugin } = require('@module-federation/nextjs-mf')
-
-module.exports = {
-  webpack(config, options) {
-    config.plugins.push(
-      new NextFederationPlugin({
-        name: 'host',
-        remotes: {
-          checkout: 'checkout@https://checkout.example.com/remoteEntry.js',
-          analytics: 'analytics@https://analytics.example.com/remoteEntry.js'
-        },
-        shared: {
-          react: { singleton: true },
-          'react-dom': { singleton: true }
-        }
-      })
-    )
-    return config
-  }
-}
-
-// Usage
-const RemoteCheckout = dynamic(
-  () => import('checkout/CheckoutForm'),
-  { ssr: false }
-)
-```
-
-## Preloading Critical Chunks
-
-```tsx
-// Preload chunks that will likely be needed
-import Link from 'next/link'
-
-export function Navigation() {
-  return (
-    <nav>
-      {/* Prefetch on hover/focus */}
-      <Link href="/dashboard" prefetch={true}>
-        Dashboard
-      </Link>
-
-      {/* Disable prefetch for rarely visited */}
-      <Link href="/settings" prefetch={false}>
-        Settings
-      </Link>
-    </nav>
-  )
-}
-
-// Manual preloading
-import dynamic from 'next/dynamic'
-
-const HeavyModal = dynamic(() => import('@/components/HeavyModal'))
-
-// Preload when user shows intent
-function handleMouseEnter() {
-  import('@/components/HeavyModal')
-}
-```
-
-## When to Use
-
-- Large libraries
-- Admin-only features
-- Below-the-fold content
-- Micro-frontend architectures

package/skills/patterns/performance/edge.md

@@ -1,254 +0,0 @@
-# Edge Runtime Patterns
-
-Patterns for Edge functions and middleware.
-
-## Edge API Route
-
-```typescript
-// app/api/geo/route.ts
-export const runtime = 'edge'
-
-export async function GET(request: Request) {
-  // Access geo data from edge
-  const country = request.headers.get('x-vercel-ip-country') ?? 'US'
-  const city = request.headers.get('x-vercel-ip-city') ?? 'Unknown'
-  const region = request.headers.get('x-vercel-ip-country-region')
-
-  return Response.json({
-    country,
-    city,
-    region,
-    timestamp: Date.now()
-  })
-}
-```
-
-## Edge Middleware
-
-```typescript
-// middleware.ts
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-
-export const config = {
-  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
-}
-
-export function middleware(request: NextRequest) {
-  const response = NextResponse.next()
-
-  // Geo-based routing
-  const country = request.geo?.country ?? 'US'
-
-  if (country === 'DE' && !request.nextUrl.pathname.startsWith('/de')) {
-    return NextResponse.redirect(new URL('/de' + request.nextUrl.pathname, request.url))
-  }
-
-  // A/B testing
-  const bucket = request.cookies.get('ab-bucket')?.value ?? Math.random() > 0.5 ? 'a' : 'b'
-
-  if (!request.cookies.get('ab-bucket')) {
-    response.cookies.set('ab-bucket', bucket)
-  }
-
-  response.headers.set('x-ab-bucket', bucket)
-
-  return response
-}
-```
-
-## Edge Authentication
-
-```typescript
-// middleware.ts
-import { jwtVerify } from 'jose'
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-
-const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET)
-
-export async function middleware(request: NextRequest) {
-  // Get token from cookie or header
-  const token = request.cookies.get('token')?.value ??
-    request.headers.get('authorization')?.replace('Bearer ', '')
-
-  if (!token) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  try {
-    const { payload } = await jwtVerify(token, JWT_SECRET)
-
-    // Add user info to headers
-    const response = NextResponse.next()
-    response.headers.set('x-user-id', payload.sub as string)
-    return response
-  } catch {
-    return NextResponse.json({ error: 'Invalid token' }, { status: 401 })
-  }
-}
-
-export const config = {
-  matcher: '/api/protected/:path*'
-}
-```
-
-## Edge Rate Limiting
-
-```typescript
-// middleware.ts
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-
-// Using Vercel KV at edge
-import { kv } from '@vercel/kv'
-
-export async function middleware(request: NextRequest) {
-  const ip = request.ip ?? 'unknown'
-  const key = `rate-limit:${ip}`
-
-  const [count] = await kv
-    .multi()
-    .incr(key)
-    .expire(key, 60)
-    .exec()
-
-  if ((count as number) > 100) {
-    return NextResponse.json(
-      { error: 'Too many requests' },
-      {
-        status: 429,
-        headers: { 'Retry-After': '60' }
-      }
-    )
-  }
-
-  return NextResponse.next()
-}
-
-export const config = {
-  matcher: '/api/:path*'
-}
-```
-
-## Edge Caching
-
-```typescript
-// app/api/cached/route.ts
-export const runtime = 'edge'
-
-export async function GET(request: Request) {
-  const { searchParams } = new URL(request.url)
-  const id = searchParams.get('id')
-
-  // Cache at edge
-  const data = await fetch(`https://api.example.com/data/${id}`, {
-    next: { revalidate: 60 }
-  }).then(r => r.json())
-
-  return Response.json(data, {
-    headers: {
-      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300'
-    }
-  })
-}
-```
-
-## Edge Feature Flags
-
-```typescript
-// middleware.ts
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-
-const FEATURE_FLAGS = {
-  newCheckout: { enabled: true, percentage: 50 },
-  darkMode: { enabled: true, percentage: 100 },
-  betaFeatures: { enabled: false, percentage: 0 }
-}
-
-export function middleware(request: NextRequest) {
-  const response = NextResponse.next()
-
-  // Get or create user bucket
-  let userId = request.cookies.get('user-id')?.value
-
-  if (!userId) {
-    userId = crypto.randomUUID()
-    response.cookies.set('user-id', userId, {
-      httpOnly: true,
-      secure: true,
-      sameSite: 'lax'
-    })
-  }
-
-  // Determine feature flags for user
-  const flags: Record<string, boolean> = {}
-
-  for (const [flag, config] of Object.entries(FEATURE_FLAGS)) {
-    if (!config.enabled) {
-      flags[flag] = false
-      continue
-    }
-
-    // Consistent bucketing based on user ID + flag name
-    const hash = simpleHash(userId + flag)
-    flags[flag] = (hash % 100) < config.percentage
-  }
-
-  // Pass flags via headers
-  response.headers.set('x-feature-flags', JSON.stringify(flags))
-
-  return response
-}
-
-function simpleHash(str: string): number {
-  let hash = 0
-  for (let i = 0; i < str.length; i++) {
-    hash = ((hash << 5) - hash) + str.charCodeAt(i)
-    hash = hash & hash
-  }
-  return Math.abs(hash)
-}
-```
-
-## Edge Redirects
-
-```typescript
-// middleware.ts
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-
-const REDIRECTS: Record<string, string> = {
-  '/old-page': '/new-page',
-  '/blog/old-post': '/articles/new-post',
-  '/products/discontinued': '/'
-}
-
-export function middleware(request: NextRequest) {
-  const path = request.nextUrl.pathname
-
-  // Check redirects
-  const redirect = REDIRECTS[path]
-  if (redirect) {
-    return NextResponse.redirect(new URL(redirect, request.url), 301)
-  }
-
-  // Trailing slash handling
-  if (path !== '/' && path.endsWith('/')) {
-    return NextResponse.redirect(
-      new URL(path.slice(0, -1), request.url),
-      308
-    )
-  }
-
-  return NextResponse.next()
-}
-```
-
-## When to Use
-
-- Geo-routing
-- A/B testing
-- Authentication checks
-- Rate limiting