From 2b4d161d0e82b253905a80c74d51329c7bf23461 Mon Sep 17 00:00:00 2001 From: Jonatan Alexis Anauati Date: Sat, 21 May 2016 12:48:02 -0300 Subject: [PATCH 1/7] ESLint: - enable object rest spread. - adslot: fix most of the eslint warnings. - utils: remote unused method. --- .eslintrc.json | 6 ++-- js/adslot.js | 85 +++++++++++++++++++++++++------------------------- js/utils.js | 14 --------- lib/adslot.js | 64 ++++++++++++++++++------------------- lib/utils.js | 17 ---------- 5 files changed, 78 insertions(+), 108 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 2168c69..5a306a4 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -11,7 +11,9 @@ "beforeEach": true, "afterEach": true }, - "ecmaFeatures": { - "experimentalObjectRestSpread": true + "parserOptions":{ + "ecmaFeatures": { + "experimentalObjectRestSpread": true + } } } \ No newline at end of file diff --git a/js/adslot.js b/js/adslot.js index 0c66628..d453094 100644 --- a/js/adslot.js +++ b/js/adslot.js @@ -1,6 +1,6 @@ import React from 'react'; -import {DFPManager} from './manager'; +import { DFPManager } from './manager'; export const AdSlot = React.createClass({ @@ -20,71 +20,65 @@ export const AdSlot = React.createClass({ shouldRefresh: React.PropTypes.func, slotId: React.PropTypes.string, }, - - + getDefaultProps() { return { fetchNow: false, }; }, - + + getInitialState() { + return { ...this.props, slotId: this.generateSlotId() }; + }, + + componentDidMount() { + this.registerSlot(); + }, + + componentWillReceiveProps(nextProps) { + if (nextProps.hasOwnProperty('objectId')) { + const state = this.state; + state.slotId = this.generateSlotId(); + this.unregisterSlot(); + this.setState(state); + this.registerSlot(); + } + }, + + componentWillUnmount() { + this.unregisterSlot(); + }, + + getSlotId() { + return this.props.slotId || this.state.slotId; + }, + generateSlotId() { let slotId = this.props.slotId; if (slotId === undefined) { - let seconds = (Date.now && Date.now() || new Date().getTime()) / 1000; + const seconds = (Date.now && Date.now() || new Date().getTime()) / 1000; slotId = `adSlot-${seconds}`; } - return slotId - }, - - getSlotId() { - return this.props.slotId || this.state.slotId; + return slotId; }, registerSlot() { - DFPManager.registerSlot({ ...this.props, ...this.state, slotShouldRefresh: this.slotShouldRefresh }); + DFPManager.registerSlot({ ...this.props, ...this.state, + slotShouldRefresh: this.slotShouldRefresh }); if (this.props.fetchNow === true) { DFPManager.load(this.getSlotId()); } DFPManager.attachSlotRenderEnded(this.slotRenderEnded); }, - + unregisterSlot() { DFPManager.unregisterSlot({ ...this.props, ...this.state }); DFPManager.detachSlotRenderEnded(this.slotRenderEnded); }, - getInitialState() { - return { ...this.props, slotId: this.generateSlotId() }; - }, - - componentDidMount() { - this.registerSlot(); - }, - - render() { - return ( -
- ); - }, - - componentWillUnmount() { - this.unregisterSlot(); - }, - - componentWillReceiveProps: function(nextProps) { - if (nextProps.hasOwnProperty('objectId')) { - let state = this.state; - state.slotId = this.generateSlotId(); - this.unregisterSlot(); - this.setState(state); - this.registerSlot(); - } - }, - slotRenderEnded(eventData) { if (eventData.slotId === this.getSlotId()) { - if (this.props.onSlotRender !== undefined) { + if (this.props.onSlotRender !== undefined) { this.props.onSlotRender(eventData); } } @@ -93,8 +87,15 @@ export const AdSlot = React.createClass({ slotShouldRefresh() { let r = true; if (this.props.shouldRefresh !== undefined) { - r = this.props.shouldRefresh({...this.props, slotId: this.getSlotId()}); + r = this.props.shouldRefresh({ ...this.props, slotId: this.getSlotId() }); } return r; }, + + render() { + return ( +
+ ); + }, + }); diff --git a/js/utils.js b/js/utils.js index afd50c2..f1ff67a 100644 --- a/js/utils.js +++ b/js/utils.js @@ -21,17 +21,3 @@ export function loadGPTScript() { }); } -let docIsReady = null; -export function onDocumentReady() { - if (docIsReady === null) { - docIsReady = new Promise((resolve) => { - if (document.readyState !== 'loading') { - resolve(); - } else { - document.addEventListener('DOMContentLoaded', () => resolve()); - } - }); - } - return docIsReady; -} - diff --git a/lib/adslot.js b/lib/adslot.js index 62a7c6e..4f596dc 100644 --- a/lib/adslot.js +++ b/lib/adslot.js @@ -38,6 +38,27 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({ fetchNow: false }; }, + getInitialState: function getInitialState() { + return _extends({}, this.props, { slotId: this.generateSlotId() }); + }, + componentDidMount: function componentDidMount() { + this.registerSlot(); + }, + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (nextProps.hasOwnProperty('objectId')) { + var state = this.state; + state.slotId = this.generateSlotId(); + this.unregisterSlot(); + this.setState(state); + this.registerSlot(); + } + }, + componentWillUnmount: function componentWillUnmount() { + this.unregisterSlot(); + }, + getSlotId: function getSlotId() { + return this.props.slotId || this.state.slotId; + }, generateSlotId: function generateSlotId() { var slotId = this.props.slotId; if (slotId === undefined) { @@ -46,11 +67,9 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({ } return slotId; }, - getSlotId: function getSlotId() { - return this.props.slotId || this.state.slotId; - }, registerSlot: function registerSlot() { - _manager.DFPManager.registerSlot(_extends({}, this.props, this.state, { slotShouldRefresh: this.slotShouldRefresh })); + _manager.DFPManager.registerSlot(_extends({}, this.props, this.state, { + slotShouldRefresh: this.slotShouldRefresh })); if (this.props.fetchNow === true) { _manager.DFPManager.load(this.getSlotId()); } @@ -60,35 +79,6 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({ _manager.DFPManager.unregisterSlot(_extends({}, this.props, this.state)); _manager.DFPManager.detachSlotRenderEnded(this.slotRenderEnded); }, - getInitialState: function getInitialState() { - return _extends({}, this.props, { slotId: this.generateSlotId() }); - }, - componentDidMount: function componentDidMount() { - this.registerSlot(); - }, - render: function render() { - return _jsx('div', { - className: 'adunitContainer' - }, void 0, ' ', _jsx('div', { - id: this.getSlotId(), - className: 'adBox' - }), ' '); - }, - componentWillUnmount: function componentWillUnmount() { - this.unregisterSlot(); - }, - - - componentWillReceiveProps: function componentWillReceiveProps(nextProps) { - if (nextProps.hasOwnProperty('objectId')) { - var state = this.state; - state.slotId = this.generateSlotId(); - this.unregisterSlot(); - this.setState(state); - this.registerSlot(); - } - }, - slotRenderEnded: function slotRenderEnded(eventData) { if (eventData.slotId === this.getSlotId()) { if (this.props.onSlotRender !== undefined) { @@ -102,5 +92,13 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({ r = this.props.shouldRefresh(_extends({}, this.props, { slotId: this.getSlotId() })); } return r; + }, + render: function render() { + return _jsx('div', { + className: 'adunitContainer' + }, void 0, ' ', _jsx('div', { + id: this.getSlotId(), + className: 'adBox' + }), ' '); } }); diff --git a/lib/utils.js b/lib/utils.js index ccc4adc..d543fdd 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.loadGPTScript = loadGPTScript; -exports.onDocumentReady = onDocumentReady; function doloadGPTScript(resolve, reject) { window.googletag = window.googletag || {}; window.googletag.cmd = window.googletag.cmd || []; @@ -27,19 +26,3 @@ function loadGPTScript() { doloadGPTScript(resolve, reject); }); } - -var docIsReady = null; -function onDocumentReady() { - if (docIsReady === null) { - docIsReady = new Promise(function (resolve) { - if (document.readyState !== 'loading') { - resolve(); - } else { - document.addEventListener('DOMContentLoaded', function () { - return resolve(); - }); - } - }); - } - return docIsReady; -} From a0629c8d6b8dfafda3d0bc5e3736d6468341692f Mon Sep 17 00:00:00 2001 From: Jonatan Alexis Anauati Date: Sat, 21 May 2016 12:59:58 -0300 Subject: [PATCH 2/7] classess??? to hell with them --- .eslintrc.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 5a306a4..48df1d3 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -11,9 +11,12 @@ "beforeEach": true, "afterEach": true }, - "parserOptions":{ + "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true } + }, + "rules": { + "react/prefer-es6-class": 0 } } \ No newline at end of file From d70830c1955f2c49d13affad0e5b1941d18f1cdf Mon Sep 17 00:00:00 2001 From: Jonatan Alexis Anauati Date: Sat, 21 May 2016 13:08:59 -0300 Subject: [PATCH 3/7] manager.js: fix eslint. --- js/manager.js | 15 ++++++++------- lib/manager.js | 9 +++++---- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/js/manager.js b/js/manager.js index 81ee6dc..8ebeefe 100644 --- a/js/manager.js +++ b/js/manager.js @@ -114,14 +114,15 @@ export const DFPManager = Object.assign(new EventEmitter(), { const slotsToRefresh = Object.keys(registeredSlots).map( (k) => registeredSlots[k] ); - return slotsToRefresh.reduce( (val, slot) => { + const slots = {}; + return slotsToRefresh.reduce((last, slot) => { if (slot.slotShouldRefresh() === true) { - val[slot.slotId] = slot; + slots[slot.slotId] = slot; } - return val; - }, {}); + return slots; + }, slots); }, - + refresh() { if (loadAlreadyCalled === false) { this.load(); @@ -153,11 +154,11 @@ export const DFPManager = Object.assign(new EventEmitter(), { unregisterSlot({ slotId }) { delete registeredSlots[slotId]; }, - + getRegisteredSlots() { return registeredSlots; }, - + attachSlotRenderEnded(cb) { this.on('slotRenderEnded', cb); }, diff --git a/lib/manager.js b/lib/manager.js index 52b9d29..3e12ac4 100644 --- a/lib/manager.js +++ b/lib/manager.js @@ -128,12 +128,13 @@ var DFPManager = exports.DFPManager = Object.assign(new _events.EventEmitter(), var slotsToRefresh = Object.keys(registeredSlots).map(function (k) { return registeredSlots[k]; }); - return slotsToRefresh.reduce(function (val, slot) { + var slots = {}; + return slotsToRefresh.reduce(function (last, slot) { if (slot.slotShouldRefresh() === true) { - val[slot.slotId] = slot; + slots[slot.slotId] = slot; } - return val; - }, {}); + return slots; + }, slots); }, refresh: function refresh() { var _this3 = this; From 7b13ac6c3afeed5d8b1daaaf4b636c7ff1448a6a Mon Sep 17 00:00:00 2001 From: Jonatan Alexis Anauati Date: Sat, 21 May 2016 13:13:45 -0300 Subject: [PATCH 4/7] fix eslint warnings --- spec/test-manager.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/spec/test-manager.js b/spec/test-manager.js index 62d33d5..6188f08 100644 --- a/spec/test-manager.js +++ b/spec/test-manager.js @@ -1,23 +1,23 @@ import { expect } from 'chai'; import { DFPManager } from '../lib'; -describe('DFPManager', function adSlot() { - - describe('Targeting arguments', function dfpManagerInteraction() { +describe('DFPManager', () => { + describe('Targeting arguments', () => { beforeEach(function beforeEach() { - this.argsList1 = {'k': 'yeah'}; - this.argsList2 = {'k': 'yeah'}; + this.argsList1 = { k: 'yeah' }; + this.argsList2 = { k: 'yeah' }; DFPManager.setTargetingArguments(this.argsList1); DFPManager.setTargetingArguments(this.argsList2); }); it('Registers global targeting arguments', function registersAdSlot() { - expect(DFPManager.getTargetingArguments()).to.contain.keys({ ...this.argsList1, ...this.argsList2}); + expect(DFPManager.getTargetingArguments()).to.contain.keys( + { ...this.argsList1, ...this.argsList2 } + ); }); - }); - describe('Creation of ad slots ', function dfpManagerInteraction() { + describe('Creation of ad slots ', () => { beforeEach(function beforeEach() { this.slotProps = { dfpNetworkId: 1000, From e591c912b4a35924524ee9b8b512f76a1abb5ee2 Mon Sep 17 00:00:00 2001 From: Jonatan Alexis Anauati Date: Sat, 21 May 2016 13:14:51 -0300 Subject: [PATCH 5/7] fix react prop warning --- spec/test-manager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/test-manager.js b/spec/test-manager.js index 6188f08..4392b60 100644 --- a/spec/test-manager.js +++ b/spec/test-manager.js @@ -20,7 +20,7 @@ describe('DFPManager', () => { describe('Creation of ad slots ', () => { beforeEach(function beforeEach() { this.slotProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', slotId: 'testElement', sizes: [[728, 90]], From bba9c35c609ba3ea754789e39e059d08cbe1d304 Mon Sep 17 00:00:00 2001 From: Jonatan Alexis Anauati Date: Sat, 21 May 2016 13:27:37 -0300 Subject: [PATCH 6/7] run eslint before distributing --- grunt/aliases.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/grunt/aliases.yaml b/grunt/aliases.yaml index c3d21cb..49383d5 100644 --- a/grunt/aliases.yaml +++ b/grunt/aliases.yaml @@ -2,6 +2,7 @@ default: - 'dist' dist: + - 'eslint' - 'clean' - 'babel:dist' From dc068a62090a08ecf159d78d9631269d26a655c0 Mon Sep 17 00:00:00 2001 From: Jonatan Alexis Anauati Date: Sat, 21 May 2016 13:51:54 -0300 Subject: [PATCH 7/7] update doc, tags & version --- Readme.md | 3 ++- package.json | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/Readme.md b/Readme.md index bf91ace..ca459a5 100644 --- a/Readme.md +++ b/Readme.md @@ -1,5 +1,6 @@ # React DFP -Inspired on jquery.dfp :-)... gpt/dfp components for react. +Gpt/dfp components that you can easily use in your isomorphic react apps. This package is inspired in the awesome library [jquery.dfp](https://github.com/coop182/jquery.dfp.js), and aims to provide its same ease of usage but, of course, taking into consideration the react concepts & lifecycle features. + ## Install: ``` diff --git a/package.json b/package.json index 4ed9867..a9a44ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-dfp", - "version": "0.3.3", + "version": "0.3.4", "author": { "name": "Jonatan Alexis Anauati", "email": "barakawins@gmail.com" @@ -14,6 +14,7 @@ "gpt", "dfp", "google dfp", + "google doubleclick for publishers", "advertising", "react-component" ],