.github/renovate.json5

@@ -4,7 +4,6 @@
   "ignorePaths": ["**/__tests__/**"],
   "pin": false,
   "rangeStrategy": "bump",
-  "node": false,
   "packageRules": [
     {
       "depTypeList": ["peerDependencies"],

.github/workflows/ci.yml

@@ -50,7 +50,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2.4.0
 
       - name: Set node version to ${{ matrix.node_version }}
         uses: actions/setup-node@v3
@@ -101,7 +101,7 @@ jobs:
           fetch-depth: 0
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2.4.0
 
       - name: Set node version to 16
         uses: actions/setup-node@v3

.github/workflows/publish.yml

@@ -18,7 +18,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2.4.0
 
       - name: Set node version to 16.x
         uses: actions/setup-node@v3

.npmrc

@@ -1,10 +1,6 @@
-hoist-pattern[]=*eslint*
-hoist-pattern[]=*babel*
-hoist-pattern[]=@emotion/*
 hoist-pattern[]=postcss
-hoist-pattern[]=pug
-hoist-pattern[]=source-map-support
-hoist-pattern[]=ts-node
+hoist-pattern[]=pug # playground/vue > @vue/compiler-sfc
+hoist-pattern[]=ts-node # playground/tailwind
 strict-peer-dependencies=false
 shell-emulator=true
 auto-install-peers=false

package.json

@@ -31,46 +31,46 @@
     "ci-publish": "tsx scripts/publishCI.ts"
   },
   "devDependencies": {
-    "@babel/types": "^7.21.3",
-    "@types/babel__core": "^7.20.0",
+    "@babel/types": "^7.22.10",
+    "@types/babel__core": "^7.20.1",
     "@types/convert-source-map": "^2.0.0",
-    "@types/debug": "^4.1.7",
+    "@types/debug": "^4.1.8",
     "@types/fs-extra": "^11.0.1",
     "@types/minimist": "^1.2.2",
-    "@types/node": "^18.15.11",
+    "@types/node": "^18.17.5",
     "@types/prompts": "^2.4.4",
     "@types/resolve": "^1.20.2",
-    "@types/semver": "^7.3.13",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
+    "@types/semver": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "conventional-changelog-cli": "^2.2.2",
-    "eslint": "^8.37.0",
-    "eslint-define-config": "^1.17.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint": "^8.47.0",
+    "eslint-define-config": "^1.23.0",
+    "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-regexp": "^1.14.0",
+    "eslint-plugin-regexp": "^1.15.0",
     "execa": "^6.1.0",
-    "fast-glob": "^3.2.12",
+    "fast-glob": "^3.3.1",
     "fs-extra": "^11.1.1",
-    "lint-staged": "^13.2.0",
+    "lint-staged": "^13.3.0",
     "minimist": "^1.2.8",
     "npm-run-all": "^4.1.5",
     "picocolors": "^1.0.0",
-    "playwright-chromium": "^1.32.1",
-    "pnpm": "^7.30.5",
-    "prettier": "2.8.7",
+    "playwright-chromium": "^1.37.0",
+    "pnpm": "^7.33.6",
+    "prettier": "2.8.8",
     "prompts": "^2.4.2",
-    "resolve": "^1.22.1",
-    "rollup": "^3.20.2",
+    "resolve": "^1.22.4",
+    "rollup": "^3.28.0",
     "rollup-plugin-license": "^2.9.1",
-    "semver": "^7.3.8",
-    "simple-git-hooks": "^2.8.1",
-    "tsx": "^3.12.6",
+    "semver": "^7.5.4",
+    "simple-git-hooks": "^2.9.0",
+    "tsx": "^3.12.7",
     "typescript": "^4.9.5",
-    "unbuild": "^1.1.2",
-    "vite": "^4.3.5",
-    "vitest": "^0.29.8",
-    "vue": "^3.3.0-beta.5"
+    "unbuild": "2.0.0-rc.0",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.1",
+    "vue": "^3.3.4"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm exec lint-staged --concurrent false",
@@ -90,7 +90,7 @@
       "eslint --cache --fix"
     ]
   },
-  "packageManager": "pnpm@7.30.5",
+  "packageManager": "pnpm@7.33.6",
   "pnpm": {
     "overrides": {
       "@vitejs/plugin-vue": "workspace:*"

packages/plugin-vue-jsx/package.json

@@ -11,7 +11,6 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     }
@@ -35,12 +34,12 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx#readme",
   "dependencies": {
-    "@babel/core": "^7.21.3",
-    "@babel/plugin-transform-typescript": "^7.21.3",
-    "@vue/babel-plugin-jsx": "^1.1.1"
+    "@babel/core": "^7.22.10",
+    "@babel/plugin-transform-typescript": "^7.22.10",
+    "@vue/babel-plugin-jsx": "^1.1.5"
   },
   "devDependencies": {
-    "vite": "^4.3.5"
+    "vite": "^4.4.9"
   },
   "peerDependencies": {
     "vite": "^4.0.0",

packages/plugin-vue-jsx/src/index.ts

@@ -136,13 +136,13 @@ function vueJsxPlugin(options: Options = {}): Plugin {
         }
 
         // check for hmr injection
-        const declaredComponents: { name: string }[] = []
+        const declaredComponents: string[] = []
         const hotComponents: HotComponent[] = []
         let hasDefault = false
 
         for (const node of result.ast!.program.body) {
           if (node.type === 'VariableDeclaration') {
-            const names = parseComponentDecls(node, code)
+            const names = parseComponentDecls(node)
             if (names.length) {
               declaredComponents.push(...names)
             }
@@ -154,13 +154,11 @@ function vueJsxPlugin(options: Options = {}): Plugin {
               node.declaration.type === 'VariableDeclaration'
             ) {
               hotComponents.push(
-                ...parseComponentDecls(node.declaration, code).map(
-                  ({ name }) => ({
-                    local: name,
-                    exported: name,
-                    id: getHash(id + name),
-                  }),
-                ),
+                ...parseComponentDecls(node.declaration).map((name) => ({
+                  local: name,
+                  exported: name,
+                  id: getHash(id + name),
+                })),
               )
             } else if (node.specifiers.length) {
               for (const spec of node.specifiers) {
@@ -169,7 +167,7 @@ function vueJsxPlugin(options: Options = {}): Plugin {
                   spec.exported.type === 'Identifier'
                 ) {
                   const matched = declaredComponents.find(
-                    ({ name }) => name === spec.local.name,
+                    (name) => name === spec.local.name,
                   )
                   if (matched) {
                     hotComponents.push({
@@ -186,12 +184,10 @@ function vueJsxPlugin(options: Options = {}): Plugin {
           if (node.type === 'ExportDefaultDeclaration') {
             if (node.declaration.type === 'Identifier') {
               const _name = node.declaration.name
-              const matched = declaredComponents.find(
-                ({ name }) => name === _name,
-              )
+              const matched = declaredComponents.find((name) => name === _name)
               if (matched) {
                 hotComponents.push({
-                  local: node.declaration.name,
+                  local: _name,
                   exported: 'default',
                   id: getHash(id + 'default'),
                 })
@@ -255,13 +251,11 @@ function vueJsxPlugin(options: Options = {}): Plugin {
   }
 }
 
-function parseComponentDecls(node: types.VariableDeclaration, source: string) {
+function parseComponentDecls(node: types.VariableDeclaration) {
   const names = []
   for (const decl of node.declarations) {
     if (decl.id.type === 'Identifier' && isDefineComponentCall(decl.init)) {
-      names.push({
-        name: decl.id.name,
-      })
+      names.push(decl.id.name)
     }
   }
   return names

packages/plugin-vue/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 4.3.0 (2023-08-17)
+
+* docs: add example for transforming custom blocks (#221) ([a6e013e](https://github.com/vitejs/vite-plugin-vue/commit/a6e013e)), closes [#221](https://github.com/vitejs/vite-plugin-vue/issues/221)
+* fix: make it work when a default lang was specified (#223) ([ff68ed3](https://github.com/vitejs/vite-plugin-vue/commit/ff68ed3)), closes [#223](https://github.com/vitejs/vite-plugin-vue/issues/223) [#17](https://github.com/vitejs/vite-plugin-vue/issues/17)
+* fix: missing typescript declaration for globalTypeFiles (#189) ([1e8d16e](https://github.com/vitejs/vite-plugin-vue/commit/1e8d16e)), closes [#189](https://github.com/vitejs/vite-plugin-vue/issues/189)
+* fix(build): ensure correct typing for node esm (#179) ([8a19ee4](https://github.com/vitejs/vite-plugin-vue/commit/8a19ee4)), closes [#179](https://github.com/vitejs/vite-plugin-vue/issues/179)
+* fix(deps): update all non-major dependencies (#163) ([3c8193d](https://github.com/vitejs/vite-plugin-vue/commit/3c8193d)), closes [#163](https://github.com/vitejs/vite-plugin-vue/issues/163)
+* fix(deps): update all non-major dependencies (#205) ([e014680](https://github.com/vitejs/vite-plugin-vue/commit/e014680)), closes [#205](https://github.com/vitejs/vite-plugin-vue/issues/205)
+* fix(plugin-vue): distinguish HMR and transform descriptor (#227) ([aa2b59d](https://github.com/vitejs/vite-plugin-vue/commit/aa2b59d)), closes [#227](https://github.com/vitejs/vite-plugin-vue/issues/227)
+* fix(plugin-vue): hmr not working when updating script+template at the same time with a template prep ([93c444c](https://github.com/vitejs/vite-plugin-vue/commit/93c444c)), closes [#106](https://github.com/vitejs/vite-plugin-vue/issues/106) [#28](https://github.com/vitejs/vite-plugin-vue/issues/28) [#76](https://github.com/vitejs/vite-plugin-vue/issues/76)
+* feat(types): expose `hoistStatic` option for script compilation (#198) ([7466b4f](https://github.com/vitejs/vite-plugin-vue/commit/7466b4f)), closes [#198](https://github.com/vitejs/vite-plugin-vue/issues/198)
+
+
+
 ## <small>4.2.3 (2023-05-12)</small>
 
 * fix(types): widen allowed script options for 3.3 features ([3ac08e4](https://github.com/vitejs/vite-plugin-vue/commit/3ac08e4))

packages/plugin-vue/README.md

@@ -23,7 +23,18 @@ export interface Options {
   isProduction?: boolean
 
   // options to pass on to vue/compiler-sfc
-  script?: Partial<Pick<SFCScriptCompileOptions, 'babelParserPlugins'>>
+  script?: Partial<
+    Pick<
+      SFCScriptCompileOptions,
+      | 'babelParserPlugins'
+      | 'globalTypeFiles'
+      | 'defineModel'
+      | 'propsDestructure'
+      | 'fs'
+      | 'reactivityTransform'
+    >
+  >
+
   template?: Partial<
     Pick<
       SFCTemplateCompileOptions,
@@ -129,12 +140,15 @@ import yaml from 'js-yaml'
 const vueI18nPlugin = {
   name: 'vue-i18n',
   transform(code, id) {
+    // if .vue file don't have <i18n> block, just return
     if (!/vue&type=i18n/.test(id)) {
       return
     }
+    // parse yaml
     if (/\.ya?ml$/.test(id)) {
       code = JSON.stringify(yaml.load(code.trim()))
     }
+    // mount the value on the i18n property of the component instance
     return `export default Comp => {
       Comp.i18n = ${code}
     }`
@@ -146,6 +160,30 @@ export default {
 }
 ```
 
+Create a file named `Demo.vue`, add `lang="yaml"` to the `<i18n>` blocks, then you can use the syntax of `YAML`:
+
+```vue
+<template>Hello</template>
+
+<i18n lang="yaml">
+message: 'world'
+fullWord: 'hello world'
+</i18n>
+```
+
+`message` is mounted on the i18n property of the component instance, you can use like this:
+
+```vue
+<script setup lang="ts">
+import Demo from 'components/Demo.vue'
+</script>
+
+<template>
+  <Demo /> {{ Demo.i18n.message }}
+  <div>{{ Demo.i18n.fullWord }}</div>
+</template>
+```
+
 ## Using Vue SFCs as Custom Elements
 
 > Requires `vue@^3.2.0` & `@vitejs/plugin-vue@^1.4.0`

packages/plugin-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-vue",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "license": "MIT",
   "author": "Evan You",
   "files": [
@@ -11,7 +11,6 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     }
@@ -39,13 +38,13 @@
     "vue": "^3.2.25"
   },
   "devDependencies": {
-    "@jridgewell/gen-mapping": "^0.3.2",
-    "@jridgewell/trace-mapping": "^0.3.17",
+    "@jridgewell/gen-mapping": "^0.3.3",
+    "@jridgewell/trace-mapping": "^0.3.19",
     "debug": "^4.3.4",
     "rollup": "^3.17.2",
-    "slash": "^5.0.0",
+    "slash": "^5.1.0",
     "source-map": "^0.6.1",
-    "vite": "^4.3.5",
-    "vue": "^3.3.0-beta.5"
+    "vite": "^4.4.9",
+    "vue": "^3.3.4"
   }
 }

packages/plugin-vue/src/handleHotUpdate.ts

@@ -6,7 +6,7 @@ import { isCSSRequest } from 'vite'
 import {
   createDescriptor,
   getDescriptor,
-  setPrevDescriptor,
+  invalidateDescriptor,
 } from './utils/descriptorCache'
 import {
   getResolvedScript,
@@ -26,16 +26,14 @@ export async function handleHotUpdate(
   { file, modules, read }: HmrContext,
   options: ResolvedOptions,
 ): Promise<ModuleNode[] | void> {
-  const prevDescriptor = getDescriptor(file, options, false)
+  const prevDescriptor = getDescriptor(file, options, false, true)
   if (!prevDescriptor) {
     // file hasn't been requested yet (e.g. async component)
     return
   }
 
-  setPrevDescriptor(file, prevDescriptor)
-
   const content = await read()
-  const { descriptor } = createDescriptor(file, content, options)
+  const { descriptor } = createDescriptor(file, content, options, true)
 
   let needRerender = false
   const affectedModules = new Set<ModuleNode | undefined>()
@@ -150,6 +148,9 @@ export async function handleHotUpdate(
     updateType.push(`style`)
   }
   if (updateType.length) {
+    // invalidate the descriptor cache so that the next transform will
+    // re-analyze the file and pick up the changes.
+    invalidateDescriptor(file)
     debug(`[vue:update(${updateType.join('&')})] ${file}`)
   }
   return [...affectedModules].filter(Boolean) as ModuleNode[]

packages/plugin-vue/src/index.ts

@@ -34,10 +34,12 @@ export interface Options {
     Pick<
       SFCScriptCompileOptions,
       | 'babelParserPlugins'
+      | 'globalTypeFiles'
       | 'defineModel'
       | 'propsDestructure'
       | 'fs'
       | 'reactivityTransform'
+      | 'hoistStatic'
     >
   >
   template?: Partial<

packages/plugin-vue/src/main.ts

@@ -9,6 +9,7 @@ import { addMapping, fromMap, toEncodedMap } from '@jridgewell/gen-mapping'
 import { normalizePath, transformWithEsbuild } from 'vite'
 import {
   createDescriptor,
+  getDescriptor,
   getPrevDescriptor,
   setSrcDescriptor,
 } from './utils/descriptorCache'
@@ -35,10 +36,12 @@ export async function transformMain(
 ) {
   const { devServer, isProduction, devToolsEnabled } = options
 
-  // prev descriptor is only set and used for hmr
   const prevDescriptor = getPrevDescriptor(filename)
   const { descriptor, errors } = createDescriptor(filename, code, options)
 
+  // set descriptor for HMR if it's not set yet
+  getDescriptor(filename, options, true, true)
+
   if (errors.length) {
     errors.forEach((error) =>
       pluginContext.error(createRollupError(filename, error)),
@@ -264,7 +267,7 @@ async function genTemplateCode(
   // 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) {
+  if ((!template.lang || template.lang === 'html') && !template.src) {
     return transformTemplateInMain(
       template.content,
       descriptor,

packages/plugin-vue/src/script.ts

@@ -105,7 +105,7 @@ export function canInlineMain(
     return false
   }
   const lang = descriptor.script?.lang || descriptor.scriptSetup?.lang
-  if (!lang) {
+  if (!lang || lang === 'js') {
     return true
   }
   if (lang === 'ts' && options.devServer) {

packages/plugin-vue/src/template.ts

@@ -7,7 +7,7 @@ import type {
   SFCTemplateCompileResults,
 } from 'vue/compiler-sfc'
 import type { PluginContext, TransformPluginContext } from 'rollup'
-import { getResolvedScript } from './script'
+import { getResolvedScript, resolveScript } from './script'
 import { createRollupError } from './utils/error'
 import type { ResolvedOptions } from '.'
 
@@ -70,6 +70,7 @@ export function compile(
   ssr: boolean,
 ) {
   const filename = descriptor.filename
+  resolveScript(descriptor, options, ssr)
   const result = options.compiler.compileTemplate({
     ...resolveTemplateCompilerOptions(descriptor, options, ssr)!,
     source: code,
@@ -175,7 +176,7 @@ export function resolveTemplateCompilerOptions(
     ssr,
     ssrCssVars: cssVars,
     transformAssetUrls,
-    preprocessLang: block.lang,
+    preprocessLang: block.lang === 'html' ? undefined : block.lang,
     preprocessOptions,
     compilerOptions: {
       ...options.template?.compilerOptions,

packages/plugin-vue/src/utils/descriptorCache.ts

@@ -12,12 +12,14 @@ export interface SFCParseResult {
 }
 
 export const cache = new Map<string, SFCDescriptor>()
+export const hmrCache = new Map<string, SFCDescriptor>()
 const prevCache = new Map<string, SFCDescriptor | undefined>()
 
 export function createDescriptor(
   filename: string,
   source: string,
   { root, isProduction, sourceMap, compiler }: ResolvedOptions,
+  hmr = false,
 ): SFCParseResult {
   const { descriptor, errors } = compiler.parse(source, {
     filename,
@@ -28,35 +30,39 @@ export function createDescriptor(
   // project (relative to root) and on different systems.
   const normalizedPath = slash(path.normalize(path.relative(root, filename)))
   descriptor.id = getHash(normalizedPath + (isProduction ? source : ''))
-
-  cache.set(filename, descriptor)
+  ;(hmr ? hmrCache : cache).set(filename, descriptor)
   return { descriptor, errors }
 }
 
 export function getPrevDescriptor(filename: string): SFCDescriptor | undefined {
   return prevCache.get(filename)
 }
 
-export function setPrevDescriptor(
-  filename: string,
-  entry: SFCDescriptor,
-): void {
-  prevCache.set(filename, entry)
+export function invalidateDescriptor(filename: string, hmr = false): void {
+  const _cache = hmr ? hmrCache : cache
+  const prev = _cache.get(filename)
+  _cache.delete(filename)
+  if (prev) {
+    prevCache.set(filename, prev)
+  }
 }
 
 export function getDescriptor(
   filename: string,
   options: ResolvedOptions,
   createIfNotFound = true,
+  hmr = false,
 ): SFCDescriptor | undefined {
-  if (cache.has(filename)) {
-    return cache.get(filename)!
+  const _cache = hmr ? hmrCache : cache
+  if (_cache.has(filename)) {
+    return _cache.get(filename)!
   }
   if (createIfNotFound) {
     const { descriptor, errors } = createDescriptor(
       filename,
       fs.readFileSync(filename, 'utf-8'),
       options,
+      hmr,
     )
     if (errors.length) {
       throw errors[0]

playground/package.json

@@ -6,7 +6,7 @@
     "convert-source-map": "^2.0.0",
     "css-color-names": "^1.0.1",
     "kill-port": "^1.6.1",
-    "node-fetch": "^3.3.1",
-    "sirv": "^2.0.2"
+    "node-fetch": "^3.3.2",
+    "sirv": "^2.0.3"
   }
 }

playground/ssr-vue/package.json

@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@vitejs/test-example-external-component": "file:example-external-component",
-    "pinia": "^2.0.33",
-    "vue": "^3.3.0-beta.5",
-    "vue-router": "^4.1.6"
+    "pinia": "^2.1.6",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*",

playground/ssr-vue/vite.config.noexternal.js

@@ -1,25 +1,27 @@
-import config from './vite.config.js'
-/**
- * @type {import('vite').UserConfig}
- */
-export default Object.assign(config, {
-  ssr: {
-    noExternal: /./,
-  },
-  resolve: {
-    // necessary because vue.ssrUtils is only exported on cjs modules
-    alias: [
-      {
-        find: '@vue/runtime-dom',
-        replacement: '@vue/runtime-dom/dist/runtime-dom.cjs.js',
-      },
-      {
-        find: '@vue/runtime-core',
-        replacement: '@vue/runtime-core/dist/runtime-core.cjs.js',
-      },
-    ],
-  },
-  optimizeDeps: {
-    exclude: ['@vitejs/test-example-external-component'],
-  },
+import { defineConfig } from 'vite'
+import createConfig from './vite.config.js'
+
+export default defineConfig((env) => {
+  const config = createConfig(env)
+  return Object.assign(config, {
+    ssr: {
+      noExternal: /./,
+    },
+    resolve: {
+      // necessary because vue.ssrUtils is only exported on cjs modules
+      alias: [
+        {
+          find: '@vue/runtime-dom',
+          replacement: '@vue/runtime-dom/dist/runtime-dom.cjs.js',
+        },
+        {
+          find: '@vue/runtime-core',
+          replacement: '@vue/runtime-core/dist/runtime-core.cjs.js',
+        },
+      ],
+    },
+    optimizeDeps: {
+      exclude: ['@vitejs/test-example-external-component'],
+    },
+  })
 })

playground/tailwind/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <PugTemplate />
+</template>
+
+<script setup lang="ts">
+import PugTemplate from './PugTemplate.vue'
+</script>

playground/tailwind/PugTemplate.vue

@@ -0,0 +1,3 @@
+<template lang="pug">
+.bg-red-400.pug Pug template
+</template>

playground/tailwind/__tests__/tailwind.spec.ts

@@ -0,0 +1,27 @@
+import { expect, test } from 'vitest'
+import {
+  editFile,
+  getBgColor,
+  isServe,
+  page,
+  untilBrowserLogAfter,
+  untilUpdated,
+} from '~utils'
+
+test.runIf(isServe)('regenerate CSS and HMR (pug template)', async () => {
+  const el = await page.$('.pug')
+  expect(await getBgColor(el)).toBe('rgb(248, 113, 113)')
+
+  await untilBrowserLogAfter(
+    () =>
+      editFile('PugTemplate.vue', (code) =>
+        code.replace('bg-red-400', 'bg-red-600'),
+      ),
+    [
+      '[vite] css hot updated: /index.css',
+      '[vite] hot updated: /PugTemplate.vue?vue&type=template&lang.js',
+    ],
+    false,
+  )
+  await untilUpdated(() => getBgColor(el), 'rgb(220, 38, 38)')
+})

playground/tailwind/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

playground/tailwind/index.html

@@ -0,0 +1,9 @@
+<link rel="stylesheet" href="./index.css" />
+
+<div id="app"></div>
+<script type="module">
+  import { createApp } from 'vue'
+  import App from './App.vue'
+
+  createApp(App).mount('#app')
+</script>

playground/tailwind/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@vitejs/test-tailwind",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.15",
+    "tailwindcss": "^3.3.3",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "workspace:*",
+    "ts-node": "^10.9.1"
+  }
+}

playground/tailwind/postcss.config.ts

@@ -0,0 +1,7 @@
+// postcss.config.ts
+module.exports = {
+  plugins: {
+    tailwindcss: { config: __dirname + '/tailwind.config.js' },
+    autoprefixer: {},
+  },
+}

playground/tailwind/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: [__dirname + '/**/*.vue'],
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

playground/tailwind/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    // to make tests faster
+    minify: false,
+  },
+})

