@pro-laico/create-atomic-payload 0.1.4

package/template/src/components/child/SSRProps.ts

@@ -0,0 +1,381 @@
+import 'server-only' //DO NOT REMOVE
+import { createBlurUp } from '@mux/blurup'
+import { PassThroughs, ChildBlocks, StaticDataAttributes } from '@/ts/types'
+import postHogPropertyApplicator from '@/utilities/propertyApplicatorUtility'
+
+type PassThrough = { p: Record<string, unknown>; da: Record<string, string> }
+
+function formatStaticDataAttributes(staticDataAttributes: StaticDataAttributes): Record<string, string> | undefined {
+  if (!staticDataAttributes) return undefined
+  return staticDataAttributes
+    .filter((item) => item?.key && typeof item.key === 'string' && item.key.trim() !== '')
+    .reduce(
+      (acc, item) => {
+        acc[`data-${item.key}`] = item.value === 'true' ? '' : item.value
+        return acc
+      },
+      {} as Record<string, string>,
+    )
+}
+
+const breakpoints = {
+  '3xl': 1920,
+  '2xl': 1536,
+  xl: 1280,
+  lg: 1024,
+  md: 768,
+  sm: 640,
+}
+
+/** Securely generates all props that should be generated server side. */
+export async function SSRProps<T extends ChildBlocks[number]>(block: T): Promise<PassThroughs> {
+  const { blockType, cid, contentPostHogProperty, ClassName } = block
+
+  /** Content Pass Throughs */
+  const c: PassThrough & { children?: React.ReactNode } = { p: {}, da: {} }
+  /** Trigger Pass Throughs */
+  const t: PassThrough = { p: {}, da: {} }
+  /** Backdrop Pass Throughs */
+  const b: Omit<PassThrough, 'da'> = { p: {} }
+  /** Dialog Pass Throughs */
+  const di: Omit<PassThrough, 'children' | 'da'> = { p: {} }
+  /** Popover Pass Throughs */
+  const pop: Omit<PassThrough, 'children' | 'da'> = { p: {} }
+
+  // Universal Static Props
+  if (cid) c.p.id = cid
+  if (ClassName) c.p.className = ClassName
+  if (contentPostHogProperty) c.p = { ...c.p, ...postHogPropertyApplicator(contentPostHogProperty) }
+
+  if ('staticDataAttributes' in block && block.staticDataAttributes && Object.keys(block.staticDataAttributes).length > 0) {
+    const dataAttributes = formatStaticDataAttributes(block.staticDataAttributes)
+    if (dataAttributes) c.da = { ...c.da, ...dataAttributes }
+  }
+
+  // Static Props Based On Block Type
+  switch (blockType) {
+    case 'AtomicChild': {
+      const { type } = block
+
+      switch (type) {
+        case 'tag':
+          const { htmlFor } = block
+          if (htmlFor) c.p.htmlFor = htmlFor
+          break
+        case 'button': {
+          const { buttonType, triggerClassName, triggerPostHogProperty } = block
+
+          if (block?.triggerStaticDataAttributes && Object.keys(block.triggerStaticDataAttributes).length > 0) {
+            const dataAttributes = formatStaticDataAttributes(block.triggerStaticDataAttributes)
+            if (dataAttributes) t.da = { ...t.da, ...dataAttributes }
+          }
+
+          if (triggerClassName) t.p.className = triggerClassName
+          if (triggerPostHogProperty) t.p = { ...t.p, ...postHogPropertyApplicator(triggerPostHogProperty) }
+          if ('backdropClassName' in block && block.backdropClassName) b.p.className = block.backdropClassName
+
+          switch (buttonType) {
+            case 'link': {
+              const {
+                linkType,
+                internalLink,
+                externalLink,
+                download,
+                email,
+                phone,
+                anchor,
+                parameters,
+                newTab,
+                noOpener,
+                noReferrer,
+                ariaLabel,
+                prefetch,
+              } = block
+
+              let href = ''
+              switch (linkType) {
+                case 'internalLink': {
+                  if (typeof internalLink === 'string') href = '/404'
+                  else href = `${internalLink?.href}`
+                  break
+                }
+                case 'externalLink': {
+                  if (externalLink) {
+                    if (!externalLink.match(/^(https?:\/\/|mailto:|tel:)/i)) href = `https://${externalLink}`
+                    else href = `${externalLink}`
+                  }
+                  break
+                }
+                case 'download': {
+                  if (typeof download !== 'string') href = `${download?.url}`
+                  break
+                }
+                case 'email': {
+                  href = `mailto:${email}`
+                  break
+                }
+                case 'phone': {
+                  href = `tel:${phone}`
+                  break
+                }
+              }
+              t.p.href = href.concat(anchor ? `#${anchor}` : '').concat(parameters ? `?${parameters}` : '')
+              t.p.rel = newTab ? 'noopener noreferrer' : `${noOpener ? 'noopener' : ''} ${noReferrer ? 'noreferrer' : ''}`.trim()
+              t.p.prefetch = prefetch
+              t.p['aria-label'] = ariaLabel || undefined
+              t.p.target = noOpener || newTab ? '_blank' : undefined
+              t.p.download = linkType === 'download' ? true : undefined
+
+              break
+            }
+            case 'regular': {
+              break
+            }
+            case 'portal': {
+              switch (block.portalType) {
+                case 'popover': {
+                  const {
+                    delay,
+                    hasArrow,
+                    closeDelay,
+                    openOnHover,
+                    defaultOpen,
+                    modal,
+                    side,
+                    align,
+                    sticky,
+                    sideOffset,
+                    alignOffset,
+                    trackAnchor,
+                    arrowPadding,
+                    positionMethod,
+                    keepMounted,
+                  } = block.pops || {}
+                  const popPortal: Record<string, unknown> = {}
+                  const popPositioner: Record<string, unknown> = {}
+
+                  //Root Props
+                  if (hasArrow) pop.p.hasArrow = hasArrow
+                  if (defaultOpen) pop.p.defaultOpen = defaultOpen
+
+                  switch (modal) {
+                    case 'Block':
+                      pop.p.modal = true
+                      break
+                    case 'Window':
+                      pop.p.modal = false
+                      break
+                    case 'trap-focus':
+                      pop.p.modal = 'trap-focus'
+                      break
+                    default:
+                      pop.p.modal = false
+                      break
+                  }
+
+                  //Trigger Props
+                  if (delay) t.p.delay = delay
+                  if (closeDelay) t.p.closeDelay = closeDelay
+                  if (openOnHover) t.p.openOnHover = openOnHover
+
+                  //Positioner Props
+                  if (side) popPositioner.side = side
+                  if (align) popPositioner.align = align
+                  if (sticky) popPositioner.sticky = sticky
+                  if (sideOffset) popPositioner.sideOffset = sideOffset
+                  if (alignOffset) popPositioner.alignOffset = alignOffset
+                  if (trackAnchor) popPositioner.trackAnchor = trackAnchor
+                  if (arrowPadding) popPositioner.arrowPadding = arrowPadding
+                  if (positionMethod) popPositioner.positionMethod = positionMethod
+
+                  //Portal Props
+                  if (keepMounted) popPortal.keepMounted = keepMounted
+
+                  if (Object.keys(popPortal).length > 0) pop.p = { ...pop.p, popPortal }
+                  if (Object.keys(popPositioner).length > 0) pop.p = { ...pop.p, popPositioner }
+
+                  break
+                }
+                case 'dialog': {
+                  const { defaultOpen, dismissible, modal, keepMounted } = block.ds || {}
+
+                  /** Dialog Portal Components Props */
+                  const dialogPortal: Record<string, unknown> = {}
+
+                  //Root Props
+                  if (defaultOpen) di.p.defaultOpen = defaultOpen
+                  di.p.dismissible = Boolean(dismissible)
+
+                  switch (modal) {
+                    case 'Block':
+                      di.p.modal = true
+                      break
+                    case 'Window':
+                      di.p.modal = false
+                      break
+                    case 'trap-focus':
+                      di.p.modal = 'trap-focus'
+                      break
+                    default:
+                      di.p.modal = false
+                      break
+                  }
+
+                  //Portal Props
+                  if (keepMounted) dialogPortal.keepMounted = keepMounted
+
+                  if (Object.keys(dialogPortal).length > 0) di.p = { ...di.p, dialogPortal }
+                  break
+                }
+              }
+              break
+            }
+          }
+          break
+        }
+        case 'input': {
+          const { inputType, inputName, required, autocomplete } = block
+
+          if (inputType) c.p.type = inputType
+          if (inputName) c.p.name = inputName
+          if (required) c.p.required = required
+          if (autocomplete) c.p.autoComplete = autocomplete
+
+          switch (inputType) {
+            case 'checkbox': {
+              const { checkboxDefault } = block
+              if (checkboxDefault) c.p.defaultChecked = checkboxDefault
+              if (!cid) c.p.id = inputName
+              break
+            }
+            case 'number': {
+              const { numberPlaceholder, numberDefault } = block
+              if (numberDefault) c.p.defaultValue = numberDefault
+              if (numberPlaceholder) c.p.placeholder = numberPlaceholder
+              if (!cid) c.p.id = inputName
+              break
+            }
+            case 'radio': {
+              const { radioDefault, radioValue } = block
+              if (c.p.autoComplete) delete c.p.autoComplete
+              if (radioDefault) c.p.defaultChecked = radioDefault
+              if (radioValue) {
+                c.p.value = radioValue
+                if (!cid) c.p.id = radioValue
+              }
+              break
+            }
+            case 'text':
+            case 'email':
+            case 'textarea': {
+              const { textPlaceholder, textDefault } = block
+              if (!cid) c.p.id = inputName
+              if (textDefault) c.p.defaultValue = textDefault
+              if (textPlaceholder) c.p.placeholder = textPlaceholder
+              break
+            }
+          }
+
+          break
+        }
+        case 'form':
+          break
+      }
+      break
+    }
+    case 'SimpleTextChild': {
+      const { htmlFor } = block
+      if (htmlFor) c.p.htmlFor = htmlFor
+      break
+    }
+    case 'RichTextChild': {
+      break
+    }
+    case 'ImageChild': {
+      const { image, alt, priority, size, quality, loading, fill, decoding, unoptimized, version } = block
+      if (!image || typeof image === 'string') break
+      const { blurDataUrl, alt: altFromMedia, sizes } = image
+
+      const width = version ? sizes?.[version]?.width : image.width
+      const height = version ? sizes?.[version]?.height : image.height
+
+      c.p.alt = alt || altFromMedia || ''
+      c.p.src = version ? sizes?.[version]?.url || image.url : image.url
+
+      if (decoding) c.p.decoding = decoding
+
+      if (priority) c.p.priority = priority
+      else if (loading) c.p.loading = loading
+
+      if (!unoptimized) c.p.quality = quality
+      else c.p.unoptimized = unoptimized
+
+      c.p.sizes = size
+        ? size
+        : Object.entries(breakpoints)
+            .map(([, value]) => `(max-width: ${value}px) ${value * 2}w`)
+            .join(', ')
+
+      if (block.blur) {
+        c.p.placeholder = 'blur'
+        c.p.blurDataURL = blurDataUrl
+      }
+
+      if (!fill) {
+        c.p.height = height
+        c.p.width = width
+      } else c.p.fill = fill
+
+      break
+    }
+    case 'VideoChild': {
+      const { preload, autoplay, loop, muted, video, disableBlur, time, quality, blur } = block
+      if (typeof video === 'string') break
+      const { playbackOptions } = video
+      if (!playbackOptions) break
+      const { playbackId } = playbackOptions[0]
+
+      if (!disableBlur && playbackId) {
+        try {
+          const { blurDataURL: blurDataURLTemp, aspectRatio } = await createBlurUp(playbackId, {
+            time: time ?? 0,
+            blur: blur ?? 20,
+            quality: quality ?? 1,
+          })
+          c.p.poster = blurDataURLTemp
+          c.p.style = { aspectRatio }
+        } catch (error) {
+          console.warn('Failed to generate video blurup image.')
+          console.log(error)
+        }
+      }
+
+      c.p.streamType = 'on-demand'
+      if (loop) c.p.loop = loop
+      if (preload) c.p.preload = preload
+      if (autoplay) {
+        c.p.muted = true
+        c.p.autoPlay = true
+        c.p.playsInline = true
+      }
+      if (muted) c.p.muted = muted
+      if (playbackId) c.p.playbackId = playbackId
+
+      break
+    }
+    case 'IconChild': {
+      if (block.ariaHidden) c.p['aria-hidden'] = block.ariaHidden
+      break
+    }
+    case 'SVGChild': {
+      const { viewBox, contents, fill } = block
+      c.p.viewBox = viewBox
+      if (fill) c.p.fill = fill
+      c.p.dangerouslySetInnerHTML = { __html: contents }
+      if (block.ariaHidden) c.p['aria-hidden'] = block.ariaHidden
+      break
+    }
+  }
+
+  return { c, t, po: { b, di, pop } }
+}

