Performance - v1.0.0

The package ships a client-side companion published under @artisanpack-ui/performance with multiple subpath exports so applications only pay for the pieces they use. Publish the bundle with:

php artisan vendor:publish --tag=artisanpack-performance-js

Subpath exports

Peer dependencies for React and Vue are declared optional — install only the framework you use.

Main entry

import { installPerformance } from '@artisanpack-ui/performance'

installPerformance({
    endpoint: '/api/performance/metrics',
    sampleRate: 100,
})

Wires up the Web Vitals collector, the cache client, and the Speculation Rules helper against sensible defaults. Every option is optional and falls back to config/artisanpack/performance.php values injected via a <meta> tag.

Web Vitals

import { collectWebVitals } from '@artisanpack-ui/performance/web-vitals'

collectWebVitals({
    endpoint: '/api/performance/metrics',
    onMetric: (metric) => console.log(metric),
})

Emits every Web Vital sample to endpoint as JSON ({ metric, value, url, session_id, context }) — matching the RawMetric row shape ingested by MetricsApiController.

Speculative Rules

import { installSpeculationRules } from '@artisanpack-ui/performance/speculative-rules'

installSpeculationRules({
    prefetch: [{ urls: ['/products', '/about'], eagerness: 'moderate' }],
    prerender: [{ urls: ['/checkout'], eagerness: 'conservative' }],
})

Same payload as @speculativeRules emits server-side; useful for SPA transitions that mutate the speculation set after the initial navigation.

React

import {
    PerformanceDashboard,
    MetricsChart,
    useWebVitals,
} from '@artisanpack-ui/performance/react'

function Vitals() {
    const vitals = useWebVitals()
    return <MetricsChart metric="LCP" data={vitals.LCP} />
}

Dashboard components read from the same admin API endpoints (/api/performance/admin/*) that the Livewire components use.

Vue

<script setup>
import {
    PerformanceDashboard,
    MetricsChart,
    useWebVitals,
} from '@artisanpack-ui/performance/vue'

const vitals = useWebVitals()
</script>

<template>
    <MetricsChart metric="LCP" :data="vitals.LCP" />
</template>

The composable returns reactive refs so templates re-render as new samples arrive.

REST endpoints

The React/Vue components wrap these endpoints — useful if you're building your own UI:

Every admin endpoint requires the same authorization your Livewire dashboard route uses — the package does not register a gate itself.