Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Nov 24, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3e89a90
feat(template-evaluate): support evaluation in templates
farnabaz Oct 2, 2019
a0c5647
chore(example): create custom template example
farnabaz Oct 2, 2019
a303e2b
chore: add evaluate test
farnabaz Oct 10, 2019
c24a126
Merge branch 'dev' into template-evaluate
atinux Oct 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions examples/custom-template/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
5 changes: 5 additions & 0 deletions examples/custom-template/nuxt.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
env: {
NODE_ENV: process.env.NODE_ENV
}
}
12 changes: 12 additions & 0 deletions examples/custom-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
5 changes: 5 additions & 0 deletions examples/custom-template/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<div class="container">
<h1>Welcome!</h1>
</div>
</template>
3 changes: 2 additions & 1 deletion packages/vue-renderer/src/renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
}

Expand Down
5 changes: 4 additions & 1 deletion test/fixtures/custom-app-template/nuxt.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
export default {
appTemplatePath: './test/mytemplate.html'
appTemplatePath: './test/mytemplate.html',
env: {
tracker: 'ga'
}
}
5 changes: 5 additions & 0 deletions test/fixtures/custom-app-template/test/mytemplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
48 changes: 40 additions & 8 deletions test/unit/custom-app-template.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')

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()
})
test('/', 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()
})

// Close server and ask nuxt to stop listening to file changes
afterAll(async () => {
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()
})
})