package/template/src/components/child/renderChildren.tsx

@@ -0,0 +1,148 @@
+'use server'
+import 'server-only' //DO NOT REMOVE
+
+import { BlockSlug } from 'payload'
+import { SSRProps } from './SSRProps'
+import { RenderChildrenProps, AtomicChild, ChildBySlug, ChildrenWithActions, ChildBlocks, PassThroughs, BlockBySlug } from '@/ts/types'
+
+//Components
+import { SVGChild } from '@/blocks/children/svg/component'
+import { IconChild } from '@/blocks/children/icon/component'
+import { ImageChild } from '@/blocks/children/image/component'
+import { VideoChild } from '@/blocks/children/video/component'
+import { RichTextChild } from '@/blocks/children/richText/component'
+
+//Simple Text Child
+import { SimpleTextChild } from '@/blocks/children/simpleText/component'
+import { SimpleTextChildClient } from '@/blocks/children/simpleText/component.client'
+
+// Atomic Components - Direct imports
+import { AtomicTag } from '@/blocks/children/atomic/variants/tag/component'
+import { AtomicTagClient } from '@/blocks/children/atomic/variants/tag/component.client'
+import { AtomicForm } from '@/blocks/children/atomic/variants/form/component'
+//Input Variants
+import { TextInputClient } from '@/blocks/children/atomic/variants/input/variants/text/component.client'
+import { TextInput } from '@/blocks/children/atomic/variants/input/variants/text/component'
+import { RadioInputClient } from '@/blocks/children/atomic/variants/input/variants/radio/component.client'
+import { RadioInput } from '@/blocks/children/atomic/variants/input/variants/radio/component'
+import { NumberInputClient } from '@/blocks/children/atomic/variants/input/variants/number/component.client'
+import { NumberInput } from '@/blocks/children/atomic/variants/input/variants/number/component'
+import { CheckboxInputClient } from '@/blocks/children/atomic/variants/input/variants/checkBox/component.client'
+import { CheckboxInput } from '@/blocks/children/atomic/variants/input/variants/checkBox/component'
+//Button Variants
+import { AtomicButtonLinkClient } from '@/blocks/children/atomic/variants/button/variants/link/component.client'
+import { AtomicButtonLink } from '@/blocks/children/atomic/variants/button/variants/link/component'
+
+import { AtomicButtonRegular } from '@/blocks/children/atomic/variants/button/variants/regular/component'
+import { AtomicButtonRegularClient } from '@/blocks/children/atomic/variants/button/variants/regular/component.client'
+import { AtomicButtonPortalDialog } from '@/blocks/children/atomic/variants/button/variants/portal/dialog/component'
+import { AtomicButtonPortalPopover } from '@/blocks/children/atomic/variants/button/variants/portal/popover/component'
+
+const components = {
+  SVGChild,
+  IconChild,
+  ImageChild,
+  VideoChild,
+  RichTextChild,
+  SimpleTextChild,
+}
+
+const clientComponents = {
+  SimpleTextChild: SimpleTextChildClient,
+}
+
+// Helper function to get the correct atomic component since we dont use layered registries
+const getAtomicComponent = (block: AtomicChild, client: boolean) => {
+  const { type, buttonType, inputType, portalType } = block
+
+  if (type === 'button') {
+    if (buttonType === 'link') return client ? AtomicButtonLinkClient : AtomicButtonLink
+    if (buttonType === 'regular') return client ? AtomicButtonRegularClient : AtomicButtonRegular
+    if (buttonType === 'portal') {
+      if (portalType === 'dialog') return AtomicButtonPortalDialog
+      if (portalType === 'popover') return AtomicButtonPortalPopover
+    }
+  }
+
+  if (type === 'input') {
+    switch (inputType) {
+      case 'radio':
+        return client ? RadioInputClient : RadioInput
+      case 'number':
+        return client ? NumberInputClient : NumberInput
+      case 'checkbox':
+        return client ? CheckboxInputClient : CheckboxInput
+      case 'text':
+      case 'email':
+      case 'textarea':
+        return client ? TextInputClient : TextInput
+    }
+  }
+
+  if (type === 'tag') return client ? AtomicTagClient : AtomicTag
+  if (type === 'form') return AtomicForm
+
+  return null
+}
+
+function is<T extends BlockSlug>(item: BlockBySlug<BlockSlug>, slug: T): item is BlockBySlug<T>
+function is<T extends BlockSlug>(item: BlockBySlug<BlockSlug>, slug: T): item is BlockBySlug<Extract<T, BlockSlug>> {
+  if ('blockType' in item && typeof item.blockType === 'string') return item.blockType === slug
+  return true
+}
+
+const hasActions = (block: ChildBlocks[number], passThroughs: PassThroughs): block is ChildBySlug<ChildrenWithActions> => {
+  return Boolean(
+    ('contentActions' in block && block?.contentActions?.actions && block?.contentActions?.actions.length > 0) ||
+    ('triggerActions' in block && block?.triggerActions?.actions && block?.triggerActions?.actions.length > 0) ||
+    (is(block, 'SimpleTextChild') && Boolean(Object.keys(passThroughs.c?.da || {}).length > 0)),
+  )
+}
+
+const hasChildren = <T extends ChildBlocks[number], V extends 'children' | 'trigger' | 'backdrop'>(
+  block: T,
+  v: V,
+): block is T &
+  (V extends 'children' ? { children: ChildBlocks } : V extends 'trigger' ? { triggerChildren: ChildBlocks } : { backdropChildren: ChildBlocks }) => {
+  if (v === 'children') return Boolean('children' in block && block.children && block.children?.length > 0)
+  if (v === 'trigger') return Boolean('triggerChildren' in block && block.triggerChildren && block.triggerChildren?.length > 0)
+  if (v === 'backdrop') return Boolean('backdropChildren' in block && block.backdropChildren && block.backdropChildren?.length > 0)
+  return false
+}
+
+/** Render Children - Renders all payload child blocks. */
+export const RenderChildren: RenderChildrenProps = async ({ blocks }) => {
+  if (blocks && Array.isArray(blocks) && blocks.length > 0) {
+    const renderedBlocks = await Promise.all(
+      blocks.map(async (block, index) => {
+        if ('blockType' in block) {
+          let Component: React.FC<any> | null = null
+          const passThroughs = await SSRProps(block)
+          const useAction = hasActions(block, passThroughs)
+
+          if (is(block, 'AtomicChild')) Component = getAtomicComponent(block, useAction)
+          else Component = useAction ? clientComponents[block.blockType] : components[block.blockType]
+          if (!Component) return null
+
+          // Pre-render children conditionally to avoid creating elements unnecessarily
+          const contentChildren = hasChildren(block, 'children') ? <RenderChildren blocks={block.children} /> : undefined
+          const triggerChildren = hasChildren(block, 'trigger') ? <RenderChildren blocks={block.triggerChildren} /> : undefined
+          const backdropChildren = hasChildren(block, 'backdrop') ? <RenderChildren blocks={block.backdropChildren} /> : undefined
+
+          return (
+            <Component
+              key={index}
+              block={block}
+              pt={passThroughs}
+              contentChildren={contentChildren}
+              triggerChildren={triggerChildren}
+              backdropChildren={backdropChildren}
+            />
+          )
+        }
+      }),
+    )
+    return <>{renderedBlocks}</>
+  }
+  return null
+}

