feat(shared): Adjust types to enforce the event structure from event …

…factory methods

packages/shared/src/telemetry.ts

@@ -1,3 +1,4 @@
-export { TelemetryCollector, type TelemetryCollectorOptions } from './telemetry/collector';
+export { TelemetryCollector } from './telemetry/collector';
+export type { TelemetryCollectorOptions } from './telemetry/types';
 
 export * from './telemetry/events';

packages/shared/src/telemetry/collector.ts

@@ -1,5 +1,5 @@
 /**
- * The `TelemetryCollector` class handles collection of telemetry events from Clerk SDKs. Telemetry is opt-out and can be disabled by setting a CLERK_TELEMETRY_DISABLE environment variable.
+ * The `TelemetryCollector` class handles collection of telemetry events from Clerk SDKs. Telemetry is opt-out and can be disabled by setting a CLERK_TELEMETRY_DISABLED environment variable.
  * The `ClerkProvider` also accepts a `telemetry` prop that will be passed to the collector during initialization:
  *
  * ```jsx
@@ -14,45 +14,7 @@ import type { InstanceType } from '@clerk/types';
 
 import { parsePublishableKey } from '../keys';
 import { isTruthy } from '../underscore';
-
-export type TelemetryCollectorOptions = {
-  /**
-   * If true, telemetry will not be collected.
-   */
-  disabled?: boolean;
-  /**
-   * If true, telemetry will not be sent, but collected events will be logged to the console.
-   */
-  debug?: boolean;
-  /**
-   * Sampling rate, 0-1
-   */
-  samplingRate?: number;
-  /**
-   * Set a custom buffer size to control how often events are sent
-   */
-  maxBufferSize?: number;
-  /**
-   * The publishableKey to associate with the collected events.
-   */
-  publishableKey?: string;
-  /**
-   * The secretKey to associate with the collected events.
-   */
-  secretKey?: string;
-  /**
-   * The current clerk-js version.
-   */
-  clerkVersion?: string;
-  /**
-   * The SDK being used, e.g. `@clerk/nextjs` or `@clerk/remix`.
-   */
-  sdk?: string;
-  /**
-   * The version of the SDK being used.
-   */
-  sdkVersion?: string;
-};
+import type { TelemetryCollectorOptions, TelemetryEvent } from './types';
 
 type TelemetryCollectorConfig = Pick<
   TelemetryCollectorOptions,
@@ -70,36 +32,7 @@ type TelemetryMetadata = Required<
   instanceType: InstanceType;
 };
 
-type TelemetryEvent = {
-  event: string;
-  /**
-   * publishableKey
-   */
-  pk?: string;
-  /**
-   * secretKey
-   */
-  sk?: string;
-  /**
-   * instanceType
-   */
-  it: InstanceType;
-  /**
-   * clerkVersion
-   */
-  cv: string;
-  /**
-   * SDK
-   */
-  sdk?: string;
-  /**
-   * SDK Version
-   */
-  sdkv?: string;
-  payload: Record<string, string | number | boolean>;
-};
-
-const DEFAULT_CONFIG: Partial<Required<TelemetryCollectorConfig>> = {
+const DEFAULT_CONFIG: Partial<TelemetryCollectorConfig> = {
   samplingRate: 1,
   maxBufferSize: 5,
   // Production endpoint: https://clerk-telemetry.com

packages/shared/src/telemetry/events/component-mounted.ts

@@ -1,22 +1,30 @@
+import type { TelemetryEventRaw } from '../types';
+
 const EVENT_COMPONENT_MOUNTED = 'COMPONENT_MOUNTED' as const;
 
 type EventComponentMounted = {
   component: string;
   appearanceProp: boolean;
+  elements: boolean;
+  variables: boolean;
+  baseTheme: boolean;
 };
 
 /**
  * Fired when one of the Clerk components is mounted.
  */
 export function eventComponentMounted(
   component: string,
-  props?: Record<string, unknown>,
-): { event: typeof EVENT_COMPONENT_MOUNTED; payload: EventComponentMounted } {
+  props?: Record<string, any>,
+): TelemetryEventRaw<EventComponentMounted> {
   return {
     event: EVENT_COMPONENT_MOUNTED,
     payload: {
       component,
       appearanceProp: Boolean(props?.appearance),
+      baseTheme: Boolean(props?.appearance?.baseTheme),
+      elements: Boolean(props?.appearance?.elements),
+      variables: Boolean(props?.appearance?.variables),
     },
   };
 }

packages/shared/src/telemetry/events/method-called.ts

@@ -1,3 +1,5 @@
+import type { TelemetryEventRaw } from '../types';
+
 const EVENT_METHOD_CALLED = 'METHOD_CALLED' as const;
 
 type EventMethodCalled = {
@@ -10,7 +12,7 @@ type EventMethodCalled = {
 export function eventMethodCalled(
   method: string,
   payload?: Record<string, unknown>,
-): { event: typeof EVENT_METHOD_CALLED; payload: EventMethodCalled } {
+): TelemetryEventRaw<EventMethodCalled> {
   return {
     event: EVENT_METHOD_CALLED,
     payload: {

packages/shared/src/telemetry/types.ts

@@ -0,0 +1,74 @@
+import type { InstanceType } from '@clerk/types';
+
+export type TelemetryCollectorOptions = {
+  /**
+   * If true, telemetry will not be collected.
+   */
+  disabled?: boolean;
+  /**
+   * If true, telemetry will not be sent, but collected events will be logged to the console.
+   */
+  debug?: boolean;
+  /**
+   * Sampling rate, 0-1
+   */
+  samplingRate?: number;
+  /**
+   * Set a custom buffer size to control how often events are sent
+   */
+  maxBufferSize?: number;
+  /**
+   * The publishableKey to associate with the collected events.
+   */
+  publishableKey?: string;
+  /**
+   * The secretKey to associate with the collected events.
+   */
+  secretKey?: string;
+  /**
+   * The current clerk-js version.
+   */
+  clerkVersion?: string;
+  /**
+   * The SDK being used, e.g. `@clerk/nextjs` or `@clerk/remix`.
+   */
+  sdk?: string;
+  /**
+   * The version of the SDK being used.
+   */
+  sdkVersion?: string;
+};
+
+export type TelemetryEvent = {
+  event: string;
+  /**
+   * publishableKey
+   */
+  pk?: string;
+  /**
+   * secretKey
+   */
+  sk?: string;
+  /**
+   * instanceType
+   */
+  it: InstanceType;
+  /**
+   * clerkVersion
+   */
+  cv: string;
+  /**
+   * SDK
+   */
+  sdk?: string;
+  /**
+   * SDK Version
+   */
+  sdkv?: string;
+  payload: Record<string, string | number | boolean>;
+};
+
+export type TelemetryEventRaw<Payload = TelemetryEvent['payload']> = {
+  event: TelemetryEvent['event'];
+  payload: Payload;
+};

scripts/subpath-workaround.mjs

@@ -32,8 +32,6 @@ async function run() {
   ];
   const hasAllSubpathsInFiles = pkgFile.files.every(name => allFilesNames.includes(name));
 
-  console.log(allFilesNames, pkgFile.files);
-
   if (!hasAllSubpathsInFiles) {
     throw new Error('Not all subpaths from the package.json "files" array are in the subpaths.mjs');
   }