test: add template comments test

Author: znck

package-lock.json

@@ -30,7 +30,7 @@
     "babel-preset-env": "^1.6.1",
     "eslint": "^3.19.0",
     "eslint-plugin-vue-libs": "^1.2.0",
-    "jest": "^21.1.0",
+    "jest": "^22.1.1",
     "puppeteer": "^0.13.0",
     "rollup": "^0.53.4",
     "rollup-plugin-babel": "^3.0.3",
@@ -46,6 +46,7 @@
   "dependencies": {
     "hash-sum": "^1.0.2",
     "js-beautify": "^1.7.3",
+    "lodash.defaultsdeep": "^4.6.0",
     "lru-cache": "^4.1.1",
     "postcss": "^6.0.12",
     "postcss-modules-sync": "^1.0.0",

package.json

@@ -1,4 +1,5 @@
 const { struct } = require('superstruct')
+const defaultsdeep = require('lodash.defaultsdeep')
 const _s = require('./utils/stringify')
 const importStatement = require('./utils/import-statement')
 const assertType = require('./utils/assert-type')
@@ -46,7 +47,7 @@ const Source = struct({
     descriptor: struct.union(['object', 'null'])
   }])
 })
-const Config = struct({
+const Config = any => defaultsdeep(struct({
   esModule: 'boolean?',
   require: 'object?',
   scopeId: 'string?',
@@ -55,7 +56,7 @@ const Config = struct({
   isProduction: 'boolean?',
   hasStyleInjectFn: 'boolean?',
   onWarn: 'function?'
-}, {
+})(any), {
   esModule: true,
   require: {
     normalizeComponent: 'vue-component-compiler/src/runtime/normalize-component',

src/assemble.js

@@ -1,6 +1,7 @@
 const postcss = require('postcss')
 const { default: cssModules } = require('postcss-modules-sync')
 const { struct } = require('superstruct')
+const defaultsdeep = require('lodash.defaultsdeep')
 
 const trim = require('./plugins/trim')
 const scopeId = require('./plugins/scope-id')
@@ -12,14 +13,14 @@ const Style = struct({
   descriptor: 'object'
 })
 
-const Config = struct({
+const Config = any => defaultsdeep(struct({
   async: 'boolean?',
   needMap: 'boolean?',
   onWarn: 'function?',
   options: 'object?',
   plugins: 'array?',
   scopeId: 'string'
-}, {
+})(any), {
   async: false,
   needMap: true,
   onWarn: () => message => console.warn(message),

src/style-compiler/index.js

@@ -2,6 +2,7 @@ const compiler = require('vue-template-compiler/build.js')
 const transpile = require('vue-template-es2015-compiler')
 const prettier = require('prettier')
 const { struct } = require('superstruct')
+const defaultsdeep = require('lodash.defaultsdeep')
 
 const transformRequire = require('./modules/transform-require')
 const transformSrcset = require('./modules/transform-srcset')
@@ -13,7 +14,7 @@ const Template = struct({
   descriptor: 'object'
 })
 
-const Config = struct({
+const Config = any => defaultsdeep(struct({
   scopeId: 'string',
   isServer: 'boolean?',
   isProduction: 'boolean?',
@@ -23,7 +24,7 @@ const Config = struct({
   options: 'object?',
   transformRequire: 'object?',
   plugins: 'array?'
-}, {
+})(any), {
   isServer: false,
   esModule: true,
   isProduction: true,
@@ -36,7 +37,9 @@ const Config = struct({
   },
   options: {
     preserveWhitespace: true,
-    modules: []
+    comments: true,
+    modules: [],
+    directives: []
   },
   plugins: []
 })
@@ -48,9 +51,13 @@ module.exports = function compileTemplate (template, filename, config) {
 
   const options = config.options
 
-  options.modules = options.modules.concat(config.plugins)
-  options.modules.push(transformRequire(config.transformToRequire))
-  options.modules.push(transformSrcset())
+  options.scopeId = config.scopeId
+  options.modules = [].concat(
+    options.modules || [],
+    config.plugins || [], [
+      transformRequire(config.transformToRequire),
+      transformSrcset()
+    ])
 
   const compile = (config.isServer && config.optimizeSSR !== false && compiler.ssrCompile) ? compiler.ssrCompile : compiler.compile
   const compiled = compile(template.code, options)
@@ -60,15 +67,15 @@ module.exports = function compileTemplate (template, filename, config) {
   }
 
   if (output.errors && output.errors.length) {
-    output.code = `function render () {}\nvar staticRenderFns = []`
+    output.code = `function render () {}\nvar staticRenderFns = []\n`
   } else {
     const stripWithFunctional = template.descriptor.attrs && template.descriptor.attrs.functional
 
     config.buble.transforms.stripWithFunctional = stripWithFunctional
 
     output.code = transpile(
       'var render = ' + toFunction(compiled.render, stripWithFunctional) + '\n' +
-      'var staticRenderFns = [' + compiled.staticRenderFns.map(it => toFunction(it, stripWithFunctional)).join(',') + ']',
+      'var staticRenderFns = [' + compiled.staticRenderFns.map(it => toFunction(it, stripWithFunctional)).join(',') + ']\n',
       config.buble
     )
 

src/template-compiler/index.js

@@ -1,9 +1,10 @@
 import { mount } from '@vue/test-utils'
 
 // Fixtures
-import Transform from './fixtures/transform.vue'
-import Functional from './fixtures/functional.vue'
-import FunctionalRoot from './fixtures/functional-root.vue'
+import Transform from './fixtures/with-template-require-transform.vue'
+import Functional from './fixtures/with-template-functional.vue'
+import FunctionalRoot from './fixtures/with-template-functional-root.vue'
+import TemplateComment from './fixtures/with-template-comment.vue'
 
 test('transfom to require', () => {
   const wrapper = mount(Transform)
@@ -54,3 +55,14 @@ test('functional template', () => {
   wrapper.find('.clickable').trigger('click')
   expect(fn).toHaveBeenCalled()
 })
+
+test('template comments', () => {
+  const wrapper = mount(TemplateComment)
+
+  expect(wrapper.is('div')).toBeTruthy()
+  expect(wrapper.find('h2')).toBeTruthy()
+  expect(wrapper.find('h2.red')).toBeTruthy()
+  expect(wrapper.find('h2#test')).toBeTruthy()
+  expect(wrapper.vnode.children[1].isComment).toEqual(true)
+  expect(wrapper.vnode.children[1].text).toEqual(expect.stringContaining('comment here'))
+})

test/assemble.spec.js

@@ -1,17 +1,57 @@
-<template>
-  <h1 id="test" class="title">Hello {{ name }}!</h1>
-</template>
-
-<script>
-  export default {
-    data () {
-      return { name: 'John Doe' }
-    }
-  }
-</script>
-
 <style scoped>
-.title {
+.test {
+  color: red;
+}
+.test:after {
+  content: 'bye!';
+}
+h1 {
+  color: green;
+}
+.anim {
+  animation: color 5s infinite, other 5s;
+}
+.anim-2 {
+  animation-name: color;
+  animation-duration: 5s;
+}
+.anim-3 {
+  animation: 5s color infinite, 5s other;
+}
+.anim-multiple {
+  animation: color 5s infinite, opacity 2s;
+}
+.anim-multiple-2 {
+  animation-name: color, opacity;
+  animation-duration: 5s, 2s;
+}
+
+@keyframes color {
+  from { color: red; }
+  to { color: green; }
+}
+@-webkit-keyframes color {
+  from { color: red; }
+  to { color: green; }
+}
+@keyframes opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-webkit-keyframes opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.foo p >>> .bar {
   color: red;
 }
 </style>
+
+<template>
+<div>
+  <div><h1>hi</h1></div>
+  <p class="abc def">hi</p>
+  <template v-if="!ok"><p class="test" id="test">Hello</p></template>
+  <svg><template><p></p></template></svg>
+</div>
+</template>

test/fixtures/scoped-css.vue

@@ -0,0 +1,22 @@
+<template comments>
+  <div>
+    <h2 class="red" id="test">{{msg}}</h2><!-- comment here -->
+  </div>
+</template>
+
+<script>
+export default {
+  comments: true,
+  data () {
+    return {
+      msg: 'Hello from Component A!'
+    }
+  }
+}
+</script>
+
+<style>
+.red {
+  color: red;
+}
+</style>

test/fixtures/functional-style.vue renamed to test/fixtures/with-render-functional-style.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Functional from './functional.vue'
+import Functional from './with-template-functional.vue'
 export default {
   components: {
     Functional

test/fixtures/with-style-scoped.vue

@@ -5,6 +5,7 @@ const nodeResolve = require('rollup-plugin-node-resolve')
 const image = require('rollup-plugin-image')
 const { readFileSync } = require('fs')
 const { join, resolve } = require('path')
+const defaultsdeep = require('lodash.defaultsdeep')
 const compiler = require('../..')
 
 module.exports = { compile, build, open, pack }
@@ -39,15 +40,15 @@ function load (ext, handle) {
   }
 }
 
-function compile (filename, source) {
+function compile (filename, source, options = {}) {
   source = source || readFileSync(filename).toString()
   const descriptor = compiler.parse(source, filename, { needMap: true })
   const scopeId = compiler.generateScopeId(filename, source)
   const render = descriptor.template ? compiler.compileTemplate(
-    { code: descriptor.template.content, descriptor: descriptor.template }, filename, { scopeId }
+    { code: descriptor.template.content, descriptor: descriptor.template }, filename, defaultsdeep({ scopeId }, options.template)
   ) : null
   const styles = descriptor.styles.map(it => compiler.compileStyle(
-    { code: it.content, descriptor: it }, filename, { scopeId }
+    { code: it.content, descriptor: it }, filename, defaultsdeep({ scopeId }, options.style)
   )).map((style, i) => ({ descriptor: descriptor.styles[i], code: style.code, map: style.map, modules: style.modules }))
   return compiler.assemble({
     styles,
@@ -60,14 +61,14 @@ function compile (filename, source) {
       descriptor: descriptor.script
     },
     customBlocks: []
-  }, filename, {
+  }, filename, defaultsdeep({
     scopeId,
     require: {
       normalizeComponent: resolve(__dirname, '../../src/runtime/normalize-component.js'),
       injectStyleClient: resolve(__dirname, '../../src/runtime/inject-style-client.js'),
       injectStyleServer: resolve(__dirname, '../../src/runtime/inject-style-server.js')
     }
-  })
+  }), options.assemble)
 }
 
 const babelit = babel({
@@ -99,10 +100,10 @@ async function pack (filename, source) {
 }
 
 const cache = {}
-async function build (filename) {
+async function build (filename, source) {
   if (filename in cache) return cache[filename]
 
-  const source = compile(filename)
+  source = source || compile(filename)
   const component = filename + '__.js'
   const input = filename + '__app.js'