(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("fastdom"));
else if(typeof define === 'function' && define.amd)
define(["fastdom"], factory);
else if(typeof exports === 'object')
exports["fastdom"] = factory(require("fastdom"));
else
root["fastdom"] = factory(root["fastdom"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var strictdom = __webpack_require__(1);
var fastdom = __webpack_require__(2);
/**
* Mini logger
*
* @return {Function}
*/
var debug = 0 ? console.log.bind(console, '[fastdom-strict]') : function() {};
/**
* Enabled state
*
* @type {Boolean}
*/
var enabled = false;
window.fastdom = module.exports = fastdom.extend({
measure: function(task, ctx) {
debug('measure');
return this.fastdom.measure(function() {
if (!enabled) return task();
return strictdom.phase('measure', task);
}, ctx);
},
mutate: function(task, ctx) {
debug('mutate');
return this.fastdom.mutate(function() {
if (!enabled) return task();
return strictdom.phase('mutate', task);
}, ctx);
},
strict: function(value) {
if (value) {
enabled = true;
strictdom.enable();
} else {
enabled = false;
strictdom.disable();
}
}
});
// turn on strict-mode
window.fastdom.strict(true);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_RESULT__;!(function() {
'use strict';
var debug = 0 ? console.log.bind(console, '[strictdom]') : function() {};
/**
* Crude webkit test.
*
* @type {Boolean}
*/
// var isWebkit = !!window.webkitURL;
/**
* List of properties observed.
*
* @type {Object}
*/
var properties = {
prototype: {
Document: {
execCommand: Mutate,
elementFromPoint: Measure,
elementsFromPoint: Measure,
scrollingElement: Measure
},
Node: {
appendChild: {
type: Mutate,
test: function(dom, parent, args) {
var attached = isAttached(parent) || isAttached(args[0]);
if (attached && dom.not('mutate')) throw error(3, this.name);
}
},
insertBefore: {
type: Mutate,
test: function(dom, parent, args) {
var attached = isAttached(parent) || isAttached(args[0]);
if (attached && dom.not('mutate')) throw error(3, this.name);
}
},
removeChild: {
type: Mutate,
test: function(dom, parent, args) {
var attached = isAttached(parent) || isAttached(args[0]);
if (attached && dom.not('mutate')) throw error(3, this.name);
}
},
textContent: Mutate
},
Element: {
scrollIntoView: Mutate,
scrollBy: Mutate,
scrollTo: Mutate,
getClientRects: Measure,
getBoundingClientRect: Measure,
clientLeft: Measure,
clientWidth: Measure,
clientHeight: Measure,
scrollLeft: Accessor,
scrollTop: Accessor,
scrollWidth: Measure,
scrollHeight: Measure,
innerHTML: Mutate,
outerHTML: Mutate,
insertAdjacentHTML: Mutate,
remove: Mutate,
setAttribute: Mutate,
removeAttribute: Mutate,
className: Mutate,
classList: ClassList
},
HTMLElement: {
offsetLeft: Measure,
offsetTop: Measure,
offsetWidth: Measure,
offsetHeight: Measure,
offsetParent: Measure,
innerText: Accessor,
outerText: Accessor,
focus: Measure,
blur: Measure,
style: Style,
// `element.dataset` is hard to wrap.
// We could use `Proxy` but it's not
// supported in Chrome yet. Not too
// concerned as `data-` attributes are
// not often associated with render.
// dataset: DATASET
},
CharacterData: {
remove: Mutate,
data: Mutate
},
Range: {
getClientRects: Measure,
getBoundingClientRect: Measure
},
MouseEvent: {
layerX: Measure,
layerY: Measure,
offsetX: Measure,
offsetY: Measure
},
HTMLButtonElement: {
reportValidity: Measure
},
HTMLDialogElement: {
showModal: Mutate
},
HTMLFieldSetElement: {
reportValidity: Measure
},
HTMLImageElement: {
width: Accessor,
height: Accessor,
x: Measure,
y: Measure
},
HTMLInputElement: {
reportValidity: Measure
},
HTMLKeygenElement: {
reportValidity: Measure
},
SVGSVGElement: {
currentScale: Accessor
}
},
instance: {
window: {
getComputedStyle: {
type: Measure,
/**
* Throws when the Element is in attached
* and strictdom is not in the 'measure' phase.
*
* @param {StrictDom} strictdom
* @param {Window} win
* @param {Object} args
*/
test: function(strictdom, win, args) {
if (isAttached(args[0]) && strictdom.not('measure')) {
throw error(2, 'getComputedStyle');
}
}
},
// innerWidth: {
// type: isWebkit ? Value : Measure,
//
// /**
// * Throws when the window is nested (in <iframe>)
// * and StrictDom is not in the 'measure' phase.
// *
// * @param {StrictDom} strictdom
// */
// test: function(strictdom) {
// var inIframe = window !== window.top;
// if (inIframe && strictdom.not('measure')) {
// throw error(2, '`.innerWidth` (in iframe)');
// }
// }
// },
//
// innerHeight: {
// type: isWebkit ? Value : Measure,
//
// /**
// * Throws when the window is nested (in <iframe>)
// * and StrictDom is not in the 'measure' phase.
// *
// * @param {StrictDom} strictdom
// */
// test: function(strictdom) {
// var inIframe = window !== window.top;
// if (inIframe && strictdom.not('measure')) {
// throw error(2, '`.innerHeight` (in iframe)');
// }
// }
// },
//
// scrollX: isWebkit ? Value : Measure,
// scrollY: isWebkit ? Value : Measure,
scrollBy: Mutate,
scrollTo: Mutate,
scroll: Mutate,
}
}
};
/**
* The master controller for all properties.
*
* @param {Window} win
*/
function StrictDom(win) {
this.properties = [];
this._phase = null;
this.win = win;
this.createPrototypeProperties();
this.createInstanceProperties();
}
StrictDom.prototype = {
/**
* Set the current phase.
* @param {[type]} value [description]
* @return {[type]} [description]
*/
phase: function(type, task) {
if (!arguments.length) return this._phase;
if (!this.knownPhase(type)) throw error(4, type);
var previous = this._phase;
this._phase = type;
if (typeof task != 'function') return;
var result = task();
this._phase = previous;
return result;
},
knownPhase: function(value) {
return !!~['measure', 'mutate', null].indexOf(value);
},
is: function(value) {
return this._phase === value;
},
not: function(value) {
return !this.is(value);
},
/**
* Enable strict mode.
*
* @public
*/
enable: function() {
if (this.enabled) return;
debug('enable');
var i = this.properties.length;
while (i--) this.properties[i].enable();
this.enabled = true;
},
/**
* Disable strict mode.
*
* @public
*/
disable: function() {
if (!this.enabled) return;
debug('disable');
var i = this.properties.length;
while (i--) this.properties[i].disable();
this.enabled = false;
this.phase(null);
},
/**
* Create wrappers for each of
* of the prototype properties.
*
* @private
*/
createPrototypeProperties: function() {
debug('create prototype properties');
var props = properties.prototype;
for (var key in props) {
for (var name in props[key]) {
var object = this.win[key] && this.win[key].prototype;
if (!object || !object.hasOwnProperty(name)) continue;
this.properties.push(this.create(object, name, props[key][name]));
}
}
},
/**
* Create wrappers for each of
* of the instance properties.
*
* @private
*/
createInstanceProperties: function() {
debug('create instance properties');
var props = properties.instance;
for (var key in props) {
for (var name in props[key]) {
var object = this.win[key];
if (!object || !object.hasOwnProperty(name)) continue;
this.properties.push(this.create(object, name, props[key][name]));
}
}
},
/**
* Create a wrapped `Property` that
* can be individually enabled/disabled.
*
* @param {Object} object - the parent object (eg. Node.prototype)
* @param {String} name - the property name (eg. 'appendChild')
* @param {(constructor|Object)} config - from the above property definition
* @return {Property}
*/
create: function(object, name, config) {
debug('create', name);
var Constructor = config.type || config;
return new Constructor(object, name, config, this);
}
};
/**
* Create a new `Property`.
*
* A wrapper around a property that observes
* usage, throwing errors when used in the
* incorrect phase.
*
* @param {Object} object - the parent object (eg. Node.prototype)
* @param {[type]} name - the property name (eg. 'appendChild')
* @param {(constructor|Object)} config - from the above definition
* @param {StrictDom} strictdom - injected as a dependency
*/
function Property(object, name, config, strictdom) {
debug('Property', name, config);
this.strictdom = strictdom;
this.object = object;
this.name = name;
var descriptor = this.getDescriptor();
// defaults can be overriden from config
if (typeof config == 'object') Object.assign(this, config);
this.descriptors = {
unwrapped: descriptor,
wrapped: this.wrap(descriptor)
};
}
Property.prototype = {
/**
* Get the property's descriptor.
*
* @return {Object}
* @private
*/
getDescriptor: function() {
debug('get descriptor', this.name);
return Object.getOwnPropertyDescriptor(this.object, this.name);
},
/**
* Enable observation by replacing the
* current descriptor with the wrapped one.
*
* @private
*/
enable: function() {
debug('enable', this.name);
Object.defineProperty(this.object, this.name, this.descriptors.wrapped);
},
/**
* Disable observation by replacing the
* current descriptor with the original one.
*
* @private
*/
disable: function() {
debug('disable', this.name);
Object.defineProperty(this.object, this.name, this.descriptors.unwrapped);
},
// to be overwritten by subclass
wrap: function() {}
};
/**
* A wrapper for properties that measure
* geometry data from the DOM.
*
* Once a `Measure` property is enabled
* it can only be used when StrictDom
* is in the 'measure' phase, else it
* will throw.
*
* @constructor
* @extends Property
*/
function Measure() {
Property.apply(this, arguments);
}
Measure.prototype = extend(Property, {
/**
* Return a wrapped descriptor.
*
* @param {Object} descriptor
* @return {Object}
*/
wrap: function(descriptor) {
debug('wrap measure', this.name);
var clone = Object.assign({}, descriptor);
var value = descriptor.value;
var get = descriptor.get;
var self = this;
if (typeof value == 'function') {
clone.value = function() {
debug('measure', self.name);
self.test(self.strictdom, this, arguments);
return value.apply(this, arguments);
};
} else if (get) {
clone.get = function() {
debug('measure', self.name);
self.test(self.strictdom, this, arguments);
return get.apply(this, arguments);
};
}
return clone;
},
/**
* Throws an Error if the element is attached
* and StrictDOM is not in the 'measure' phase.
*
* If methods/properties are used without
* a context (eg. `getComputedStyle()` instead
* of `window.getComputedStyle()`) we infer
* a `window` context.
*
* @param {StrictDom} strictdom
* @param {Node} ctx
*/
test: function(strictdom, ctx) {
if (isAttached(ctx || window) && strictdom.not('measure')) {
throw error(2, this.name);
}
}
});
/**
* A wrapper for properties that mutate
* to the DOM, triggering style/reflow
* operations.
*
* Once a `Mutate` property is enabled
* it can only be used when StrictDom
* is in the 'measure' phase, else it
* will throw.
*
* @constructor
* @extends Property
*/
function Mutate() {
Property.apply(this, arguments);
}
Mutate.prototype = extend(Property, {
/**
* Return a wrapped descriptor.
*
* @param {Object} descriptor
* @return {Object}
*/
wrap: function(descriptor) {
debug('wrap mutate', this.name);
var clone = Object.assign({}, descriptor);
var value = descriptor.value;
var self = this;
if (typeof value == 'function') {
clone.value = function() {
self.test(self.strictdom, this, arguments);
return value.apply(this, arguments);
};
} else if (descriptor.set) {
clone.set = function() {
self.test(self.strictdom, this, arguments);
return descriptor.set.apply(this, arguments);
};
}
return clone;
},
/**
* Throws an Error if the element is attached
* and StrictDOM is not in the 'mutate' phase.
*
* If methods/properties are used without
* a context (eg. `getComputedStyle()` instead
* of `window.getComputedStyle()`) we infer
* a `window` context.
*
* @param {StrictDom} strictdom
* @param {Node} ctx
*/
test: function(strictdom, ctx) {
if (isAttached(ctx || window) && strictdom.not('mutate')) {
throw error(3, this.name);
}
}
});
/**
* A wrapper for 'accessor' (get/set) properties.
*
* An `Accessor` should be used to wrap
* properties that can both measure and mutate
* the DOM (eg. `element.scrollTop`).
*
* @constructor
* @extends Property
*/
function Accessor() {
Property.apply(this, arguments);
}
Accessor.prototype = extend(Property, {
/**
* Return a wrapped descriptor.
*
* @param {Object} descriptor
* @return {Object}
*/
wrap: function(descriptor) {
debug('wrap accessor', this.name);
var clone = Object.assign({}, descriptor);
var get = descriptor.get;
var set = descriptor.set;
var self = this;
if (get) {
clone.get = function() {
self.testRead(self.strictdom, this, arguments);
return get.apply(this, arguments);
};
}
if (descriptor.set) {
clone.set = function() {
self.testWrite(self.strictdom, this, arguments);
return set.apply(this, arguments);
};
}
return clone;
},
testRead: Measure.prototype.test,
testWrite: Mutate.prototype.test
});
/**
* A wrapper for 'value' properties.
*
* A `Value` should be used to wrap special
* values that like `window.innerWidth`, which
* in Chrome (not Gecko) are not normal 'getter'
* functions, but magical flat getters.
*
* Value wrappers are a for very special cases.
*
* @constructor
* @extends Property
*/
function Value() {
Property.apply(this, arguments);
}
Value.prototype = extend(Property, {
/**
* Calling `Object.getOwnDescriptor()` can
* trigger a reflow as it returns the `value`
* of the property. So here we just
* return an empty object instead.
*
* @return {Object}
* @private
*/
getDescriptor: function() {
return {};
},
/**
* Value wrappers are disabled by simply
* deleting them from the instance,
* revealing the original descriptor.
*
* @private
*/
disable: function() {
delete this.object[this.name];
},
/**
* Return a wrapped descriptor.
*
* `Value` properties are actually on the
* instance of objects. To wrap them we need
* to replace them with a getter which
* deletes itself on access, call into the v8
* interceptor, and then add themselves back.
*
* This won't be fast, but these are rarely
* accessed so it should be fine.
*
* @param {Object} descriptor
* @return {Object}
*/
wrap: function(descriptor) {
debug('wrap value');
var name = this.name;
var self = this;
descriptor.get = function() {
debug('get value', name);
self.test(self.strictdom, this, arguments);
self.disable();
var result = this[name];
self.enable();
return result;
};
return descriptor;
},
test: Measure.prototype.test
});
function Style() {
Property.apply(this, arguments);
}
Style.prototype = extend(Property, {
wrap: function(descriptor) {
debug('wrap style');
var strictdom = this.strictdom;
var clone = Object.assign({}, descriptor);
clone.get = function() { return new StrictStyle(this, strictdom); };
return clone;
}
});
function ClassList() {
Property.apply(this, arguments);
}
ClassList.prototype = extend(Property, {
wrap: function(descriptor) {
debug('wrap style');
var strictdom = this.strictdom;
var clone = Object.assign({}, descriptor);
clone.get = function() { return new StrictClassList(this, strictdom); };
return clone;
}
});
function StrictStyle(el, strictdom) {
this.strictdom = strictdom;
this.el = el;
}
StrictStyle.prototype = {
_getter: getDescriptor(HTMLElement.prototype, 'style').get,
_get: function() {
return this._getter.call(this.el);
},
setProperty: function(key, value) {
var illegal = isAttached(this.el) && this.strictdom.not('mutate');
if (illegal) throw error(1, 'style.' + key);
return this._get()[key] = value;
},
removeProperty: function(key) {
var illegal = isAttached(this.el) && this.strictdom.not('mutate');
if (illegal) throw error(1, 'style.' + key);
return this._get().removeProperty(key);
}
};
// dynamically construct prototype
// from real element.style
(function() {
var styles = document.createElement('div').style;
var proto = {};
for (var key in styles) {
if (styles[key] === '') {
Object.defineProperty(StrictStyle.prototype, key, {
get: getter(key),
set: setter(key)
});
}
}
[
'item',
'getPropertyValue',
'getPropertyCSSValue',
'getPropertyPriority'
].forEach(function(method) {
StrictStyle.prototype[method] = caller(method);
});
function getter(key) {
return function() {
return this._get()[key];
};
}
function setter(key) {
return function(value) {
var illegal = isAttached(this.el) && this.strictdom.not('mutate');
if (illegal) throw error(1, 'style.' + key);
return this.setProperty(key, value);
};
}
function caller(key) {
return function() {
var style = this._get();
return style[key].apply(style, arguments);
};
}
return proto;
})();
function StrictClassList(el, strictdom) {
this.strictdom = strictdom;
this.el = el;
}
StrictClassList.prototype = {
_getter: getDescriptor(Element.prototype, 'classList').get,
_get: function() { return this._getter.call(this.el); },
add: function(className) {
var illegal = isAttached(this.el) && this.strictdom.not('mutate');
if (illegal) throw error(1, 'class names');
this._get().add(className);
},
contains: function(className) {
return this._get().contains(className);
},
remove: function(className) {
var illegal = isAttached(this.el) && this.strictdom.not('mutate');
if (illegal) throw error(1, 'class names');
this._get().remove(className);
},
toggle: function() {
var illegal = isAttached(this.el) && this.strictdom.not('mutate');
if (illegal) throw error(1, 'class names');
var classList = this._get();
return classList.toggle.apply(classList, arguments);
}
};
/**
* Utils
*/
function error(type) {
return new Error({
1: 'Can only set ' + arguments[1] + ' during \'mutate\' phase',
2: 'Can only get ' + arguments[1] + ' during \'measure\' phase',
3: 'Can only call `.' + arguments[1] + '()` during \'mutate\' phase',
4: 'Invalid phase: ' + arguments[1]
}[type]);
}
function getDescriptor(object, prop) {
return Object.getOwnPropertyDescriptor(object, prop);
}
function extend(parent, props) {
return Object.assign(Object.create(parent.prototype), props);
}
function isAttached(el) {
return el === window || document.contains(el);
}
/**
* Exports
*/
// Only ever allow one `StrictDom` per document
var exports = window['strictdom'] = (window['strictdom'] || new StrictDom(window)); // jshint ignore:line
// CJS & AMD support
if (("function")[0] == 'f') !(__WEBPACK_AMD_DEFINE_RESULT__ = function() { return exports; }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
else if ((typeof module)[0] == 'o') module.exports = exports;
})();
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ }
/******/ ])
});
;