vue_compiler.md

Preos - Vue compiler

Preos supports the compile for Vue SFCs templates. A SFC can contain a template tag, a script tag and one or more style tags. Each of these tags can be in any of the different languages that Preos supports.

Transpiler

The transpiler works returning a compiled version of the .vue file in which the template, script and all style tags are transpiled to html, js and css respectively.

For example, this code:

<template lang="pug">
div
    p #{name}'s Pug source code!
</template >

<script lang="ts">
module.exports = {
    data: function() {
        return {
            who: 'world'
        }
    }
}
</script>

<style>
:scope {
    color: yellow;
}

p {
    font-size: 16px;
}
</style>

<style scoped src="../css/test.scss"></style>

Transpiled with this code:

(async function () {
    var result;
    try {
        result = await preos.transpile({
            debug: false,
            url: file,
            outputLang,
            executerOptions: {
                // For template lang=pug
                template: {
                    name: "Preos"
                }
            }
        });
        console.log(result.source);
    }
    catch (why) {
        console.log("error: ", why);
    }
})();

Results in a code like this:

<template>
    <div data-vue-id>
        <p>Preos's Pug source code!</p>
    </div>
</template>
<script type='application/javascript'>
    module.exports = {
        data: function () {
            return {
                who: 'world'
            };
        }
    };
</script>
<style type='text/css'>
    :scope {
        color: yellow;
    }

    p {
        font-size: 16px;
    }
</style>
<style type='text/css'>
    [data-vue-id] body {
        color: red;
    }

    [data-vue-id] body h1 {
        background-color: red;
    }

    [data-vue-id] {
        height: 19px;
    }
</style>

The code normally is compressed, but for this example it has been prettified.

The data-vue-id attribute is auto-generated for those styles that require to be scoped.

Interpreter

The Preos Vue interpreter returns a function to execute it lazily in the form:

function lazyExecute(delegateStyles : Logic = false) : Promise<Object> { ... }

It returns a promise that will perform an extra step after the execution of the transpiler, it will execute the script code returning its result with all the information of the SFCs in an object like this:

resultObject = {
    template : String, // The HTML template of the SFC.
    styles : [String], // A list of all styles of the SFC, formated to be inserted in the DOM.
    __baseURI : String, // The URL of the loaded '.vue' or the id generated by preos.

    insertStyles : Function<(document?), resultObject> // Inserts the styles of this object into the document provided or the default one.
}

• insertStyles: this is only set if the parameter delegateStyles is set to true. This option keeps the functionality to use the interpreter with the VUE library but also makes possible to use the interpreter for enviroments without a DOM representation (like Node.js).

Styles

Vue allow styles to be scoped so the css rules are only applied inside the template.

Preos extends this functionality allowing to use the pseudo-classes :root and :scope to select the root element of the template. in fact, Preos replaces those pseudo-classes by the auto-generated attribute that scopes the css.

The only way to apply styles for the root element is using one of those pseudo-classes.