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

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,