Make public prefix empty, use dynamic public env

- Refactored analytics library: factored out `send.ts` into `vitals.ts`.

Addresses <#630 (comment)>.

Thanks @jaasonw for kicking off this PR :)

src/lib/public/analytics/types.ts

@@ -1,4 +1,4 @@
-export type { Metric } from 'web-vitals';
+export type { Metric, ReportHandler, ReportCallback, ReportOpts } from 'web-vitals';
 
 export interface AnalyticsOptions {
   id?: string;

src/lib/public/analytics/vitals.ts

@@ -1,9 +1,29 @@
-import type { AnalyticsOptions, Metric } from './types';
-export { onCLS, onFCP, onFID, onLCP, onTTFB } from 'web-vitals';
+import { onCLS, onFCP, onFID, onLCP, onTTFB } from 'web-vitals';
+import type { AnalyticsOptions, Metric, ReportCallback, ReportOpts } from './types';
+
+export function send(
+  options: AnalyticsOptions,
+  handlers = [onFID, onTTFB, onLCP, onCLS, onFCP]
+): void {
+  if (!options.id) return;
+
+  try {
+    handlers.forEach((handler) => doVital(handler, options));
+  } catch (err) {
+    console.error('[Analytics]', err);
+  }
+}
+
+function doVital(
+  handler: (onReport: ReportCallback, opts?: ReportOpts | undefined) => void,
+  options: AnalyticsOptions
+): void {
+  handler((metric: Metric) => sendToAnalytics(metric, options));
+}
 
 type VitalsNavigator = Navigator & { connection: { effectiveType: string } };
 
-export function sendToAnalytics(metric: Metric, options: AnalyticsOptions) {
+function sendToAnalytics(metric: Metric, options: AnalyticsOptions) {
   if (!options.url) {
     options.url = 'https://vitals.vercel-analytics.com/v1/vitals';
   }

src/routes/+layout.svelte

@@ -6,12 +6,13 @@
   // https://kit.svelte.dev/docs/advanced-routing#advanced-layouts
 
   import { page } from '$app/stores';
-  import { browser } from '$app/environment';
-  import { send } from '$lib/public/analytics/send';
+  import { browser, dev } from '$app/environment';
+  import { env } from '$env/dynamic/public';
+  import { send } from '$lib/public/analytics/vitals';
 
-  $: if (browser && process.env.VERCEL_ANALYTICS_ID) {
+  $: if (browser && !dev && env.VERCEL_ANALYTICS_ID) {
     send({
-      id: '$VERCEL_ANALYTICS_ID',
+      id: env.VERCEL_ANALYTICS_ID,
       path: $page.url.pathname,
       params: $page.params,
       navigator,

svelte.config.js

@@ -5,12 +5,11 @@ import preprocess from 'svelte-preprocess';
 const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
-  preprocess: preprocess({
-    replace: [['$VERCEL_ANALYTICS_ID', process.env.VERCEL_ANALYTICS_ID]],
-  }),
+  preprocess: preprocess(),
 
   kit: {
     adapter: adapter(),
+    env: { publicPrefix: '' },
   },
 
   vitePlugin: {