feat(plugin-vue): support for vite core new ssr impl

Author: yyx990803

packages/plugin-vue/src/handleHotUpdate.ts

@@ -55,7 +55,11 @@ export async function handleHotUpdate({
     // metadata will not be available since the script part isn't loaded.
     // in this case, reuse the compiled script from previous descriptor.
     if (mainModule && !affectedModules.has(mainModule)) {
-      setResolvedScript(descriptor, getResolvedScript(prevDescriptor)!)
+      setResolvedScript(
+        descriptor,
+        getResolvedScript(prevDescriptor, false)!,
+        false
+      )
     }
     affectedModules.add(templateModule)
     needRerender = true

packages/plugin-vue/src/index.ts

@@ -37,7 +37,6 @@ export interface Options {
   include?: string | RegExp | (string | RegExp)[]
   exclude?: string | RegExp | (string | RegExp)[]
 
-  ssr?: boolean
   isProduction?: boolean
 
   // options to pass on to @vue/compiler-sfc
@@ -53,7 +52,6 @@ export interface ResolvedOptions extends Options {
 
 export default function vuePlugin(rawOptions: Options = {}): Plugin {
   let options: ResolvedOptions = {
-    ssr: false,
     isProduction: process.env.NODE_ENV === 'production',
     ...rawOptions,
     root: process.cwd()
@@ -75,11 +73,12 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
     },
 
     config(config) {
-      // provide default values for vue runtime esm defines
-      config.define = {
-        __VUE_OPTIONS_API__: true,
-        __VUE_PROD_DEVTOOLS__: false,
-        ...config.define
+      return {
+        define: {
+          __VUE_OPTIONS_API__: true,
+          __VUE_PROD_DEVTOOLS__: false
+        },
+        ssrExternal: ['vue', '@vue/server-renderer']
       }
     },
 
@@ -102,7 +101,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
       }
     },
 
-    load(id) {
+    load(id, ssr = false) {
       const { filename, query } = parseVueRequest(id)
       // select corresponding block for subpart virtual modules
       if (query.vue) {
@@ -113,7 +112,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
         let block: SFCBlock | null | undefined
         if (query.type === 'script') {
           // handle <scrip> + <script setup> merge via compileScript()
-          block = getResolvedScript(descriptor, options.ssr)
+          block = getResolvedScript(descriptor, ssr)
         } else if (query.type === 'template') {
           block = descriptor.template!
         } else if (query.type === 'style') {
@@ -130,20 +129,20 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
       }
     },
 
-    transform(code, id) {
+    transform(code, id, ssr = false) {
       const { filename, query } = parseVueRequest(id)
       if (!query.vue && !filter(filename)) {
         return
       }
 
       if (!query.vue) {
         // main request
-        return transformMain(code, filename, options, this)
+        return transformMain(code, filename, options, this, ssr)
       } else {
         // sub block request
         const descriptor = getDescriptor(filename)!
         if (query.type === 'template') {
-          return transformTemplateAsModule(code, descriptor, options, this)
+          return transformTemplateAsModule(code, descriptor, options, this, ssr)
         } else if (query.type === 'style') {
           return transformStyle(
             code,

packages/plugin-vue/src/main.ts

@@ -18,9 +18,10 @@ export async function transformMain(
   code: string,
   filename: string,
   options: ResolvedOptions,
-  pluginContext: TransformPluginContext
+  pluginContext: TransformPluginContext,
+  ssr: boolean
 ) {
-  const { root, devServer, isProduction, ssr } = options
+  const { root, devServer, isProduction } = options
 
   // prev descriptor is only set and used for hmr
   const prevDescriptor = getPrevDescriptor(filename)
@@ -45,7 +46,8 @@ export async function transformMain(
   const { code: scriptCode, map } = await genScriptCode(
     descriptor,
     options,
-    pluginContext
+    pluginContext,
+    ssr
   )
 
   // template
@@ -64,7 +66,8 @@ export async function transformMain(
     ;({ code: templateCode, map: templateMap } = await genTemplateCode(
       descriptor,
       options,
-      pluginContext
+      pluginContext,
+      ssr
     ))
   }
 
@@ -99,7 +102,7 @@ export async function transformMain(
   output.push('export default _sfc_main')
 
   // HMR
-  if (devServer && !isProduction) {
+  if (devServer && !ssr && !isProduction) {
     output.push(`_sfc_main.__hmrId = ${JSON.stringify(descriptor.id)}`)
     output.push(
       `__VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)`
@@ -155,7 +158,8 @@ export async function transformMain(
 async function genTemplateCode(
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
-  pluginContext: PluginContext
+  pluginContext: PluginContext,
+  ssr: boolean
 ) {
   const template = descriptor.template!
 
@@ -167,7 +171,8 @@ async function genTemplateCode(
       template.content,
       descriptor,
       options,
-      pluginContext
+      pluginContext,
+      ssr
     )
   } else {
     if (template.src) {
@@ -178,7 +183,7 @@ async function genTemplateCode(
     const attrsQuery = attrsToQuery(template.attrs, 'js', true)
     const query = `?vue&type=template${srcQuery}${attrsQuery}`
     const request = JSON.stringify(src + query)
-    const renderFnName = options.ssr ? 'ssrRender' : 'render'
+    const renderFnName = ssr ? 'ssrRender' : 'render'
     return {
       code: `import { ${renderFnName} as _sfc_${renderFnName} } from ${request}`,
       map: undefined
@@ -189,14 +194,15 @@ async function genTemplateCode(
 async function genScriptCode(
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
-  pluginContext: PluginContext
+  pluginContext: PluginContext,
+  ssr: boolean
 ): Promise<{
   code: string
   map: RawSourceMap
 }> {
   let scriptCode = `const _sfc_main = {}`
   let map
-  const script = resolveScript(descriptor, options)
+  const script = resolveScript(descriptor, options, ssr)
   if (script) {
     // If the script is js/ts and has no external src, it can be directly placed
     // in the main module.

packages/plugin-vue/src/script.ts

@@ -8,28 +8,29 @@ const ssrCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
 
 export function getResolvedScript(
   descriptor: SFCDescriptor,
-  isServer = false
+  ssr: boolean
 ): SFCScriptBlock | null | undefined {
-  return (isServer ? ssrCache : clientCache).get(descriptor)
+  return (ssr ? ssrCache : clientCache).get(descriptor)
 }
 
 export function setResolvedScript(
   descriptor: SFCDescriptor,
   script: SFCScriptBlock,
-  isServer = false
+  ssr: boolean
 ) {
-  ;(isServer ? ssrCache : clientCache).set(descriptor, script)
+  ;(ssr ? ssrCache : clientCache).set(descriptor, script)
 }
 
 export function resolveScript(
   descriptor: SFCDescriptor,
-  options: ResolvedOptions
+  options: ResolvedOptions,
+  ssr: boolean
 ) {
   if (!descriptor.script && !descriptor.scriptSetup) {
     return null
   }
 
-  const cacheToUse = options.ssr ? ssrCache : clientCache
+  const cacheToUse = ssr ? ssrCache : clientCache
   const cached = cacheToUse.get(descriptor)
   if (cached) {
     return cached
@@ -42,7 +43,7 @@ export function resolveScript(
     id: descriptor.id,
     isProd: options.isProduction,
     inlineTemplate: !options.devServer,
-    templateOptions: resolveTemplateCompilerOptions(descriptor, options)
+    templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr)
   })
 
   cacheToUse.set(descriptor, resolved)

packages/plugin-vue/src/template.ts

@@ -14,12 +14,13 @@ export function transformTemplateAsModule(
   code: string,
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
-  pluginContext: TransformPluginContext
+  pluginContext: TransformPluginContext,
+  ssr: boolean
 ) {
-  const result = compile(code, descriptor, options, pluginContext)
+  const result = compile(code, descriptor, options, pluginContext, ssr)
 
   let returnCode = result.code
-  if (options.devServer && !options.isProduction) {
+  if (options.devServer && !ssr && !options.isProduction) {
     returnCode += `\nimport.meta.hot.accept(({ render }) => {
       __VUE_HMR_RUNTIME__.rerender(${JSON.stringify(descriptor.id)}, render)
     })`
@@ -38,9 +39,10 @@ export function transformTemplateInMain(
   code: string,
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
-  pluginContext: PluginContext
+  pluginContext: PluginContext,
+  ssr: boolean
 ) {
-  const result = compile(code, descriptor, options, pluginContext)
+  const result = compile(code, descriptor, options, pluginContext, ssr)
   return {
     ...result,
     code: result.code.replace(
@@ -54,11 +56,12 @@ export function compile(
   code: string,
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
-  pluginContext: PluginContext
+  pluginContext: PluginContext,
+  ssr: boolean
 ) {
   const filename = descriptor.filename
   const result = compileTemplate({
-    ...resolveTemplateCompilerOptions(descriptor, options)!,
+    ...resolveTemplateCompilerOptions(descriptor, options, ssr)!,
     source: code
   })
 
@@ -86,13 +89,14 @@ export function compile(
 
 export function resolveTemplateCompilerOptions(
   descriptor: SFCDescriptor,
-  options: ResolvedOptions
+  options: ResolvedOptions,
+  ssr: boolean
 ): Omit<SFCTemplateCompileOptions, 'source'> | undefined {
   const block = descriptor.template
   if (!block) {
     return
   }
-  const resolvedScript = getResolvedScript(descriptor, options.ssr)
+  const resolvedScript = getResolvedScript(descriptor, ssr)
   const hasScoped = descriptor.styles.some((s) => s.scoped)
   const { id, filename, cssVars } = descriptor
 
@@ -148,7 +152,7 @@ export function resolveTemplateCompilerOptions(
     scoped: hasScoped,
     isProd: options.isProduction,
     inMap: block.src ? undefined : block.map,
-    ssr: options.ssr,
+    ssr,
     ssrCssVars: cssVars,
     transformAssetUrls,
     preprocessLang: block.lang,