-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): make event track great again (#7695)
 
- Loading branch information
Showing
17 changed files
with
496 additions
and
198 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 148 additions & 0 deletions
148
packages/frontend/core/src/mixpanel/__tests__/auto.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| /** | ||
| * @vitest-environment happy-dom | ||
| */ | ||
| import { beforeAll, beforeEach, describe, expect, test, vi } from 'vitest'; | ||
|
|
||
| import { enableAutoTrack, makeTracker } from '../auto'; | ||
|
|
||
| describe('callable events chain', () => { | ||
| const call = vi.fn(); | ||
| const track = makeTracker(call); | ||
|
|
||
| beforeEach(() => { | ||
| call.mockClear(); | ||
| }); | ||
|
|
||
| test('should call track with event and props', () => { | ||
| // @ts-expect-error fake chain | ||
| track.pageA.segmentA.moduleA.eventA(); | ||
|
|
||
| expect(call).toBeCalledWith('eventA', { | ||
| page: 'pageA', | ||
| segment: 'segmentA', | ||
| module: 'moduleA', | ||
| }); | ||
| }); | ||
|
|
||
| test('should be able to override props', () => { | ||
| // @ts-expect-error fake chain | ||
| track.pageA.segmentA.moduleA.eventA({ page: 'pageB', control: 'controlA' }); | ||
|
|
||
| expect(call).toBeCalledWith('eventA', { | ||
| page: 'pageB', | ||
| segment: 'segmentA', | ||
| module: 'moduleA', | ||
| control: 'controlA', | ||
| }); | ||
| }); | ||
|
|
||
| test('should be able to append custom props', () => { | ||
| // @ts-expect-error fake chain | ||
| track.pageA.segmentA.moduleA.eventA({ custom: 'prop' }); | ||
|
|
||
| expect(call).toBeCalledWith('eventA', { | ||
| page: 'pageA', | ||
| segment: 'segmentA', | ||
| module: 'moduleA', | ||
| custom: 'prop', | ||
| }); | ||
| }); | ||
|
|
||
| test('should be able to ignore matrix named with placeholder `$`', () => { | ||
| // @ts-expect-error fake chain | ||
| track.$.segmentA.moduleA.eventA(); | ||
| // @ts-expect-error fake chain | ||
| track.pageA.$.moduleA.eventA(); | ||
| // @ts-expect-error fake chain | ||
| track.pageA.segmentA.$.eventA(); | ||
| // @ts-expect-error fake chain | ||
| track.$.$.$.eventA(); | ||
|
|
||
| const args = [ | ||
| { | ||
| segment: 'segmentA', | ||
| module: 'moduleA', | ||
| }, | ||
| { | ||
| page: 'pageA', | ||
| module: 'moduleA', | ||
| }, | ||
| { | ||
| page: 'pageA', | ||
| segment: 'segmentA', | ||
| }, | ||
| {}, | ||
| ]; | ||
|
|
||
| args.forEach((arg, i) => { | ||
| expect(call).toHaveBeenNthCalledWith(i + 1, 'eventA', arg); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('auto track with dom dataset', () => { | ||
| const root = document.createElement('div'); | ||
| const call = vi.fn(); | ||
| beforeAll(() => { | ||
| call.mockReset(); | ||
| root.innerHTML = ''; | ||
| return enableAutoTrack(root, call); | ||
| }); | ||
|
|
||
| test('should ignore if data-event-props not set', () => { | ||
| const nonTrackBtn = document.createElement('button'); | ||
| root.append(nonTrackBtn); | ||
|
|
||
| nonTrackBtn.click(); | ||
|
|
||
| expect(call).not.toBeCalled(); | ||
| }); | ||
|
|
||
| test('should track event with props', () => { | ||
| const btn = document.createElement('button'); | ||
| btn.dataset.eventProps = 'allDocs.header.actions.createDoc'; | ||
| root.append(btn); | ||
|
|
||
| btn.click(); | ||
|
|
||
| expect(call).toBeCalledWith('createDoc', { | ||
| page: 'allDocs', | ||
| segment: 'header', | ||
| module: 'actions', | ||
| }); | ||
| }); | ||
|
|
||
| test('should track event with single', () => { | ||
| const btn = document.createElement('button'); | ||
| btn.dataset.eventProps = 'allDocs.header.actions.createDoc'; | ||
| btn.dataset.eventArg = 'test'; | ||
| root.append(btn); | ||
|
|
||
| btn.click(); | ||
|
|
||
| expect(call).toBeCalledWith('createDoc', { | ||
| page: 'allDocs', | ||
| segment: 'header', | ||
| module: 'actions', | ||
| arg: 'test', | ||
| }); | ||
| }); | ||
|
|
||
| test('should track event with multiple args', () => { | ||
| const btn = document.createElement('button'); | ||
| btn.dataset.eventProps = 'allDocs.header.actions.createDoc'; | ||
| btn.dataset.eventArgsFoo = 'bar'; | ||
| btn.dataset.eventArgsBaz = 'qux'; | ||
| root.append(btn); | ||
|
|
||
| btn.click(); | ||
|
|
||
| expect(call).toBeCalledWith('createDoc', { | ||
| page: 'allDocs', | ||
| segment: 'header', | ||
| module: 'actions', | ||
| foo: 'bar', | ||
| baz: 'qux', | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import { DebugLogger } from '@affine/debug'; | ||
|
|
||
| import type { CallableEventsChain, EventsUnion } from './types'; | ||
|
|
||
| const logger = new DebugLogger('mixpanel'); | ||
|
|
||
| interface TrackFn { | ||
| (event: string, props: Record<string, any>): void; | ||
| } | ||
|
|
||
| const levels = ['page', 'segment', 'module', 'event'] as const; | ||
| export function makeTracker(trackFn: TrackFn): CallableEventsChain { | ||
| function makeTrackerInner(level: number, info: Record<string, string>) { | ||
| const proxy = new Proxy({} as Record<string, any>, { | ||
| get(target, prop) { | ||
| if ( | ||
| typeof prop !== 'string' || | ||
| prop === '$$typeof' /* webpack hot load reading this prop */ | ||
| ) { | ||
| return undefined; | ||
| } | ||
|
|
||
| if (levels[level] === 'event') { | ||
| return (arg: string | Record<string, any>) => { | ||
| trackFn(prop, { | ||
| ...info, | ||
| ...(typeof arg === 'string' ? { arg } : arg), | ||
| }); | ||
| }; | ||
| } else { | ||
| let levelProxy = target[prop]; | ||
| if (levelProxy) { | ||
| return levelProxy; | ||
| } | ||
|
|
||
| levelProxy = makeTrackerInner( | ||
| level + 1, | ||
| prop === '$' ? { ...info } : { ...info, [levels[level]]: prop } | ||
| ); | ||
| target[prop] = levelProxy; | ||
| return levelProxy; | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
| return proxy; | ||
| } | ||
|
|
||
| return makeTrackerInner(0, {}) as CallableEventsChain; | ||
| } | ||
|
|
||
| /** | ||
| * listen on clicking on all subtree elements and auto track events if defined | ||
| * | ||
| * @example | ||
| * | ||
| * ```html | ||
| * <button data-event-chain='$.cmdk.settings.quicksearch.changeLanguage' data-event-arg='cn' /> | ||
| * ``` | ||
| */ | ||
| export function enableAutoTrack(root: HTMLElement, trackFn: TrackFn) { | ||
| const listener = (e: Event) => { | ||
| const el = e.target as HTMLElement | null; | ||
| if (!el) { | ||
| return; | ||
| } | ||
| const dataset = el.dataset; | ||
|
|
||
| if (dataset['eventProps']) { | ||
| const args: Record<string, any> = {}; | ||
| if (dataset['eventArg'] !== undefined) { | ||
| args['arg'] = dataset['event-arg']; | ||
| } else { | ||
| for (const argName of Object.keys(dataset)) { | ||
| if (argName.startsWith('eventArgs')) { | ||
| args[argName.slice(9).toLowerCase()] = dataset[argName]; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const props = dataset['eventProps'] | ||
| .split('.') | ||
| .map(name => (name === '$' ? undefined : name)); | ||
| if (props.length !== levels.length) { | ||
| logger.error('Invalid event props on element', el); | ||
| return; | ||
| } | ||
|
|
||
| const event = props[3]; | ||
|
|
||
| if (!event) { | ||
| logger.error('Invalid event props on element', el); | ||
| return; | ||
| } | ||
|
|
||
| trackFn(event, { | ||
| page: props[0] as any, | ||
| segment: props[1], | ||
| module: props[2], | ||
| ...args, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| root.addEventListener('click', listener, {}); | ||
| return () => { | ||
| root.removeEventListener('click', listener); | ||
| }; | ||
| } | ||
|
|
||
| declare module 'react' { | ||
| // we have to declare `T` but it's actually not used | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| interface HTMLAttributes<T> { | ||
| 'data-event-props'?: EventsUnion; | ||
| 'data-event-arg'?: string; | ||
| } | ||
| } |
Oops, something went wrong.