Merge pull request #28 from PiwikPRO/fix/eslint-and-proper-types

fix: enable eslint and follow it's errors

.eslintrc.cjs

@@ -0,0 +1,16 @@
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended-type-checked',
+  ],
+  plugins: ['@typescript-eslint'],
+  ignorePatterns:[".eslintrc.cjs", "example"],
+  parserOptions: {
+    project:true,
+    tsconfigRootDir: __dirname,
+  },
+}
+
+module.exports = config

.nvmrc

@@ -0,0 +1 @@
+v18.19.0

.prettierrc

@@ -4,7 +4,7 @@
   "semi": false,
   "tabWidth": 2,
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "arrowParens": "always",
   "trailingComma": "none"
 }

README.md

@@ -190,7 +190,7 @@ Custom events enable tracking visitor actions that are not predefined in the exi
 import { CustomEvent } from '@piwikpro/react-piwik-pro'
 ```
 #### Methods
-* `trackEvent(category: string, action: string, name?: string, value?: number) ` - Tracks a custom event, e.g. when a visitor interacts with the page.
+* `trackEvent(category: string, action: string, name?: string, value?: number, dimensions?: Object) ` - Tracks a custom event, e.g. when a visitor interacts with the page.
 
 ### Site search Service
 Site search tracking gives you insights into how visitors interact with the search engine on your website - what they search for and how many results they get back.

example/src/main.tsx

@@ -36,5 +36,8 @@ const App = () => (
 )
 
 const container = document.getElementById('root')
-// @ts-ignore
+if(!container){
+  throw new Error("#root element not found")
+}
+
 createRoot(container).render(<App />)

example/src/pages/CustomEventPage.tsx

@@ -45,9 +45,15 @@ const CustomEventPage: FunctionComponent = () => {
                   variant='contained'
                   onClick={() => {
                     setFinish(true)
-                    CustomEvent.trackEvent('user_data_form', 'submit')
+                    CustomEvent.trackEvent(
+                      'user_data_form',
+                      'submit',
+                      'success',
+                      10,
+                      { dimension1: 'value1' }
+                    )
                     enqueueSnackbar(
-                      "CustomEvent.trackEvent('user_data_form', 'submit')",
+                      "CustomEvent.trackEvent('user_data_form', 'submit', 'success', 10, { dimension1: 'value1' })",
                       { variant: 'success' }
                     )
                   }}

package.json

@@ -21,7 +21,10 @@
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
     "predeploy": "cd example && yarn install && yarn run build",
-    "deploy": "gh-pages -d example/build"
+    "deploy": "gh-pages -d example/build",
+    "format":"prettier src/**/*.ts --list-different",
+    "format:fix":"npm run format -- --write",
+    "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -41,15 +44,6 @@
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-config-standard-react": "^13.0.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.2",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-standard": "^5.0.0",
     "gh-pages": "^6.1.1",
     "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",

src/core/index.ts

@@ -1,5 +1,3 @@
-import { PiwikProWindow } from '../interfaces/piwikpro.window'
-
 function init(containerId: string, containerUrl: string, nonce?: string) {
   if (!containerId) {
     console.error('Empty tracking code for Piwik Pro.')
@@ -37,7 +35,7 @@ tags.async=!0,tags.src="${containerUrl}/"+id+".js"+qPString,scripts.parentNode.i
 
 export const IS_DEBUG =
   (typeof process !== 'undefined' && process.env.NODE_ENV === 'development') ||
-  (typeof window !== 'undefined' && (window as PiwikProWindow).IS_DEBUG) ||
+  (typeof window !== 'undefined' && window.IS_DEBUG) ||
   false
 
 export default {

src/index.tsx

@@ -1,3 +1,4 @@
+// NOTE: .tsx file extension is required for microbundle-crl to pick up and build the lib 
 import * as PiwikPro from './core'
 
 export * as PageViews from './services/pageViews/pageViews.service';

src/interfaces/payment.ts

@@ -1,8 +1,8 @@
 export type PaymentInformation = {
-  orderId: string;
-  grandTotal: number | string;
-  subTotal?: number | string;
-  tax?: number | string;
-  shipping?: number | string;
-  discount?: number | string;
-};
+  orderId: string
+  grandTotal: number | string
+  subTotal?: number | string
+  tax?: number | string
+  shipping?: number | string
+  discount?: number | string
+}

src/interfaces/piwikpro.window.ts

@@ -1,5 +1,7 @@
-export interface PiwikProWindow extends Window {
-  _paq?: any;
-  dataLayer?: any;
-  IS_DEBUG?: boolean;
+import { AnyData, QueueItem } from './utils'
+
+export interface PiwikProWindow {
+  _paq?: QueueItem[]
+  dataLayer?: AnyData[]
+  IS_DEBUG?: boolean
 }

src/interfaces/product.ts

@@ -1,14 +1,14 @@
 import { LimitedArrayFiveStrings } from './utils'
 
-type DimensionId = number;
+type DimensionId = number
 
 export type Product = {
-  sku: string,
-  name?: string,
-  category?: LimitedArrayFiveStrings<string[]>,
-  price?: number,
-  quantity?: number,
-  brand?: string,
-  variant?: string,
-  customDimensions?: Record<DimensionId, string>,
+  sku: string
+  name?: string
+  category?: LimitedArrayFiveStrings<string[]>
+  price?: number
+  quantity?: number
+  brand?: string
+  variant?: string
+  customDimensions?: Record<DimensionId, string>
 }

src/interfaces/tracker.ts

@@ -0,0 +1,11 @@
+import { VisitorInfo } from './visitorInfo'
+
+export type Tracker = {
+  hasCookies: () => boolean
+  getCustomDimensionValue: (id: string | number) => string | undefined
+  getLinkTrackingTimer: () => number
+  getEcommerceItems: () => object
+  getUserId: () => string
+  getVisitorId: () => string
+  getVisitorInfo: () => VisitorInfo
+}

src/interfaces/utils.ts

@@ -1 +1,13 @@
-export type LimitedArrayFiveStrings<T extends string[] = []> = [string, ...T] | [string, string, string, string, string];
+import { TRACK_EVENT } from '../constants/track-event.constant'
+import { Tracker } from './tracker'
+
+export type LimitedArrayFiveStrings<T extends string[] = []> =
+  | [string, ...T]
+  | [string, string, string, string, string]
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyData = any
+
+export type Dimensions = Record<`dimension${number}`, string>
+
+export type QueueItem = [TRACK_EVENT, ...unknown[]] | [(this: Tracker) => void]

src/interfaces/visitorInfo.ts

@@ -0,0 +1,9 @@
+export type VisitorInfo = [
+  isNew: '0' | '1',
+  visitorId: string,
+  firstVisitTS: number,
+  previousVisitCount: string | number,
+  currentVisitTS: number,
+  lastVisitTS: number | '',
+  lastEcommerceOrderTS: number | ''
+]

src/services/content-tracking/contentTracking.service.ts

@@ -7,15 +7,15 @@ export function trackAllContentImpressions() {
   ]);
 }
 
-export function trackVisibleContentImpressions(checkOnScroll?: boolean, watchIterval?: number) {
+export function trackVisibleContentImpressions(checkOnScroll?: boolean, watchInterval?: number) {
   PaqService.push([
     TRACK_EVENT.VISIBLE_CONTENT_IMPRESSIONS,
     checkOnScroll,
-    watchIterval,
+    watchInterval,
   ]);
 }
 
-export function trackContentImpressionsWithinNode(domNode: any) {
+export function trackContentImpressionsWithinNode(domNode: Node) {
   PaqService.push([
     TRACK_EVENT.CONTENT_IMPRESSIONS_WITH_NODE,
     domNode
@@ -35,7 +35,7 @@ export function logAllContentBlocksOnPage(): void {
   PaqService.push([ TRACK_EVENT.LOG_ALL_CONTENT_BLOCKS_ON_PAGE ]);
 }
 
-export function trackContentInteractionNode(domNode: any, contentInteraction: string) {
+export function trackContentInteractionNode(domNode: Node, contentInteraction: string) {
   PaqService.push([
     TRACK_EVENT.CONTENT_INTERACTION_NODE,
     domNode,

src/services/cookie-management/cookieManagement.service.ts

@@ -1,4 +1,5 @@
 import { TRACK_EVENT } from '../../constants/track-event.constant';
+import { Tracker } from '../../interfaces/tracker';
 import { PaqService } from '../paqService/paq.service';
 
 export function disableCookies() {
@@ -20,7 +21,7 @@ export function hasCookies(): Promise<boolean> {
   return new Promise((resolve, reject) => {
     try {
       PaqService.push([
-        function (this: any) {
+        function (this: Tracker) {
           resolve(this.hasCookies());
         },
       ]);

src/services/custom-dimensions/customDimensions.service.ts

@@ -1,4 +1,5 @@
 import { TRACK_EVENT } from '../../constants/track-event.constant';
+import { Tracker } from '../../interfaces/tracker';
 import { PaqService } from '../paqService/paq.service';
 
 export function setCustomDimensionValue(customDimensionId: string | number, customDimensionValue: string) {
@@ -9,11 +10,11 @@ export function deleteCustomDimension(customDimensionId: string) {
   PaqService.push([TRACK_EVENT.DELETE_CUSTOM_DIMENSION, customDimensionId]);
 }
 
-export function getCustomDimensionValue(customDimensionId: string | number): Promise<string> {
+export function getCustomDimensionValue(customDimensionId: string | number): Promise<string|undefined> {
   return new Promise((resolve, reject) => {
     try {
       PaqService.push([
-        function (this: any): void {
+        function (this: Tracker): void {
           resolve(this.getCustomDimensionValue(customDimensionId));
         },
       ]);

src/services/custom-events/customEvents.service.ts

@@ -1,12 +1,14 @@
 import { TRACK_EVENT } from '../../constants/track-event.constant';
+import { Dimensions } from '../../interfaces/utils';
 import { PaqService } from '../paqService/paq.service';
 
-export function trackEvent(category: string, action: string, name?: string, value?: number) {
-  const eventArguments: any[] = [
+export function trackEvent(category: string, action: string, name?: string, value?: number, dimensions?:Dimensions) {
+  const eventArguments = [
     category,
     action,
     ...(name ? [name] : []),
     ...(name ? [value] : []),
+    ...(dimensions ? [dimensions] : []),
   ];
   PaqService.push([TRACK_EVENT.CUSTOM_EVENT, ...eventArguments])
 }

src/services/dataLayer/dataLayer.service.ts

@@ -1,11 +1,14 @@
-import { PiwikProWindow } from '../../interfaces/piwikpro.window';
 import { IS_DEBUG } from '../../core';
+import { AnyData } from '../../interfaces/utils';
 
-export function push(data: any) {
-  if (!(window as PiwikProWindow).dataLayer) {
-    (window as PiwikProWindow).dataLayer = [];
+
+export function push(
+  data: AnyData
+) {
+  if (!window.dataLayer) {
+    window.dataLayer = [];
   }
 
   IS_DEBUG && console.log('DataLayer push', data);
-  return (window as PiwikProWindow).dataLayer.push(data);
+  return window.dataLayer.push(data);
 }

src/services/download-and-outlink/download-and-outlink.service.ts

@@ -1,12 +1,14 @@
 import { TRACK_EVENT } from '../../constants/track-event.constant';
+import { Tracker } from '../../interfaces/tracker';
+import { Dimensions } from '../../interfaces/utils';
 import { PaqService } from '../paqService/paq.service';
 
-export function trackLink(url: string, linkType: string, customData?: object, callback?: (params: any) => void) {
+export function trackLink(url: string, linkType: string, dimensions?: Dimensions, callback?: () => void) {
   PaqService.push([
     TRACK_EVENT.LINK,
     url,
     linkType,
-    customData,
+    dimensions,
     callback
   ]);
 }
@@ -39,11 +41,11 @@ export function setLinkTrackingTimer(time: number) {
   PaqService.push([TRACK_EVENT.SET_LINK_TRACKING_TIMER, time]);
 }
 
-export function getLinkTrackingTimer(): Promise<string> {
+export function getLinkTrackingTimer(): Promise<number> {
   return new Promise((resolve, reject) => {
     try {
       PaqService.push([
-        function (this: any) {
+        function (this: Tracker) {
           resolve(this.getLinkTrackingTimer());
         },
       ]);