From bb0c105293d60f1a65896b659d62a6e35095c900 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 17 Dec 2020 14:26:50 -0500
Subject: [PATCH] wip: port rollup-plugin-vue to vite plugin

---
 LICENSE                                       |   2 +-
 package.json                                  |   3 +-
 packages/plugin-vue/package.json              |  34 +-
 packages/plugin-vue/src/handleHotUpdate.ts    | 194 +++++++++++
 packages/plugin-vue/src/index.ts              | 167 +++++++++
 packages/plugin-vue/src/main.ts               | 328 ++++++++++++++++++
 packages/plugin-vue/src/script.ts             |  49 +++
 packages/plugin-vue/src/style.ts              |  41 +++
 packages/plugin-vue/src/template.ts           | 111 ++++++
 .../plugin-vue/src/utils/descriptorCache.ts   |  26 ++
 packages/plugin-vue/src/utils/error.ts        |  30 ++
 packages/plugin-vue/src/utils/query.ts        |  24 ++
 packages/plugin-vue/tsconfig.json             |  21 ++
 13 files changed, 1027 insertions(+), 3 deletions(-)
 create mode 100644 packages/plugin-vue/src/handleHotUpdate.ts
 create mode 100644 packages/plugin-vue/src/index.ts
 create mode 100644 packages/plugin-vue/src/main.ts
 create mode 100644 packages/plugin-vue/src/script.ts
 create mode 100644 packages/plugin-vue/src/style.ts
 create mode 100644 packages/plugin-vue/src/template.ts
 create mode 100644 packages/plugin-vue/src/utils/descriptorCache.ts
 create mode 100644 packages/plugin-vue/src/utils/error.ts
 create mode 100644 packages/plugin-vue/src/utils/query.ts
 create mode 100644 packages/plugin-vue/tsconfig.json