playground/vue-jsx/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.0-beta.5"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*",

playground/vue-legacy/package.json

@@ -9,10 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.0-beta.5"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*",
-    "@vitejs/plugin-legacy": "^4.0.2"
+    "@vitejs/plugin-legacy": "^4.1.1"
   }
 }

playground/vue-lib/package.json

@@ -9,7 +9,7 @@
     "build-consumer": "vite build --config ./vite.config.consumer.ts"
   },
   "dependencies": {
-    "vue": "^3.3.0-beta.5"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*"

playground/vue-server-origin/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.0-beta.5"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*"

playground/vue-sourcemap/package.json

@@ -10,11 +10,11 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*",
-    "less": "^4.1.3",
+    "less": "^4.2.0",
     "postcss-nested": "^6.0.1",
-    "sass": "^1.60.0"
+    "sass": "^1.65.1"
   },
   "dependencies": {
-    "vue": "^3.3.0-beta.5"
+    "vue": "^3.3.4"
   }
 }

playground/vue/DefaultLangs.vue

@@ -0,0 +1,16 @@
+<template lang="html">
+  <h2>default langs</h2>
+  <div>
+    default lang: <span class="default-langs">{{ foo }}</span>
+  </div>
+</template>
+
+<script setup lang="js">
+const foo = 'foo'
+</script>
+
+<style scoped lang="css">
+.default-langs {
+  color: blue;
+}
+</style>

