@rhtml/custom-attributes 0.0.95 → 0.0.96

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.
Files changed (6) hide show
  1. package/README.md +34 -11
  2. package/dist/index.d.ts +11 -4
  3. package/dist/index.js +27 -15
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/index.ts +37 -21
package/README.md CHANGED
@@ -37,24 +37,47 @@ class BackgroundColor extends Attribute {
37
37
  customAttributes.define('red', BackgroundColor);
38
38
  ```
39
39
 
40
- #### Interface of class Attribute
40
+ #### Usage inside @rxdi/lit-html
41
41
 
42
42
  ```typescript
43
- export abstract class Attribute {
44
- public element: HTMLElement;
45
- public value: string;
46
- public name: string;
43
+ import { Component, LitElement, html } from '@rxdi/lit-html';
47
44
 
48
- OnInit(): void {
49
- /* */
45
+ export class BackgroundColor extends Attribute {
46
+ static options(this: HTMLElement) {
47
+ return {
48
+ name: 'myAttribute',
49
+ registry: CustomAttributeRegistry
50
+ };
50
51
  }
51
52
 
52
- OnDestroy(): void {
53
- /* */
53
+ OnInit() {
54
+ console.log('Attribute initialized');
55
+ this.setColor();
54
56
  }
55
57
 
56
- OnUpdate(_oldValue: string, _newValue: string) {
57
- /* */
58
+ OnDestroy() {
59
+ console.log('Attribute destroyed');
60
+ this.element.style.backgroundColor = null;
61
+ }
62
+
63
+ OnUpdate(oldValue: string, newValue: string) {
64
+ console.log('Attribute updated');
65
+ this.setColor();
66
+ }
67
+
68
+ setColor() {
69
+ this.element.style.backgroundColor = this.value;
58
70
  }
59
71
  }
72
+
73
+ @Component({
74
+ selector: 'home-component',
75
+ modifiers: [BackgroundColor],
76
+ template(this: HomeComponent) {
77
+ return html`
78
+ <div myAttribute="red">Background</div>
79
+ `;
80
+ }
81
+ })
82
+ export class HomeComponent extends LitElement {}
60
83
  ```
package/dist/index.d.ts CHANGED
@@ -1,8 +1,15 @@
1
- export declare type Constructor<T = {}> = new (...args: never[]) => T;
2
- export declare abstract class Attribute {
1
+ export declare type Constructor<T> = new (...args: never[]) => T;
2
+ export interface Options {
3
+ registry: Constructor<CustomAttributeRegistry>;
4
+ name: string;
5
+ }
6
+ export declare abstract class Attribute<T = {}> {
7
+ static options(this: HTMLElement): Options;
3
8
  element?: HTMLElement;
4
9
  value?: string;
5
10
  name?: string;
11
+ parent?: HTMLElement | Document | ShadowRoot;
12
+ setStyles(keys: T): (div: HTMLElement) => void;
6
13
  OnInit(): void;
7
14
  OnDestroy(): void;
8
15
  OnUpdate(_oldValue: string, _newValue: string): void;
@@ -12,9 +19,9 @@ export declare class CustomAttributeRegistry {
12
19
  private _attrMap;
13
20
  private _elementMap;
14
21
  private observer;
15
- constructor(parent: HTMLElement | ShadowRoot);
22
+ constructor(parent: HTMLElement | Document | ShadowRoot);
16
23
  define(attrName: string, Constructor: Constructor<Attribute>): void;
17
- get(element: HTMLElement, attrName: string): Attribute;
24
+ get(element: HTMLElement, attrName: string): Attribute<{}>;
18
25
  private getConstructor;
19
26
  private observe;
20
27
  private upgradeAttribute;
package/dist/index.js CHANGED
@@ -2,12 +2,23 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.CustomAttributeRegistry = exports.Attribute = void 0;
4
4
  class Attribute {
5
+ static options() {
6
+ return;
7
+ }
8
+ setStyles(keys) {
9
+ return (div) => {
10
+ for (const [key, value] of Object.entries(keys)) {
11
+ div.style[key] = value;
12
+ }
13
+ };
14
+ }
5
15
  OnInit() {
6
16
  /* */
7
17
  }
8
18
  OnDestroy() {
9
19
  /* */
10
20
  }
21
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
11
22
  OnUpdate(_oldValue, _newValue) {
12
23
  /* */
13
24
  }
@@ -24,14 +35,14 @@ class CustomAttributeRegistry {
24
35
  this.observe();
25
36
  }
26
37
  define(attrName, Constructor) {
27
- this._attrMap.set(attrName, Constructor);
38
+ this._attrMap.set(attrName.toLowerCase(), Constructor);
28
39
  this.upgradeAttribute(attrName);
29
40
  }
30
41
  get(element, attrName) {
31
42
  const map = this._elementMap.get(element);
32
43
  if (!map)
33
44
  return;
34
- return map.get(attrName);
45
+ return map.get(attrName.toLowerCase());
35
46
  }
36
47
  getConstructor(attrName) {
37
48
  return this._attrMap.get(attrName);
@@ -94,38 +105,39 @@ class CustomAttributeRegistry {
94
105
  }
95
106
  this._elementMap.delete(element);
96
107
  }
97
- found(attrName, el, oldVal) {
108
+ found(attributeName, el, oldVal) {
98
109
  let map = this._elementMap.get(el);
99
110
  if (!map) {
100
111
  map = new Map();
101
112
  this._elementMap.set(el, map);
102
113
  }
103
- const modifier = map.get(attrName);
104
- const newValue = el.getAttribute(attrName);
114
+ const modifier = map.get(attributeName);
115
+ const attribute = el.getAttribute(attributeName);
105
116
  if (!modifier) {
106
- const Constructor = this.getConstructor(attrName);
117
+ const Constructor = this.getConstructor(attributeName);
107
118
  const modifier = new Constructor();
108
- map.set(attrName, modifier);
119
+ map.set(attributeName, modifier);
109
120
  modifier.element = el;
110
- modifier.name = attrName;
111
- modifier.value = newValue;
121
+ modifier.name = attributeName;
122
+ modifier.value = attribute;
123
+ modifier.parent = this.parent;
112
124
  if (modifier.OnInit) {
113
125
  modifier.OnInit();
114
126
  }
115
127
  return;
116
128
  }
117
- if (newValue == null && !!modifier.value) {
118
- modifier.value = newValue;
129
+ if (attribute == null && !!modifier.value) {
130
+ modifier.value = attribute;
119
131
  if (modifier.OnDestroy) {
120
132
  modifier.OnDestroy();
121
133
  }
122
- map.delete(attrName);
134
+ map.delete(attributeName);
123
135
  return;
124
136
  }
125
- if (newValue !== modifier.value) {
126
- modifier.value = newValue;
137
+ if (attribute !== modifier.value) {
138
+ modifier.value = attribute;
127
139
  if (modifier.OnUpdate) {
128
- modifier.OnUpdate(oldVal, newValue);
140
+ modifier.OnUpdate(oldVal, attribute);
129
141
  }
130
142
  return;
131
143
  }
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
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.95",
3
+ "version": "0.0.96",
4
4
  "description": "Custom Attribute Registry",
5
5
  "scripts": {
6
6
  "start": "npx parcel ./examples/index.html --out-dir build/examples",
package/src/index.ts CHANGED
@@ -1,16 +1,32 @@
1
- /* eslint-disable @typescript-eslint/no-unused-vars */
2
- export type Constructor<T = {}> = new (...args: never[]) => T;
1
+ export type Constructor<T> = new (...args: never[]) => T;
3
2
 
4
- export abstract class Attribute {
3
+ export interface Options {
4
+ registry: Constructor<CustomAttributeRegistry>;
5
+ name: string;
6
+ }
7
+
8
+ export abstract class Attribute<T = {}> {
9
+ public static options(this: HTMLElement): Options {
10
+ return;
11
+ }
5
12
  public element?: HTMLElement;
6
13
  public value?: string;
7
14
  public name?: string;
15
+ public parent?: HTMLElement | Document | ShadowRoot;
16
+ setStyles(keys: T) {
17
+ return (div: HTMLElement) => {
18
+ for (const [key, value] of Object.entries(keys)) {
19
+ div.style[key] = value;
20
+ }
21
+ };
22
+ }
8
23
  OnInit(): void {
9
24
  /* */
10
25
  }
11
26
  OnDestroy(): void {
12
27
  /* */
13
28
  }
29
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
14
30
  OnUpdate(_oldValue: string, _newValue: string) {
15
31
  /* */
16
32
  }
@@ -24,7 +40,7 @@ export class CustomAttributeRegistry {
24
40
  > = new WeakMap();
25
41
  private observer: MutationObserver;
26
42
 
27
- constructor(private parent: HTMLElement | ShadowRoot) {
43
+ constructor(private parent: HTMLElement | Document | ShadowRoot) {
28
44
  if (!parent) {
29
45
  throw new Error('Must be given a parent element');
30
46
  }
@@ -32,14 +48,14 @@ export class CustomAttributeRegistry {
32
48
  }
33
49
 
34
50
  define(attrName: string, Constructor: Constructor<Attribute>) {
35
- this._attrMap.set(attrName, Constructor);
51
+ this._attrMap.set(attrName.toLowerCase(), Constructor);
36
52
  this.upgradeAttribute(attrName);
37
53
  }
38
54
 
39
55
  get(element: HTMLElement, attrName: string) {
40
56
  const map = this._elementMap.get(element);
41
57
  if (!map) return;
42
- return map.get(attrName);
58
+ return map.get(attrName.toLowerCase());
43
59
  }
44
60
 
45
61
  private getConstructor(attrName: string) {
@@ -68,7 +84,6 @@ export class CustomAttributeRegistry {
68
84
  }
69
85
  }
70
86
  });
71
-
72
87
  this.observer.observe(this.parent, {
73
88
  childList: true,
74
89
  subtree: true,
@@ -114,42 +129,43 @@ export class CustomAttributeRegistry {
114
129
  this._elementMap.delete(element);
115
130
  }
116
131
 
117
- private found(attrName: string, el: HTMLElement, oldVal?: string) {
132
+ private found(attributeName: string, el: HTMLElement, oldVal?: string) {
118
133
  let map = this._elementMap.get(el);
119
134
  if (!map) {
120
135
  map = new Map();
121
136
  this._elementMap.set(el, map);
122
137
  }
123
138
 
124
- const modifier = map.get(attrName);
125
- const newValue = el.getAttribute(attrName);
139
+ const modifier = map.get(attributeName);
140
+ const attribute = el.getAttribute(attributeName);
126
141
 
127
142
  if (!modifier) {
128
- const Constructor = this.getConstructor(attrName);
143
+ const Constructor = this.getConstructor(attributeName);
129
144
  const modifier = new Constructor();
130
- map.set(attrName, modifier);
145
+ map.set(attributeName, modifier);
131
146
  modifier.element = el;
132
- modifier.name = attrName;
133
- modifier.value = newValue;
147
+ modifier.name = attributeName;
148
+ modifier.value = attribute;
149
+ modifier.parent = this.parent;
150
+
134
151
  if (modifier.OnInit) {
135
152
  modifier.OnInit();
136
153
  }
137
154
  return;
138
155
  }
139
156
 
140
- if (newValue == null && !!modifier.value) {
141
- modifier.value = newValue;
157
+ if (attribute == null && !!modifier.value) {
158
+ modifier.value = attribute;
142
159
  if (modifier.OnDestroy) {
143
160
  modifier.OnDestroy();
144
161
  }
145
- map.delete(attrName);
162
+ map.delete(attributeName);
146
163
  return;
147
164
  }
148
-
149
- if (newValue !== modifier.value) {
150
- modifier.value = newValue;
165
+ if (attribute !== modifier.value) {
166
+ modifier.value = attribute;
151
167
  if (modifier.OnUpdate) {
152
- modifier.OnUpdate(oldVal, newValue);
168
+ modifier.OnUpdate(oldVal, attribute);
153
169
  }
154
170
  return;
155
171
  }