vsn 0.1.148 → 1.0.0

package/src/attributes/List.ts

@@ -1,210 +0,0 @@
-import {Attribute} from "../Attribute";
-import {Tag} from "../Tag";
-import {WrappedArray} from "../Scope/WrappedArray";
-import {ElementHelper} from "../helpers/ElementHelper";
-import {Registry} from "../Registry";
-import {DOM} from "../DOM";
-import {Scope} from "../Scope";
-import {ScopeData} from "../Scope/ScopeData";
-
-@Registry.attribute('vsn-list')
-export class List extends Attribute {
-    public static readonly MetaItemSetupFlag = 'vsn-list-item-setup';
-    public static readonly canDefer: boolean = false;
-    public static readonly scoped: boolean = true;
-
-    public items: any[];
-    public tags: Tag[];
-    protected template: Node;
-
-    public async setup() {
-        if (this.tag.element.children.length > 0) {
-            const template = this.tag.element.children[0];
-            const templateTag: Tag = await this.tag.dom.getTagForElement(template);
-
-            if (template) {
-                if (template.hasAttribute('vsn-template')) {
-                    templateTag.parentTag = this.tag; // Set parentTag before removing from DOM
-                    template.removeAttribute('vsn-template');
-                    this.tag.element.removeChild(template);
-                    this.template = template;
-                } else {
-                    this.template = template.cloneNode(true);
-                }
-            }
-        } else {
-            if (this.tag.hasRawAttribute('template')) {
-                let templateNode = await DOM.instance.exec(this.tag.getRawAttributeValue('template'));
-                if (templateNode instanceof Array && templateNode.length === 1)
-                    templateNode = templateNode[0];
-
-                this.template = templateNode.element.content.cloneNode(true);
-            }
-        }
-        await super.setup();
-    }
-
-    public async extract() {
-        const listAttr: string = this.getAttributeBinding('items');
-        const ref = this.tag.scope.getReference(listAttr);
-        const listScope: Scope = await ref.getScope();
-        const listKey: string = await ref.getKey();
-        const items = listScope.get(listKey);
-        await this.addExistingItems(items);
-
-        listScope.on(`change:${listKey}`, (e) => {
-            if (e?.oldValue) {
-                if (e.oldValue instanceof WrappedArray) {
-                    e.oldValue.map((item) => {
-                        this.remove(item);
-                    });
-                    e.oldValue.offWithContext('add', this);
-                    e.oldValue.offWithContext('remove', this);
-                }
-                this.addExistingItems(e.value);
-            }
-        });
-
-        if (this.tag.hasRawAttribute('initial-items')) {
-            const toAdd: number = parseInt(this.tag.getRawAttributeValue('initial-items'));
-            for (let i = 0; i < toAdd; i++) {
-                await this.add({});
-            }
-        }
-        await super.extract();
-    }
-
-    protected async addExistingItems(defaultList: any[] | null) {
-        this.items = defaultList || new WrappedArray();
-
-        if (this.tags?.length > 0) {
-            for (const tag of this.tags) {
-                tag.deconstruct();
-                tag.removeFromDOM();
-            }
-        }
-
-        this.tags = this.tags || [];
-        this.tags.length = 0;
-
-        if (defaultList)
-            for (const existingItem of defaultList) {
-                await this.add(existingItem);
-            }
-
-        for (const element of Array.from(this.tag.element.querySelectorAll('*'))) {
-            if (!ElementHelper.hasVisionAttribute(element, 'vsn-list-item'))
-                continue;
-
-            const tag: Tag = await this.tag.dom.getTagForElement(element);
-            if (tag) {
-                this.tags.push(tag);
-                let listModel = tag.scope.get(this.listItemName);
-                this.items.push(listModel?.wrapped || listModel || tag.scope.wrapped || tag.scope);
-            }
-        }
-
-        if (!(this.items instanceof WrappedArray)) {
-            this.items = new WrappedArray(this.items);
-        }
-
-        (this.items as WrappedArray<any>).on('add', this.add, this);
-        (this.items as WrappedArray<any>).on('remove', this.remove, this);
-
-        this.tag.scope.set('add', this.add.bind(this));
-        this.tag.scope.set('remove', this.remove.bind(this));
-    }
-
-    public get listItemName(): string {
-        return this.tag.getRawAttributeValue('list-item-name', 'item');
-    }
-
-    public get listItemModel(): string {
-        return this.tag.getRawAttributeValue('list-item-model');
-    }
-
-    public remove(item: any) {
-        for (let i: number = 0; i < this.tags.length; i++) {
-            const tag: Tag = this.tags[i];
-            const listItem = tag.scope.get(this.listItemName);
-            if ([listItem, listItem.data, listItem.wrapped].indexOf(item) > -1) {
-                tag.deconstruct();
-                tag.removeFromDOM();
-                this.tags.splice(i, 1);
-
-                return;
-            }
-        }
-    }
-
-    protected async add(obj) {
-        // Setup new HTML element
-        const clone = this.template.cloneNode(true);
-        let element: HTMLElement;
-        if (clone instanceof DocumentFragment) {
-            element = clone.children[0] as HTMLElement;
-        } else {
-            element = clone as HTMLElement;
-        }
-        delete element[Tag.TaggedVariable];
-
-        // Collect raw data
-        let data;
-        if (obj instanceof ScopeData)
-            data = obj.getData();
-        else
-            data = Object.assign({}, obj);
-
-        // Setup new tag
-        const tag = await this.tag.dom.buildTag(element, true);
-        await this.setupTagScope(tag, obj);
-
-        // Add to DOM & build
-        this.tag.element.appendChild(element);
-        await this.tag.dom.setupTags([tag]);
-        await this.tag.dom.buildFrom(this.tag.element);
-
-        // Make sure we're using the correct data (Template may have vsn-bind values that are not desired)
-        const itemScope = tag.scope.get(this.listItemName);
-        if (itemScope instanceof Scope && data) {
-            itemScope.data.setData(data);
-        }
-
-        this.tags.push(tag);
-        this.tag.dispatch('add', obj);
-    }
-
-    async setupTagScope(tag: Tag, obj: any) {
-        if (tag.meta[List.MetaItemSetupFlag])
-            return;
-
-        tag.createScope(true);
-        const itemScope = new Scope(tag.scope);
-
-        // Setup new scope & model class, if defined
-        const modelName: string = this.listItemModel;
-        let cls;
-        if (modelName)
-            cls = await Registry.instance.models.get(modelName);
-
-        if (cls) {
-            if (!obj || !(obj instanceof cls)) {
-                obj = new cls(obj);
-                this.tag.once('$built', () => {
-                    if (obj['$built'])
-                        obj['$built'](this.tag, this.tag.scope, this.tag.element);
-                });
-            }
-        }
-
-        // Check if the class is set up already
-        if (!cls || (!(itemScope.data instanceof cls) && !(itemScope.wrapped instanceof cls))) {
-            if (itemScope.wrapped)
-                itemScope.unwrap();
-            itemScope.wrap(obj, true, true);
-        }
-
-        tag.scope.set(this.listItemName, itemScope);
-        tag.meta[List.MetaItemSetupFlag] = true;
-    }
-}

package/src/attributes/ListItem.ts

@@ -1,30 +0,0 @@
-import {Attribute} from "../Attribute";
-import {Tag} from "../Tag";
-import {List} from "./List";
-import {Registry} from "../Registry";
-
-@Registry.attribute('vsn-list-item')
-export class ListItem extends Attribute {
-    public static readonly canDefer: boolean = false;
-    public static readonly scoped: boolean = true;
-    public static readonly ERROR_NO_PARENT = "Cannot find list parent.";
-    protected _list: Tag;
-
-    public get list(): Tag {
-        return this._list;
-    }
-
-    public async setup() {
-        this._list = this.tag.findAncestorByAttribute('vsn-list');
-        if (!this._list)
-            throw Error(ListItem.ERROR_NO_PARENT);
-
-        const listAttr = await this.getListAttribute();
-        await listAttr.setupTagScope(this.tag, {});
-        await super.setup();
-    }
-
-    public async getListAttribute(): Promise<List> {
-        return await this._list.getAttribute<List>('vsn-list');
-    }
-}

package/src/attributes/ListItemModel.ts

@@ -1,7 +0,0 @@
-import {Registry} from "../Registry";
-import {Attribute} from "../Attribute";
-
-@Registry.attribute('vsn-list-item-model')
-export class ListItemModel extends Attribute {
-    public static readonly canDefer: boolean = false;
-}

package/src/attributes/ModelAttribute.ts