playground/vue/Main.vue

@@ -11,6 +11,7 @@
   <TypeProps msg="msg" bar="bar" :id="123" />
   <Syntax />
   <PreProcessors />
+  <PreProcessorsHmr />
   <CssModules />
   <Assets />
   <CustomBlock />
@@ -28,6 +29,7 @@
   <WorkerTest />
   <Url />
   <TsGeneric msg="hello" />
+  <DefaultLangs />
 </template>
 
 <script setup lang="ts">
@@ -36,6 +38,7 @@ import Hmr from './Hmr.vue'
 import HmrTsx from './HmrTsx.vue'
 import Syntax from './Syntax.vue'
 import PreProcessors from './PreProcessors.vue'
+import PreProcessorsHmr from './PreProcessorsHmr.vue'
 import CssModules from './CssModules.vue'
 import Assets from './Assets.vue'
 import CustomBlock from './CustomBlock.vue'
@@ -50,6 +53,7 @@ import WorkerTest from './worker.vue'
 import { ref } from 'vue'
 import Url from './Url.vue'
 import TypeProps from './TypeProps.vue'
+import DefaultLangs from './DefaultLangs.vue'
 
 const TsGeneric = defineAsyncComponent(() => import('./TsGeneric.vue'))
 

playground/vue/PreProcessorsHmr.vue

