@trapcode/codebase/vue/extensions/ComponentEngine.js

For TrapCode

import defaultDataEngine from "./DefaultComponentData";
import ComponentEventsEngine from "./ComponentEventsEngine";
import RequiresServerEngine from "./RequiresServerEngine";
import FormValidatorEngine from "./FormValidatorEngine";
import ComponentDataFromCacheEngine from "./ComponentDataFromCacheEngine";

class ComponentEngine {
    constructor(component = {}) {
        this.setComponent(component);
        return this;
    }

    static from(component) {
        return new ComponentEngine(component);
    }

    setComponent(component = {}) {
        this.component = component;
        return this;
    }

    setEvents(events = {}) {
        this.events = events;
        return this;
    }

    withEvents(events = {}) {
        return this.setEvents(events);
    }

    setRequests(getFrom) {
        return this.requiresResultFromServer(getFrom);
    }

    setDataFromCache(dataFromCache = {}) {
        this.dataFromCache = dataFromCache;
        return this;
    }

    requiresResultFromServer(getFrom) {
        this.componentRequiresResultFromServer = getFrom;
        return this;
    }

    usingFormValidator(val = true) {
        this.isUsingFormValidator = val;
        return this;
    }

    processComponent() {
        let getFrom;

        // Extend Mixins
        if (!this.component.hasOwnProperty('mixins')) {
            this.component.mixins = [];
        }

        // Set Default Data Engine
        this.component.mixins.push(defaultDataEngine);

        // Set DataFormCache
        if (this.dataFromCache !== null) {
            this.component.mixins.push(new ComponentDataFromCacheEngine(this.dataFromCache));
        }

        // Register Events
        if (Object.keys(this.events).length) {
            this.component.mixins.push(new ComponentEventsEngine(this.events));
        }

        // Require data form server.
        if (this.componentRequiresResultFromServer !== null) {
            getFrom = this.componentRequiresResultFromServer;
            this.component.mixins.push(new RequiresServerEngine(getFrom));
        }

        // Add Form Validators
        if (this.isUsingFormValidator) {
            this.component.mixins.push(FormValidatorEngine);
        }
        return this.component;
    }

    render($el = null) {
        let processedComponent;
        processedComponent = this.processComponent();
        if ($el !== null) {
            return new Vue(processedComponent).$mount($el);
        }
        return processedComponent;
    }

};

ComponentEngine.prototype.component = {};

ComponentEngine.prototype.events = {};

ComponentEngine.prototype.dataFromCache = null;

ComponentEngine.prototype.componentRequiresResultFromServer = null;

ComponentEngine.prototype.isUsingFormValidator = false;

let BuildComponent = function (component = null, options = {}) {
    if (component === null) {
        return ComponentEngine;
    }

    return ComponentEngine.from(component);
};


window.BuildComponent = BuildComponent;

export {ComponentEngine, BuildComponent};