Skip to content

F
foresight
Commit 6ebb1c92 by James Ooi
Options

Implement TypeScript build tools

parent 69ef6e42
Showing with 126 additions and 112 deletions
.babelrc deleted 100644 → 0
{
"presets": [
"env",
"stage-2"
]
}
\ No newline at end of file
package.json
......@@ -5,14 +5,16 @@
"author": "James Ooi <wengteikooi@gmail.com>",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"awesome-typescript-loader": "^5.2.0",
"typescript": "^3.0.1",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"scrollmonitor": "^1.2.4"
},
"scripts": {
"start": "webpack --watch",
"dist": "webpack -p --progress"
}
}
src/foresight.js deleted 100644 → 0
/**
* Foresight Event Tracking Library
* @author James Ooi <james.ooi@forefront.com.my>
* @license MIT
*/
import ScrollMonitor from 'scrollmonitor';
/**
* Foresight is an event analytics tracking library that allows for declarative
* and elegant event tracking.
*/
class Foresight {
static track() {
if (gtag === undefined) {
throw 'The `gtag` function is undefined. Has Google Analytics been loaded yet?';
}
Foresight._setupClickTrackers();
Foresight._setupViewTrackers();
}
static _setupClickTrackers() {
const elements = [].slice
.call(document.querySelectorAll('[data-track]'))
.filter(el => el.getAttribute('data-track-ready') === null)
.forEach(el => {
el.addEventListener('click', e => Foresight._onClick(el, e));
el.addEventListener('auxclick', e => Foresight._onClick(el, e)); // also track middle clicks
el.setAttribute('data-track-ready', '');
});
}
static _setupViewTrackers() {
const watchers = [].slice
.call(document.querySelectorAll('[data-track-view]'))
.filter(el => el.getAttribute('data-track-view-ready') === null)
.map(el => {
const watcher = ScrollMonitor.create(el);
watcher.enterViewport(() => {
Foresight._onView(el);
watcher.destroy();
});
el.setAttribute('data-track-view-ready', '');
return watcher;
});
}
static _onClick(element) {
const eventString = element.getAttribute('data-track');
if (eventString === null || eventString === '') {
console.warn('Insufficient tracking arguments provided.', element);
return;
}
const eventStringArr = eventString.split(';');
let [ eventCategory, eventName, eventLabel ] = eventStringArr;
let isNonInteraction = element.getAttribute('data-track:non-interaction') !== null;
// If only one argument is provided, then the argument is the action
if (eventStringArr.length === 1) {
eventName = eventCategory;
eventCategory = undefined;
}
gtag('event', eventName, {
'event_label': eventLabel,
'event_category': eventCategory,
'non_interaction': isNonInteraction,
});
}
static _onView(element) {
const eventString = element.getAttribute('data-track-view');
if (eventString === null || eventString === '') {
console.warn('Insufficient tracking arguments provided.', element);
return;
}
const eventStringArr = eventString.split(';');
let [ eventCategory, eventName, eventLabel ] = eventStringArr;
let isNonInteraction = !(element.getAttribute('data-track-view:is-interaction') !== null);
// If only one argument is provided, then the argument is the action
if (eventStringArr.length === 1) {
eventName = eventCategory;
eventCategory = undefined;
}
gtag('event', eventName, {
'event_label': eventLabel,
'event_category': eventCategory,
'non_interaction': isNonInteraction,
});
}
}
module.exports = Foresight;
src/foresight.ts 0 → 100644
/**
* Foresight Event Tracking Library
* @author James Ooi <james.ooi@forefront.com.my>
* @license MIT
*/
// import ScrollMonitor from 'scrollmonitor';
/**
* Foresight is an event analytics tracking library that allows for declarative
* and elegant event tracking.
*/
class Foresight {
static track() {
console.log('hellu!');
}
// static track() {
// if (gtag === undefined) {
// throw 'The `gtag` function is undefined. Has Google Analytics been loaded yet?';
// }
// Foresight._setupClickTrackers();
// Foresight._setupViewTrackers();
// }
// static _setupClickTrackers() {
// const elements = [].slice
// .call(document.querySelectorAll('[data-track]'))
// .filter(el => el.getAttribute('data-track-ready') === null)
// .forEach(el => {
// el.addEventListener('click', e => Foresight._onClick(el, e));
// el.addEventListener('auxclick', e => Foresight._onClick(el, e)); // also track middle clicks
// el.setAttribute('data-track-ready', '');
// });
// }
// static _setupViewTrackers() {
// const watchers = [].slice
// .call(document.querySelectorAll('[data-track-view]'))
// .filter(el => el.getAttribute('data-track-view-ready') === null)
// .map(el => {
// const watcher = ScrollMonitor.create(el);
// watcher.enterViewport(() => {
// Foresight._onView(el);
// watcher.destroy();
// });
// el.setAttribute('data-track-view-ready', '');
// return watcher;
// });
// }
// static _onClick(element) {
// const eventString = element.getAttribute('data-track');
// if (eventString === null || eventString === '') {
// console.warn('Insufficient tracking arguments provided.', element);
// return;
// }
// const eventStringArr = eventString.split(';');
// let [ eventCategory, eventName, eventLabel ] = eventStringArr;
// let isNonInteraction = element.getAttribute('data-track:non-interaction') !== null;
// // If only one argument is provided, then the argument is the action
// if (eventStringArr.length === 1) {
// eventName = eventCategory;
// eventCategory = undefined;
// }
// gtag('event', eventName, {
// 'event_label': eventLabel,
// 'event_category': eventCategory,
// 'non_interaction': isNonInteraction,
// });
// }
// static _onView(element) {
// const eventString = element.getAttribute('data-track-view');
// if (eventString === null || eventString === '') {
// console.warn('Insufficient tracking arguments provided.', element);
// return;
// }
// const eventStringArr = eventString.split(';');
// let [ eventCategory, eventName, eventLabel ] = eventStringArr;
// let isNonInteraction = !(element.getAttribute('data-track-view:is-interaction') !== null);
// // If only one argument is provided, then the argument is the action
// if (eventStringArr.length === 1) {
// eventName = eventCategory;
// eventCategory = undefined;
// }
// gtag('event', eventName, {
// 'event_label': eventLabel,
// 'event_category': eventCategory,
// 'non_interaction': isNonInteraction,
// });
// }
}
export = Foresight;
tsconfig.json 0 → 100644
{
"compilerOptions": {
"target": "es5",
"allowJs": true,
"noImplicitAny": true,
"removeComments": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
\ No newline at end of file
webpack.config.js
......@@ -13,8 +13,8 @@ const isProduction = process.env.NODE_ENV === 'production' || process.argv.index
const config = {
mode: isProduction ? 'production' : 'development',
entry: {
'foresight': './src/foresight.js',
'foresight.min': './src/foresight.js',
'foresight': './src/foresight.ts',
'foresight.min': './src/foresight.ts',
},
output: {
path: path.join(__dirname, isProduction ? 'dist' : 'build'),
......@@ -26,12 +26,15 @@ const config = {
module: {
rules: [
{
test: /\.jsx?$/,
test: /\.tsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
use: ['awesome-typescript-loader'],
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
optimization: {
minimize: isProduction,
minimizer: [new UglifyJsPlugin({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment