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

nuxt · Nov 24, 2019 · bb9427e · bb9427e
1 parent 9ada4e6
commit bb9427e
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 10 deletions.
diff --git a/examples/custom-template/app.html b/examples/custom-template/app.html
@@ -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>
diff --git a/examples/custom-template/nuxt.config.js b/examples/custom-template/nuxt.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    NODE_ENV: process.env.NODE_ENV
+  }
+}
diff --git a/examples/custom-template/package.json b/examples/custom-template/package.json
@@ -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"
+  }
+}
diff --git a/examples/custom-template/pages/index.vue b/examples/custom-template/pages/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="container">
+    <h1>Welcome!</h1>
+  </div>
+</template>
diff --git a/packages/vue-renderer/src/renderer.js b/packages/vue-renderer/src/renderer.js
@@ -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
     })
   }
 

diff --git a/test/fixtures/custom-app-template/nuxt.config.js b/test/fixtures/custom-app-template/nuxt.config.js
@@ -1,3 +1,6 @@
 export default {
-  appTemplatePath: './test/mytemplate.html'
+  appTemplatePath: './test/mytemplate.html',
+  env: {
+    tracker: 'ga'
+  }
 }
diff --git a/test/fixtures/custom-app-template/test/mytemplate.html b/test/fixtures/custom-app-template/test/mytemplate.html
@@ -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 }}

diff --git a/test/unit/custom-app-template.test.js b/test/unit/custom-app-template.test.js
@@ -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()
   })
 })