Feat/track

.changeset/eleven-cycles-do.md

@@ -0,0 +1,5 @@
+---
+"@hyperse/track": patch
+---
+
+1、Supports mapping evenType based on RealEventData

README.md

@@ -30,7 +30,7 @@
 
 ## Coverage Report
 
-<table> <thead> <tr> <th align="center">Status</th> <th align="left">Category</th> <th align="right">Percentage</th> <th align="right">Covered / Total</th> </tr> </thead> <tbody> <tr> <td align="center">🔵</td> <td align="left">Lines</td> <td align="right">100%</td> <td align="right">185 / 185</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Statements</td> <td align="right">100%</td> <td align="right">185 / 185</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Functions</td> <td align="right">98.18%</td> <td align="right">54 / 55</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Branches</td> <td align="right">93.75%</td> <td align="right">75 / 80</td> </tr> </tbody> </table>
+<table> <thead> <tr> <th align="center">Status</th> <th align="left">Category</th> <th align="right">Percentage</th> <th align="right">Covered / Total</th> </tr> </thead> <tbody> <tr> <td align="center">🔵</td> <td align="left">Lines</td> <td align="right">100%</td> <td align="right">191 / 191</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Statements</td> <td align="right">100%</td> <td align="right">191 / 191</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Functions</td> <td align="right">98.21%</td> <td align="right">55 / 56</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Branches</td> <td align="right">93.02%</td> <td align="right">80 / 86</td> </tr> </tbody> </table>
 
 ## Prerequisites
 
@@ -51,7 +51,7 @@ yarn add @hyperse/track
 
 ## Development
 
-> [!IMPORTANT]
+> \[!IMPORTANT]
 > The following instructions are for those who want to develop the hyperse related framework or plugins (e.g. if you intend to make a pull request). For instructions on how to build a project _using_ Hyperse, please see the [Getting Started guide](https://hyperse-io.github.io/track/docs/community/contributing).
 
 ### 1. Clone project to the local directory

examples/next-example/app/page.tsx

@@ -54,6 +54,16 @@ export default function Home() {
       });
   };
 