package/template/src/components/livePreviewListener.tsx

@@ -0,0 +1,10 @@
+'use client'
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import { getClientSideURL } from '@/utilities/get/getURL'
+import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
+
+export default function LivePreviewListener() {
+  const router = useRouter()
+  return <PayloadLivePreview refresh={router.refresh} serverURL={getClientSideURL()} />
+}

package/template/src/components/providers/formProvider.tsx

@@ -0,0 +1,11 @@
+'use client'
+import type { FullFormContext } from '@/ts/types'
+import React, { createContext, useContext } from 'react'
+
+const FormContext = createContext<FullFormContext>({ formResponse: null })
+
+export const useFormContext = () => useContext(FormContext)
+
+export const FormContextProvider = ({ children, formResponse }: { children: React.ReactNode } & FullFormContext) => {
+  return <FormContext.Provider value={{ formResponse }}>{children}</FormContext.Provider>
+}

package/template/src/components/providers/tracking/gtm.tsx

@@ -0,0 +1,11 @@
+import { Tracking } from '@/ts/types'
+import { GoogleTagManager } from '@next/third-parties/google'
+
+export function GoogleTagManagerProvider({ children, tracking }: { children: React.ReactNode; tracking?: Tracking }) {
+  return (
+    <>
+      {tracking?.googleTagManagerId && <GoogleTagManager gtmId={tracking.googleTagManagerId} />}
+      {children}
+    </>
+  )
+}

