Express Vue Renderer SPEC

Draft v1

Top level

The library will take 3 params, and return a promise.

Input

There are 3 params, they are as follows:

1. Full path to a .vue single file component (AKA VueFile from here on) - STRING
2. Data object to be passed into the data function object in the VueFile - OBJECT
3. Vue object to be passed into the VueFile and the renderer, this will be used primarily as the method for the head metadata functionality - OBJECT

The 3rd object may be optional, if no object is found it will create an empty object

Output

The library will output a promise, with a nodeJS stream in the success block, and if an error was thrown anywhere in the library an error object will return in the catch block.

Functional overview

The library takes the location of the VueFile, and parses it into three objects using the official parser, this splits it up into three parts;

1. Template object
2. Script object
3. Style object array

Template parser

Parse the template from what its written in (HTML/PUG/whatever) into HTML, cache this and save it in memory.

Script parser

Parse the script block from what it's written in (ES6/ES5/VanillaJS/CoffeeScript) into VanillaJS, cache this and save it into memory

Style parser

Parse the style block from what it's written in (CSS/SCSS/LESS) into CSS, cache this and save it into memory.

Constructor

Once we have parsed the VueFile, it's time to construct the new object, object will consist of the following;

1. Template as string
2. Style as string
3. Script as string
4. DataObject as object
5. VueOptions as object
6. GlobalOptions passed into library init method as object
7. VueFile path as passed into library as string

Renderer

Create an empty object that will be used as the render object.

The object will look something like this

rendererObject {
    template: string;
    data: function() {
        return {}
    }
}

this object will later be passed into the vueJS new Vue() class instantiation, which will return a VUEJS class

Script block

Take the script block, and try and find any import/require statements first, if there are some found, try and require them, if this fails try to run them through the top level of this whole library, and see if it parses it as a VueFile. The logic behind this is this..

If its Javascript, it will require fine.. If its a VueFile, it will error..

If it errors, it might be a VueFile, so if we run a VueFile through the parser, it will return with an object, if it's not a VueFile it will throw an error..

if it errors two times, throw a new error and say that it couldn't render the Script Block, if it passes on either step add the rendered object to the renderer object..

Head Renderer

look at the VueOptions object, and run it through the Head Renderer, it will return with a string, add this to the constructor object

Template

take the template and add it to the template object as a string

HTML

start with the user's global template, which is in GlobalOptions, it consists of 3 parts, a head, middle, and end.

1. create a new string
2. add the head
3. add the rendered head string
4. add the rendered style block as string in a <style> block
5. add the middle
6. add the rendered template string
7. add the rendered VueJS Object string as a <script> block
8. add the end

Thats the whole functionality!

Now to do this as a stream.....

Stream

1. create new string
2. add head
3. add rendered head string
4. add rendered style block as string in a <style> block
5. add the middle
6. create a new stream
7. add this to the stream
8. change variable to say it's now finished creating the stream.
9. return the stream

every subsequent new piece of information will be added to the stream chunk... when the rendered template and rendered script finish.. these will be streamed back to the client as they are constructed.

when thats finished, add the end string, to close off the html.... and then tell the stream that its finished so the stream.on('end', callback) api will trigger.