custom-elements-ts 0.0.16 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +191 -168
  2. package/bundles/custom-elements-ts.umd.js +314 -270
  3. package/bundles/custom-elements-ts.umd.js.map +1 -1
  4. package/esm2015/custom-elements-ts.js +270 -247
  5. package/esm2015/custom-elements-ts.js.map +1 -1
  6. package/{custom-element.d.ts → esm5/custom-element.d.ts} +12 -12
  7. package/esm5/custom-elements-ts.js +308 -262
  8. package/esm5/custom-elements-ts.js.map +1 -1
  9. package/{index.d.ts → esm5/index.d.ts} +5 -5
  10. package/{listen.d.ts → esm5/listen.d.ts} +17 -17
  11. package/{prop.d.ts → esm5/prop.d.ts} +2 -2
  12. package/{toggle.d.ts → esm5/toggle.d.ts} +1 -1
  13. package/esm5/util.d.ts +4 -0
  14. package/{watch.d.ts → esm5/watch.d.ts} +1 -1
  15. package/package.json +9 -14
  16. package/util.d.ts +0 -4
package/esm2015/custom-elements-ts.js CHANGED
@@ -1,260 +1,283 @@
1
- const toKebabCase = str => {
2
- return str
3
- .replace(/([a-z])([A-Z])/g, '$1-$2')
4
- .replace(/[\s_]+/g, '-')
5
- .toLowerCase();
6
- };
7
- const toCamelCase = str => {
8
- return str
9
- .toLowerCase()
10
- .replace(/(\-\w)/g, (m) => m[1].toUpperCase());
11
- };
12
- const toDotCase = (str) => {
13
- return str.replace(/(?!^)([A-Z])/g, ' $1')
14
- .replace(/[_\s]+(?=[a-zA-Z])/g, '.')
15
- .toLowerCase();
16
- };
17
- const tryParseInt = (value) => {
18
- return (parseInt(value) == value && parseFloat(value) !== NaN) ? parseInt(value) : value;
1
+ const toKebabCase = (str) => {
2
+ return str
3
+ .replace(/([a-z])([A-Z])/g, '$1-$2')
4
+ .replace(/[\s_]+/g, '-')
5
+ .toLowerCase();
6
+ };
7
+ const toCamelCase = (str) => {
8
+ return str.toLowerCase().replace(/(-\w)/g, (m) => m[1].toUpperCase());
9
+ };
10
+ const toDotCase = (str) => {
11
+ return str
12
+ .replace(/(?!^)([A-Z])/g, ' $1')
13
+ .replace(/[_\s]+(?=[a-zA-Z])/g, '.')
14
+ .toLowerCase();
15
+ };
16
+ const tryParseInt = (value) => {
17
+ if (typeof value === 'number' && Number.isInteger(value)) {
18
+ return value;
19
+ }
20
+ if (typeof value === 'string') {
21
+ const trimmed = value.trim();
22
+ if (trimmed !== '') {
23
+ const parsed = Number(trimmed);
24
+ if (Number.isInteger(parsed) && String(parsed) === trimmed) {
25
+ return parsed;
26
+ }
27
+ }
28
+ }
29
+ return value;
19
30
  };
20
31
 
21
- const Listen = (eventName, selector) => {
22
- return (target, methodName) => {
23
- if (!target.constructor.listeners) {
24
- target.constructor.listeners = [];
25
- }
26
- target.constructor.listeners.push({ selector: selector, eventName: eventName, handler: target[methodName] });
27
- };
28
- };
29
- const addEventListeners = (target) => {
30
- if (target.constructor.listeners) {
31
- const targetRoot = target.shadowRoot || target;
32
- for (const listener of target.constructor.listeners) {
33
- const eventTarget = (listener.selector)
34
- ? targetRoot.querySelector(listener.selector)
35
- ? targetRoot.querySelector(listener.selector) : null
36
- : target;
37
- if (eventTarget) {
38
- eventTarget.addEventListener(listener.eventName, (e) => {
39
- listener.handler.call(target, e);
40
- });
41
- }
42
- }
43
- }
44
- };
45
- const Dispatch = (eventName) => {
46
- return (target, propertyName) => {
47
- function get() {
48
- const self = this;
49
- return {
50
- emit(options) {
51
- const evtName = (eventName) ? eventName : toDotCase(propertyName);
52
- self.dispatchEvent(new CustomEvent(evtName, options));
53
- }
54
- };
55
- }
56
- Object.defineProperty(target, propertyName, { get });
57
- };
32
+ const Listen = (eventName, selector) => {
33
+ return (target, methodName) => {
34
+ if (!target.constructor.listeners) {
35
+ target.constructor.listeners = [];
36
+ }
37
+ target.constructor.listeners.push({
38
+ selector: selector,
39
+ eventName: eventName,
40
+ handler: target[methodName],
41
+ });
42
+ };
43
+ };
44
+ const addEventListeners = (target) => {
45
+ if (target.constructor.listeners) {
46
+ const targetRoot = target.shadowRoot || target;
47
+ for (const listener of target.constructor.listeners) {
48
+ let eventTarget = target;
49
+ if (listener.selector) {
50
+ eventTarget = targetRoot.querySelector(listener.selector);
51
+ }
52
+ if (eventTarget) {
53
+ eventTarget.addEventListener(listener.eventName, (e) => {
54
+ listener.handler.call(target, e);
55
+ });
56
+ }
57
+ }
58
+ }
59
+ };
60
+ const Dispatch = (eventName) => {
61
+ return (target, propertyName) => {
62
+ function get() {
63
+ const self = this;
64
+ return {
65
+ emit(options) {
66
+ const evtName = eventName ? eventName : toDotCase(propertyName);
67
+ self.dispatchEvent(new CustomEvent(evtName, options));
68
+ },
69
+ };
70
+ }
71
+ Object.defineProperty(target, propertyName, { get });
72
+ };
58
73
  };
59
74
 
60
- const Prop = () => {
61
- return (target, propName) => {
62
- const attrName = toKebabCase(propName);
63
- function get() {
64
- if (this.props[propName]) {
65
- return this.props[propName];
66
- }
67
- return this.getAttribute(attrName);
68
- }
69
- function set(value) {
70
- if (this.__connected) {
71
- const oldValue = this.props[propName];
72
- this.props[propName] = tryParseInt(value);
73
- if (typeof value != 'object') {
74
- this.setAttribute(attrName, value);
75
- }
76
- else {
77
- this.onAttributeChange(attrName, oldValue, value, false);
78
- }
79
- }
80
- else {
81
- if (!this.hasAttribute(toKebabCase(propName))) {
82
- this.constructor.propsInit[propName] = value;
83
- }
84
- }
85
- }
86
- if (!target.constructor.propsInit) {
87
- target.constructor.propsInit = {};
88
- }
89
- target.constructor.propsInit[propName] = null;
90
- Object.defineProperty(target, propName, { get, set });
91
- };
92
- };
93
- const getProps = (target) => {
94
- const watchAttributes = target.constructor.watchAttributes;
95
- const plainAttributes = Object.assign({}, watchAttributes);
96
- Object.keys(plainAttributes).forEach(v => plainAttributes[v] = '');
97
- const cycleProps = Object.assign({}, plainAttributes, target.constructor.propsInit);
98
- return Object.keys(cycleProps);
99
- };
100
- const initializeProps = (target) => {
101
- const watchAttributes = target.constructor.watchAttributes;
102
- for (let prop of getProps(target)) {
103
- if (watchAttributes) {
104
- if (watchAttributes[toKebabCase(prop)] == null) {
105
- watchAttributes[toKebabCase(prop)] = '';
106
- }
107
- else {
108
- const attribValue = target.props[prop] || target.getAttribute(toKebabCase(prop));
109
- if (typeof target[watchAttributes[prop]] == 'function') {
110
- target[watchAttributes[prop]]({ new: attribValue });
111
- }
112
- }
113
- }
114
- if (target.constructor.propsInit[prop]) {
115
- if (!target.hasAttribute(toKebabCase(prop))) {
116
- target[prop] = target.constructor.propsInit[prop];
117
- }
118
- }
119
- }
75
+ const Prop = () => {
76
+ return (target, propName) => {
77
+ const attrName = toKebabCase(propName);
78
+ function get() {
79
+ const hasOwn = Object.prototype.hasOwnProperty.call(this.props, propName);
80
+ if (hasOwn) {
81
+ return this.props[propName];
82
+ }
83
+ return this.getAttribute(attrName);
84
+ }
85
+ function set(value) {
86
+ if (this.__connected) {
87
+ const oldValue = this.props[propName];
88
+ this.props[propName] = tryParseInt(value);
89
+ const valueType = typeof value;
90
+ const shouldReflect = valueType === 'string' || valueType === 'number' || valueType === 'boolean';
91
+ if (shouldReflect) {
92
+ this.setAttribute(attrName, value);
93
+ }
94
+ else {
95
+ this.onAttributeChange(attrName, oldValue, value, false);
96
+ }
97
+ }
98
+ else {
99
+ if (!this.hasAttribute(toKebabCase(propName))) {
100
+ this.constructor.propsInit[propName] = value;
101
+ }
102
+ }
103
+ }
104
+ if (!target.constructor.propsInit) {
105
+ target.constructor.propsInit = {};
106
+ }
107
+ target.constructor.propsInit[propName] = null;
108
+ Object.defineProperty(target, propName, { get, set });
109
+ };
110
+ };
111
+ const getProps = (target) => {
112
+ const watchAttributes = target.constructor.watchAttributes;
113
+ const plainAttributes = Object.assign({}, watchAttributes);
114
+ Object.keys(plainAttributes).forEach((v) => (plainAttributes[v] = ''));
115
+ const cycleProps = Object.assign(Object.assign({}, plainAttributes), target.constructor.propsInit);
116
+ return Object.keys(cycleProps);
117
+ };
118
+ const initializeProps = (target) => {
119
+ const watchAttributes = target.constructor.watchAttributes;
120
+ for (const prop of getProps(target)) {
121
+ if (watchAttributes) {
122
+ if (watchAttributes[toKebabCase(prop)] === null ||
123
+ watchAttributes[toKebabCase(prop)] === undefined) {
124
+ watchAttributes[toKebabCase(prop)] = '';
125
+ }
126
+ else {
127
+ const hasOwn = Object.prototype.hasOwnProperty.call(target.props, prop);
128
+ const attribValue = hasOwn ? target.props[prop] : target.getAttribute(toKebabCase(prop));
129
+ if (typeof target[watchAttributes[prop]] === 'function') {
130
+ target[watchAttributes[prop]]({ new: attribValue });
131
+ }
132
+ }
133
+ }
134
+ if (target.constructor.propsInit[prop]) {
135
+ if (!target.hasAttribute(toKebabCase(prop))) {
136
+ target[prop] = target.constructor.propsInit[prop];
137
+ }
138
+ }
139
+ }
120
140
  };
121
141
 
122
- const CustomElement = (args) => {
123
- return (target) => {
124
- var _a;
125
- const tag = args.tag || toKebabCase(target.prototype.constructor.name);
126
- const customElement = (_a = class extends target {
127
- constructor() {
128
- super();
129
- this.props = {};
130
- this.showShadowRoot = args.shadow == null ? true : args.shadow;
131
- if (!this.shadowRoot && this.showShadowRoot) {
132
- this.attachShadow({ mode: 'open' });
133
- }
134
- }
135
- static get observedAttributes() {
136
- return Object.keys(this.propsInit || {}).map(x => toKebabCase(x));
137
- }
138
- attributeChangedCallback(name, oldValue, newValue) {
139
- this.onAttributeChange(name, oldValue, newValue);
140
- }
141
- onAttributeChange(name, oldValue, newValue, set = true) {
142
- if (oldValue != newValue) {
143
- if (set) {
144
- this[toCamelCase(name)] = newValue;
145
- }
146
- const watchAttributes = this.constructor.watchAttributes;
147
- if (watchAttributes && watchAttributes[name]) {
148
- const methodToCall = watchAttributes[name];
149
- if (this.__connected) {
150
- if (typeof this[methodToCall] == 'function') {
151
- this[methodToCall]({ old: oldValue, new: newValue });
152
- }
153
- }
154
- }
155
- }
156
- }
157
- connectedCallback() {
158
- this.__render();
159
- super.connectedCallback && super.connectedCallback();
160
- this.__connected = true;
161
- addEventListeners(this);
162
- initializeProps(this);
163
- }
164
- __render() {
165
- if (this.__connected)
166
- return;
167
- const template = document.createElement('template');
168
- const style = `${args.style ? `<style>${args.style}</style>` : ''}`;
169
- template.innerHTML = `${style}${args.template ? args.template : ''}`;
170
- (this.showShadowRoot ? this.shadowRoot : this).appendChild(document.importNode(template.content, true));
171
- }
172
- },
173
- _a.__connected = false,
174
- _a);
175
- if (!customElements.get(tag)) {
176
- customElements.define(tag, customElement);
177
- }
178
- return customElement;
179
- };
142
+ const CustomElement = (args) => {
143
+ return (target) => {
144
+ const tag = args.tag || toKebabCase(target.prototype.constructor.name);
145
+ const customElement = class extends target {
146
+ static get observedAttributes() {
147
+ return Object.keys(this.propsInit || {}).map((x) => toKebabCase(x));
148
+ }
149
+ constructor() {
150
+ super();
151
+ this.__connected = false;
152
+ this.props = {};
153
+ this.showShadowRoot =
154
+ args.shadow === undefined || args.shadow === null ? true : args.shadow;
155
+ if (!this.shadowRoot && this.showShadowRoot) {
156
+ this.attachShadow({ mode: 'open' });
157
+ }
158
+ }
159
+ attributeChangedCallback(name, oldValue, newValue) {
160
+ this.onAttributeChange(name, oldValue, newValue);
161
+ }
162
+ onAttributeChange(name, oldValue, newValue, set = true) {
163
+ if (oldValue !== newValue) {
164
+ if (set) {
165
+ const propName = toCamelCase(name);
166
+ this[propName] = newValue;
167
+ }
168
+ const watchAttributes = this.constructor.watchAttributes;
169
+ if (watchAttributes && watchAttributes[name]) {
170
+ const methodToCall = watchAttributes[name];
171
+ if (this.__connected) {
172
+ if (typeof this[methodToCall] === 'function') {
173
+ this[methodToCall]({ old: oldValue, new: newValue });
174
+ }
175
+ }
176
+ }
177
+ }
178
+ }
179
+ connectedCallback() {
180
+ this.__render();
181
+ const parentProto = Object.getPrototypeOf(Object.getPrototypeOf(this)) || null;
182
+ if (parentProto && typeof parentProto.connectedCallback === 'function') {
183
+ parentProto.connectedCallback.call(this);
184
+ }
185
+ this.__connected = true;
186
+ addEventListeners(this);
187
+ initializeProps(this);
188
+ }
189
+ __render() {
190
+ if (this.__connected)
191
+ return;
192
+ const template = document.createElement('template');
193
+ const style = `${args.style ? `<style>${args.style}</style>` : ''}`;
194
+ template.innerHTML = `${style}${args.template ? args.template : ''}`;
195
+ (this.showShadowRoot ? this.shadowRoot : this).appendChild(document.importNode(template.content, true));
196
+ }
197
+ };
198
+ if (!customElements.get(tag)) {
199
+ customElements.define(tag, customElement);
200
+ }
201
+ return customElement;
202
+ };
180
203
  };
181
204
 
182
- const Watch = (attrName) => {
183
- return (target, propertyName) => {
184
- if (!target.constructor.watchAttributes) {
185
- target.constructor.watchAttributes = {};
186
- }
187
- target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
188
- if (!target.constructor.propsInit) {
189
- target.constructor.propsInit = {};
190
- }
191
- target.constructor.propsInit[attrName] = null;
192
- };
205
+ const Watch = (attrName) => {
206
+ return (target, propertyName) => {
207
+ if (!target.constructor.watchAttributes) {
208
+ target.constructor.watchAttributes = {};
209
+ }
210
+ target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
211
+ if (!target.constructor.propsInit) {
212
+ target.constructor.propsInit = {};
213
+ }
214
+ target.constructor.propsInit[attrName] = null;
215
+ };
193
216
  };
194
217
 
195
- const Toggle = () => {
196
- return (target, propName) => {
197
- function get() {
198
- const getAttribute = (propName) => {
199
- if (this.hasAttribute(propName)) {
200
- const attrValue = this.getAttribute(propName);
201
- if (/^(true|false|^$)$/.test(attrValue)) {
202
- return attrValue == 'true' || attrValue == '';
203
- }
204
- else {
205
- return false;
206
- }
207
- }
208
- return false;
209
- };
210
- return getAttribute(propName);
211
- }
212
- function set(value) {
213
- const oldValue = value;
214
- if (value != undefined) {
215
- switch (typeof value) {
216
- case 'boolean':
217
- break;
218
- case 'string':
219
- if (/^(true|false|^$)$/.test(value)) {
220
- value = oldValue == 'true' || oldValue == '';
221
- }
222
- else {
223
- console.warn(`TypeError: Cannot set boolean toggle property '${propName}' to '${value}'`);
224
- value = false;
225
- }
226
- break;
227
- default:
228
- throw (`TypeError: Cannot set boolean toggle property '${propName}' to '${value}'`);
229
- }
230
- }
231
- if (this.__connected) {
232
- this.props[propName] = value || false;
233
- if (oldValue !== '' && oldValue !== null) {
234
- this.setAttribute(propName, value);
235
- }
236
- else {
237
- if (value) {
238
- this.setAttribute(propName, '');
239
- }
240
- else {
241
- this.removeAttribute(propName);
242
- }
243
- }
244
- }
245
- else {
246
- if (!this.hasAttribute(toKebabCase(propName))) {
247
- this.constructor.propsInit[propName] = value;
248
- }
249
- }
250
- }
251
- if (!target.constructor.propsInit) {
252
- target.constructor.propsInit = {};
253
- }
254
- target.constructor.propsInit[propName] = null;
255
- Object.defineProperty(target, propName, { get, set });
256
- };
218
+ const Toggle = () => {
219
+ return (target, propName) => {
220
+ function get() {
221
+ const getAttribute = (attrName) => {
222
+ if (this.hasAttribute(attrName)) {
223
+ const attrValue = this.getAttribute(attrName);
224
+ if (/^(true|false|^$)$/.test(attrValue)) {
225
+ return attrValue === 'true' || attrValue === '';
226
+ }
227
+ else {
228
+ return false;
229
+ }
230
+ }
231
+ return false;
232
+ };
233
+ return getAttribute(propName);
234
+ }
235
+ function set(value) {
236
+ const oldValue = value;
237
+ if (value !== null && value !== undefined) {
238
+ switch (typeof value) {
239
+ case 'boolean':
240
+ break;
241
+ case 'string':
242
+ if (/^(true|false|^$)$/.test(value)) {
243
+ value = oldValue === 'true' || oldValue === '';
244
+ }
245
+ else {
246
+ console.warn(`TypeError: Cannot set boolean toggle property '${propName}' to '${value}'`);
247
+ value = false;
248
+ }
249
+ break;
250
+ default:
251
+ throw new TypeError(`Cannot set boolean toggle property '${propName}' to '${value}'`);
252
+ }
253
+ }
254
+ if (this.__connected) {
255
+ this.props[propName] = value || false;
256
+ if (oldValue !== '' && oldValue !== null) {
257
+ this.setAttribute(propName, value);
258
+ }
259
+ else {
260
+ if (value) {
261
+ this.setAttribute(propName, '');
262
+ }
263
+ else {
264
+ this.removeAttribute(propName);
265
+ }
266
+ }
267
+ }
268
+ else {
269
+ if (!this.hasAttribute(toKebabCase(propName))) {
270
+ this.constructor.propsInit[propName] = value;
271
+ }
272
+ }
273
+ }
274
+ if (!target.constructor.propsInit) {
275
+ target.constructor.propsInit = {};
276
+ }
277
+ target.constructor.propsInit[propName] = null;
278
+ Object.defineProperty(target, propName, { get, set });
279
+ };
257
280
  };
258
281
 
259
- export { CustomElement, Watch, Prop, initializeProps, Toggle, Listen, addEventListeners, Dispatch };
282
+ export { CustomElement, Dispatch, Listen, Prop, Toggle, Watch, addEventListeners, initializeProps };
260
283
  //# sourceMappingURL=custom-elements-ts.js.map
package/esm2015/custom-elements-ts.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"custom-elements-ts.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"custom-elements-ts.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/{custom-element.d.ts → esm5/custom-element.d.ts} RENAMED
@@ -1,12 +1,12 @@
1
- export interface CustomElementMetadata {
2
- tag?: string;
3
- template?: string;
4
- templateUrl?: string;
5
- styleUrl?: string;
6
- style?: string;
7
- shadow?: boolean;
8
- }
9
- export interface KeyValue {
10
- [key: string]: any;
11
- }
12
- export declare const CustomElement: (args: CustomElementMetadata) => (target: any) => any;
1
+ export interface CustomElementMetadata {
2
+ tag?: string;
3
+ template?: string;
4
+ templateUrl?: string;
5
+ styleUrl?: string;
6
+ style?: string;
7
+ shadow?: boolean;
8
+ }
9
+ export interface KeyValue {
10
+ [key: string]: any;
11
+ }
12
+ export declare const CustomElement: (args: CustomElementMetadata) => (target: any) => any;