@rhtml/custom-attributes 0.0.104 → 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 +20 -0
- package/dist/index.d.ts +8 -1
- package/dist/index.js +35 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +48 -1
package/README.md
CHANGED
|
@@ -176,3 +176,23 @@ export class Hoverable extends Attribute {
|
|
|
176
176
|
```html
|
|
177
177
|
<div hover myProperty="123">Lorem ipsum dolor</div>
|
|
178
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,11 +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
|
+
}
|
|
10
16
|
/**
|
|
11
17
|
* Decorator @Input
|
|
12
18
|
* Used to get attribute from element
|
|
13
19
|
*/
|
|
14
|
-
export declare const Input: () => (target: unknown, memberName: string) => void;
|
|
20
|
+
export declare const Input: (options?: InputOptions) => (target: unknown, memberName: string) => void;
|
|
15
21
|
/**
|
|
16
22
|
* Decorator @Modifier
|
|
17
23
|
* Accepts parameter options with selector and registry
|
|
@@ -28,6 +34,7 @@ export declare abstract class Attribute<T = {}> {
|
|
|
28
34
|
OnInit(): void;
|
|
29
35
|
OnDestroy(): void;
|
|
30
36
|
OnUpdate(_oldValue: string, _newValue: string): void;
|
|
37
|
+
OnUpdateAttribute(_name: string, _value: string): void;
|
|
31
38
|
}
|
|
32
39
|
export declare class CustomAttributeRegistry {
|
|
33
40
|
private parent;
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
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
|
+
};
|
|
4
31
|
/**
|
|
5
32
|
* Decorator @Input
|
|
6
33
|
* Used to get attribute from element
|
|
7
34
|
*/
|
|
8
|
-
exports.Input = () => (target, memberName) => {
|
|
35
|
+
exports.Input = (options) => (target, memberName) => {
|
|
9
36
|
Object.defineProperty(target, memberName, {
|
|
10
37
|
get: function () {
|
|
11
38
|
var _a;
|
|
@@ -13,6 +40,9 @@ exports.Input = () => (target, memberName) => {
|
|
|
13
40
|
return element.getAttribute(memberName.toLowerCase());
|
|
14
41
|
}
|
|
15
42
|
});
|
|
43
|
+
if (options === null || options === void 0 ? void 0 : options.observe) {
|
|
44
|
+
observe(target, memberName);
|
|
45
|
+
}
|
|
16
46
|
};
|
|
17
47
|
/**
|
|
18
48
|
* Decorator @Modifier
|
|
@@ -49,6 +79,10 @@ class Attribute {
|
|
|
49
79
|
OnUpdate(_oldValue, _newValue) {
|
|
50
80
|
/* */
|
|
51
81
|
}
|
|
82
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
83
|
+
OnUpdateAttribute(_name, _value) {
|
|
84
|
+
/* */
|
|
85
|
+
}
|
|
52
86
|
}
|
|
53
87
|
exports.Attribute = Attribute;
|
|
54
88
|
class CustomAttributeRegistry {
|
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,18 +13,57 @@ 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
|
+
};
|
|
12
49
|
|
|
13
50
|
/**
|
|
14
51
|
* Decorator @Input
|
|
15
52
|
* Used to get attribute from element
|
|
16
53
|
*/
|
|
17
|
-
export const Input = () => (
|
|
54
|
+
export const Input = (options?: InputOptions) => (
|
|
55
|
+
target: unknown,
|
|
56
|
+
memberName: string
|
|
57
|
+
) => {
|
|
18
58
|
Object.defineProperty(target, memberName, {
|
|
19
59
|
get: function() {
|
|
20
60
|
const element = this.element ?? this;
|
|
21
61
|
return element.getAttribute(memberName.toLowerCase());
|
|
22
62
|
}
|
|
23
63
|
});
|
|
64
|
+
if (options?.observe) {
|
|
65
|
+
observe(target, memberName);
|
|
66
|
+
}
|
|
24
67
|
};
|
|
25
68
|
|
|
26
69
|
/**
|
|
@@ -66,6 +109,10 @@ export abstract class Attribute<T = {}> {
|
|
|
66
109
|
OnUpdate(_oldValue: string, _newValue: string) {
|
|
67
110
|
/* */
|
|
68
111
|
}
|
|
112
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
113
|
+
OnUpdateAttribute(_name: string, _value: string) {
|
|
114
|
+
/* */
|
|
115
|
+
}
|
|
69
116
|
}
|
|
70
117
|
|
|
71
118
|
export class CustomAttributeRegistry {
|