express-vue / vue-pronto

Rendering Engine for turning Vue files into Javascript Objects
Apache License 2.0
20 stars 12 forks source link

allow pagePath to be set on a per-request basis in addition to globally #174

Closed mattisworking closed 3 years ago

mattisworking commented 3 years ago

Code that is separated out into modules require the use of multiple pagePaths. I've added a way to define the pagePath on a per-request basis by providing a page key/value to the vueOptions in renderVue.

In addition to that, I've added a context field that can give a sort of namespace to the compiled folder allowing for multiple files to be rendered when they share the same name. (e.g. users/index and groups/index)

The new pages field is optional, as well as either the path or context fields in it. If nothing is provided, the program will behave as it does currently making this a non-breaking change. If path is not provided it will default to the global pagesPath. If context is not provided it will write everything to the root of .expressvue

Also I've added some minor error-checking for when the memoryParsed variable is trying to be determined.

Here would be an example of using renderVue with the changes:


const vueOptions = {
    pagesPath: './src/views/pages'
}

expressVue.use(app, vueOptions).then((app) => {
    app.get('/', (req, res) => {
        // this looks at ./src/views/pages, using the vueOptions.pagesPath by default
        // and compiles to rootPath/.expressvue/Index
        res.renderVue('Index.vue', {}, {})
    })

    app.get('/users', (req, res) => {
        // this looks at ./src/users/views/pages/Index.vue
        // and compiles to rootPath/.expressvue/User/Index
        res.renderVue('Index.vue', {}, {
            page: {
                path: './src/users/views/pages',
                context: 'Users'
            }
        })
    })

    app.get('/groups', (req, res) => {
        // this looks at ./src/groups/views/pages/Index.vue
        // and compiles to rootPath/.expressvue/Groups/Index
        res.renderVue('Index.vue', {}, {
            page: {
                path: './src/groups/views/pages',
                context: 'Groups'
            }
        })
    })

    app.get('/permissions', (req, res) => {
        // this looks at ./src/permissions/views/pages/Add.vue
        // and compiles to rootPath/.expressvue/Add
        res.renderVue('Add.vue', {}, {
            page: {
                path: './src/permissions/views/pages',
            }
        })
    })
})
danielcherubini commented 3 years ago

Hey

Thanks, I really like this... could you also write tests?

Sorry to be a pain.

mattisworking commented 3 years ago

Hey I'm glad to hear that you like the added functionality!

I've added a test to verify that the context folder is being created properly, and that the pagePath will be overridden consistently. If you would like more tests then let me know, it's no trouble at all!