docs: exposes types and updates example apps for beforeSend (#154)

feugy · web-flow · commit c09b649801b4 · 2024-11-12T08:57:55.000+01:00
diff --git a/apps/astro/package.json b/apps/astro/package.json
@@ -11,6 +11,7 @@
     "start": "astro dev"
   },
   "dependencies": {
+    "@astrojs/ts-plugin": "^1.10.4",
     "@vercel/analytics": "workspace:*",
     "astro": "latest"
   },
diff --git a/apps/astro/src/components/BaseHead.astro b/apps/astro/src/components/BaseHead.astro
diff --git a/apps/astro/src/layouts/Base.astro b/apps/astro/src/layouts/Base.astro
@@ -3,6 +3,14 @@ import Analytics from '@vercel/analytics/astro';
 
 const { title } = Astro.props;
 ---
+
+<script is:inline>
+  function webAnalyticsBeforeSend(data){
+    console.log("Web Analytics before send", data)
+    return data;
+  }
+</script>
+
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
diff --git a/apps/astro/tsconfig.json b/apps/astro/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "astro/tsconfigs/base",
   "compilerOptions": {
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "plugins": [{ "name": "@astrojs/ts-plugin" }]
   }
 }
diff --git a/apps/nuxt/app.vue b/apps/nuxt/app.vue
@@ -1,4 +1,14 @@
+<script setup lang="ts">
+import { Analytics, type BeforeSendEvent } from '@vercel/analytics/nuxt';
+
+const beforeSend = (event: BeforeSendEvent) => {
+  console.log('Sending event:', event);
+  return event;
+};
+</script>
+
 <template>
+  <Analytics :before-send="beforeSend" />
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
diff --git a/apps/nuxt/layouts/default.vue b/apps/nuxt/layouts/default.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { Analytics } from '@vercel/analytics/nuxt';
 import { track } from '@vercel/analytics';
 
