refactor(vue-renderer): split renderer into ssr, spa and modern

packages/server/src/middleware/modern.js

@@ -1,5 +1,3 @@
-import chalk from 'chalk'
-import consola from 'consola'
 import UAParser from 'ua-parser-js'
 import semver from 'semver'
 
@@ -23,22 +21,6 @@ const isModernBrowser = (ua) => {
   return Boolean(modernBrowsers[browser.name] && semver.gte(browserVersion, modernBrowsers[browser.name]))
 }
 
-const distinctModernModeOptions = [false, 'client', 'server']
-
-const detectModernBuild = ({ options, resources }) => {
-  if (distinctModernModeOptions.includes(options.modern)) {
-    return
-  }
-
-  if (!resources.modernManifest) {
-    options.modern = false
-    return
-  }
-
-  options.modern = options.render.ssr ? 'server' : 'client'
-  consola.info(`Modern bundles are detected. Modern mode (${chalk.green.bold(options.modern)}) is enabled now.`)
-}
-
 const detectModernBrowser = ({ socket = {}, headers }) => {
   if (socket.isModernBrowser === undefined) {
     const ua = headers && headers['user-agent']
@@ -49,14 +31,9 @@ const detectModernBrowser = ({ socket = {}, headers }) => {
 }
 
 export default ({ context }) => {
-  let detected = false
   return (req, res, next) => {
-    if (!detected) {
-      detectModernBuild(context)
-      detected = true
-    }
     if (context.options.modern !== false) {
-      req.modernMode = detectModernBrowser(req)
+      req._modern = detectModernBrowser(req)
     }
     next()
   }

packages/server/src/middleware/nuxt.js

@@ -25,7 +25,7 @@ export default ({ options, nuxt, renderRoute, resources }) => async function nux
       cspScriptSrcHashes,
       error,
       redirected,
-      getPreloadFiles
+      preloadFiles
     } = result
 
     if (redirected) {
@@ -52,8 +52,6 @@ export default ({ options, nuxt, renderRoute, resources }) => async function nux
     if (!error && options.render.http2.push) {
       // Parse resourceHints to extract HTTP.2 prefetch/push headers
       // https://w3c.github.io/preload/#server-push-http-2
-      const preloadFiles = getPreloadFiles()
-
       const { shouldPush, pushAssets } = options.render.http2
       const { publicPath } = resources.clientManifest
 

packages/server/test/middleware/modern.test.js

@@ -1,5 +1,3 @@
-import consola from 'consola'
-
 jest.mock('chalk', () => ({
   green: {
     bold: modern => `greenBold(${modern})`
@@ -45,40 +43,7 @@ describe('server: modernMiddleware', () => {
     context.options.modern = 'server'
     modernMiddleware(ctx.req, ctx.res, ctx.next)
 
-    expect(ctx.req.modernMode).toEqual(false)
-  })
-
-  test('should detect client modern build and display message', () => {
-    const context = createContext()
-    const modernMiddleware = createModernMiddleware({ context })
-    const ctx = createServerContext()
-
-    context.resources.modernManifest = {}
-    modernMiddleware(ctx.req, ctx.res, ctx.next)
-    expect(context.options.modern).toEqual('client')
-    expect(consola.info).toBeCalledWith('Modern bundles are detected. Modern mode (greenBold(client)) is enabled now.')
-  })
-
-  test('should detect server modern build and display message', () => {
-    const context = createContext()
-    const modernMiddleware = createModernMiddleware({ context })
-    const ctx = createServerContext()
-
-    context.options.render.ssr = true
-    context.resources.modernManifest = {}
-    modernMiddleware(ctx.req, ctx.res, ctx.next)
-    expect(context.options.modern).toEqual('server')
-    expect(consola.info).toBeCalledWith('Modern bundles are detected. Modern mode (greenBold(server)) is enabled now.')
-  })
-
-  test('should not detect modern browser if modern build is not found', () => {
-    const context = createContext()
-    const modernMiddleware = createModernMiddleware({ context })
-    const ctx = createServerContext()
-
-    modernMiddleware(ctx.req, ctx.res, ctx.next)
-
-    expect(ctx.req.modernMode).toBeUndefined()
+    expect(ctx.req._modern).toEqual(false)
   })
 
   test('should not detect modern browser if connect has been detected', () => {
@@ -91,7 +56,7 @@ describe('server: modernMiddleware', () => {
     context.options.modern = 'server'
     modernMiddleware(ctx.req, ctx.res, ctx.next)
 
-    expect(ctx.req.modernMode).toEqual(true)
+    expect(ctx.req._modern).toEqual(true)
   })
 
   test('should detect modern browser based on user-agent', () => {
@@ -107,7 +72,7 @@ describe('server: modernMiddleware', () => {
     modernMiddleware(ctx.req, ctx.res, ctx.next)
 
     expect(ctx.req.socket.isModernBrowser).toEqual(true)
-    expect(ctx.req.modernMode).toEqual(true)
+    expect(ctx.req._modern).toEqual(true)
   })
 
   test('should detect legacy browser based on user-agent', () => {

packages/server/test/middleware/nuxt.test.js

@@ -137,7 +137,7 @@ describe('server: nuxtMiddleware', () => {
     const context = createContext()
     const result = {
       html: 'rendered html',
-      getPreloadFiles: jest.fn(() => ['/nuxt/preload1.js', '/nuxt/preload2.js'])
+      preloadFiles: ['/nuxt/preload1.js', '/nuxt/preload2.js']
     }
     context.renderRoute.mockReturnValue(result)
     const pushAssets = jest.fn((req, res, publicPath, preloadFiles) => preloadFiles)
@@ -158,12 +158,12 @@ describe('server: nuxtMiddleware', () => {
     const context = createContext()
     const result = {
       html: 'rendered html',
-      getPreloadFiles: jest.fn(() => [
+      preloadFiles: [
         { file: '/nuxt/preload1.js', asType: 'script' },
         { file: '/nuxt/preload2.js', asType: 'script' },
         { file: '/nuxt/style.css', asType: 'style' },
         { file: '/nuxt/font.woff', asType: 'font' }
-      ])
+      ]
     }
     context.renderRoute.mockReturnValue(result)
     context.options.render.http2 = { push: true }
@@ -182,12 +182,12 @@ describe('server: nuxtMiddleware', () => {
     const context = createContext()
     const result = {
       html: 'rendered html',
-      getPreloadFiles: jest.fn(() => [
+      preloadFiles: [
         { file: '/nuxt/preload1.js', asType: 'script' },
         { file: '/nuxt/preload2.js', asType: 'script', modern: true },
         { file: '/nuxt/style.css', asType: 'style' },
         { file: '/nuxt/font.woff', asType: 'font' }
-      ])
+      ]
     }
     context.renderRoute.mockReturnValue(result)
     context.options.dev = true