@@ -1,8 +0,0 @@
-import {ControllerAttribute} from "./ControllerAttribute";
-import {Registry} from "../Registry";
-
-@Registry.attribute('vsn-model')
-export class ModelAttribute extends ControllerAttribute {
-    public static readonly canDefer: boolean = false;
-    public readonly registryName: string = 'models'
-}

package/src/attributes/Name.ts

@@ -1,16 +0,0 @@
-import {Attribute} from "../Attribute";
-import {Scope} from "../Scope";
-import {Registry} from "../Registry";
-
-@Registry.attribute('vsn-name')
-export class Name extends Attribute {
-    public static readonly canDefer: boolean = false;
-    public static readonly scoped: boolean = true;
-
-    public async setup() {
-        const parentScope: Scope = this.tag.scope.parentScope;
-        if (parentScope) {
-            parentScope.set(this.getAttributeValue(), this.tag.scope);
-        }
-    }
-}

package/src/attributes/On.ts

@@ -1,39 +0,0 @@
-import {Attribute} from "../Attribute";
-import {Tree} from "../AST";
-import {Registry} from "../Registry";
-
-@Registry.attribute('vsn-on')
-export abstract class On extends Attribute {
-    protected handler: Tree;
-    public static readonly WindowEvents: string[] = [
-        'abort',
-        'afterprint',
-        'beforeprint',
-        'error',
-        'hashchange',
-        'load',
-        'popstate',
-        'resize',
-        'scroll',
-        'unload',
-    ];
-
-    protected async getTree(): Promise<Tree> {
-        if (!this.handler) {
-            const code: string = this.getAttributeValue();
-            this.handler = new Tree(code);
-            await this.handler.prepare(this.tag.scope, this.tag.dom, this.tag);
-        }
-        return this.handler;
-    }
-
-    async handleEvent(e) {
-        const tree = await this.getTree();
-        await tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
-    }
-
-    public async connect() {
-        this.tag.addEventHandler(this.getAttributeBinding(), this.modifiers, this.handleEvent, this);
-        await super.connect();
-    }
-}

package/src/attributes/PersistAttribute.ts

@@ -1,83 +0,0 @@
-import {Registry} from "../Registry";
-import {Attribute} from "../Attribute";
-import {TagState} from "../Tag";
-
-
-export interface IPersistedValue {
-    attribute: string,
-    value: string
-}
-
-@Registry.attribute('vsn-persist')
-export class PersistAttribute extends Attribute {
-    public static readonly persistedValues: Map<string, Map<string, string | string[]>> = new Map<string, Map<string, string | string[]>>();
-    public static readonly canDefer: boolean = true;
-
-    protected valueKeys: string[] = [];
-
-    public async extract() {
-        this.valueKeys = this.getAttributeValue().split(' ').map((v: string) => v.trim()).filter((v: string) => v.length > 0);
-        await super.extract();
-    }
-
-    public async connect() {
-        const elementId = this.tag.element.id;
-
-        if (!elementId)
-            throw new Error('vsn-persist requires an id attribute on the element');
-
-        const persistedValues = PersistAttribute.getPersistedValueStore(elementId);
-        for (const key of this.valueKeys) {
-            if (persistedValues.has(key)) {
-                if (key === '@class') {
-                    const classes = persistedValues.get(key);
-                    this.tag.element.classList.remove(...Array.from(this.tag.element.classList));
-                    this.tag.element.classList.add(...classes);
-                } else if (key.startsWith('@')) {
-                    this.tag.element.setAttribute(key.substring(1), persistedValues.get(key) as string);
-                    if (this.tag.isInput) {
-                        this.tag.once('$built', () => {
-                            this.tag.element.dispatchEvent(new Event('input'));
-                        });
-                    }
-                } else {
-
-                }
-            }
-        }
-        await super.connect();
-    }
-
-    public mutate(mutation: MutationRecord) {
-        if (this.tag.state !== TagState.Built)
-            return;
-
-        this.updateFrom();
-    }
-
-    protected updateFrom() {
-        const elementId = this.tag.element.id;
-        const persistedValues = PersistAttribute.getPersistedValueStore(elementId);
-
-        for (const key of this.valueKeys) {
-            if (key === '@class') {
-                const classes = Array.from(this.tag.element.classList);
-                persistedValues.set(key, classes);
-            } else if (key.startsWith('@')) {
-                persistedValues.set(key, this.tag.element.getAttribute(key.substring(1)));
-                if (this.tag.isInput) {
-                    this.tag.dispatch('input');
-                }
-            } else {
-
-            }
-        }
-    }
-
-    public static getPersistedValueStore(elementId: string) {
-        if (!PersistAttribute.persistedValues.has(elementId))
-            PersistAttribute.persistedValues.set(elementId, new Map<string, string>());
-
-        return PersistAttribute.persistedValues.get(elementId);
-    }
-}

