Allow ampli status to detect usage in strings

[AshotN]

Summary

I am using Next JS with @amplitude/analytics-browser and there are some cases where I want to log an event from the server. To accomplish this I have a component that calls an event on the client

<CSRAmplitudeEvent eventName={"viewedFeed"} eventProperties={{}} />

This works fine, but my only issue is that when running ampli status the usage is not detected.

Motivations

ampli status allows me to make sure I have implemented all the required events, without tracking string usages the data is incomplete.

[justin-fiedler]

Hi @AshotN thank you for choosing Amplitude and using Ampli.

<CSRAmplitudeEvent eventName={"viewedFeed"} eventProperties={{}} />

I would recommend against this usage of Ampli as it prevents a some of the main benefits. i.e.

1. Static type checks
2. Autocompletion of event name and properties in the IDE

Instead I would recommend something more like this.

<CSRAmplitudeEvent track={ampli.viewedFeed({ ... })} />

Hope this helps!

[AshotN]

The issue with that is you cant pass functions from the server to the client.

Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

Autocompletion of event name and properties in the IDE I have resolved this issue with TypeScript, here are the types

export const CSRAmplitudeEvent = <K extends AllowedMethods>({
  eventName,
  eventProperties,
}: {
  eventName: K;
  eventProperties: Parameters<Ampli[K]>[0];
}