@rhtml/custom-attributes 0.0.104 → 0.0.107
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 +23 -5
- package/dist/index.d.ts +9 -6
- package/dist/index.js +36 -8
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +49 -14
package/README.md
CHANGED
|
@@ -89,11 +89,9 @@ import { Component, LitElement, html } from '@rxdi/lit-html';
|
|
|
89
89
|
import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
90
90
|
|
|
91
91
|
export class BackgroundColor extends Attribute {
|
|
92
|
-
static options
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
};
|
|
96
|
-
}
|
|
92
|
+
static options = {
|
|
93
|
+
selector: 'myAttribute'
|
|
94
|
+
};
|
|
97
95
|
|
|
98
96
|
OnInit() {
|
|
99
97
|
console.log('Attribute initialized');
|
|
@@ -176,3 +174,23 @@ export class Hoverable extends Attribute {
|
|
|
176
174
|
```html
|
|
177
175
|
<div hover myProperty="123">Lorem ipsum dolor</div>
|
|
178
176
|
```
|
|
177
|
+
|
|
178
|
+
#### Observing properties defined with @Input decorator
|
|
179
|
+
|
|
180
|
+
```typescript
|
|
181
|
+
import { Modifier, Input } from '@rhtml/custom-attributes';
|
|
182
|
+
import { HostListener } from '@rhtml/decorators';
|
|
183
|
+
|
|
184
|
+
@Modifier({
|
|
185
|
+
selector: 'hover'
|
|
186
|
+
})
|
|
187
|
+
export class Hoverable extends Attribute {
|
|
188
|
+
@Input({ observe: true })
|
|
189
|
+
myProperty: string;
|
|
190
|
+
|
|
191
|
+
OnUpdateAttribute(name: string, value: string) {
|
|
192
|
+
/* This will be triggered on every update of the attribute myProperty */
|
|
193
|
+
console.log(this.myProperty);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
export declare type Constructor<T> = new (...args: never[]) => T;
|
|
2
|
-
export interface Options {
|
|
3
|
-
registry?: CustomAttributeRegistry;
|
|
4
|
-
selector: string;
|
|
5
|
-
}
|
|
6
2
|
interface ModifierOptions {
|
|
7
3
|
selector: string;
|
|
8
4
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
9
5
|
}
|
|
6
|
+
interface InputOptions {
|
|
7
|
+
/**
|
|
8
|
+
* If enabled will trigger OnUpdate method on the Attribute
|
|
9
|
+
* */
|
|
10
|
+
observe: true;
|
|
11
|
+
}
|
|
10
12
|
/**
|
|
11
13
|
* Decorator @Input
|
|
12
14
|
* Used to get attribute from element
|
|
13
15
|
*/
|
|
14
|
-
export declare const Input: () => (target: unknown, memberName: string) => void;
|
|
16
|
+
export declare const Input: (options?: InputOptions) => (target: unknown, memberName: string) => void;
|
|
15
17
|
/**
|
|
16
18
|
* Decorator @Modifier
|
|
17
19
|
* Accepts parameter options with selector and registry
|
|
@@ -19,7 +21,7 @@ export declare const Input: () => (target: unknown, memberName: string) => void;
|
|
|
19
21
|
export declare const Modifier: (options: ModifierOptions) => (target: Function) => void;
|
|
20
22
|
export declare const CustomAttribute: (options: ModifierOptions) => (target: Function) => void;
|
|
21
23
|
export declare abstract class Attribute<T = {}> {
|
|
22
|
-
static options
|
|
24
|
+
static options: ModifierOptions;
|
|
23
25
|
element?: HTMLElement;
|
|
24
26
|
value?: string;
|
|
25
27
|
selector?: string;
|
|
@@ -28,6 +30,7 @@ export declare abstract class Attribute<T = {}> {
|
|
|
28
30
|
OnInit(): void;
|
|
29
31
|
OnDestroy(): void;
|
|
30
32
|
OnUpdate(_oldValue: string, _newValue: string): void;
|
|
33
|
+
OnUpdateAttribute(_name: string, _value: string): void;
|
|
31
34
|
}
|
|
32
35
|
export declare class CustomAttributeRegistry {
|
|
33
36
|
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
|
|
@@ -20,18 +50,12 @@ exports.Input = () => (target, memberName) => {
|
|
|
20
50
|
*/
|
|
21
51
|
exports.Modifier = (options) => {
|
|
22
52
|
return (target) => {
|
|
23
|
-
target['options'] =
|
|
24
|
-
var _a;
|
|
25
|
-
return Object.assign(Object.assign({}, options), { registry: (_a = options.registry) === null || _a === void 0 ? void 0 : _a.call(this) });
|
|
26
|
-
};
|
|
53
|
+
target['options'] = options;
|
|
27
54
|
};
|
|
28
55
|
};
|
|
29
56
|
/* Someone may like to use CustomAttribute instead of Modifier */
|
|
30
57
|
exports.CustomAttribute = exports.Modifier;
|
|
31
58
|
class Attribute {
|
|
32
|
-
static options() {
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
59
|
setStyles(keys) {
|
|
36
60
|
return (div) => {
|
|
37
61
|
for (const [key, value] of Object.entries(keys)) {
|
|
@@ -49,6 +73,10 @@ class Attribute {
|
|
|
49
73
|
OnUpdate(_oldValue, _newValue) {
|
|
50
74
|
/* */
|
|
51
75
|
}
|
|
76
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
77
|
+
OnUpdateAttribute(_name, _value) {
|
|
78
|
+
/* */
|
|
79
|
+
}
|
|
52
80
|
}
|
|
53
81
|
exports.Attribute = Attribute;
|
|
54
82
|
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":"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"}
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -1,26 +1,64 @@
|
|
|
1
1
|
export type Constructor<T> = new (...args: never[]) => T;
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
3
|
+
const noop = function() {
|
|
4
|
+
/* */
|
|
5
|
+
};
|
|
7
6
|
|
|
8
7
|
interface ModifierOptions {
|
|
9
8
|
selector: string;
|
|
10
9
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
11
10
|
}
|
|
11
|
+
interface InputOptions {
|
|
12
|
+
/**
|
|
13
|
+
* If enabled will trigger OnUpdate method on the Attribute
|
|
14
|
+
* */
|
|
15
|
+
observe: true;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const observe = (target: unknown, memberName: string) => {
|
|
19
|
+
const prototype = target.constructor.prototype;
|
|
20
|
+
const OnInit = prototype.OnInit || noop;
|
|
21
|
+
const OnDestroy = prototype.OnInit || noop;
|
|
22
|
+
const OnUpdateAttribute = prototype.OnUpdateAttribute || noop;
|
|
23
|
+
|
|
24
|
+
let observer: MutationObserver;
|
|
25
|
+
prototype.OnInit = function() {
|
|
26
|
+
const element = this.element ?? this;
|
|
27
|
+
if (observer) {
|
|
28
|
+
observer.disconnect();
|
|
29
|
+
}
|
|
30
|
+
observer = new MutationObserver(() =>
|
|
31
|
+
OnUpdateAttribute.call(this, memberName, element.getAttribute(memberName))
|
|
32
|
+
);
|
|
33
|
+
observer.observe(element, {
|
|
34
|
+
attributeFilter: [memberName],
|
|
35
|
+
attributes: true
|
|
36
|
+
});
|
|
37
|
+
return OnInit.call(this);
|
|
38
|
+
};
|
|
39
|
+
prototype.OnDestroy = function() {
|
|
40
|
+
observer.disconnect();
|
|
41
|
+
return OnDestroy.call(this);
|
|
42
|
+
};
|
|
43
|
+
};
|
|
12
44
|
|
|
13
45
|
/**
|
|
14
46
|
* Decorator @Input
|
|
15
47
|
* Used to get attribute from element
|
|
16
48
|
*/
|
|
17
|
-
export const Input = () => (
|
|
49
|
+
export const Input = (options?: InputOptions) => (
|
|
50
|
+
target: unknown,
|
|
51
|
+
memberName: string
|
|
52
|
+
) => {
|
|
18
53
|
Object.defineProperty(target, memberName, {
|
|
19
54
|
get: function() {
|
|
20
55
|
const element = this.element ?? this;
|
|
21
56
|
return element.getAttribute(memberName.toLowerCase());
|
|
22
57
|
}
|
|
23
58
|
});
|
|
59
|
+
if (options?.observe) {
|
|
60
|
+
observe(target, memberName);
|
|
61
|
+
}
|
|
24
62
|
};
|
|
25
63
|
|
|
26
64
|
/**
|
|
@@ -29,12 +67,7 @@ export const Input = () => (target: unknown, memberName: string) => {
|
|
|
29
67
|
*/
|
|
30
68
|
export const Modifier = (options: ModifierOptions) => {
|
|
31
69
|
return (target: Function) => {
|
|
32
|
-
target['options'] =
|
|
33
|
-
return {
|
|
34
|
-
...options,
|
|
35
|
-
registry: options.registry?.call(this)
|
|
36
|
-
};
|
|
37
|
-
};
|
|
70
|
+
target['options'] = options;
|
|
38
71
|
};
|
|
39
72
|
};
|
|
40
73
|
|
|
@@ -42,9 +75,7 @@ export const Modifier = (options: ModifierOptions) => {
|
|
|
42
75
|
export const CustomAttribute = Modifier;
|
|
43
76
|
|
|
44
77
|
export abstract class Attribute<T = {}> {
|
|
45
|
-
public static options
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
78
|
+
public static options: ModifierOptions;
|
|
48
79
|
public element?: HTMLElement;
|
|
49
80
|
public value?: string;
|
|
50
81
|
public selector?: string;
|
|
@@ -66,6 +97,10 @@ export abstract class Attribute<T = {}> {
|
|
|
66
97
|
OnUpdate(_oldValue: string, _newValue: string) {
|
|
67
98
|
/* */
|
|
68
99
|
}
|
|
100
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
101
|
+
OnUpdateAttribute(_name: string, _value: string) {
|
|
102
|
+
/* */
|
|
103
|
+
}
|
|
69
104
|
}
|
|
70
105
|
|
|
71
106
|
export class CustomAttributeRegistry {
|