feat(vue-renderer): support evaluation in templates (#6505)

This commit is contained in:
Ahad Birang 2019-11-24 16:01:21 +03:30 committed by Pooya Parsa
parent 9ada4e63a9
commit bb9427ee74
8 changed files with 87 additions and 11 deletions

View File

@ -0,0 +1,13 @@
<html>
<head>
{{ HEAD }}
{% if (ENV.NODE_ENV === 'dev') { %}
<!-- debug scripts -->
{% } else if (ENV.NODE_ENV === 'production') { %}
<!-- production scripts -->
{% } %}
</head>
<body>
{{ APP }}
</body>
</html>

View File

@ -0,0 +1,5 @@
module.exports = {
env: {
NODE_ENV: process.env.NODE_ENV
}
}

View File

@ -0,0 +1,12 @@
{
"name": "example-custom-template",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"post-update": "yarn upgrade --latest"
}
}

View File

@ -0,0 +1,5 @@
<template>
<div class="container">
<h1>Welcome!</h1>
</div>
</template>

View File

@ -354,7 +354,8 @@ export default class VueRenderer {
parseTemplate (templateStr) {
return template(templateStr, {
interpolate: /{{([\s\S]+?)}}/g
interpolate: /{{([\s\S]+?)}}/g,
evaluate: /{%([\s\S]+?)%}/g
})
}

View File

@ -1,3 +1,6 @@
export default {
appTemplatePath: './test/mytemplate.html'
appTemplatePath: './test/mytemplate.html',
env: {
tracker: 'ga'
}
}

View File

@ -2,6 +2,11 @@
<html {{ HTML_ATTRS }}>
<head>
{{ HEAD }}
{% if (ENV.tracker === 'ga') { %}
<!-- Google Analytics -->
{% } else if (ENV.tracker === 'heap') { %}
<!-- Heap Analytics -->
{% } %}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}

View File

@ -1,25 +1,57 @@
import { getPort, loadFixture, Nuxt } from '../utils'
let port
let nuxt = null
let options
describe('custom-app-template', () => {
beforeAll(async () => {
const options = await loadFixture('custom-app-template')
nuxt = new Nuxt(options)
options = await loadFixture('custom-app-template')
})
test('Home page with google analytics', async () => {
const nuxt = new Nuxt(options)
await nuxt.ready()
port = await getPort()
const port = await getPort()
await nuxt.server.listen(port, '0.0.0.0')
})
test('/', async () => {
const { html } = await nuxt.server.renderRoute('/')
expect(html).toContain('<p>My Template</p>')
expect(html).toContain('<h1>Custom!</h1>')
expect(html).toContain('Google Analytics')
await nuxt.close()
})
// Close server and ask nuxt to stop listening to file changes
afterAll(async () => {
test('Home page with heap analytics', async () => {
const nuxt = new Nuxt(options)
options.env.tracker = 'heap'
await nuxt.ready()
const port = await getPort()
await nuxt.server.listen(port, '0.0.0.0')
const { html } = await nuxt.server.renderRoute('/')
expect(html).toContain('<p>My Template</p>')
expect(html).toContain('<h1>Custom!</h1>')
expect(html).toContain('Heap Analytics')
await nuxt.close()
})
test('Home page with no analytics', async () => {
const nuxt = new Nuxt(options)
options.env.tracker = '-'
await nuxt.ready()
const port = await getPort()
await nuxt.server.listen(port, '0.0.0.0')
const { html } = await nuxt.server.renderRoute('/')
expect(html).toContain('<p>My Template</p>')
expect(html).toContain('<h1>Custom!</h1>')
expect(html).not.toContain('google Analytics')
expect(html).not.toContain('Heap Analytics')
await nuxt.close()
})
})