update

.eslintrc.js

@@ -1,15 +1,7 @@
 module.exports = {
     parser: '@typescript-eslint/parser',
-    parserOptions: {
-        project: 'tsconfig.build.json',
-        tsconfigRootDir: __dirname,
-        sourceType: 'module',
-    },
     plugins: ['@typescript-eslint/eslint-plugin'],
-    extends: [
-        'plugin:@typescript-eslint/recommended',
-        'plugin:prettier/recommended',
-    ],
+    extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
     root: true,
     env: {
         node: true,

packages/core/src/event.ts

@@ -1,6 +1,47 @@
-import { GlobalEventType } from '@medici/types';
+import { getGlobalObject } from '@medici/utils';
+import { Dict } from '@medici/types';
 // export
+const global = getGlobalObject<Window>();
+
+// const eventSelect = "[class*='umami--']";
 export class Eventer {
+    private _identifier: string;
+    private eventSelect: string;
+    private eventClassValidate: RegExp;
+    private listeners: Dict<any>;
     constructor() {
+        this._identifier = 'mdc';
+        this.eventSelect = `[class*='${this._identifier}--']`;
+        this.eventClassValidate = /^mdc--([a-z]+)--([\w]+[\w-]*)$/;
+    }
+    updateIdentifier(identifier: string): void {
+        this._identifier = identifier;
+        this.eventClassValidate = new RegExp('^' + identifier + '--([a-z]+)--([w]+[w-]*)$');
+    }
+
+    addCssEvent(element: HTMLElement): void {
+        console.log('className', element.getAttribute('class'));
+        console.log('element', element);
+        (element.getAttribute('class') || '').split(' ').forEach((className) => {
+            console.log('validate', this.eventClassValidate.test(className));
+            if (!this.eventClassValidate.test(className)) return;
+
+            const [, type, value] = className.split('--');
+            const listener = this.listeners[className]
+                ? this.listeners[className]
+                : (this.listeners[className] = () => {
+                    if (element.tagName === 'A') {
+                        console.log('sendEvent', value, type);
+                        // sendEvent(value, type);
+                    } else {
+                        console.log('trackEvent', value, type);
+                        // trackEvent(value, type);
+                    }
+                });
+
+            console.log('listener', listener)
+
+            // element.addEventListener(type, listener, true);
+        });
     }
 }

packages/core/src/history.ts

@@ -85,9 +85,12 @@ export class IHistory {
      */
     observeDocument(): void {
         const monitorMutate = (mutations: MutationRecord[]) => {
+            console.log('mutations', mutations);
             mutations.forEach((mutation: MutationRecord) => {
-                const element = mutation.target;
-                console.log('element', element);
+                const element: Node = mutation.target;
+                console.log('element-1-dataset', (element as HTMLElement).dataset);
+                console.log('element-2', (element as HTMLElement).getAttribute('class'));
+                // this._sdk.eventer.addCssEvent(element as HTMLElement);
                 //   addEvent(element);
                 //   addEvents(element);
             });

packages/core/src/sdk.ts

@@ -3,6 +3,7 @@
 
 import { BaseTrack } from './basicTrack';
 import { IHistory } from './history';
+import { Eventer } from './event';
 
 export type PlatformType = 'web' | 'miniApp';
 
@@ -11,7 +12,7 @@ export interface SDKInitConfig {
     version?: string; //client version
 }
 export interface SDKConfigType {
-    endPoint: URL;
+    endPoint: string;
     appId: string;
     platform?: PlatformType;
     autoTrack?: boolean;
@@ -20,6 +21,7 @@ export interface SDKConfigType {
 export class SDK extends BaseTrack {
     protected _platform: PlatformType;
     protected _config: SDKInitConfig;
+    public eventer = new Eventer();
     // private _history: IHistory;
 
     constructor(params: SDKConfigType) {

play/src/components/page1.vue

@@ -1,14 +1,13 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <h1>page1</h1>
-
+    <h1>page1</h1>
+    <button class="mdc--track-1">test 1 button action tracker</button>
+    <button class="mdc--track-2">test 2 button action tracker</button>
 </template>
 
 <style scoped>
 .read-the-docs {
-  color: #888;
+    color: #888;
 }
 </style>