@@ -0,0 +1,8 @@
+<template lang="pug">
+h2.pre-processors-hmr Pre-Processors Hmr
+p.pug-hmr {{ preHmr }}
+</template>
+
+<script setup>
+const preHmr = 'pre-hmr'
+</script>

playground/vue/__tests__/vue.spec.ts

@@ -95,6 +95,16 @@ describe('pre-processors', () => {
     )
     await untilUpdated(() => getColor('p.pug-stylus'), 'orange')
   })
+
+  test('pug hmr', async () => {
+    expect(await page.textContent('p.pug-hmr')).toMatch('pre-hmr')
+    editFile('PreProcessorsHmr.vue', (code) =>
+      code
+        .replace('p.pug-hmr {{ preHmr }}', 'p.pug-hmr {{ postHmr }}')
+        .replace(`const preHmr = 'pre-hmr'`, `const postHmr = 'post-hmr'`),
+    )
+    await untilUpdated(() => page.textContent('p.pug-hmr'), 'post-hmr')
+  })
 })
 
 describe('css modules', () => {
@@ -327,3 +337,10 @@ describe('macro imported types', () => {
 test('TS with generics', async () => {
   expect(await page.textContent('.generic')).toMatch('hello')
 })
+
+describe('default langs', () => {
+  test('should work', async () => {
+    expect(await page.textContent('.default-langs')).toBe('foo')
+    expect(await getColor('.default-langs')).toBe('blue')
+  })
+})

playground/vue/package.json

@@ -10,14 +10,14 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "vue": "^3.3.0-beta.5"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*",
     "js-yaml": "^4.1.0",
-    "less": "^4.1.3",
+    "less": "^4.2.0",
     "pug": "^3.0.2",
-    "sass": "^1.60.0",
+    "sass": "^1.65.1",
     "stylus": "^0.59.0"
   }
 }

playground/vue/tsconfig.json

@@ -3,6 +3,7 @@
     // esbuild transpile should ignore this
     "target": "ES5",
     "jsx": "preserve",
+    "allowJs": true,
     "paths": {
       "~utils": ["../test-utils.ts"],
       "~types": ["./types-aliased.d.ts"]