vsn 0.1.76 → 0.1.79
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/demo/vsn.js +3 -2
- package/dist/AST/ClassNode.js +31 -28
- package/dist/AST/ClassNode.js.map +1 -1
- package/dist/Attribute.d.ts +5 -2
- package/dist/Attribute.js +39 -8
- package/dist/Attribute.js.map +1 -1
- package/dist/Component.d.ts +4 -0
- package/dist/Component.js +42 -0
- package/dist/Component.js.map +1 -0
- package/dist/DOM/DOMObject.d.ts +3 -0
- package/dist/DOM/DOMObject.js +14 -0
- package/dist/DOM/DOMObject.js.map +1 -1
- package/dist/DOM.js +31 -45
- package/dist/DOM.js.map +1 -1
- package/dist/Registry.d.ts +4 -2
- package/dist/Registry.js +6 -0
- package/dist/Registry.js.map +1 -1
- package/dist/Tag.d.ts +4 -2
- package/dist/Tag.js +163 -99
- package/dist/Tag.js.map +1 -1
- package/dist/attributes/ComponentAttribute.d.ts +5 -0
- package/dist/attributes/ComponentAttribute.js +105 -0
- package/dist/attributes/ComponentAttribute.js.map +1 -0
- package/dist/attributes/ListItem.d.ts +0 -1
- package/dist/attributes/ListItem.js +0 -7
- package/dist/attributes/ListItem.js.map +1 -1
- package/dist/attributes/TemplateAttribute.d.ts +5 -0
- package/dist/attributes/TemplateAttribute.js +89 -0
- package/dist/attributes/TemplateAttribute.js.map +1 -0
- package/dist/attributes/_imports.d.ts +2 -1
- package/dist/attributes/_imports.js +5 -3
- package/dist/attributes/_imports.js.map +1 -1
- package/dist/custom-elements.d.ts +9 -0
- package/dist/custom-elements.js +44 -0
- package/dist/custom-elements.js.map +1 -0
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/vsn.d.ts +2 -0
- package/dist/vsn.js +5 -0
- package/dist/vsn.js.map +1 -1
- package/dist/vsn.min.js +3 -0
- package/dist/vsn.min.js.LICENSE.txt +9 -0
- package/package.json +2 -2
- package/src/AST/ClassNode.ts +5 -3
- package/src/Attribute.ts +19 -8
- package/src/Component.ts +24 -0
- package/src/DOM/DOMObject.ts +11 -0
- package/src/DOM.ts +8 -10
- package/src/Registry.ts +9 -3
- package/src/Tag.ts +70 -50
- package/src/attributes/ComponentAttribute.ts +24 -0
- package/src/attributes/ListItem.ts +0 -4
- package/src/attributes/TemplateAttribute.ts +12 -0
- package/src/attributes/_imports.ts +2 -1
- package/src/custom-elements.ts +46 -0
- package/src/version.ts +2 -1
- package/src/vsn.ts +6 -0
- package/test/AST/ClassNode.spec.ts +1 -1
- package/dist/attributes/Template.d.ts +0 -4
- package/dist/attributes/Template.js +0 -39
- package/dist/attributes/Template.js.map +0 -1
- package/src/attributes/Template.ts +0 -7
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
|
4
|
+
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
5
|
+
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
6
|
+
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
7
|
+
* Code distributed by Google as part of the polymer project is also
|
|
8
|
+
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
9
|
+
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vsn",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.79",
|
|
4
4
|
"description": "SEO Friendly Javascript/Typescript Framework",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"framework",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"main": "./dist/vsn.js",
|
|
15
15
|
"scripts": {
|
|
16
16
|
"build": "rm -rf ./dist/ && npm run-script version && tsc",
|
|
17
|
-
"version": "echo
|
|
17
|
+
"version": "echo \"export const VERSION = '${npm_package_version}';\n\" > src/version.ts",
|
|
18
18
|
"build_dev": "rm -rf ./dist/ && webpack --env BUILD=development BENCHMARK=1",
|
|
19
19
|
"demo": "webpack --env BUILD=production BENCHMARK=1 && cp ./dist/vsn.min.js ./demo/vsn.js",
|
|
20
20
|
"test": "karma start --single-run",
|
package/src/AST/ClassNode.ts
CHANGED
|
@@ -147,9 +147,11 @@ export class ClassNode extends Node implements TreeNode {
|
|
|
147
147
|
if (element.id)
|
|
148
148
|
localSelectors.push(`#${element.id}`);
|
|
149
149
|
|
|
150
|
-
for (const selector
|
|
151
|
-
|
|
152
|
-
|
|
150
|
+
for (const selector of localSelectors) {
|
|
151
|
+
const parentSelectors = ClassNode.classParents[selector];
|
|
152
|
+
if (parentSelectors) {
|
|
153
|
+
fullSelectors.push(...parentSelectors.filter(s => !fullSelectors.includes(s)));
|
|
154
|
+
}
|
|
153
155
|
}
|
|
154
156
|
|
|
155
157
|
if (!tag) {
|
package/src/Attribute.ts
CHANGED
|
@@ -19,13 +19,18 @@ export abstract class Attribute extends EventDispatcher {
|
|
|
19
19
|
|
|
20
20
|
constructor(
|
|
21
21
|
public readonly tag: Tag,
|
|
22
|
-
public readonly attributeName: string
|
|
22
|
+
public readonly attributeName: string,
|
|
23
|
+
public readonly slot?: Tag
|
|
23
24
|
) {
|
|
24
25
|
super();
|
|
25
26
|
this.configure();
|
|
26
27
|
if (VisionHelper.window) VisionHelper.window['Attributes'].push(this);
|
|
27
28
|
}
|
|
28
29
|
|
|
30
|
+
public get origin(): Tag {
|
|
31
|
+
return this.slot || this.tag;
|
|
32
|
+
}
|
|
33
|
+
|
|
29
34
|
public get state(): AttributeState {
|
|
30
35
|
return this._state;
|
|
31
36
|
}
|
|
@@ -54,15 +59,15 @@ export abstract class Attribute extends EventDispatcher {
|
|
|
54
59
|
};
|
|
55
60
|
|
|
56
61
|
public getAttributeValue(fallback: any = null) {
|
|
57
|
-
return this.
|
|
62
|
+
return this.origin.getRawAttributeValue(this.attributeName, fallback);
|
|
58
63
|
}
|
|
59
64
|
|
|
60
65
|
public getAttributeBinding(fallback: any = null): string {
|
|
61
|
-
return this.
|
|
66
|
+
return this.origin.getAttributeBinding(this.attributeName) || fallback;
|
|
62
67
|
}
|
|
63
68
|
|
|
64
69
|
public getAttributeModifiers(fallback: any = []): string[] {
|
|
65
|
-
const modifiers = this.
|
|
70
|
+
const modifiers = this.origin.getAttributeModifiers(this.attributeName);
|
|
66
71
|
return modifiers.length && modifiers || fallback;
|
|
67
72
|
}
|
|
68
73
|
|
|
@@ -73,11 +78,17 @@ export abstract class Attribute extends EventDispatcher {
|
|
|
73
78
|
public mutate(mutation: MutationRecord): void {}
|
|
74
79
|
|
|
75
80
|
public set value(value: string) {
|
|
76
|
-
this.
|
|
81
|
+
this.origin.element.setAttribute(this.attributeName, value);
|
|
77
82
|
}
|
|
78
83
|
|
|
79
84
|
public get value(): string {
|
|
80
|
-
return this.
|
|
85
|
+
return this.origin.element.getAttribute(this.attributeName) || '';
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
public async apply(fnc: Function) {
|
|
89
|
+
for (const element of this.origin.delegates) {
|
|
90
|
+
await fnc(element);
|
|
91
|
+
}
|
|
81
92
|
}
|
|
82
93
|
|
|
83
94
|
private setState(state: AttributeState) {
|
|
@@ -90,7 +101,7 @@ export abstract class Attribute extends EventDispatcher {
|
|
|
90
101
|
});
|
|
91
102
|
}
|
|
92
103
|
|
|
93
|
-
public static create(tag: Tag, attributeName: string, cls: any): Attribute {
|
|
94
|
-
return new cls(tag, attributeName);
|
|
104
|
+
public static create(tag: Tag, attributeName: string, cls: any, slot?: Tag): Attribute {
|
|
105
|
+
return new cls(tag, attributeName, slot);
|
|
95
106
|
}
|
|
96
107
|
}
|
package/src/Component.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import {Registry} from "./Registry";
|
|
2
|
+
import {DOM} from "./DOM";
|
|
3
|
+
|
|
4
|
+
export class Component extends HTMLElement {
|
|
5
|
+
protected readonly shadow: ShadowRoot;
|
|
6
|
+
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
Object.setPrototypeOf(this, Component.prototype);
|
|
10
|
+
|
|
11
|
+
this.shadow = this.attachShadow({mode: 'open'});
|
|
12
|
+
const templateId = this.getAttribute('template');
|
|
13
|
+
let template: HTMLTemplateElement;
|
|
14
|
+
|
|
15
|
+
if (templateId) {
|
|
16
|
+
template = document.getElementById(templateId) as HTMLTemplateElement;
|
|
17
|
+
} else {
|
|
18
|
+
template = Registry.instance.templates.getSynchronous(this.tagName.toLowerCase());
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
this.shadow.appendChild(template.content.cloneNode(true));
|
|
22
|
+
DOM.instance.buildFrom(this.shadow);
|
|
23
|
+
}
|
|
24
|
+
}
|
package/src/DOM/DOMObject.ts
CHANGED
|
@@ -11,12 +11,23 @@ export abstract class DOMObject extends EventDispatcher {
|
|
|
11
11
|
protected _scope: Scope;
|
|
12
12
|
protected onEventHandlers: {[key:string]: IEventHandler[]};
|
|
13
13
|
protected _uniqueScope: boolean = false;
|
|
14
|
+
protected slot: HTMLSlotElement;
|
|
15
|
+
public readonly delegates: HTMLElement[] = [];
|
|
14
16
|
|
|
15
17
|
constructor(
|
|
16
18
|
public readonly element: HTMLElement,
|
|
17
19
|
props
|
|
18
20
|
) {
|
|
19
21
|
super();
|
|
22
|
+
if (this.isSlot) {
|
|
23
|
+
this.delegates.push(...(element as HTMLSlotElement).assignedNodes() as HTMLElement[]);
|
|
24
|
+
}
|
|
25
|
+
if (element.assignedSlot)
|
|
26
|
+
this.slot = element.assignedSlot;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
public get isSlot(): boolean {
|
|
30
|
+
return this.element instanceof HTMLSlotElement;
|
|
20
31
|
}
|
|
21
32
|
|
|
22
33
|
public get scope(): Scope {
|
package/src/DOM.ts
CHANGED
|
@@ -8,6 +8,7 @@ import {WrappedDocument} from "./DOM/WrappedDocument";
|
|
|
8
8
|
import {Scope} from "./Scope";
|
|
9
9
|
import {EventDispatcher} from "./EventDispatcher";
|
|
10
10
|
import {ClassNode} from "./AST/ClassNode";
|
|
11
|
+
import {Registry} from "./Registry";
|
|
11
12
|
|
|
12
13
|
export enum EQuerySelectDirection {
|
|
13
14
|
ALL,
|
|
@@ -237,7 +238,6 @@ export class DOM extends EventDispatcher {
|
|
|
237
238
|
childList: true,
|
|
238
239
|
subtree: true
|
|
239
240
|
});
|
|
240
|
-
await ClassNode.checkForClassChanges(tag.element, this, tag);
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
if (isRoot) {
|
|
@@ -250,11 +250,11 @@ export class DOM extends EventDispatcher {
|
|
|
250
250
|
async getTagsForElements(elements: Element[], create: boolean = false) {
|
|
251
251
|
const tags: TagList = new TagList();
|
|
252
252
|
const found: Element[] = [];
|
|
253
|
-
|
|
254
|
-
{
|
|
255
|
-
if (
|
|
256
|
-
tags.push(
|
|
257
|
-
found.push(
|
|
253
|
+
|
|
254
|
+
for (const element of elements) {
|
|
255
|
+
if (element[Tag.TaggedVariable]) {
|
|
256
|
+
tags.push(element[Tag.TaggedVariable]);
|
|
257
|
+
found.push(element);
|
|
258
258
|
}
|
|
259
259
|
}
|
|
260
260
|
|
|
@@ -276,10 +276,8 @@ export class DOM extends EventDispatcher {
|
|
|
276
276
|
}
|
|
277
277
|
|
|
278
278
|
async getTagForElement(element: Element, create: boolean = false) {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
return tag;
|
|
282
|
-
}
|
|
279
|
+
if (element[Tag.TaggedVariable])
|
|
280
|
+
return element[Tag.TaggedVariable];
|
|
283
281
|
|
|
284
282
|
if (element && create) {
|
|
285
283
|
if (element instanceof HTMLElement)
|
package/src/Registry.ts
CHANGED
|
@@ -13,9 +13,9 @@ export function register(store: string, key: string = null, setup: () => void =
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
export class RegistryStore extends EventDispatcher {
|
|
16
|
+
export class RegistryStore<T = any> extends EventDispatcher {
|
|
17
17
|
private timeouts = {};
|
|
18
|
-
private readonly store: {[key: string]:
|
|
18
|
+
private readonly store: {[key: string]: T};
|
|
19
19
|
|
|
20
20
|
constructor(defaults = null) {
|
|
21
21
|
super();
|
|
@@ -62,6 +62,7 @@ export class RegistryStore extends EventDispatcher {
|
|
|
62
62
|
|
|
63
63
|
export class Registry extends EventDispatcher {
|
|
64
64
|
protected static _instance: Registry;
|
|
65
|
+
public readonly components: RegistryStore;
|
|
65
66
|
public readonly functions: RegistryStore;
|
|
66
67
|
public readonly controllers: RegistryStore;
|
|
67
68
|
public readonly classes: RegistryStore;
|
|
@@ -74,17 +75,22 @@ export class Registry extends EventDispatcher {
|
|
|
74
75
|
|
|
75
76
|
constructor() {
|
|
76
77
|
super();
|
|
78
|
+
this.components = new RegistryStore();
|
|
77
79
|
this.functions = new RegistryStore();
|
|
78
80
|
this.controllers = new RegistryStore();
|
|
79
81
|
this.classes = new RegistryStore();
|
|
80
82
|
this.models = new RegistryStore();
|
|
81
|
-
this.templates = new RegistryStore();
|
|
83
|
+
this.templates = new RegistryStore<HTMLTemplateElement>();
|
|
82
84
|
this.types = new RegistryStore();
|
|
83
85
|
this.validators = new RegistryStore();
|
|
84
86
|
this.formats = new RegistryStore();
|
|
85
87
|
this.attributes = new RegistryStore();
|
|
86
88
|
}
|
|
87
89
|
|
|
90
|
+
public static component(key: string = null, setup = null) {
|
|
91
|
+
return register('components', key, setup);
|
|
92
|
+
}
|
|
93
|
+
|
|
88
94
|
public static function(key: string = null, setup = null) {
|
|
89
95
|
return register('functions', key, setup);
|
|
90
96
|
}
|
package/src/Tag.ts
CHANGED
|
@@ -6,7 +6,6 @@ import {VisionHelper} from "./helpers/VisionHelper";
|
|
|
6
6
|
import {StandardAttribute} from "./attributes/StandardAttribute";
|
|
7
7
|
import {On} from "./attributes/On";
|
|
8
8
|
import {Registry} from "./Registry";
|
|
9
|
-
import {benchmarkEnd, benchmarkStart} from "./Bencmark";
|
|
10
9
|
import {DOMObject} from "./DOM/DOMObject";
|
|
11
10
|
import {Tree} from "./AST";
|
|
12
11
|
import {StyleAttribute} from "./attributes/StyleAttribute";
|
|
@@ -73,10 +72,14 @@ export class Tag extends DOMObject {
|
|
|
73
72
|
}
|
|
74
73
|
|
|
75
74
|
protected onAttributeStateChange(event) {
|
|
76
|
-
if (event.previouseState === AttributeState.Deferred)
|
|
75
|
+
if (event.previouseState === AttributeState.Deferred) // @todo: what is this?
|
|
77
76
|
this._nonDeferredAttributes.length = 0;
|
|
78
77
|
}
|
|
79
78
|
|
|
79
|
+
public getAttributesWithState(state: AttributeState): Attribute[] {
|
|
80
|
+
return this.attributes.filter(attr => attr.state === state);
|
|
81
|
+
}
|
|
82
|
+
|
|
80
83
|
public get nonDeferredAttributes(): Attribute[] {
|
|
81
84
|
if (this._nonDeferredAttributes.length > 0)
|
|
82
85
|
return this._nonDeferredAttributes;
|
|
@@ -408,6 +411,14 @@ export class Tag extends DOMObject {
|
|
|
408
411
|
return this.parsedAttributes[key] && this.parsedAttributes[key][index] || fallback;
|
|
409
412
|
}
|
|
410
413
|
|
|
414
|
+
public async getTagsToBuild() {
|
|
415
|
+
if (this.isSlot) {
|
|
416
|
+
return await DOM.instance.getTagsForElements(this.delegates, true);
|
|
417
|
+
} else {
|
|
418
|
+
return [this];
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
411
422
|
public async buildAttributes() {
|
|
412
423
|
let requiresScope = false;
|
|
413
424
|
let defer: boolean = false;
|
|
@@ -420,81 +431,93 @@ export class Tag extends DOMObject {
|
|
|
420
431
|
defer = true;
|
|
421
432
|
}
|
|
422
433
|
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
434
|
+
const tags: Tag[] = await this.getTagsToBuild() as Tag[];
|
|
435
|
+
const slot: Tag = this.isSlot ? this : null;
|
|
436
|
+
for (const tag of tags) {
|
|
437
|
+
for (let attr in this.rawAttributes) {
|
|
438
|
+
if (this.hasModifier(attr, 'mobile')) {
|
|
439
|
+
if (!isMobile) {
|
|
440
|
+
continue;
|
|
441
|
+
}
|
|
427
442
|
}
|
|
428
|
-
}
|
|
429
443
|
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
444
|
+
if (this.hasModifier(attr, 'desktop')) {
|
|
445
|
+
if (isMobile) {
|
|
446
|
+
continue;
|
|
447
|
+
}
|
|
433
448
|
}
|
|
434
|
-
}
|
|
435
449
|
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
450
|
+
const attrClass = await this.getAttributeClass(attr);
|
|
451
|
+
if (attrClass) {
|
|
452
|
+
if (attrClass.scoped)
|
|
453
|
+
requiresScope = true;
|
|
454
|
+
|
|
455
|
+
const attrObj = attrClass.create(tag, attr, attrClass, slot);
|
|
456
|
+
tag.attributes.push(attrObj);
|
|
457
|
+
if (defer && attrClass.canDefer) {
|
|
458
|
+
await attrObj.defer();
|
|
459
|
+
tag.deferredAttributes.push(attrObj);
|
|
460
|
+
attrObj.on('state', tag.onAttributeStateChange, tag);
|
|
461
|
+
}
|
|
447
462
|
}
|
|
448
463
|
}
|
|
449
|
-
}
|
|
450
464
|
|
|
451
|
-
|
|
452
|
-
|
|
465
|
+
if (tag.element.getAttribute('id'))
|
|
466
|
+
requiresScope = true;
|
|
453
467
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
468
|
+
if (requiresScope && !tag.uniqueScope) {
|
|
469
|
+
tag._uniqueScope = true;
|
|
470
|
+
}
|
|
457
471
|
|
|
472
|
+
}
|
|
458
473
|
this._state = TagState.AttributesBuilt;
|
|
459
474
|
}
|
|
460
475
|
|
|
461
476
|
public async compileAttributes() {
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
477
|
+
const tags: Tag[] = await this.getTagsToBuild() as Tag[];
|
|
478
|
+
for (const tag of tags) {
|
|
479
|
+
for (const attr of tag.getAttributesWithState(AttributeState.Instantiated)) {
|
|
480
|
+
await attr.compile();
|
|
481
|
+
}
|
|
465
482
|
|
|
483
|
+
}
|
|
466
484
|
this._state = TagState.AttributesCompiled;
|
|
467
485
|
}
|
|
468
486
|
|
|
469
487
|
public async setupAttributes() {
|
|
470
|
-
|
|
471
|
-
for (const
|
|
472
|
-
|
|
488
|
+
const tags: Tag[] = await this.getTagsToBuild() as Tag[];
|
|
489
|
+
for (const tag of tags) {
|
|
490
|
+
for (const attr of tag.getAttributesWithState(AttributeState.Compiled)) {
|
|
491
|
+
await attr.setup();
|
|
492
|
+
}
|
|
473
493
|
}
|
|
474
|
-
if (
|
|
475
|
-
|
|
476
|
-
if (VisionHelper.doBenchmark) benchmarkEnd('Tag.setupAttributes', 'register');
|
|
477
|
-
|
|
494
|
+
if (!this.isSlot)
|
|
495
|
+
this.dom.registerElementInRoot(this);
|
|
478
496
|
this._state = TagState.AttributesSetup;
|
|
479
497
|
this.callOnWrapped('$setup');
|
|
480
|
-
if (VisionHelper.doBenchmark) benchmarkEnd('Tag.setupAttributes', '$setup');
|
|
481
498
|
}
|
|
482
499
|
|
|
483
500
|
public async extractAttributes() {
|
|
484
|
-
|
|
485
|
-
|
|
501
|
+
const tags: Tag[] = await this.getTagsToBuild() as Tag[];
|
|
502
|
+
for (const tag of tags) {
|
|
503
|
+
for (const attr of tag.getAttributesWithState(AttributeState.Setup)) {
|
|
504
|
+
await attr.extract();
|
|
505
|
+
}
|
|
486
506
|
}
|
|
487
507
|
this._state = TagState.AttributesExtracted;
|
|
488
508
|
this.callOnWrapped('$extracted');
|
|
489
509
|
}
|
|
490
510
|
|
|
491
511
|
public async connectAttributes() {
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
512
|
+
const tags: Tag[] = await this.getTagsToBuild() as Tag[];
|
|
513
|
+
for (const tag of tags) {
|
|
514
|
+
if (tag.isInput) {
|
|
515
|
+
tag.addEventHandler('input', [], tag.inputMutation, tag);
|
|
516
|
+
}
|
|
495
517
|
|
|
496
|
-
|
|
497
|
-
|
|
518
|
+
for (const attr of tag.getAttributesWithState(AttributeState.Extracted)) {
|
|
519
|
+
await attr.connect();
|
|
520
|
+
}
|
|
498
521
|
}
|
|
499
522
|
this._state = TagState.AttributesConnected;
|
|
500
523
|
this.callOnWrapped('$bound');
|
|
@@ -514,16 +537,13 @@ export class Tag extends DOMObject {
|
|
|
514
537
|
option.removeAttribute('selected');
|
|
515
538
|
}
|
|
516
539
|
}
|
|
517
|
-
//this.element.setAttribute('value', );
|
|
518
540
|
this.value = values.join(',');
|
|
519
541
|
} else {
|
|
520
|
-
//this.element.setAttribute('value', e.target.value);
|
|
521
|
-
//(this.element as any).value = e.target.value;
|
|
522
542
|
this.value = e.target.value;
|
|
523
543
|
}
|
|
524
544
|
}
|
|
525
545
|
|
|
526
|
-
public finalize()
|
|
546
|
+
public async finalize() {
|
|
527
547
|
this._state = TagState.Built;
|
|
528
548
|
this.callOnWrapped('$built', this, this.scope, this.element);
|
|
529
549
|
VisionHelper.nice(this.setupDeferredAttributes.bind(this));
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import {Registry} from "../Registry";
|
|
2
|
+
import {TemplateAttribute} from "./TemplateAttribute";
|
|
3
|
+
import {Component} from "../Component";
|
|
4
|
+
|
|
5
|
+
@Registry.attribute('vsn-component')
|
|
6
|
+
export class ComponentAttribute extends TemplateAttribute {
|
|
7
|
+
public static readonly scoped: boolean = true;
|
|
8
|
+
|
|
9
|
+
public async extract() {
|
|
10
|
+
const name = this.getAttributeBinding();
|
|
11
|
+
if (!Registry.instance.components.has(name)) {
|
|
12
|
+
await super.extract();
|
|
13
|
+
const clsName = this.getAttributeValue();
|
|
14
|
+
let cls = Component;
|
|
15
|
+
if (clsName) {
|
|
16
|
+
cls = await Registry.instance.components.get(clsName);
|
|
17
|
+
if (!cls) {
|
|
18
|
+
throw new Error(`Component ${clsName} not found`);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
Registry.instance.components.register(name, cls);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import {Registry} from "../Registry";
|
|
2
|
+
import {Attribute} from "../Attribute";
|
|
3
|
+
|
|
4
|
+
@Registry.attribute('vsn-template')
|
|
5
|
+
export class TemplateAttribute extends Attribute {
|
|
6
|
+
public static readonly canDefer: boolean = false;
|
|
7
|
+
|
|
8
|
+
public async extract() {
|
|
9
|
+
Registry.instance.templates.register(this.getAttributeBinding(), this.tag.element);
|
|
10
|
+
await super.extract();
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export {AddClassIf} from "./AddClassIf";
|
|
2
2
|
export {Bind} from "./Bind";
|
|
3
|
+
export {ComponentAttribute} from './ComponentAttribute';
|
|
3
4
|
export {ControllerAttribute} from "./ControllerAttribute";
|
|
4
5
|
export {DisableIf} from "./DisableIf";
|
|
5
6
|
export {Exec} from "./Exec";
|
|
@@ -23,5 +24,5 @@ export {ScriptAttribute} from "./ScriptAttribute";
|
|
|
23
24
|
export {SetAttribute} from "./SetAttribute";
|
|
24
25
|
export {StandardAttribute} from "./StandardAttribute";
|
|
25
26
|
export {StyleAttribute} from "./StyleAttribute";
|
|
26
|
-
export {
|
|
27
|
+
export {TemplateAttribute} from "./TemplateAttribute";
|
|
27
28
|
export {TypeAttribute} from "./TypeAttribute";
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
|
4
|
+
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
5
|
+
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
6
|
+
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
7
|
+
* Code distributed by Google as part of the polymer project is also
|
|
8
|
+
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* This shim allows elements written in, or compiled to, ES5 to work on native
|
|
13
|
+
* implementations of Custom Elements v1. It sets new.target to the value of
|
|
14
|
+
* this.constructor so that the native HTMLElement constructor can access the
|
|
15
|
+
* current under-construction element's definition.
|
|
16
|
+
*/
|
|
17
|
+
(function() {
|
|
18
|
+
if (
|
|
19
|
+
// No Reflect, no classes, no need for shim because native custom elements
|
|
20
|
+
// require ES2015 classes or Reflect.
|
|
21
|
+
window.Reflect === undefined ||
|
|
22
|
+
window.customElements === undefined ||
|
|
23
|
+
// The webcomponentsjs custom elements polyfill doesn't require
|
|
24
|
+
// ES2015-compatible construction (`super()` or `Reflect.construct`).
|
|
25
|
+
window.customElements['polyfillWrapFlushCallback']
|
|
26
|
+
) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
const BuiltInHTMLElement = HTMLElement;
|
|
30
|
+
/**
|
|
31
|
+
* With jscompiler's RECOMMENDED_FLAGS the function name will be optimized away.
|
|
32
|
+
* However, if we declare the function as a property on an object literal, and
|
|
33
|
+
* use quotes for the property name, then closure will leave that much intact,
|
|
34
|
+
* which is enough for the JS VM to correctly set Function.prototype.name.
|
|
35
|
+
*/
|
|
36
|
+
const wrapperForTheName = {
|
|
37
|
+
'HTMLElement': /** @this {!Object} */ function HTMLElement() {
|
|
38
|
+
return Reflect.construct(
|
|
39
|
+
BuiltInHTMLElement, [], /** @type {!Function} */ (this.constructor));
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
window.HTMLElement = wrapperForTheName['HTMLElement'] as any;
|
|
43
|
+
HTMLElement.prototype = BuiltInHTMLElement.prototype;
|
|
44
|
+
HTMLElement.prototype.constructor = HTMLElement;
|
|
45
|
+
Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);
|
|
46
|
+
})();
|
package/src/version.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export const VERSION = '0.1.
|
|
1
|
+
export const VERSION = '0.1.79';
|
|
2
|
+
|
package/src/vsn.ts
CHANGED
|
@@ -9,6 +9,7 @@ import {EventDispatcher} from "./EventDispatcher";
|
|
|
9
9
|
import {DynamicScopeData} from "./Scope/DynamicScopeData";
|
|
10
10
|
import {Controller} from "./Controller";
|
|
11
11
|
import {VERSION} from "./version";
|
|
12
|
+
import './custom-elements';
|
|
12
13
|
|
|
13
14
|
export class Vision extends EventDispatcher {
|
|
14
15
|
protected static _instance: Vision;
|
|
@@ -18,6 +19,7 @@ export class Vision extends EventDispatcher {
|
|
|
18
19
|
|
|
19
20
|
constructor() {
|
|
20
21
|
super();
|
|
22
|
+
Registry.instance.components.on('register', this.defineComponent, this);
|
|
21
23
|
if (VisionHelper.document) {
|
|
22
24
|
document.addEventListener(
|
|
23
25
|
"DOMContentLoaded",
|
|
@@ -44,6 +46,10 @@ export class Vision extends EventDispatcher {
|
|
|
44
46
|
}
|
|
45
47
|
}
|
|
46
48
|
|
|
49
|
+
protected defineComponent(name, cls) {
|
|
50
|
+
customElements.define(name, cls);
|
|
51
|
+
}
|
|
52
|
+
|
|
47
53
|
public get dom(): DOM {
|
|
48
54
|
return this._dom;
|
|
49
55
|
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __extends = (this && this.__extends) || (function () {
|
|
3
|
-
var extendStatics = function (d, b) {
|
|
4
|
-
extendStatics = Object.setPrototypeOf ||
|
|
5
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
-
return extendStatics(d, b);
|
|
8
|
-
};
|
|
9
|
-
return function (d, b) {
|
|
10
|
-
if (typeof b !== "function" && b !== null)
|
|
11
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
-
extendStatics(d, b);
|
|
13
|
-
function __() { this.constructor = d; }
|
|
14
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
-
};
|
|
16
|
-
})();
|
|
17
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
18
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
19
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
20
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
21
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
22
|
-
};
|
|
23
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
24
|
-
exports.Template = void 0;
|
|
25
|
-
var Registry_1 = require("../Registry");
|
|
26
|
-
var Attribute_1 = require("../Attribute");
|
|
27
|
-
var Template = /** @class */ (function (_super) {
|
|
28
|
-
__extends(Template, _super);
|
|
29
|
-
function Template() {
|
|
30
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
|
31
|
-
}
|
|
32
|
-
Template.canDefer = false;
|
|
33
|
-
Template = __decorate([
|
|
34
|
-
Registry_1.Registry.attribute('vsn-template')
|
|
35
|
-
], Template);
|
|
36
|
-
return Template;
|
|
37
|
-
}(Attribute_1.Attribute));
|
|
38
|
-
exports.Template = Template;
|
|
39
|
-
//# sourceMappingURL=Template.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Template.js","sourceRoot":"","sources":["../../src/attributes/Template.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAAqC;AACrC,0CAAuC;AAGvC;IAA8B,4BAAS;IAAvC;;IAEA,CAAC;IAD0B,iBAAQ,GAAY,KAAK,CAAC;IADxC,QAAQ;QADpB,mBAAQ,CAAC,SAAS,CAAC,cAAc,CAAC;OACtB,QAAQ,CAEpB;IAAD,eAAC;CAAA,AAFD,CAA8B,qBAAS,GAEtC;AAFY,4BAAQ"}
|