+  const onAddToMultiCart = (item: GoodsRecord) => {
+    reportTrack()
+      .select('reportAdapter')
+      .track('addCartList', [
+        {
+          ...item,
+        },
+      ]);
+  };
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between gap-4">
       {mounted &&
@@ -76,7 +86,13 @@ export default function Home() {
                 </div>
                 <button
                   className="rounded-md bg-sky-800 py-2 text-gray-50 hover:bg-sky-700"
-                  onClick={() => onAddToCart(item)}
+                  onClick={() => {
+                    if (index % 2 === 1) {
+                      onAddToCart(item);
+                    } else {
+                      onAddToMultiCart(item);
+                    }
+                  }}
                 >
                   Add to cart
                 </button>

examples/next-example/package.json

@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@hyperse/track": "1.0.2",
+    "@hyperse/track": "^1.0.2",
     "@types/node": "20.6.2",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",

examples/next-example/track/report-adapter.ts

@@ -2,33 +2,52 @@ import { AdapterReportData, BaseAdapter, TrackContext } from '@hyperse/track';
 import {
   ReportAdapterOptions,
   ReportEventData,
+  ReportRealEventData,
   ReportTrackData,
 } from './types';
 
 export class ReportAdapter extends BaseAdapter<
   TrackContext<ReportTrackData>,
   ReportEventData,
-  ReportAdapterOptions<TrackContext<ReportTrackData>, ReportEventData>
+  ReportAdapterOptions<
+    TrackContext<ReportTrackData>,
+    ReportEventData,
+    ReportRealEventData
+  >,
+  ReportRealEventData
 > {
-  isTrackable<EventType extends keyof ReportEventData>(
+  isTrackable<EventType extends keyof ReportRealEventData>(
     ctx: TrackContext<ReportTrackData>,
-    eventType: EventType,
-    eventData: ReportEventData[EventType]
+    eventType: keyof ReportRealEventData,
+    reportData?:
+      | AdapterReportData<ReportRealEventData, ReportEventData, EventType>
+      | Awaited<
+          AdapterReportData<ReportRealEventData, ReportEventData, EventType>
+        >
+      | undefined
   ): boolean | Promise<boolean> {
-    return true;
+    return this.isEventOfReportDataEqual(eventType, reportData, [
+      'addCart',
+      'pageView',
+    ]);
   }
 
-  protected report(
+  protected report<EventType extends keyof ReportRealEventData>(
     ctx: TrackContext<ReportTrackData>,
-    reportData: AdapterReportData,
-    setupData?:
-      | { name: 'setup' | 'setup2' | 'setup3'; timeStamp: number }
-      | undefined
+    eventType: keyof ReportRealEventData,
+    reportData?:
+      | AdapterReportData<ReportRealEventData, ReportEventData, EventType>
+      | Awaited<
+          AdapterReportData<ReportRealEventData, ReportEventData, EventType>
+        >
+      | undefined,
+    setupData?: { timeStamp: number } | undefined
   ): void | Promise<void> {
     window.postMessage({
       type: 'report',
       data: {
         ctx,
+        eventType,
         reportData,
         setupData,
       },

examples/next-example/track/track.ts

@@ -7,6 +7,7 @@ import { ReportAdapter } from './report-adapter';
 import {
   ReportAdapterOptions,
   ReportEventData,
+  ReportRealEventData,
   ReportTrackData,
 } from './types';
 
@@ -16,35 +17,34 @@ export const reportTrack = () => {
   const adapterBuilder = createAdapterBuilder<
     TrackContext<ReportTrackData>,
     ReportEventData,
-    ReportAdapterOptions<TrackContext<ReportTrackData>, ReportEventData>
+    ReportAdapterOptions<
+      TrackContext<ReportTrackData>,
+      ReportEventData,
+      ReportRealEventData
+    >,
+    ReportRealEventData
   >(reportAdapter);
 
   const adapter = adapterBuilder
     .setup(() => {
-      return Promise.resolve({
-        name: 'setup',
+      return {
         timeStamp: Date.now(),
-      });
+      };
     })
     .before((ctx, eventType, eventData) => {
       console.log('before', ctx, eventType, eventData);
     })
-    .transform('addCart', (ctx, eventType, eventData) => {
-      return {
-        eventType,
-        goodName: 'ac_' + eventData?.goodsName,
-        goodsId: 'ac_' + eventData?.goodsId,
-        price: eventData?.price,
-      };
+    .transform(['addCart', 'addCart'], (ctx, eventType, eventData) => {
+      if (eventData) {
+        return [eventData];
+      }
+      return [];
+    })
+    .transform(['addCartList', 'addCart'], (ctx, eventType, eventData) => {
+      return eventData || [];
     })
     .transform('pv', (ctx, eventType, eventData) => {
-      return {
-        eventType,
-        url: eventData?.url,
-        timeStamp: 'pv_' + eventData?.timeStamp,
-        userName: 'pv_' + eventData?.userName,
-        userId: 'pv_' + eventData?.userId,
-      };
+      return eventData;
     })
     .after((ctx, eventType, reportData) => {
       console.log('after', ctx, eventType, reportData);

examples/next-example/track/types.ts

@@ -1,11 +1,13 @@
-export type ReportAdapterOptions<Context, EventData> = {
+import { GetSafeRealEventTypes } from '@hyperse/track';
+
+export type ReportAdapterOptions<Context, EventData, RealEventData> = {
   setup?: <EventType extends keyof EventData>(
     ctx: Context,
-    eventTYpe: EventType,
+    eventType: GetSafeRealEventTypes<RealEventData, EventData>,
     eventData: EventData[EventType]
-  ) => Promise<{
+  ) => {
     timeStamp: number;
-  }>;
+  };
 };
 
 export type ReportTrackData = {
@@ -22,6 +24,17 @@ export type ReportEventData = {
     userId: string;
   };
   addCart?: GoodsRecord;
+  addCartList: GoodsRecord[];
+};
+
+export type ReportRealEventData = {
+  pageView?: {
+    url: string;
+    timeStamp: number;
+    userName: string;
+    userId: string;
+  };
+  addCart?: GoodsRecord[];
 };
 
 export interface GoodsRecord {