@rhtml/custom-attributes 0.0.108 → 0.0.111
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.
- package/README.md +112 -0
- package/dist/index.d.ts +8 -4
- package/dist/index.js +31 -8
- package/dist/index.js.map +1 -1
- package/package.json +2 -4
- package/src/index.ts +46 -14
package/README.md
CHANGED
|
@@ -177,6 +177,9 @@ export class Hoverable extends Attribute {
|
|
|
177
177
|
|
|
178
178
|
#### Observing properties defined with @Input decorator
|
|
179
179
|
|
|
180
|
+
Sometimes we want our Modifier to be more extensible and we want to create complex
|
|
181
|
+
logic like for example to listen for specific property changes inside of our modifier
|
|
182
|
+
|
|
180
183
|
```typescript
|
|
181
184
|
import { Modifier, Input } from '@rhtml/custom-attributes';
|
|
182
185
|
import { HostListener } from '@rhtml/decorators';
|
|
@@ -194,3 +197,112 @@ export class Hoverable extends Attribute {
|
|
|
194
197
|
}
|
|
195
198
|
}
|
|
196
199
|
```
|
|
200
|
+
|
|
201
|
+
#### Advanced usage without Decorators
|
|
202
|
+
|
|
203
|
+
```typescript
|
|
204
|
+
import { Attribute, CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
205
|
+
|
|
206
|
+
export class Animation extends Attribute {
|
|
207
|
+
static options = {
|
|
208
|
+
selector: 'animated',
|
|
209
|
+
registry(this: HTMLElement) {
|
|
210
|
+
return new CustomAttributeRegistry(this);
|
|
211
|
+
},
|
|
212
|
+
observedAttributes: ['delay']
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
get delay() {
|
|
216
|
+
return this.element.getAttribute('delay');
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
OnInit() {
|
|
220
|
+
this.modify();
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
OnDestroy() {
|
|
224
|
+
this.element.classList.remove('animated', this.value);
|
|
225
|
+
this.element.style.animationDelay = null;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
OnUpdate() {
|
|
229
|
+
this.modify();
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
OnUpdateAttribute() {
|
|
233
|
+
this.modify();
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
private modify() {
|
|
237
|
+
this.element.classList.add('animated', this.value);
|
|
238
|
+
this.element.style.animationDelay = this.delay;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
#### Same example but with Decorators
|
|
244
|
+
|
|
245
|
+
```typescript
|
|
246
|
+
import {
|
|
247
|
+
Attribute,
|
|
248
|
+
CustomAttributeRegistry,
|
|
249
|
+
Input,
|
|
250
|
+
Modifier
|
|
251
|
+
} from '@rhtml/custom-attributes';
|
|
252
|
+
import { Animations, AnimationsType } from './animate.css';
|
|
253
|
+
|
|
254
|
+
interface Styles {
|
|
255
|
+
animationDelay: string;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
@Modifier({
|
|
259
|
+
selector: 'animated',
|
|
260
|
+
registry(this: HTMLElement) {
|
|
261
|
+
return new CustomAttributeRegistry(this);
|
|
262
|
+
}
|
|
263
|
+
})
|
|
264
|
+
export class Animation extends Attribute<Styles> {
|
|
265
|
+
@Input({ observe: true })
|
|
266
|
+
delay: string;
|
|
267
|
+
|
|
268
|
+
value: AnimationsType;
|
|
269
|
+
|
|
270
|
+
OnInit() {
|
|
271
|
+
this.pushStylesToParent();
|
|
272
|
+
this.modify();
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
OnDestroy() {
|
|
276
|
+
this.element.classList.remove('animated', this.value);
|
|
277
|
+
this.setStyles({ animationDelay: null })(this.element);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
OnUpdate() {
|
|
281
|
+
this.modify();
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
OnUpdateAttribute() {
|
|
285
|
+
this.modify();
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
private modify() {
|
|
289
|
+
this.element.classList.add('animated', this.value);
|
|
290
|
+
this.setStyles({ animationDelay: this.delay })(this.element);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
private pushStylesToParent() {
|
|
294
|
+
const style = document.createElement('style');
|
|
295
|
+
style.innerHTML = `${Animations}`;
|
|
296
|
+
const root = this.parent.shadowRoot ?? this.parent;
|
|
297
|
+
root.prepend(style);
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
By changing `delay` attribute because we use `observe: true` method `OnUpdateAttribute` will be triggered
|
|
303
|
+
|
|
304
|
+
```html
|
|
305
|
+
<h2 animated="slideInLeft" delay="1s">
|
|
306
|
+
My Animated Element
|
|
307
|
+
</h2>
|
|
308
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
export declare type
|
|
1
|
+
export declare type C<T> = new (...args: never[]) => T;
|
|
2
|
+
export interface Constructor<T> extends C<T> {
|
|
3
|
+
options: ModifierOptions;
|
|
4
|
+
}
|
|
2
5
|
interface ModifierOptions {
|
|
3
6
|
selector: string;
|
|
4
7
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
8
|
+
observedAttributes?: string[];
|
|
5
9
|
}
|
|
6
10
|
interface InputOptions {
|
|
7
11
|
/**
|
|
@@ -13,7 +17,7 @@ interface InputOptions {
|
|
|
13
17
|
* Decorator @Input
|
|
14
18
|
* Used to get attribute from element
|
|
15
19
|
*/
|
|
16
|
-
export declare const Input: (options?: InputOptions) => (target:
|
|
20
|
+
export declare const Input: (options?: InputOptions) => (target: any, memberName: string) => void;
|
|
17
21
|
/**
|
|
18
22
|
* Decorator @Modifier
|
|
19
23
|
* Accepts parameter options with selector and registry
|
|
@@ -25,7 +29,7 @@ export declare abstract class Attribute<T = {}> {
|
|
|
25
29
|
element?: HTMLElement;
|
|
26
30
|
value?: string;
|
|
27
31
|
selector?: string;
|
|
28
|
-
parent?: HTMLElement
|
|
32
|
+
parent?: HTMLElement;
|
|
29
33
|
setStyles(keys: T): (div: HTMLElement | Element | HTMLDivElement) => void;
|
|
30
34
|
OnInit(): void;
|
|
31
35
|
OnDestroy(): void;
|
|
@@ -37,7 +41,7 @@ export declare class CustomAttributeRegistry {
|
|
|
37
41
|
private _attrMap;
|
|
38
42
|
private _elementMap;
|
|
39
43
|
private observer;
|
|
40
|
-
constructor(parent: HTMLElement
|
|
44
|
+
constructor(parent: HTMLElement);
|
|
41
45
|
define(attrName: string, Constructor: Constructor<Attribute>): void;
|
|
42
46
|
get(element: HTMLElement, attrName: string): Attribute<{}>;
|
|
43
47
|
private getConstructor;
|
package/dist/index.js
CHANGED
|
@@ -7,7 +7,7 @@ const noop = function () {
|
|
|
7
7
|
const observe = (target, memberName) => {
|
|
8
8
|
const prototype = target.constructor.prototype;
|
|
9
9
|
const OnInit = prototype.OnInit || noop;
|
|
10
|
-
const OnDestroy = prototype.
|
|
10
|
+
const OnDestroy = prototype.OnDestroy || noop;
|
|
11
11
|
const OnUpdateAttribute = prototype.OnUpdateAttribute || noop;
|
|
12
12
|
let observer;
|
|
13
13
|
prototype.OnInit = function () {
|
|
@@ -16,7 +16,10 @@ const observe = (target, memberName) => {
|
|
|
16
16
|
if (observer) {
|
|
17
17
|
observer.disconnect();
|
|
18
18
|
}
|
|
19
|
-
observer = new MutationObserver(() =>
|
|
19
|
+
observer = new MutationObserver(() => {
|
|
20
|
+
OnUpdateAttribute.call(this, memberName, element.getAttribute(memberName));
|
|
21
|
+
target[memberName] = element.getAttribute(memberName);
|
|
22
|
+
});
|
|
20
23
|
observer.observe(element, {
|
|
21
24
|
attributeFilter: [memberName],
|
|
22
25
|
attributes: true
|
|
@@ -33,12 +36,26 @@ const observe = (target, memberName) => {
|
|
|
33
36
|
* Used to get attribute from element
|
|
34
37
|
*/
|
|
35
38
|
exports.Input = (options) => (target, memberName) => {
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
const OnInit = target.OnInit || noop;
|
|
40
|
+
Object.defineProperty(target, 'OnInit', {
|
|
41
|
+
value() {
|
|
38
42
|
var _a;
|
|
43
|
+
let originalValue = this[memberName];
|
|
39
44
|
const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
|
|
40
|
-
|
|
41
|
-
|
|
45
|
+
Object.defineProperty(this, memberName, {
|
|
46
|
+
get: function () {
|
|
47
|
+
originalValue = element.getAttribute(memberName.toLowerCase());
|
|
48
|
+
return originalValue;
|
|
49
|
+
},
|
|
50
|
+
set(value) {
|
|
51
|
+
element.setAttribute(memberName.toLowerCase(), value);
|
|
52
|
+
originalValue = value;
|
|
53
|
+
},
|
|
54
|
+
configurable: true
|
|
55
|
+
});
|
|
56
|
+
return OnInit.call(this);
|
|
57
|
+
},
|
|
58
|
+
configurable: true
|
|
42
59
|
});
|
|
43
60
|
if (options === null || options === void 0 ? void 0 : options.observe) {
|
|
44
61
|
observe(target, memberName);
|
|
@@ -166,6 +183,7 @@ class CustomAttributeRegistry {
|
|
|
166
183
|
this._elementMap.delete(element);
|
|
167
184
|
}
|
|
168
185
|
found(attributeName, el, oldVal) {
|
|
186
|
+
var _a, _b;
|
|
169
187
|
let map = this._elementMap.get(el);
|
|
170
188
|
if (!map) {
|
|
171
189
|
map = new Map();
|
|
@@ -174,8 +192,13 @@ class CustomAttributeRegistry {
|
|
|
174
192
|
const modifier = map.get(attributeName);
|
|
175
193
|
const attribute = el.getAttribute(attributeName);
|
|
176
194
|
if (!modifier) {
|
|
177
|
-
const
|
|
178
|
-
const modifier = new
|
|
195
|
+
const Modifier = this.getConstructor(attributeName);
|
|
196
|
+
const modifier = new Modifier();
|
|
197
|
+
if ((_b = (_a = Modifier.options) === null || _a === void 0 ? void 0 : _a.observedAttributes) === null || _b === void 0 ? void 0 : _b.length) {
|
|
198
|
+
for (const observedAttribute of Modifier.options.observedAttributes) {
|
|
199
|
+
observe(modifier, observedAttribute);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
179
202
|
map.set(attributeName, modifier);
|
|
180
203
|
modifier.element = el;
|
|
181
204
|
modifier.selector = attributeName;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rhtml/custom-attributes",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.111",
|
|
4
4
|
"description": "Custom Attribute Registry",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "npx parcel ./examples/index.html --out-dir build/examples",
|
|
@@ -15,9 +15,7 @@
|
|
|
15
15
|
"type": "git",
|
|
16
16
|
"url": "git@github.com:rhtml/rhtml.git"
|
|
17
17
|
},
|
|
18
|
-
"dependencies": {
|
|
19
|
-
"@rxdi/lit-html": "^0.7.133"
|
|
20
|
-
},
|
|
18
|
+
"dependencies": {},
|
|
21
19
|
"devDependencies": {
|
|
22
20
|
"eslint": "^6.7.2",
|
|
23
21
|
"eslint-config-prettier": "^6.7.0",
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
export type
|
|
1
|
+
export type C<T> = new (...args: never[]) => T;
|
|
2
|
+
|
|
3
|
+
export interface Constructor<T> extends C<T> {
|
|
4
|
+
options: ModifierOptions;
|
|
5
|
+
}
|
|
2
6
|
|
|
3
7
|
const noop = function() {
|
|
4
8
|
/* */
|
|
@@ -7,7 +11,9 @@ const noop = function() {
|
|
|
7
11
|
interface ModifierOptions {
|
|
8
12
|
selector: string;
|
|
9
13
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
14
|
+
observedAttributes?: string[];
|
|
10
15
|
}
|
|
16
|
+
|
|
11
17
|
interface InputOptions {
|
|
12
18
|
/**
|
|
13
19
|
* If enabled will trigger OnUpdate method on the Attribute
|
|
@@ -18,7 +24,7 @@ interface InputOptions {
|
|
|
18
24
|
const observe = (target: unknown, memberName: string) => {
|
|
19
25
|
const prototype = target.constructor.prototype;
|
|
20
26
|
const OnInit = prototype.OnInit || noop;
|
|
21
|
-
const OnDestroy = prototype.
|
|
27
|
+
const OnDestroy = prototype.OnDestroy || noop;
|
|
22
28
|
const OnUpdateAttribute = prototype.OnUpdateAttribute || noop;
|
|
23
29
|
|
|
24
30
|
let observer: MutationObserver;
|
|
@@ -27,9 +33,14 @@ const observe = (target: unknown, memberName: string) => {
|
|
|
27
33
|
if (observer) {
|
|
28
34
|
observer.disconnect();
|
|
29
35
|
}
|
|
30
|
-
observer = new MutationObserver(() =>
|
|
31
|
-
OnUpdateAttribute.call(
|
|
32
|
-
|
|
36
|
+
observer = new MutationObserver(() => {
|
|
37
|
+
OnUpdateAttribute.call(
|
|
38
|
+
this,
|
|
39
|
+
memberName,
|
|
40
|
+
element.getAttribute(memberName)
|
|
41
|
+
);
|
|
42
|
+
target[memberName] = element.getAttribute(memberName);
|
|
43
|
+
});
|
|
33
44
|
observer.observe(element, {
|
|
34
45
|
attributeFilter: [memberName],
|
|
35
46
|
attributes: true
|
|
@@ -47,15 +58,31 @@ const observe = (target: unknown, memberName: string) => {
|
|
|
47
58
|
* Used to get attribute from element
|
|
48
59
|
*/
|
|
49
60
|
export const Input = (options?: InputOptions) => (
|
|
50
|
-
target
|
|
61
|
+
target,
|
|
51
62
|
memberName: string
|
|
52
63
|
) => {
|
|
53
|
-
|
|
54
|
-
|
|
64
|
+
const OnInit = target.OnInit || noop;
|
|
65
|
+
Object.defineProperty(target, 'OnInit', {
|
|
66
|
+
value() {
|
|
67
|
+
let originalValue = this[memberName];
|
|
68
|
+
|
|
55
69
|
const element = this.element ?? this;
|
|
56
|
-
|
|
57
|
-
|
|
70
|
+
Object.defineProperty(this, memberName, {
|
|
71
|
+
get: function() {
|
|
72
|
+
originalValue = element.getAttribute(memberName.toLowerCase());
|
|
73
|
+
return originalValue;
|
|
74
|
+
},
|
|
75
|
+
set(value) {
|
|
76
|
+
element.setAttribute(memberName.toLowerCase(), value);
|
|
77
|
+
originalValue = value;
|
|
78
|
+
},
|
|
79
|
+
configurable: true
|
|
80
|
+
});
|
|
81
|
+
return OnInit.call(this);
|
|
82
|
+
},
|
|
83
|
+
configurable: true
|
|
58
84
|
});
|
|
85
|
+
|
|
59
86
|
if (options?.observe) {
|
|
60
87
|
observe(target, memberName);
|
|
61
88
|
}
|
|
@@ -79,7 +106,7 @@ export abstract class Attribute<T = {}> {
|
|
|
79
106
|
public element?: HTMLElement;
|
|
80
107
|
public value?: string;
|
|
81
108
|
public selector?: string;
|
|
82
|
-
public parent?: HTMLElement
|
|
109
|
+
public parent?: HTMLElement;
|
|
83
110
|
setStyles(keys: T) {
|
|
84
111
|
return (div: HTMLElement | Element | HTMLDivElement) => {
|
|
85
112
|
for (const [key, value] of Object.entries(keys)) {
|
|
@@ -111,7 +138,7 @@ export class CustomAttributeRegistry {
|
|
|
111
138
|
> = new WeakMap();
|
|
112
139
|
private observer: MutationObserver;
|
|
113
140
|
|
|
114
|
-
constructor(private parent: HTMLElement
|
|
141
|
+
constructor(private parent: HTMLElement) {
|
|
115
142
|
if (!parent) {
|
|
116
143
|
throw new Error('Must be given a parent element');
|
|
117
144
|
}
|
|
@@ -215,8 +242,13 @@ export class CustomAttributeRegistry {
|
|
|
215
242
|
const attribute = el.getAttribute(attributeName);
|
|
216
243
|
|
|
217
244
|
if (!modifier) {
|
|
218
|
-
const
|
|
219
|
-
const modifier = new
|
|
245
|
+
const Modifier = this.getConstructor(attributeName);
|
|
246
|
+
const modifier = new Modifier();
|
|
247
|
+
if (Modifier.options?.observedAttributes?.length) {
|
|
248
|
+
for (const observedAttribute of Modifier.options.observedAttributes) {
|
|
249
|
+
observe(modifier, observedAttribute);
|
|
250
|
+
}
|
|
251
|
+
}
|
|
220
252
|
map.set(attributeName, modifier);
|
|
221
253
|
modifier.element = el;
|
|
222
254
|
modifier.selector = attributeName;
|