From a7580c60e2807b2d582945db94a57bf5c6cfc834 Mon Sep 17 00:00:00 2001 From: Denis Rul Date: Fri, 16 Dec 2016 18:33:47 +0200 Subject: [PATCH] Bug fix * Remove 'module' field from the package file due to multiple issues with Webpack 2 * Provide a fallback for a non-browser environment --- README.md | 2 +- bower.json | 2 +- dist/ResizeObserver.es.js | 187 +++++++++++++++++---------- dist/ResizeObserver.global.js | 200 +++++++++++++++++++---------- dist/ResizeObserver.js | 196 ++++++++++++++++++---------- index.global.js | 7 +- index.js | 5 +- package.json | 3 +- src/ResizeObserver.js | 129 +++++++++++-------- src/ResizeObserverController.js | 5 +- src/shims/es6-collections.js | 9 +- src/shims/global.js | 19 +++ src/shims/requestAnimationFrame.js | 6 +- src/utils/isBrowser.js | 6 + src/{ => utils}/throttle.js | 4 +- 15 files changed, 498 insertions(+), 282 deletions(-) create mode 100644 src/shims/global.js create mode 100644 src/utils/isBrowser.js rename src/{ => utils}/throttle.js (93%) diff --git a/README.md b/README.md index 3e191c5..f9314a8 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ import ResizeObserver from 'resize-observer-polyfill'; window.ResizeObserver = ResizeObserver; ``` -Package's main file is a ES5 [UMD](https://github.com/umdjs/umd) module and it will be dynamically substituted by the ES6 version for those bundlers that are aware of the [jnext:main](https://github.com/rollup/rollup/wiki/jsnext:main) or `module` fields, e.g. for [Rollup](https://github.com/rollup/rollup) or [Webpack 2](https://webpack.js.org/). +Package's main file is a ES5 [UMD](https://github.com/umdjs/umd) module and it will be dynamically substituted by the ES6 version for those bundlers that are aware of the [jnext:main](https://github.com/rollup/rollup/wiki/jsnext:main) field, e.g. for [Rollup](https://github.com/rollup/rollup). **Note**: global versions (`index.global` and `dist/ResizeObserver.global`) are deprecated and will be removed in the next major release. diff --git a/bower.json b/bower.json index 67cd56f..13b7b5c 100644 --- a/bower.json +++ b/bower.json @@ -10,7 +10,7 @@ "node", "es6" ], - "version": "1.3.0", + "version": "1.3.1", "main": [ "dist/ResizeObserver.js" ], diff --git a/dist/ResizeObserver.es.js b/dist/ResizeObserver.es.js index f50c217..c0e237b 100644 --- a/dist/ResizeObserver.es.js +++ b/dist/ResizeObserver.es.js @@ -1,3 +1,28 @@ +/** + * Exports global object for the current environment. + */ +var global$1 = (function () { + if (typeof self != 'undefined' && self.Math === Math) { + return self; + } + + if (typeof window != 'undefined' && window.Math === Math) { + return window; + } + + if (typeof global != 'undefined' && global.Math === Math) { + return global; + } + + // eslint-disable-next-line no-new-func + return Function('return this')(); +})(); + +/** + * Detects whether window and document objects are available in current environment. + */ +var isBrowser = global$1.window === global$1 && typeof document != 'undefined'; + var classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); @@ -53,12 +78,13 @@ var possibleConstructorReturn = function (self, call) { * These implementations are not meant to be used outside of * ResizeObserver modules as they cover only a limited range * of use cases. - *//* eslint-disable require-jsdoc */ -var hasNativeCollections = typeof window.WeakMap === 'function' && typeof window.Map === 'function'; + */ +/* eslint-disable require-jsdoc */ +var hasNativeCollections = typeof global$1.WeakMap === 'function' && typeof global$1.Map === 'function'; var WeakMap = function () { if (hasNativeCollections) { - return window.WeakMap; + return global$1.WeakMap; } function getIndex(arr, key) { @@ -119,7 +145,7 @@ var WeakMap = function () { var Map = function () { if (hasNativeCollections) { - return window.Map; + return global$1.Map; } return function (_WeakMap) { @@ -187,9 +213,9 @@ var Map = function () { * * @returns {Number} Requests' identifier. */ -var reqAnimFrame = (function () { - if (typeof window.requestAnimationFrame === 'function') { - return window.requestAnimationFrame; +var requestAnimFrame = (function () { + if (typeof global$1.requestAnimationFrame === 'function') { + return global$1.requestAnimationFrame; } return function (callback) { @@ -241,7 +267,7 @@ var throttle = function (callback) { * if "afterRAF" parameter is set to "true". */ function timeoutCallback() { - afterRAF ? reqAnimFrame(invokeCallback) : invokeCallback(); + afterRAF ? requestAnimFrame(invokeCallback) : invokeCallback(); } /** @@ -271,7 +297,7 @@ var throttle = function (callback) { }; // Define whether the MutationObserver is supported. -var mutationsSupported = typeof window.MutationObserver === 'function'; +var mutationsSupported = typeof global$1.MutationObserver === 'function'; /** * Controller class which handles updates of ResizeObserver instances. @@ -879,7 +905,7 @@ function ResizeObserverEntry(target, rectData) { }, { configurable: true }); }; -var ResizeObserver$3 = function () { +var ResizeObserver$2 = function () { /** * Creates a new instance of ResizeObserver. * @@ -1046,83 +1072,110 @@ var ResizeObserver$3 = function () { return ResizeObserver; }(); -// Controller that will be assigned to all instances of ResizeObserver. -var controller = new ResizeObserverController(); +var ResizeObserverPolyfill = (function () { + if (!isBrowser) { + /* eslint-disable */ + var _ResizeObserver2 = function () { + function _ResizeObserver2() { + classCallCheck(this, _ResizeObserver2); + } -// Registry of the internal observers. -var observers = new WeakMap(); + _ResizeObserver2.prototype.observe = function observe() {}; -/** - * ResizeObservers' "Proxy" class which is meant to hide private properties and - * methods from public instances. - * - * Additionally implements the "continuousUpdates" static property accessor to - * give control over the behavior of the ResizeObserverController instance. - * Changes made to this property affect all future and existing observers. - */ -var ResizeObserver$2 = function () { - /** - * Creates a new instance of ResizeObserver. - * - * @param {Function} callback - Callback that is invoked when dimensions of - * one of the observed elements change. - */ - function ResizeObserver(callback) { - classCallCheck(this, ResizeObserver); + _ResizeObserver2.prototype.unobserve = function unobserve() {}; - if (!arguments.length) { - throw new TypeError('1 argument required, but only 0 present.'); - } + _ResizeObserver2.prototype.disconnect = function disconnect() {}; - // Create a new instance of the internal ResizeObserver. - var observer = new ResizeObserver$3(callback, controller, this); + return _ResizeObserver2; + }(); + /* eslint-enable */ + _ResizeObserver2.continuousUpdates = false; - // Register internal observer. - observers.set(this, observer); + return _ResizeObserver2; } - createClass(ResizeObserver, null, [{ - key: 'continuousUpdates', + // Controller that will be assigned to all instances of ResizeObserver. + var controller = new ResizeObserverController(); - /** - * Tells whether continuous updates are enabled. - * - * @returns {Boolean} - */ - get: function get() { - return controller.continuousUpdates; - }, + // Registry of the internal observers. + var observers = new WeakMap(); + /** + * ResizeObservers' "Proxy" class which is meant to hide private properties and + * methods from public instances. + * + * Additionally implements the "continuousUpdates" static property accessor to + * give control over the behavior of the ResizeObserverController instance. + * Changes made to this property affect all future and existing observers. + */ + var ResizeObserver = function () { /** - * Enables or disables continuous updates. + * Creates a new instance of ResizeObserver. * - * @param {Boolean} value - Whether to enable or disable continuous updates. + * @param {Function} callback - Callback that is invoked when dimensions of + * one of the observed elements change. */ - set: function set(value) { - if (typeof value !== 'boolean') { - throw new TypeError('type of "continuousUpdates" value must be boolean.'); + function ResizeObserver(callback) { + classCallCheck(this, ResizeObserver); + + if (!arguments.length) { + throw new TypeError('1 argument required, but only 0 present.'); } - controller.continuousUpdates = value; + // Create a new instance of the internal ResizeObserver. + var observer = new ResizeObserver$2(callback, controller, this); + + // Register internal observer. + observers.set(this, observer); } - }]); - return ResizeObserver; -}(); -// Expose public methods of ResizeObserver. -['observe', 'unobserve', 'disconnect'].forEach(function (method) { - ResizeObserver$2.prototype[method] = function () { - var _observers$get; + createClass(ResizeObserver, null, [{ + key: 'continuousUpdates', - return (_observers$get = observers.get(this))[method].apply(_observers$get, arguments); - }; -}); + /** + * Tells whether continuous updates are enabled. + * + * @returns {Boolean} + */ + get: function get() { + return controller.continuousUpdates; + }, + + /** + * Enables or disables continuous updates. + * + * @param {Boolean} value - Whether to enable or disable continuous updates. + */ + set: function set(value) { + if (typeof value !== 'boolean') { + throw new TypeError('type of "continuousUpdates" value must be boolean.'); + } + + controller.continuousUpdates = value; + } + }]); + return ResizeObserver; + }(); + + // Expose public methods of ResizeObserver. + ['observe', 'unobserve', 'disconnect'].forEach(function (method) { + ResizeObserver.prototype[method] = function () { + if (isBrowser) { + var _observers$get; + + (_observers$get = observers.get(this))[method].apply(_observers$get, arguments); + } + }; + }); + + return ResizeObserver; +})(); -var ResizeObserver = ResizeObserver$2; +var ResizeObserver = ResizeObserverPolyfill; // Export existing implementation if it's available. -if (typeof window.ResizeObserver === 'function') { - ResizeObserver = window.ResizeObserver; +if (typeof global$1.ResizeObserver === 'function') { + ResizeObserver = global$1.ResizeObserver; } var ResizeObserver$1 = ResizeObserver; diff --git a/dist/ResizeObserver.global.js b/dist/ResizeObserver.global.js index bd09a4b..9d6a0cc 100644 --- a/dist/ResizeObserver.global.js +++ b/dist/ResizeObserver.global.js @@ -1,8 +1,34 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : - typeof define === 'function' && define.amd ? define(factory) : - (global.ResizeObserver = factory()); -}(this, (function () { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.ResizeObserver = factory()); +}(this, (function () { +'use strict'; + +/** + * Exports global object for the current environment. + */ +var global$1 = (function () { + if (typeof self != 'undefined' && self.Math === Math) { + return self; + } + + if (typeof window != 'undefined' && window.Math === Math) { + return window; + } + + if (typeof global != 'undefined' && global.Math === Math) { + return global; + } + + // eslint-disable-next-line no-new-func + return Function('return this')(); +})(); + +/** + * Detects whether window and document objects are available in current environment. + */ +var isBrowser = global$1.window === global$1 && typeof document != 'undefined'; var classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { @@ -59,12 +85,13 @@ var possibleConstructorReturn = function (self, call) { * These implementations are not meant to be used outside of * ResizeObserver modules as they cover only a limited range * of use cases. - *//* eslint-disable require-jsdoc */ -var hasNativeCollections = typeof window.WeakMap === 'function' && typeof window.Map === 'function'; + */ +/* eslint-disable require-jsdoc */ +var hasNativeCollections = typeof global$1.WeakMap === 'function' && typeof global$1.Map === 'function'; var WeakMap = function () { if (hasNativeCollections) { - return window.WeakMap; + return global$1.WeakMap; } function getIndex(arr, key) { @@ -125,7 +152,7 @@ var WeakMap = function () { var Map = function () { if (hasNativeCollections) { - return window.Map; + return global$1.Map; } return function (_WeakMap) { @@ -193,9 +220,9 @@ var Map = function () { * * @returns {Number} Requests' identifier. */ -var reqAnimFrame = (function () { - if (typeof window.requestAnimationFrame === 'function') { - return window.requestAnimationFrame; +var requestAnimFrame = (function () { + if (typeof global$1.requestAnimationFrame === 'function') { + return global$1.requestAnimationFrame; } return function (callback) { @@ -247,7 +274,7 @@ var throttle = function (callback) { * if "afterRAF" parameter is set to "true". */ function timeoutCallback() { - afterRAF ? reqAnimFrame(invokeCallback) : invokeCallback(); + afterRAF ? requestAnimFrame(invokeCallback) : invokeCallback(); } /** @@ -277,7 +304,7 @@ var throttle = function (callback) { }; // Define whether the MutationObserver is supported. -var mutationsSupported = typeof window.MutationObserver === 'function'; +var mutationsSupported = typeof global$1.MutationObserver === 'function'; /** * Controller class which handles updates of ResizeObserver instances. @@ -885,7 +912,7 @@ function ResizeObserverEntry(target, rectData) { }, { configurable: true }); }; -var ResizeObserver$2 = function () { +var ResizeObserver$1 = function () { /** * Creates a new instance of ResizeObserver. * @@ -1052,82 +1079,113 @@ var ResizeObserver$2 = function () { return ResizeObserver; }(); -// Controller that will be assigned to all instances of ResizeObserver. -var controller = new ResizeObserverController(); +var ResizeObserver = (function () { + if (!isBrowser) { + /* eslint-disable */ + var _ResizeObserver2 = function () { + function _ResizeObserver2() { + classCallCheck(this, _ResizeObserver2); + } -// Registry of the internal observers. -var observers = new WeakMap(); + _ResizeObserver2.prototype.observe = function observe() {}; -/** - * ResizeObservers' "Proxy" class which is meant to hide private properties and - * methods from public instances. - * - * Additionally implements the "continuousUpdates" static property accessor to - * give control over the behavior of the ResizeObserverController instance. - * Changes made to this property affect all future and existing observers. - */ -var ResizeObserver = function () { - /** - * Creates a new instance of ResizeObserver. - * - * @param {Function} callback - Callback that is invoked when dimensions of - * one of the observed elements change. - */ - function ResizeObserver(callback) { - classCallCheck(this, ResizeObserver); + _ResizeObserver2.prototype.unobserve = function unobserve() {}; - if (!arguments.length) { - throw new TypeError('1 argument required, but only 0 present.'); - } + _ResizeObserver2.prototype.disconnect = function disconnect() {}; - // Create a new instance of the internal ResizeObserver. - var observer = new ResizeObserver$2(callback, controller, this); + return _ResizeObserver2; + }(); + /* eslint-enable */ - // Register internal observer. - observers.set(this, observer); + _ResizeObserver2.continuousUpdates = false; + + return _ResizeObserver2; } - createClass(ResizeObserver, null, [{ - key: 'continuousUpdates', + // Controller that will be assigned to all instances of ResizeObserver. + var controller = new ResizeObserverController(); - /** - * Tells whether continuous updates are enabled. - * - * @returns {Boolean} - */ - get: function get() { - return controller.continuousUpdates; - }, + // Registry of the internal observers. + var observers = new WeakMap(); + /** + * ResizeObservers' "Proxy" class which is meant to hide private properties and + * methods from public instances. + * + * Additionally implements the "continuousUpdates" static property accessor to + * give control over the behavior of the ResizeObserverController instance. + * Changes made to this property affect all future and existing observers. + */ + var ResizeObserver = function () { /** - * Enables or disables continuous updates. + * Creates a new instance of ResizeObserver. * - * @param {Boolean} value - Whether to enable or disable continuous updates. + * @param {Function} callback - Callback that is invoked when dimensions of + * one of the observed elements change. */ - set: function set(value) { - if (typeof value !== 'boolean') { - throw new TypeError('type of "continuousUpdates" value must be boolean.'); + function ResizeObserver(callback) { + classCallCheck(this, ResizeObserver); + + if (!arguments.length) { + throw new TypeError('1 argument required, but only 0 present.'); } - controller.continuousUpdates = value; + // Create a new instance of the internal ResizeObserver. + var observer = new ResizeObserver$1(callback, controller, this); + + // Register internal observer. + observers.set(this, observer); } - }]); - return ResizeObserver; -}(); -// Expose public methods of ResizeObserver. -['observe', 'unobserve', 'disconnect'].forEach(function (method) { - ResizeObserver.prototype[method] = function () { - var _observers$get; + createClass(ResizeObserver, null, [{ + key: 'continuousUpdates', - return (_observers$get = observers.get(this))[method].apply(_observers$get, arguments); - }; -}); + /** + * Tells whether continuous updates are enabled. + * + * @returns {Boolean} + */ + get: function get() { + return controller.continuousUpdates; + }, + + /** + * Enables or disables continuous updates. + * + * @param {Boolean} value - Whether to enable or disable continuous updates. + */ + set: function set(value) { + if (typeof value !== 'boolean') { + throw new TypeError('type of "continuousUpdates" value must be boolean.'); + } + + controller.continuousUpdates = value; + } + }]); + return ResizeObserver; + }(); + + // Expose public methods of ResizeObserver. + ['observe', 'unobserve', 'disconnect'].forEach(function (method) { + ResizeObserver.prototype[method] = function () { + if (isBrowser) { + var _observers$get; -if (typeof window.ResizeObserver !== 'function') { + (_observers$get = observers.get(this))[method].apply(_observers$get, arguments); + } + }; + }); + + return ResizeObserver; +})(); + +/** + * @deprecated Global version of the polyfill is deprecated and will be removed in the next major release. + */ +if (typeof global$1.ResizeObserver !== 'function') { // ResizeObserver host property is not enumerable // in the native implementation. - Object.defineProperty(window, 'ResizeObserver', { + Object.defineProperty(global$1, 'ResizeObserver', { value: ResizeObserver, writable: true, configurable: true @@ -1136,7 +1194,7 @@ if (typeof window.ResizeObserver !== 'function') { // Still export the constructor as for me it seems // awkward when a module doesn't export anything. -var index_global = window.ResizeObserver; +var index_global = global$1.ResizeObserver; return index_global; }))); diff --git a/dist/ResizeObserver.js b/dist/ResizeObserver.js index 1c584b7..58346d3 100644 --- a/dist/ResizeObserver.js +++ b/dist/ResizeObserver.js @@ -1,8 +1,34 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : - typeof define === 'function' && define.amd ? define(factory) : - (global.ResizeObserver = factory()); -}(this, (function () { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.ResizeObserver = factory()); +}(this, (function () { +'use strict'; + +/** + * Exports global object for the current environment. + */ +var global$1 = (function () { + if (typeof self != 'undefined' && self.Math === Math) { + return self; + } + + if (typeof window != 'undefined' && window.Math === Math) { + return window; + } + + if (typeof global != 'undefined' && global.Math === Math) { + return global; + } + + // eslint-disable-next-line no-new-func + return Function('return this')(); +})(); + +/** + * Detects whether window and document objects are available in current environment. + */ +var isBrowser = global$1.window === global$1 && typeof document != 'undefined'; var classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { @@ -59,12 +85,13 @@ var possibleConstructorReturn = function (self, call) { * These implementations are not meant to be used outside of * ResizeObserver modules as they cover only a limited range * of use cases. - *//* eslint-disable require-jsdoc */ -var hasNativeCollections = typeof window.WeakMap === 'function' && typeof window.Map === 'function'; + */ +/* eslint-disable require-jsdoc */ +var hasNativeCollections = typeof global$1.WeakMap === 'function' && typeof global$1.Map === 'function'; var WeakMap = function () { if (hasNativeCollections) { - return window.WeakMap; + return global$1.WeakMap; } function getIndex(arr, key) { @@ -125,7 +152,7 @@ var WeakMap = function () { var Map = function () { if (hasNativeCollections) { - return window.Map; + return global$1.Map; } return function (_WeakMap) { @@ -193,9 +220,9 @@ var Map = function () { * * @returns {Number} Requests' identifier. */ -var reqAnimFrame = (function () { - if (typeof window.requestAnimationFrame === 'function') { - return window.requestAnimationFrame; +var requestAnimFrame = (function () { + if (typeof global$1.requestAnimationFrame === 'function') { + return global$1.requestAnimationFrame; } return function (callback) { @@ -247,7 +274,7 @@ var throttle = function (callback) { * if "afterRAF" parameter is set to "true". */ function timeoutCallback() { - afterRAF ? reqAnimFrame(invokeCallback) : invokeCallback(); + afterRAF ? requestAnimFrame(invokeCallback) : invokeCallback(); } /** @@ -277,7 +304,7 @@ var throttle = function (callback) { }; // Define whether the MutationObserver is supported. -var mutationsSupported = typeof window.MutationObserver === 'function'; +var mutationsSupported = typeof global$1.MutationObserver === 'function'; /** * Controller class which handles updates of ResizeObserver instances. @@ -885,7 +912,7 @@ function ResizeObserverEntry(target, rectData) { }, { configurable: true }); }; -var ResizeObserver$3 = function () { +var ResizeObserver$2 = function () { /** * Creates a new instance of ResizeObserver. * @@ -1052,83 +1079,110 @@ var ResizeObserver$3 = function () { return ResizeObserver; }(); -// Controller that will be assigned to all instances of ResizeObserver. -var controller = new ResizeObserverController(); +var ResizeObserverPolyfill = (function () { + if (!isBrowser) { + /* eslint-disable */ + var _ResizeObserver2 = function () { + function _ResizeObserver2() { + classCallCheck(this, _ResizeObserver2); + } -// Registry of the internal observers. -var observers = new WeakMap(); + _ResizeObserver2.prototype.observe = function observe() {}; -/** - * ResizeObservers' "Proxy" class which is meant to hide private properties and - * methods from public instances. - * - * Additionally implements the "continuousUpdates" static property accessor to - * give control over the behavior of the ResizeObserverController instance. - * Changes made to this property affect all future and existing observers. - */ -var ResizeObserver$2 = function () { - /** - * Creates a new instance of ResizeObserver. - * - * @param {Function} callback - Callback that is invoked when dimensions of - * one of the observed elements change. - */ - function ResizeObserver(callback) { - classCallCheck(this, ResizeObserver); + _ResizeObserver2.prototype.unobserve = function unobserve() {}; - if (!arguments.length) { - throw new TypeError('1 argument required, but only 0 present.'); - } + _ResizeObserver2.prototype.disconnect = function disconnect() {}; - // Create a new instance of the internal ResizeObserver. - var observer = new ResizeObserver$3(callback, controller, this); + return _ResizeObserver2; + }(); + /* eslint-enable */ + _ResizeObserver2.continuousUpdates = false; - // Register internal observer. - observers.set(this, observer); + return _ResizeObserver2; } - createClass(ResizeObserver, null, [{ - key: 'continuousUpdates', + // Controller that will be assigned to all instances of ResizeObserver. + var controller = new ResizeObserverController(); - /** - * Tells whether continuous updates are enabled. - * - * @returns {Boolean} - */ - get: function get() { - return controller.continuousUpdates; - }, + // Registry of the internal observers. + var observers = new WeakMap(); + /** + * ResizeObservers' "Proxy" class which is meant to hide private properties and + * methods from public instances. + * + * Additionally implements the "continuousUpdates" static property accessor to + * give control over the behavior of the ResizeObserverController instance. + * Changes made to this property affect all future and existing observers. + */ + var ResizeObserver = function () { /** - * Enables or disables continuous updates. + * Creates a new instance of ResizeObserver. * - * @param {Boolean} value - Whether to enable or disable continuous updates. + * @param {Function} callback - Callback that is invoked when dimensions of + * one of the observed elements change. */ - set: function set(value) { - if (typeof value !== 'boolean') { - throw new TypeError('type of "continuousUpdates" value must be boolean.'); + function ResizeObserver(callback) { + classCallCheck(this, ResizeObserver); + + if (!arguments.length) { + throw new TypeError('1 argument required, but only 0 present.'); } - controller.continuousUpdates = value; + // Create a new instance of the internal ResizeObserver. + var observer = new ResizeObserver$2(callback, controller, this); + + // Register internal observer. + observers.set(this, observer); } - }]); - return ResizeObserver; -}(); -// Expose public methods of ResizeObserver. -['observe', 'unobserve', 'disconnect'].forEach(function (method) { - ResizeObserver$2.prototype[method] = function () { - var _observers$get; + createClass(ResizeObserver, null, [{ + key: 'continuousUpdates', - return (_observers$get = observers.get(this))[method].apply(_observers$get, arguments); - }; -}); + /** + * Tells whether continuous updates are enabled. + * + * @returns {Boolean} + */ + get: function get() { + return controller.continuousUpdates; + }, + + /** + * Enables or disables continuous updates. + * + * @param {Boolean} value - Whether to enable or disable continuous updates. + */ + set: function set(value) { + if (typeof value !== 'boolean') { + throw new TypeError('type of "continuousUpdates" value must be boolean.'); + } + + controller.continuousUpdates = value; + } + }]); + return ResizeObserver; + }(); + + // Expose public methods of ResizeObserver. + ['observe', 'unobserve', 'disconnect'].forEach(function (method) { + ResizeObserver.prototype[method] = function () { + if (isBrowser) { + var _observers$get; + + (_observers$get = observers.get(this))[method].apply(_observers$get, arguments); + } + }; + }); + + return ResizeObserver; +})(); -var ResizeObserver = ResizeObserver$2; +var ResizeObserver = ResizeObserverPolyfill; // Export existing implementation if it's available. -if (typeof window.ResizeObserver === 'function') { - ResizeObserver = window.ResizeObserver; +if (typeof global$1.ResizeObserver === 'function') { + ResizeObserver = global$1.ResizeObserver; } var ResizeObserver$1 = ResizeObserver; diff --git a/index.global.js b/index.global.js index a5e6b96..c0dc35a 100644 --- a/index.global.js +++ b/index.global.js @@ -1,12 +1,13 @@ /** * @deprecated Global version of the polyfill is deprecated and will be removed in the next major release. */ +import global from './src/shims/global'; import ResizeObserver from './src/ResizeObserver'; -if (typeof window.ResizeObserver !== 'function') { +if (typeof global.ResizeObserver !== 'function') { // ResizeObserver host property is not enumerable // in the native implementation. - Object.defineProperty(window, 'ResizeObserver', { + Object.defineProperty(global, 'ResizeObserver', { value: ResizeObserver, writable: true, configurable: true @@ -15,4 +16,4 @@ if (typeof window.ResizeObserver !== 'function') { // Still export the constructor as for me it seems // awkward when a module doesn't export anything. -export default window.ResizeObserver; +export default global.ResizeObserver; diff --git a/index.js b/index.js index 85619fb..7eb5397 100644 --- a/index.js +++ b/index.js @@ -1,10 +1,11 @@ +import global from './src/shims/global'; import ResizeObserverPolyfill from './src/ResizeObserver'; let ResizeObserver = ResizeObserverPolyfill; // Export existing implementation if it's available. -if (typeof window.ResizeObserver === 'function') { - ResizeObserver = window.ResizeObserver; +if (typeof global.ResizeObserver === 'function') { + ResizeObserver = global.ResizeObserver; } export default ResizeObserver; diff --git a/package.json b/package.json index 103bfc1..2ec0a79 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,10 @@ { "name": "resize-observer-polyfill", "author": "Denis Rul ", - "version": "1.3.0", + "version": "1.3.1", "description": "A polyfill for the Resize Observer API", "main": "dist/ResizeObserver.js", "jsnext:main": "dist/ResizeObserver.es.js", - "module": "dist/ResizeObserver.es.js", "scripts": { "test:lint": "eslint **/*.js", "test:spec": "karma start", diff --git a/src/ResizeObserver.js b/src/ResizeObserver.js index a2e9af8..b6e0fa9 100644 --- a/src/ResizeObserver.js +++ b/src/ResizeObserver.js @@ -1,72 +1,93 @@ +import isBrowser from './utils/isBrowser'; import {WeakMap} from './shims/es6-collections'; import ResizeObserverController from './ResizeObserverController'; import _ResizeObserver from './_ResizeObserver'; -// Controller that will be assigned to all instances of ResizeObserver. -const controller = new ResizeObserverController(); +export default (function () { + // Fall back to a class with empty functions if running in a non-browser + // environment. + if (!isBrowser) { + /* eslint-disable */ + class ResizeObserver { + observe() {} + unobserve() {} + disconnect() {} + }; + /* eslint-enable */ -// Registry of the internal observers. -const observers = new WeakMap(); + ResizeObserver.continuousUpdates = false; -/** - * ResizeObservers' "Proxy" class which is meant to hide private properties and - * methods from public instances. - * - * Additionally implements the "continuousUpdates" static property accessor to - * give control over the behavior of the ResizeObserverController instance. - * Changes made to this property affect all future and existing observers. - */ -class ResizeObserver { - /** - * Creates a new instance of ResizeObserver. - * - * @param {Function} callback - Callback that is invoked when dimensions of - * one of the observed elements change. - */ - constructor(callback) { - if (!arguments.length) { - throw new TypeError('1 argument required, but only 0 present.'); - } + return ResizeObserver; + } - // Create a new instance of the internal ResizeObserver. - const observer = new _ResizeObserver(callback, controller, this); + // Controller that will be assigned to all instances of ResizeObserver. + const controller = new ResizeObserverController(); - // Register internal observer. - observers.set(this, observer); - } + // Registry of the internal observers. + const observers = new WeakMap(); /** - * Tells whether continuous updates are enabled. + * ResizeObservers' "Proxy" class which is meant to hide private properties and + * methods from public instances. * - * @returns {Boolean} + * Additionally implements the "continuousUpdates" static property accessor to + * give control over the behavior of the ResizeObserverController instance. + * Changes made to this property affect all future and existing observers. */ - static get continuousUpdates() { - return controller.continuousUpdates; - } + class ResizeObserver { + /** + * Creates a new instance of ResizeObserver. + * + * @param {Function} callback - Callback that is invoked when dimensions of + * one of the observed elements change. + */ + constructor(callback) { + if (!arguments.length) { + throw new TypeError('1 argument required, but only 0 present.'); + } - /** - * Enables or disables continuous updates. - * - * @param {Boolean} value - Whether to enable or disable continuous updates. - */ - static set continuousUpdates(value) { - if (typeof value !== 'boolean') { - throw new TypeError('type of "continuousUpdates" value must be boolean.'); + // Create a new instance of the internal ResizeObserver. + const observer = new _ResizeObserver(callback, controller, this); + + // Register internal observer. + observers.set(this, observer); } - controller.continuousUpdates = value; + /** + * Tells whether continuous updates are enabled. + * + * @returns {Boolean} + */ + static get continuousUpdates() { + return controller.continuousUpdates; + } + + /** + * Enables or disables continuous updates. + * + * @param {Boolean} value - Whether to enable or disable continuous updates. + */ + static set continuousUpdates(value) { + if (typeof value !== 'boolean') { + throw new TypeError('type of "continuousUpdates" value must be boolean.'); + } + + controller.continuousUpdates = value; + } } -} -// Expose public methods of ResizeObserver. -[ - 'observe', - 'unobserve', - 'disconnect' -].forEach(method => { - ResizeObserver.prototype[method] = function () { - return observers.get(this)[method](...arguments); - }; -}); + // Expose public methods of ResizeObserver. + [ + 'observe', + 'unobserve', + 'disconnect' + ].forEach(method => { + ResizeObserver.prototype[method] = function () { + if (isBrowser) { + observers.get(this)[method](...arguments); + } + }; + }); -export default ResizeObserver; + return ResizeObserver; +})(); diff --git a/src/ResizeObserverController.js b/src/ResizeObserverController.js index b95ab1a..9ad2dae 100644 --- a/src/ResizeObserverController.js +++ b/src/ResizeObserverController.js @@ -1,7 +1,8 @@ -import throttle from './throttle'; +import throttle from './utils/throttle'; +import global from './shims/global'; // Define whether the MutationObserver is supported. -const mutationsSupported = typeof window.MutationObserver === 'function'; +const mutationsSupported = typeof global.MutationObserver === 'function'; /** * Controller class which handles updates of ResizeObserver instances. diff --git a/src/shims/es6-collections.js b/src/shims/es6-collections.js index dc00ffa..8735a54 100644 --- a/src/shims/es6-collections.js +++ b/src/shims/es6-collections.js @@ -6,15 +6,16 @@ * ResizeObserver modules as they cover only a limited range * of use cases. */ +import global from './global'; /* eslint-disable require-jsdoc */ const hasNativeCollections = - typeof window.WeakMap === 'function' && - typeof window.Map === 'function'; + typeof global.WeakMap === 'function' && + typeof global.Map === 'function'; const WeakMap = (() => { if (hasNativeCollections) { - return window.WeakMap; + return global.WeakMap; } function getIndex(arr, key) { @@ -71,7 +72,7 @@ const WeakMap = (() => { const Map = (() => { if (hasNativeCollections) { - return window.Map; + return global.Map; } return class extends WeakMap { diff --git a/src/shims/global.js b/src/shims/global.js new file mode 100644 index 0000000..69a1549 --- /dev/null +++ b/src/shims/global.js @@ -0,0 +1,19 @@ +/** + * Exports global object for the current environment. + */ +export default (function () { + if (typeof self != 'undefined' && self.Math === Math) { + return self; + } + + if (typeof window != 'undefined' && window.Math === Math) { + return window; + } + + if (typeof global != 'undefined' && global.Math === Math) { + return global; + } + + // eslint-disable-next-line no-new-func + return Function('return this')(); +})(); diff --git a/src/shims/requestAnimationFrame.js b/src/shims/requestAnimationFrame.js index be28aa5..768388d 100644 --- a/src/shims/requestAnimationFrame.js +++ b/src/shims/requestAnimationFrame.js @@ -1,3 +1,5 @@ +import global from './global'; + /** * A shim for requestAnimationFrame which falls back * to setTimeout if the first one is not supported. @@ -5,8 +7,8 @@ * @returns {Number} Requests' identifier. */ export default (() => { - if (typeof window.requestAnimationFrame === 'function') { - return window.requestAnimationFrame; + if (typeof global.requestAnimationFrame === 'function') { + return global.requestAnimationFrame; } return callback => { diff --git a/src/utils/isBrowser.js b/src/utils/isBrowser.js new file mode 100644 index 0000000..353456a --- /dev/null +++ b/src/utils/isBrowser.js @@ -0,0 +1,6 @@ +import global from '../shims/global'; + +/** + * Detects whether window and document objects are available in current environment. + */ +export default global.window === global && typeof document != 'undefined'; diff --git a/src/throttle.js b/src/utils/throttle.js similarity index 93% rename from src/throttle.js rename to src/utils/throttle.js index e3bcc2b..8014395 100644 --- a/src/throttle.js +++ b/src/utils/throttle.js @@ -1,4 +1,4 @@ -import reqAnimFrame from './shims/requestAnimationFrame'; +import requestAnimFrame from '../shims/requestAnimationFrame'; /** * Creates a wrapper function that ensures that provided callback will @@ -39,7 +39,7 @@ export default function (callback, delay = 0, afterRAF = false) { * if "afterRAF" parameter is set to "true". */ function timeoutCallback() { - afterRAF ? reqAnimFrame(invokeCallback) : invokeCallback(); + afterRAF ? requestAnimFrame(invokeCallback) : invokeCallback(); } /**