package/src/attributes/Referenced.ts

@@ -1,5 +0,0 @@
-import {Registry} from "../Registry";
-import {Attribute} from "../Attribute";
-
-@Registry.attribute('vsn-ref')
-export class Referenced extends Attribute {}

package/src/attributes/RootAttribute.ts

@@ -1,24 +0,0 @@
-import {Attribute} from "../Attribute";
-import {VisionHelper} from "../helpers/VisionHelper";
-import {Registry} from "../Registry";
-
-@Registry.attribute('vsn-root')
-export class RootAttribute extends Attribute {
-    public static readonly canDefer: boolean = false;
-    public static readonly scoped: boolean = true;
-
-    public async setup() {
-        this.tag.scope.set('$mobile', VisionHelper.isMobile());
-        for (const key of Registry.instance.functions.keys) {
-            const fn = await Registry.instance.functions.get(key);
-            this.tag.scope.set(key, fn);
-        }
-
-        Registry.instance.functions.on('register', this.registerFunction, this);
-        await super.setup();
-    }
-
-    public async registerFunction(name: string, fn: Function) {
-        this.tag.scope.set(name, fn);
-    }
-}

package/src/attributes/ScopeAttribute.ts

@@ -1,40 +0,0 @@
-import {Attribute} from "../Attribute";
-import {Registry} from "../Registry";
-import {Tree} from "../AST";
-import {Scope} from "../Scope";
-
-@Registry.attribute('vsn-scope')
-export class ScopeAttribute extends Attribute {
-    public static readonly canDefer: boolean = false;
-    public static readonly scoped: boolean = true;
-    protected tree: Tree;
-
-    public async compile() {
-        const code = this.getAttributeValue();
-        if (code) {
-            this.tree = new Tree(code);
-            await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
-        }
-        await super.compile();
-    }
-
-    public async extract() {
-        if (this.tree) {
-            const binding = this.getAttributeBinding();
-
-            const scope = await this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
-            if (!(scope instanceof Scope)) {
-                throw new Error(`vsn-scope value must be an object, got ${typeof scope}`);
-            }
-
-            if (binding) {
-                this.tag.scope.set(binding, scope);
-            } else {
-                for (const key of scope.data.keys) {
-                    this.tag.scope.set(key, scope.data[key]);
-                }
-            }
-        }
-        await super.extract();
-    }
-}

package/src/attributes/ScopeChange.ts

@@ -1,35 +0,0 @@
-import {Attribute} from "../Attribute";
-import {Tree} from "../AST";
-import {ScopeReference} from "../Scope/ScopeReference";
-import {Registry} from "../Registry";
-
-@Registry.attribute('vsn-scope-change')
-export abstract class ScopeChange extends Attribute {
-    public static readonly canDefer: boolean = false;
-    protected handler: Tree;
-
-    public async compile() {
-        const code: string = this.getAttributeValue();
-        this.handler = new Tree(code);
-        await this.handler.prepare(this.tag.scope, this.tag.dom, this.tag);
-        await super.compile();
-    }
-
-    public async connect() {
-        const binding = this.getAttributeBinding();
-        const ref: ScopeReference = this.tag.scope.getReference(binding, false);
-        (await ref.getScope()).on(`change:${await ref.getKey()}`, this.handleEvent.bind(this));
-        await super.connect();
-    }
-
-    public async disconnect() {
-        const binding = this.getAttributeBinding();
-        const ref: ScopeReference = this.tag.scope.getReference(binding, false);
-        (await ref.getScope()).offWithContext(`change:${await ref.getKey()}`, this);
-        await super.disconnect();
-    }
-
-    async handleEvent(e) {
-        await this.handler.evaluate(this.tag.scope, this.tag.dom, this.tag);
-    }
-}

package/src/attributes/ScriptAttribute.ts

@@ -1,9 +0,0 @@
-import {Registry} from "../Registry";
-import {Exec} from "./Exec";
-
-@Registry.attribute('vsn-script')
-export class ScriptAttribute extends Exec {
-    public get code() {
-        return this.tag.element.innerText;
-    }
-}

