Comparing version 5.0.0-alpha.13 to 5.0.0-alpha.14
@@ -0,4 +1,8 @@ | ||
'use strict'; | ||
export function define(Ctor) { | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.define = define; | ||
function define(Ctor) { | ||
var registry = customElements; | ||
@@ -5,0 +9,0 @@ var is = Ctor.is; |
@@ -0,3 +1,12 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
exports.emit = emit; | ||
var defs = { | ||
@@ -9,3 +18,3 @@ bubbles: true, | ||
export function emit(elem, name, opts) { | ||
function emit(elem, name, opts) { | ||
opts = _extends({}, defs, opts); | ||
@@ -12,0 +21,0 @@ var e = void 0; |
@@ -1,7 +0,89 @@ | ||
export * from './define'; | ||
export * from './emit'; | ||
export * from './link'; | ||
export * from './with-component'; | ||
export * from './with-props'; | ||
export * from './with-render'; | ||
export * from './with-unique'; | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _define = require('./define'); | ||
Object.keys(_define).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _define[key]; | ||
} | ||
}); | ||
}); | ||
var _emit = require('./emit'); | ||
Object.keys(_emit).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _emit[key]; | ||
} | ||
}); | ||
}); | ||
var _link = require('./link'); | ||
Object.keys(_link).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _link[key]; | ||
} | ||
}); | ||
}); | ||
var _withComponent = require('./with-component'); | ||
Object.keys(_withComponent).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _withComponent[key]; | ||
} | ||
}); | ||
}); | ||
var _withProps = require('./with-props'); | ||
Object.keys(_withProps).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _withProps[key]; | ||
} | ||
}); | ||
}); | ||
var _withRender = require('./with-render'); | ||
Object.keys(_withRender).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _withRender[key]; | ||
} | ||
}); | ||
}); | ||
var _withUnique = require('./with-unique'); | ||
Object.keys(_withUnique).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _withUnique[key]; | ||
} | ||
}); | ||
}); |
@@ -0,3 +1,9 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.link = link; | ||
function getValue(elem) { | ||
@@ -14,3 +20,3 @@ var checked = elem.checked, | ||
export function link(elem, target) { | ||
function link(elem, target) { | ||
return function (e) { | ||
@@ -17,0 +23,0 @@ // TODO revisit once all browsers have native support. |
@@ -0,6 +1,20 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
exports.dashCase = dashCase; | ||
exports.debounce = debounce; | ||
exports.keys = keys; | ||
exports.sym = sym; | ||
exports.uniqueId = uniqueId; | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var Mo = typeof MutationObserver === 'function' ? MutationObserver : function () { | ||
function _class(func) { | ||
_classCallCheck(this, _class); | ||
function _class2(func) { | ||
_classCallCheck(this, _class2); | ||
@@ -10,23 +24,26 @@ this.func = func; | ||
_class.prototype.observe = function observe(node) { | ||
var func = this.func; | ||
_createClass(_class2, [{ | ||
key: 'observe', | ||
value: function observe(node) { | ||
var func = this.func; | ||
var prop = { | ||
set: function set() { | ||
if (typeof Promise === 'undefined') { | ||
setTimeout(func); | ||
} else { | ||
new Promise(function (resolve) { | ||
return resolve(); | ||
}).then(func); | ||
var prop = { | ||
set: function set() { | ||
if (typeof Promise === 'undefined') { | ||
setTimeout(func); | ||
} else { | ||
new Promise(function (resolve) { | ||
return resolve(); | ||
}).then(func); | ||
} | ||
} | ||
} | ||
}; | ||
Object.defineProperty(node, 'textContent', prop); | ||
}; | ||
}; | ||
Object.defineProperty(node, 'textContent', prop); | ||
} | ||
}]); | ||
return _class; | ||
return _class2; | ||
}(); | ||
export function dashCase(str) { | ||
function dashCase(str) { | ||
return str.split(/([_A-Z])/).reduce(function (one, two, idx) { | ||
@@ -39,3 +56,3 @@ var dash = !one || idx % 2 === 0 ? '' : '-'; | ||
export function debounce(cbFunc) { | ||
function debounce(cbFunc) { | ||
var scheduled = false; | ||
@@ -60,7 +77,7 @@ var i = 0; | ||
export var empty = function empty(val) { | ||
var empty = exports.empty = function empty(val) { | ||
return val == null; | ||
}; | ||
export function keys(obj) { | ||
function keys(obj) { | ||
obj = obj || {}; | ||
@@ -71,7 +88,7 @@ var names = Object.getOwnPropertyNames(obj); | ||
export function sym(description) { | ||
function sym(description) { | ||
return typeof Symbol === 'function' ? Symbol(description ? String(description) : undefined) : uniqueId(description); | ||
} | ||
export function uniqueId(description) { | ||
function uniqueId(description) { | ||
return (description ? String(description) : '') + 'xxxxxxxx'.replace(/[xy]/g, function (c) { | ||
@@ -78,0 +95,0 @@ var r = Math.random() * 16 | 0; |
@@ -0,1 +1,7 @@ | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
@@ -5,8 +11,13 @@ | ||
import { dashCase } from '.'; | ||
exports.normaliseAttributeDefinition = normaliseAttributeDefinition; | ||
exports.normalisePropertyDefinition = normalisePropertyDefinition; | ||
exports.syncAttributeToProperty = syncAttributeToProperty; | ||
exports.syncPropertyToAttribute = syncPropertyToAttribute; | ||
export function normaliseAttributeDefinition(name, prop) { | ||
var _index = require("./index"); | ||
function normaliseAttributeDefinition(name, prop) { | ||
var attribute = prop.attribute; | ||
var obj = (typeof attribute === 'undefined' ? 'undefined' : _typeof(attribute)) === 'object' ? _extends({}, attribute) : { | ||
var obj = (typeof attribute === "undefined" ? "undefined" : _typeof(attribute)) === "object" ? _extends({}, attribute) : { | ||
source: attribute, | ||
@@ -16,6 +27,6 @@ target: attribute | ||
if (obj.source === true) { | ||
obj.source = dashCase(name); | ||
obj.source = (0, _index.dashCase)(name); | ||
} | ||
if (obj.target === true) { | ||
obj.target = dashCase(name); | ||
obj.target = (0, _index.dashCase)(name); | ||
} | ||
@@ -25,3 +36,3 @@ return obj; | ||
export function normalisePropertyDefinition(name, prop) { | ||
function normalisePropertyDefinition(name, prop) { | ||
var coerce = prop.coerce, | ||
@@ -47,3 +58,3 @@ def = prop.default, | ||
export function syncAttributeToProperty(elem, name, value) { | ||
function syncAttributeToProperty(elem, name, value) { | ||
if (elem._syncingPropertyToAttribute) { | ||
@@ -66,3 +77,3 @@ return; | ||
export function syncPropertyToAttribute(elem, target, serialize, val) { | ||
function syncPropertyToAttribute(elem, target, serialize, val) { | ||
if (target && elem._syncingAttributeToProperty !== target) { | ||
@@ -69,0 +80,0 @@ var serialized = serialize(val); |
@@ -0,15 +1,21 @@ | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.formatName = formatName; | ||
exports.generateName = generateName; | ||
import { dashCase } from '.'; | ||
var _index = require("./index"); | ||
var suffix = 0; | ||
export function formatName(prefix, suffix) { | ||
prefix = prefix || 'element'; | ||
return (prefix.indexOf('-') === -1 ? 'x-' + prefix : prefix) + (suffix ? '-' + suffix : ''); | ||
function formatName(prefix, suffix) { | ||
prefix = prefix || "element"; | ||
return (prefix.indexOf("-") === -1 ? "x-" + prefix : prefix) + (suffix ? "-" + suffix : ""); | ||
} | ||
export function generateName(Ctor) { | ||
function generateName(Ctor) { | ||
var registry = customElements; | ||
var prefix = dashCase(Ctor.name); | ||
var prefix = (0, _index.dashCase)(Ctor.name); | ||
while (registry.get(formatName(prefix, suffix))) { | ||
@@ -16,0 +22,0 @@ suffix++; |
@@ -0,1 +1,18 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.h = exports.Component = exports.withComponent = undefined; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _preact = require('preact'); | ||
var _withProps = require('./with-props'); | ||
var _withRender2 = require('./with-render'); | ||
var _withUnique = require('./with-unique'); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -7,33 +24,31 @@ | ||
import { h, render } from 'preact'; | ||
import { withProps } from './with-props'; | ||
import { withRender } from './with-render'; | ||
import { withUnique } from './with-unique'; | ||
export var withComponent = function withComponent() { | ||
var withComponent = exports.withComponent = function withComponent() { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return function (_withRender) { | ||
_inherits(_class, _withRender); | ||
_inherits(_class2, _withRender); | ||
function _class() { | ||
_classCallCheck(this, _class); | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
return _possibleConstructorReturn(this, _withRender.apply(this, arguments)); | ||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments)); | ||
} | ||
_class.prototype.rendererCallback = function rendererCallback(shadowRoot, renderCallback) { | ||
this._preactDom = render(renderCallback(), shadowRoot, this._preactDom || shadowRoot.children[0]); | ||
}; | ||
_createClass(_class2, [{ | ||
key: 'rendererCallback', | ||
value: function rendererCallback(shadowRoot, renderCallback) { | ||
this._preactDom = (0, _preact.render)(renderCallback(), shadowRoot, this._preactDom || shadowRoot.children[0]); | ||
} | ||
}]); | ||
return _class; | ||
}(withRender(withUnique(withProps(Base)))); | ||
return _class2; | ||
}((0, _withRender2.withRender)((0, _withUnique.withUnique)((0, _withProps.withProps)(Base)))); | ||
}; | ||
export var Component = withComponent(typeof window === 'undefined' ? function () { | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
var Component = exports.Component = withComponent(typeof window === 'undefined' ? function () { | ||
function _class3() { | ||
_classCallCheck(this, _class3); | ||
} | ||
return _class2; | ||
return _class3; | ||
}() : HTMLElement); | ||
export { h }; | ||
exports.h = _preact.h; |
@@ -0,3 +1,18 @@ | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.props = exports.withProps = undefined; | ||
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
exports.prop = prop; | ||
var _index = require("./util/index"); | ||
var _withProps = require("./util/with-props"); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -9,7 +24,3 @@ | ||
import { debounce, empty, keys, sym } from './util'; | ||
import { normalisePropertyDefinition, syncAttributeToProperty, syncPropertyToAttribute } from './util/with-props'; | ||
export function prop(definition) { | ||
function prop(definition) { | ||
var propertyDefinition = definition || {}; | ||
@@ -21,4 +32,4 @@ | ||
var normalised = normalisePropertyDefinition(name, propertyDefinition); | ||
var _value = sym(name); | ||
var normalised = (0, _withProps.normalisePropertyDefinition)(name, propertyDefinition); | ||
var _value = (0, _index.sym)(name); | ||
@@ -40,3 +51,3 @@ // Cache the value so we can reference when syncing the attribute to the property. | ||
this[_value] = normalised.coerce(val); | ||
syncPropertyToAttribute(this, normalised.attribute.target, normalised.serialize, val); | ||
(0, _withProps.syncPropertyToAttribute)(this, normalised.attribute.target, normalised.serialize, val); | ||
this._updateDebounced(); | ||
@@ -55,3 +66,3 @@ } | ||
export var withProps = function withProps() { | ||
var withProps = exports.withProps = function withProps() { | ||
var _class, _temp; | ||
@@ -64,7 +75,7 @@ | ||
_createClass(_class, [{ | ||
key: 'props', | ||
key: "props", | ||
get: function get() { | ||
var _this2 = this; | ||
return keys(this.constructor.props).reduce(function (prev, curr) { | ||
return (0, _index.keys)(this.constructor.props).reduce(function (prev, curr) { | ||
prev[curr] = _this2[curr]; | ||
@@ -78,3 +89,3 @@ return prev; | ||
var ctorProps = this.constructor.props; | ||
keys(props).forEach(function (k) { | ||
(0, _index.keys)(props).forEach(function (k) { | ||
return k in ctorProps && (_this3[k] = props[k]); | ||
@@ -84,3 +95,3 @@ }); | ||
}], [{ | ||
key: 'observedAttributes', | ||
key: "observedAttributes", | ||
get: function get() { | ||
@@ -93,3 +104,3 @@ return this._observedAttributes; | ||
}, { | ||
key: 'props', | ||
key: "props", | ||
get: function get() { | ||
@@ -101,5 +112,5 @@ return this._props; | ||
keys(props).forEach(function (name) { | ||
(0, _index.keys)(props).forEach(function (name) { | ||
var func = props[name]; | ||
if (typeof func !== 'function') func = prop(func); | ||
if (typeof func !== "function") func = prop(func); | ||
func({ constructor: _this4 }, name); | ||
@@ -113,3 +124,3 @@ }); | ||
var _this = _possibleConstructorReturn(this, _Base.call(this)); | ||
var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this)); | ||
@@ -140,49 +151,57 @@ _this._updateCallback = function () { | ||
_this._constructed = true; | ||
_this._updateDebounced = debounce(_this._updateCallback); | ||
_this._updateDebounced = (0, _index.debounce)(_this._updateCallback); | ||
return _this; | ||
} | ||
_class.prototype.connectedCallback = function connectedCallback() { | ||
if (this._connected) return; | ||
this._connected = true; | ||
// $FlowFixMe - HTMLElement doesn't implement connectedCallback. | ||
if (_Base.prototype.connectedCallback) _Base.prototype.connectedCallback.call(this); | ||
this._updateDebounced(); | ||
}; | ||
_createClass(_class, [{ | ||
key: "connectedCallback", | ||
value: function connectedCallback() { | ||
if (this._connected) return; | ||
this._connected = true; | ||
// $FlowFixMe - HTMLElement doesn't implement connectedCallback. | ||
if (_get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "connectedCallback", this)) _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "connectedCallback", this).call(this); | ||
this._updateDebounced(); | ||
} | ||
}, { | ||
key: "disconnectedCallback", | ||
value: function disconnectedCallback() { | ||
if (!this._connected) return; | ||
this._connected = false; | ||
// $FlowFixMe - HTMLElement doesn't implement disconnectedCallback. | ||
if (_get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "disconnectedCallback", this)) _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "disconnectedCallback", this).call(this); | ||
} | ||
_class.prototype.disconnectedCallback = function disconnectedCallback() { | ||
if (!this._connected) return; | ||
this._connected = false; | ||
// $FlowFixMe - HTMLElement doesn't implement disconnectedCallback. | ||
if (_Base.prototype.disconnectedCallback) _Base.prototype.disconnectedCallback.call(this); | ||
}; | ||
// Called when props actually change. | ||
// Called when props actually change. | ||
}, { | ||
key: "propsChangedCallback", | ||
value: function propsChangedCallback() {} | ||
// Called whenever props are set, even if they don't change. | ||
_class.prototype.propsChangedCallback = function propsChangedCallback() {}; | ||
}, { | ||
key: "propsSetCallback", | ||
value: function propsSetCallback() {} | ||
// Called whenever props are set, even if they don't change. | ||
// Called to see if the props changed. | ||
}, { | ||
key: "propsUpdatedCallback", | ||
value: function propsUpdatedCallback(next, prev) { | ||
return !prev || (0, _index.keys)(prev).some(function (k) { | ||
return prev[k] !== next[k]; | ||
}); | ||
} | ||
}, { | ||
key: "attributeChangedCallback", | ||
value: function attributeChangedCallback(name, oldValue, newValue) { | ||
// $FlowFixMe - HTMLElement doesn't implement attributeChangedCallback. | ||
if (_get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "attributeChangedCallback", this)) _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "attributeChangedCallback", this).call(this, name, oldValue, newValue); | ||
(0, _withProps.syncAttributeToProperty)(this, name, newValue); | ||
} | ||
_class.prototype.propsSetCallback = function propsSetCallback() {}; | ||
// Invokes the complete render lifecycle. | ||
// Called to see if the props changed. | ||
}]); | ||
_class.prototype.propsUpdatedCallback = function propsUpdatedCallback(next, prev) { | ||
return !prev || keys(prev).some(function (k) { | ||
return prev[k] !== next[k]; | ||
}); | ||
}; | ||
_class.prototype.attributeChangedCallback = function attributeChangedCallback(name, oldValue, newValue) { | ||
// $FlowFixMe - HTMLElement doesn't implement attributeChangedCallback. | ||
if (_Base.prototype.attributeChangedCallback) _Base.prototype.attributeChangedCallback.call(this, name, oldValue, newValue); | ||
syncAttributeToProperty(this, name, newValue); | ||
}; | ||
// Invokes the complete render lifecycle. | ||
return _class; | ||
@@ -197,3 +216,3 @@ }(Base), _class._observedAttributes = [], _class._props = {}, _temp; | ||
var zeroOrNumber = function zeroOrNumber(val) { | ||
return empty(val) ? 0 : Number(val); | ||
return (0, _index.empty)(val) ? 0 : Number(val); | ||
}; | ||
@@ -208,3 +227,3 @@ | ||
coerce: function coerce(val) { | ||
return Array.isArray(val) ? val : empty(val) ? null : [val]; | ||
return Array.isArray(val) ? val : (0, _index.empty)(val) ? null : [val]; | ||
}, | ||
@@ -221,6 +240,6 @@ default: Object.freeze([]), | ||
deserialize: function deserialize(val) { | ||
return !empty(val); | ||
return !(0, _index.empty)(val); | ||
}, | ||
serialize: function serialize(val) { | ||
return val ? '' : null; | ||
return val ? "" : null; | ||
} | ||
@@ -235,3 +254,3 @@ }); | ||
serialize: function serialize(val) { | ||
return empty(val) ? null : String(Number(val)); | ||
return (0, _index.empty)(val) ? null : String(Number(val)); | ||
} | ||
@@ -249,10 +268,10 @@ }); | ||
attribute: attribute, | ||
default: '', | ||
default: "", | ||
coerce: String, | ||
serialize: function serialize(val) { | ||
return empty(val) ? null : String(val); | ||
return (0, _index.empty)(val) ? null : String(val); | ||
} | ||
}); | ||
export var props = { | ||
var props = exports.props = { | ||
any: any, | ||
@@ -259,0 +278,0 @@ array: array, |
@@ -0,1 +1,7 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
@@ -15,29 +21,33 @@ | ||
export var withRender = function withRender() { | ||
var withRender = exports.withRender = function withRender() { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return function (_Base) { | ||
_inherits(_class, _Base); | ||
_inherits(_class2, _Base); | ||
function _class() { | ||
_classCallCheck(this, _class); | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
return _possibleConstructorReturn(this, _Base.apply(this, arguments)); | ||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments)); | ||
} | ||
_class.prototype.propsChangedCallback = function propsChangedCallback() { | ||
var _this2 = this; | ||
_createClass(_class2, [{ | ||
key: 'propsChangedCallback', | ||
value: function propsChangedCallback() { | ||
var _this2 = this; | ||
this.rendererCallback(this.renderRoot, function () { | ||
return _this2.renderCallback(_this2); | ||
}); | ||
this.renderedCallback(); | ||
}; | ||
_class.prototype.renderCallback = function renderCallback() {}; | ||
_class.prototype.renderedCallback = function renderedCallback() {}; | ||
_class.prototype.rendererCallback = function rendererCallback() {}; | ||
_createClass(_class, [{ | ||
this.rendererCallback(this.renderRoot, function () { | ||
return _this2.renderCallback(_this2); | ||
}); | ||
this.renderedCallback(); | ||
} | ||
}, { | ||
key: 'renderCallback', | ||
value: function renderCallback() {} | ||
}, { | ||
key: 'renderedCallback', | ||
value: function renderedCallback() {} | ||
}, { | ||
key: 'rendererCallback', | ||
value: function rendererCallback() {} | ||
}, { | ||
key: 'renderRoot', | ||
@@ -50,4 +60,4 @@ get: function get() { | ||
return _class; | ||
return _class2; | ||
}(Base); | ||
}; |
@@ -0,3 +1,12 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.withUnique = undefined; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _withUnique = require('./util/with-unique'); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -9,19 +18,17 @@ | ||
import { generateName } from './util/with-unique'; | ||
export var withUnique = function withUnique() { | ||
var withUnique = exports.withUnique = function withUnique() { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return function (_Base) { | ||
_inherits(_class, _Base); | ||
_inherits(_class2, _Base); | ||
function _class() { | ||
_classCallCheck(this, _class); | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
return _possibleConstructorReturn(this, _Base.apply(this, arguments)); | ||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments)); | ||
} | ||
_createClass(_class, null, [{ | ||
_createClass(_class2, null, [{ | ||
key: 'is', | ||
get: function get() { | ||
return this._is || (this._is = generateName(this)); | ||
return this._is || (this._is = (0, _withUnique.generateName)(this)); | ||
}, | ||
@@ -33,4 +40,4 @@ set: function set(is) { | ||
return _class; | ||
return _class2; | ||
}(Base); | ||
}; |
@@ -8,4 +8,4 @@ 'use strict'; | ||
function define(Ctor) { | ||
const registry = customElements; | ||
const is = Ctor.is; | ||
var registry = customElements; | ||
var is = Ctor.is; | ||
if (!registry.get(is)) { | ||
@@ -12,0 +12,0 @@ registry.define(is, Ctor); |
@@ -12,3 +12,3 @@ 'use strict'; | ||
const defs = { | ||
var defs = { | ||
bubbles: true, | ||
@@ -21,3 +21,3 @@ cancelable: true, | ||
opts = _extends({}, defs, opts); | ||
let e; | ||
var e = void 0; | ||
if ('composed' in CustomEvent.prototype) { | ||
@@ -24,0 +24,0 @@ e = new CustomEvent(name, opts); |
@@ -13,3 +13,3 @@ 'use strict'; | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _define[key]; | ||
@@ -26,3 +26,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _emit[key]; | ||
@@ -39,3 +39,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _link[key]; | ||
@@ -52,3 +52,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _withComponent[key]; | ||
@@ -65,3 +65,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _withProps[key]; | ||
@@ -78,3 +78,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _withRender[key]; | ||
@@ -91,3 +91,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _withUnique[key]; | ||
@@ -94,0 +94,0 @@ } |
@@ -10,3 +10,6 @@ 'use strict'; | ||
function getValue(elem) { | ||
const { checked, type, value } = elem; | ||
var checked = elem.checked, | ||
type = elem.type, | ||
value = elem.value; | ||
if (type === 'checkbox' || type === 'radio') { | ||
@@ -19,3 +22,3 @@ return checked ? value || true : false; | ||
function link(elem, target) { | ||
return e => { | ||
return function (e) { | ||
// TODO revisit once all browsers have native support. | ||
@@ -26,11 +29,13 @@ // | ||
// quirk in the shadydom polyfill that incorrectly returns null for the | ||
const localTarget = e.target || e.composedPath && e.composedPath()[0]; | ||
const value = getValue(localTarget); | ||
const localTargetName = target || localTarget.name || 'value'; | ||
var localTarget = e.target || e.composedPath && e.composedPath()[0]; | ||
var value = getValue(localTarget); | ||
var localTargetName = target || localTarget.name || 'value'; | ||
if (localTargetName.indexOf('.') > -1) { | ||
const parts = localTargetName.split('.'); | ||
const firstPart = parts[0]; | ||
const propName = parts.pop(); | ||
const obj = parts.reduce((prev, curr) => prev[curr], elem); | ||
var parts = localTargetName.split('.'); | ||
var firstPart = parts[0]; | ||
var propName = parts.pop(); | ||
var obj = parts.reduce(function (prev, curr) { | ||
return prev[curr]; | ||
}, elem); | ||
@@ -37,0 +42,0 @@ obj[propName || localTarget.name] = value; |
@@ -6,2 +6,5 @@ 'use strict'; | ||
}); | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
exports.dashCase = dashCase; | ||
@@ -12,26 +15,40 @@ exports.debounce = debounce; | ||
exports.uniqueId = uniqueId; | ||
const Mo = typeof MutationObserver === 'function' ? MutationObserver : class { | ||
constructor(func) { | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var Mo = typeof MutationObserver === 'function' ? MutationObserver : function () { | ||
function _class2(func) { | ||
_classCallCheck(this, _class2); | ||
this.func = func; | ||
} | ||
observe(node) { | ||
const { func } = this; | ||
const prop = { | ||
set() { | ||
if (typeof Promise === 'undefined') { | ||
setTimeout(func); | ||
} else { | ||
new Promise(resolve => resolve()).then(func); | ||
_createClass(_class2, [{ | ||
key: 'observe', | ||
value: function observe(node) { | ||
var func = this.func; | ||
var prop = { | ||
set: function set() { | ||
if (typeof Promise === 'undefined') { | ||
setTimeout(func); | ||
} else { | ||
new Promise(function (resolve) { | ||
return resolve(); | ||
}).then(func); | ||
} | ||
} | ||
} | ||
}; | ||
Object.defineProperty(node, 'textContent', prop); | ||
} | ||
}; | ||
}; | ||
Object.defineProperty(node, 'textContent', prop); | ||
} | ||
}]); | ||
return _class2; | ||
}(); | ||
function dashCase(str) { | ||
return str.split(/([_A-Z])/).reduce((one, two, idx) => { | ||
const dash = !one || idx % 2 === 0 ? '' : '-'; | ||
return str.split(/([_A-Z])/).reduce(function (one, two, idx) { | ||
var dash = !one || idx % 2 === 0 ? '' : '-'; | ||
two = two === '_' ? '' : two; | ||
return `${one}${dash}${two.toLowerCase()}`; | ||
return '' + one + dash + two.toLowerCase(); | ||
}); | ||
@@ -41,6 +58,6 @@ } | ||
function debounce(cbFunc) { | ||
let scheduled = false; | ||
let i = 0; | ||
const elem = document.createElement('span'); | ||
const observer = new Mo(() => { | ||
var scheduled = false; | ||
var i = 0; | ||
var elem = document.createElement('span'); | ||
var observer = new Mo(function () { | ||
cbFunc(); | ||
@@ -52,6 +69,6 @@ scheduled = false; | ||
return () => { | ||
return function () { | ||
if (!scheduled) { | ||
scheduled = true; | ||
elem.textContent = `${i}`; | ||
elem.textContent = '' + i; | ||
i += 1; | ||
@@ -62,7 +79,9 @@ } | ||
const empty = exports.empty = val => val == null; | ||
var empty = exports.empty = function empty(val) { | ||
return val == null; | ||
}; | ||
function keys(obj) { | ||
obj = obj || {}; | ||
const names = Object.getOwnPropertyNames(obj); | ||
var names = Object.getOwnPropertyNames(obj); | ||
return Object.getOwnPropertySymbols ? names.concat(Object.getOwnPropertySymbols(obj)) : names; | ||
@@ -76,7 +95,7 @@ } | ||
function uniqueId(description) { | ||
return (description ? String(description) : '') + 'xxxxxxxx'.replace(/[xy]/g, c => { | ||
const r = Math.random() * 16 | 0; | ||
const v = c === 'x' ? r : r & 0x3 | 0x8; | ||
return (description ? String(description) : '') + 'xxxxxxxx'.replace(/[xy]/g, function (c) { | ||
var r = Math.random() * 16 | 0; | ||
var v = c === 'x' ? r : r & 0x3 | 0x8; | ||
return v.toString(16); | ||
}); | ||
} |
@@ -1,2 +0,2 @@ | ||
'use strict'; | ||
"use strict"; | ||
@@ -9,2 +9,4 @@ Object.defineProperty(exports, "__esModule", { | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
exports.normaliseAttributeDefinition = normaliseAttributeDefinition; | ||
@@ -15,7 +17,8 @@ exports.normalisePropertyDefinition = normalisePropertyDefinition; | ||
var _index = require('./index.js'); | ||
var _index = require("./index.js"); | ||
function normaliseAttributeDefinition(name, prop) { | ||
const { attribute } = prop; | ||
const obj = typeof attribute === 'object' ? _extends({}, attribute) : { | ||
var attribute = prop.attribute; | ||
var obj = (typeof attribute === "undefined" ? "undefined" : _typeof(attribute)) === "object" ? _extends({}, attribute) : { | ||
source: attribute, | ||
@@ -34,9 +37,19 @@ target: attribute | ||
function normalisePropertyDefinition(name, prop) { | ||
const { coerce, default: def, deserialize, serialize } = prop; | ||
var coerce = prop.coerce, | ||
def = prop.default, | ||
deserialize = prop.deserialize, | ||
serialize = prop.serialize; | ||
return { | ||
attribute: normaliseAttributeDefinition(name, prop), | ||
coerce: coerce || (v => v), | ||
coerce: coerce || function (v) { | ||
return v; | ||
}, | ||
default: def, | ||
deserialize: deserialize || (v => v), | ||
serialize: serialize || (v => v) | ||
deserialize: deserialize || function (v) { | ||
return v; | ||
}, | ||
serialize: serialize || function (v) { | ||
return v; | ||
} | ||
}; | ||
@@ -49,5 +62,8 @@ } | ||
} | ||
const propDefs = elem.constructor.props; | ||
for (let propName in propDefs) { | ||
const { attribute: { source }, deserialize } = propDefs[propName]; | ||
var propDefs = elem.constructor.props; | ||
for (var propName in propDefs) { | ||
var _propDefs$propName = propDefs[propName], | ||
source = _propDefs$propName.attribute.source, | ||
deserialize = _propDefs$propName.deserialize; | ||
if (source === name) { | ||
@@ -63,3 +79,3 @@ elem._syncingAttributeToProperty = propName; | ||
if (target && elem._syncingAttributeToProperty !== target) { | ||
const serialized = serialize(val); | ||
var serialized = serialize(val); | ||
elem._syncingPropertyToAttribute = true; | ||
@@ -66,0 +82,0 @@ if (serialized == null) { |
@@ -1,2 +0,2 @@ | ||
'use strict'; | ||
"use strict"; | ||
@@ -9,14 +9,14 @@ Object.defineProperty(exports, "__esModule", { | ||
var _index = require('./index.js'); | ||
var _index = require("./index.js"); | ||
let suffix = 0; | ||
var suffix = 0; | ||
function formatName(prefix, suffix) { | ||
prefix = prefix || 'element'; | ||
return (prefix.indexOf('-') === -1 ? `x-${prefix}` : prefix) + (suffix ? `-${suffix}` : ''); | ||
prefix = prefix || "element"; | ||
return (prefix.indexOf("-") === -1 ? "x-" + prefix : prefix) + (suffix ? "-" + suffix : ""); | ||
} | ||
function generateName(Ctor) { | ||
const registry = customElements; | ||
const prefix = (0, _index.dashCase)(Ctor.name); | ||
var registry = customElements; | ||
var prefix = (0, _index.dashCase)(Ctor.name); | ||
while (registry.get(formatName(prefix, suffix))) { | ||
@@ -23,0 +23,0 @@ suffix++; |
@@ -8,2 +8,4 @@ 'use strict'; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _preactEsm = require('../../node_modules/preact/dist/preact.esm.js'); | ||
@@ -13,15 +15,41 @@ | ||
var _withRender = require('./with-render.js'); | ||
var _withRender2 = require('./with-render.js'); | ||
var _withUnique = require('./with-unique.js'); | ||
const withComponent = exports.withComponent = (Base = HTMLElement) => { | ||
return class extends (0, _withRender.withRender)((0, _withUnique.withUnique)((0, _withProps.withProps)(Base))) { | ||
rendererCallback(shadowRoot, renderCallback) { | ||
this._preactDom = (0, _preactEsm.render)(renderCallback(), shadowRoot, this._preactDom || shadowRoot.children[0]); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
var withComponent = exports.withComponent = function withComponent() { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return function (_withRender) { | ||
_inherits(_class2, _withRender); | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments)); | ||
} | ||
}; | ||
_createClass(_class2, [{ | ||
key: 'rendererCallback', | ||
value: function rendererCallback(shadowRoot, renderCallback) { | ||
this._preactDom = (0, _preactEsm.render)(renderCallback(), shadowRoot, this._preactDom || shadowRoot.children[0]); | ||
} | ||
}]); | ||
return _class2; | ||
}((0, _withRender2.withRender)((0, _withUnique.withUnique)((0, _withProps.withProps)(Base)))); | ||
}; | ||
const Component = exports.Component = withComponent(typeof window === 'undefined' ? class {} : HTMLElement); | ||
var Component = exports.Component = withComponent(typeof window === 'undefined' ? function () { | ||
function _class3() { | ||
_classCallCheck(this, _class3); | ||
} | ||
return _class3; | ||
}() : HTMLElement); | ||
exports.h = _preactEsm.h; |
@@ -1,2 +0,2 @@ | ||
'use strict'; | ||
"use strict"; | ||
@@ -7,16 +7,29 @@ Object.defineProperty(exports, "__esModule", { | ||
exports.props = exports.withProps = undefined; | ||
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
exports.prop = prop; | ||
var _index = require('./util/index.js'); | ||
var _index = require("./util/index.js"); | ||
var _withProps = require('./util/with-props.js'); | ||
var _withProps = require("./util/with-props.js"); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
function prop(definition) { | ||
const propertyDefinition = definition || {}; | ||
var propertyDefinition = definition || {}; | ||
// Allows decorators, or imperative definitions. | ||
const func = function ({ constructor }, name) { | ||
const normalised = (0, _withProps.normalisePropertyDefinition)(name, propertyDefinition); | ||
const _value = (0, _index.sym)(name); | ||
var func = function func(_ref, name) { | ||
var constructor = _ref.constructor; | ||
var normalised = (0, _withProps.normalisePropertyDefinition)(name, propertyDefinition); | ||
var _value = (0, _index.sym)(name); | ||
// Cache the value so we can reference when syncing the attribute to the property. | ||
@@ -31,7 +44,7 @@ constructor._props[name] = normalised; | ||
configurable: true, | ||
get() { | ||
const val = this[_value]; | ||
get: function get() { | ||
var val = this[_value]; | ||
return val == null ? normalised.default : val; | ||
}, | ||
set(val) { | ||
set: function set(val) { | ||
this[_value] = normalised.coerce(val); | ||
@@ -45,3 +58,5 @@ (0, _withProps.syncPropertyToAttribute)(this, normalised.attribute.target, normalised.serialize, val); | ||
// Allows easy extension of pre-defined props { ...prop(), ...{} }. | ||
Object.keys(propertyDefinition).forEach(key => func[key] = propertyDefinition[key]); | ||
Object.keys(propertyDefinition).forEach(function (key) { | ||
return func[key] = propertyDefinition[key]; | ||
}); | ||
@@ -51,44 +66,58 @@ return func; | ||
const withProps = exports.withProps = (Base = HTMLElement) => { | ||
var withProps = exports.withProps = function withProps() { | ||
var _class, _temp; | ||
return _temp = _class = class extends Base { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return _temp = _class = function (_Base) { | ||
_inherits(_class, _Base); | ||
static get observedAttributes() { | ||
return this._observedAttributes; | ||
} | ||
_createClass(_class, [{ | ||
key: "props", | ||
get: function get() { | ||
var _this2 = this; | ||
static set observedAttributes(attrs) { | ||
this._observedAttributes = this.observedAttributes.concat(attrs); | ||
} | ||
return (0, _index.keys)(this.constructor.props).reduce(function (prev, curr) { | ||
prev[curr] = _this2[curr]; | ||
return prev; | ||
}, {}); | ||
}, | ||
set: function set(props) { | ||
var _this3 = this; | ||
static get props() { | ||
return this._props; | ||
} | ||
var ctorProps = this.constructor.props; | ||
(0, _index.keys)(props).forEach(function (k) { | ||
return k in ctorProps && (_this3[k] = props[k]); | ||
}); | ||
} | ||
}], [{ | ||
key: "observedAttributes", | ||
get: function get() { | ||
return this._observedAttributes; | ||
}, | ||
set: function set(attrs) { | ||
this._observedAttributes = this.observedAttributes.concat(attrs); | ||
} | ||
}, { | ||
key: "props", | ||
get: function get() { | ||
return this._props; | ||
}, | ||
set: function set(props) { | ||
var _this4 = this; | ||
static set props(props) { | ||
(0, _index.keys)(props).forEach(name => { | ||
let func = props[name]; | ||
if (typeof func !== 'function') func = prop(func); | ||
func({ constructor: this }, name); | ||
}); | ||
} | ||
(0, _index.keys)(props).forEach(function (name) { | ||
var func = props[name]; | ||
if (typeof func !== "function") func = prop(func); | ||
func({ constructor: _this4 }, name); | ||
}); | ||
} | ||
}]); | ||
get props() { | ||
return (0, _index.keys)(this.constructor.props).reduce((prev, curr) => { | ||
prev[curr] = this[curr]; | ||
return prev; | ||
}, {}); | ||
} | ||
function _class() { | ||
_classCallCheck(this, _class); | ||
set props(props) { | ||
const ctorProps = this.constructor.props; | ||
(0, _index.keys)(props).forEach(k => k in ctorProps && (this[k] = props[k])); | ||
} | ||
var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this)); | ||
constructor() { | ||
super(); | ||
this._updateCallback = () => { | ||
if (this._updating || !this._connected) { | ||
_this._updateCallback = function () { | ||
if (_this._updating || !_this._connected) { | ||
return; | ||
@@ -99,69 +128,95 @@ } | ||
// queueing a render - while there is a pending render. | ||
this._updating = true; | ||
_this._updating = true; | ||
// Prev / next props for prop lifecycle callbacks. | ||
const prev = this._prevProps; | ||
const next = this._prevProps = this.props; | ||
var prev = _this._prevProps; | ||
var next = _this._prevProps = _this.props; | ||
// Always call set, but only call changed if the props updated. | ||
this.propsSetCallback(next, prev); | ||
if (this.propsUpdatedCallback(next, prev)) { | ||
this.propsChangedCallback(next, prev); | ||
_this.propsSetCallback(next, prev); | ||
if (_this.propsUpdatedCallback(next, prev)) { | ||
_this.propsChangedCallback(next, prev); | ||
} | ||
this._updating = false; | ||
_this._updating = false; | ||
}; | ||
if (this._constructed) return; | ||
this._constructed = true; | ||
this._updateDebounced = (0, _index.debounce)(this._updateCallback); | ||
if (_this._constructed) return _possibleConstructorReturn(_this); | ||
_this._constructed = true; | ||
_this._updateDebounced = (0, _index.debounce)(_this._updateCallback); | ||
return _this; | ||
} | ||
connectedCallback() { | ||
if (this._connected) return; | ||
this._connected = true; | ||
// $FlowFixMe - HTMLElement doesn't implement connectedCallback. | ||
if (super.connectedCallback) super.connectedCallback(); | ||
this._updateDebounced(); | ||
} | ||
_createClass(_class, [{ | ||
key: "connectedCallback", | ||
value: function connectedCallback() { | ||
if (this._connected) return; | ||
this._connected = true; | ||
// $FlowFixMe - HTMLElement doesn't implement connectedCallback. | ||
if (_get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "connectedCallback", this)) _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "connectedCallback", this).call(this); | ||
this._updateDebounced(); | ||
} | ||
}, { | ||
key: "disconnectedCallback", | ||
value: function disconnectedCallback() { | ||
if (!this._connected) return; | ||
this._connected = false; | ||
// $FlowFixMe - HTMLElement doesn't implement disconnectedCallback. | ||
if (_get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "disconnectedCallback", this)) _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "disconnectedCallback", this).call(this); | ||
} | ||
disconnectedCallback() { | ||
if (!this._connected) return; | ||
this._connected = false; | ||
// $FlowFixMe - HTMLElement doesn't implement disconnectedCallback. | ||
if (super.disconnectedCallback) super.disconnectedCallback(); | ||
} | ||
// Called when props actually change. | ||
// Called when props actually change. | ||
propsChangedCallback() {} | ||
}, { | ||
key: "propsChangedCallback", | ||
value: function propsChangedCallback() {} | ||
// Called whenever props are set, even if they don't change. | ||
propsSetCallback() {} | ||
// Called whenever props are set, even if they don't change. | ||
// Called to see if the props changed. | ||
propsUpdatedCallback(next, prev) { | ||
return !prev || (0, _index.keys)(prev).some(k => prev[k] !== next[k]); | ||
} | ||
}, { | ||
key: "propsSetCallback", | ||
value: function propsSetCallback() {} | ||
attributeChangedCallback(name, oldValue, newValue) { | ||
// $FlowFixMe - HTMLElement doesn't implement attributeChangedCallback. | ||
if (super.attributeChangedCallback) super.attributeChangedCallback(name, oldValue, newValue); | ||
(0, _withProps.syncAttributeToProperty)(this, name, newValue); | ||
} | ||
// Called to see if the props changed. | ||
// Invokes the complete render lifecycle. | ||
}, _class._observedAttributes = [], _class._props = {}, _temp; | ||
}, { | ||
key: "propsUpdatedCallback", | ||
value: function propsUpdatedCallback(next, prev) { | ||
return !prev || (0, _index.keys)(prev).some(function (k) { | ||
return prev[k] !== next[k]; | ||
}); | ||
} | ||
}, { | ||
key: "attributeChangedCallback", | ||
value: function attributeChangedCallback(name, oldValue, newValue) { | ||
// $FlowFixMe - HTMLElement doesn't implement attributeChangedCallback. | ||
if (_get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "attributeChangedCallback", this)) _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "attributeChangedCallback", this).call(this, name, oldValue, newValue); | ||
(0, _withProps.syncAttributeToProperty)(this, name, newValue); | ||
} | ||
// Invokes the complete render lifecycle. | ||
}]); | ||
return _class; | ||
}(Base), _class._observedAttributes = [], _class._props = {}, _temp; | ||
}; | ||
const { parse, stringify } = JSON; | ||
const attribute = Object.freeze({ source: true }); | ||
const zeroOrNumber = val => (0, _index.empty)(val) ? 0 : Number(val); | ||
var parse = JSON.parse, | ||
stringify = JSON.stringify; | ||
const any = prop({ | ||
attribute | ||
var attribute = Object.freeze({ source: true }); | ||
var zeroOrNumber = function zeroOrNumber(val) { | ||
return (0, _index.empty)(val) ? 0 : Number(val); | ||
}; | ||
var any = prop({ | ||
attribute: attribute | ||
}); | ||
const array = prop({ | ||
attribute, | ||
coerce: val => Array.isArray(val) ? val : (0, _index.empty)(val) ? null : [val], | ||
var array = prop({ | ||
attribute: attribute, | ||
coerce: function coerce(val) { | ||
return Array.isArray(val) ? val : (0, _index.empty)(val) ? null : [val]; | ||
}, | ||
default: Object.freeze([]), | ||
@@ -172,20 +227,26 @@ deserialize: parse, | ||
const boolean = prop({ | ||
attribute, | ||
var boolean = prop({ | ||
attribute: attribute, | ||
coerce: Boolean, | ||
default: false, | ||
deserialize: val => !(0, _index.empty)(val), | ||
serialize: val => val ? '' : null | ||
deserialize: function deserialize(val) { | ||
return !(0, _index.empty)(val); | ||
}, | ||
serialize: function serialize(val) { | ||
return val ? "" : null; | ||
} | ||
}); | ||
const number = prop({ | ||
attribute, | ||
var number = prop({ | ||
attribute: attribute, | ||
default: 0, | ||
coerce: zeroOrNumber, | ||
deserialize: zeroOrNumber, | ||
serialize: val => (0, _index.empty)(val) ? null : String(Number(val)) | ||
serialize: function serialize(val) { | ||
return (0, _index.empty)(val) ? null : String(Number(val)); | ||
} | ||
}); | ||
const object = prop({ | ||
attribute, | ||
var object = prop({ | ||
attribute: attribute, | ||
default: Object.freeze({}), | ||
@@ -196,16 +257,18 @@ deserialize: parse, | ||
const string = prop({ | ||
attribute, | ||
default: '', | ||
var string = prop({ | ||
attribute: attribute, | ||
default: "", | ||
coerce: String, | ||
serialize: val => (0, _index.empty)(val) ? null : String(val) | ||
serialize: function serialize(val) { | ||
return (0, _index.empty)(val) ? null : String(val); | ||
} | ||
}); | ||
const props = exports.props = { | ||
any, | ||
array, | ||
boolean, | ||
number, | ||
object, | ||
string | ||
var props = exports.props = { | ||
any: any, | ||
array: array, | ||
boolean: boolean, | ||
number: number, | ||
object: object, | ||
string: string | ||
}; |
@@ -6,4 +6,13 @@ 'use strict'; | ||
}); | ||
const attachShadowOptions = { mode: 'open' }; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
var attachShadowOptions = { mode: 'open' }; | ||
function attachShadow(elem) { | ||
@@ -13,19 +22,42 @@ return elem.attachShadow ? elem.attachShadow(attachShadowOptions) : elem; | ||
const withRender = exports.withRender = (Base = HTMLElement) => { | ||
return class extends Base { | ||
var withRender = exports.withRender = function withRender() { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return function (_Base) { | ||
_inherits(_class2, _Base); | ||
get renderRoot() { | ||
this._shadowRoot = this._shadowRoot || (this._shadowRoot = this.shadowRoot || attachShadow(this)); | ||
return this._shadowRoot; | ||
} | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
propsChangedCallback() { | ||
this.rendererCallback(this.renderRoot, () => this.renderCallback(this)); | ||
this.renderedCallback(); | ||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments)); | ||
} | ||
renderCallback() {} | ||
renderedCallback() {} | ||
rendererCallback() {} | ||
}; | ||
_createClass(_class2, [{ | ||
key: 'propsChangedCallback', | ||
value: function propsChangedCallback() { | ||
var _this2 = this; | ||
this.rendererCallback(this.renderRoot, function () { | ||
return _this2.renderCallback(_this2); | ||
}); | ||
this.renderedCallback(); | ||
} | ||
}, { | ||
key: 'renderCallback', | ||
value: function renderCallback() {} | ||
}, { | ||
key: 'renderedCallback', | ||
value: function renderedCallback() {} | ||
}, { | ||
key: 'rendererCallback', | ||
value: function rendererCallback() {} | ||
}, { | ||
key: 'renderRoot', | ||
get: function get() { | ||
this._shadowRoot = this._shadowRoot || (this._shadowRoot = this.shadowRoot || attachShadow(this)); | ||
return this._shadowRoot; | ||
} | ||
}]); | ||
return _class2; | ||
}(Base); | ||
}; |
@@ -8,14 +8,35 @@ 'use strict'; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _withUnique = require('./util/with-unique.js'); | ||
const withUnique = exports.withUnique = (Base = HTMLElement) => { | ||
return class extends Base { | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
static get is() { | ||
return this._is || (this._is = (0, _withUnique.generateName)(this)); | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
var withUnique = exports.withUnique = function withUnique() { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return function (_Base) { | ||
_inherits(_class2, _Base); | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments)); | ||
} | ||
static set is(is) { | ||
this._is = is; | ||
} | ||
}; | ||
_createClass(_class2, null, [{ | ||
key: 'is', | ||
get: function get() { | ||
return this._is || (this._is = (0, _withUnique.generateName)(this)); | ||
}, | ||
set: function set(is) { | ||
this._is = is; | ||
} | ||
}]); | ||
return _class2; | ||
}(Base); | ||
}; |
@@ -8,4 +8,4 @@ 'use strict'; | ||
function define(Ctor) { | ||
const registry = customElements; | ||
const is = Ctor.is; | ||
var registry = customElements; | ||
var is = Ctor.is; | ||
if (!registry.get(is)) { | ||
@@ -12,0 +12,0 @@ registry.define(is, Ctor); |
@@ -12,3 +12,3 @@ 'use strict'; | ||
const defs = { | ||
var defs = { | ||
bubbles: true, | ||
@@ -21,3 +21,3 @@ cancelable: true, | ||
opts = _extends({}, defs, opts); | ||
let e; | ||
var e = void 0; | ||
if ('composed' in CustomEvent.prototype) { | ||
@@ -24,0 +24,0 @@ e = new CustomEvent(name, opts); |
@@ -13,3 +13,3 @@ 'use strict'; | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _define[key]; | ||
@@ -26,3 +26,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _emit[key]; | ||
@@ -39,3 +39,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _link[key]; | ||
@@ -52,3 +52,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _withComponent[key]; | ||
@@ -65,3 +65,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _withProps[key]; | ||
@@ -78,3 +78,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _withRender[key]; | ||
@@ -91,3 +91,3 @@ } | ||
enumerable: true, | ||
get: function () { | ||
get: function get() { | ||
return _withUnique[key]; | ||
@@ -94,0 +94,0 @@ } |
@@ -10,3 +10,6 @@ 'use strict'; | ||
function getValue(elem) { | ||
const { checked, type, value } = elem; | ||
var checked = elem.checked, | ||
type = elem.type, | ||
value = elem.value; | ||
if (type === 'checkbox' || type === 'radio') { | ||
@@ -19,3 +22,3 @@ return checked ? value || true : false; | ||
function link(elem, target) { | ||
return e => { | ||
return function (e) { | ||
// TODO revisit once all browsers have native support. | ||
@@ -26,11 +29,13 @@ // | ||
// quirk in the shadydom polyfill that incorrectly returns null for the | ||
const localTarget = e.target || e.composedPath && e.composedPath()[0]; | ||
const value = getValue(localTarget); | ||
const localTargetName = target || localTarget.name || 'value'; | ||
var localTarget = e.target || e.composedPath && e.composedPath()[0]; | ||
var value = getValue(localTarget); | ||
var localTargetName = target || localTarget.name || 'value'; | ||
if (localTargetName.indexOf('.') > -1) { | ||
const parts = localTargetName.split('.'); | ||
const firstPart = parts[0]; | ||
const propName = parts.pop(); | ||
const obj = parts.reduce((prev, curr) => prev[curr], elem); | ||
var parts = localTargetName.split('.'); | ||
var firstPart = parts[0]; | ||
var propName = parts.pop(); | ||
var obj = parts.reduce(function (prev, curr) { | ||
return prev[curr]; | ||
}, elem); | ||
@@ -37,0 +42,0 @@ obj[propName || localTarget.name] = value; |
@@ -6,2 +6,5 @@ 'use strict'; | ||
}); | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
exports.dashCase = dashCase; | ||
@@ -12,26 +15,40 @@ exports.debounce = debounce; | ||
exports.uniqueId = uniqueId; | ||
const Mo = typeof MutationObserver === 'function' ? MutationObserver : class { | ||
constructor(func) { | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var Mo = typeof MutationObserver === 'function' ? MutationObserver : function () { | ||
function _class2(func) { | ||
_classCallCheck(this, _class2); | ||
this.func = func; | ||
} | ||
observe(node) { | ||
const { func } = this; | ||
const prop = { | ||
set() { | ||
if (typeof Promise === 'undefined') { | ||
setTimeout(func); | ||
} else { | ||
new Promise(resolve => resolve()).then(func); | ||
_createClass(_class2, [{ | ||
key: 'observe', | ||
value: function observe(node) { | ||
var func = this.func; | ||
var prop = { | ||
set: function set() { | ||
if (typeof Promise === 'undefined') { | ||
setTimeout(func); | ||
} else { | ||
new Promise(function (resolve) { | ||
return resolve(); | ||
}).then(func); | ||
} | ||
} | ||
} | ||
}; | ||
Object.defineProperty(node, 'textContent', prop); | ||
} | ||
}; | ||
}; | ||
Object.defineProperty(node, 'textContent', prop); | ||
} | ||
}]); | ||
return _class2; | ||
}(); | ||
function dashCase(str) { | ||
return str.split(/([_A-Z])/).reduce((one, two, idx) => { | ||
const dash = !one || idx % 2 === 0 ? '' : '-'; | ||
return str.split(/([_A-Z])/).reduce(function (one, two, idx) { | ||
var dash = !one || idx % 2 === 0 ? '' : '-'; | ||
two = two === '_' ? '' : two; | ||
return `${one}${dash}${two.toLowerCase()}`; | ||
return '' + one + dash + two.toLowerCase(); | ||
}); | ||
@@ -41,6 +58,6 @@ } | ||
function debounce(cbFunc) { | ||
let scheduled = false; | ||
let i = 0; | ||
const elem = document.createElement('span'); | ||
const observer = new Mo(() => { | ||
var scheduled = false; | ||
var i = 0; | ||
var elem = document.createElement('span'); | ||
var observer = new Mo(function () { | ||
cbFunc(); | ||
@@ -52,6 +69,6 @@ scheduled = false; | ||
return () => { | ||
return function () { | ||
if (!scheduled) { | ||
scheduled = true; | ||
elem.textContent = `${i}`; | ||
elem.textContent = '' + i; | ||
i += 1; | ||
@@ -62,7 +79,9 @@ } | ||
const empty = exports.empty = val => val == null; | ||
var empty = exports.empty = function empty(val) { | ||
return val == null; | ||
}; | ||
function keys(obj) { | ||
obj = obj || {}; | ||
const names = Object.getOwnPropertyNames(obj); | ||
var names = Object.getOwnPropertyNames(obj); | ||
return Object.getOwnPropertySymbols ? names.concat(Object.getOwnPropertySymbols(obj)) : names; | ||
@@ -76,7 +95,7 @@ } | ||
function uniqueId(description) { | ||
return (description ? String(description) : '') + 'xxxxxxxx'.replace(/[xy]/g, c => { | ||
const r = Math.random() * 16 | 0; | ||
const v = c === 'x' ? r : r & 0x3 | 0x8; | ||
return (description ? String(description) : '') + 'xxxxxxxx'.replace(/[xy]/g, function (c) { | ||
var r = Math.random() * 16 | 0; | ||
var v = c === 'x' ? r : r & 0x3 | 0x8; | ||
return v.toString(16); | ||
}); | ||
} |
@@ -1,2 +0,2 @@ | ||
'use strict'; | ||
"use strict"; | ||
@@ -9,2 +9,4 @@ Object.defineProperty(exports, "__esModule", { | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
exports.normaliseAttributeDefinition = normaliseAttributeDefinition; | ||
@@ -15,7 +17,8 @@ exports.normalisePropertyDefinition = normalisePropertyDefinition; | ||
var _ = require('.'); | ||
var _index = require("./index"); | ||
function normaliseAttributeDefinition(name, prop) { | ||
const { attribute } = prop; | ||
const obj = typeof attribute === 'object' ? _extends({}, attribute) : { | ||
var attribute = prop.attribute; | ||
var obj = (typeof attribute === "undefined" ? "undefined" : _typeof(attribute)) === "object" ? _extends({}, attribute) : { | ||
source: attribute, | ||
@@ -25,6 +28,6 @@ target: attribute | ||
if (obj.source === true) { | ||
obj.source = (0, _.dashCase)(name); | ||
obj.source = (0, _index.dashCase)(name); | ||
} | ||
if (obj.target === true) { | ||
obj.target = (0, _.dashCase)(name); | ||
obj.target = (0, _index.dashCase)(name); | ||
} | ||
@@ -35,9 +38,19 @@ return obj; | ||
function normalisePropertyDefinition(name, prop) { | ||
const { coerce, default: def, deserialize, serialize } = prop; | ||
var coerce = prop.coerce, | ||
def = prop.default, | ||
deserialize = prop.deserialize, | ||
serialize = prop.serialize; | ||
return { | ||
attribute: normaliseAttributeDefinition(name, prop), | ||
coerce: coerce || (v => v), | ||
coerce: coerce || function (v) { | ||
return v; | ||
}, | ||
default: def, | ||
deserialize: deserialize || (v => v), | ||
serialize: serialize || (v => v) | ||
deserialize: deserialize || function (v) { | ||
return v; | ||
}, | ||
serialize: serialize || function (v) { | ||
return v; | ||
} | ||
}; | ||
@@ -50,5 +63,8 @@ } | ||
} | ||
const propDefs = elem.constructor.props; | ||
for (let propName in propDefs) { | ||
const { attribute: { source }, deserialize } = propDefs[propName]; | ||
var propDefs = elem.constructor.props; | ||
for (var propName in propDefs) { | ||
var _propDefs$propName = propDefs[propName], | ||
source = _propDefs$propName.attribute.source, | ||
deserialize = _propDefs$propName.deserialize; | ||
if (source === name) { | ||
@@ -64,3 +80,3 @@ elem._syncingAttributeToProperty = propName; | ||
if (target && elem._syncingAttributeToProperty !== target) { | ||
const serialized = serialize(val); | ||
var serialized = serialize(val); | ||
elem._syncingPropertyToAttribute = true; | ||
@@ -67,0 +83,0 @@ if (serialized == null) { |
@@ -1,2 +0,2 @@ | ||
'use strict'; | ||
"use strict"; | ||
@@ -9,14 +9,14 @@ Object.defineProperty(exports, "__esModule", { | ||
var _ = require('.'); | ||
var _index = require("./index"); | ||
let suffix = 0; | ||
var suffix = 0; | ||
function formatName(prefix, suffix) { | ||
prefix = prefix || 'element'; | ||
return (prefix.indexOf('-') === -1 ? `x-${prefix}` : prefix) + (suffix ? `-${suffix}` : ''); | ||
prefix = prefix || "element"; | ||
return (prefix.indexOf("-") === -1 ? "x-" + prefix : prefix) + (suffix ? "-" + suffix : ""); | ||
} | ||
function generateName(Ctor) { | ||
const registry = customElements; | ||
const prefix = (0, _.dashCase)(Ctor.name); | ||
var registry = customElements; | ||
var prefix = (0, _index.dashCase)(Ctor.name); | ||
while (registry.get(formatName(prefix, suffix))) { | ||
@@ -23,0 +23,0 @@ suffix++; |
@@ -8,2 +8,4 @@ 'use strict'; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _preact = require('preact'); | ||
@@ -13,15 +15,41 @@ | ||
var _withRender = require('./with-render'); | ||
var _withRender2 = require('./with-render'); | ||
var _withUnique = require('./with-unique'); | ||
const withComponent = exports.withComponent = (Base = HTMLElement) => { | ||
return class extends (0, _withRender.withRender)((0, _withUnique.withUnique)((0, _withProps.withProps)(Base))) { | ||
rendererCallback(shadowRoot, renderCallback) { | ||
this._preactDom = (0, _preact.render)(renderCallback(), shadowRoot, this._preactDom || shadowRoot.children[0]); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
var withComponent = exports.withComponent = function withComponent() { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return function (_withRender) { | ||
_inherits(_class2, _withRender); | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments)); | ||
} | ||
}; | ||
_createClass(_class2, [{ | ||
key: 'rendererCallback', | ||
value: function rendererCallback(shadowRoot, renderCallback) { | ||
this._preactDom = (0, _preact.render)(renderCallback(), shadowRoot, this._preactDom || shadowRoot.children[0]); | ||
} | ||
}]); | ||
return _class2; | ||
}((0, _withRender2.withRender)((0, _withUnique.withUnique)((0, _withProps.withProps)(Base)))); | ||
}; | ||
const Component = exports.Component = withComponent(typeof window === 'undefined' ? class {} : HTMLElement); | ||
var Component = exports.Component = withComponent(typeof window === 'undefined' ? function () { | ||
function _class3() { | ||
_classCallCheck(this, _class3); | ||
} | ||
return _class3; | ||
}() : HTMLElement); | ||
exports.h = _preact.h; |
@@ -1,2 +0,2 @@ | ||
'use strict'; | ||
"use strict"; | ||
@@ -7,16 +7,29 @@ Object.defineProperty(exports, "__esModule", { | ||
exports.props = exports.withProps = undefined; | ||
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
exports.prop = prop; | ||
var _util = require('./util'); | ||
var _index = require("./util/index"); | ||
var _withProps = require('./util/with-props'); | ||
var _withProps = require("./util/with-props"); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
function prop(definition) { | ||
const propertyDefinition = definition || {}; | ||
var propertyDefinition = definition || {}; | ||
// Allows decorators, or imperative definitions. | ||
const func = function ({ constructor }, name) { | ||
const normalised = (0, _withProps.normalisePropertyDefinition)(name, propertyDefinition); | ||
const _value = (0, _util.sym)(name); | ||
var func = function func(_ref, name) { | ||
var constructor = _ref.constructor; | ||
var normalised = (0, _withProps.normalisePropertyDefinition)(name, propertyDefinition); | ||
var _value = (0, _index.sym)(name); | ||
// Cache the value so we can reference when syncing the attribute to the property. | ||
@@ -31,7 +44,7 @@ constructor._props[name] = normalised; | ||
configurable: true, | ||
get() { | ||
const val = this[_value]; | ||
get: function get() { | ||
var val = this[_value]; | ||
return val == null ? normalised.default : val; | ||
}, | ||
set(val) { | ||
set: function set(val) { | ||
this[_value] = normalised.coerce(val); | ||
@@ -45,3 +58,5 @@ (0, _withProps.syncPropertyToAttribute)(this, normalised.attribute.target, normalised.serialize, val); | ||
// Allows easy extension of pre-defined props { ...prop(), ...{} }. | ||
Object.keys(propertyDefinition).forEach(key => func[key] = propertyDefinition[key]); | ||
Object.keys(propertyDefinition).forEach(function (key) { | ||
return func[key] = propertyDefinition[key]; | ||
}); | ||
@@ -51,44 +66,58 @@ return func; | ||
const withProps = exports.withProps = (Base = HTMLElement) => { | ||
var withProps = exports.withProps = function withProps() { | ||
var _class, _temp; | ||
return _temp = _class = class extends Base { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return _temp = _class = function (_Base) { | ||
_inherits(_class, _Base); | ||
static get observedAttributes() { | ||
return this._observedAttributes; | ||
} | ||
_createClass(_class, [{ | ||
key: "props", | ||
get: function get() { | ||
var _this2 = this; | ||
static set observedAttributes(attrs) { | ||
this._observedAttributes = this.observedAttributes.concat(attrs); | ||
} | ||
return (0, _index.keys)(this.constructor.props).reduce(function (prev, curr) { | ||
prev[curr] = _this2[curr]; | ||
return prev; | ||
}, {}); | ||
}, | ||
set: function set(props) { | ||
var _this3 = this; | ||
static get props() { | ||
return this._props; | ||
} | ||
var ctorProps = this.constructor.props; | ||
(0, _index.keys)(props).forEach(function (k) { | ||
return k in ctorProps && (_this3[k] = props[k]); | ||
}); | ||
} | ||
}], [{ | ||
key: "observedAttributes", | ||
get: function get() { | ||
return this._observedAttributes; | ||
}, | ||
set: function set(attrs) { | ||
this._observedAttributes = this.observedAttributes.concat(attrs); | ||
} | ||
}, { | ||
key: "props", | ||
get: function get() { | ||
return this._props; | ||
}, | ||
set: function set(props) { | ||
var _this4 = this; | ||
static set props(props) { | ||
(0, _util.keys)(props).forEach(name => { | ||
let func = props[name]; | ||
if (typeof func !== 'function') func = prop(func); | ||
func({ constructor: this }, name); | ||
}); | ||
} | ||
(0, _index.keys)(props).forEach(function (name) { | ||
var func = props[name]; | ||
if (typeof func !== "function") func = prop(func); | ||
func({ constructor: _this4 }, name); | ||
}); | ||
} | ||
}]); | ||
get props() { | ||
return (0, _util.keys)(this.constructor.props).reduce((prev, curr) => { | ||
prev[curr] = this[curr]; | ||
return prev; | ||
}, {}); | ||
} | ||
function _class() { | ||
_classCallCheck(this, _class); | ||
set props(props) { | ||
const ctorProps = this.constructor.props; | ||
(0, _util.keys)(props).forEach(k => k in ctorProps && (this[k] = props[k])); | ||
} | ||
var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this)); | ||
constructor() { | ||
super(); | ||
this._updateCallback = () => { | ||
if (this._updating || !this._connected) { | ||
_this._updateCallback = function () { | ||
if (_this._updating || !_this._connected) { | ||
return; | ||
@@ -99,69 +128,95 @@ } | ||
// queueing a render - while there is a pending render. | ||
this._updating = true; | ||
_this._updating = true; | ||
// Prev / next props for prop lifecycle callbacks. | ||
const prev = this._prevProps; | ||
const next = this._prevProps = this.props; | ||
var prev = _this._prevProps; | ||
var next = _this._prevProps = _this.props; | ||
// Always call set, but only call changed if the props updated. | ||
this.propsSetCallback(next, prev); | ||
if (this.propsUpdatedCallback(next, prev)) { | ||
this.propsChangedCallback(next, prev); | ||
_this.propsSetCallback(next, prev); | ||
if (_this.propsUpdatedCallback(next, prev)) { | ||
_this.propsChangedCallback(next, prev); | ||
} | ||
this._updating = false; | ||
_this._updating = false; | ||
}; | ||
if (this._constructed) return; | ||
this._constructed = true; | ||
this._updateDebounced = (0, _util.debounce)(this._updateCallback); | ||
if (_this._constructed) return _possibleConstructorReturn(_this); | ||
_this._constructed = true; | ||
_this._updateDebounced = (0, _index.debounce)(_this._updateCallback); | ||
return _this; | ||
} | ||
connectedCallback() { | ||
if (this._connected) return; | ||
this._connected = true; | ||
// $FlowFixMe - HTMLElement doesn't implement connectedCallback. | ||
if (super.connectedCallback) super.connectedCallback(); | ||
this._updateDebounced(); | ||
} | ||
_createClass(_class, [{ | ||
key: "connectedCallback", | ||
value: function connectedCallback() { | ||
if (this._connected) return; | ||
this._connected = true; | ||
// $FlowFixMe - HTMLElement doesn't implement connectedCallback. | ||
if (_get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "connectedCallback", this)) _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "connectedCallback", this).call(this); | ||
this._updateDebounced(); | ||
} | ||
}, { | ||
key: "disconnectedCallback", | ||
value: function disconnectedCallback() { | ||
if (!this._connected) return; | ||
this._connected = false; | ||
// $FlowFixMe - HTMLElement doesn't implement disconnectedCallback. | ||
if (_get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "disconnectedCallback", this)) _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "disconnectedCallback", this).call(this); | ||
} | ||
disconnectedCallback() { | ||
if (!this._connected) return; | ||
this._connected = false; | ||
// $FlowFixMe - HTMLElement doesn't implement disconnectedCallback. | ||
if (super.disconnectedCallback) super.disconnectedCallback(); | ||
} | ||
// Called when props actually change. | ||
// Called when props actually change. | ||
propsChangedCallback() {} | ||
}, { | ||
key: "propsChangedCallback", | ||
value: function propsChangedCallback() {} | ||
// Called whenever props are set, even if they don't change. | ||
propsSetCallback() {} | ||
// Called whenever props are set, even if they don't change. | ||
// Called to see if the props changed. | ||
propsUpdatedCallback(next, prev) { | ||
return !prev || (0, _util.keys)(prev).some(k => prev[k] !== next[k]); | ||
} | ||
}, { | ||
key: "propsSetCallback", | ||
value: function propsSetCallback() {} | ||
attributeChangedCallback(name, oldValue, newValue) { | ||
// $FlowFixMe - HTMLElement doesn't implement attributeChangedCallback. | ||
if (super.attributeChangedCallback) super.attributeChangedCallback(name, oldValue, newValue); | ||
(0, _withProps.syncAttributeToProperty)(this, name, newValue); | ||
} | ||
// Called to see if the props changed. | ||
// Invokes the complete render lifecycle. | ||
}, _class._observedAttributes = [], _class._props = {}, _temp; | ||
}, { | ||
key: "propsUpdatedCallback", | ||
value: function propsUpdatedCallback(next, prev) { | ||
return !prev || (0, _index.keys)(prev).some(function (k) { | ||
return prev[k] !== next[k]; | ||
}); | ||
} | ||
}, { | ||
key: "attributeChangedCallback", | ||
value: function attributeChangedCallback(name, oldValue, newValue) { | ||
// $FlowFixMe - HTMLElement doesn't implement attributeChangedCallback. | ||
if (_get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "attributeChangedCallback", this)) _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), "attributeChangedCallback", this).call(this, name, oldValue, newValue); | ||
(0, _withProps.syncAttributeToProperty)(this, name, newValue); | ||
} | ||
// Invokes the complete render lifecycle. | ||
}]); | ||
return _class; | ||
}(Base), _class._observedAttributes = [], _class._props = {}, _temp; | ||
}; | ||
const { parse, stringify } = JSON; | ||
const attribute = Object.freeze({ source: true }); | ||
const zeroOrNumber = val => (0, _util.empty)(val) ? 0 : Number(val); | ||
var parse = JSON.parse, | ||
stringify = JSON.stringify; | ||
const any = prop({ | ||
attribute | ||
var attribute = Object.freeze({ source: true }); | ||
var zeroOrNumber = function zeroOrNumber(val) { | ||
return (0, _index.empty)(val) ? 0 : Number(val); | ||
}; | ||
var any = prop({ | ||
attribute: attribute | ||
}); | ||
const array = prop({ | ||
attribute, | ||
coerce: val => Array.isArray(val) ? val : (0, _util.empty)(val) ? null : [val], | ||
var array = prop({ | ||
attribute: attribute, | ||
coerce: function coerce(val) { | ||
return Array.isArray(val) ? val : (0, _index.empty)(val) ? null : [val]; | ||
}, | ||
default: Object.freeze([]), | ||
@@ -172,20 +227,26 @@ deserialize: parse, | ||
const boolean = prop({ | ||
attribute, | ||
var boolean = prop({ | ||
attribute: attribute, | ||
coerce: Boolean, | ||
default: false, | ||
deserialize: val => !(0, _util.empty)(val), | ||
serialize: val => val ? '' : null | ||
deserialize: function deserialize(val) { | ||
return !(0, _index.empty)(val); | ||
}, | ||
serialize: function serialize(val) { | ||
return val ? "" : null; | ||
} | ||
}); | ||
const number = prop({ | ||
attribute, | ||
var number = prop({ | ||
attribute: attribute, | ||
default: 0, | ||
coerce: zeroOrNumber, | ||
deserialize: zeroOrNumber, | ||
serialize: val => (0, _util.empty)(val) ? null : String(Number(val)) | ||
serialize: function serialize(val) { | ||
return (0, _index.empty)(val) ? null : String(Number(val)); | ||
} | ||
}); | ||
const object = prop({ | ||
attribute, | ||
var object = prop({ | ||
attribute: attribute, | ||
default: Object.freeze({}), | ||
@@ -196,16 +257,18 @@ deserialize: parse, | ||
const string = prop({ | ||
attribute, | ||
default: '', | ||
var string = prop({ | ||
attribute: attribute, | ||
default: "", | ||
coerce: String, | ||
serialize: val => (0, _util.empty)(val) ? null : String(val) | ||
serialize: function serialize(val) { | ||
return (0, _index.empty)(val) ? null : String(val); | ||
} | ||
}); | ||
const props = exports.props = { | ||
any, | ||
array, | ||
boolean, | ||
number, | ||
object, | ||
string | ||
var props = exports.props = { | ||
any: any, | ||
array: array, | ||
boolean: boolean, | ||
number: number, | ||
object: object, | ||
string: string | ||
}; |
@@ -6,4 +6,13 @@ 'use strict'; | ||
}); | ||
const attachShadowOptions = { mode: 'open' }; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
var attachShadowOptions = { mode: 'open' }; | ||
function attachShadow(elem) { | ||
@@ -13,19 +22,42 @@ return elem.attachShadow ? elem.attachShadow(attachShadowOptions) : elem; | ||
const withRender = exports.withRender = (Base = HTMLElement) => { | ||
return class extends Base { | ||
var withRender = exports.withRender = function withRender() { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return function (_Base) { | ||
_inherits(_class2, _Base); | ||
get renderRoot() { | ||
this._shadowRoot = this._shadowRoot || (this._shadowRoot = this.shadowRoot || attachShadow(this)); | ||
return this._shadowRoot; | ||
} | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
propsChangedCallback() { | ||
this.rendererCallback(this.renderRoot, () => this.renderCallback(this)); | ||
this.renderedCallback(); | ||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments)); | ||
} | ||
renderCallback() {} | ||
renderedCallback() {} | ||
rendererCallback() {} | ||
}; | ||
_createClass(_class2, [{ | ||
key: 'propsChangedCallback', | ||
value: function propsChangedCallback() { | ||
var _this2 = this; | ||
this.rendererCallback(this.renderRoot, function () { | ||
return _this2.renderCallback(_this2); | ||
}); | ||
this.renderedCallback(); | ||
} | ||
}, { | ||
key: 'renderCallback', | ||
value: function renderCallback() {} | ||
}, { | ||
key: 'renderedCallback', | ||
value: function renderedCallback() {} | ||
}, { | ||
key: 'rendererCallback', | ||
value: function rendererCallback() {} | ||
}, { | ||
key: 'renderRoot', | ||
get: function get() { | ||
this._shadowRoot = this._shadowRoot || (this._shadowRoot = this.shadowRoot || attachShadow(this)); | ||
return this._shadowRoot; | ||
} | ||
}]); | ||
return _class2; | ||
}(Base); | ||
}; |
@@ -8,14 +8,35 @@ 'use strict'; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _withUnique = require('./util/with-unique'); | ||
const withUnique = exports.withUnique = (Base = HTMLElement) => { | ||
return class extends Base { | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
static get is() { | ||
return this._is || (this._is = (0, _withUnique.generateName)(this)); | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
var withUnique = exports.withUnique = function withUnique() { | ||
var Base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : HTMLElement; | ||
return function (_Base) { | ||
_inherits(_class2, _Base); | ||
function _class2() { | ||
_classCallCheck(this, _class2); | ||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments)); | ||
} | ||
static set is(is) { | ||
this._is = is; | ||
} | ||
}; | ||
_createClass(_class2, null, [{ | ||
key: 'is', | ||
get: function get() { | ||
return this._is || (this._is = (0, _withUnique.generateName)(this)); | ||
}, | ||
set: function set(is) { | ||
this._is = is; | ||
} | ||
}]); | ||
return _class2; | ||
}(Base); | ||
}; |
{ | ||
"name": "skatejs", | ||
"version": "5.0.0-alpha.13", | ||
"version": "5.0.0-alpha.14", | ||
"description": "Skate is a library built on top of the W3C web component specs that enables you to write functional and performant web components with a very small footprint.", | ||
@@ -11,3 +11,3 @@ "license": "MIT", | ||
}, | ||
"browser": "umd/skatejs.js", | ||
"browser": "umd/index.js", | ||
"main": "node/index.js", | ||
@@ -37,5 +37,4 @@ "module": "es/index.js", | ||
"@skatejs/bore": "4.0.0", | ||
"@skatejs/ssr": "0.4.1", | ||
"@skatejs/ssr": "0.10.0", | ||
"@skatejs/val": "0.3.1", | ||
"@treshugart/nwb": "0.17.1", | ||
"babel-cli": "6.24.1", | ||
@@ -46,4 +45,5 @@ "babel-eslint": "7.2.3", | ||
"babel-preset-env": "1.6.0", | ||
"babel-preset-es2016": "6.24.1", | ||
"babel-preset-es2017": "6.24.1", | ||
"babel-preset-es2015-rollup": "3.0.0", | ||
"babel-preset-latest": "6.24.1", | ||
"babel-preset-react": "6.24.1", | ||
"babel-preset-stage-0": "6.24.1", | ||
@@ -54,7 +54,11 @@ "commitizen": "2.9.6", | ||
"get-typed": "1.0.0-beta.1", | ||
"gitbook-cli": "2.3.0", | ||
"highlight.js": "9.12.0", | ||
"husky": "0.13.3", | ||
"jest": "20.0.4", | ||
"lint-staged": "4.0.2", | ||
"nodemon": "1.11.0", | ||
"preact": "*", | ||
"rollup": "0.47.4", | ||
"rollup-plugin-babel": "3.0.2", | ||
"rollup-plugin-uglify": "2.0.1", | ||
"semantic-release": "6.3.2", | ||
@@ -65,3 +69,2 @@ "typescript": "2.3.3", | ||
"watchman": "0.1.8", | ||
"webpack-node-externals": "1.6.0", | ||
"yargs": "8.0.1" | ||
@@ -73,11 +76,13 @@ }, | ||
"scripts": { | ||
"build:es": "babel src --out-dir es --presets=$(pwd)/config/babel.es", | ||
"build:esnext": "babel src --out-dir esnext --presets=$(pwd)/config/babel.esnext", | ||
"build:node": "babel src --out-dir node --presets=$(pwd)/config/babel.node", | ||
"build:umd": "rollup -c && rollup -c --min", | ||
"commitmsg": "validate-commit-msg", | ||
"docs:build": "gitbook install && gitbook build", | ||
"docs:watch": "gitbook install && gitbook serve", | ||
"prepublish": "nwb build && npm run build:esnext && npm run build:node", | ||
"dev": "nodemon --exec 'npm run site' --watch site --watch src", | ||
"prepublish": "npm run build:es && npm run build:esnext && npm run build:node && npm run build:umd", | ||
"precommit": "lint-staged", | ||
"release": "git push && git push --tags && npm publish", | ||
"test": "npm run prepublish && npm run test:ts && node umd/skatejs.js && jest", | ||
"site": "./node_modules/@skatejs/ssr/bin/index --out public --src site/*.js --babel config/babel.node", | ||
"test": "jest", | ||
"test:watch": "jest --watch", | ||
@@ -99,6 +104,4 @@ "test:ts": "tsc -p ./", | ||
"babel": { | ||
"plugins": [ | ||
"transform-es2015-modules-commonjs" | ||
], | ||
"presets": [ | ||
"latest", | ||
"react", | ||
@@ -105,0 +108,0 @@ "stage-0" |
@@ -1,2 +0,2 @@ | ||
# [Skate][gitbook] | ||
# Skate | ||
@@ -126,4 +126,2 @@ [![Downloads per month](https://img.shields.io/npm/dm/skatejs.svg)](https://www.npmjs.com/package/skatejs) | ||
[gitbook]: https://skatejs.gitbooks.io/skatejs/content/ | ||
## Backers | ||
@@ -130,0 +128,0 @@ Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/skatejs#backer)] |
// @flow | ||
import type { | ||
PropOptions, | ||
PropsOptionsNormalized | ||
} from '../types'; | ||
import type { PropOptions, PropsOptionsNormalized } from "../types"; | ||
import { dashCase } from '.'; | ||
import { dashCase } from "./index"; | ||
interface CanDefineProps extends HTMLElement { | ||
static prototype: Object; | ||
static props: PropsOptionsNormalized; | ||
static prototype: Object, | ||
static props: PropsOptionsNormalized, | ||
_syncingAttributeToProperty: string | null; | ||
_syncingPropertyToAttribute: boolean; | ||
_syncingAttributeToProperty: string | null, | ||
_syncingPropertyToAttribute: boolean | ||
} | ||
export function normaliseAttributeDefinition (name: string, prop: PropOptions): Object { | ||
export function normaliseAttributeDefinition( | ||
name: string, | ||
prop: PropOptions | ||
): Object { | ||
const { attribute } = prop; | ||
const obj = typeof attribute === 'object' ? { ...attribute } : { | ||
source: attribute, | ||
target: attribute | ||
}; | ||
const obj = | ||
typeof attribute === "object" | ||
? { ...attribute } | ||
: { | ||
source: attribute, | ||
target: attribute | ||
}; | ||
if (obj.source === true) { | ||
@@ -33,3 +36,6 @@ obj.source = dashCase(name); | ||
export function normalisePropertyDefinition (name: string, prop: PropOptions): Object { | ||
export function normalisePropertyDefinition( | ||
name: string, | ||
prop: PropOptions | ||
): Object { | ||
const { coerce, default: def, deserialize, serialize } = prop; | ||
@@ -45,3 +51,7 @@ return { | ||
export function syncAttributeToProperty (elem: CanDefineProps, name: string, value: mixed): void { | ||
export function syncAttributeToProperty( | ||
elem: CanDefineProps, | ||
name: string, | ||
value: mixed | ||
): void { | ||
if (elem._syncingPropertyToAttribute) { | ||
@@ -61,3 +71,8 @@ return; | ||
export function syncPropertyToAttribute (elem: CanDefineProps, target: string, serialize: (val: mixed) => string, val: mixed): void { | ||
export function syncPropertyToAttribute( | ||
elem: CanDefineProps, | ||
target: string, | ||
serialize: (val: mixed) => string, | ||
val: mixed | ||
): void { | ||
if (target && elem._syncingAttributeToProperty !== target) { | ||
@@ -64,0 +79,0 @@ const serialized = serialize(val); |
// @flow | ||
import type { FixedCustomElementRegistry } from '../types'; | ||
import type { FixedCustomElementRegistry } from "../types"; | ||
import { dashCase } from '.'; | ||
import { dashCase } from "./index"; | ||
let suffix: number = 0; | ||
export function formatName (prefix: string, suffix: number): string { | ||
prefix = prefix || 'element'; | ||
export function formatName(prefix: string, suffix: number): string { | ||
prefix = prefix || "element"; | ||
return ( | ||
prefix.indexOf('-') === -1 ? `x-${prefix}` : prefix | ||
) + ( | ||
suffix ? `-${suffix}` : '' | ||
(prefix.indexOf("-") === -1 ? `x-${prefix}` : prefix) + | ||
(suffix ? `-${suffix}` : "") | ||
); | ||
} | ||
export function generateName (Ctor: Function): string { | ||
export function generateName(Ctor: Function): string { | ||
const registry: FixedCustomElementRegistry = customElements; | ||
@@ -20,0 +19,0 @@ const prefix = dashCase(Ctor.name); |
@@ -7,10 +7,5 @@ // @flow | ||
PropsOptionsNormalized | ||
} from './types'; | ||
} from "./types"; | ||
import { | ||
debounce, | ||
empty, | ||
keys, | ||
sym | ||
} from './util'; | ||
import { debounce, empty, keys, sym } from "./util/index"; | ||
@@ -21,9 +16,9 @@ import { | ||
syncPropertyToAttribute | ||
} from './util/with-props'; | ||
} from "./util/with-props"; | ||
export function prop (definition: PropOptions | void): Function { | ||
export function prop(definition: PropOptions | void): Function { | ||
const propertyDefinition: PropOptions = definition || {}; | ||
// Allows decorators, or imperative definitions. | ||
const func = function ({ constructor }: HasConstructor, name: string): void { | ||
const func = function({ constructor }: HasConstructor, name: string): void { | ||
const normalised = normalisePropertyDefinition(name, propertyDefinition); | ||
@@ -41,9 +36,14 @@ const _value = sym(name); | ||
configurable: true, | ||
get () { | ||
get() { | ||
const val = this[_value]; | ||
return val == null ? normalised.default : val; | ||
}, | ||
set (val) { | ||
set(val) { | ||
this[_value] = normalised.coerce(val); | ||
syncPropertyToAttribute(this, normalised.attribute.target, normalised.serialize, val); | ||
syncPropertyToAttribute( | ||
this, | ||
normalised.attribute.target, | ||
normalised.serialize, | ||
val | ||
); | ||
this._updateDebounced(); | ||
@@ -55,3 +55,5 @@ } | ||
// Allows easy extension of pre-defined props { ...prop(), ...{} }. | ||
Object.keys(propertyDefinition).forEach(key => (func[key] = propertyDefinition[key])); | ||
Object.keys(propertyDefinition).forEach( | ||
key => (func[key] = propertyDefinition[key]) | ||
); | ||
@@ -61,3 +63,5 @@ return func; | ||
export const withProps = (Base?: Class<HTMLElement> = HTMLElement): Class<HTMLElement> => | ||
export const withProps = ( | ||
Base?: Class<HTMLElement> = HTMLElement | ||
): Class<HTMLElement> => | ||
class extends Base { | ||
@@ -75,18 +79,18 @@ static _observedAttributes: Array<string> = []; | ||
static get observedAttributes (): Array<string> { | ||
static get observedAttributes(): Array<string> { | ||
return this._observedAttributes; | ||
} | ||
static set observedAttributes (attrs: string | Array<string>) { | ||
static set observedAttributes(attrs: string | Array<string>) { | ||
this._observedAttributes = this.observedAttributes.concat(attrs); | ||
} | ||
static get props (): PropsOptionsNormalized { | ||
static get props(): PropsOptionsNormalized { | ||
return this._props; | ||
} | ||
static set props (props: PropOptions): void { | ||
static set props(props: PropOptions): void { | ||
keys(props).forEach(name => { | ||
let func = props[name]; | ||
if (typeof func !== 'function') func = prop(func); | ||
if (typeof func !== "function") func = prop(func); | ||
func({ constructor: this }, name); | ||
@@ -96,4 +100,6 @@ }); | ||
get props (): Object { | ||
return keys(this.constructor.props).reduce((prev: Object, curr: string) => { | ||
get props(): Object { | ||
return keys( | ||
this.constructor.props | ||
).reduce((prev: Object, curr: string) => { | ||
prev[curr] = (this: any)[curr]; | ||
@@ -104,3 +110,3 @@ return prev; | ||
set props (props: Object) { | ||
set props(props: Object) { | ||
const ctorProps = this.constructor.props; | ||
@@ -110,3 +116,3 @@ keys(props).forEach(k => k in ctorProps && ((this: any)[k] = props[k])); | ||
constructor () { | ||
constructor() { | ||
super(); | ||
@@ -118,3 +124,3 @@ if (this._constructed) return; | ||
connectedCallback () { | ||
connectedCallback() { | ||
if (this._connected) return; | ||
@@ -127,3 +133,3 @@ this._connected = true; | ||
disconnectedCallback () { | ||
disconnectedCallback() { | ||
if (!this._connected) return; | ||
@@ -136,15 +142,20 @@ this._connected = false; | ||
// Called when props actually change. | ||
propsChangedCallback () {} | ||
propsChangedCallback() {} | ||
// Called whenever props are set, even if they don't change. | ||
propsSetCallback () {} | ||
propsSetCallback() {} | ||
// Called to see if the props changed. | ||
propsUpdatedCallback (next: Object, prev: Object) { | ||
propsUpdatedCallback(next: Object, prev: Object) { | ||
return !prev || keys(prev).some(k => prev[k] !== next[k]); | ||
} | ||
attributeChangedCallback (name: string, oldValue: string | null, newValue: string | null) { | ||
attributeChangedCallback( | ||
name: string, | ||
oldValue: string | null, | ||
newValue: string | null | ||
) { | ||
// $FlowFixMe - HTMLElement doesn't implement attributeChangedCallback. | ||
if (super.attributeChangedCallback) super.attributeChangedCallback(name, oldValue, newValue); | ||
if (super.attributeChangedCallback) | ||
super.attributeChangedCallback(name, oldValue, newValue); | ||
syncAttributeToProperty(this, name, newValue); | ||
@@ -165,3 +176,3 @@ } | ||
const prev = this._prevProps; | ||
const next = this._prevProps = this.props; | ||
const next = (this._prevProps = this.props); | ||
@@ -175,3 +186,3 @@ // Always call set, but only call changed if the props updated. | ||
this._updating = false; | ||
} | ||
}; | ||
}; | ||
@@ -189,3 +200,4 @@ | ||
attribute, | ||
coerce: <T>(val: Array<T> | T): Array<T> | null => Array.isArray(val) ? val : (empty(val) ? null : [val]), | ||
coerce: <T>(val: Array<T> | T): Array<T> | null => | ||
Array.isArray(val) ? val : empty(val) ? null : [val], | ||
default: Object.freeze([]), | ||
@@ -201,3 +213,3 @@ deserialize: parse, | ||
deserialize: (val: string): boolean => !empty(val), | ||
serialize: (val: mixed): null | string => val ? '' : null | ||
serialize: (val: mixed): null | string => (val ? "" : null) | ||
}); | ||
@@ -210,3 +222,4 @@ | ||
deserialize: zeroOrNumber, | ||
serialize: (val: mixed): null | string => empty(val) ? null : String(Number(val)) | ||
serialize: (val: mixed): null | string => | ||
empty(val) ? null : String(Number(val)) | ||
}); | ||
@@ -223,5 +236,5 @@ | ||
attribute, | ||
default: '', | ||
default: "", | ||
coerce: String, | ||
serialize: (val: mixed): null | string => empty(val) ? null : String(val) | ||
serialize: (val: mixed): null | string => (empty(val) ? null : String(val)) | ||
}); | ||
@@ -228,0 +241,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
58
3200
204722
31
193