package/template/src/components/providers/tracking/index.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { ReactNode } from 'react'
+import { Tracking } from '@/ts/types'
+import { VercelProvider } from './vercel'
+import { PostHogProvider } from './postHog'
+import { GoogleTagManagerProvider } from './gtm'
+
+type ProviderType = 'postHog' | 'vercel' | 'googleTagManager'
+
+type ProviderConfig = {
+  type: ProviderType
+  component: React.ComponentType<{ children: ReactNode; tracking?: Tracking }>
+}
+
+const providerRegistry: Record<ProviderType, ProviderConfig> = {
+  vercel: { type: 'vercel', component: ({ children }) => <VercelProvider>{children}</VercelProvider> },
+  postHog: { type: 'postHog', component: ({ children, tracking }) => <PostHogProvider tracking={tracking}>{children}</PostHogProvider> },
+  googleTagManager: {
+    type: 'googleTagManager',
+    component: ({ children, tracking }) => <GoogleTagManagerProvider tracking={tracking}>{children}</GoogleTagManagerProvider>,
+  },
+}
+
+interface DynamicProviderProps {
+  tracking?: Tracking
+  children: ReactNode
+}
+
+export const TrackingProvider = ({ tracking, children }: DynamicProviderProps) => {
+  if (!tracking) return <>{children}</>
+
+  const activeProviders = {
+    postHog: tracking.postHogEnabled,
+    vercel: tracking.vercelAnalyticsEnabled,
+    googleTagManager: tracking.googleTagManagerEnabled,
+  }
+
+  const validProviders = Object.entries(activeProviders)
+    .filter(([_, isActive]) => isActive)
+    .map(([type]) => ({ type: type as ProviderType, tracking }))
+
+  return validProviders.reduceRight((acc, { type, tracking }) => {
+    const Provider = providerRegistry[type].component
+    return <Provider tracking={tracking}>{acc}</Provider>
+  }, children)
+}