diff --git a/LICENSE b/LICENSE
index 93a89715..9c1b313d 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-present, Yuxi (Evan) You
+Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/package.json b/package.json
index 744a5eab..d6f9102a 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
     "packages/*"
   ],
   "scripts": {
-    "lint": "eslint --ext .ts packages/*/src/**"
+    "lint": "eslint --ext .ts packages/*/src/**",
+    "bundle": "esbuild packages/vite/src/node/index.ts packages/vite/src/node/cli.ts --bundle --platform=node --target=node12 --external:fsevents --external:sugarss --external:bufferutil --external:utf-8-validate --outdir=esbuild"
   },
   "devDependencies": {
     "@types/node": "^14.14.10",
diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json
index 4a28e9ab..0550e4b7 100644
--- a/packages/plugin-vue/package.json
+++ b/packages/plugin-vue/package.json
@@ -1,4 +1,36 @@
 {
   "name": "@vitejs/plugin-vue",
-  "version": "1.0.0"
+  "version": "1.0.0",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "tsc -w --incremental -p ."
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitejs/vite.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vitejs/vite/issues"
+  },
+  "homepage": "https://github.com/vitejs/vite/tree/master/#readme",
+  "peerDependencies": {
+    "@vue/compiler-sfc": "^3.0.4"
+  },
+  "devDependencies": {
+    "@rollup/pluginutils": "^4.1.0",
+    "@types/hash-sum": "^1.0.0",
+    "@vue/compiler-sfc": "^3.0.4",
+    "debug": "^4.3.1",
+    "hash-sum": "^2.0.0",
+    "rollup": "^2.35.1",
+    "source-map": "^0.6.1"
+  }
 }
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
new file mode 100644
index 00000000..8c1c80d7
--- /dev/null
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -0,0 +1,194 @@
+import fs from 'fs'
+import _debug from 'debug'
+import { parse, SFCBlock, SFCDescriptor } from '@vue/compiler-sfc'
+import {
+  getDescriptor,
+  setDescriptor,
+  setPrevDescriptor
+} from './utils/descriptorCache'
+import { getResolvedScript, setResolvedScript } from './script'
+import { ModuleNode } from 'vite'
+
+const debug = _debug('vite:hmr')
+
+/**
+ * Vite-specific HMR handling
+ */
+export async function handleHotUpdate(
+  file: string,
+  modules: ModuleNode[]
+): Promise<ModuleNode[] | void> {
+  if (!file.endsWith('.vue')) {
+    return
+  }
+
+  const prevDescriptor = getDescriptor(file)
+  if (!prevDescriptor) {
+    // file hasn't been requested yet (e.g. async component)
+    return
+  }
+
+  let content = fs.readFileSync(file, 'utf-8')
+  if (!content) {
+    await untilModified(file)
+    content = fs.readFileSync(file, 'utf-8')
+  }
+
+  const { descriptor } = parse(content, {
+    filename: file,
+    sourceMap: true
+  })
+  setDescriptor(file, descriptor)
+  setPrevDescriptor(file, prevDescriptor)
+
+  let needRerender = false
+  const affectedModules = new Set<ModuleNode | undefined>()
+  const mainModule = modules.find(
+    (m) => !/type=/.test(m.url) || /type=script/.test(m.url)
+  )
+  const templateModule = modules.find((m) => /type=template/.test(m.url))
+
+  if (
+    !isEqualBlock(descriptor.script, prevDescriptor.script) ||
+    !isEqualBlock(descriptor.scriptSetup, prevDescriptor.scriptSetup)
+  ) {
+    affectedModules.add(mainModule)
+  }
+
+  if (!isEqualBlock(descriptor.template, prevDescriptor.template)) {
+    // when a <script setup> component's template changes, it will need correct
+    // binding metadata. However, when reloading the template alone the binding
+    // 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)!)
+    }
+    affectedModules.add(templateModule)
+    needRerender = true
+  }
+
+  let didUpdateStyle = false
+  const prevStyles = prevDescriptor.styles || []
+  const nextStyles = descriptor.styles || []
+
+  // force reload if CSS vars injection changed
+  if (prevDescriptor.cssVars.join('') !== descriptor.cssVars.join('')) {
+    affectedModules.add(mainModule)
+  }
+
+  // force reload if scoped status has changed
+  if (prevStyles.some((s) => s.scoped) !== nextStyles.some((s) => s.scoped)) {
+    // template needs to be invalidated as well
+    affectedModules.add(templateModule)
+    affectedModules.add(mainModule)
+  }
+
+  // only need to update styles if not reloading, since reload forces
+  // style updates as well.
+  for (let i = 0; i < nextStyles.length; i++) {
+    const prev = prevStyles[i]
+    const next = nextStyles[i]
+    if (!prev || !isEqualBlock(prev, next)) {
+      didUpdateStyle = true
+      const mod = modules.find((m) => m.url.includes(`type=style&index=${i}`))
+      if (mod) {
+        affectedModules.add(mod)
+      } else {
+        // new style block - force reload
+        affectedModules.add(mainModule)
+      }
+    }
+  }
+  if (prevStyles.length > nextStyles.length) {
+    // style block removed - force reload
+    affectedModules.add(mainModule)
+  }
+
+  const prevCustoms = prevDescriptor.customBlocks || []
+  const nextCustoms = descriptor.customBlocks || []
+
+  // custom blocks update causes a reload
+  // because the custom block contents is changed and it may be used in JS.
+  for (let i = 0; i < nextCustoms.length; i++) {
+    const prev = prevCustoms[i]
+    const next = nextCustoms[i]
+    if (!prev || !isEqualBlock(prev, next)) {
+      const mod = modules.find((m) =>
+        m.url.includes(`type=${prev.type}&index=${i}`)
+      )
+      if (mod) {
+        affectedModules.add(mod)
+      } else {
+        affectedModules.add(mainModule)
+      }
+    }
+  }
+  if (prevCustoms.length > nextCustoms.length) {
+    // block rmeoved, force reload
+    affectedModules.add(mainModule)
+  }
+
+  let updateType = []
+  if (needRerender) {
+    updateType.push(`template`)
+    // template is inlined into main, add main module instead
+    if (!templateModule) {
+      affectedModules.add(mainModule)
+    }
+  }
+  if (didUpdateStyle) {
+    updateType.push(`style`)
+  }
+  if (updateType.length) {
+    debug(`[vue:update(${updateType.join('&')})] ${file}`)
+  }
+  return [...affectedModules].filter(Boolean) as ModuleNode[]
+}
+
+// vitejs/vite#610 when hot-reloading Vue files, we read immediately on file
+// change event and sometimes this can be too early and get an empty buffer.
+// Poll until the file's modified time has changed before reading again.
+async function untilModified(file: string) {
+  const mtime = fs.statSync(file).mtimeMs
+  return new Promise((r) => {
+    let n = 0
+    const poll = async () => {
+      n++
+      const newMtime = fs.statSync(file).mtimeMs
+      if (newMtime !== mtime || n > 10) {
+        r(0)
+      } else {
+        setTimeout(poll, 10)
+      }
+    }
+    setTimeout(poll, 10)
+  })
+}
+
+function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null) {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  // src imports will trigger their own updates
+  if (a.src && b.src && a.src === b.src) return true
+  if (a.content !== b.content) return false
+  const keysA = Object.keys(a.attrs)
+  const keysB = Object.keys(b.attrs)
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+  return keysA.every((key) => a.attrs[key] === b.attrs[key])
+}
+
+export function isOnlyTemplateChanged(
+  prev: SFCDescriptor,
+  next: SFCDescriptor
+) {
+  return (
+    isEqualBlock(prev.script, next.script) &&
+    isEqualBlock(prev.scriptSetup, next.scriptSetup) &&
+    prev.styles.length === next.styles.length &&
+    prev.styles.every((s, i) => isEqualBlock(s, next.styles[i])) &&
+    prev.customBlocks.length === next.customBlocks.length &&
+    prev.customBlocks.every((s, i) => isEqualBlock(s, next.customBlocks[i]))
+  )
+}
diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
new file mode 100644
index 00000000..b6429e2d
--- /dev/null
+++ b/packages/plugin-vue/src/index.ts
@@ -0,0 +1,167 @@
+try {
+  require.resolve('@vue/compiler-sfc')
+} catch (e) {
+  throw new Error(
+    '@vitejs/plugin-vue requires @vue/compiler-sfc to be present in the dependency ' +
+      'tree.'
+  )
+}
+
+import fs from 'fs'
+import { Plugin, ViteDevServer } from 'vite'
+import { createFilter } from '@rollup/pluginutils'
+import {
+  SFCBlock,
+  SFCScriptCompileOptions,
+  SFCStyleCompileOptions,
+  SFCTemplateCompileOptions
+} from '@vue/compiler-sfc'
+import { parseVueRequest } from './utils/query'
+import { getDescriptor, setDescriptor } from './utils/descriptorCache'
+import { getResolvedScript } from './script'
+import { transformMain } from './main'
+import { handleHotUpdate } from './handleHotUpdate'
+import { transformTemplateAsModule } from './template'
+import { transformStyle } from './style'
+
+// extend the descriptor so we can store the scopeId on it
+declare module '@vue/compiler-sfc' {
+  interface SFCDescriptor {
+    id: string
+  }
+}
+
+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
+  script?: SFCScriptCompileOptions
+  template?: SFCTemplateCompileOptions
+  style?: SFCStyleCompileOptions
+}
+
+export interface ResolvedOptions extends Options {
+  root: string
+  devServer?: ViteDevServer
+}
+
+export default function vuePlugin(rawOptions: Options = {}): Plugin {
+  let options: ResolvedOptions = {
+    ssr: false,
+    isProduction: process.env.NODE_ENV === 'production',
+    ...rawOptions,
+    root: process.cwd()
+  }
+
+  const filter = createFilter(
+    rawOptions.include || /\.vue$/,
+    rawOptions.exclude
+  )
+
+  return {
+    name: 'vite:vue',
+
+    handleHotUpdate,
+
+    configResolved(config) {
+      options = {
+        ...options,
+        root: config.root,
+        isProduction: config.isProduction,
+        ssr: !!config.build.ssr
+      }
+    },
+
+    configureServer(server) {
+      options.devServer = server
+    },
+
+    async resolveId(id, importer) {
+      const { filename, query } = parseVueRequest(id)
+      // serve subpart requests (*?vue) as virtual modules
+      if (query.vue) {
+        if (query.src) {
+          const resolved = await this.resolve(filename, importer, {
+            skipSelf: true
+          })
+          if (resolved) {
+            // associate this imported file to the importer SFC's descriptor
+            // so that we can retrieve it in transform()
+            setDescriptor(resolved.id, getDescriptor(importer!))
+            const [, originalQuery] = id.split('?', 2)
+            resolved.id += `?${originalQuery}`
+            return resolved
+          }
+        } else if (!filter(filename)) {
+          return null
+        }
+        return id
+      }
+    },
+
+    load(id) {
+      const { filename, query } = parseVueRequest(id)
+      if (!filter(filename)) {
+        return
+      }
+      // serve subpart virtual modules
+      if (query.vue) {
+        if (query.src) {
+          return fs.readFileSync(filename, 'utf-8')
+        }
+        const descriptor = getDescriptor(filename)
+        let block: SFCBlock | null | undefined
+        if (query.type === 'script') {
+          // handle <scrip> + <script setup> merge via compileScript()
+          block = getResolvedScript(descriptor, options.ssr)
+        } else if (query.type === 'template') {
+          block = descriptor.template!
+        } else if (query.type === 'style') {
+          block = descriptor.styles[query.index!]
+        } else if (query.index) {
+          block = descriptor.customBlocks[query.index]
+        }
+        if (block) {
+          return {
+            code: block.content,
+            map: block.map as any
+          }
+        }
+      }
+    },
+
+    transform(code, id) {
+      const { filename, query } = parseVueRequest(id)
+      if (!filter(filename)) {
+        return
+      }
+
+      if (!query.vue) {
+        // main request
+        return transformMain(code, filename, options, this)
+      }
+
+      if (query.vue) {
+        const descriptor = getDescriptor(filename)
+        if (query.type === 'template') {
+          return transformTemplateAsModule(code, descriptor, options, this)
+        } else if (query.type === 'style') {
+          return transformStyle(
+            code,
+            descriptor,
+            Number(query.index),
+            options,
+            this
+          )
+        }
+      }
+    }
+  }
+}
+
+// overwrite for cjs require('...')() usage
+module.exports = vuePlugin
diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
new file mode 100644
index 00000000..cf4a04a3
--- /dev/null
+++ b/packages/plugin-vue/src/main.ts
@@ -0,0 +1,328 @@
+import hash from 'hash-sum'
+import path from 'path'
+import qs from 'querystring'
+import {
+  parse,
+  rewriteDefault,
+  SFCBlock,
+  SFCDescriptor
+} from '@vue/compiler-sfc'
+import { ResolvedOptions } from '.'
+import { getPrevDescriptor, setDescriptor } from './utils/descriptorCache'
+import { PluginContext, TransformPluginContext } from 'rollup'
+import { resolveScript } from './script'
+import { transformTemplateInMain } from './template'
+import { isOnlyTemplateChanged } from './handleHotUpdate'
+import { RawSourceMap, SourceMapConsumer, SourceMapGenerator } from 'source-map'
+import { createRollupError } from './utils/error'
+
+export async function transformMain(
+  code: string,
+  filename: string,
+  options: ResolvedOptions,
+  pluginContext: TransformPluginContext
+) {
+  const { root, devServer, isProduction, ssr } = options
+
+  // prev descriptor is only set and used for hmr
+  const prevDescriptor = getPrevDescriptor(filename)
+  const { descriptor, errors } = parse(code, {
+    sourceMap: true,
+    filename
+  })
+
+  // set the id on the descriptor
+  const shortFilePath = path
+    .relative(root, filename)
+    .replace(/^(\.\.[\/\\])+/, '')
+    .replace(/\\/g, '/')
+
+  descriptor.id = hash(
+    isProduction ? shortFilePath + '\n' + code : shortFilePath
+  )
+
+  setDescriptor(filename, descriptor)
+
+  if (errors.length) {
+    errors.forEach((error) =>
+      pluginContext.error(createRollupError(filename, error))
+    )
+    return null
+  }
+
+  // feature information
+  const hasScoped = descriptor.styles.some((s) => s.scoped)
+
+  // script
+  const { code: scriptCode, map } = await genScriptCode(descriptor, options)
+
+  // template
+  // Check if we can use compile template as inlined render function
+  // inside <script setup>. This can only be done for build because
+  // inlined template cannot be individually hot updated.
+  const useInlineTemplate =
+    !devServer &&
+    descriptor.scriptSetup &&
+    !(descriptor.template && descriptor.template.src)
+  const hasTemplateImport = descriptor.template && !useInlineTemplate
+
+  let templateCode = ''
+  let templateMap
+  if (hasTemplateImport) {
+    ;({ code: templateCode, map: templateMap } = genTemplateCode(
+      descriptor,
+      options,
+      pluginContext
+    ))
+  }
+
+  const renderReplace = hasTemplateImport
+    ? ssr
+      ? `_sfc_main.ssrRender = _sfc_ssrRender`
+      : `_sfc_main.render = _sfc_render`
+    : ''
+
+  // styles
+  const stylesCode = genStyleCode(descriptor)
+
+  // custom blocks
+  const customBlocksCode = genCustomBlockCode(descriptor)
+
+  const output: string[] = [
+    scriptCode,
+    templateCode,
+    stylesCode,
+    customBlocksCode,
+    renderReplace
+  ]
+  if (hasScoped) {
+    output.push(
+      `_sfc_main.__scopeId = ${JSON.stringify(`data-v-${descriptor.id}`)}`
+    )
+  }
+  if (!isProduction) {
+    output.push(`_sfc_main.__file = ${JSON.stringify(shortFilePath)}`)
+  } else if (devServer) {
+    // expose filename during serve for devtools to pickup
+    output.push(
+      `_sfc_main.__file = ${JSON.stringify(path.basename(shortFilePath))}`
+    )
+  }
+  output.push('export default _sfc_main')
+
+  // HMR
+  if (devServer) {
+    // check if the template is the only thing that changed
+    if (prevDescriptor && isOnlyTemplateChanged(prevDescriptor, descriptor)) {
+      output.push(`export const _rerender_only = true`)
+    }
+    output.push(`_sfc_main.__hmrId = ${JSON.stringify(descriptor.id)}`)
+    output.push(
+      `__VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)`
+    )
+    output.push(
+      `import.meta.hot.accept(({ default: updated, _rerender_only }) => {`,
+      `  if (_rerender_only) {`,
+      `    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)`,
+      `  } else {`,
+      `    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated)`,
+      `  }`,
+      `})`
+    )
+  }
+
+  // if the template is inlined into the main module (indicated by the presence
+  // of templateMap, we need to concatenate the two source maps.
+  let resolvedMap = map
+  if (map && templateMap) {
+    const generator = SourceMapGenerator.fromSourceMap(
+      new SourceMapConsumer(map)
+    )
+    const offset = scriptCode.match(/\r?\n/g)?.length || 1
+    const templateMapConsumer = new SourceMapConsumer(templateMap)
+    templateMapConsumer.eachMapping((m) => {
+      generator.addMapping({
+        source: m.source,
+        original: { line: m.originalLine, column: m.originalColumn },
+        generated: {
+          line: m.generatedLine + offset,
+          column: m.generatedColumn
+        }
+      })
+    })
+    resolvedMap = (generator as any).toJSON()
+    // if this is a template only update, we will be reusing a cached version
+    // of the main module compile result, which has outdated sourcesContent.
+    resolvedMap.sourcesContent = templateMap.sourcesContent
+  }
+
+  return {
+    code: output.join('\n'),
+    map: resolvedMap || {
+      mappings: ''
+    }
+  }
+}
+
+function genTemplateCode(
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions,
+  pluginContext: PluginContext
+) {
+  const renderFnName = options.ssr ? 'ssrRender' : 'render'
+  const template = descriptor.template!
+
+  // If the template is not using pre-processor AND is not using external src,
+  // compile and inline it directly in the main module. When served in vite this
+  // saves an extra request per SFC which can improve load performance.
+  if (!template.lang && !template.src) {
+    return transformTemplateInMain(
+      template.content,
+      descriptor,
+      options,
+      pluginContext
+    )
+  } else {
+    const src = template.src || descriptor.filename
+    const srcQuery = template.src ? `&src` : ``
+    const attrsQuery = attrsToQuery(template.attrs, 'js', true)
+    const query = `?vue&type=template${srcQuery}${attrsQuery}`
+    return {
+      code: `import { ${renderFnName} as _sfc_${renderFnName} } from ${JSON.stringify(
+        src + query
+      )}`,
+      map: undefined
+    }
+  }
+}
+
+async function genScriptCode(
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions
+): Promise<{
+  code: string
+  map: RawSourceMap
+}> {
+  let scriptCode = `const _sfc_main = {}`
+  let map
+  const script = resolveScript(descriptor, options)
+  if (script) {
+    // If the script is js/ts and has no external src, it can be directly placed
+    // in the main module.
+    if (
+      (!script.lang || (script.lang === 'ts' && options.devServer)) &&
+      !script.src
+    ) {
+      scriptCode = rewriteDefault(script.content, `_sfc_main`)
+      map = script.map
+      if (script.lang === 'ts') {
+        const result = await options.devServer!.transformWithEsbuild(
+          scriptCode,
+          descriptor.filename,
+          { loader: 'ts' },
+          map
+        )
+        scriptCode = result.code
+        map = result.map
+      }
+    } else {
+      const src = script.src || descriptor.filename
+      const attrsQuery = attrsToQuery(script.attrs, 'js')
+      const srcQuery = script.src ? `&src` : ``
+      const query = `?vue&type=script${srcQuery}${attrsQuery}`
+      const scriptRequest = JSON.stringify(src + query)
+      scriptCode =
+        `import _sfc_main from ${scriptRequest}\n` +
+        `export * from ${scriptRequest}` // support named exports
+    }
+  }
+  return {
+    code: scriptCode,
+    map: map as any
+  }
+}
+
+function genStyleCode(descriptor: SFCDescriptor) {
+  let stylesCode = ``
+  let hasCSSModules = false
+  if (descriptor.styles.length) {
+    descriptor.styles.forEach((style, i) => {
+      const src = style.src || descriptor.filename
+      // do not include module in default query, since we use it to indicate
+      // that the module needs to export the modules json
+      const attrsQuery = attrsToQuery(style.attrs, 'css')
+      const srcQuery = style.src ? `&src` : ``
+      const query = `?vue&type=style&index=${i}${srcQuery}`
+      const styleRequest = src + query + attrsQuery
+      if (style.module) {
+        if (!hasCSSModules) {
+          stylesCode += `\nconst cssModules = _sfc_main.__cssModules = {}`
+          hasCSSModules = true
+        }
+        stylesCode += genCSSModulesCode(i, styleRequest, style.module)
+      } else {
+        stylesCode += `\nimport ${JSON.stringify(styleRequest)}`
+      }
+      // TODO SSR critical CSS collection
+    })
+  }
+  return stylesCode
+}
+
+function genCustomBlockCode(descriptor: SFCDescriptor) {
+  let code = ''
+  descriptor.customBlocks.forEach((block, index) => {
+    const src = block.src || descriptor.filename
+    const attrsQuery = attrsToQuery(block.attrs, block.type)
+    const srcQuery = block.src ? `&src` : ``
+    const query = `?vue&type=${block.type}&index=${index}${srcQuery}${attrsQuery}`
+    const request = JSON.stringify(src + query)
+    code += `import block${index} from ${request}\n`
+    code += `if (typeof block${index} === 'function') block${index}(_sfc_main)\n`
+  })
+  return code
+}
+
+function genCSSModulesCode(
+  index: number,
+  request: string,
+  moduleName: string | boolean
+): string {
+  const styleVar = `style${index}`
+  const exposedName = typeof moduleName === 'string' ? moduleName : '$style'
+  // inject `.module` before extension so vite handles it as css module
+  const moduleRequest = request.replace(/\.(\w+)$/, '.module.$1')
+  return (
+    `\nimport ${styleVar} from ${JSON.stringify(moduleRequest)}` +
+    `\ncssModules["${exposedName}"] = ${styleVar}`
+  )
+}
+
+// these are built-in query parameters so should be ignored
+// if the user happen to add them as attrs
+const ignoreList = ['id', 'index', 'src', 'type', 'lang', 'module']
+
+function attrsToQuery(
+  attrs: SFCBlock['attrs'],
+  langFallback?: string,
+  forceLangFallback = false
+): string {
+  let query = ``
+  for (const name in attrs) {
+    const value = attrs[name]
+    if (!ignoreList.includes(name)) {
+      query += `&${qs.escape(name)}${
+        value ? `=${qs.escape(String(value))}` : ``
+      }`
+    }
+  }
+  if (langFallback || attrs.lang) {
+    query +=
+      `lang` in attrs
+        ? forceLangFallback
+          ? `&lang.${langFallback}`
+          : `&lang.${attrs.lang}`
+        : `&lang.${langFallback}`
+  }
+  return query
+}
diff --git a/packages/plugin-vue/src/script.ts b/packages/plugin-vue/src/script.ts
new file mode 100644
index 00000000..2a838f25
--- /dev/null
+++ b/packages/plugin-vue/src/script.ts
@@ -0,0 +1,49 @@
+import { compileScript, SFCDescriptor, SFCScriptBlock } from '@vue/compiler-sfc'
+import { ResolvedOptions } from '.'
+import { getTemplateCompilerOptions } from './template'
+
+// ssr and non ssr builds would output different script content
+const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
+const ssrCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
+
+export function getResolvedScript(
+  descriptor: SFCDescriptor,
+  isServer = false
+): SFCScriptBlock | null | undefined {
+  return (isServer ? ssrCache : clientCache).get(descriptor)
+}
+
+export function setResolvedScript(
+  descriptor: SFCDescriptor,
+  script: SFCScriptBlock,
+  isServer = false
+) {
+  ;(isServer ? ssrCache : clientCache).set(descriptor, script)
+}
+
+export function resolveScript(
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions
+) {
+  if (!descriptor.script && !descriptor.scriptSetup) {
+    return null
+  }
+
+  const cacheToUse = options.ssr ? ssrCache : clientCache
+  const cached = cacheToUse.get(descriptor)
+  if (cached) {
+    return cached
+  }
+
+  let resolved: SFCScriptBlock | null = null
+
+  resolved = compileScript(descriptor, {
+    id: descriptor.id,
+    isProd: options.isProduction,
+    inlineTemplate: !options.devServer,
+    templateOptions: getTemplateCompilerOptions(descriptor, options)
+  })
+
+  cacheToUse.set(descriptor, resolved)
+  return resolved
+}
diff --git a/packages/plugin-vue/src/style.ts b/packages/plugin-vue/src/style.ts
new file mode 100644
index 00000000..ce9a653c
--- /dev/null
+++ b/packages/plugin-vue/src/style.ts
@@ -0,0 +1,41 @@
+import { compileStyleAsync, SFCDescriptor } from '@vue/compiler-sfc'
+import { TransformPluginContext } from 'rollup'
+import { ResolvedOptions } from '.'
+
+export async function transformStyle(
+  code: string,
+  descriptor: SFCDescriptor,
+  index: number,
+  options: ResolvedOptions,
+  pluginContext: TransformPluginContext
+) {
+  const block = descriptor.styles[index]
+  // vite already handles pre-processors and CSS module so this is only
+  // applying SFC-specific transforms like scoped mode and CSS vars rewrite (v-bind(var))
+  const result = await compileStyleAsync({
+    filename: descriptor.filename,
+    id: `data-v-${descriptor.id}`,
+    isProd: options.isProduction,
+    source: code,
+    scoped: block.scoped
+  })
+
+  if (result.errors.length) {
+    result.errors.forEach((error: any) => {
+      if (error.line && error.column) {
+        error.loc = {
+          file: descriptor.filename,
+          line: error.line + block.loc.start.line,
+          column: error.column
+        }
+      }
+      pluginContext.error(error)
+    })
+    return null
+  }
+
+  return {
+    code: result.code,
+    map: result.map as any
+  }
+}
diff --git a/packages/plugin-vue/src/template.ts b/packages/plugin-vue/src/template.ts
new file mode 100644
index 00000000..5c4ecb14
--- /dev/null
+++ b/packages/plugin-vue/src/template.ts
@@ -0,0 +1,111 @@
+import {
+  compileTemplate,
+  SFCDescriptor,
+  SFCTemplateCompileOptions
+} from '@vue/compiler-sfc'
+import { PluginContext, TransformPluginContext } from 'rollup'
+import { ResolvedOptions } from '.'
+import { getResolvedScript } from './script'
+import { createRollupError } from './utils/error'
+
+export function transformTemplateAsModule(
+  code: string,
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions,
+  pluginContext: TransformPluginContext
+) {
+  const result = compile(code, descriptor, options, pluginContext)
+
+  let returnCode = result.code
+  if (options.devServer) {
+    returnCode += `\nimport.meta.hot.accept(({ render }) => {
+      __VUE_HMR_RUNTIME__.rerender(${JSON.stringify(descriptor.id)}, render)
+    })`
+  }
+
+  return {
+    code: returnCode,
+    map: result.map as any
+  }
+}
+
+/**
+ * transform the template directly in the main SFC module
+ */
+export function transformTemplateInMain(
+  code: string,
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions,
+  pluginContext: PluginContext
+) {
+  const result = compile(code, descriptor, options, pluginContext)
+  return {
+    ...result,
+    code: result.code.replace(
+      /\nexport (function|const) (render|ssrRender)/,
+      '\n$1 _sfc_$2'
+    )
+  }
+}
+
+export function compile(
+  code: string,
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions,
+  pluginContext: PluginContext
+) {
+  const filename = descriptor.filename
+  const result = compileTemplate({
+    ...getTemplateCompilerOptions(descriptor, options)!,
+    source: code
+  })
+
+  if (result.errors.length) {
+    result.errors.forEach((error) =>
+      pluginContext.error(
+        typeof error === 'string'
+          ? { id: filename, message: error }
+          : createRollupError(filename, error)
+      )
+    )
+  }
+
+  if (result.tips.length) {
+    result.tips.forEach((tip) =>
+      pluginContext.warn({
+        id: filename,
+        message: tip
+      })
+    )
+  }
+
+  return result
+}
+
+export function getTemplateCompilerOptions(
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions
+): Omit<SFCTemplateCompileOptions, 'source'> | undefined {
+  const block = descriptor.template
+  if (!block) {
+    return
+  }
+  const resolvedScript = getResolvedScript(descriptor, options.ssr)
+  const hasScoped = descriptor.styles.some((s) => s.scoped)
+  return {
+    ...options.template,
+    id: descriptor.id,
+    scoped: hasScoped,
+    isProd: options.isProduction,
+    filename: descriptor.filename,
+    inMap: block.src ? undefined : block.map,
+    ssr: options.ssr,
+    ssrCssVars: descriptor.cssVars,
+    transformAssetUrls: options.template?.transformAssetUrls,
+    compilerOptions: {
+      ...options.template?.compilerOptions,
+      scopeId: hasScoped ? `data-v-${descriptor.id}` : undefined,
+      bindingMetadata: resolvedScript ? resolvedScript.bindings : undefined
+    }
+  }
+}
diff --git a/packages/plugin-vue/src/utils/descriptorCache.ts b/packages/plugin-vue/src/utils/descriptorCache.ts
new file mode 100644
index 00000000..1f58f1cb
--- /dev/null
+++ b/packages/plugin-vue/src/utils/descriptorCache.ts
@@ -0,0 +1,26 @@
+import { SFCDescriptor } from '@vue/compiler-sfc'
+
+const cache = new Map<string, SFCDescriptor>()
+const prevCache = new Map<string, SFCDescriptor | undefined>()
+
+export function setDescriptor(filename: string, entry: SFCDescriptor) {
+  cache.set(filename, entry)
+}
+
+export function getPrevDescriptor(filename: string) {
+  return prevCache.get(filename)
+}
+
+export function setPrevDescriptor(filename: string, entry: SFCDescriptor) {
+  prevCache.set(filename, entry)
+}
+
+export function getDescriptor(filename: string) {
+  if (cache.has(filename)) {
+    return cache.get(filename)!
+  }
+  throw new Error(
+    `${filename} has no corresponding SFC entry in the cache. ` +
+      `This is a @vitejs/plugin-vue internal error, please open an issue.`
+  )
+}
diff --git a/packages/plugin-vue/src/utils/error.ts b/packages/plugin-vue/src/utils/error.ts
new file mode 100644
index 00000000..1ff2fd3e
--- /dev/null
+++ b/packages/plugin-vue/src/utils/error.ts
@@ -0,0 +1,30 @@
+import { CompilerError } from '@vue/compiler-sfc'
+import { RollupError } from 'rollup'
+
+export function createRollupError(
+  id: string,
+  error: CompilerError | SyntaxError
+): RollupError {
+  if ('code' in error) {
+    return {
+      id,
+      plugin: 'vue',
+      message: error.message,
+      parserError: error,
+      loc: error.loc
+        ? {
+            file: id,
+            line: error.loc.start.line,
+            column: error.loc.start.column
+          }
+        : undefined
+    }
+  } else {
+    return {
+      id,
+      plugin: 'vue',
+      message: error.message,
+      parserError: error
+    }
+  }
+}
diff --git a/packages/plugin-vue/src/utils/query.ts b/packages/plugin-vue/src/utils/query.ts
new file mode 100644
index 00000000..19b4c537
--- /dev/null
+++ b/packages/plugin-vue/src/utils/query.ts
@@ -0,0 +1,24 @@
+import qs from 'querystring'
+
+export interface VueQuery {
+  vue?: boolean
+  type?: 'script' | 'template' | 'style' | 'custom'
+  src?: string
+  index?: number
+  lang?: string
+}
+
+export function parseVueRequest(id: string) {
+  const [filename, rawQuery] = id.split(`?`, 2)
+  const query = qs.parse(rawQuery) as VueQuery
+  if (query.vue != null) {
+    query.vue = true
+  }
+  if (query.index) {
+    query.index = Number(query.index)
+  }
+  return {
+    filename,
+    query
+  }
+}
diff --git a/packages/plugin-vue/tsconfig.json b/packages/plugin-vue/tsconfig.json
new file mode 100644
index 00000000..3983dfe7
--- /dev/null
+++ b/packages/plugin-vue/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "include": ["src"],
+  "exclude": ["**/*.spec.ts"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "ES2019",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "strict": true,
+    "declaration": true,
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      // vite typings uses custom paths that is patched into relative paths during build
+      // this is a shim that makes even dev-time vite typings work for plugin-vue
+      "types/*": ["../vite/types/*"]
+    }
+  }
+}