@rhtml/custom-attributes 0.0.96 → 0.0.99
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 +53 -4
- package/dist/index.d.ts +3 -2
- package/dist/index.js +7 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +9 -5
package/README.md
CHANGED
|
@@ -29,7 +29,7 @@ class BackgroundColor extends Attribute {
|
|
|
29
29
|
this.setColor();
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
setColor() {
|
|
32
|
+
private setColor() {
|
|
33
33
|
this.element.style.backgroundColor = this.value;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -37,16 +37,17 @@ class BackgroundColor extends Attribute {
|
|
|
37
37
|
customAttributes.define('red', BackgroundColor);
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
#### Usage inside @rxdi/lit-html
|
|
40
|
+
#### Usage inside @rxdi/lit-html with custom registry
|
|
41
41
|
|
|
42
42
|
```typescript
|
|
43
43
|
import { Component, LitElement, html } from '@rxdi/lit-html';
|
|
44
|
+
import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
44
45
|
|
|
45
46
|
export class BackgroundColor extends Attribute {
|
|
46
47
|
static options(this: HTMLElement) {
|
|
47
48
|
return {
|
|
48
49
|
name: 'myAttribute',
|
|
49
|
-
registry: CustomAttributeRegistry
|
|
50
|
+
registry: new CustomAttributeRegistry(this.shadowRoot)
|
|
50
51
|
};
|
|
51
52
|
}
|
|
52
53
|
|
|
@@ -65,7 +66,7 @@ export class BackgroundColor extends Attribute {
|
|
|
65
66
|
this.setColor();
|
|
66
67
|
}
|
|
67
68
|
|
|
68
|
-
setColor() {
|
|
69
|
+
private setColor() {
|
|
69
70
|
this.element.style.backgroundColor = this.value;
|
|
70
71
|
}
|
|
71
72
|
}
|
|
@@ -81,3 +82,51 @@ export class BackgroundColor extends Attribute {
|
|
|
81
82
|
})
|
|
82
83
|
export class HomeComponent extends LitElement {}
|
|
83
84
|
```
|
|
85
|
+
|
|
86
|
+
#### Usage with per component registry
|
|
87
|
+
|
|
88
|
+
```typescript
|
|
89
|
+
import { Component, LitElement, html } from '@rxdi/lit-html';
|
|
90
|
+
import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
91
|
+
|
|
92
|
+
export class BackgroundColor extends Attribute {
|
|
93
|
+
static options(this: HTMLElement) {
|
|
94
|
+
return {
|
|
95
|
+
name: 'myAttribute'
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
OnInit() {
|
|
100
|
+
console.log('Attribute initialized');
|
|
101
|
+
this.setColor();
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
OnDestroy() {
|
|
105
|
+
console.log('Attribute destroyed');
|
|
106
|
+
this.element.style.backgroundColor = null;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
OnUpdate(oldValue: string, newValue: string) {
|
|
110
|
+
console.log('Attribute updated');
|
|
111
|
+
this.setColor();
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
private setColor() {
|
|
115
|
+
this.element.style.backgroundColor = this.value;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@Component({
|
|
120
|
+
selector: 'home-component',
|
|
121
|
+
registry(this: HomeComponent) {
|
|
122
|
+
return new CustomAttributeRegistry(this.shadowRoot);
|
|
123
|
+
},
|
|
124
|
+
modifiers: [BackgroundColor],
|
|
125
|
+
template(this: HomeComponent) {
|
|
126
|
+
return html`
|
|
127
|
+
<div myAttribute="red">Background</div>
|
|
128
|
+
`;
|
|
129
|
+
}
|
|
130
|
+
})
|
|
131
|
+
export class HomeComponent extends LitElement {}
|
|
132
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare type Constructor<T> = new (...args: never[]) => T;
|
|
2
2
|
export interface Options {
|
|
3
|
-
registry
|
|
3
|
+
registry?: CustomAttributeRegistry;
|
|
4
4
|
name: string;
|
|
5
5
|
}
|
|
6
6
|
export declare abstract class Attribute<T = {}> {
|
|
@@ -9,7 +9,7 @@ export declare abstract class Attribute<T = {}> {
|
|
|
9
9
|
value?: string;
|
|
10
10
|
name?: string;
|
|
11
11
|
parent?: HTMLElement | Document | ShadowRoot;
|
|
12
|
-
setStyles(keys: T): (div: HTMLElement) => void;
|
|
12
|
+
setStyles(keys: T): (div: HTMLElement | Element | HTMLDivElement) => void;
|
|
13
13
|
OnInit(): void;
|
|
14
14
|
OnDestroy(): void;
|
|
15
15
|
OnUpdate(_oldValue: string, _newValue: string): void;
|
|
@@ -24,6 +24,7 @@ export declare class CustomAttributeRegistry {
|
|
|
24
24
|
get(element: HTMLElement, attrName: string): Attribute<{}>;
|
|
25
25
|
private getConstructor;
|
|
26
26
|
private observe;
|
|
27
|
+
unsubscribe(): void;
|
|
27
28
|
private upgradeAttribute;
|
|
28
29
|
private upgradeElement;
|
|
29
30
|
private downgrade;
|
package/dist/index.js
CHANGED
|
@@ -8,7 +8,7 @@ class Attribute {
|
|
|
8
8
|
setStyles(keys) {
|
|
9
9
|
return (div) => {
|
|
10
10
|
for (const [key, value] of Object.entries(keys)) {
|
|
11
|
-
div
|
|
11
|
+
div['style'][key] = value;
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
}
|
|
@@ -45,7 +45,7 @@ class CustomAttributeRegistry {
|
|
|
45
45
|
return map.get(attrName.toLowerCase());
|
|
46
46
|
}
|
|
47
47
|
getConstructor(attrName) {
|
|
48
|
-
return this._attrMap.get(attrName);
|
|
48
|
+
return this._attrMap.get(attrName.toLowerCase());
|
|
49
49
|
}
|
|
50
50
|
observe() {
|
|
51
51
|
this.observer = new MutationObserver(mutations => {
|
|
@@ -73,6 +73,10 @@ class CustomAttributeRegistry {
|
|
|
73
73
|
attributeOldValue: true
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
|
+
unsubscribe() {
|
|
77
|
+
var _a;
|
|
78
|
+
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
79
|
+
}
|
|
76
80
|
upgradeAttribute(attrName, doc) {
|
|
77
81
|
const parent = doc || this.parent;
|
|
78
82
|
const matches = parent.querySelectorAll('[' + attrName + ']');
|
|
@@ -119,7 +123,7 @@ class CustomAttributeRegistry {
|
|
|
119
123
|
map.set(attributeName, modifier);
|
|
120
124
|
modifier.element = el;
|
|
121
125
|
modifier.name = attributeName;
|
|
122
|
-
modifier.value = attribute;
|
|
126
|
+
modifier.value = attribute || modifier.value;
|
|
123
127
|
modifier.parent = this.parent;
|
|
124
128
|
if (modifier.OnInit) {
|
|
125
129
|
modifier.OnInit();
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAOA,MAAsB,SAAS;IACtB,MAAM,CAAC,OAAO;QACnB,OAAO;IACT,CAAC;IAKD,SAAS,CAAC,IAAO;QACf,OAAO,CAAC,
|
|
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,7 +1,7 @@
|
|
|
1
1
|
export type Constructor<T> = new (...args: never[]) => T;
|
|
2
2
|
|
|
3
3
|
export interface Options {
|
|
4
|
-
registry
|
|
4
|
+
registry?: CustomAttributeRegistry;
|
|
5
5
|
name: string;
|
|
6
6
|
}
|
|
7
7
|
|
|
@@ -14,9 +14,9 @@ export abstract class Attribute<T = {}> {
|
|
|
14
14
|
public name?: string;
|
|
15
15
|
public parent?: HTMLElement | Document | ShadowRoot;
|
|
16
16
|
setStyles(keys: T) {
|
|
17
|
-
return (div: HTMLElement) => {
|
|
17
|
+
return (div: HTMLElement | Element | HTMLDivElement) => {
|
|
18
18
|
for (const [key, value] of Object.entries(keys)) {
|
|
19
|
-
div
|
|
19
|
+
div['style'][key] = value;
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
}
|
|
@@ -59,7 +59,7 @@ export class CustomAttributeRegistry {
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
private getConstructor(attrName: string) {
|
|
62
|
-
return this._attrMap.get(attrName);
|
|
62
|
+
return this._attrMap.get(attrName.toLowerCase());
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
private observe() {
|
|
@@ -92,6 +92,10 @@ export class CustomAttributeRegistry {
|
|
|
92
92
|
});
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
unsubscribe() {
|
|
96
|
+
this.observer?.disconnect();
|
|
97
|
+
}
|
|
98
|
+
|
|
95
99
|
private upgradeAttribute(attrName: string, doc?: HTMLElement) {
|
|
96
100
|
const parent = doc || this.parent;
|
|
97
101
|
|
|
@@ -145,7 +149,7 @@ export class CustomAttributeRegistry {
|
|
|
145
149
|
map.set(attributeName, modifier);
|
|
146
150
|
modifier.element = el;
|
|
147
151
|
modifier.name = attributeName;
|
|
148
|
-
modifier.value = attribute;
|
|
152
|
+
modifier.value = attribute || modifier.value;
|
|
149
153
|
modifier.parent = this.parent;
|
|
150
154
|
|
|
151
155
|
if (modifier.OnInit) {
|