@rhtml/custom-attributes 0.0.102 → 0.0.105
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 +36 -17
- package/dist/index.d.ts +12 -0
- package/dist/index.js +50 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +62 -1
package/README.md
CHANGED
|
@@ -37,20 +37,19 @@ class BackgroundColor extends Attribute {
|
|
|
37
37
|
customAttributes.define('background', BackgroundColor);
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
#### Usage inside @rxdi/lit-html with custom registry
|
|
40
|
+
#### Usage inside @rxdi/lit-html with custom registry and @Modifier decorator
|
|
41
41
|
|
|
42
42
|
```typescript
|
|
43
43
|
import { Component, LitElement, html } from '@rxdi/lit-html';
|
|
44
|
-
import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
44
|
+
import { Modifier, CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
registry: new CustomAttributeRegistry(this.shadowRoot)
|
|
51
|
-
};
|
|
46
|
+
@Modifier({
|
|
47
|
+
selector: 'background',
|
|
48
|
+
registry(this) {
|
|
49
|
+
return new CustomAttributeRegistry(this.shadowRoot);
|
|
52
50
|
}
|
|
53
|
-
|
|
51
|
+
})
|
|
52
|
+
export class BackgroundColor extends Attribute {
|
|
54
53
|
OnInit() {
|
|
55
54
|
console.log('Attribute initialized');
|
|
56
55
|
this.setColor();
|
|
@@ -76,7 +75,7 @@ export class BackgroundColor extends Attribute {
|
|
|
76
75
|
modifiers: [BackgroundColor],
|
|
77
76
|
template(this: HomeComponent) {
|
|
78
77
|
return html`
|
|
79
|
-
<div
|
|
78
|
+
<div background="red">Background</div>
|
|
80
79
|
`;
|
|
81
80
|
}
|
|
82
81
|
})
|
|
@@ -116,13 +115,13 @@ export class BackgroundColor extends Attribute {
|
|
|
116
115
|
}
|
|
117
116
|
}
|
|
118
117
|
|
|
119
|
-
@Component({
|
|
118
|
+
@Component<HomeComponent>({
|
|
120
119
|
selector: 'home-component',
|
|
121
|
-
registry(this
|
|
120
|
+
registry(this) {
|
|
122
121
|
return new CustomAttributeRegistry(this.shadowRoot);
|
|
123
122
|
},
|
|
124
123
|
modifiers: [BackgroundColor],
|
|
125
|
-
template(this
|
|
124
|
+
template(this) {
|
|
126
125
|
return html`
|
|
127
126
|
<div myAttribute="red">Background</div>
|
|
128
127
|
`;
|
|
@@ -131,7 +130,7 @@ export class BackgroundColor extends Attribute {
|
|
|
131
130
|
export class HomeComponent extends LitElement {}
|
|
132
131
|
```
|
|
133
132
|
|
|
134
|
-
#### Decorator @CustomAttribute or @Modifier
|
|
133
|
+
#### Decorator @CustomAttribute or @Modifier there are the same
|
|
135
134
|
|
|
136
135
|
There is a way to define `options` static method as a typescript decorator
|
|
137
136
|
|
|
@@ -152,10 +151,10 @@ export class BackgroundColor extends Attribute {}
|
|
|
152
151
|
#### Modifier accepts also decorators from @rhtml/decorators
|
|
153
152
|
|
|
154
153
|
```typescript
|
|
155
|
-
import {
|
|
156
|
-
import {
|
|
154
|
+
import { Modifier, Input } from '@rhtml/custom-attributes';
|
|
155
|
+
import { HostListener } from '@rhtml/decorators';
|
|
157
156
|
|
|
158
|
-
@
|
|
157
|
+
@Modifier({
|
|
159
158
|
selector: 'hover'
|
|
160
159
|
})
|
|
161
160
|
export class Hoverable extends Attribute {
|
|
@@ -177,3 +176,23 @@ export class Hoverable extends Attribute {
|
|
|
177
176
|
```html
|
|
178
177
|
<div hover myProperty="123">Lorem ipsum dolor</div>
|
|
179
178
|
```
|
|
179
|
+
|
|
180
|
+
#### Observing properties defined with @Input decorator
|
|
181
|
+
|
|
182
|
+
```typescript
|
|
183
|
+
import { Modifier, Input } from '@rhtml/custom-attributes';
|
|
184
|
+
import { HostListener } from '@rhtml/decorators';
|
|
185
|
+
|
|
186
|
+
@Modifier({
|
|
187
|
+
selector: 'hover'
|
|
188
|
+
})
|
|
189
|
+
export class Hoverable extends Attribute {
|
|
190
|
+
@Input({ observe: true })
|
|
191
|
+
myProperty: string;
|
|
192
|
+
|
|
193
|
+
OnUpdateAttribute(name: string, value: string) {
|
|
194
|
+
/* This will be triggered on every update of the attribute myProperty */
|
|
195
|
+
console.log(this.myProperty);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,17 @@ interface ModifierOptions {
|
|
|
7
7
|
selector: string;
|
|
8
8
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
9
9
|
}
|
|
10
|
+
interface InputOptions {
|
|
11
|
+
/**
|
|
12
|
+
* If enabled will trigger OnUpdate method on the Attribute
|
|
13
|
+
* */
|
|
14
|
+
observe: true;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Decorator @Input
|
|
18
|
+
* Used to get attribute from element
|
|
19
|
+
*/
|
|
20
|
+
export declare const Input: (options?: InputOptions) => (target: unknown, memberName: string) => void;
|
|
10
21
|
/**
|
|
11
22
|
* Decorator @Modifier
|
|
12
23
|
* Accepts parameter options with selector and registry
|
|
@@ -23,6 +34,7 @@ export declare abstract class Attribute<T = {}> {
|
|
|
23
34
|
OnInit(): void;
|
|
24
35
|
OnDestroy(): void;
|
|
25
36
|
OnUpdate(_oldValue: string, _newValue: string): void;
|
|
37
|
+
OnUpdateAttribute(_name: string, _value: string): void;
|
|
26
38
|
}
|
|
27
39
|
export declare class CustomAttributeRegistry {
|
|
28
40
|
private parent;
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,49 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.CustomAttributeRegistry = exports.Attribute = exports.CustomAttribute = exports.Modifier = void 0;
|
|
3
|
+
exports.CustomAttributeRegistry = exports.Attribute = exports.CustomAttribute = exports.Modifier = exports.Input = void 0;
|
|
4
|
+
const noop = function () {
|
|
5
|
+
/* */
|
|
6
|
+
};
|
|
7
|
+
const observe = (target, memberName) => {
|
|
8
|
+
const prototype = target.constructor.prototype;
|
|
9
|
+
const OnInit = prototype.OnInit || noop;
|
|
10
|
+
const OnDestroy = prototype.OnInit || noop;
|
|
11
|
+
const OnUpdateAttribute = prototype.OnUpdateAttribute || noop;
|
|
12
|
+
let observer;
|
|
13
|
+
prototype.OnInit = function () {
|
|
14
|
+
var _a;
|
|
15
|
+
const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
|
|
16
|
+
if (observer) {
|
|
17
|
+
observer.disconnect();
|
|
18
|
+
}
|
|
19
|
+
observer = new MutationObserver(() => OnUpdateAttribute.call(this, memberName, element.getAttribute(memberName)));
|
|
20
|
+
observer.observe(element, {
|
|
21
|
+
attributeFilter: [memberName],
|
|
22
|
+
attributes: true
|
|
23
|
+
});
|
|
24
|
+
return OnInit.call(this);
|
|
25
|
+
};
|
|
26
|
+
prototype.OnDestroy = function () {
|
|
27
|
+
observer.disconnect();
|
|
28
|
+
return OnDestroy.call(this);
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Decorator @Input
|
|
33
|
+
* Used to get attribute from element
|
|
34
|
+
*/
|
|
35
|
+
exports.Input = (options) => (target, memberName) => {
|
|
36
|
+
Object.defineProperty(target, memberName, {
|
|
37
|
+
get: function () {
|
|
38
|
+
var _a;
|
|
39
|
+
const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
|
|
40
|
+
return element.getAttribute(memberName.toLowerCase());
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
if (options === null || options === void 0 ? void 0 : options.observe) {
|
|
44
|
+
observe(target, memberName);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
4
47
|
/**
|
|
5
48
|
* Decorator @Modifier
|
|
6
49
|
* Accepts parameter options with selector and registry
|
|
@@ -36,6 +79,10 @@ class Attribute {
|
|
|
36
79
|
OnUpdate(_oldValue, _newValue) {
|
|
37
80
|
/* */
|
|
38
81
|
}
|
|
82
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
83
|
+
OnUpdateAttribute(_name, _value) {
|
|
84
|
+
/* */
|
|
85
|
+
}
|
|
39
86
|
}
|
|
40
87
|
exports.Attribute = Attribute;
|
|
41
88
|
class CustomAttributeRegistry {
|
|
@@ -62,6 +109,7 @@ class CustomAttributeRegistry {
|
|
|
62
109
|
return this._attrMap.get(attrName.toLowerCase());
|
|
63
110
|
}
|
|
64
111
|
observe() {
|
|
112
|
+
var _a, _b;
|
|
65
113
|
this.observer = new MutationObserver(mutations => {
|
|
66
114
|
for (const mutation of mutations) {
|
|
67
115
|
if (mutation.type === 'attributes') {
|
|
@@ -80,7 +128,7 @@ class CustomAttributeRegistry {
|
|
|
80
128
|
}
|
|
81
129
|
}
|
|
82
130
|
});
|
|
83
|
-
this.observer.observe(this.parent, {
|
|
131
|
+
this.observer.observe((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a['shadowRoot']) !== null && _b !== void 0 ? _b : this.parent, {
|
|
84
132
|
childList: true,
|
|
85
133
|
subtree: true,
|
|
86
134
|
attributes: true,
|
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":";;;AAEA,MAAM,IAAI,GAAG;IACX,MAAM;AACR,CAAC,CAAC;AAkBF,MAAM,OAAO,GAAG,CAAC,MAAe,EAAE,UAAkB,EAAE,EAAE;IACtD,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC;IACxC,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC;IAC3C,MAAM,iBAAiB,GAAG,SAAS,CAAC,iBAAiB,IAAI,IAAI,CAAC;IAE9D,IAAI,QAA0B,CAAC;IAC/B,SAAS,CAAC,MAAM,GAAG;;QACjB,MAAM,OAAO,SAAG,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;QACrC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,UAAU,EAAE,CAAC;SACvB;QACD,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CACnC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAC3E,CAAC;QACF,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;YACxB,eAAe,EAAE,CAAC,UAAU,CAAC;YAC7B,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,SAAS,CAAC,SAAS,GAAG;QACpB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACtB,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACU,QAAA,KAAK,GAAG,CAAC,OAAsB,EAAE,EAAE,CAAC,CAC/C,MAAe,EACf,UAAkB,EAClB,EAAE;IACF,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE;QACxC,GAAG,EAAE;;YACH,MAAM,OAAO,SAAG,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;YACrC,OAAO,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;QACxD,CAAC;KACF,CAAC,CAAC;IACH,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,EAAE;QACpB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KAC7B;AACH,CAAC,CAAC;AAEF;;;GAGG;AACU,QAAA,QAAQ,GAAG,CAAC,OAAwB,EAAE,EAAE;IACnD,OAAO,CAAC,MAAgB,EAAE,EAAE;QAC1B,MAAM,CAAC,SAAS,CAAC,GAAG;;YAClB,uCACK,OAAO,KACV,QAAQ,QAAE,OAAO,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,KACrC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,iEAAiE;AACpD,QAAA,eAAe,GAAG,gBAAQ,CAAC;AAExC,MAAsB,SAAS;IACtB,MAAM,CAAC,OAAO;QACnB,OAAO;IACT,CAAC;IAKD,SAAS,CAAC,IAAO;QACf,OAAO,CAAC,GAA2C,EAAE,EAAE;YACrD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAC/C,GAAG,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;aAC3B;QACH,CAAC,CAAC;IACJ,CAAC;IACD,MAAM;QACJ,KAAK;IACP,CAAC;IACD,SAAS;QACP,KAAK;IACP,CAAC;IACD,6DAA6D;IAC7D,QAAQ,CAAC,SAAiB,EAAE,SAAiB;QAC3C,KAAK;IACP,CAAC;IACD,6DAA6D;IAC7D,iBAAiB,CAAC,KAAa,EAAE,MAAc;QAC7C,KAAK;IACP,CAAC;CACF;AA7BD,8BA6BC;AAED,MAAa,uBAAuB;IAQlC,YAAoB,MAA2C;QAA3C,WAAM,GAAN,MAAM,CAAqC;QAPvD,aAAQ,GAAwC,IAAI,GAAG,EAAE,CAAC;QAC1D,gBAAW,GAGf,IAAI,OAAO,EAAE,CAAC;QAIhB,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;SACnD;QACD,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,MAAM,CAAC,QAAgB,EAAE,WAAmC;QAC1D,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAED,GAAG,CAAC,OAAoB,EAAE,QAAgB;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG;YAAE,OAAO;QACjB,OAAO,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IACzC,CAAC;IAEO,cAAc,CAAC,QAAgB;QACrC,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IACnD,CAAC;IAEO,OAAO;;QACb,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YAC/C,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE;gBAChC,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBAClC,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;oBACzD,IAAI,IAAI,EAAE;wBACR,IAAI,CAAC,KAAK,CACR,QAAQ,CAAC,aAAa,EACtB,QAAQ,CAAC,MAAe,EACxB,QAAQ,CAAC,QAAQ,CAClB,CAAC;qBACH;iBACF;qBAAM;oBACL,KAAK,MAAM,IAAI,IAAI,QAAQ,CAAC,YAAY,EAAE;wBACxC,IAAI,CAAC,SAAS,CAAC,IAAa,CAAC,CAAC;qBAC/B;oBACD,KAAK,MAAM,IAAI,IAAI,QAAQ,CAAC,UAAU,EAAE;wBACtC,IAAI,CAAC,cAAc,CAAC,IAAa,CAAC,CAAC;qBACpC;iBACF;aACF;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,aAAC,IAAI,CAAC,MAAM,0CAAG,YAAY,oCAAK,IAAI,CAAC,MAAM,EAAE;YAChE,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI;SACxB,CAAC,CAAC;IACL,CAAC;IAED,WAAW;;QACT,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,GAAG;IAC9B,CAAC;IAEO,gBAAgB,CAAC,QAAgB,EAAE,GAAiB;QAC1D,MAAM,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC;QAElC,MAAM,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAC;QAE9D,KAAK,MAAM,KAAK,IAAI,CAAC,GAAG,OAAO,CAAC,EAAE;YAChC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAc,CAAC,CAAC;SACtC;IACH,CAAC;IAEO,cAAc,CAAC,OAAoB;QACzC,IAAI,OAAO,CAAC,QAAQ,KAAK,CAAC,EAAE;YAC1B,OAAO;SACR;QACD,KAAK,MAAM,IAAI,IAAI,OAAO,CAAC,UAAU,EAAE;YACrC,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBAClC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;aAChC;SACF;QACD,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;SACtC;IACH,CAAC;IAEO,SAAS,CAAC,OAAoB;QACpC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QACD,KAAK,MAAM,CAAC,EAAE,QAAQ,CAAC,IAAI,GAAG,EAAE;YAC9B,IAAI,QAAQ,CAAC,SAAS,EAAE;gBACtB,QAAQ,CAAC,SAAS,EAAE,CAAC;aACtB;SACF;QACD,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAEO,KAAK,CAAC,aAAqB,EAAE,EAAe,EAAE,MAAe;QACnE,IAAI,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACnC,IAAI,CAAC,GAAG,EAAE;YACR,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;SAC/B;QAED,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QACxC,MAAM,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;QAEjD,IAAI,CAAC,QAAQ,EAAE;YACb,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;YACvD,MAAM,QAAQ,GAAG,IAAI,WAAW,EAAE,CAAC;YACnC,GAAG,CAAC,GAAG,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;YACjC,QAAQ,CAAC,OAAO,GAAG,EAAE,CAAC;YACtB,QAAQ,CAAC,QAAQ,GAAG,aAAa,CAAC;YAClC,QAAQ,CAAC,KAAK,GAAG,SAAS,IAAI,QAAQ,CAAC,KAAK,CAAC;YAC7C,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;YAE9B,IAAI,QAAQ,CAAC,MAAM,EAAE;gBACnB,QAAQ,CAAC,MAAM,EAAE,CAAC;aACnB;YACD,OAAO;SACR;QAED,IAAI,SAAS,IAAI,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,EAAE;YACzC,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC;YAC3B,IAAI,QAAQ,CAAC,SAAS,EAAE;gBACtB,QAAQ,CAAC,SAAS,EAAE,CAAC;aACtB;YACD,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;YAC1B,OAAO;SACR;QACD,IAAI,SAAS,KAAK,QAAQ,CAAC,KAAK,EAAE;YAChC,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC;YAC3B,IAAI,QAAQ,CAAC,QAAQ,EAAE;gBACrB,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;aACtC;YACD,OAAO;SACR;IACH,CAAC;CACF;AA9ID,0DA8IC"}
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
export type Constructor<T> = new (...args: never[]) => T;
|
|
2
2
|
|
|
3
|
+
const noop = function() {
|
|
4
|
+
/* */
|
|
5
|
+
};
|
|
6
|
+
|
|
3
7
|
export interface Options {
|
|
4
8
|
registry?: CustomAttributeRegistry;
|
|
5
9
|
selector: string;
|
|
@@ -9,6 +13,58 @@ interface ModifierOptions {
|
|
|
9
13
|
selector: string;
|
|
10
14
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
11
15
|
}
|
|
16
|
+
interface InputOptions {
|
|
17
|
+
/**
|
|
18
|
+
* If enabled will trigger OnUpdate method on the Attribute
|
|
19
|
+
* */
|
|
20
|
+
observe: true;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const observe = (target: unknown, memberName: string) => {
|
|
24
|
+
const prototype = target.constructor.prototype;
|
|
25
|
+
const OnInit = prototype.OnInit || noop;
|
|
26
|
+
const OnDestroy = prototype.OnInit || noop;
|
|
27
|
+
const OnUpdateAttribute = prototype.OnUpdateAttribute || noop;
|
|
28
|
+
|
|
29
|
+
let observer: MutationObserver;
|
|
30
|
+
prototype.OnInit = function() {
|
|
31
|
+
const element = this.element ?? this;
|
|
32
|
+
if (observer) {
|
|
33
|
+
observer.disconnect();
|
|
34
|
+
}
|
|
35
|
+
observer = new MutationObserver(() =>
|
|
36
|
+
OnUpdateAttribute.call(this, memberName, element.getAttribute(memberName))
|
|
37
|
+
);
|
|
38
|
+
observer.observe(element, {
|
|
39
|
+
attributeFilter: [memberName],
|
|
40
|
+
attributes: true
|
|
41
|
+
});
|
|
42
|
+
return OnInit.call(this);
|
|
43
|
+
};
|
|
44
|
+
prototype.OnDestroy = function() {
|
|
45
|
+
observer.disconnect();
|
|
46
|
+
return OnDestroy.call(this);
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Decorator @Input
|
|
52
|
+
* Used to get attribute from element
|
|
53
|
+
*/
|
|
54
|
+
export const Input = (options?: InputOptions) => (
|
|
55
|
+
target: unknown,
|
|
56
|
+
memberName: string
|
|
57
|
+
) => {
|
|
58
|
+
Object.defineProperty(target, memberName, {
|
|
59
|
+
get: function() {
|
|
60
|
+
const element = this.element ?? this;
|
|
61
|
+
return element.getAttribute(memberName.toLowerCase());
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
if (options?.observe) {
|
|
65
|
+
observe(target, memberName);
|
|
66
|
+
}
|
|
67
|
+
};
|
|
12
68
|
|
|
13
69
|
/**
|
|
14
70
|
* Decorator @Modifier
|
|
@@ -24,6 +80,7 @@ export const Modifier = (options: ModifierOptions) => {
|
|
|
24
80
|
};
|
|
25
81
|
};
|
|
26
82
|
};
|
|
83
|
+
|
|
27
84
|
/* Someone may like to use CustomAttribute instead of Modifier */
|
|
28
85
|
export const CustomAttribute = Modifier;
|
|
29
86
|
|
|
@@ -52,6 +109,10 @@ export abstract class Attribute<T = {}> {
|
|
|
52
109
|
OnUpdate(_oldValue: string, _newValue: string) {
|
|
53
110
|
/* */
|
|
54
111
|
}
|
|
112
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
113
|
+
OnUpdateAttribute(_name: string, _value: string) {
|
|
114
|
+
/* */
|
|
115
|
+
}
|
|
55
116
|
}
|
|
56
117
|
|
|
57
118
|
export class CustomAttributeRegistry {
|
|
@@ -106,7 +167,7 @@ export class CustomAttributeRegistry {
|
|
|
106
167
|
}
|
|
107
168
|
}
|
|
108
169
|
});
|
|
109
|
-
this.observer.observe(this.parent, {
|
|
170
|
+
this.observer.observe(this.parent?.['shadowRoot'] ?? this.parent, {
|
|
110
171
|
childList: true,
|
|
111
172
|
subtree: true,
|
|
112
173
|
attributes: true,
|