custom-elements-ts 0.0.17 → 0.2.0

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 (82) hide show
  1. package/.eslintrc.json +47 -0
  2. package/.github/workflows/ci.yml +49 -0
  3. package/.prettierrc +7 -0
  4. package/LICENSE +20 -0
  5. package/README.md +279 -37
  6. package/assets/readme-header.png +0 -0
  7. package/assets/social-preview.jpg +0 -0
  8. package/demos/counter/counter.element.html +1 -0
  9. package/demos/counter/counter.element.scss +234 -0
  10. package/demos/counter/counter.element.ts +68 -0
  11. package/demos/counter/index.html +205 -0
  12. package/demos/counter/index.ts +1 -0
  13. package/demos/site/code-example/code-example.element.scss +168 -0
  14. package/demos/site/code-example/code-example.element.ts +88 -0
  15. package/demos/site/event-log/event-log.element.scss +179 -0
  16. package/demos/site/event-log/event-log.element.ts +123 -0
  17. package/demos/site/favicon.svg +14 -0
  18. package/demos/site/index.html +368 -0
  19. package/demos/site/index.ts +19 -0
  20. package/demos/site/llms.txt +53 -0
  21. package/demos/site/message/message.element.scss +75 -0
  22. package/demos/site/message/message.element.ts +76 -0
  23. package/demos/site/og-image.png +0 -0
  24. package/demos/site/scroll-restoration.ts +28 -0
  25. package/demos/site/source-toggle/source-toggle.ts +88 -0
  26. package/demos/site/source-viewer/source-viewer.element.scss +292 -0
  27. package/demos/site/source-viewer/source-viewer.element.ts +138 -0
  28. package/demos/site/source-viewer/sources.generated.ts +11 -0
  29. package/demos/site/styles/site.css +1135 -0
  30. package/demos/site/styles/tokens.css +56 -0
  31. package/demos/site/toast/toast.element.scss +110 -0
  32. package/demos/site/toast/toast.element.ts +63 -0
  33. package/demos/todo-dashboard/index.html +141 -0
  34. package/demos/todo-dashboard/index.ts +4 -0
  35. package/demos/todo-dashboard/todo-dashboard.element.scss +1150 -0
  36. package/demos/todo-dashboard/todo-dashboard.element.ts +333 -0
  37. package/demos/todo-dashboard/todo-filters.element.ts +54 -0
  38. package/demos/todo-dashboard/todo-item.element.ts +127 -0
  39. package/demos/todo-dashboard/todo-stats.element.ts +189 -0
  40. package/package.json +73 -24
  41. package/src/custom-element.ts +206 -0
  42. package/src/index.ts +8 -0
  43. package/src/listen.ts +70 -0
  44. package/src/prop.ts +92 -0
  45. package/src/signal.ts +66 -0
  46. package/src/state.ts +141 -0
  47. package/src/template-runtime.ts +783 -0
  48. package/src/toggle.ts +66 -0
  49. package/src/tsconfig.json +24 -0
  50. package/src/util.ts +33 -0
  51. package/src/watch.ts +14 -0
  52. package/tests/basic.spec.ts +70 -0
  53. package/tests/custom-element.spec.ts +77 -0
  54. package/tests/dispatch.spec.ts +52 -0
  55. package/tests/init.spec.ts +94 -0
  56. package/tests/listen.spec.ts +118 -0
  57. package/tests/map-shallow-state.spec.ts +184 -0
  58. package/tests/prop.spec.ts +118 -0
  59. package/tests/signal.spec.ts +117 -0
  60. package/tests/templating-runtime.spec.ts +575 -0
  61. package/tests/toggle.spec.ts +92 -0
  62. package/tests/watch.spec.ts +183 -0
  63. package/tools/build.js +128 -0
  64. package/tools/bundle.js +167 -0
  65. package/tools/generate-sources.js +76 -0
  66. package/tools/rollup-config.js +70 -0
  67. package/tools/start.js +194 -0
  68. package/tsconfig.json +38 -0
  69. package/vite.config.mts +30 -0
  70. package/bundles/custom-elements-ts.umd.js +0 -359
  71. package/bundles/custom-elements-ts.umd.js.map +0 -1
  72. package/esm2015/custom-elements-ts.js +0 -283
  73. package/esm2015/custom-elements-ts.js.map +0 -1
  74. package/esm5/custom-element.d.ts +0 -12
  75. package/esm5/custom-elements-ts.js +0 -344
  76. package/esm5/custom-elements-ts.js.map +0 -1
  77. package/esm5/index.d.ts +0 -5
  78. package/esm5/listen.d.ts +0 -17
  79. package/esm5/prop.d.ts +0 -2
  80. package/esm5/toggle.d.ts +0 -1
  81. package/esm5/util.d.ts +0 -4
  82. package/esm5/watch.d.ts +0 -1
