vsn 0.1.20 → 0.1.23
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.
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { Attribute } from "../Attribute";
|
|
2
2
|
export declare class StyleAttribute extends Attribute {
|
|
3
|
+
static readonly canDefer: boolean;
|
|
3
4
|
private scopeRef;
|
|
4
5
|
private styleScope;
|
|
5
6
|
setup(): Promise<void>;
|
|
6
7
|
connect(): Promise<void>;
|
|
7
8
|
extract(): Promise<void>;
|
|
8
9
|
updateFrom(): void;
|
|
10
|
+
updateTo(): void;
|
|
9
11
|
mutate(mutation: MutationRecord): void;
|
|
10
12
|
handleEvent(k: any, v: any): Promise<void>;
|
|
11
13
|
}
|
|
@@ -118,6 +118,7 @@ var StyleAttribute = /** @class */ (function (_super) {
|
|
|
118
118
|
switch (_a.label) {
|
|
119
119
|
case 0:
|
|
120
120
|
this.updateFrom();
|
|
121
|
+
this.updateTo();
|
|
121
122
|
return [4 /*yield*/, _super.prototype.extract.call(this)];
|
|
122
123
|
case 1:
|
|
123
124
|
_a.sent();
|
|
@@ -129,6 +130,10 @@ var StyleAttribute = /** @class */ (function (_super) {
|
|
|
129
130
|
StyleAttribute.prototype.updateFrom = function () {
|
|
130
131
|
var toSkip = [
|
|
131
132
|
'cssText',
|
|
133
|
+
'getPropertyPriority',
|
|
134
|
+
'getPropertyValue',
|
|
135
|
+
'removeProperty',
|
|
136
|
+
'setProperty',
|
|
132
137
|
'length'
|
|
133
138
|
];
|
|
134
139
|
for (var k in this.tag.style) {
|
|
@@ -140,6 +145,16 @@ var StyleAttribute = /** @class */ (function (_super) {
|
|
|
140
145
|
this.styleScope.set(key, value);
|
|
141
146
|
}
|
|
142
147
|
};
|
|
148
|
+
StyleAttribute.prototype.updateTo = function () {
|
|
149
|
+
for (var _i = 0, _a = this.styleScope.keys; _i < _a.length; _i++) {
|
|
150
|
+
var k = _a[_i];
|
|
151
|
+
var v = this.styleScope.get(k);
|
|
152
|
+
if (k.startsWith('$')) {
|
|
153
|
+
var key = k.substr(1);
|
|
154
|
+
this.tag.element.style[key] = v.value;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
};
|
|
143
158
|
StyleAttribute.prototype.mutate = function (mutation) {
|
|
144
159
|
_super.prototype.mutate.call(this, mutation);
|
|
145
160
|
this.updateFrom();
|
|
@@ -158,6 +173,7 @@ var StyleAttribute = /** @class */ (function (_super) {
|
|
|
158
173
|
});
|
|
159
174
|
});
|
|
160
175
|
};
|
|
176
|
+
StyleAttribute.canDefer = false;
|
|
161
177
|
StyleAttribute = __decorate([
|
|
162
178
|
Registry_1.Registry.attribute('vsn-styles')
|
|
163
179
|
], StyleAttribute);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyleAttribute.js","sourceRoot":"","sources":["../../src/attributes/StyleAttribute.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAAqC;AACrC,0CAAuC;AACvC,kCAA+C;AAI/C;IAAoC,kCAAS;IAA7C;;
|
|
1
|
+
{"version":3,"file":"StyleAttribute.js","sourceRoot":"","sources":["../../src/attributes/StyleAttribute.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@ import {Scope, ScopeReference} from "../Scope";
|
|
|
5
5
|
|
|
6
6
|
@Registry.attribute('vsn-styles')
|
|
7
7
|
export class StyleAttribute extends Attribute {
|
|
8
|
+
public static readonly canDefer: boolean = false;
|
|
8
9
|
private scopeRef: ScopeReference;
|
|
9
10
|
private styleScope: Scope;
|
|
10
11
|
|
|
@@ -33,14 +34,19 @@ export class StyleAttribute extends Attribute {
|
|
|
33
34
|
|
|
34
35
|
public async extract() {
|
|
35
36
|
this.updateFrom();
|
|
37
|
+
this.updateTo();
|
|
36
38
|
await super.extract();
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
updateFrom() {
|
|
40
42
|
const toSkip = [
|
|
41
43
|
'cssText',
|
|
44
|
+
'getPropertyPriority',
|
|
45
|
+
'getPropertyValue',
|
|
46
|
+
'removeProperty',
|
|
47
|
+
'setProperty',
|
|
42
48
|
'length'
|
|
43
|
-
]
|
|
49
|
+
];
|
|
44
50
|
for (const k in this.tag.style) {
|
|
45
51
|
if (toSkip.indexOf(k) > -1 || isFinite(k as any))
|
|
46
52
|
continue;
|
|
@@ -51,6 +57,16 @@ export class StyleAttribute extends Attribute {
|
|
|
51
57
|
}
|
|
52
58
|
}
|
|
53
59
|
|
|
60
|
+
public updateTo() {
|
|
61
|
+
for (const k of this.styleScope.keys) {
|
|
62
|
+
const v = this.styleScope.get(k);
|
|
63
|
+
if (k.startsWith('$')) {
|
|
64
|
+
const key = k.substr(1);
|
|
65
|
+
this.tag.element.style[key] = v.value;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
54
70
|
public mutate(mutation: MutationRecord) {
|
|
55
71
|
super.mutate(mutation);
|
|
56
72
|
this.updateFrom();
|
|
@@ -6,14 +6,25 @@ import "../../src/attributes/_imports";
|
|
|
6
6
|
describe('Styles', () => {
|
|
7
7
|
it("vsn-styles to just work", (done) => {
|
|
8
8
|
document.body.innerHTML = `
|
|
9
|
-
<
|
|
9
|
+
<div vsn-name="testing">
|
|
10
|
+
<span id="styling" vsn-styles="testing.styles" style="margin-top: 50px;">testing</span>
|
|
11
|
+
<span id="styling-dupe" vsn-styles="testing.styles" style="margin-top: 50px;">testing 2</span>
|
|
12
|
+
</div>
|
|
10
13
|
`;
|
|
11
14
|
const dom = new DOM(document);
|
|
12
15
|
dom.once('built', async () => {
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
const ele1 = (await dom.get('#styling'))[0];
|
|
17
|
+
const ele2 = (await dom.get('#styling-dupe'))[0];
|
|
18
|
+
const scope = ele1.scope;
|
|
19
|
+
const container = scope.get('testing');
|
|
20
|
+
const styles = container.get('styles');
|
|
21
|
+
expect(container).toBeTruthy();
|
|
22
|
+
expect(styles).toBeTruthy();
|
|
23
|
+
expect(ele1.element.style.marginTop).toBe('50px');
|
|
24
|
+
expect(ele2.element.style.marginTop).toBe('50px');
|
|
25
|
+
styles.set('$marginTop', '-50px');
|
|
26
|
+
expect(ele1.element.style.marginTop).toBe('-50px');
|
|
27
|
+
expect(ele2.element.style.marginTop).toBe('-50px');
|
|
17
28
|
done();
|
|
18
29
|
});
|
|
19
30
|
});
|