Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

skatejs

Package Overview
Dependencies
Maintainers
8
Versions
151
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

skatejs - npm Package Compare versions

Comparing version 5.0.0-alpha.13 to 5.0.0-alpha.14

umd/index.js

8

es/define.js

@@ -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 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc