@rhtml/custom-attributes 0.0.107 → 0.0.110
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 +112 -0
- package/dist/index.d.ts +7 -3
- package/dist/index.js +8 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -4
- package/src/index.ts +16 -5
package/README.md
CHANGED
|
@@ -177,6 +177,9 @@ export class Hoverable extends Attribute {
|
|
|
177
177
|
|
|
178
178
|
#### Observing properties defined with @Input decorator
|
|
179
179
|
|
|
180
|
+
Sometimes we want our Modifier to be more extensible and we want to create complex
|
|
181
|
+
logic like for example to listen for specific property changes inside of our modifier
|
|
182
|
+
|
|
180
183
|
```typescript
|
|
181
184
|
import { Modifier, Input } from '@rhtml/custom-attributes';
|
|
182
185
|
import { HostListener } from '@rhtml/decorators';
|
|
@@ -194,3 +197,112 @@ export class Hoverable extends Attribute {
|
|
|
194
197
|
}
|
|
195
198
|
}
|
|
196
199
|
```
|
|
200
|
+
|
|
201
|
+
#### Advanced usage without Decorators
|
|
202
|
+
|
|
203
|
+
```typescript
|
|
204
|
+
import { Attribute, CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
205
|
+
|
|
206
|
+
export class Animation extends Attribute {
|
|
207
|
+
static options = {
|
|
208
|
+
selector: 'animated',
|
|
209
|
+
registry(this: HTMLElement) {
|
|
210
|
+
return new CustomAttributeRegistry(this);
|
|
211
|
+
},
|
|
212
|
+
observedAttributes: ['delay']
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
get delay() {
|
|
216
|
+
return this.element.getAttribute('delay');
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
OnInit() {
|
|
220
|
+
this.modify();
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
OnDestroy() {
|
|
224
|
+
this.element.classList.remove('animated', this.value);
|
|
225
|
+
this.element.style.animationDelay = null;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
OnUpdate() {
|
|
229
|
+
this.modify();
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
OnUpdateAttribute() {
|
|
233
|
+
this.modify();
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
private modify() {
|
|
237
|
+
this.element.classList.add('animated', this.value);
|
|
238
|
+
this.element.style.animationDelay = this.delay;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
#### Same example but with Decorators
|
|
244
|
+
|
|
245
|
+
```typescript
|
|
246
|
+
import {
|
|
247
|
+
Attribute,
|
|
248
|
+
CustomAttributeRegistry,
|
|
249
|
+
Input,
|
|
250
|
+
Modifier
|
|
251
|
+
} from '@rhtml/custom-attributes';
|
|
252
|
+
import { Animations, AnimationsType } from './animate.css';
|
|
253
|
+
|
|
254
|
+
interface Styles {
|
|
255
|
+
animationDelay: string;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
@Modifier({
|
|
259
|
+
selector: 'animated',
|
|
260
|
+
registry(this: HTMLElement) {
|
|
261
|
+
return new CustomAttributeRegistry(this);
|
|
262
|
+
}
|
|
263
|
+
})
|
|
264
|
+
export class Animation extends Attribute<Styles> {
|
|
265
|
+
@Input({ observe: true })
|
|
266
|
+
delay: string;
|
|
267
|
+
|
|
268
|
+
value: AnimationsType;
|
|
269
|
+
|
|
270
|
+
OnInit() {
|
|
271
|
+
this.pushStylesToParent();
|
|
272
|
+
this.modify();
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
OnDestroy() {
|
|
276
|
+
this.element.classList.remove('animated', this.value);
|
|
277
|
+
this.setStyles({ animationDelay: null })(this.element);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
OnUpdate() {
|
|
281
|
+
this.modify();
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
OnUpdateAttribute() {
|
|
285
|
+
this.modify();
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
private modify() {
|
|
289
|
+
this.element.classList.add('animated', this.value);
|
|
290
|
+
this.setStyles({ animationDelay: this.delay })(this.element);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
private pushStylesToParent() {
|
|
294
|
+
const style = document.createElement('style');
|
|
295
|
+
style.innerHTML = `${Animations}`;
|
|
296
|
+
const root = this.parent.shadowRoot ?? this.parent;
|
|
297
|
+
root.prepend(style);
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
By changing `delay` attribute because we use `observe: true` method `OnUpdateAttribute` will be triggered
|
|
303
|
+
|
|
304
|
+
```html
|
|
305
|
+
<h2 animated="slideInLeft" delay="1s">
|
|
306
|
+
My Animated Element
|
|
307
|
+
</h2>
|
|
308
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
export declare type
|
|
1
|
+
export declare type C<T> = new (...args: never[]) => T;
|
|
2
|
+
export interface Constructor<T> extends C<T> {
|
|
3
|
+
options: ModifierOptions;
|
|
4
|
+
}
|
|
2
5
|
interface ModifierOptions {
|
|
3
6
|
selector: string;
|
|
4
7
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
8
|
+
observedAttributes?: string[];
|
|
5
9
|
}
|
|
6
10
|
interface InputOptions {
|
|
7
11
|
/**
|
|
@@ -25,7 +29,7 @@ export declare abstract class Attribute<T = {}> {
|
|
|
25
29
|
element?: HTMLElement;
|
|
26
30
|
value?: string;
|
|
27
31
|
selector?: string;
|
|
28
|
-
parent?: HTMLElement
|
|
32
|
+
parent?: HTMLElement;
|
|
29
33
|
setStyles(keys: T): (div: HTMLElement | Element | HTMLDivElement) => void;
|
|
30
34
|
OnInit(): void;
|
|
31
35
|
OnDestroy(): void;
|
|
@@ -37,7 +41,7 @@ export declare class CustomAttributeRegistry {
|
|
|
37
41
|
private _attrMap;
|
|
38
42
|
private _elementMap;
|
|
39
43
|
private observer;
|
|
40
|
-
constructor(parent: HTMLElement
|
|
44
|
+
constructor(parent: HTMLElement);
|
|
41
45
|
define(attrName: string, Constructor: Constructor<Attribute>): void;
|
|
42
46
|
get(element: HTMLElement, attrName: string): Attribute<{}>;
|
|
43
47
|
private getConstructor;
|
package/dist/index.js
CHANGED
|
@@ -166,6 +166,7 @@ class CustomAttributeRegistry {
|
|
|
166
166
|
this._elementMap.delete(element);
|
|
167
167
|
}
|
|
168
168
|
found(attributeName, el, oldVal) {
|
|
169
|
+
var _a, _b;
|
|
169
170
|
let map = this._elementMap.get(el);
|
|
170
171
|
if (!map) {
|
|
171
172
|
map = new Map();
|
|
@@ -174,8 +175,13 @@ class CustomAttributeRegistry {
|
|
|
174
175
|
const modifier = map.get(attributeName);
|
|
175
176
|
const attribute = el.getAttribute(attributeName);
|
|
176
177
|
if (!modifier) {
|
|
177
|
-
const
|
|
178
|
-
const modifier = new
|
|
178
|
+
const Modifier = this.getConstructor(attributeName);
|
|
179
|
+
const modifier = new Modifier();
|
|
180
|
+
if ((_b = (_a = Modifier.options) === null || _a === void 0 ? void 0 : _a.observedAttributes) === null || _b === void 0 ? void 0 : _b.length) {
|
|
181
|
+
for (const observedAttribute of Modifier.options.observedAttributes) {
|
|
182
|
+
observe(modifier, observedAttribute);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
179
185
|
map.set(attributeName, modifier);
|
|
180
186
|
modifier.element = el;
|
|
181
187
|
modifier.selector = attributeName;
|
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rhtml/custom-attributes",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.110",
|
|
4
4
|
"description": "Custom Attribute Registry",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "npx parcel ./examples/index.html --out-dir build/examples",
|
|
@@ -15,9 +15,7 @@
|
|
|
15
15
|
"type": "git",
|
|
16
16
|
"url": "git@github.com:rhtml/rhtml.git"
|
|
17
17
|
},
|
|
18
|
-
"dependencies": {
|
|
19
|
-
"@rxdi/lit-html": "^0.7.133"
|
|
20
|
-
},
|
|
18
|
+
"dependencies": {},
|
|
21
19
|
"devDependencies": {
|
|
22
20
|
"eslint": "^6.7.2",
|
|
23
21
|
"eslint-config-prettier": "^6.7.0",
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
export type
|
|
1
|
+
export type C<T> = new (...args: never[]) => T;
|
|
2
|
+
|
|
3
|
+
export interface Constructor<T> extends C<T> {
|
|
4
|
+
options: ModifierOptions;
|
|
5
|
+
}
|
|
2
6
|
|
|
3
7
|
const noop = function() {
|
|
4
8
|
/* */
|
|
@@ -7,7 +11,9 @@ const noop = function() {
|
|
|
7
11
|
interface ModifierOptions {
|
|
8
12
|
selector: string;
|
|
9
13
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
14
|
+
observedAttributes?: string[];
|
|
10
15
|
}
|
|
16
|
+
|
|
11
17
|
interface InputOptions {
|
|
12
18
|
/**
|
|
13
19
|
* If enabled will trigger OnUpdate method on the Attribute
|
|
@@ -79,7 +85,7 @@ export abstract class Attribute<T = {}> {
|
|
|
79
85
|
public element?: HTMLElement;
|
|
80
86
|
public value?: string;
|
|
81
87
|
public selector?: string;
|
|
82
|
-
public parent?: HTMLElement
|
|
88
|
+
public parent?: HTMLElement;
|
|
83
89
|
setStyles(keys: T) {
|
|
84
90
|
return (div: HTMLElement | Element | HTMLDivElement) => {
|
|
85
91
|
for (const [key, value] of Object.entries(keys)) {
|
|
@@ -111,7 +117,7 @@ export class CustomAttributeRegistry {
|
|
|
111
117
|
> = new WeakMap();
|
|
112
118
|
private observer: MutationObserver;
|
|
113
119
|
|
|
114
|
-
constructor(private parent: HTMLElement
|
|
120
|
+
constructor(private parent: HTMLElement) {
|
|
115
121
|
if (!parent) {
|
|
116
122
|
throw new Error('Must be given a parent element');
|
|
117
123
|
}
|
|
@@ -215,8 +221,13 @@ export class CustomAttributeRegistry {
|
|
|
215
221
|
const attribute = el.getAttribute(attributeName);
|
|
216
222
|
|
|
217
223
|
if (!modifier) {
|
|
218
|
-
const
|
|
219
|
-
const modifier = new
|
|
224
|
+
const Modifier = this.getConstructor(attributeName);
|
|
225
|
+
const modifier = new Modifier();
|
|
226
|
+
if (Modifier.options?.observedAttributes?.length) {
|
|
227
|
+
for (const observedAttribute of Modifier.options.observedAttributes) {
|
|
228
|
+
observe(modifier, observedAttribute);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
220
231
|
map.set(attributeName, modifier);
|
|
221
232
|
modifier.element = el;
|
|
222
233
|
modifier.selector = attributeName;
|