test: ssr

Author: yyx990803

lib/index.js

@@ -117,7 +117,7 @@ var component = normalizer(
   staticRenderFns,
   ${hasFunctional ? `true` : `false`},
   null, // TODO style injection
-  ${JSON.stringify(id)},
+  ${hasScoped ? JSON.stringify(id) : `null`},
   ${isServer ? JSON.stringify(hash(request)) : `null`}
   ${incomingQuery.shadow ? `,true` : ``}
 )

lib/template-loader/index.js

@@ -16,7 +16,9 @@ module.exports = function (template) {
   const loaderContext = this
   const query = qs.parse(this.resourceQuery.slice(1))
 
-  // TODO: actually get main vue-loader options
+  // although this is not the main vue-loader, we can get access to the same
+  // vue-loader options because we've set an ident in the plugin and used that
+  // ident to create the request for this loader in the pitcher.
   const options = loaderUtils.getOptions(loaderContext) || {}
 
   const cb = loaderContext.async()

package.json

@@ -54,6 +54,7 @@
     "sugarss": "^1.0.1",
     "url-loader": "^1.0.1",
     "vue": "^2.5.16",
+    "vue-server-renderer": "^2.5.16",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^4.1.0",
     "webpack-cli": "^2.0.10",

test/ssr.spec.js

@@ -1,3 +1,71 @@
-test('ssr', () => {
+const SSR = require('vue-server-renderer')
 
+const {
+  bundle
+} = require('./utils')
+
+test('SSR style and moduleId extraction', done => {
+  bundle({
+    target: 'node',
+    entry: './test/fixtures/ssr-style.js',
+    output: {
+      path: '/',
+      filename: 'test.build.js',
+      libraryTarget: 'commonjs2'
+    },
+    externals: ['vue']
+  }, code => {
+    const renderer = SSR.createBundleRenderer(code, {
+      basedir: __dirname,
+      runInNewContext: 'once'
+    })
+    const context = {
+      _registeredComponents: new Set()
+    }
+    renderer.renderToString(context, (err, res) => {
+      if (err) return done(err)
+      expect(res).toContain('data-server-rendered')
+      expect(res).toContain('<h1>Hello</h1>')
+      expect(res).toContain('Hello from Component A!')
+      expect(res).toContain('<div class="foo">functional</div>')
+      // from main component
+      expect(context.styles).toContain('h1 { color: green;')
+      // from imported child component
+      expect(context.styles).toContain('comp-a h2 {\n  color: #f00;')
+      // from imported css file
+      expect(context.styles).toContain('h1 { color: red;')
+      // from imported functional component
+      expect(context.styles).toContain('.foo { color: red;')
+      // collect component identifiers during render
+      expect(Array.from(context._registeredComponents).length).toBe(3)
+      done()
+    })
+  })
 })
+
+// TODO
+// test('css-modules in SSR', done => {
+//   bundle({
+//     entry: 'css-modules.vue',
+//     target: 'node',
+//     output: Object.assign({}, globalConfig.output, {
+//       libraryTarget: 'commonjs2'
+//     })
+//   }, (code, warnings) => {
+//     // http://stackoverflow.com/questions/17581830/load-node-js-module-from-string-in-memory
+//     function requireFromString (src, filename) {
+//       const Module = module.constructor
+//       const m = new Module()
+//       m._compile(src, filename)
+//       return m.exports
+//     }
+
+//     const output = interopDefault(requireFromString(code, './test.build.js'))
+//     const mockInstance = {}
+
+//     output.beforeCreate.forEach(hook => hook.call(mockInstance))
+//     expect(mockInstance.style.red).toBeDefined()
+
+//     done()
+//   })
+// })

yarn.lock

@@ -4741,6 +4741,10 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash._reinterpolate@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+
 lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@@ -4773,6 +4777,19 @@ lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
 
+lodash.template@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -6744,6 +6761,12 @@ resolve@^1.1.6:
   dependencies:
     path-parse "^1.0.5"
 
+resolve@^1.2.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c"
+  dependencies:
+    path-parse "^1.0.5"
+
 responselike@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -6928,7 +6951,7 @@ send@0.16.2:
     range-parser "~1.2.0"
     statuses "~1.4.0"
 
-serialize-javascript@^1.4.0:
+serialize-javascript@^1.3.0, serialize-javascript@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.4.0.tgz#7c958514db6ac2443a8abc062dc9f7886a7f6005"
 
@@ -7171,6 +7194,10 @@ source-map@0.4.x, source-map@^0.4.2, source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
 source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -7986,6 +8013,19 @@ vue-hot-reload-api@^2.1.0, vue-hot-reload-api@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
 
+vue-server-renderer@^2.5.16:
+  version "2.5.16"
+  resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.5.16.tgz#279ef8e37e502a0de3a9ae30758cc04a472eaac0"
+  dependencies:
+    chalk "^1.1.3"
+    hash-sum "^1.0.2"
+    he "^1.1.0"
+    lodash.template "^4.4.0"
+    lodash.uniq "^4.5.0"
+    resolve "^1.2.0"
+    serialize-javascript "^1.3.0"
+    source-map "0.5.6"
+
 vue-style-loader@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.0.2.tgz#e89aa4702a0c6b9630d8de70b1cbddb06b9ad254"