-function navigate(event) {
+function navigate(event: { target: { href: string } }) {
   track('navigation', { to: event.target.href });
 }
 </script>
 
 <template>
-  <Analytics />
   <header>
     <img
       alt="Vue logo"
diff --git a/apps/sveltekit/src/routes/+layout.js b/apps/sveltekit/src/routes/+layout.js
diff --git a/apps/sveltekit/src/routes/+layout.ts b/apps/sveltekit/src/routes/+layout.ts
@@ -0,0 +1,13 @@
+import { dev } from '$app/environment';
+import {
+  injectAnalytics,
+  type BeforeSendEvent,
+} from '@vercel/analytics/sveltekit';
+
+injectAnalytics({
+  mode: dev ? 'development' : 'production',
+  beforeSend(event: BeforeSendEvent) {
+    console.log('beforeSend', event);
+    return event;
+  },
+});
diff --git a/apps/vue/src/App.vue b/apps/vue/src/App.vue
@@ -1,10 +1,15 @@
-<script setup>
-import { Analytics } from '@vercel/analytics/vue';
+<script setup lang="ts">
+import { Analytics, type BeforeSendEvent } from '@vercel/analytics/vue';
 import HelloWorld from './components/HelloWorld.vue';
+
+const beforeSend = (event: BeforeSendEvent) => {
+  console.log('Sending event:', event);
+  return event;
+};
 </script>
 
 <template>
-  <Analytics />
+  <Analytics :before-send="beforeSend" />
   <header>
     <img
       alt="Vue logo"
diff --git a/packages/web/src/astro/component.ts b/packages/web/src/astro/component.ts
@@ -1,3 +1,9 @@
 // @ts-expect-error typescript doesn't handle ./index.astro properly, but it's needed to generate types
 // eslint-disable-next-line import/no-default-export, no-useless-rename -- Exporting everything doesn't yield the desired outcome
 export { default as default } from './index.astro';
+export type {
+  AnalyticsProps,
+  BeforeSend,
+  BeforeSendEvent,
+  // @ts-expect-error this filed is copied to dist, so it's ok to reference the generated index.d.ts
+} from '../index.d.ts';
diff --git a/packages/web/src/astro/index.astro b/packages/web/src/astro/index.astro
@@ -26,7 +26,8 @@ const paramsStr = JSON.stringify(Astro.params);
           inject({
             ...props,
             disableAutoTrack: true,
-            framework: 'astro'
+            framework: 'astro',
+            beforeSend: window.webAnalyticsBeforeSend,
           });
           const path = this.dataset.pathname;
           pageview({ route: computeRoute(path ?? '', params), path });
diff --git a/packages/web/src/generic.ts b/packages/web/src/generic.ts
@@ -4,6 +4,8 @@ import type {
   AllowedPropertyValues,
   AnalyticsProps,
   FlagsDataInput,
+  BeforeSend,
+  BeforeSendEvent,
 } from './types';
 import {
   isBrowser,
@@ -149,7 +151,7 @@ function pageview({
 }
 
 export { inject, track, pageview, computeRoute };
-export type { AnalyticsProps };
+export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
 
 // eslint-disable-next-line import/no-default-export -- Default export is intentional
 export default {
diff --git a/packages/web/src/nextjs/index.tsx b/packages/web/src/nextjs/index.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense, type ReactNode } from 'react';
 import { Analytics as AnalyticsScript } from '../react';
-import type { AnalyticsProps } from '../types';
+import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
 import { useRoute } from './utils';
 
 type Props = Omit<AnalyticsProps, 'route' | 'disableAutoTrack'>;
@@ -21,4 +21,4 @@ export function Analytics(props: Props): null {
   ) as never;
 }
 
-export type { AnalyticsProps };
+export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
diff --git a/packages/web/src/nuxt/index.ts b/packages/web/src/nuxt/index.ts
@@ -1,4 +1,6 @@
+import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
 import { createComponent } from '../vue/create-component';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- vue's defineComponent return type is any
 export const Analytics = createComponent('nuxt');
+export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
diff --git a/packages/web/src/react.tsx b/packages/web/src/react.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { useEffect } from 'react';
 import { inject, track, pageview } from './generic';
-import type { AnalyticsProps } from './types';
+import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from './types';
 
 /**
  * Injects the Vercel Web Analytics script into the page head and starts tracking page views. Read more in our [documentation](https://vercel.com/docs/concepts/analytics/package).
@@ -60,4 +60,4 @@ function Analytics(
 }
 
 export { track, Analytics };
-export type { AnalyticsProps };
+export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
diff --git a/packages/web/src/remix/index.tsx b/packages/web/src/remix/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Analytics as AnalyticsScript } from '../react';
-import type { AnalyticsProps } from '../types';
+import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
 import { useRoute } from './utils';
 
 export function Analytics(props: Omit<AnalyticsProps, 'route'>): JSX.Element {
   return <AnalyticsScript {...useRoute()} {...props} framework="remix" />;
 }
+export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
diff --git a/packages/web/src/sveltekit/index.ts b/packages/web/src/sveltekit/index.ts
@@ -1,4 +1,5 @@
-import { inject, pageview, track, type AnalyticsProps } from '../generic';
+import { inject, pageview, track } from '../generic';
+import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
 import { page } from '$app/stores';
 import { browser } from '$app/environment';
 import type {} from '@sveltejs/kit';
@@ -21,4 +22,4 @@ function injectAnalytics(props: Omit<AnalyticsProps, 'framework'> = {}): void {
 }
 
 export { injectAnalytics, track };
-export type { AnalyticsProps };
+export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
diff --git a/packages/web/src/types.ts b/packages/web/src/types.ts
@@ -36,6 +36,8 @@ declare global {
     vaq?: [string, unknown?][];
     vai?: boolean;
     vam?: Mode;
+    /** used by Astro component only */
+    webAnalyticsBeforeSend?: BeforeSend;
   }
 }
 
diff --git a/packages/web/src/vue/index.ts b/packages/web/src/vue/index.ts
@@ -1,4 +1,6 @@
+import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
 import { createComponent } from './create-component';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- vue's defineComponent return type is any
 export const Analytics = createComponent();
+export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": "astro/tsconfigs/base",`
`3`	`3`	`"compilerOptions": {`
`4`		`- "strictNullChecks": true`
	`4`	`+ "strictNullChecks": true,`
	`5`	`+ "plugins": [{ "name": "@astrojs/ts-plugin" }]`
`5`	`6`	`}`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,8 @@ declare global {`
`36`	`36`	`vaq?: [string, unknown?][];`
`37`	`37`	`vai?: boolean;`
`38`	`38`	`vam?: Mode;`
	`39`	`+ /** used by Astro component only */`
	`40`	`+ webAnalyticsBeforeSend?: BeforeSend;`
`39`	`41`	`}`
`40`	`42`	`}`
`41`	`43`