@@ -1,283 +0,0 @@
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;
30
- };
31
-
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
- };
73
- };
74
-
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
- }
140
- };
141
-
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
- };
203
- };
204
-
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
- };
216
- };
217
-
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
- };
280
- };
281
-
282
- export { CustomElement, Dispatch, Listen, Prop, Toggle, Watch, addEventListeners, initializeProps };
283
- //# sourceMappingURL=custom-elements-ts.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"custom-elements-ts.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,12 +0,0 @@
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,344 +0,0 @@
1
- /******************************************************************************
2
- Copyright (c) Microsoft Corporation.
3
-
4
- Permission to use, copy, modify, and/or distribute this software for any
5
- purpose with or without fee is hereby granted.
6
-
7
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
8
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
9
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
10
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
11
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
12
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
13
- PERFORMANCE OF THIS SOFTWARE.
14
- ***************************************************************************** */
15
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
16
-
17
- var extendStatics = function(d, b) {
18
- extendStatics = Object.setPrototypeOf ||
19
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
20
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
21
- return extendStatics(d, b);
22
- };
23
-
24
- function __extends(d, b) {
25
- if (typeof b !== "function" && b !== null)
26
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
27
- extendStatics(d, b);
28
- function __() { this.constructor = d; }
29
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
30
- }
31
-
32
- var __assign = function() {
33
- __assign = Object.assign || function __assign(t) {
34
- for (var s, i = 1, n = arguments.length; i < n; i++) {
35
- s = arguments[i];
36
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
37
- }
38
- return t;
39
- };
40
- return __assign.apply(this, arguments);
41
- };
42
-
43
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
44
- var e = new Error(message);
45
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
46
- };
47
-
48
- var toKebabCase = function (str) {
49
- return str
50
- .replace(/([a-z])([A-Z])/g, '$1-$2')
51
- .replace(/[\s_]+/g, '-')
52
- .toLowerCase();
53
- };
54
- var toCamelCase = function (str) {
55
- return str.toLowerCase().replace(/(-\w)/g, function (m) { return m[1].toUpperCase(); });
56
- };
57
- var toDotCase = function (str) {
58
- return str
59
- .replace(/(?!^)([A-Z])/g, ' $1')
60
- .replace(/[_\s]+(?=[a-zA-Z])/g, '.')
61
- .toLowerCase();
62
- };
63
- var tryParseInt = function (value) {
64
- if (typeof value === 'number' && Number.isInteger(value)) {
65
- return value;
66
- }
67
- if (typeof value === 'string') {
68
- var trimmed = value.trim();
69
- if (trimmed !== '') {
70
- var parsed = Number(trimmed);
71
- if (Number.isInteger(parsed) && String(parsed) === trimmed) {
72
- return parsed;
73
- }
74
- }
75
- }
76
- return value;
77
- };
78
-
79
- var Listen = function (eventName, selector) {
80
- return function (target, methodName) {
81
- if (!target.constructor.listeners) {
82
- target.constructor.listeners = [];
83
- }
84
- target.constructor.listeners.push({
85
- selector: selector,
86
- eventName: eventName,
87
- handler: target[methodName],
88
- });
89
- };
90
- };
91
- var addEventListeners = function (target) {
92
- if (target.constructor.listeners) {
93
- var targetRoot = target.shadowRoot || target;
94
- var _loop_1 = function (listener) {
95
- var eventTarget = target;
96
- if (listener.selector) {
97
- eventTarget = targetRoot.querySelector(listener.selector);
98
- }
99
- if (eventTarget) {
100
- eventTarget.addEventListener(listener.eventName, function (e) {
101
- listener.handler.call(target, e);
102
- });
103
- }
104
- };
105
- for (var _i = 0, _a = target.constructor.listeners; _i < _a.length; _i++) {
106
- var listener = _a[_i];
107
- _loop_1(listener);
108
- }
109
- }
110
- };
111
- var Dispatch = function (eventName) {
112
- return function (target, propertyName) {
113
- function get() {
114
- var self = this;
115
- return {
116
- emit: function (options) {
117
- var evtName = eventName ? eventName : toDotCase(propertyName);
118
- self.dispatchEvent(new CustomEvent(evtName, options));
119
- },
120
- };
121
- }
122
- Object.defineProperty(target, propertyName, { get: get });
123
- };
124
- };
125
-
126
- var Prop = function () {
127
- return function (target, propName) {
128
- var attrName = toKebabCase(propName);
129
- function get() {
130
- var hasOwn = Object.prototype.hasOwnProperty.call(this.props, propName);
131
- if (hasOwn) {
132
- return this.props[propName];
133
- }
134
- return this.getAttribute(attrName);
135
- }
136
- function set(value) {
137
- if (this.__connected) {
138
- var oldValue = this.props[propName];
139
- this.props[propName] = tryParseInt(value);
140
- var valueType = typeof value;
141
- var shouldReflect = valueType === 'string' || valueType === 'number' || valueType === 'boolean';
142
- if (shouldReflect) {
143
- this.setAttribute(attrName, value);
144
- }
145
- else {
146
- this.onAttributeChange(attrName, oldValue, value, false);
147
- }
148
- }
149
- else {
150
- if (!this.hasAttribute(toKebabCase(propName))) {
151
- this.constructor.propsInit[propName] = value;
152
- }
153
- }
154
- }
155
- if (!target.constructor.propsInit) {
156
- target.constructor.propsInit = {};
157
- }
158
- target.constructor.propsInit[propName] = null;
159
- Object.defineProperty(target, propName, { get: get, set: set });
160
- };
161
- };
162
- var getProps = function (target) {
163
- var watchAttributes = target.constructor.watchAttributes;
164
- var plainAttributes = __assign({}, watchAttributes);
165
- Object.keys(plainAttributes).forEach(function (v) { return (plainAttributes[v] = ''); });
166
- var cycleProps = __assign(__assign({}, plainAttributes), target.constructor.propsInit);
167
- return Object.keys(cycleProps);
168
- };
169
- var initializeProps = function (target) {
170
- var watchAttributes = target.constructor.watchAttributes;
171
- for (var _i = 0, _a = getProps(target); _i < _a.length; _i++) {
172
- var prop = _a[_i];
173
- if (watchAttributes) {
174
- if (watchAttributes[toKebabCase(prop)] === null ||
175
- watchAttributes[toKebabCase(prop)] === undefined) {
176
- watchAttributes[toKebabCase(prop)] = '';
177
- }
178
- else {
179
- var hasOwn = Object.prototype.hasOwnProperty.call(target.props, prop);
180
- var attribValue = hasOwn ? target.props[prop] : target.getAttribute(toKebabCase(prop));
181
- if (typeof target[watchAttributes[prop]] === 'function') {
182
- target[watchAttributes[prop]]({ new: attribValue });
183
- }
184
- }
185
- }
186
- if (target.constructor.propsInit[prop]) {
187
- if (!target.hasAttribute(toKebabCase(prop))) {
188
- target[prop] = target.constructor.propsInit[prop];
189
- }
190
- }
191
- }
192
- };
193
-
194
- var CustomElement = function (args) {
195
- return function (target) {
196
- var tag = args.tag || toKebabCase(target.prototype.constructor.name);
197
- var customElement = (function (_super) {
198
- __extends(class_1, _super);
199
- function class_1() {
200
- var _this = _super.call(this) || this;
201
- _this.__connected = false;
202
- _this.props = {};
203
- _this.showShadowRoot =
204
- args.shadow === undefined || args.shadow === null ? true : args.shadow;
205
- if (!_this.shadowRoot && _this.showShadowRoot) {
206
- _this.attachShadow({ mode: 'open' });
207
- }
208
- return _this;
209
- }
210
- Object.defineProperty(class_1, "observedAttributes", {
211
- get: function () {
212
- return Object.keys(this.propsInit || {}).map(function (x) { return toKebabCase(x); });
213
- },
214
- enumerable: false,
215
- configurable: true
216
- });
217
- class_1.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
218
- this.onAttributeChange(name, oldValue, newValue);
219
- };
220
- class_1.prototype.onAttributeChange = function (name, oldValue, newValue, set) {
221
- if (set === void 0) { set = true; }
222
- if (oldValue !== newValue) {
223
- if (set) {
224
- var propName = toCamelCase(name);
225
- this[propName] = newValue;
226
- }
227
- var watchAttributes = this.constructor.watchAttributes;
228
- if (watchAttributes && watchAttributes[name]) {
229
- var methodToCall = watchAttributes[name];
230
- if (this.__connected) {
231
- if (typeof this[methodToCall] === 'function') {
232
- this[methodToCall]({ old: oldValue, new: newValue });
233
- }
234
- }
235
- }
236
- }
237
- };
238
- class_1.prototype.connectedCallback = function () {
239
- this.__render();
240
- var parentProto = Object.getPrototypeOf(Object.getPrototypeOf(this)) || null;
241
- if (parentProto && typeof parentProto.connectedCallback === 'function') {
242
- parentProto.connectedCallback.call(this);
243
- }
244
- this.__connected = true;
245
- addEventListeners(this);
246
- initializeProps(this);
247
- };
248
- class_1.prototype.__render = function () {
249
- if (this.__connected)
250
- return;
251
- var template = document.createElement('template');
252
- var style = "".concat(args.style ? "<style>".concat(args.style, "</style>") : '');
253
- template.innerHTML = "".concat(style).concat(args.template ? args.template : '');
254
- (this.showShadowRoot ? this.shadowRoot : this).appendChild(document.importNode(template.content, true));
255
- };
256
- return class_1;
257
- }(target));
258
- if (!customElements.get(tag)) {
259
- customElements.define(tag, customElement);
260
- }
261
- return customElement;
262
- };
263
- };
264
-
265
- var Watch = function (attrName) {
266
- return function (target, propertyName) {
267
- if (!target.constructor.watchAttributes) {
268
- target.constructor.watchAttributes = {};
269
- }
270
- target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
271
- if (!target.constructor.propsInit) {
272
- target.constructor.propsInit = {};
273
- }
274
- target.constructor.propsInit[attrName] = null;
275
- };
276
- };
277
-
278
- var Toggle = function () {
279
- return function (target, propName) {
280
- function get() {
281
- var _this = this;
282
- var getAttribute = function (attrName) {
283
- if (_this.hasAttribute(attrName)) {
284
- var attrValue = _this.getAttribute(attrName);
285
- if (/^(true|false|^$)$/.test(attrValue)) {
286
- return attrValue === 'true' || attrValue === '';
287
- }
288
- else {
289
- return false;
290
- }
291
- }
292
- return false;
293
- };
294
- return getAttribute(propName);
295
- }
296
- function set(value) {
297
- var oldValue = value;
298
- if (value !== null && value !== undefined) {
299
- switch (typeof value) {
300
- case 'boolean':
301
- break;
302
- case 'string':
303
- if (/^(true|false|^$)$/.test(value)) {
304
- value = oldValue === 'true' || oldValue === '';
305
- }
306
- else {
307
- console.warn("TypeError: Cannot set boolean toggle property '".concat(propName, "' to '").concat(value, "'"));
308
- value = false;
309
- }
310
- break;
311
- default:
312
- throw new TypeError("Cannot set boolean toggle property '".concat(propName, "' to '").concat(value, "'"));
313
- }
314
- }
315
- if (this.__connected) {
316
- this.props[propName] = value || false;
317
- if (oldValue !== '' && oldValue !== null) {
318
- this.setAttribute(propName, value);
319
- }
320
- else {
321
- if (value) {
322
- this.setAttribute(propName, '');
323
- }
324
- else {
325
- this.removeAttribute(propName);
326
- }
327
- }
328
- }
329
- else {
330
- if (!this.hasAttribute(toKebabCase(propName))) {
331
- this.constructor.propsInit[propName] = value;
332
- }
333
- }
334
- }
335
- if (!target.constructor.propsInit) {
336
- target.constructor.propsInit = {};
337
- }
338
- target.constructor.propsInit[propName] = null;
339
- Object.defineProperty(target, propName, { get: get, set: set });
340
- };
341
- };
342
-
343
- export { CustomElement, Dispatch, Listen, Prop, Toggle, Watch, addEventListeners, initializeProps };
344
- //# sourceMappingURL=custom-elements-ts.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"custom-elements-ts.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/esm5/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export * from './custom-element';
2
- export * from './watch';
3
- export * from './prop';
4
- export * from './toggle';
5
- export * from './listen';
package/esm5/listen.d.ts DELETED
@@ -1,17 +0,0 @@
1
- interface ListenerMetadata {
2
- eventName: string;
3
- handler: (e: Event) => void;
4
- selector?: string;
5
- }
6
- interface CustomEventOptions {
7
- bubbles?: boolean;
8
- composed?: boolean;
9
- detail?: any;
10
- }
11
- interface DispatchEmitter {
12
- emit(options?: CustomEventOptions): void;
13
- }
14
- declare const Listen: (eventName: string, selector?: string) => (target: any, methodName: string) => void;
15
- declare const addEventListeners: (target: any) => void;
16
- declare const Dispatch: (eventName?: string) => (target: HTMLElement, propertyName: string) => void;
17
- export { Listen, addEventListeners, DispatchEmitter, Dispatch, CustomEventOptions, ListenerMetadata, };
package/esm5/prop.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const Prop: () => any;
2
- export declare const initializeProps: (target: any) => void;
package/esm5/toggle.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const Toggle: () => any;
package/esm5/util.d.ts DELETED
@@ -1,4 +0,0 @@
1
- export declare const toKebabCase: (str: string) => string;
2
- export declare const toCamelCase: (str: string) => string;
3
- export declare const toDotCase: (str: string) => string;
4
- export declare const tryParseInt: (value: unknown) => unknown;
package/esm5/watch.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const Watch: (attrName: string) => (target: any, propertyName: string) => void;