@rhtml/custom-attributes 0.0.101 → 0.0.104
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 +61 -15
- package/dist/index.d.ts +18 -2
- package/dist/index.js +31 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +40 -4
package/README.md
CHANGED
|
@@ -34,23 +34,22 @@ class BackgroundColor extends Attribute {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
customAttributes.define('
|
|
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
|
})
|
|
@@ -92,7 +91,7 @@ import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
|
92
91
|
export class BackgroundColor extends Attribute {
|
|
93
92
|
static options(this: HTMLElement) {
|
|
94
93
|
return {
|
|
95
|
-
|
|
94
|
+
selector: 'myAttribute'
|
|
96
95
|
};
|
|
97
96
|
}
|
|
98
97
|
|
|
@@ -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
|
`;
|
|
@@ -130,3 +129,50 @@ export class BackgroundColor extends Attribute {
|
|
|
130
129
|
})
|
|
131
130
|
export class HomeComponent extends LitElement {}
|
|
132
131
|
```
|
|
132
|
+
|
|
133
|
+
#### Decorator @CustomAttribute or @Modifier there are the same
|
|
134
|
+
|
|
135
|
+
There is a way to define `options` static method as a typescript decorator
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
import { CustomAttribute, Modifier } from '@rhtml/custom-attributes';
|
|
139
|
+
|
|
140
|
+
@CustomAttribute({
|
|
141
|
+
selector: 'background'
|
|
142
|
+
})
|
|
143
|
+
export class BackgroundColor extends Attribute {}
|
|
144
|
+
|
|
145
|
+
@Modifier({
|
|
146
|
+
selector: 'background'
|
|
147
|
+
})
|
|
148
|
+
export class BackgroundColor extends Attribute {}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
#### Modifier accepts also decorators from @rhtml/decorators
|
|
152
|
+
|
|
153
|
+
```typescript
|
|
154
|
+
import { Modifier, Input } from '@rhtml/custom-attributes';
|
|
155
|
+
import { HostListener } from '@rhtml/decorators';
|
|
156
|
+
|
|
157
|
+
@Modifier({
|
|
158
|
+
selector: 'hover'
|
|
159
|
+
})
|
|
160
|
+
export class Hoverable extends Attribute {
|
|
161
|
+
@Input()
|
|
162
|
+
myProperty: string;
|
|
163
|
+
|
|
164
|
+
@HostListener('mouseenter')
|
|
165
|
+
enter(event: Event) {
|
|
166
|
+
console.log('Enter', event);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@HostListener('mouseleave')
|
|
170
|
+
leave(event: Event) {
|
|
171
|
+
console.log('Leave', event);
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<div hover myProperty="123">Lorem ipsum dolor</div>
|
|
178
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,28 @@
|
|
|
1
1
|
export declare type Constructor<T> = new (...args: never[]) => T;
|
|
2
2
|
export interface Options {
|
|
3
3
|
registry?: CustomAttributeRegistry;
|
|
4
|
-
|
|
4
|
+
selector: string;
|
|
5
5
|
}
|
|
6
|
+
interface ModifierOptions {
|
|
7
|
+
selector: string;
|
|
8
|
+
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Decorator @Input
|
|
12
|
+
* Used to get attribute from element
|
|
13
|
+
*/
|
|
14
|
+
export declare const Input: () => (target: unknown, memberName: string) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Decorator @Modifier
|
|
17
|
+
* Accepts parameter options with selector and registry
|
|
18
|
+
*/
|
|
19
|
+
export declare const Modifier: (options: ModifierOptions) => (target: Function) => void;
|
|
20
|
+
export declare const CustomAttribute: (options: ModifierOptions) => (target: Function) => void;
|
|
6
21
|
export declare abstract class Attribute<T = {}> {
|
|
7
22
|
static options(this: HTMLElement): Options;
|
|
8
23
|
element?: HTMLElement;
|
|
9
24
|
value?: string;
|
|
10
|
-
|
|
25
|
+
selector?: string;
|
|
11
26
|
parent?: HTMLElement | Document | ShadowRoot;
|
|
12
27
|
setStyles(keys: T): (div: HTMLElement | Element | HTMLDivElement) => void;
|
|
13
28
|
OnInit(): void;
|
|
@@ -30,3 +45,4 @@ export declare class CustomAttributeRegistry {
|
|
|
30
45
|
private downgrade;
|
|
31
46
|
private found;
|
|
32
47
|
}
|
|
48
|
+
export {};
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.CustomAttributeRegistry = exports.Attribute = void 0;
|
|
3
|
+
exports.CustomAttributeRegistry = exports.Attribute = exports.CustomAttribute = exports.Modifier = exports.Input = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* Decorator @Input
|
|
6
|
+
* Used to get attribute from element
|
|
7
|
+
*/
|
|
8
|
+
exports.Input = () => (target, memberName) => {
|
|
9
|
+
Object.defineProperty(target, memberName, {
|
|
10
|
+
get: function () {
|
|
11
|
+
var _a;
|
|
12
|
+
const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
|
|
13
|
+
return element.getAttribute(memberName.toLowerCase());
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Decorator @Modifier
|
|
19
|
+
* Accepts parameter options with selector and registry
|
|
20
|
+
*/
|
|
21
|
+
exports.Modifier = (options) => {
|
|
22
|
+
return (target) => {
|
|
23
|
+
target['options'] = function () {
|
|
24
|
+
var _a;
|
|
25
|
+
return Object.assign(Object.assign({}, options), { registry: (_a = options.registry) === null || _a === void 0 ? void 0 : _a.call(this) });
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
/* Someone may like to use CustomAttribute instead of Modifier */
|
|
30
|
+
exports.CustomAttribute = exports.Modifier;
|
|
4
31
|
class Attribute {
|
|
5
32
|
static options() {
|
|
6
33
|
return;
|
|
@@ -48,6 +75,7 @@ class CustomAttributeRegistry {
|
|
|
48
75
|
return this._attrMap.get(attrName.toLowerCase());
|
|
49
76
|
}
|
|
50
77
|
observe() {
|
|
78
|
+
var _a, _b;
|
|
51
79
|
this.observer = new MutationObserver(mutations => {
|
|
52
80
|
for (const mutation of mutations) {
|
|
53
81
|
if (mutation.type === 'attributes') {
|
|
@@ -66,7 +94,7 @@ class CustomAttributeRegistry {
|
|
|
66
94
|
}
|
|
67
95
|
}
|
|
68
96
|
});
|
|
69
|
-
this.observer.observe(this.parent, {
|
|
97
|
+
this.observer.observe((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a['shadowRoot']) !== null && _b !== void 0 ? _b : this.parent, {
|
|
70
98
|
childList: true,
|
|
71
99
|
subtree: true,
|
|
72
100
|
attributes: true,
|
|
@@ -122,7 +150,7 @@ class CustomAttributeRegistry {
|
|
|
122
150
|
const modifier = new Constructor();
|
|
123
151
|
map.set(attributeName, modifier);
|
|
124
152
|
modifier.element = el;
|
|
125
|
-
modifier.
|
|
153
|
+
modifier.selector = attributeName;
|
|
126
154
|
modifier.value = attribute || modifier.value;
|
|
127
155
|
modifier.parent = this.parent;
|
|
128
156
|
if (modifier.OnInit) {
|
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
|
@@ -2,16 +2,52 @@ export type Constructor<T> = new (...args: never[]) => T;
|
|
|
2
2
|
|
|
3
3
|
export interface Options {
|
|
4
4
|
registry?: CustomAttributeRegistry;
|
|
5
|
-
|
|
5
|
+
selector: string;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
interface ModifierOptions {
|
|
9
|
+
selector: string;
|
|
10
|
+
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Decorator @Input
|
|
15
|
+
* Used to get attribute from element
|
|
16
|
+
*/
|
|
17
|
+
export const Input = () => (target: unknown, memberName: string) => {
|
|
18
|
+
Object.defineProperty(target, memberName, {
|
|
19
|
+
get: function() {
|
|
20
|
+
const element = this.element ?? this;
|
|
21
|
+
return element.getAttribute(memberName.toLowerCase());
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Decorator @Modifier
|
|
28
|
+
* Accepts parameter options with selector and registry
|
|
29
|
+
*/
|
|
30
|
+
export const Modifier = (options: ModifierOptions) => {
|
|
31
|
+
return (target: Function) => {
|
|
32
|
+
target['options'] = function(this: HTMLElement): Options {
|
|
33
|
+
return {
|
|
34
|
+
...options,
|
|
35
|
+
registry: options.registry?.call(this)
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
/* Someone may like to use CustomAttribute instead of Modifier */
|
|
42
|
+
export const CustomAttribute = Modifier;
|
|
43
|
+
|
|
8
44
|
export abstract class Attribute<T = {}> {
|
|
9
45
|
public static options(this: HTMLElement): Options {
|
|
10
46
|
return;
|
|
11
47
|
}
|
|
12
48
|
public element?: HTMLElement;
|
|
13
49
|
public value?: string;
|
|
14
|
-
public
|
|
50
|
+
public selector?: string;
|
|
15
51
|
public parent?: HTMLElement | Document | ShadowRoot;
|
|
16
52
|
setStyles(keys: T) {
|
|
17
53
|
return (div: HTMLElement | Element | HTMLDivElement) => {
|
|
@@ -84,7 +120,7 @@ export class CustomAttributeRegistry {
|
|
|
84
120
|
}
|
|
85
121
|
}
|
|
86
122
|
});
|
|
87
|
-
this.observer.observe(this.parent, {
|
|
123
|
+
this.observer.observe(this.parent?.['shadowRoot'] ?? this.parent, {
|
|
88
124
|
childList: true,
|
|
89
125
|
subtree: true,
|
|
90
126
|
attributes: true,
|
|
@@ -148,7 +184,7 @@ export class CustomAttributeRegistry {
|
|
|
148
184
|
const modifier = new Constructor();
|
|
149
185
|
map.set(attributeName, modifier);
|
|
150
186
|
modifier.element = el;
|
|
151
|
-
modifier.
|
|
187
|
+
modifier.selector = attributeName;
|
|
152
188
|
modifier.value = attribute || modifier.value;
|
|
153
189
|
modifier.parent = this.parent;
|
|
154
190
|
|