package/src/attributes/ServiceAttribute.ts

@@ -1,13 +0,0 @@
-import {ControllerAttribute} from "./ControllerAttribute";
-import {Registry} from "../Registry";
-
-@Registry.attribute('vsn-service')
-export class ServiceAttribute extends ControllerAttribute {
-    public static readonly canDefer: boolean = false;
-    public readonly registryName: string = 'services'
-    public readonly assignToParent: boolean = false;
-
-    protected instantiateClass(cls): any {
-        return cls.instance.scope;
-    }
-}

package/src/attributes/SetAttribute.ts

@@ -1,44 +0,0 @@
-import {Scope} from "../Scope";
-import {Attribute} from "../Attribute";
-import {Registry} from "../Registry";
-import {ScopeReference} from "../Scope/ScopeReference";
-
-@Registry.attribute('vsn-set')
-export class SetAttribute extends Attribute {
-    public static readonly canDefer: boolean = false;
-    protected key?: string;
-    protected property?: string;
-    protected boundScope?: Scope;
-
-    public set value(v: any) {
-        if (this.boundScope) {
-            this.boundScope.set(this.key, v);
-        }
-    }
-
-    public get value(): any {
-        if (!this.boundScope) return null;
-        return this.boundScope.get(this.key, false);
-    }
-
-    public async extract() {
-        this.property = this.getAttributeBinding();
-        let ref: ScopeReference;
-        try {
-            ref = this.tag.scope.getReference(this.property);
-        } catch (e) {
-            return;
-        }
-        this.key = await ref.getKey();
-        this.boundScope = await ref.getScope();
-        let value = this.getAttributeValue(null);
-        for (const m of this.getAttributeModifiers()) {
-            const t = Registry.instance.types.getSynchronous(m);
-            if (t) {
-                this.boundScope.setType(this.key, m);
-                break;
-            }
-        }
-        this.boundScope.set(this.key, value);
-    }
-}

package/src/attributes/StandardAttribute.ts

@@ -1,72 +0,0 @@
-import {Attribute} from "../Attribute";
-
-export class StandardAttribute extends Attribute {
-    public static readonly canDefer: boolean = false;
-
-    public async setup() {
-        if (!this.tag.isMagicAttribute(this.key) && !this.tag.element.hasAttribute(this.attributeName)) {
-            this.tag.element.setAttribute(this.attributeName, '');
-        }
-        await super.setup();
-    }
-
-    public async extract() {
-        this.updateFrom();
-        await super.extract();
-    }
-
-    public async connect() {
-        this.tag.scope.on(`change:${this.key}`, this.updateTo, this);
-        await super.connect();
-    }
-
-    public async disconnect() {
-        this.tag.scope.offWithContext(`change:${this.key}`, this);
-        await super.disconnect();
-    }
-
-    public mutate(mutation: MutationRecord) {
-        super.mutate(mutation);
-        this.updateFrom();
-    }
-
-    public get needsToBeSynced(): boolean {
-        let currentScopeValue = this.tag.scope.get(this.key) || '';
-        let value = this.value;
-        if (currentScopeValue && currentScopeValue.trim)
-            currentScopeValue = currentScopeValue.trim();
-
-        if (value && value.trim)
-            value = value.trim();
-
-        if (currentScopeValue instanceof Array) {
-            if (!(value instanceof Array) || currentScopeValue.length !== value.length)
-                return true;
-
-            return currentScopeValue.map(v => value.indexOf(v) > -1).indexOf(false) > -1;
-        }
-        return currentScopeValue !== value;
-    }
-
-    public updateTo() {
-        if (this.needsToBeSynced)
-            this.value = this.tag.scope.get(this.key);
-    }
-
-    public updateFrom() {
-        if (this.needsToBeSynced)
-            this.tag.scope.set(this.key, this.value);
-    }
-
-    public get key(): string {
-        return `@${this.attributeName}`;
-    }
-
-    public set value(value: any) {
-        this.tag.setElementAttribute(this.tag.isMagicAttribute(this.key) ? this.key : this.attributeName, value);
-    }
-
-    public get value(): any {
-        return this.tag.getElementAttribute(this.tag.isMagicAttribute(this.key) ? this.key : this.attributeName);
-    }
-}