fix(packages): Remove unnecessary code and add types for untyped code and prettify everything

packages/analytics/entrypoints/popup/index.html

@@ -10,7 +10,7 @@
       <input id="enabledCheckbox" type="checkbox" />
       &emsp;Analytics enabled
     </label>
-    <button id="button1">Button 1</button>
+    <button id="button-1">Button 1</button>
     <button class="cool-button">Button 2</button>
     <script type="module" src="./main.ts"></script>
   </body>

packages/analytics/modules/analytics/client.ts

@@ -2,30 +2,51 @@ import { UAParser } from 'ua-parser-js';
 import type {
   Analytics,
   AnalyticsConfig,
+  AnalyticsEventMetadata,
   AnalyticsPageViewEvent,
+  AnalyticsProvider,
   AnalyticsStorageItem,
   AnalyticsTrackEvent,
   BaseAnalyticsEvent,
-  AnalyticsEventMetadata,
-  AnalyticsProvider,
+  TAnalyticsMessage,
+  TAnalyticsMethod,
+  TMethodForwarder,
 } from './types';
 import { browser } from '@wxt-dev/browser';
 
 const ANALYTICS_PORT = '@wxt-dev/analytics';
 
+const INTERACTIVE_TAGS = new Set([
+  'A',
+  'BUTTON',
+  'INPUT',
+  'SELECT',
+  'TEXTAREA',
+]);
+
+const INTERACTIVE_ROLES = new Set([
+  'button',
+  'link',
+  'checkbox',
+  'menuitem',
+  'tab',
+  'radio',
+]);
+
 export function createAnalytics(config?: AnalyticsConfig): Analytics {
   if (!browser?.runtime?.id)
     throw Error(
       'Cannot use WXT analytics in contexts without access to the browser.runtime APIs',
     );
-  if (config == null) {
+
+  if (config === null) {
     console.warn(
       "[@wxt-dev/analytics] Config not provided to createAnalytics. If you're using WXT, add the 'analytics' property to '<srcDir>/app.config.ts'.",
     );
   }
 
   // TODO: This only works for standard WXT extensions, add a more generic
-  // background script detector that works with non-WXT projects.
+  // Background script detector that works with non-WXT projects.
   if (location.pathname === '/background.js')
     return createBackgroundAnalytics(config);
 
@@ -54,16 +75,18 @@ function createBackgroundAnalytics(
   // Cached values
   const platformInfo = browser.runtime.getPlatformInfo();
   const userAgent = UAParser();
+
   let userId = Promise.resolve(userIdStorage.getValue()).then(
     (id) => id ?? globalThis.crypto.randomUUID(),
   );
   let userProperties = userPropertiesStorage.getValue();
+
   const manifest = browser.runtime.getManifest();
 
   const getBackgroundMeta = () => ({
     timestamp: Date.now(),
-    // Don't track sessions for the background, it can be running
-    // indefinitely, and will inflate session duration stats.
+    // Don't track sessions for the background, it can be running indefinitely
+    // and will inflate session duration stats.
     sessionId: undefined,
     language: navigator.language,
     referrer: undefined,
@@ -75,7 +98,8 @@ function createBackgroundAnalytics(
   const getBaseEvent = async (
     meta: AnalyticsEventMetadata,
   ): Promise<BaseAnalyticsEvent> => {
-    const platform = await platformInfo;
+    const { arch, os } = await platformInfo;
+
     return {
       meta,
       user: {
@@ -84,8 +108,8 @@ function createBackgroundAnalytics(
           version: config?.version ?? manifest.version_name ?? manifest.version,
           wxtMode: import.meta.env.MODE,
           wxtBrowser: import.meta.env.BROWSER,
-          arch: platform.arch,
-          os: platform.os,
+          arch,
+          os,
           browser: userAgent.browser.name,
           browserVersion: userAgent.browser.version,
           ...(await userProperties),
@@ -110,7 +134,9 @@ function createBackgroundAnalytics(
       ]);
       // Notify providers
       const event = await getBaseEvent(meta);
+
       if (config?.debug) console.debug('[@wxt-dev/analytics] identify', event);
+
       if (await enabled.getValue()) {
         await Promise.allSettled(
           providers.map((provider) => provider.identify(event)),
@@ -134,7 +160,9 @@ function createBackgroundAnalytics(
           title: meta?.title ?? globalThis.document?.title,
         },
       };
+
       if (config?.debug) console.debug('[@wxt-dev/analytics] page', event);
+
       if (await enabled.getValue()) {
         await Promise.allSettled(
           providers.map((provider) => provider.page(event)),
@@ -155,7 +183,9 @@ function createBackgroundAnalytics(
         ...baseEvent,
         event: { name: eventName, properties: eventProperties },
       };
+
       if (config?.debug) console.debug('[@wxt-dev/analytics] track', event);
+
       if (await enabled.getValue()) {
         await Promise.allSettled(
           providers.map((provider) => provider.track(event)),
@@ -181,9 +211,8 @@ function createBackgroundAnalytics(
   // Listen for messages from the rest of the extension
   browser.runtime.onConnect.addListener((port) => {
     if (port.name === ANALYTICS_PORT) {
-      port.onMessage.addListener(({ fn, args }) => {
-        // @ts-expect-error: Untyped fn key
-        void analytics[fn]?.(...args);
+      port.onMessage.addListener(({ fn, args }: TAnalyticsMessage) => {
+        void (analytics[fn] as TAnalyticsMethod)?.(...args);
       });
     }
   });
@@ -197,21 +226,20 @@ function createBackgroundAnalytics(
 function createFrontendAnalytics(): Analytics {
   const port = browser.runtime.connect({ name: ANALYTICS_PORT });
   const sessionId = Date.now();
+
   const getFrontendMetadata = (): AnalyticsEventMetadata => ({
     sessionId,
     timestamp: Date.now(),
     language: navigator.language,
-    referrer: globalThis.document?.referrer || undefined,
-    screen: globalThis.window
-      ? `${globalThis.window.screen.width}x${globalThis.window.screen.height}`
-      : undefined,
+    referrer: globalThis.document?.referrer,
+    screen: `${globalThis.window.screen.width}x${globalThis.window.screen.height}`,
     url: location.href,
-    title: document.title || undefined,
+    title: document.title,
   });
 
-  const methodForwarder =
-    (fn: string) =>
-    (...args: any[]) => {
+  const methodForwarder: TMethodForwarder =
+    (fn) =>
+    (...args) => {
       port.postMessage({ fn, args: [...args, getFrontendMetadata()] });
     };
 
@@ -222,59 +250,47 @@ function createFrontendAnalytics(): Analytics {
     setEnabled: methodForwarder('setEnabled'),
     autoTrack: (root) => {
       const onClick = (event: Event) => {
-        const element = event.target as any;
+        const element = event.target as HTMLElement | null;
+
         if (
           !element ||
           (!INTERACTIVE_TAGS.has(element.tagName) &&
-            !INTERACTIVE_ROLES.has(element.getAttribute('role')))
-        )
+            !INTERACTIVE_ROLES.has(element.getAttribute('role') ?? ''))
+        ) {
           return;
+        }
 
         void analytics.track('click', {
           tagName: element.tagName?.toLowerCase(),
-          id: element.id || undefined,
-          className: element.className || undefined,
-          textContent: element.textContent?.substring(0, 50) || undefined, // Limit text content length
-          href: element.href,
+          id: element.id,
+          className: element.className,
+          textContent: element.textContent?.substring(0, 50), // Limit text content length
+          href: (element as HTMLAnchorElement).href,
         });
       };
       root.addEventListener('click', onClick, { capture: true, passive: true });
+
       return () => {
         root.removeEventListener('click', onClick);
       };
     },
   };
+
   return analytics;
 }
 
 function defineStorageItem<T>(
   key: string,
-  defaultValue?: NonNullable<T>,
+  defaultValue?: T,
 ): AnalyticsStorageItem<T> {
   return {
     getValue: async () =>
-      (await browser.storage.local.get<Record<string, any>>(key))[key] ??
-      defaultValue,
+      (((await browser.storage.local.get(key)) as Record<string, T>)[key] ??
+        defaultValue) as T,
     setValue: (newValue) => browser.storage.local.set({ [key]: newValue }),
   };
 }
 
-const INTERACTIVE_TAGS = new Set([
-  'A',
-  'BUTTON',
-  'INPUT',
-  'SELECT',
-  'TEXTAREA',
-]);
-const INTERACTIVE_ROLES = new Set([
-  'button',
-  'link',
-  'checkbox',
-  'menuitem',
-  'tab',
-  'radio',
-]);
-
 export function defineAnalyticsProvider<T = never>(
   definition: (
     /** The analytics object. */

packages/analytics/modules/analytics/index.ts

@@ -22,6 +22,7 @@ export default defineWxtModule({
     // Paths
     const wxtAnalyticsFolder = resolve(wxt.config.wxtDir, 'analytics');
     const wxtAnalyticsIndex = resolve(wxtAnalyticsFolder, 'index.ts');
+
     const clientModuleId = process.env.NPM
       ? '@wxt-dev/analytics'
       : resolve(wxt.config.modulesDir, 'analytics/client');
@@ -44,11 +45,10 @@ export default defineWxtModule({
           ? clientModuleId
           : relative(wxtAnalyticsFolder, clientModuleId)
       }';`,
-      `import { useAppConfig } from '#imports';`,
-      ``,
-      `export const analytics = createAnalytics(useAppConfig().analytics);`,
-      ``,
+      `import { useAppConfig } from '#imports';\n`,
+      `export const analytics = createAnalytics(useAppConfig().analytics);\n`,
     ].join('\n');
+
     addAlias(wxt, '#analytics', wxtAnalyticsIndex);
     wxt.hook('prepare:types', async (_, entries) => {
       entries.push({
@@ -62,6 +62,7 @@ export default defineWxtModule({
       const hasBackground = entrypoints.find(
         (entry) => entry.type === 'background',
       );
+
       if (!hasBackground) {
         entrypoints.push({
           type: 'background',

packages/analytics/modules/analytics/providers/google-analytics-4.ts

@@ -15,13 +15,15 @@ export const googleAnalytics4 =
         data: BaseAnalyticsEvent,
         eventName: string,
         eventProperties: Record<string, string | undefined> | undefined,
-      ): Promise<void> => {
+      ) => {
         const url = new URL(
           config?.debug ? '/debug/mp/collect' : '/mp/collect',
           'https://www.google-analytics.com',
         );
+
         if (options.apiSecret)
           url.searchParams.set('api_secret', options.apiSecret);
+
         if (options.measurementId)
           url.searchParams.set('measurement_id', options.measurementId);
 
@@ -30,10 +32,11 @@ export const googleAnalytics4 =
           screen: data.meta.screen,
           ...data.user.properties,
         };
+
         const mappedUserProperties = Object.fromEntries(
           Object.entries(userProperties).map(([name, value]) => [
             name,
-            value == null ? undefined : { value },
+            value === null ? undefined : { value },
           ]),
         );
 

packages/analytics/modules/analytics/providers/umami.ts

@@ -12,6 +12,7 @@ export const umami = defineAnalyticsProvider<UmamiProviderOptions>(
       if (config.debug) {
         console.debug('[@wxt-dev/analytics] Sending event to Umami:', payload);
       }
+
       return fetch(`${options.apiUrl}/send`, {
         method: 'POST',
         headers: {
@@ -66,5 +67,5 @@ interface UmamiPayload {
   url?: string;
   website: string;
   name: string;
-  data?: Record<string, string | undefined>;
+  data?: Record<string, string | undefined | null>;
 }

packages/analytics/modules/analytics/types.ts

@@ -60,7 +60,7 @@ export interface BaseAnalyticsEvent {
   meta: AnalyticsEventMetadata;
   user: {
     id: string;
-    properties: Record<string, string | undefined>;
+    properties: Record<string, string | undefined | null>;
   };
 }
 
@@ -97,3 +97,18 @@ export interface AnalyticsTrackEvent extends BaseAnalyticsEvent {
     properties?: Record<string, string>;
   };
 }
+
+export type TAnalyticsMessage = {
+  [K in keyof Analytics]: {
+    fn: K;
+    args: Parameters<Analytics[K]>;
+  };
+}[keyof Analytics];
+
+export type TAnalyticsMethod =
+  | ((...args: Parameters<Analytics[keyof Analytics]>) => void)
+  | undefined;
+
+export type TMethodForwarder = <K extends keyof Analytics>(
+  fn: K,
+) => (...args: Parameters<Analytics[K]>) => void;