feat: default esm SSR build, simplified externalization (#8348)

Author: patak-cat

playground/ssr-vue/__tests__/serve.ts

@@ -38,7 +38,7 @@ export async function serve(): Promise<{ close(): Promise<void> }> {
 
   await kill(port)
 
-  const { createServer } = require(path.resolve(rootDir, 'server.js'))
+  const { createServer } = await import(path.resolve(rootDir, 'server.js'))
   const { app, vite } = await createServer(
     rootDir,
     isBuild,

playground/ssr-vue/__tests__/ssr-vue.spec.ts

@@ -186,10 +186,14 @@ test.runIf(isBuild)('dynamic css file should be preloaded', async () => {
   const re =
     /link rel="modulepreload".*?href="\/test\/assets\/(Home\.\w{8}\.js)"/
   const filename = re.exec(homeHtml)[1]
-  const manifest = require(resolve(
-    process.cwd(),
-    './playground-temp/ssr-vue/dist/client/ssr-manifest.json'
-  ))
+  const manifest = (
+    await import(
+      resolve(
+        process.cwd(),
+        './playground-temp/ssr-vue/dist/client/ssr-manifest.json'
+      )
+    )
+  ).default
   const depFile = manifest[filename]
   for (const file of depFile) {
     expect(homeHtml).toMatch(file)

playground/ssr-vue/package.json

@@ -2,6 +2,7 @@
   "name": "test-ssr-vue",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "node server",
     "build": "npm run build:client && npm run build:server",

playground/ssr-vue/prerender.js

@@ -1,14 +1,14 @@
 // Pre-render the app into static HTML.
 // run `npm run generate` and then `dist/static` can be served as a static site.
 
-const fs = require('fs')
-const path = require('path')
+import fs from 'fs'
+import path from 'path'
 
 const toAbsolute = (p) => path.resolve(__dirname, p)
 
-const manifest = require('./dist/static/ssr-manifest.json')
+const manifest = (await import('./dist/static/ssr-manifest.json')).default
 const template = fs.readFileSync(toAbsolute('dist/static/index.html'), 'utf-8')
-const { render } = require('./dist/server/entry-server.js')
+const { render } = await import('./dist/server/entry-server.js')
 
 // determine routes to pre-render from src/pages
 const routesToPrerender = fs

playground/ssr-vue/server.js

@@ -1,15 +1,17 @@
 // @ts-check
-const fs = require('fs')
-const path = require('path')
-const express = require('express')
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import express from 'express'
 
 const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
 
-async function createServer(
+export async function createServer(
   root = process.cwd(),
   isProd = process.env.NODE_ENV === 'production',
   hmrPort
 ) {
+  const __dirname = path.dirname(fileURLToPath(import.meta.url))
   const resolve = (p) => path.resolve(__dirname, p)
 
   const indexProd = isProd
@@ -18,7 +20,7 @@ async function createServer(
 
   const manifest = isProd
     ? // @ts-ignore
-      require('./dist/client/ssr-manifest.json')
+      (await import('./dist/client/ssr-manifest.json')).default
     : {}
 
   const app = express()
@@ -28,7 +30,9 @@ async function createServer(
    */
   let vite
   if (!isProd) {
-    vite = await require('vite').createServer({
+    vite = await (
+      await import('vite')
+    ).createServer({
       base: '/test/',
       root,
       logLevel: isTest ? 'error' : 'info',
@@ -48,10 +52,10 @@ async function createServer(
     // use vite's connect instance as middleware
     app.use(vite.middlewares)
   } else {
-    app.use(require('compression')())
+    app.use((await import('compression')).default())
     app.use(
       '/test/',
-      require('serve-static')(resolve('dist/client'), {
+      (await import('serve-static')).default(resolve('dist/client'), {
         index: false
       })
     )
@@ -70,7 +74,7 @@ async function createServer(
       } else {
         template = indexProd
         // @ts-ignore
-        render = require('./dist/server/entry-server.js').render
+        render = (await import('./dist/server/entry-server.js')).render
       }
 
       const [appHtml, preloadLinks] = await render(url, manifest)
@@ -97,6 +101,3 @@ if (!isTest) {
     })
   )
 }
-
-// for test use
-exports.createServer = createServer

playground/ssr-vue/vite.config.js

@@ -1,14 +1,12 @@
-const vuePlugin = require('@vitejs/plugin-vue')
-const vueJsx = require('@vitejs/plugin-vue-jsx')
+import { defineConfig } from 'vite'
+import vuePlugin from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 const virtualFile = '@virtual-file'
 const virtualId = '\0' + virtualFile
 const nestedVirtualFile = '@nested-virtual-file'
 const nestedVirtualId = '\0' + nestedVirtualFile
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   base: '/test/',
   plugins: [
     vuePlugin(),
@@ -56,4 +54,4 @@ module.exports = {
   optimizeDeps: {
     exclude: ['example-external-component']
   }
-}
+})