package/template/src/components/providers/tracking/postHog.tsx

@@ -0,0 +1,41 @@
+'use client'
+import posthog from 'posthog-js'
+import { useEffect } from 'react'
+import { Tracking } from '@/ts/types'
+import { usePathname } from 'next/navigation'
+import { PostHogProvider as PHProvider } from 'posthog-js/react'
+
+export function PostHogProvider({ children, tracking }: { children: React.ReactNode; tracking?: Tracking }) {
+  const pathname = usePathname()
+  useEffect(() => {
+    if (!tracking) return
+    const {
+      postHogPublicKey,
+      postHogHost,
+      disableSessionRecording,
+      disableSurveys,
+      capturePerformance,
+      enableAutoCapture,
+      postHogAutoCaptureSettings,
+    } = tracking
+    if (!postHogPublicKey || !postHogHost) return
+
+    if (!pathname?.includes('/admin')) {
+      posthog.init(postHogPublicKey, {
+        api_host: postHogHost,
+        defaults: '2025-05-24',
+        ...(enableAutoCapture && {
+          autocapture: {
+            url_allowlist: postHogAutoCaptureSettings?.urlAllowList?.map((item) => item.url ?? ''),
+            url_ignorelist: postHogAutoCaptureSettings?.urlIgnoreList?.map((item) => item.url ?? ''),
+          },
+        }),
+        ...(disableSessionRecording && { disable_session_recording: disableSessionRecording }),
+        ...(disableSurveys && { disable_surveys: disableSurveys }),
+        ...(capturePerformance && { capture_performance: capturePerformance }),
+      })
+    }
+  }, [pathname, tracking])
+
+  return <PHProvider client={posthog}>{children}</PHProvider>
+}

package/template/src/components/providers/tracking/vercel.tsx

@@ -0,0 +1,10 @@
+import { Analytics } from '@vercel/analytics/next'
+
+export function VercelProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {children}
+      <Analytics />
+    </>
+  )
+}