From f952e0926379445cde7c0919272949a62d43e98e Mon Sep 17 00:00:00 2001
From: EthanThatOneKid <31261035+EthanThatOneKid@users.noreply.github.com>
Date: Tue, 25 Oct 2022 23:06:54 -0700
Subject: [PATCH] Make public prefix empty, use dynamic public env

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

Addresses <https://github.com/EthanThatOneKid/acmcsuf.com/pull/630#issuecomment-1288032220>.

Thanks @jaasonw for kicking off this PR :)
---
 src/lib/public/analytics/send.ts   | 16 ----------------
 src/lib/public/analytics/types.ts  |  2 +-
 src/lib/public/analytics/vitals.ts | 26 +++++++++++++++++++++++---
 src/routes/+layout.svelte          |  9 +++++----
 svelte.config.js                   |  5 ++---
 5 files changed, 31 insertions(+), 27 deletions(-)
 delete mode 100644 src/lib/public/analytics/send.ts

diff --git a/src/lib/public/analytics/send.ts b/src/lib/public/analytics/send.ts
deleted file mode 100644
index bf123c484..000000000
--- a/src/lib/public/analytics/send.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { AnalyticsOptions } from './types';
-import { onCLS, onFCP, onFID, onLCP, onTTFB, sendToAnalytics } from './vitals';
-
-export function send(options: AnalyticsOptions): void {
-  if (!options.id) return;
-
-  try {
-    onFID((metric) => sendToAnalytics(metric, options));
-    onTTFB((metric) => sendToAnalytics(metric, options));
-    onLCP((metric) => sendToAnalytics(metric, options));
-    onCLS((metric) => sendToAnalytics(metric, options));
-    onFCP((metric) => sendToAnalytics(metric, options));
-  } catch (err) {
-    console.error('[Analytics]', err);
-  }
-}
diff --git a/src/lib/public/analytics/types.ts b/src/lib/public/analytics/types.ts
index 8508b1247..2931152c2 100644
--- a/src/lib/public/analytics/types.ts
+++ b/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;
diff --git a/src/lib/public/analytics/vitals.ts b/src/lib/public/analytics/vitals.ts
index f80011426..ec42b14a4 100644
--- a/src/lib/public/analytics/vitals.ts
+++ b/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';
   }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d30a7b256..211c5d669 100644
--- a/src/routes/+layout.svelte
+++ b/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,
diff --git a/svelte.config.js b/svelte.config.js
index 0419b82b5..2e288ac69 100644
--- a/svelte.config.js
+++ b/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: {