Add 'on' function to the tracker to listen to specific event.

Author: faouzioudouh

package.json

@@ -2,7 +2,7 @@
   "name": "react-tracker",
   "version": "1.0.0",
   "description": "Track actions within your React app with a tracker redux-like!",
-  "main": "index.js",
+  "main": "build/index.js",
   "scripts": {
     "build": "webpack"
   },
@@ -34,7 +34,6 @@
     "webpack": "^3.6.0"
   },
   "dependencies": {
-    "hoist-non-react-statics": "^2.2.1",
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {

src/HOCs/provideTrackEvent.js

@@ -6,7 +6,7 @@ const provideTrackEvent = (Component, mapTrackerEventToProps) => {
     const displayName = getDisplayName(Component);
 
     const trackEventProvider = (props, context) => {
-        const trackEvent = context.tracker.dispatch;
+        const trackEvent = context.trackEvent;
 
         if (!trackEvent) {
             throw Error(`Could not find tracker in the context of ` + `"${displayName}"`);
@@ -19,7 +19,7 @@ const provideTrackEvent = (Component, mapTrackerEventToProps) => {
 
     trackEventProvider.displayName = displayName;
     trackEventProvider.contextTypes = {
-        tracker: Types.tracker.isRequired
+        trackEvent: Types.func.isRequired
     };
 
     return trackEventProvider;

src/Tracker.js

@@ -1,29 +1,34 @@
+import { assertSubscribers } from './utils';
+
 export default class Tracker {
     constructor(subscribers) {
         this.trackingHistory = [];
-        this.subscribers = subscribers || [];
+        this.subscribers = assertSubscribers(subscribers);
+
+        this.dispatch = this.dispatch.bind(this);
     }
 
-    subscribe(eventType, callback) {
-        this.subscribers = [...this.subscribers, Object.assign({}, { [eventType]: callback })];
+    on(eventType, callback) {
+        if (typeof callback === 'function' && eventType && typeof eventType === 'string') {
+            callback.eventType = eventType;
+
+            this.subscribers = [...this.subscribers, callback];
+        }
     }
 
-    dispatch = (event) => {
+    dispatch(event) {
         const { type, data } = event || {};
 
         if (!type) {
             return null;
         }
-      
-        for (let subscriber in this.subscribers) {
 
-            if (Object.prototype.hasOwnProperty.call(this.subscribers, subscriber)) {
-                if (typeof this.subscribers[subscriber] === 'function' && subscriber === type) {
-                    const save = this.subscribers[subscriber](event, this.trackingHistory);
+        for (let i = 0; i < this.subscribers.length; i++) {
+            if (typeof this.subscribers[i] === 'function' && this.subscribers[i].eventType === type) {
+                const save = this.subscribers[i].call(null, event, this.trackingHistory);
 
-                    if (save) {
-                        this.trackingHistory = [...this.trackingHistory, save];
-                    }
+                if (save) {
+                    this.trackingHistory = [...this.trackingHistory, save];
                 }
             }
         }

src/components/TrackerProvider.js

@@ -3,31 +3,26 @@ import Types from '../types';
 
 export default class TrackerProvider extends Component {
     getChildContext() {
-        console.log('from here: ', this.tracker);
         return {
-            tracker: this.tracker
+            trackEvent: this.tracker.dispatch
+            // We might need to extract other properties later.
         }
     }
 
     constructor(props, context) {
         super(props, context)
         this.tracker = props.tracker;
-
-        console.log('from here constrc: ', this.tracker);
     }
 
     render() {
-        console.log('from here render: ', this.tracker);
-
         return Children.only(this.props.children)
     }
 }
 
 TrackerProvider.propTypes = {
-    tracker: Types.tracker.isRequired,
     children: Types.element.isRequired,
 };
 
 TrackerProvider.childContextTypes = {
-    tracker: Types.tracker.isRequired,
+    trackEvent: Types.func.isRequired,
 };

src/utils/index.js

@@ -2,7 +2,18 @@ export const getDisplayName = WrappedComponent => {
     const wrappedComponentName = WrappedComponent.displayName
         || WrappedComponent.name
         || 'Component';
-    
-    
+
     return `TrackEventProvider(${wrappedComponentName})`;
-}
+}
+
+export const assertSubscribers = (subscribers = []) => {
+    return subscribers.map(subscriber => {
+        const eventType = Object.keys(subscriber)[0];
+
+        if ( eventType && typeof subscriber[eventType] === 'function') {
+            subscriber[eventType].eventType = eventType;
+            return subscriber[eventType];
+        }
+    })
+    .filter(subscriber => Boolean(subscriber));
+}

webpack.config.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const path = require('path');
-const { ReactLoadablePlugin } = require('webpack');
+const webpack = require('webpack');
 
 module.exports = {
 entry: {
@@ -18,25 +18,44 @@ output: {
 },
 module: {
     rules: [
-    {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: {
-        loader: 'babel-loader',
-        options: {
-            babelrc: false,
-            presets: [
-            ['es2015', { modules: false }],
-            'react',
-            ],
-            plugins: [
-            'transform-class-properties',
-            'transform-object-assign',
-            ],
-        }
+        {
+            test: /\.js$/,
+            exclude: /node_modules/,
+            use: {
+            loader: 'babel-loader',
+            options: {
+                babelrc: false,
+                presets: [
+                ['es2015', { modules: false }],
+                'react',
+                ],
+                plugins: [
+                'transform-class-properties',
+                'transform-object-assign',
+                ],
+            }
+            },
         },
-    },
-    ],
+    ]
 },
-devtool: 'inline-source-map'
+plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('production')
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      mangle: true,
+      compress: {
+        warnings: false,
+        pure_getters: true,
+        unsafe: true,
+        unsafe_comps: true,
+        screw_ie8: true
+      },
+      output: {
+        comments: false,
+      }
+    }),
+]
 };